kakao-tech-campus-2nd-step2 · userjmmm · Jul 31, 2024 · Jul 31, 2024 · Jul 31, 2024 · Jul 31, 2024
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -29,6 +29,7 @@
     "@emotion/styled": "^11.11.0",
     "@tanstack/react-query": "^5.24.1",
     "axios": "^1.6.7",
+    "base-64": "^1.0.0",
     "framer-motion": "^11.0.6",
     "glob": "^11.0.0",
     "react": "^18.2.0",
@@ -54,6 +55,7 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "@types/base-64": "^1.0.2",
     "@types/jest": "^27.5.2",
     "@types/node": "^16.18.82",
     "@types/react": "^18.2.57",
@@ -87,4 +89,4 @@
   "overrides": {
     "react-refresh": "0.11.0"
   }
-}
+}
diff --git a/public/token.html b/public/token.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>OAuth Callback</title>
+  <style>
+    body {
+      font-family: Arial, sans-serif;
+      text-align: center;
+      margin-top: 50px;
+    }
+  </style>
+</head>
+<body>
+  <h1>OAuth Callback</h1>
+  <p id="tokenDisplay">토큰을 기다리고 있습니다...</p>
+  <script>
+    const params = new URLSearchParams(window.location.search);
+    const token = params.get('tokenValue');
+
+    if (token) {
+      // 토큰이 존재하면 로컬 스토리지에 저장
+      console.log('Received token:', token);
+      localStorage.setItem('authToken', token);
+      window.location.href = '/';
+    } else {
+      console.error('Token not found in query parameters.');
+      tokenDisplay.textContent = 'Token not found in query parameters.';
+    }
+  </script>
+</body>
+</html>
diff --git a/src/api/hooks/categories.mock.ts b/src/api/hooks/categories.mock.ts
@@ -8,21 +8,48 @@ export const categoriesMockHandler = [
   }),
 ];
 
