Feature/ user store - zustand 기반 전역 유저 상태 관리

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]);
+};

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 };
+};

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);

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<UserStore>((set) => ({
+  user: null,
+  isLoggedIn: false,
+  setUser: (user) => set({ user, isLoggedIn: true }),
+  clearUser: () => set({ user: null, isLoggedIn: false }),
+}));