feat: 마이페이지 api 연결 구현

babel.config.js

@@ -5,5 +5,18 @@ module.exports = (api) => {
       ['babel-preset-expo', { jsxImportSource: 'nativewind' }],
       'nativewind/babel',
     ],
+    plugins: [
+      [
+        'module-resolver',
+        {
+          root: ['./'],
+          alias: {
+            //         '@': './src',
+            //         '@/assets': './assets',
+            api: './codegen/__generated__/api_sdk',
+          },
+        },
+      ],
+    ],
   }
 }

package.json

@@ -69,6 +69,7 @@
     "@svgr/plugin-svgo": "^8.1.0",
     "@types/node": "^24.2.1",
     "@types/react": "~19.0.10",
+    "babel-plugin-module-resolver": "^5.0.2",
     "commander": "^14.0.0",
     "eslint": "^9.0.0",
     "eslint-config-expo": "~9.2.0",

src/api.ts

@@ -1,17 +1,25 @@
 import { Api } from 'api'
-import { getToken } from './lib/storage'
+import { deleteToken, getToken } from './lib/storage'
 
-function customFetch(
+async function customFetch(
   input: RequestInfo | URL,
   init?: RequestInit,
 ): Promise<Response> {
-  return fetch(input, init)
+  const response = await fetch(input, init)
+
+  if (response.status === 401) {
+    await deleteToken('accessToken')
+    const { router } = await import('expo-router')
+    router.replace('/login')
+  }
+
+  return response
 }
 
 let instance: Api<unknown>['api'] | null = null
 
 /**
- * 토큰 로직 추가 필요
+ * API 인스턴스 반환
  */
 export function api(): Api<unknown>['api'] {
   if (instance) {

src/apis/point/keys.ts

@@ -0,0 +1,3 @@
+export const pointKeys = {
+  all: ['point'] as const,
+}

src/apis/point/queries.ts

@@ -0,0 +1,48 @@
+import { infiniteQueryOptions, queryOptions } from '@tanstack/react-query'
+import type { ApplicationResponse, GetMyPointHistoryParams } from 'api'
+import { api } from '@/api'
+import { pointKeys } from './keys'
+
+type MyBalanceResponse = Omit<ApplicationResponse, 'data'> & {
+  data: {
+    current_balance: number
+  }
+}
+
+type MyPointHistoryResponse = Omit<ApplicationResponse, 'data'> & {
+  data: {
+    nextCursor: number
+    content: {
+      id: number
+      change_amount: number
+      balance_after: number
+      description: string
+      type: 'REVIEW_WRITE' | 'DAILY_LIKE'
+      createdAt: string
+    }
+    pageable: {
+      page_number: number
+      page_size: number
+    }
+    total_elements: number
+    total_pages: number
+    last: boolean
+    first: boolean
+  }
+}
+
+export const pointQueries = {
+  getMyBalance: () =>
+    queryOptions<MyBalanceResponse>({
+      queryKey: pointKeys.all,
+      queryFn: () => api().getMyBalance() as Promise<MyBalanceResponse>,
+    }),
+  getMyPointHistory: () =>
+    infiniteQueryOptions<MyPointHistoryResponse>({
+      queryKey: pointKeys.all,
+      queryFn: ({ pageParam = undefined }) =>
+        api().getMyPointHistory(pageParam as GetMyPointHistoryParams),
+      getNextPageParam: (lastPage) => lastPage?.data?.nextCursor,
+      initialPageParam: undefined as number | undefined,
+    }),
+}

src/apis/ticket/mutations.ts

@@ -1,15 +1,15 @@
-import { api } from '@/api'
 import { useMutation, useQueryClient } from '@tanstack/react-query'
 import type { TicketCreateReq, TicketUpdateReq } from 'api'
+import { api } from '@/api'
+
 import { ticketKeys } from './keys'
 
 export const ticketMutations = {
   createTicket: () => {
     const queryClient = useQueryClient()
 
     return useMutation({
-      mutationFn: ({ userId, ...data }: { userId: number } & TicketCreateReq) =>
-        api().createTicket({ userId }, data),
+      mutationFn: (data: TicketCreateReq) => api().createTicket(data),
       onSuccess: () => {
         queryClient.invalidateQueries({ queryKey: ticketKeys.ticketList.all() })
       },

src/apis/ticket/queries.ts

@@ -18,7 +18,13 @@ export const ticketQueries = {
     queryOptions({
       queryKey: ticketKeys.ticketList.list(params),
       queryFn: () => api().getTicketList(params),
-      enabled: !!params.userId,
+    }),
+  getTicketDetail: ({ ticketId }: { ticketId: number }) =>
+    queryOptions({
+      queryKey: ticketKeys.getTicketDetail({ ticketId }),
+      queryFn: () => api().getTicketDetail(ticketId),
+      enabled: !!ticketId,
+      select: (data) => data.data,
     }),
   getTicketDetail: ({ ticketId, userId }: GetTicketDetailParams) =>
     queryOptions({

src/apis/user/mutations.ts

@@ -14,10 +14,10 @@ export const userMutations = {
     }),
   deleteMyAccount: () =>
     mutationOptions({
-      mutationFn: api().deleteMyAccount,
+      mutationFn: () => api().deleteMyAccount(),
     }),
   setupComplete: () =>
     mutationOptions({
-      mutationFn: api().setupComplete,
+      mutationFn: () => api().setupComplete(),
     }),
 }

src/apis/user/queries.ts

@@ -13,6 +13,6 @@ export const userQueries = {
   getMyInfo: () =>
     queryOptions({
       queryKey: userKeys.myInfo(),
-      queryFn: api().getMyInfo,
+      queryFn: () => api().getMyInfo(),
     }),
 }

src/app/(auth)/_layout.tsx

@@ -1,8 +1,10 @@
-import { useUser } from '@/providers/user.provider'
 import { Redirect, Stack } from 'expo-router'
+import { useAuth } from '@/providers/user.provider'
 
 export default function AuthLayout() {
-  const user = useUser()
+  const { user, isLoading } = useAuth()
+
+  if (isLoading) return null
 
   // exp가 고정된 값(1970년)으로 들어와서 우선 제거함
   if (!user) return <Redirect href="/login" />