[설정 및 상태 관리 개선] Nuxt 설정에 pinia-plugin-persistedstate 추가, package.json 및 package-lock.json 업데이트, tab 및 user 스토어에 persist 기능 적용

stores/user.ts

@@ -1,103 +1,112 @@
-export const useUserStore = defineStore("user", () => {
-  // 상태
-  const isLoggedIn = ref(false);
-  const user = ref<{
-    userId?: string;
-    name?: string;
-  } | null>(null);
-  const token = ref<string | null>(null);
-
-  // 추후 제거 필요
-  const isAdmin = true;
-
-  interface LoginData {
-    userId: string;
-  }
-  // 액션
-  const login = async (userId: string, password: string) => {
-    try {
-      // 실제 API 호출로 대체할 수 있습니다
-
-      const { success, data } = await useApi<ApiResponse<LoginData>>("/login", {
-        method: "post",
-        body: { userId, password },
-      });
-
-      if (success) {
-        user.value = data;
-        isLoggedIn.value = true;
-      } else {
-        throw new Error("아이디 또는 비밀번호가 올바르지 않습니다.");
-      }
-
-      return { success };
-    } catch (error: any) {
-      console.log(error);
-      return {
-        success: false,
-        error:
-          error?.response?.status === 401
-            ? "아이디 또는 비밀번호가 올바르지 않습니다."
-            : error instanceof Error
-              ? error.message
-              : "로그인에 실패했습니다.",
-      };
-    }
-  };
-
-  const logout = async () => {
-    try {
-      await useApi("/members/logout", {
-        method: "post",
-      });
-    } catch (error) {
-      console.error("로그아웃 요청 실패:", error);
-    } finally {
-      // 로컬 상태 정리
-      user.value = null;
-      isLoggedIn.value = false;
-    }
-  };
-
-  const checkAuth = () => {
-    // 페이지 로드 시 로컬 스토리지에서 사용자 정보 복원
-    const savedUser = localStorage.getItem("user");
-    const savedToken = localStorage.getItem("token");
-
-    if (savedUser && savedToken) {
-      user.value = JSON.parse(savedUser);
-      token.value = savedToken;
-      isLoggedIn.value = true;
-    }
-  };
-
-  const setToken = (accessToken: string) => {
-    token.value = accessToken;
-  };
-
-  const getToken = () => {
-    return token;
-  };
-
-  // 초기 인증 상태 확인
-  if (import.meta.client) {
-    checkAuth();
-  }
-
-  return {
+export const useUserStore = defineStore(
+  "user",
+  () => {
     // 상태
-    isLoggedIn,
-    user,
-    token,
+    const isLoggedIn = ref(false);
+    const user = ref<{
+      userId?: string;
+      name?: string;
+    } | null>(null);
+    const token = ref<string | null>(null);
 
-    // 게터
-    isAdmin,
+    // 추후 제거 필요
+    const isAdmin = true;
 
+    interface LoginData {
+      userId: string;
+    }
     // 액션
-    login,
-    logout,
-    checkAuth,
-    setToken,
-    getToken,
-  };
-});
+    const login = async (userId: string, password: string) => {
+      try {
+        // 실제 API 호출로 대체할 수 있습니다
+
+        const { success, data } = await useApi<ApiResponse<LoginData>>(
+          "/login",
+          {
+            method: "post",
+            body: { userId, password },
+          }
+        );
+
+        if (success) {
+          user.value = data;
+          isLoggedIn.value = true;
+        } else {
+          throw new Error("아이디 또는 비밀번호가 올바르지 않습니다.");
+        }
+
+        return { success };
+      } catch (error: any) {
+        console.log(error);
+        return {
+          success: false,
+          error:
+            error?.response?.status === 401
+              ? "아이디 또는 비밀번호가 올바르지 않습니다."
+              : error instanceof Error
+                ? error.message
+                : "로그인에 실패했습니다.",
+        };
+      }
+    };
+
+    const logout = async () => {
+      try {
+        await useApi("/members/logout", {
+          method: "post",
+        });
+      } catch (error) {
+        console.error("로그아웃 요청 실패:", error);
+      } finally {
+        // 로컬 상태 정리
+        user.value = null;
+        isLoggedIn.value = false;
+      }
+    };
+
+    const checkAuth = () => {
+      // 페이지 로드 시 로컬 스토리지에서 사용자 정보 복원
+      const savedUser = localStorage.getItem("user");
+      const savedToken = localStorage.getItem("token");
+
+      if (savedUser && savedToken) {
+        user.value = JSON.parse(savedUser);
+        token.value = savedToken;
+        isLoggedIn.value = true;
+      }
+    };
+
+    const setToken = (accessToken: string) => {
+      token.value = accessToken;
+    };
+
+    const getToken = () => {
+      return token;
+    };
+
+    // 초기 인증 상태 확인
+    if (import.meta.client) {
+      checkAuth();
+    }
+
+    return {
+      // 상태
+      isLoggedIn,
+      user,
+      token,
+
+      // 게터
+      isAdmin,
+
+      // 액션
+      login,
+      logout,
+      checkAuth,
+      setToken,
+      getToken,
+    };
+  },
+  {
+    persist: true,
+  }
+);