Merge pull request #60 from Fashion-Cloud/feat/i59

refact: apiV1Instance Auth설정 수정
Fashion-Cloud · Nov 12, 2023 · 78fdd85 · 78fdd85
2 parents 9f55f56 + 2be8e06
commit 78fdd85
Show file tree

Hide file tree

Showing 16 changed files with 115 additions and 167 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -13,6 +13,7 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^27.5.2",
+    "@types/js-cookie": "^3.0.6",
     "@types/node": "^16.18.20",
     "@types/react": "^18.0.29",
     "@types/react-dom": "^18.0.11",
@@ -22,6 +23,7 @@
     "eslint-config-next": "^13.5.4",
     "http-proxy-middleware": "^2.0.6",
     "install": "^0.13.0",
+    "js-cookie": "^3.0.5",
     "lottie-react": "^2.4.0",
     "lottie-web": "^5.10.2",
     "next": "^13.5.4",

diff --git a/src/api/api-instance.ts b/src/api/api-instance.ts
@@ -1,12 +1,17 @@
 import axios from 'axios';
-import { token } from 'src/assets/data/token';
+import Cookies from 'js-cookie';
 
 const apiV1Instance = axios.create({
   baseURL: process.env.NEXT_PUBLIC_API,
-  headers: {
-    'Content-Type': 'application/json',
-    Authorization: `Bearer ${token}`,
-  },
+});
+apiV1Instance.interceptors.request.use((config) => {
+  const accessToken = Cookies.get('accessToken');
+
+  if (accessToken) {
+    config.headers.Authorization = `Bearer ${accessToken}`;
+  }
+
+  return config;
 });
 
 export default apiV1Instance;
