From 72e162e2df255e570f99724a18979e631cb7099d Mon Sep 17 00:00:00 2001
From: KIM MIN WOO <79193811+minwoo1999@users.noreply.github.com>
Date: Sun, 25 May 2025 15:03:27 +0900
Subject: [PATCH] =?UTF-8?q?bugfix:=20#105=20=EC=86=8C=EC=85=9C=EB=A1=9C?=
 =?UTF-8?q?=EA=B7=B8=EC=9D=B8=20=EC=9D=B4=ED=9B=84=20=ED=86=A0=ED=81=B0?=
 =?UTF-8?q?=EC=9D=B4=20=EC=9E=88=EC=96=B4=EB=8F=84=20401=EB=A1=9C=20?=
 =?UTF-8?q?=EB=96=A8=EC=96=B4=EC=A7=80=EB=8A=94=20=ED=98=84=EC=83=81?=
 =?UTF-8?q?=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

소셜로그인 이후 토큰이 있어도 401로 떨어지는 현상해결
---
 src/api/index.ts                  | 29 ++++++++++++++++++-----------
 src/app/oauth2/redierct/index.tsx | 29 +++++++++++++++++------------
 src/store/user/index.ts           |  3 ++-
 3 files changed, 37 insertions(+), 24 deletions(-)

diff --git a/src/api/index.ts b/src/api/index.ts
index 129053d..88c9386 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -6,18 +6,25 @@ import axios, {
   AxiosRequestConfig,
   AxiosResponse,
   InternalAxiosRequestConfig,
+  RawAxiosRequestHeaders,
 } from "axios";
 
 /** API 사용 전, ENV 파일을 통해 서버 연동 설정을 해주세요 */
 const API_URL = import.meta.env.VITE_API_URL as string;
 
-const baseApi = axios.create({
-  baseURL: API_URL,
-  timeout: 5000,
+const headers: RawAxiosRequestHeaders = {
+  "Content-Type": "application/json",
+};
 
-  headers: {
-    "Content-Type": "application/json",
-  },
+const token = localStorage.getItem(ACCESS_TOKEN);
+if (token) {
+  headers.Authorization = `Bearer ${token}`;
+}
+
+const axiosInstance = axios.create({
+  baseURL: API_URL,
+  headers,
+  withCredentials: true, // CORS 쿠키 전송을 위해 필요
 });
 
 /** 개발 환경에서만 실행되논 로깅 함수 */
@@ -120,11 +127,11 @@ const onErrorResponse = (error: AxiosError | Error) => {
 };
 
 /** 인터셉터를 설정 하고, Axios Instance를 반환하는 함수 */
-const setInterceptors = (axiosInstance: AxiosInstance): AxiosInstance => {
-  axiosInstance.interceptors.request.use(onRequest, onErrorRequest);
-  axiosInstance.interceptors.response.use(onResponse, onErrorResponse);
+const setInterceptors = (instance: AxiosInstance): AxiosInstance => {
+  instance.interceptors.request.use(onRequest, onErrorRequest);
+  instance.interceptors.response.use(onResponse, onErrorResponse);
 
-  return axiosInstance;
+  return instance;
 };
 
-export const api = setInterceptors(baseApi);
+export const api = setInterceptors(axiosInstance);
diff --git a/src/app/oauth2/redierct/index.tsx b/src/app/oauth2/redierct/index.tsx
index a838b54..1f4e4ab 100644
--- a/src/app/oauth2/redierct/index.tsx
+++ b/src/app/oauth2/redierct/index.tsx
@@ -1,25 +1,30 @@
-import { loginState } from "@/store/user";
-import { ACCESS_TOKEN } from "@/utils/constant";
-import { useSetAtom } from "jotai";
 import { useEffect } from "react";
-import { useLocation, useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
+import { useSetAtom } from "jotai";
+import { loginState, tokenState } from "@/store/user";
+import { ACCESS_TOKEN } from "@/utils/constant";
 
 export default function Oauth2Redirect() {
-  const location = useLocation();
   const navigate = useNavigate();
-  const params = new URLSearchParams(location.search);
-  const accessToken = params.get("accessToken");
   const setLogin = useSetAtom(loginState);
+  const setToken = useSetAtom(tokenState);
 
   useEffect(() => {
-    if (accessToken) {
-      localStorage.setItem(ACCESS_TOKEN, accessToken);
+    const params = new URLSearchParams(window.location.search);
+    const token = params.get("token");
+
+    if (token) {
+      localStorage.setItem(ACCESS_TOKEN, token);
+      setToken(token);
       setLogin(true);
       navigate("/");
     } else {
-      alert("오류가 발생했어요, 관리자에게 문의해주세요");
+      // 토큰이 없는 경우 에러 처리
+      setLogin(false);
+      setToken("");
+      navigate("/signin");
     }
-  }, []);
+  }, [navigate, setLogin, setToken]);
 
-  return <>처리중입니다.</>;
+  return null;
 }
diff --git a/src/store/user/index.ts b/src/store/user/index.ts
index 8badd0f..398b5e0 100644
--- a/src/store/user/index.ts
+++ b/src/store/user/index.ts
@@ -1,3 +1,4 @@
 import { atomWithStorage } from "jotai/utils";
 
-export const loginState = atomWithStorage("isLogin", false);
\ No newline at end of file
+export const loginState = atomWithStorage("isLogin", false);
+export const tokenState = atomWithStorage("accessToken", "");