fix: maximum callstack 오류 수정

Author: summerDev96

package-lock.json

@@ -1,16 +1,13 @@
 import axios, { AxiosError } from 'axios';
 
-// 서버 사이드 여부
-const isServer = typeof window === 'undefined';
-
-const apiClient = axios.create({
-  baseURL: isServer ? `${process.env.NEXT_PUBLIC_ROOT_URL}/api` : process.env.NEXT_PUBLIC_BASE_URL,
+const clientApiClient = axios.create({
+  baseURL: process.env.NEXT_PUBLIC_BASE_URL,
   timeout: 10_000,
   headers: { 'Content-Type': 'application/json' },
 });
 
 // 에러 처리
-apiClient.interceptors.response.use(
+clientApiClient.interceptors.response.use(
   (res) => res.data,
   async (error: AxiosError) => {
     if (!error.response) {
@@ -23,4 +20,4 @@ apiClient.interceptors.response.use(
   },
 );
 
-export default apiClient;
+export default clientApiClient;

src/app/api/apiClient.ts renamed to src/app/api/clientApiClient.ts

@@ -0,0 +1,9 @@
+import axios from 'axios';
+
+const serverApiClient = axios.create({
+  baseURL: process.env.NEXT_PUBLIC_SERVER_BASE_URL,
+  timeout: 10_000,
+  headers: { 'Content-Type': 'application/json' },
+});
+
+export default serverApiClient;

src/app/api/serverApiClient.ts

@@ -6,24 +6,29 @@ import {
   UpdateItemRequest,
 } from '@/types/TodoTypes';
 
-import apiClient from './apiClient';
+import clientApiClient from './clientApiClient';
+import serverApiClient from './serverApiClient';
 
 export const addItem = (data: AddItemRequest): Promise<ItemDetail> => {
-  return apiClient.post(`${process.env.NEXT_PUBLIC_TENANT_ID}/items`, data);
+  return clientApiClient.post(`${process.env.NEXT_PUBLIC_TENANT_ID}/items`, data);
 };
 
 export const getItemList = (): Promise<Item[]> => {
-  return apiClient.get(`${process.env.NEXT_PUBLIC_TENANT_ID}/items`, {});
+  return clientApiClient.get(`${process.env.NEXT_PUBLIC_TENANT_ID}/items`, {});
+};
+
+export const getItemListServer = () => {
+  return serverApiClient.get(`/${process.env.NEXT_PUBLIC_TENANT_ID}/items`);
 };
 
 export const getItem = (itemId: number): Promise<ItemDetail> => {
-  return apiClient.get(`${process.env.NEXT_PUBLIC_TENANT_ID}/items/${itemId}`);
+  return clientApiClient.get(`${process.env.NEXT_PUBLIC_TENANT_ID}/items/${itemId}`);
 };
 
 export const updateItem = (itemId: number, data: UpdateItemRequest): Promise<ItemDetail> => {
-  return apiClient.patch(`${process.env.NEXT_PUBLIC_TENANT_ID}/items/${itemId}`, data);
+  return clientApiClient.patch(`${process.env.NEXT_PUBLIC_TENANT_ID}/items/${itemId}`, data);
 };
 
 export const deleteItem = (itemId: number): Promise<DeleteItemResponse> => {
-  return apiClient.delete(`${process.env.NEXT_PUBLIC_TENANT_ID}/items/${itemId}`);
+  return clientApiClient.delete(`${process.env.NEXT_PUBLIC_TENANT_ID}/items/${itemId}`);
 };

src/app/api/todo.ts

@@ -1,11 +1,11 @@
-import { getItemList } from '@/app/api/todo';
+import { getItemListServer } from '@/app/api/todo';
 import HydrationWrapper from '@/components/HydrationWrapper';
 import TodoContent from '@/components/TodoContent';
 
 export default async function Page() {
   return (
     <>
-      <HydrationWrapper prefetchQueries={[{ queryKey: ['todos'], queryFn: getItemList }]}>
+      <HydrationWrapper prefetchQueries={[{ queryKey: ['todos'], queryFn: getItemListServer }]}>
         <div className='flex justify-center pt-6 bg-gray-50 min-h-[calc(100vh-3.75rem)]'>
           <TodoContent />
         </div>

src/app/page.tsx

@@ -13,11 +13,10 @@ const HydrationWrapper = async ({ prefetchQueries, children }: HydrationWrapperP
   await Promise.all(
     prefetchQueries.map(async ({ queryKey, queryFn }) => {
       try {
-        const result = await queryFn();
-        return queryClient.prefetchQuery({ queryKey, queryFn: async () => result });
+        queryClient.prefetchQuery({ queryKey, queryFn });
       } catch (err) {
         console.error('prefetchQuery 실패:', queryKey, err);
-        queryClient.setQueryData(queryKey, null);
+        queryClient.setQueryData(queryKey, []);
       }
     }),
   );