faet #18 API 및 Link 수정

jigume · Feb 27, 2024 · 6e4fc0d · 6e4fc0d
1 parent 3f5dd0a
commit 6e4fc0d
Show file tree

Hide file tree

Showing 13 changed files with 105 additions and 128 deletions.
diff --git a/src/Router.tsx b/src/Router.tsx
@@ -38,16 +38,10 @@ import MyLeadList from './pages/Mypage/components/MyLeadList';
 import MyJoinList from './pages/Mypage/components/MyJoinList';
 import GoodsDetail from './pages/Goods/components/GoodsDetail';
 
+import { AuthType } from './types/data';
+
 export default function Router() {
-  // recoil state로 access roles 관리
-  /** @type {[{
-   *  accessToken: string;
-   *  refreshToken: string;
-   *  role: "ADMIN" | "USER" | "GUEST";
-   *  expired: TimeStapm
-   * }]}
-   * */
-  const [auth] = useRecoilState(authState);
+  const [auth] = useRecoilState<AuthType>(authState);
 
   const router = createBrowserRouter([
     // 로그인
@@ -172,6 +166,7 @@ export default function Router() {
       ],
       loader: () => {
         if (auth.role !== 'USER') return redirect('/auth/login');
+
         return null;
       },
     },

diff --git a/src/api/axios.ts b/src/api/axios.ts
@@ -1,12 +1,14 @@
 import { getToken } from '@src/utils';
 import axios from 'axios';
 
-const jigumeAxios = axios.create({
+export const jigumeAxios = axios.create({
   headers: {
-    Authorization: `Bearer ${getToken().accessToken}`,
     withCredentials: true,
     crossDomain: true,
     credentials: 'include',
   },
 });
-export default jigumeAxios;
+
+export const axiosHeaderAuth = {
+  Authorization: `Bearer ${getToken().accessToken}`,
+};
diff --git a/src/api/goods.ts b/src/api/goods.ts
@@ -1,5 +1,5 @@
 import { PreViewerMarker } from '@src/pages/Map/index.d';
-import { stringLatLng2Arr } from '@src/utils';
+import { getToken, stringLatLng2Arr } from '@src/utils';
 import {
   BoardDTO,
   GetCommentsDTO,
@@ -8,7 +8,7 @@ import {
   Marker,
 } from '@src/types/goods';
 import qs from 'qs';
-import jigumeAxios from './axios';
+import { axiosHeaderAuth, jigumeAxios } from './axios';
 
 export const getGoodsList = async (
   map: kakao.maps.Map | null
@@ -27,7 +27,9 @@ export const getGoodsList = async (
     longitudeDelta: (arr[3] - arr[2]).toFixed(6),
   });
 
-  const response = await jigumeAxios.get(`/api/goods/marker?${query}`);
+  const response = await jigumeAxios.get(`/api/goods/marker?${query}`, {
+    headers: axiosHeaderAuth,
+  });
 
   return response.data;
 };
@@ -38,7 +40,7 @@ export const getSheetGoods = async (
   // if (!preViewer) return 'retry';
 
   const response = await jigumeAxios
-    .get(`/api/goods/${preViewer.goodsId}`)
+    .get(`/api/goods/${preViewer.goodsId}`, { headers: axiosHeaderAuth })
     .then((res) => res.data);
 
   return response;
@@ -73,7 +75,9 @@ export const getSheetList = async (
     longitudeDelta: (arr[3] - arr[2]).toFixed(6),
   });
 
-  const response = await jigumeAxios.get(`/api/goods/marker/list?${query}`);
+  const response = await jigumeAxios.get(`/api/goods/marker/list?${query}`, {
+    headers: axiosHeaderAuth,
+  });
 
   return response.data;
 };
@@ -82,7 +86,7 @@ export const getGoodsPage = async (
   id: number | string
 ): Promise<GoodsDetailDTO> => {
   const response = await jigumeAxios
-    .get(`/api/goods/${id}`)
+    .get(`/api/goods/${id}`, { headers: axiosHeaderAuth })
     .then((res) => res.data);
 
   return response;
@@ -98,15 +102,19 @@ export const setWishGoods = async ({
   // await console.log('hello', isWished);
 
   const response = !isWished
-    ? await jigumeAxios.post(`/api/wish/${id}`)
-    : await jigumeAxios.delete(`/api/wish/${id}`);
+    ? await jigumeAxios.post(
+        `/api/wish/${id}`,
+        {},
+        { headers: axiosHeaderAuth }
+      )
+    : await jigumeAxios.delete(`/api/wish/${id}`, { headers: axiosHeaderAuth });
 
   return response.data;
 };
 
 export const deleteWishGoods = async (id: number | string) => {
   const response = await jigumeAxios
-    .delete(`/api/wish/${id}`)
+    .delete(`/api/wish/${id}`, { headers: axiosHeaderAuth })
     .then((res) => res.data);
 
   return response;
@@ -117,7 +125,7 @@ export const getNotice = async (
   boardId: number | string
 ): Promise<BoardDTO> => {
   const response = await jigumeAxios
-    .get(`/api/goods/${goodsId}/board/${boardId}`)
+    .get(`/api/goods/${goodsId}/board/${boardId}`, { headers: axiosHeaderAuth })
     .then((res) => res.data);
 
   return response;
@@ -128,7 +136,9 @@ export const getComment = async (
   boardId: number | string
 ): Promise<GetCommentsDTO> => {
   const response = await jigumeAxios
-    .get(`/api/goods/${goodsId}/board/${boardId}/comment`)
+    .get(`/api/goods/${goodsId}/board/${boardId}/comment`, {
+      headers: axiosHeaderAuth,
+    })
     .then((res) => res.data);
 
   return response;
@@ -140,9 +150,13 @@ export const postCommentAtBoard = async (
   content: string
 ) => {
   const response = await jigumeAxios
-    .post(`/api/goods/${goodsId}/board/${boardId}/comment`, {
-      content,
-    })
+    .post(
+      `/api/goods/${goodsId}/board/${boardId}/comment`,
+      {
+        content,
+      },
+      { headers: axiosHeaderAuth }
+    )
     .then((res) => res.data);
 
   return response;
@@ -160,10 +174,14 @@ export const postCommentAtComment = async ({
   content: string;
 }) => {
   const response = await jigumeAxios
-    .post(`/api/goods/${goodsId}/board/${boardId}/comment/reply`, {
-      parentCommentId,
-      content,
-    })
+    .post(
+      `/api/goods/${goodsId}/board/${boardId}/comment/reply`,
+      {
+        parentCommentId,
+        content,
+      },
+      { headers: axiosHeaderAuth }
+    )
     .then((res) => res.data);
 
   return response;

diff --git a/src/api/mypage.ts b/src/api/mypage.ts
@@ -1,20 +1,26 @@
 import { MemberInfoDto } from '@src/types/user';
 import { OrderHistoryDto, SellHistoryDto } from '@src/types/mypage';
-import jigumeAxios from './axios';
+import { axiosHeaderAuth, jigumeAxios } from './axios';
 
 export const getProfile = async (): Promise<MemberInfoDto> => {
-  const response = await jigumeAxios.get('/api/member/profile');
+  const response = await jigumeAxios.get('/api/member/profile', {
+    headers: axiosHeaderAuth,
+  });
 
   return response.data;
 };
 
 export const getProgressLead = async (): Promise<SellHistoryDto[]> => {
-  const response = await jigumeAxios.get('/api/sell/PROCESSING');
+  const response = await jigumeAxios.get('/api/sell/PROCESSING', {
+    headers: axiosHeaderAuth,
+  });
 
   return response.data;
 };
 
 export const getProgressJoin = async (): Promise<OrderHistoryDto[]> => {
-  const response = await jigumeAxios.get('/api/order/PROCESSING');
+  const response = await jigumeAxios.get('/api/order/PROCESSING', {
+    headers: axiosHeaderAuth,
+  });
   return response.data;
 };
diff --git a/src/api/register.ts b/src/api/register.ts
@@ -5,7 +5,7 @@ import {
 } from '@src/types/register';
 import axios from 'axios';
 import { PositionType } from '@src/types/map';
-import jigumeAxios from './axios';
+import { axiosHeaderAuth, jigumeAxios } from './axios';
 
 export const postGoods = async (
   images: File[],
@@ -27,20 +27,29 @@ export const postGoods = async (
     .post('/api/goods/new?repImg=0', formData, {
       headers: {
         'Content-Type': 'multipart/form-data',
+        ...axiosHeaderAuth,
       },
     })
     .then(async (res) => {
       const goodsId = res.data;
       console.log('GOODS ID', goodsId);
       await jigumeAxios
-        .post(`/api/goods/${goodsId}/coordinate/new`, {
-          latitude: position.lat,
-          longitude: position.lng,
-        })
+        .post(
+          `/api/goods/${goodsId}/coordinate/new`,
+          {
+            latitude: position.lat,
+            longitude: position.lng,
+          },
+          { headers: axiosHeaderAuth }
+        )
         .then(async () => {
-          await jigumeAxios.post(`/api/goods/${goodsId}/board`, {
-            content: goodsDto_.boardContent,
-          });
+          await jigumeAxios.post(
+            `/api/goods/${goodsId}/board`,
+            {
+              content: goodsDto_.boardContent,
+            },
+            { headers: axiosHeaderAuth }
+          );
         });
       return res.data;
     });

diff --git a/src/api/user.ts b/src/api/user.ts
@@ -5,7 +5,7 @@ import { AuthType } from '@src/types/data';
 import img0 from '@src/asset/images/profiles/initProfile0.png';
 import img1 from '@src/asset/images/profiles/initProfile1.png';
 import img2 from '@src/asset/images/profiles/initProfile2.png';
-import jigumeAxios from './axios';
+import { axiosHeaderAuth, jigumeAxios } from './axios';
 
 /**
  * 신규 유저의 닉네임 등의 정보를 입력하여 role을 USER로 변경한다
@@ -54,7 +54,9 @@ export const codeProvide = async (
 
   const response: TokenProviderType = await axios
     .post(
-      `/api/member/login?login-provider=${domain}&authorization-code=${code}`
+      `/api/member/login?login-provider=${domain}&authorization-code=${code}`,
+      {},
+      { headers: axiosHeaderAuth }
     )
     .then((res) => res.data);
 
@@ -63,22 +65,26 @@ export const codeProvide = async (
 
 export const kakaoLogout = async () => {
   // kakao 서버에 요청
-  const response = await axios.post('https://kapi.kakao.com/v1/user/logout');
+  const response = await axios.post(
+    'https://kapi.kakao.com/v1/user/logout',
+    {},
+    { headers: axiosHeaderAuth }
+  );
   return response;
 };
 
 export const checkNickname = async (nickname: string) => {
   const response = await jigumeAxios.get('/api/member/nickname', {
+    headers: axiosHeaderAuth,
     params: {
       nickname,
     },
   });
   return response;
 };
 
-const initProfiles = [img0, img1, img2];
-
 export const updateProfile = async (file?: File) => {
+  const initProfiles = [img0, img1, img2];
   const formData = new FormData();
   if (!file) {
     const randomIdx = Math.round(Math.random() * 2);
@@ -89,6 +95,7 @@ export const updateProfile = async (file?: File) => {
 
   const response = await jigumeAxios.post('/api/member/profile', formData, {
     headers: {
+      ...axiosHeaderAuth,
       'Content-Type': 'multipart/form-data',
     },
   });

diff --git a/src/pages/Auth/index.tsx b/src/pages/Auth/index.tsx
@@ -22,7 +22,7 @@ export default function Auth() {
           ...prev,
           accessToken: data.tokenDto.accessToken,
           refreshToken: data.tokenDto.refreshToken,
-          expired: add(new Date(), { days: 1 }).getTime(),
+          expired: add(new Date(), { hours: 12 }).getTime(),
         }));
         navigate('/auth/init');
         return;
@@ -33,7 +33,7 @@ export default function Auth() {
         role: 'USER',
         accessToken: data.tokenDto.accessToken,
         refreshToken: data.tokenDto.refreshToken,
-        expired: add(new Date(), { days: 1 }).getTime(),
+        expired: add(new Date(), { hours: 12 }).getTime(),
       }));
       navigate('/');
     },

diff --git a/src/pages/Goods/components/GoodsDetail.tsx b/src/pages/Goods/components/GoodsDetail.tsx
@@ -125,7 +125,7 @@ export default function GoodsDetail() {
             </Link>
             <Link
               className="w-full rounded-lg bg-success py-4 text-center"
-              to="/"
+              to={`/buying/${goods.goodsPageDto.boardId}/notice`}
             >
               공지방 바로가기
             </Link>

diff --git a/src/pages/Goods/components/GoodsNotice/components/ProductAbout.tsx b/src/pages/Goods/components/GoodsNotice/components/ProductAbout.tsx
@@ -49,7 +49,7 @@ export default function ProductAbout({
 
       <div className="flex flex-col gap-2 bg-gray-100 px-4 pt-8">
         {/* 위치 정보 */}
-        <PlaceInfo coordinate={data?.coordinate} />
+        <PlaceInfo coordinate={data?.coordinate} bg="bg-white" />
 
         {/* 공지사항 */}
         <div className="rounded-xl bg-white px-4 py-6">