Feat/auth 로그인 페이지의 alert를 Mui Alert로 변경과 토큰 검증 및 갱신 자동화

front/src/App.tsx

@@ -1,4 +1,4 @@
-import { BrowserRouter, Route, Routes } from "react-router-dom";
+import { Route, Routes } from "react-router-dom";
 import "./App.css";
 import Layout from "./components/Layout/Layout";
 import { ServerMap } from "./components/Map/ServerMap";
@@ -8,16 +8,14 @@ import Login from "./pages/Login";
 function App() {
   return (
     <div className="App">
-      <BrowserRouter>
-        <Routes>
-          <Route path="/login" element={<Login />} />
-          <Route path="/join" element={<Join />} />
-          <Route path="/" element={<Layout />}>
-            <Route index element={<Home />} />
-            <Route path="server/:serverId" element={<ServerMap />} />
-          </Route>
-        </Routes>
-      </BrowserRouter>
+      <Routes>
+        <Route path="/login" element={<Login />} />
+        <Route path="/join" element={<Join />} />
+        <Route path="/" element={<Layout />}>
+          <Route index element={<Home />} />
+          <Route path="server/:serverId" element={<ServerMap />} />
+        </Route>
+      </Routes>
     </div>
   );
 }

front/src/api/axiosInstance.ts

@@ -0,0 +1,22 @@
+/*
+이 인스턴스가 필요한 이유 : 
+--------------------------------------------------------
+<로직>
+토큰이 유효한가?
+토큰이 유효하지 않다면 리프레시 토큰으로 발급
+발급실패 시 로그인페이지로 이동  
+--------------------------------------------------------
+axios 인터셉터로 위의 로직대로 코드 작성 하다가 요청 인터셉터가 계속해서 같은 요청을 반복하는 상황이 발생, 
+token.ts의 두 함수(validateAccessToken, refreshAccessToken)에서 요청을 보내는 부분이 인터셉터에 의해 다시 가로채지고 있는 것으로 추정
+이를 해결하기 위한 방법으로 아래의 인스턴스를 별도 만들어서 해결함
+*/
+import axios from "axios";
+
+const axiosInstance = axios.create({
+  baseURL: "http://kpring.duckdns.org",
+  headers: {
+    "Content-Type": "application/json",
+  },
+});
+
+export default axiosInstance;

front/src/api/token.ts

@@ -0,0 +1,61 @@
+import axiosInstance from "./axiosInstance";
+
+// 토큰 검증 API
+export async function validateAccessToken(token: string): Promise<boolean> {
+  console.log("액세트 토큰이 유효한가?:", token);
+  try {
+    const response = await axiosInstance.post(
+      "/auth/api/v2/validation",
+      {},
+      {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      }
+    );
+    console.log("액세스 토큰 응답 상태(status):", response.status);
+    console.log("액세스토큰 응답 데이터:", response.data);
+
+    if (response.status === 200) {
+      console.log("토큰 검증 성공:", response.data);
+      return true;
+    } else {
+      console.error("토큰 검증 실패:", response.data);
+      return false;
+    }
+  } catch (error) {
+    console.error("토큰 검증 중 오류 발생:", error);
+    return false;
+  }
+}
+
+// 새로운 accessToken 요청
+export async function refreshAccessToken(
+  refreshToken: string
+): Promise<{ accessToken: string; refreshToken: string } | null> {
+  console.log("리프레시 토큰으로 새로운 액세스 토큰 요청:", refreshToken);
+  try {
+    const response = await axiosInstance.post(
+      "/auth/api/v1/access_token",
+      { refreshToken },
+      {
+        headers: {
+          "Content-Type": "application/json",
+        },
+      }
+    );
+    console.log("새로운 액세스 토큰 응답 상태(status):", response.status);
+    console.log("새로운 액세스 토큰 응답 데이터 :", response.data);
+
+    if (response.status === 200) {
+      console.log("accessToken 갱신 성공:", response.data);
+      return response.data.data;
+    } else {
+      console.error("accessToken 갱신 실패:", response.data);
+      return null;
+    }
+  } catch (error) {
+    console.error("API 호출 중 오류 발생:", error);
+    return null;
+  }
+}

front/src/components/Auth/LoginBox.tsx

@@ -1,35 +1,47 @@
 import LoginIcon from "@mui/icons-material/Login";
 import PersonAddAlt1Icon from "@mui/icons-material/PersonAddAlt1";
+import Alert from "@mui/material/Alert";
 import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
+import Snackbar, { SnackbarCloseReason } from "@mui/material/Snackbar";
 import TextField from "@mui/material/TextField";
+import axios from "axios";
+import React, { SyntheticEvent, useState } from "react";
 import { useNavigate } from "react-router";
 import { LoginValidation } from "../../hooks/LoginValidation";
 import { useLoginStore } from "../../store/useLoginStore";
