feat: localStorage 작업 관리를 위한 storageHelper 모듈 생성

- 액세스 토큰과 리프레시 토큰을 설정, 가져오기, 삭제하는 함수 추가.
- 사용자 데이터를 설정, 가져오기, 삭제하는 함수 추가.
- localStorage에서 모든 토큰과 사용자 데이터를 지우는 함수 추가.
- signUpUser와 loginUser 함수를 수정하여 storageHelper를 사용해 토큰과 사용자 데이터를 관리.

src/api/auth.ts

@@ -1,6 +1,17 @@
 import axios from "axios";
 import { BASE_URL } from "../constants/apiConfig";
 import { UserSignUpData, AuthResponse, UserLoginData } from "../types";
+import {
+  setAccessToken,
+  setRefreshToken,
+  setUser,
+} from "../utils/tokenStorageHelper";
+
+const setTokens = (data: AuthResponse) => {
+  setAccessToken(data.accessToken);
+  setRefreshToken(data.refreshToken);
+  setUser(data.user);
+};
 
 export const signUpUser = async (
   data: UserSignUpData
@@ -10,8 +21,7 @@ export const signUpUser = async (
       `${BASE_URL}/auth/signUp`,
       data
     );
-    localStorage.setItem("accessToken", response.data.accessToken);
-    localStorage.setItem("refreshToken", response.data.refreshToken);
+    setTokens(response.data);
     return response.data;
   } catch (error) {
     console.error("Failed sign up", error);
@@ -25,9 +35,7 @@ export const loginUser = async (data: UserLoginData): Promise<AuthResponse> => {
       `${BASE_URL}/auth/signIn`,
       data
     );
-    localStorage.setItem("accessToken", response.data.accessToken);
-    localStorage.setItem("refreshToken", response.data.refreshToken);
-    localStorage.setItem("user", JSON.stringify(response.data.user));
+    setTokens(response.data);
     return response.data;
   } catch (error) {
     console.error("Failed sign in", error);

src/contexts/AuthContext.tsx

@@ -7,6 +7,7 @@ import {
 } from "react";
 import { loginUser } from "../api/auth";
 import { AuthResponse, User, UserLoginData } from "../types";
+import { clearStorage, getUser } from "../utils/tokenStorageHelper";
 
 interface AuthContextType {
   user: User | null;
@@ -37,16 +38,14 @@ export function AuthProvider({ children }: AuthProviderProps) {
 
   async function logout() {
     setUser(null);
-    localStorage.removeItem("accessToken");
-    localStorage.removeItem("refreshToken");
-    localStorage.removeItem("user");
+    clearStorage();
     setIsLoading(true);
   }
 
   useEffect(() => {
-    const storedUser = localStorage.getItem("user");
+    const storedUser = getUser();
     if (storedUser) {
-      setUser(JSON.parse(storedUser));
+      setUser(storedUser);
     }
     setIsLoading(false);
   }, []);

src/pages/LoginPage/LoginPage.tsx

@@ -8,6 +8,7 @@ import TogglePasswordView from "../../assets/icon-password-view.svg";
 import { Link, useNavigate } from "react-router-dom";
 import { UserLoginData } from "../../types";
 import { useAuth } from "../../contexts/AuthContext";
+import { getAccessToken } from "../../utils/tokenStorageHelper";
 
 const LoginPage: React.FC = () => {
   const {
@@ -33,7 +34,7 @@ const LoginPage: React.FC = () => {
   };
 
   useEffect(() => {
-    const accessToken = localStorage.getItem("accessToken");
+    const accessToken = getAccessToken();
     if (accessToken) {
       navigate("/");
     }

src/pages/SignUpPage/SignUpPage.tsx

@@ -8,6 +8,7 @@ import TogglePasswordView from "../../assets/icon-password-view.svg";
 import { Link, useNavigate } from "react-router-dom";
 import { UserSignUpData } from "../../types";
 import { signUpUser } from "../../api/auth";
+import { getAccessToken } from "../../utils/tokenStorageHelper";
 
 const SignUpPage: React.FC = () => {
   const {
@@ -34,7 +35,7 @@ const SignUpPage: React.FC = () => {
   };
 
   useEffect(() => {
-    const accessToken = localStorage.getItem("accessToken");
+    const accessToken = getAccessToken();
     if (accessToken) {
       navigate("/");
     }

src/utils/tokenStorageHelper.ts

@@ -0,0 +1,48 @@
+import { User } from "../types";
+
+export const setAccessToken = (token: string): void => {
+  localStorage.setItem("accessToken", token);
+};
+
+export const getAccessToken = (): string | null => {
+  return localStorage.getItem("accessToken");
+};
+
+export const removeAccessToken = (): void => {
+  localStorage.removeItem("accessToken");
+};
+
+export const setRefreshToken = (token: string): void => {
+  localStorage.setItem("refreshToken", token);
+};
+
+export const getRefreshToken = (): string | null => {
+  return localStorage.getItem("refreshToken");
+};
+
+export const removeRefreshToken = (): void => {
+  localStorage.removeItem("refreshToken");
+};
+
+export const clearTokens = (): void => {
+  removeAccessToken();
+  removeRefreshToken();
+};
+
+export const setUser = (user: User): void => {
+  localStorage.setItem("user", JSON.stringify(user));
+};
+
+export const getUser = () => {
+  const user = localStorage.getItem("user");
+  return user ? JSON.parse(user) : null;
+};
+
+export const removeUser = (): void => {
+  localStorage.removeItem("user");
+};
+
+export const clearStorage = (): void => {
+  clearTokens();
+  removeUser();
+};