kakao-tech-campus-2nd-step2 · kang-kibong · Jul 30, 2024 · Jul 30, 2024 · Jul 30, 2024 · Jul 30, 2024
diff --git a/.eslintrc b/.eslintrc
@@ -46,7 +46,10 @@
     "react/button-has-type": "off",
     "react-hooks/rules-of-hooks": "off",
     "no-const-assign": "off",
-    "consistent-return": "off"
+    "consistent-return": "off",
+    "no-unused-expressions": "off",
+    "no-unsafe-optional-chaining": "off",
+    "no-restricted-globals": "off"
   },
   "settings": {
     "import/resolver": {
@@ -62,7 +65,8 @@
           ["@context", "./src/context"],
           ["@internalTypes", "./src/types"],
           ["@apis", "./src/apis"],
-          ["@mocks", "./src/mocks"]
+          ["@mocks", "./src/mocks"],
+          ["@features", "./src/features"]
         ],
         "extensions": [".js", ".jsx", ".ts", ".tsx"]
       }

diff --git a/README.md b/README.md
@@ -1 +1,40 @@
-# react-deploy
+# 6️⃣ 6주차 로그인 및 관심목록 (with. 테스트코드)
+## 📄 1단계 - API 명세 협의 & 반영 
+### ✅ 기능 목록
+- [x] auth관련  API 구현
+  - [x] 회원가입 API 기능 구현
+  - [x] 로그인 API 기능 구현
+- [x] 카테고리 전체 조회 API 기능 구현
+- [x] 상품관련 API 기능 구현
+  - [x] 상품 개별 조회 API 기능 구현
+  - [x] 상품 목록 조회(페이지네이션 조회) API 기능 구현
+  - [x] 상품 옵션 API 기능 구현
+- [x] 위시리스트 API 기능 구현
+  - [x] 위시 리스트 상품 추가 API 기능 구현
+  - [x] 위시 리스트 상품 삭제 API 기능 구현
+  - [x] 위시 리스트 상품 조회(페이지네이션 적용) API 기능 구현
+- [x] 주문하기 API 기능 구현
+
+## 🚀 2단계 - 배포하기
+### ✅ 기능 목록
+- [x] vercel로 배포 진행
+
+## 💰 3단계 - 포인트
+### ✅ 기능 목록
+- [x] 포인트 조회 API 기능 구현
+- [x] 마이페이지 포인트 조회 렌더링 구현
+- [x] 상품 주문시 포인트 사용
+  - [x] 사용 가능한 포인트 렌더링
+  - [x] 상품 가격에서 포인트 차감한 가격 렌더링
+  - [x] 상품 주문시 포인트 사용 후 요청
+
+## 🤔 4단계 - 질문의 답변을 README에 작성
+### 질문 1. SPA 페이지를 정적 배포를 하려고 할 때 Vercel을 사용하지 않고 한다면 어떻게 할 수 있을까요?
+AWS S3와 CloudFront를 사용하여 배포할 수 있습니다. S3 버킷에 정적 파일을 업로드하고, CloudFront를 통해 캐싱 및 배포를 설정할 수 있습니다.
+
+### 질문 2. CSRF나 XSS 공격을 막는 방법은 무엇일까요?
+- CSRF: CSRF 토큰을 사용하여 요청 검증, SameSite 쿠키 속성을 설정해 쿠키를 특정 사이트에서만 사용하도록 제한.
+- XSS: 사용자 입력값을 철저히 검증하고 인코딩 처리, Content Security Policy(CSP) 설정, 신뢰할 수 없는 데이터를 HTML에 직접 삽입하지 않음.
+
+### 질문 3. 브라우저 렌더링 원리에대해 설명해주세요.
+브라우저는 HTML을 파싱하여 DOM을 생성하고, CSS를 파싱하여 CSSOM을 생성합니다. DOM과 CSSOM을 결합하여 렌더 트리를 형성합니다. 이 렌더 트리를 기반으로 레이아웃을 계산하고, 페인트 과정을 통해 픽셀을 화면에 그립니다. 최종적으로 합성하여 사용자에게 화면을 표시합니다.
diff --git a/craco.config.js b/craco.config.js
@@ -14,6 +14,7 @@ module.exports = {
       '@mocks': path.resolve(__dirname, 'src/mocks'),
       '@internalTypes': path.resolve(__dirname, 'src/types'),
       '@apis': path.resolve(__dirname, 'src/apis'),
+      '@features': path.resolve(__dirname, 'src/features'),
     },
   },
   jest: {
@@ -31,6 +32,7 @@ module.exports = {
         '^@types/(.*)$': '<rootDir>/src/types/$1',
         '^@utils/(.*)$': '<rootDir>/src/utils/$1',
         '^@hooks/(.*)$': '<rootDir>/src/hooks/$1',
+        '^@features/(.*)$': '<rootDir>/src/features/$1',
       },
     },
   },

