diff --git a/package-lock.json b/package-lock.json
index 305b60c..af73917 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -45,7 +45,7 @@
"@typescript-eslint/parser": "^6.21.0",
"autoprefixer": "^10",
"eslint": "^8.57.1",
- "eslint-config-next": "^13.5.11",
+ "eslint-config-next": "13.5.11",
"eslint-config-prettier": "^10.1.5",
"eslint-plugin-import": "^2.32.0",
"eslint-plugin-prettier": "^5.5.1",
@@ -53,7 +53,7 @@
"eslint-plugin-react-hooks": "^5.2.0",
"husky": "^9.1.7",
"lint-staged": "^16.1.2",
- "next": "^13.5.11",
+ "next": "13.5.11",
"tailwindcss": "^3.4.4",
"typescript": "~5.3.0"
}
diff --git a/src/assets/icons/Star.svg b/src/assets/icons/Star.svg
deleted file mode 100644
index a109d75..0000000
--- a/src/assets/icons/Star.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
diff --git a/src/hooks/useInitUser.tsx b/src/hooks/useInitUser.tsx
new file mode 100644
index 0000000..a045757
--- /dev/null
+++ b/src/hooks/useInitUser.tsx
@@ -0,0 +1,23 @@
+import { useEffect } from 'react';
+import { getUser } from '@/api/user';
+import { useUserStore } from '@/stores/userStore';
+
+/**
+ * 앱 진입 시 유저 정보를 패치하고 Zustand에 저장하는 훅 */
+export const useInitUser = () => {
+ const setUser = useUserStore((state) => state.setUser);
+
+ /* 처음에만 실행 */
+ useEffect(() => {
+ const fetchUser = async () => {
+ try {
+ const user = await getUser();
+ setUser(user);
+ } catch (error) {
+ // 로그인 안 돼있는 경우 무시
+ }
+ };
+
+ fetchUser();
+ }, [setUser]);
+};
diff --git a/src/hooks/useUser.tsx b/src/hooks/useUser.tsx
new file mode 100644
index 0000000..118a368
--- /dev/null
+++ b/src/hooks/useUser.tsx
@@ -0,0 +1,12 @@
+import { useUserStore } from '@/stores/userStore';
+
+/**
+ * 전역 유저 상태를 쉽게 접근할 수 있는 커스텀 훅 */
+export const useUser = () => {
+ const user = useUserStore((state) => state.user);
+ const isLoggedIn = useUserStore((state) => state.isLoggedIn);
+ const setUser = useUserStore((state) => state.setUser);
+ const clearUser = useUserStore((state) => state.clearUser);
+
+ return { user, isLoggedIn, setUser, clearUser };
+};
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 3ce5fbd..0b7cffc 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -8,10 +8,12 @@ import { useRouter } from 'next/router';
import Gnb from '@/components/common/Gnb';
import type { AppProps } from 'next/app';
+import { useInitUser } from '@/hooks/useInitUser';
const queryClient = new QueryClient();
export default function App({ Component, pageProps }: AppProps) {
+ useInitUser();
const { pathname } = useRouter();
const pagesWithoutGnb = ['/signup', '/signin', '/oauth/kakao', '/oauth/signup/kakao', '/_error'];
const hideHeader = pagesWithoutGnb.includes(pathname);
diff --git a/src/stores/userStore.ts b/src/stores/userStore.ts
new file mode 100644
index 0000000..3644a57
--- /dev/null
+++ b/src/stores/userStore.ts
@@ -0,0 +1,32 @@
+import { create } from 'zustand';
+
+/* 유저 정보 타입 */
+interface User {
+ id: number;
+ nickname: string;
+ image: string | null;
+ teamId: string;
+ createdAt: string;
+ updatedAt: string;
+}
+
+/* Zustand 유저 상태 저장소 타입 */
+interface UserStore {
+ user: User | null;
+ isLoggedIn: boolean;
+
+ /* 유저 정보 설정 (로그인 등) */
+ setUser: (user: User) => void;
+
+ /* 유저 정보 초기화 (로그아웃 등) */
+ clearUser: () => void;
+}
+
+/**
+ * 유저 상태 전역 스토어 */
+export const useUserStore = create((set) => ({
+ user: null,
+ isLoggedIn: false,
+ setUser: (user) => set({ user, isLoggedIn: true }),
+ clearUser: () => set({ user: null, isLoggedIn: false }),
+}));