bug #19 accessToken user, goods api 수정

jigume · Apr 7, 2024 · d5e9ff3 · d5e9ff3
1 parent 3ad890b
commit d5e9ff3
Show file tree

Hide file tree

Showing 16 changed files with 160 additions and 87 deletions.
diff --git a/src/api/axios.ts b/src/api/axios.ts
@@ -1,5 +1,4 @@
 import { backURL } from '@src/common';
-import { getToken } from '@src/utils';
 import axios from 'axios';
 
 export const jigumeAxios = axios.create({
@@ -11,6 +10,6 @@ export const jigumeAxios = axios.create({
   },
 });
 
-export const axiosHeaderAuth = {
-  Authorization: `Bearer ${getToken().accessToken}`,
+export const axiosHeaderAuth = (token?: string) => {
+  return { Authorization: `Bearer ${token}` };
 };
diff --git a/src/api/goods.ts b/src/api/goods.ts
@@ -11,7 +11,8 @@ import qs from 'qs';
 import { axiosHeaderAuth, jigumeAxios } from './axios';
 
 export const getGoodsList = async (
-  map: kakao.maps.Map | null
+  map: kakao.maps.Map | null,
+  accessToken: string
 ): Promise<Marker[] | 'retry'> => {
   if (!map) return 'retry';
 
@@ -29,7 +30,7 @@ export const getGoodsList = async (
 
   const response = await jigumeAxios
     .get(`/api/goods/marker?${query}`, {
-      headers: axiosHeaderAuth,
+      headers: { ...axiosHeaderAuth(accessToken) },
     })
     .catch((res) => {
       throw Error(res);
@@ -39,12 +40,15 @@ export const getGoodsList = async (
 };
 
 export const getSheetGoods = async (
-  preViewer: PreViewerMarker
+  preViewer: PreViewerMarker,
+  accessToken: string
 ): Promise<GoodsDetailDTO | 'retry'> => {
   // if (!preViewer) return 'retry';
 
   const response = await jigumeAxios
-    .get(`/api/goods/${preViewer.goodsId}`, { headers: axiosHeaderAuth })
+    .get(`/api/goods/${preViewer.goodsId}`, {
+      headers: { ...axiosHeaderAuth(accessToken) },
+    })
     .then((res) => res.data)
     .catch((res) => {
       throw Error(res);
@@ -53,9 +57,13 @@ export const getSheetGoods = async (
   return response;
 };
 
-export const getSheetList = async (
-  map: kakao.maps.Map | null
-): Promise<GoodSheetDTO | 'retry'> => {
+export const getSheetList = async ({
+  map,
+  accessToken,
+}: {
+  map: kakao.maps.Map | null;
+  accessToken: string;
+}): Promise<GoodSheetDTO | 'retry'> => {
   if (!map) return 'retry';
 
   const center = map.getCenter();
@@ -64,18 +72,6 @@ export const getSheetList = async (
 
   // 특수문자 인코딩
   const query = qs.stringify({
-    // coordinateRequestDto: {
-    //   latitude: center.getLat().toFixed(6),
-    //   longitude: center.getLng().toFixed(6),
-    //   latitudeDelta: (arr[1] - arr[0]).toFixed(6),
-    //   longitudeDelta: (arr[3] - arr[2]).toFixed(6),
-    // },
-    // pageable: {
-    //   page: 0,
-    //   size: 10,
-    //   sort: [],
-    // },
-
     latitude: center.getLat().toFixed(6),
     longitude: center.getLng().toFixed(6),
     latitudeDelta: (arr[1] - arr[0]).toFixed(6),
@@ -84,7 +80,7 @@ export const getSheetList = async (
 
   const response = await jigumeAxios
     .get(`/api/goods/marker/list?${query}`, {
-      headers: axiosHeaderAuth,
+      headers: { ...axiosHeaderAuth(accessToken) },
     })
     .catch((res) => {
       throw Error(res);
@@ -94,10 +90,11 @@ export const getSheetList = async (
 };
 
 export const getGoodsPage = async (
-  id: number | string
+  id: number | string,
+  accessToken: string
 ): Promise<GoodsDetailDTO> => {
   const response = await jigumeAxios
-    .get(`/api/goods/${id}`, { headers: axiosHeaderAuth })
+    .get(`/api/goods/${id}`, { headers: { ...axiosHeaderAuth(accessToken) } })
     .then((res) => res.data)
     .catch((res) => {
       throw Error(res);
@@ -109,30 +106,41 @@ export const getGoodsPage = async (
 export const setWishGoods = async ({
   id,
   isWished,
+  accessToken,
 }: {
   id: number | string;
   isWished: boolean;
+  accessToken: string;
 }) => {
   // await console.log('hello', isWished);
 
   const response = !isWished
     ? await jigumeAxios
-        .post(`/api/wish/${id}`, {}, { headers: axiosHeaderAuth })
+        .post(
+          `/api/wish/${id}`,
+          {},
+          { headers: { ...axiosHeaderAuth(accessToken) } }
+        )
         .catch((res) => {
           throw Error(res);
         })
     : await jigumeAxios
-        .delete(`/api/wish/${id}`, { headers: axiosHeaderAuth })
+        .delete(`/api/wish/${id}`, {
+          headers: { ...axiosHeaderAuth(accessToken) },
+        })
         .catch((res) => {
           throw Error(res);
         });
 
   return response.data;
 };
 
-export const deleteWishGoods = async (id: number | string) => {
+export const deleteWishGoods = async (
+  id: number | string,
+  accessToken: string
+) => {
   const response = await jigumeAxios
-    .delete(`/api/wish/${id}`, { headers: axiosHeaderAuth })
+    .delete(`/api/wish/${id}`, { headers: { ...axiosHeaderAuth(accessToken) } })
     .then((res) => res.data)
     .catch((res) => {
       throw Error(res);
@@ -143,10 +151,13 @@ export const deleteWishGoods = async (id: number | string) => {
 
 export const getNotice = async (
   goodsId: number | string,
-  boardId: number | string
+  boardId: number | string,
+  accessToken: string
 ): Promise<BoardDTO> => {
   const response = await jigumeAxios
-    .get(`/api/goods/${goodsId}/board/${boardId}`, { headers: axiosHeaderAuth })
+    .get(`/api/goods/${goodsId}/board/${boardId}`, {
+      headers: { ...axiosHeaderAuth(accessToken) },
+    })
     .then((res) => res.data)
     .catch((res) => {
       throw Error(res);
@@ -157,11 +168,12 @@ export const getNotice = async (
 
 export const getComment = async (
   goodsId: number | string,
-  boardId: number | string
+  boardId: number | string,
+  accessToken: string
 ): Promise<GetCommentsDTO> => {
   const response = await jigumeAxios
     .get(`/api/goods/${goodsId}/board/${boardId}/comment`, {
-      headers: axiosHeaderAuth,
+      headers: { ...axiosHeaderAuth(accessToken) },
     })
     .then((res) => res.data)
     .catch((res) => {
@@ -174,15 +186,16 @@ export const getComment = async (
 export const postCommentAtBoard = async (
   goodsId: number | string,
   boardId: number | string,
-  content: string
+  content: string,
+  accessToken: string
 ) => {
   const response = await jigumeAxios
     .post(
       `/api/goods/${goodsId}/board/${boardId}/comment`,
       {
         content,
       },
-      { headers: axiosHeaderAuth }
+      { headers: { ...axiosHeaderAuth(accessToken) } }
     )
     .then((res) => res.data)
     .catch((res) => {
@@ -197,11 +210,13 @@ export const postCommentAtComment = async ({
   boardId,
   parentCommentId,
   content,
+  accessToken,
 }: {
   goodsId: number | string;
   boardId: number | string;
   parentCommentId: number;
   content: string;
+  accessToken: string;
 }) => {
   const response = await jigumeAxios
     .post(
@@ -210,7 +225,7 @@ export const postCommentAtComment = async ({
         parentCommentId,
         content,
       },
-      { headers: axiosHeaderAuth }
+      { headers: { ...axiosHeaderAuth(accessToken) } }
     )
     .then((res) => res.data)
     .catch((res) => {
@@ -224,18 +239,20 @@ export const postModifyNotice = async ({
   goodsId,
   boardId,
   boardContent,
+  accessToken,
 }: {
   goodsId: number | string;
   boardId: number | string;
   boardContent: string;
+  accessToken: string;
 }) => {
   const response = await jigumeAxios
     .post(
       `/api/goods/${goodsId}/board/${boardId}`,
       {
         boardContent,
       },
-      { headers: axiosHeaderAuth }
+      { headers: { ...axiosHeaderAuth(accessToken) } }
     )
     .then((res) => res.data)
     .catch((res) => {

diff --git a/src/api/user.ts b/src/api/user.ts
@@ -1,11 +1,10 @@
 import axios from 'axios';
 import { TokenProviderType } from '@src/types/user';
-import { InitUserType } from '@src/pages/Auth/components/Init/index.d';
 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 { backURL, siteDomain } from '@src/common';
+import { backURL } from '@src/common';
 import { axiosHeaderAuth, jigumeAxios } from './axios';
 
 /**
@@ -41,9 +40,15 @@ export const handleRefreshToken = async (auth: AuthType) => {
     return 'valid';
 
   const response = await jigumeAxios
-    .post('/api/member/token', {
-      refreshToken: auth.refreshToken,
-    })
+    .post(
+      '/api/member/token',
+      {
+        refreshToken: auth.refreshToken,
+      },
+      {
+        headers: { ...axiosHeaderAuth(auth.accessToken) },
+      }
+    )
     .catch((err) => {
       throw Error(err);
     });
@@ -56,16 +61,18 @@ export const handleRefreshToken = async (auth: AuthType) => {
  */
 export const codeProvide = async (
   code: string | null,
-  domain?: string
+  auth: AuthType
 ): Promise<TokenProviderType> => {
   /** @type {string} */
   if (!code) throw Error('인가코드가 옳바르지 않습니다.');
 
   const response: TokenProviderType = await axios
     .post(
-      `${backURL}/api/member/login?login-provider=${domain}&authorization-code=${code}`,
+      `${backURL}/api/member/login?login-provider=${auth.domain}&authorization-code=${code}`,
       {},
-      { headers: { ...axiosHeaderAuth } }
+      {
+        headers: { ...axiosHeaderAuth(auth.accessToken) },
+      }
     )
     .then((res) => res.data)
     .catch((err) => {
@@ -75,13 +82,13 @@ export const codeProvide = async (
   return response;
 };
 
-export const kakaoLogout = async () => {
+export const kakaoLogout = async (accessToken?: string) => {
   // kakao 서버에 요청
   const response = await axios
     .post(
       'https://kapi.kakao.com/v1/user/logout',
       {},
-      { headers: axiosHeaderAuth }
+      { headers: axiosHeaderAuth(accessToken) }
     )
     .catch((err) => {
       throw Error(err);
@@ -90,10 +97,10 @@ export const kakaoLogout = async () => {
   return response;
 };
 
-export const checkNickname = async (nickname: string) => {
+export const checkNickname = async (nickname: string, accessToken?: string) => {
   const response = await jigumeAxios
     .get('/api/member/nickname', {
-      headers: axiosHeaderAuth,
+      headers: { ...axiosHeaderAuth(accessToken) },
       params: {
         nickname,
       },
@@ -105,7 +112,7 @@ export const checkNickname = async (nickname: string) => {
   return response;
 };
 
-export const updateProfile = async (file?: File) => {
+export const updateProfile = async (file?: File, accessToken?: string) => {
   const initProfiles = [img0, img1, img2];
   const formData = new FormData();
   if (!file) {
@@ -118,7 +125,7 @@ export const updateProfile = async (file?: File) => {
   const response = await jigumeAxios
     .post('/api/member/profile', formData, {
       headers: {
-        ...axiosHeaderAuth,
+        ...axiosHeaderAuth(accessToken),
         'Content-Type': 'multipart/form-data',
       },
     })

diff --git a/src/pages/Auth/components/Init/components/initUser.tsx b/src/pages/Auth/components/Init/components/initUser.tsx
@@ -4,15 +4,19 @@ import { useMutation } from 'react-query';
 import NextButton from '@src/components/NextButton';
 import { checkNickname } from '@src/api/user';
 import { handleTextFieldColor, validNickname } from '@src/utils';
-import CircularProgress from './circularProgress';
+import { useRecoilState } from 'recoil';
+import { AuthType } from '@src/types/data';
+import { authState } from '@src/data';
 import { InitContextType } from '../index.d';
+import CircularProgress from './circularProgress';
 
 const initText = '최소 2글자, 최대 10글자까지 한글,영어, 숫자만 입력가능해요.';
 
 export default function InitUser() {
   const [valid, setValid] = useState(false);
   const [alertText, setAlertText] = useState(initText);
   const { initUser, setInitUser } = useOutletContext<InitContextType>();
+  const [auth] = useRecoilState<AuthType>(authState);
 
   const handleNickname = (text: string) => {
     setValid(validNickname(text));
@@ -21,7 +25,7 @@ export default function InitUser() {
 
   const { mutate, isLoading, isError, isSuccess } = useMutation(
     'checkNickname',
-    () => checkNickname(initUser.nickname)
+    () => checkNickname(initUser.nickname, auth.accessToken)
   );
 
   const getTextColor = () => {

diff --git a/src/pages/Auth/index.tsx b/src/pages/Auth/index.tsx
@@ -13,7 +13,7 @@ export default function Auth() {
   const [searchParams] = useSearchParams();
   const code = searchParams.get('code');
 
-  useQuery('oauth', () => codeProvide(code, auth.domain), {
+  useQuery('oauth', () => codeProvide(code, auth), {
     retry: false,
     onSuccess: (data) => {
       // 초기 유저의 정보 입력 폼