-
+import type { AlertInfo } from "../../types/join";
 async function login(email: string, password: string) {
   try {
-    const response = await fetch(
+    const response = await axios.post(
       "http://kpring.duckdns.org/user/api/v1/login",
+      { email, password },
       {
-        method: "POST",
         headers: {
           "Content-Type": "application/json",
         },
-        body: JSON.stringify({ email, password }),
       }
     );
 
-    const data = await response.json();
-    if (response.ok) {
-      console.log("로그인 성공:", data);
-      return data.data;
+    const data = response.data;
+    console.log("로그인 성공:", data);
+    return data.data;
+  } catch (error) {
+    if (axios.isAxiosError(error)) {
+      if (error.response) {
+        // 서버 응답이 있지만, 응답 코드가 2xx가 아님
+        console.error("로그인 실패:", error.response.data);
+      } else if (error.request) {
+        // 요청이 이루어졌으나 응답을 받지 못함
+        console.error("응답 없음:", error.request);
+      } else {
+        // 요청 설정 중에 문제 발생
+        console.error("API 호출 중 오류 발생:", error.message);
+      }
     } else {
-      console.error("로그인 실패:", data);
-      return null;
+      // axios 에러가 아닌 경우
+      console.error("예상치 못한 오류 발생:", error);
     }
-  } catch (error) {
-    console.error("API 호출 중 오류 발생:", error);
     return null;
   }
 }
@@ -44,7 +56,15 @@ function LoginBox() {
     validatePassword,
     validators,
   } = LoginValidation();
+  const [open, setOpen] = useState(false);
+  const [alertInfo, setAlertInfo] = useState<AlertInfo>({
+    severity: "info",
+    message: "",
+  });
   const { setTokens } = useLoginStore();
+
+  const navigate = useNavigate();
+
   const onChangeHandler = (
     field: string,
     event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
@@ -62,13 +82,36 @@ function LoginBox() {
     if (result) {
       //console.log("토큰 설정:", result);
       setTokens(result.accessToken, result.refreshToken);
-      //navigate("/");
+
+      setAlertInfo({
+        severity: "success",
+        message: "로그인 성공! 3초 후 메인 페이지로 이동합니다.",
+      });
+      setOpen(true);
+
+      setTimeout(() => {
+        navigate("/");
+      }, 3000);
     } else {
       console.error("로그인 실패.");
-      alert("로그인 실패. 이메일 혹은 비밀번호를 확인해 주세요.");
+      setAlertInfo({
+        severity: "error",
+        message: "로그인 실패. 이메일 혹은 비밀번호를 확인해 주세요.",
+      });
+      setOpen(true);
     }
   };
-  const navigate = useNavigate();
+
+  const clickCloseHandler = (
+    event: Event | SyntheticEvent<any, Event>,
+    reason?: SnackbarCloseReason
+  ) => {
+    if (reason === "clickaway") {
+      return;
+    }
+    setOpen(false);
+  };
+
   return (
     <section className="flex justify-center mt-[200px]">
       <div className="mt-[30px] w-[400px] text-center">
@@ -136,6 +179,19 @@ function LoginBox() {
             </Button>
           </div>
         </Box>
+        <Snackbar
+          open={open}
+          autoHideDuration={6000}
+          onClose={clickCloseHandler}
+        >
+          <Alert
+            onClose={clickCloseHandler}
+            severity={alertInfo.severity}
+            sx={{ width: "100%" }}
+          >
+            {alertInfo.message}
+          </Alert>
+        </Snackbar>
       </div>
     </section>
   );

front/src/index.tsx

@@ -1,11 +1,30 @@
+import { ThemeProvider } from "@emotion/react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import React from "react";
 import ReactDOM from "react-dom/client";
-import "./index.css";
+import { useNavigate } from "react-router";
+import { BrowserRouter } from "react-router-dom";
 import App from "./App";
+import "./index.css";
 import reportWebVitals from "./reportWebVitals";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { ThemeProvider } from "@emotion/react";
+import { useLoginStore } from "./store/useLoginStore";
 import theme from "./theme/themeConfig";
+import interceptorSetup from "./utils/axiosInterceptor";
+
+interface InterceptorSetupProps {
+  children: React.ReactNode;
+}
+
+// axios 인터셉터 설정 컴포넌트
+const InterceptorSetup: React.FC<InterceptorSetupProps> = ({ children }) => {
+  const store = useLoginStore();
+  const navigate = useNavigate();
+  React.useEffect(() => {
+    interceptorSetup(store, navigate);
+  }, [store, navigate]);
+
+  return <>{children}</>;
+};
 
 const root = ReactDOM.createRoot(
   document.getElementById("root") as HTMLElement
@@ -16,7 +35,11 @@ const queryClient = new QueryClient();
 root.render(
   <QueryClientProvider client={queryClient}>
     <ThemeProvider theme={theme}>
-      <App />
+      <BrowserRouter>
+        <InterceptorSetup>
+          <App />
+        </InterceptorSetup>
+      </BrowserRouter>
     </ThemeProvider>
   </QueryClientProvider>
 );

front/src/store/useLoginStore.ts

@@ -1,17 +1,23 @@
 import create from "zustand";
 
-interface LoginState {
+export interface LoginState {
   accessToken: string;
   refreshToken: string;
   setTokens: (accessToken: string, refreshToken: string) => void;
+  clearTokens: () => void;
 }
 
 export const useLoginStore = create<LoginState>((set) => ({
-  accessToken: "",
-  refreshToken: "",
+  accessToken: localStorage.getItem("dicoTown_AccessToken") || "",
+  refreshToken: localStorage.getItem("dicoTown_RefreshToken") || "",
   setTokens: (accessToken, refreshToken) => {
     set({ accessToken, refreshToken });
     localStorage.setItem("dicoTown_AccessToken", accessToken);
     localStorage.setItem("dicoTown_RefreshToken", refreshToken);
   },
+  clearTokens: () => {
+    set({ accessToken: "", refreshToken: "" });
+    localStorage.removeItem("dicoTown_AccessToken");
+    localStorage.removeItem("dicoTown_RefreshToken");
+  },
 }));