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

This commit is contained in:
2025-08-28 16:59:15 +09:00
parent 285a2662b7
commit 791d21d052
5 changed files with 168 additions and 122 deletions

View File

@@ -1,9 +1,9 @@
import { defineStore } from "pinia";
interface Tab {
key: number; // 1~10
key: number; // 1~10
label: string;
to: string; // 페이지 라우트
to: string; // 페이지 라우트
componentName: string;
}
@@ -12,7 +12,7 @@ const defaultTab = { key: 1, label: "홈", to: "/", componentName: "home" };
export const useTabsStore = defineStore("tabs", {
state: () => ({
tabs: [defaultTab] as Tab[],
activeTab: 1
activeTab: 1,
}),
actions: {
// ✅ 새 탭 추가 (기본 페이지는 "/")
@@ -27,7 +27,7 @@ export const useTabsStore = defineStore("tabs", {
let key = 1;
while (this.tabs.find(t => t.key === key)) key++;
this.tabs.push({...defaultTab, key : key});
this.tabs.push({ ...defaultTab, key: key });
this.activeTab = key;
$router.push(defaultTab.to);
return key;
@@ -49,7 +49,9 @@ export const useTabsStore = defineStore("tabs", {
removeTab(key: number) {
this.tabs = this.tabs.filter(t => t.key !== key);
if (this.activeTab === key) {
this.activeTab = this.tabs.length ? this.tabs[this.tabs.length - 1].key : 0;
this.activeTab = this.tabs.length
? this.tabs[this.tabs.length - 1].key
: 0;
}
},
@@ -59,6 +61,7 @@ export const useTabsStore = defineStore("tabs", {
const tab = this.tabs.find(t => t.key === this.activeTab);
$router.push(`/${tab?.key}${tab?.to}`);
}
}
},
},
persist: true,
});

View File

@@ -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,
}
);