Merge pull request #36 from LikeLion-Hackathon-T1/develop

feat: axios 기능 제한
TEAM-SYLUV · Jul 25, 2024 · e9543e8 · e9543e8
2 parents c577176 + 34b1bbf
commit e9543e8
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 49 deletions.
diff --git a/src/components/Market/VisitList.js b/src/components/Market/VisitList.js
@@ -1,25 +1,25 @@
 import styled from "styled-components";
 import VisitItem from "./VisitItem";
 import { useEffect, useState } from "react";
-import { useQuery } from "@tanstack/react-query";
 import useSyluvAxios from "hooks/useSyluvAxios";
 
 const VisitList = () => {
     const syluvAxios = useSyluvAxios();
     const [newvisitList, setVisitList] = useState(null);
-    const { isLoading, data, isError, error } = useQuery({
-        queryKey: ["get-visitList"],
-        queryFn: () => syluvAxios.get("/market/visitlist"),
-    });
 
     useEffect(() => {
-        if (data) {
-            setVisitList(data.data.payload);
-        }
-    }, [data]);
-
-    if (isLoading) return <div></div>;
-    if (isError) return <div>Error: {error.message}</div>;
+        syluvAxios
+            .get("/market/visitlist")
+            .then((res) => {
+                setVisitList(res.data.payload);
+            })
+            .catch((error) => {
+                console.error(
+                    "방문 리스트 불러오기 중 에러가 발생했습니다:",
+                    error
+                );
+            });
+    }, []);
 
     const visitList = [
         {

diff --git a/src/utils/syluvAxios.js b/src/utils/syluvAxios.js
@@ -26,51 +26,68 @@ const CreateSyluvAxios = (navigate) => {
 
     syluvAxios.interceptors.request.use(
         function (config) {
-            return Promise.resolve(config);
+            console.log("Request sent:", config);
+            return config;
         },
-        (error) => Promise.reject(error)
+        (error) => {
+            console.error("Request error:", error);
+            return Promise.reject(error);
+        }
     );
 
     syluvAxios.interceptors.response.use(
         (response) => {
+            console.log("Response received:", response);
             return response;
         },
         function (error) {
-            const originalRequest = error.config;
-            if (error.response && !originalRequest._retry) {
-                originalRequest._retry = true;
-                return syluvAxios
-                    .get("/users/reissue", {
-                        headers: {
-                            RefreshToken: getRefreshToken(),
-                        },
-                    })
-                    .then((res) => {
-                        if (res.status === 200) {
-                            console.log("토큰 재발급 성공");
-                            setAccessToken(res.data.payload.accessToken);
-                            setRefreshToken(res.data.payload.refreshToken);
-                            axios.defaults.headers.common[
-                                "AccessToken"
-                            ] = `${res.data.payload.accessToken}`;
-                            return axios(originalRequest);
-                        }
-                    })
-                    .catch((reissueError) => {
-                        console.log("토큰 재발급 중 에러가 발생했습니다.");
-                        removeAccessToken();
-                        removeRefreshToken();
-                        console.log(reissueError);
-                        navigate("/login", { replace: true });
-                        return Promise.reject(reissueError);
-                    });
-            } else {
-                console.log("오류 발생:", error);
-                removeAccessToken();
-                removeRefreshToken();
-                navigate("/login", { replace: true });
-                return Promise.reject(error);
-            }
+            console.error("Response error:", error);
+            // 로그인 페이지로 이동
+            removeAccessToken();
+            removeRefreshToken();
+            navigate("/login", { replace: true });
+            console.log(error.response.status);
+            // const originalRequest = error.config;
+            // if (
+            //     error.response &&
+            //     error.response.status === 400 &&
+            //     !originalRequest._retry
+            // ) {
+            //     originalRequest._retry = true;
+            //     return syluvAxios
+            //         .get("/users/reissue", {
+            //             headers: {
+            //                 RefreshToken: getRefreshToken(),
+            //             },
+            //         })
+            //         .then((res) => {
+            //             if (res.status === 200) {
+            //                 console.log("토큰 재발급 성공");
+            //                 setAccessToken(res.data.payload.accessToken);
+            //                 setRefreshToken(res.data.payload.refreshToken);
+            //                 axios.defaults.headers.common[
+            //                     "AccessToken"
+            //                 ] = `${res.data.payload.accessToken}`;
+            //                 originalRequest.headers[
+            //                     "AccessToken"
+            //                 ] = `${res.data.payload.accessToken}`;
+            //                 return axios(originalRequest);
+            //             }
+            //         })
+            //         .catch((reissueError) => {
+            //             console.error(
+            //                 "토큰 재발급 중 에러가 발생했습니다:",
+            //                 reissueError
+            //             );
+            //             removeAccessToken();
+            //             removeRefreshToken();
+            //             navigate("/login", { replace: true });
+            //             return Promise.reject(reissueError);
+            //         });
+            // } else {
+            //     console.error("오류 발생:", error);
+            //     return Promise.reject(error);
+            // }
         }
     );