-const CATEGORIES_RESPONSE_DATA = [
-  {
-    id: 2920,
-    name: '생일',
-    description: '감동을 높여줄 생일 선물 리스트',
-    color: '#5949a3',
-    imageUrl:
-      'https://img1.daumcdn.net/thumb/S104x104/?fname=https%3A%2F%2Ft1.daumcdn.net%2Fgift%2Fhome%2Ftheme%2F292020231106_MXMUB.png',
+const CATEGORIES_RESPONSE_DATA = {
+  totalElements: 2,
+  totalPages: 1,
+  first: true,
+  last: true,
+  size: 10,
+  content: [
+    {
+      id: 2920,
+      name: '생일',
+      description: '감동을 높여줄 생일 선물 리스트',
+      color: '#5949a3',
+      imageUrl:
+        'https://img1.daumcdn.net/thumb/S104x104/?fname=https%3A%2F%2Ft1.daumcdn.net%2Fgift%2Fhome%2Ftheme%2F292020231106_MXMUB.png',
+    },
+    {
+      id: 2930,
+      name: '교환권',
+      description: '놓치면 후회할 교환권 특가',
+      color: '#9290C3',
+      imageUrl:
+        'https://img1.daumcdn.net/thumb/S104x104/?fname=https%3A%2F%2Fst.kakaocdn.net%2Fproduct%2Fgift%2Fproduct%2F20240131153049_5a22b137a8d346e9beb020a7a7f4254a.jpg',
+    },
+  ],
+  number: 0,
+  sort: {
+    empty: true,
+    sorted: false,
+    unsorted: true,
   },
-  {
-    id: 2930,
-    name: '교환권',
-    description: '놓치면 후회할 교환권 특가',
-    color: '#9290C3',
-    imageUrl:
-      'https://img1.daumcdn.net/thumb/S104x104/?fname=https%3A%2F%2Fst.kakaocdn.net%2Fproduct%2Fgift%2Fproduct%2F20240131153049_5a22b137a8d346e9beb020a7a7f4254a.jpg',
+  numberOfElements: 2,
+  pageable: {
+    pageNumber: 0,
+    pageSize: 10,
+    sort: {
+      empty: true,
+      sorted: false,
+      unsorted: true,
+    },
+    offset: 0,
+    paged: true,
+    unpaged: false,
   },
-];
+  empty: false,
+};
diff --git a/src/api/hooks/useGetCategories.ts b/src/api/hooks/useGetCategories.ts
@@ -2,20 +2,58 @@ import { useQuery } from '@tanstack/react-query';
 
 import type { CategoryData } from '@/types';
 
-import { BASE_URL, fetchInstance } from '../instance';
+import { getBaseUrl, fetchInstance } from '../instance';
 
-export type CategoryResponseData = CategoryData[];
+export type CategoryResponseData = {
+  totalElements: number;
+  totalPages: number;
+  first: boolean;
+  last: boolean;
+  size: number;
+  content: CategoryData[];
+  number: number;
+  sort: {
+    empty: boolean;
+    sorted: boolean;
+    unsorted: boolean;
+  };
+  numberOfElements: number;
+  pageable: {
+    pageNumber: number;
+    pageSize: number;
+    sort: {
+      empty: boolean;
+      sorted: boolean;
+      unsorted: boolean;
+    };
+    offset: number;
+    paged: boolean;
+    unpaged: boolean;
+  };
+  empty: boolean;
+};
+
+export const getCategoriesPath = () => `${getBaseUrl()}/api/categories`;
+
+export const getCategories = async (): Promise<CategoryData[]> => {
+  let allCategories: CategoryData[] = [];
+  let currentPage = 0;
+  let hasNextPage = true;
 
-export const getCategoriesPath = () => `${BASE_URL}/api/categories`;
-const categoriesQueryKey = [getCategoriesPath()];
+  while (hasNextPage) {
+    const response = await fetchInstance.get<CategoryResponseData>(
+      `${getCategoriesPath()}?page=${currentPage}&size=100`
+    );
+    allCategories = [...allCategories, ...response.data.content];
+    hasNextPage = !response.data.last;
+    currentPage++;
+  }
 
-export const getCategories = async () => {
-  const response = await fetchInstance.get<CategoryResponseData>(getCategoriesPath());
-  return response.data;
+  return allCategories;
 };
 
 export const useGetCategories = () =>
   useQuery({
-    queryKey: categoriesQueryKey,
+    queryKey: ['categories'],
     queryFn: getCategories,
   });
diff --git a/src/api/hooks/useGetProductDetail.ts b/src/api/hooks/useGetProductDetail.ts
@@ -2,7 +2,7 @@ import { useSuspenseQuery } from '@tanstack/react-query';
 
 import type { ProductData } from '@/types';
 
-import { BASE_URL, fetchInstance } from '../instance';
+import { getBaseUrl, fetchInstance } from '../instance';
 
 export type ProductDetailRequestParams = {
   productId: string;
@@ -12,7 +12,7 @@ type Props = ProductDetailRequestParams;
 
 export type GoodsDetailResponseData = ProductData;
 
-export const getProductDetailPath = (productId: string) => `${BASE_URL}/api/products/${productId}`;
+export const getProductDetailPath = (productId: string) => `${getBaseUrl()}/api/products/${productId}`;
 
 export const getProductDetail = async (params: ProductDetailRequestParams) => {
   const response = await fetchInstance.get<GoodsDetailResponseData>(

diff --git a/src/api/hooks/useGetProductOptions.ts b/src/api/hooks/useGetProductOptions.ts
@@ -2,15 +2,15 @@ import { useSuspenseQuery } from '@tanstack/react-query';
 
 import type { ProductOptionsData } from '@/types';
 
-import { BASE_URL, fetchInstance } from '../instance';
+import {getBaseUrl, fetchInstance } from '../instance';
 import type { ProductDetailRequestParams } from './useGetProductDetail';
 
 type Props = ProductDetailRequestParams;
 
 export type ProductOptionsResponseData = ProductOptionsData[];
 
 export const getProductOptionsPath = (productId: string) =>
-  `${BASE_URL}/api/products/${productId}/options`;
+  `${getBaseUrl()}/api/products/${productId}/options`;
 
 export const getProductOptions = async (params: ProductDetailRequestParams) => {
   const response = await fetchInstance.get<ProductOptionsResponseData>(

diff --git a/src/api/hooks/useGetProducts.ts b/src/api/hooks/useGetProducts.ts
@@ -6,7 +6,7 @@ import {
 
 import type { ProductData } from '@/types';
 
-import { BASE_URL } from '../instance';
+import { getBaseUrl } from '../instance';
 import { fetchInstance } from './../instance/index';
 
 type RequestParams = {
@@ -35,12 +35,14 @@ type ProductsResponseRawData = {
 export const getProductsPath = ({ categoryId, pageToken, maxResults }: RequestParams) => {
   const params = new URLSearchParams();
 
-  params.append('categoryId', categoryId);
+  if (pageToken)
+    params.append('page', pageToken);
+  if (maxResults)
+    params.append('size', maxResults.toString());
   params.append('sort', 'name,asc');
-  if (pageToken) params.append('page', pageToken);
-  if (maxResults) params.append('size', maxResults.toString());
+  params.append('categoryId', categoryId);
 
-  return `${BASE_URL}/api/products?${params.toString()}`;
+  return `${getBaseUrl()}/api/products?${params.toString()}`;
 };
 
 export const getProducts = async (params: RequestParams): Promise<ProductsResponseData> => {
@@ -58,6 +60,7 @@ export const getProducts = async (params: RequestParams): Promise<ProductsRespon
 };
 
 type Params = Pick<RequestParams, 'maxResults' | 'categoryId'> & { initPageToken?: string };
+
 export const useGetProducts = ({
   categoryId,
   maxResults = 20,
@@ -71,4 +74,4 @@ export const useGetProducts = ({
     initialPageParam: initPageToken,
     getNextPageParam: (lastPage) => lastPage.nextPageToken,
   });
-};
+};
diff --git a/src/api/instance/index.ts b/src/api/instance/index.ts
@@ -2,6 +2,8 @@ import { QueryClient } from '@tanstack/react-query';
 import type { AxiosInstance, AxiosRequestConfig } from 'axios';
 import axios from 'axios';
 
+let BASE_URL = localStorage.getItem('baseURL') || 'https://api.example.com';
+
 const initInstance = (config: AxiosRequestConfig): AxiosInstance => {
   const instance = axios.create({
     timeout: 5000,
@@ -16,10 +18,8 @@ const initInstance = (config: AxiosRequestConfig): AxiosInstance => {
   return instance;
 };
 
-export const BASE_URL = 'https://api.example.com';
-// TODO: 추후 서버 API 주소 변경 필요
-export const fetchInstance = initInstance({
-  baseURL: 'https://api.example.com',
+export let fetchInstance = initInstance({
+  baseURL: BASE_URL,
 });
 
 export const queryClient = new QueryClient({
@@ -32,3 +32,17 @@ export const queryClient = new QueryClient({
     },
   },
 });
+
+export const updateBaseUrl = (newBaseUrl: string) => {
+  BASE_URL = newBaseUrl;
+  localStorage.setItem('baseURL', newBaseUrl);
+  fetchInstance = initInstance({
+    baseURL: BASE_URL,
+  });
+  // 선택한 이름마다 잘 받아오는지 확인용, 추후 삭제 예정
+  console.log('Updated fetchInstance:', fetchInstance.defaults.baseURL);
+};
+
+export const getBaseUrl = () => {
+  return localStorage.getItem('baseURL') || 'https://api.example.com';
+};