diff --git a/public/index.html b/public/index.html
@@ -4,6 +4,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <!-- <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> -->
     <title>Kakao Tech</title>
   </head>
 

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,17 +1,20 @@
 import React from 'react';
 import { Outlet } from 'react-router-dom';
+import APIProvider from '@context/api/APiProvider';
 import AuthProvider from '@context/auth/AuthProvider';
 import FilterProvider from '@context/filter/FilterProvider';
 import GlobalStyles from '@assets/styles';
 
 function App() {
   return (
-    <FilterProvider>
-      <AuthProvider>
-        <GlobalStyles />
-        <Outlet />
-      </AuthProvider>
-    </FilterProvider>
+    <APIProvider>
+      <FilterProvider>
+        <AuthProvider>
+          <GlobalStyles />
+          <Outlet />
+        </AuthProvider>
+      </FilterProvider>
+    </APIProvider>
   );
 }
 

diff --git a/src/apis/categories/hooks/useGetCategories.ts b/src/apis/categories/hooks/useGetCategories.ts
@@ -0,0 +1,21 @@
+import { initInstance } from '@apis/instance';
+import { AxiosError } from 'axios';
+import { CategoriesResponse } from '@internalTypes/responseTypes';
+import { useQuery, UseQueryResult } from '@tanstack/react-query';
+import { CATEGORIES_PATHS } from '@apis/path';
+import { useAPI } from '@context/api/useAPI';
+
+const getCategories = async (baseURL: string): Promise<CategoriesResponse> => {
+  const instance = initInstance(baseURL);
+  const res = await instance.get<CategoriesResponse>(CATEGORIES_PATHS.CATEGORIES);
+  return res.data;
+};
+
+export const useGetCategories = (): UseQueryResult<CategoriesResponse, AxiosError> => {
+  const { baseURL } = useAPI();
+
+  return useQuery<CategoriesResponse, AxiosError>({
+    queryKey: ['categories'],
+    queryFn: () => getCategories(baseURL),
+  });
+};
diff --git a/src/apis/hooks/categories.mock.ts → src/apis/categories/index.mock.ts b/src/apis/hooks/categories.mock.ts → src/apis/categories/index.mock.ts
@@ -1,9 +1,10 @@
 import { rest } from 'msw';
+import { CATEGORIES_PATHS } from '@apis/path';
 
-import { getCategoriesPath } from './useGetCategorys';
+const BASE_URL = process.env.REACT_APP_BASE_URL;
 
 export const categoriesMockHandler = [
-  rest.get(getCategoriesPath(), (_, res, ctx) => res(ctx.json(CATEGORIES_RESPONSE_DATA))),
+  rest.get(`${BASE_URL}${CATEGORIES_PATHS.CATEGORIES}`, (_, res, ctx) => res(ctx.json(CATEGORIES_RESPONSE_DATA))),
 ];
 
 const CATEGORIES_RESPONSE_DATA = [

diff --git a/src/apis/hooks/products.mock.ts b/src/apis/hooks/products.mock.ts
diff --git a/src/apis/hooks/useGetCategorys.ts b/src/apis/hooks/useGetCategorys.ts
diff --git a/src/apis/hooks/useGetProductDetail.ts b/src/apis/hooks/useGetProductDetail.ts
diff --git a/src/apis/hooks/useGetProductOptions.ts b/src/apis/hooks/useGetProductOptions.ts
diff --git a/src/apis/hooks/useGetProducts.ts b/src/apis/hooks/useGetProducts.ts
diff --git a/src/apis/instance.ts b/src/apis/instance.ts
@@ -1,4 +1,4 @@
-import axios, { AxiosError, AxiosInstance, AxiosRequestConfig } from 'axios';
+import axios, { AxiosError, AxiosInstance } from 'axios';
 import { ERROR } from '@utils/constants/message';
 import { QueryClient } from '@tanstack/react-query';
 
@@ -12,15 +12,13 @@ const statusMessages: { [key: number]: string } = {
   500: ERROR.SERVER_ERROR,
 };
 
-export const initInstance = (config: AxiosRequestConfig): AxiosInstance => {
+export const initInstance = (baseURL: string): AxiosInstance => {
   const instance = axios.create({
     timeout: 5000,
-    baseURL: process.env.REACT_APP_BASE_URL,
-    ...config,
+    baseURL,
     headers: {
       Accept: 'application/json',
       'Content-Type': 'application/json',
-      ...config.headers,
     },
   });
 
@@ -38,8 +36,4 @@ export const initInstance = (config: AxiosRequestConfig): AxiosInstance => {
   return instance;
 };
 
-const axiosInstance = initInstance({});
-
 export const queryClient = new QueryClient();
-
-export default axiosInstance;