diff --git a/src/api/hook/CheckAuthHook.ts b/src/api/hook/CheckAuthHook.ts
@@ -1,14 +1,10 @@
+import Cookies from 'js-cookie';
 import router from 'next/router';
 import { useEffect } from 'react';
 
 const useCheckAuth = () => {
   useEffect(() => {
-    const getCookie = (name: string) => {
-      const value = document.cookie.match('(^|;) ?' + name + '=([^;]*)(;|$)');
-      return value ? value[2] : null;
-    };
-
-    const token = getCookie('token');
+    const token = Cookies.get('accessToken');
 
     if (token) {
       router.push('/');

diff --git a/src/api/hook/UserHook.ts b/src/api/hook/UserHook.ts
@@ -1,3 +1,4 @@
+import Cookies from 'js-cookie';
 import router from 'next/router';
 import { useMutation } from 'react-query';
 
@@ -32,13 +33,9 @@ export const useLogout = () => {
   return useMutation({
     mutationFn: () => UserService.logout(),
     onSuccess: () => {
-      deleteCookie('token');
+      Cookies.remove('accessToken');
       router.replace('login');
     },
     onError: () => alert('다시 로그아웃 해주세요.'),
   });
 };
-
-function deleteCookie(name: string) {
-  document.cookie = name + '=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
-}
diff --git a/src/assets/data/token.ts b/src/assets/data/token.ts
diff --git a/src/components/AddFashion/AddFashion/AddImage.tsx b/src/components/AddFashion/AddFashion/AddImage.tsx
@@ -2,12 +2,11 @@ import 'react-toastify/dist/ReactToastify.css';
 
 import CloudUploadIcon from '@mui/icons-material/CloudUpload';
 import { Box, Button, Typography } from '@mui/material';
-import axios from 'axios';
 import Image from 'next/image';
 import React, { useState } from 'react';
 import Resizer from 'react-image-file-resizer';
 import { toast, ToastContainer } from 'react-toastify';
-import { token } from 'src/assets/data/token';
+import apiV1Instance from 'src/api/api-instance';
 
 type ImageProps = {
   getImageData: (data: string) => void;
@@ -67,13 +66,8 @@ export default function AddImage({ getImageData }: ImageProps) {
       formData.append('image', imgURL);
 
       try {
-        await axios
-          .post(`${process.env.NEXT_PUBLIC_API}/images`, formData, {
-            headers: {
-              'Content-Type': 'multipart/form-data',
-              Authorization: `Bearer ${token}`,
-            },
-          })
+        await apiV1Instance
+          .post(`${process.env.NEXT_PUBLIC_API}/images`, formData)
           .then((response) => {
             success();
             console.log('sendImage URL response: ', response.data);

diff --git a/src/components/AddFashion/AddFashion/AddLocation.tsx b/src/components/AddFashion/AddFashion/AddLocation.tsx
@@ -2,8 +2,8 @@ import '../../../../public/fonts/font.css';
 
 import NearMeIcon from '@mui/icons-material/NearMe';
 import { IconButton, Toolbar, Typography } from '@mui/material';
-import axios from 'axios';
 import { useEffect, useState } from 'react';
+import apiV1Instance from 'src/api/api-instance';
 
 import useGeoLocation from '../../../assets/hooks/useGeoLocation';
 import { LocationType } from '../../../utils/types';
@@ -21,12 +21,8 @@ export default function AddLocation({ getLocationData }: LocationProps) {
   const locationAPI = async () => {
     if (locationData !== undefined) {
       try {
-        await axios
-          .get(`/api/v1/address?latitude=${latitude}&longitude=${longitude}`, {
-            headers: {
-              Accept: 'application/json',
-            },
-          })
+        await apiV1Instance
+          .get(`/api/v1/address?latitude=${latitude}&longitude=${longitude}`)
           .then((response) => {
             console.log('response: ', response);
             const data = response.data.data;

diff --git a/src/components/Lookbook/LookbookLayout/AddLookbookButton.tsx b/src/components/Lookbook/LookbookLayout/AddLookbookButton.tsx
@@ -10,9 +10,8 @@ import {
   Paper,
   Typography,
 } from '@mui/material';
-import axios from 'axios';
 import { useState } from 'react';
-import { token } from 'src/assets/data/token';
+import apiV1Instance from 'src/api/api-instance';
 
 // import SearchIcon from '@mui/icons-material/Search';
 import AddImage from '../../../components/AddFashion/AddFashion/AddImage';
@@ -54,14 +53,10 @@ export default function AddLookbookButton() {
     }
 
     try {
-      await axios
+      await apiV1Instance
         .post(`${process.env.NEXT_PUBLIC_API}/lookbooks`, {
           title: title,
           image: postImage,
-        }, {
-          headers: {
-            Authorization: `Bearer ${token}`
-          },
         })
         .then((response) => {
           console.log(response);

diff --git a/src/components/Lookbook/LookbookLayout/LookbookBox.tsx b/src/components/Lookbook/LookbookLayout/LookbookBox.tsx
@@ -1,6 +1,5 @@
 import { Box, Card, CardMedia, Grid, Typography } from '@mui/material';
 import Link from 'next/link';
-// import axios from 'axios';
 import { useEffect, useState } from 'react';
 import { useFindAllBooks } from 'src/api/hook/LookbookHook';
 

diff --git a/src/components/MainLayout/FashionListBox.tsx b/src/components/MainLayout/FashionListBox.tsx
@@ -16,20 +16,18 @@ import {
   Toolbar,
   Typography,
 } from '@mui/material';
-import axios from 'axios';
 import Image from 'next/image';
 import React, { useEffect, useRef, useState } from 'react';
+import apiV1Instance from 'src/api/api-instance';
 import useCheckAuth from 'src/api/hook/CheckAuthHook';
-import { useLogout } from 'src/api/hook/UserHook';
-import { token } from 'src/assets/data/token';
 
 import logoUrl from '../../../public/title-logo.png';
 import { WeatherPostType } from '../../utils/types';
 import useRainfallTypeStore from '../../utils/zustand/weather/RainfallTypeStore';
 import useSkyStatusStore from '../../utils/zustand/weather/SkyStatusStore';
 import useWindChillSearchStore from '../../utils/zustand/weather/WindChillSearchStore';
 import AddFashionButton from './FashionListBox/AddFashionButton';
-import FashionModal from "./FashionListBox/FashionModal";
+import FashionModal from './FashionListBox/FashionModal';
 import PaginationBox from './FashionListBox/PaginationBox';
 import SearchBox from './FashionListBox/SearchBox';
 
@@ -113,15 +111,9 @@ export default function FashionListBox() {
     console.log('[Recoil] rainfallCode: ', rainfallType);
     console.log('[Recoil] windChillSearch: ', windChillSearch);
     try {
-      await axios
+      await apiV1Instance
         .get(
-          `${process.env.NEXT_PUBLIC_API}/posts/weather?skyStatus=${skyStatus}&rainfallType=${rainfallType}&minWindChill=${windChillSearch[0]}&maxWindChill=${windChillSearch[1]}&page=${page}&size=8`,
-          {
-            headers: {
-              Accept: 'application/json',
-              Authorization: `Bearer ${token}`,
-            },
-          }
+          `${process.env.NEXT_PUBLIC_API}/posts/weather?skyStatus=${skyStatus}&rainfallType=${rainfallType}&minWindChill=${windChillSearch[0]}&maxWindChill=${windChillSearch[1]}&page=${page}&size=8`
         )
         .then((response) => {
           const data = response.data;
@@ -138,13 +130,8 @@ export default function FashionListBox() {
 
   const followTimelineAPI = async () => {
     try {
-      await axios
-        .get(`/api/v1/posts/follow/timeline?page=${page}&size=8`, {
-          headers: {
-            Accept: 'application/json',
-            Authorization: `Bearer ${token}`,
-          },
-        })
+      await apiV1Instance
+        .get(`/api/v1/posts/follow/timeline?page=${page}&size=8`)
         .then((response) => {
           const data = response.data;
           console.log('data.data: ', data.data);
@@ -230,8 +217,6 @@ export default function FashionListBox() {
 
   useCheckAuth();
 
-  const { mutate: logout } = useLogout();
-
   return (
     <Box sx={{ height: '100vh', backgroundColor: '#F5F8FC' }}>
       <Box height="75px" />
@@ -291,7 +276,7 @@ export default function FashionListBox() {
 
       <Modal open={openDetail} onClose={handleCloseDetail} closeAfterTransition>
         <Box sx={style}>
-          <FashionModal singleId={singleId} setOpenDetail={setOpenDetail}/>
+          <FashionModal singleId={singleId} setOpenDetail={setOpenDetail} />
         </Box>
       </Modal>