Merge pull request #14 from local-mood/Hyeonmin

토큰 처리 임의 로직 생성
local-mood · Dec 24, 2023 · ca4752c · ca4752c
2 parents 2b305fa + 1981a59
commit ca4752c
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 28 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -14,33 +14,38 @@ import VoteLeader from "./pages/vote/VoteLeader";
 import VoteResults from "./pages/vote/VoteResults";
 import VoteDemoday from "./pages/vote/VoteDemoday";
 import { ProtectedRoute } from "./features/auth/components/ProtectedRoute/ProtectedRoute";
+import { Suspense } from "react";
 
 function App() {
-  const user = false; //로그인 로직
+  const user = true;
   return (
-    <Router>
-      <Header />
-      <Routes>
-        <Route path="/" element={<VoteCategory />} />
-        <Route
-          element={<ProtectedRoute isAllowed={!user} redirectPath={"/"} />}
-        >
-          <Route path="/login" element={<Login />} />
-          <Route path="/register" element={<Register />} />
-        </Route>
-        <Route
-          element={<ProtectedRoute isAllowed={user} redirectPath={"/login"} />}
-        >
-          <Route path="/select-part" element={<VotePartLeader />} />
-          <Route path="/select-demoday" element={<VoteDemodaySelect />} />
-          <Route path="/select-leader" element={<VoteLeader />} />
-          <Route path="/vote-leader" element={<VoteLeader />} />
-          <Route path="/vote-demoday" element={<VoteDemoday />} />
-          <Route path="/vote-results" element={<VoteResults />} />
-        </Route>
-        <Route path={"/*"} element={<Navigate to={"/"} />} />
-      </Routes>
-    </Router>
+    <Suspense fallback={null}>
+      <Router>
+        <Header />
+        <Routes>
+          <Route path="/" element={<VoteCategory />} />
+          <Route
+            element={<ProtectedRoute isAllowed={!user} redirectPath={"/"} />}
+          >
+            <Route path="/login" element={<Login />} />
+            <Route path="/register" element={<Register />} />
+          </Route>
+          <Route
+            element={
+              <ProtectedRoute isAllowed={!!user} redirectPath={"/login"} />
+            }
+          >
+            <Route path="/select-part" element={<VotePartLeader />} />
+            <Route path="/select-demoday" element={<VoteDemodaySelect />} />
+            <Route path="/select-leader" element={<VoteLeader />} />
+            <Route path="/vote-leader" element={<VoteLeader />} />
+            <Route path="/vote-demoday" element={<VoteDemoday />} />
+            <Route path="/vote-results" element={<VoteResults />} />
+          </Route>
+          <Route path={"/*"} element={<Navigate to={"/"} />} />
+        </Routes>
+      </Router>
+    </Suspense>
   );
 }
 

diff --git a/src/features/auth/queries/dto/auth-login.ts b/src/features/auth/queries/dto/auth-login.ts
@@ -2,3 +2,12 @@ export interface AuthLoginRequest {
   email: string;
   password: string;
 }
+
+export interface AuthLoginResponse {
+  code: number;
+  code_desc: string;
+  data: {
+    accessToken: string;
+    refreshToken: string;
+  };
+}
diff --git a/src/features/auth/queries/usePostLogin.tsx b/src/features/auth/queries/usePostLogin.tsx
@@ -1,10 +1,14 @@
 import { useMutation } from "@tanstack/react-query";
 import { axiosInstance } from "@/common/libs/axios";
-import { AuthLoginRequest } from "./dto/auth-login";
+import { AuthLoginRequest, AuthLoginResponse } from "./dto/auth-login";
 
 async function postLogin(data: AuthLoginRequest) {
-  const res = await axiosInstance.post("/app/auth/login", data);
-  return res.data;
+  const res = await axiosInstance.post<AuthLoginResponse>(
+    "/app/auth/login",
+    data
+  );
+  console.log(data);
+  return res.data.data.accessToken;
 }
 
 export function usePostLogin() {

diff --git a/src/pages/auth/Login.tsx b/src/pages/auth/Login.tsx
@@ -5,13 +5,19 @@ import { styled } from "styled-components";
 import { FORM_TYPE } from "@/features/form/constant/form-type";
 import { usePostLogin } from "@/features/auth/queries/usePostLogin";
 import { LoginFormState } from "@/features/form/states/form-data-state";
+import { useEffect } from "react";
 
 export default function Login() {
-  const { mutate: postLogin } = usePostLogin();
+  const { mutate: postLogin, data: token } = usePostLogin();
   const { isMobile } = MediaQuery();
   const loginFormSubmit = (e: LoginFormState) => {
     postLogin(e);
   };
+  useEffect(() => {
+    if (token) {
+      localStorage.setItem("token", token);
+    }
+  }, [token]);
   return (
     <LoginContainer $isMobile={isMobile}>
       <LoginDetail>