feat: 로그인 로그아웃 유틸리티 함수 구현

Author: Woolegend

api/axios.tsx

@@ -9,9 +9,10 @@ const instance = axios.create({
   },
 });
 
-export const setInstanceHeaders = (token: string) => {
+export const setInstanceHeaders = (token?: string) => {
+  const value = token ? `Bearer ${token}` : undefined;
   instance.interceptors.request.use((config) => {
-    config.headers["Authorization"] = `Bearer ${token}`;
+    config.headers["Authorization"] = value;
     return config;
   });
 };

lib/setLogIn.tsx

@@ -0,0 +1,11 @@
+import { AuthResponse } from "@/api/auth.api";
+import { setInstanceHeaders } from "@/api/axios";
+
+export default function setLogIn(userData: AuthResponse) {
+  const { user, accessToken, refreshToken } = userData;
+  sessionStorage.setItem("user", JSON.stringify(user));
+  sessionStorage.setItem("accessToken", accessToken);
+  sessionStorage.setItem("refreshToken", refreshToken);
+  sessionStorage.setItem("birth", new Date().toISOString());
+  setInstanceHeaders(accessToken);
+}

lib/setLogOut.tsx

@@ -0,0 +1,9 @@
+import { setInstanceHeaders } from "@/api/axios";
+
+export default function setLogOut() {
+  sessionStorage.removeItem("user");
+  sessionStorage.removeItem("accessToken");
+  sessionStorage.removeItem("refreshToken");
+  sessionStorage.removeItem("birth");
+  setInstanceHeaders();
+}

pages/signin.tsx

@@ -1,6 +1,7 @@
 import { postSignIn, SignInParams } from "@/api/auth.api";
 import { setInstanceHeaders } from "@/api/axios";
 import useAsync from "@/hooks/useAsync";
+import setLogIn from "@/lib/setLogIn";
 import styles from "@/styles/login.module.css";
 import Image from "next/image";
 import Link from "next/link";
@@ -51,11 +52,7 @@ export default function SignIn() {
 
     const response = await postSignInAsync(values);
     if (response) {
-      sessionStorage.setItem("user", JSON.stringify(response.user));
-      sessionStorage.setItem("accessToken", response.accessToken);
-      sessionStorage.setItem("refreshToken", response.refreshToken);
-      setInstanceHeaders(response.accessToken);
-
+      setLogIn(response);
       router.push("/");
     } else alert("회원가입에 실패했습니다.");
   };

pages/signup.tsx

@@ -1,6 +1,7 @@
 import { postSignUp, SignUpParams } from "@/api/auth.api";
 import { setInstanceHeaders } from "@/api/axios";
 import useAsync from "@/hooks/useAsync";
+import setLogIn from "@/lib/setLogIn";
 import styles from "@/styles/login.module.css";
 import Image from "next/image";
 import Link from "next/link";
@@ -68,10 +69,7 @@ export default function SignUp() {
     }
     const response = await postSignUpAsync(values);
     if (response) {
-      sessionStorage.setItem("user", JSON.stringify(response.user));
-      sessionStorage.setItem("accessToken", response.accessToken);
-      sessionStorage.setItem("refreshToken", response.refreshToken);
-      setInstanceHeaders(response.accessToken);
+      setLogIn(response);
       router.push("/");
     } else alert("회원가입에 실패했습니다.");
   };