[설정 및 상태 관리 개선] Nuxt 설정에 pinia-plugin-persistedstate 추가, package.json 및 package-lock.json 업데이트, tab 및 user 스토어에 persist 기능 적용
This commit is contained in:
@@ -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,
|
||||
});
|
||||
|
207
stores/user.ts
207
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,
|
||||
}
|
||||
);
|
||||
|
Reference in New Issue
Block a user