전남대 FE_정서윤 6주차 과제 Step3

package.json

@@ -30,6 +30,7 @@
     "@tanstack/react-query": "^5.24.1",
     "axios": "^1.6.7",
     "framer-motion": "^11.0.6",
+    "http-proxy-middleware": "^3.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-error-boundary": "^4.0.12",

setupProxy.js

@@ -0,0 +1,25 @@
+import { createProxyMiddleware } from 'http-proxy-middleware';
+
+const apiServers = {
+  server1: 'http://43.201.112.200:8080',
+  server2: 'http://3.35.176.195:8080',
+  server3: 'http://13.124.134.51:8080',
+  server4: 'http://13.125.10.230:8080',
+  server5: 'https://api.example.com',
+};
+
+export default function(app) {
+  Object.keys(apiServers).forEach((key) => {
+    app.use(
+      `/api/${key}`,
+      createProxyMiddleware({
+        target: apiServers[key],
+        changeOrigin: true,
+        pathRewrite: {
+          [`^/api/${key}`]: '', // 프록시 경로에서 서버 경로로 변환
+        },
+        logLevel: 'debug', // 로그를 통해 디버깅
+      })
+    );
+  });
+};

src/api/hooks/categories.mock.ts

@@ -1,9 +1,11 @@
 import { rest } from 'msw';
 
-import { getCategoriesPath } from './useGetCategorys';
+import { apiServers } from '../../api/instance'
+
+const serverUrl = apiServers.server5
 
 export const categoriesMockHandler = [
-  rest.get(getCategoriesPath(), (_, res, ctx) => {
+  rest.get(`${serverUrl}/api/categories`, (_req, res, ctx) => {
     return res(ctx.json(CATEGORIES_RESPONSE_DATA));
   }),
 ];
@@ -25,4 +27,9 @@ const CATEGORIES_RESPONSE_DATA = [
     imageUrl:
       'https://img1.daumcdn.net/thumb/S104x104/?fname=https%3A%2F%2Fst.kakaocdn.net%2Fproduct%2Fgift%2Fproduct%2F20240131153049_5a22b137a8d346e9beb020a7a7f4254a.jpg',
   },
+
+  // 나머지 요청은 pass-through
+  rest.get('*', (req, _res, _ctx) => {
+    return req.passthrough();
+  }),
 ];

src/api/hooks/members.mock.ts

@@ -0,0 +1,33 @@
+import { rest } from 'msw';
+
+export const membersMockHandler = [
+  // 회원 가입 핸들러
+  rest.post('/api/members/register', async (req, res, ctx) => {
+    const { email, password } = await req.json();
+
+    console.log('회원 가입 요청', { email, password });
+
+    // 회원 가입 성공 응답 모킹
+    return res(
+      ctx.status(200),
+      ctx.json({
+        token: 'mock-token-for-register',
+      }),
+    );
+  }),
+
+  // 로그인 핸들러
+  rest.post('/api/members/login', async (req, res, ctx) => {
+    const { email, password } = await req.json();
+
+    console.log('로그인 요청', { email, password });
+
+    // 로그인 성공 응답 모킹
+    return res(
+      ctx.status(200),
+      ctx.json({
+        token: 'mock-token-for-login',
+      }),
+    );
+  }),
+];

src/api/hooks/useApiServer.tsx

@@ -0,0 +1,24 @@
+// useApiServer.tsx
+import { useEffect, useState } from 'react';
+
+import type { ApiServerkey } from '../instance';
+import { queryClient } from '../instance'; // queryClient import 추가
+import { changeApiServer } from '../instance';
+
+export const useApiServer = () => {
+  const [apiServer, setApiServer] = useState<ApiServerkey>('server1');
+
+  useEffect(() => {
+    changeApiServer(apiServer);
+    queryClient.invalidateQueries(); // 모든 쿼리 무효화
+  }, [apiServer]);
+
+  const handleChangeApiServer = (serverKey: ApiServerkey) => {
+    setApiServer(serverKey);
+  };
+
+  return {
+    apiServer,
+    changeApiServer: handleChangeApiServer,
+  };
+};

src/api/hooks/useGetCategorys.ts

@@ -7,15 +7,14 @@ import { BASE_URL, fetchInstance } from '../instance';
 export type CategoryResponseData = CategoryData[];
 
 export const getCategoriesPath = () => `${BASE_URL}/api/categories`;
-const categoriesQueryKey = [getCategoriesPath()];
 
 export const getCategories = async () => {
-  const response = await fetchInstance.get<CategoryResponseData>(getCategoriesPath());
+  const response = await fetchInstance().get<CategoryResponseData>(getCategoriesPath());
   return response.data;
 };
 
 export const useGetCategories = () =>
   useQuery({
-    queryKey: categoriesQueryKey,
+    queryKey: [getCategoriesPath()],
     queryFn: getCategories,
   });

src/api/hooks/useGetProductDetail.ts

@@ -15,7 +15,7 @@ export type GoodsDetailResponseData = ProductData;
 export const getProductDetailPath = (productId: string) => `${BASE_URL}/api/products/${productId}`;
 
 export const getProductDetail = async (params: ProductDetailRequestParams) => {
-  const response = await fetchInstance.get<GoodsDetailResponseData>(
+  const response = await fetchInstance().get<GoodsDetailResponseData>(
     getProductDetailPath(params.productId),
   );
 

src/api/hooks/useGetProductOptions.ts

@@ -13,7 +13,7 @@ export const getProductOptionsPath = (productId: string) =>
   `${BASE_URL}/api/products/${productId}/options`;
 
 export const getProductOptions = async (params: ProductDetailRequestParams) => {
-  const response = await fetchInstance.get<ProductOptionsResponseData>(
+  const response = await fetchInstance().get<ProductOptionsResponseData>(
     getProductOptionsPath(params.productId),
   );
   return response.data;

src/api/hooks/useGetProducts.ts

@@ -44,7 +44,7 @@ export const getProductsPath = ({ categoryId, pageToken, maxResults }: RequestPa
 };
 
 export const getProducts = async (params: RequestParams): Promise<ProductsResponseData> => {
-  const response = await fetchInstance.get<ProductsResponseRawData>(getProductsPath(params));
+  const response = await fetchInstance().get<ProductsResponseRawData>(getProductsPath(params));
   const data = response.data;
 
   return {