[Refactor] 전역 상태(isAuthenticated) Context API → Zustand Store 전환

package.json

@@ -62,7 +62,8 @@
     "sockjs-client": "^1.6.1",
     "swiper": "^12.0.3",
     "tailwind-merge": "^3.3.1",
-    "zod": "^4.1.13"
+    "zod": "^4.1.13",
+    "zustand": "^5.0.11"
   },
   "devDependencies": {
     "@commitlint/cli": "^20.1.0",

src/components/layout/gnb/index.tsx

@@ -4,12 +4,12 @@ import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 
 import { Icon } from '@/components/icon';
-import { useAuth } from '@/providers';
+import { useAuthStore } from '@/stores';
 
 export const GNB = () => {
   const pathname = usePathname();
 
-  const { isAuthenticated } = useAuth();
+  const { isAuthenticated } = useAuthStore();
 
   const highLightPath = (path: string) => {
     if (path === '/') {

src/components/layout/header/index.tsx

@@ -5,10 +5,10 @@ import Link from 'next/link';
 import { Icon } from '@/components/icon';
 import { CowBell } from '@/components/layout/header/cow-bell';
 import { HeaderLogin } from '@/components/layout/header/header-login';
-import { useAuth } from '@/providers';
+import { useAuthStore } from '@/stores';
 
 export const Header = () => {
-  const { isAuthenticated } = useAuth();
+  const { isAuthenticated } = useAuthStore();
 
   return (
     <header className={`sticky top-0 z-100 w-full bg-white`}>

src/components/pages/auth/login/login-toast-effect/index.tsx

@@ -4,15 +4,15 @@ import { useEffect, useRef } from 'react';
 
 import { Toast } from '@/components/ui';
 import { useToast } from '@/components/ui/toast/core';
-import { useAuth } from '@/providers';
+import { useAuthStore } from '@/stores';
 
 type Props = {
   error?: string | string[];
 };
 
 export const LoginToastEffect = ({ error }: Props) => {
   const { run } = useToast();
-  const { setIsAuthenticated } = useAuth();
+  const { setIsAuthenticated } = useAuthStore();
   const lastErrorRef = useRef<string>('');
 
   useEffect(() => {

src/hooks/use-auth/use-auth-login/index.ts

@@ -8,7 +8,7 @@ import axios, { AxiosError } from 'axios';
 
 import { API } from '@/api';
 import { normalizePath } from '@/lib/auth/utils';
-import { useAuth } from '@/providers';
+import { useAuthStore } from '@/stores';
 import { LoginRequest } from '@/types/service/auth';
 import { CommonErrorResponse } from '@/types/service/common';
 
@@ -29,7 +29,7 @@ export const useLogin = () => {
   const [loginError, setLoginError] = useState<string | null>(null);
   const clearLoginError = useCallback(() => setLoginError(null), []);
 
-  const { setIsAuthenticated } = useAuth();
+  const { setIsAuthenticated } = useAuthStore();
 
   const handleLogin = async (payload: LoginRequest, formApi: { reset: () => void }) => {
     setLoginError(null);

src/hooks/use-auth/use-auth-logout/index.ts

@@ -4,12 +4,12 @@ import { useQueryClient } from '@tanstack/react-query';
 
 import { API } from '@/api';
 import { userKeys } from '@/lib/query-key/query-key-user';
-import { useAuth } from '@/providers';
+import { useAuthStore } from '@/stores';
 
 export const useLogout = () => {
   const queryClient = useQueryClient();
 
-  const { setIsAuthenticated } = useAuth();
+  const { setIsAuthenticated } = useAuthStore();
 
   const handleLogout = async () => {
     try {

src/hooks/use-notification/use-notification-get-unread-count/index.ts

@@ -2,10 +2,10 @@ import { useQuery } from '@tanstack/react-query';
 
 import { API } from '@/api';
 import { notificationKeys } from '@/lib/query-key/query-key-notification';
-import { useAuth } from '@/providers';
+import { useAuthStore } from '@/stores';
 
 export const useGetNotificationUnreadCount = () => {
-  const { isAuthenticated } = useAuth();
+  const { isAuthenticated } = useAuthStore();
   const queryResult = useQuery({
     queryKey: notificationKeys.unReadCount(),
     queryFn: () => API.notificationService.getUnreadCount(),
@@ -14,10 +14,10 @@ export const useGetNotificationUnreadCount = () => {
     retry: false,
   });
 
-  const finalData = isAuthenticated ? (queryResult.data ?? 0) : 0;
+  const unReadCount = isAuthenticated ? (queryResult.data ?? 0) : 0;
 
   return {
     ...queryResult,
-    data: finalData,
+    unReadCount,
   };
 };

src/providers/index.ts

@@ -1,4 +1,4 @@
-export { AuthProvider, useAuth } from './provider-auth';
+export { AuthProvider } from './provider-auth';
 export { LazyMotionProvider } from './provider-lazy-motion';
 export { MSWProvider } from './provider-msw';
 export { NotificationProvider, useNotification } from './provider-notification';

src/providers/provider-auth/index.tsx

@@ -1,29 +1,19 @@
-import React, { createContext, SetStateAction, useContext, useState } from 'react';
+'use client';
+import { useEffect } from 'react';
 
-interface AuthContextType {
-  isAuthenticated: boolean;
-  setIsAuthenticated: React.Dispatch<SetStateAction<boolean>>;
-}
-
-const AuthContext = createContext<AuthContextType | null>(null);
-
-export const useAuth = () => {
-  const context = useContext(AuthContext);
-  if (!context) throw new Error('useAuth must be used in AuthProvider');
-  return context;
-};
+import { useAuthStore } from '@/stores';
 
 interface Props {
   children: React.ReactNode;
   hasRefreshToken: boolean;
 }
 
 export const AuthProvider = ({ children, hasRefreshToken }: Props) => {
-  const [isAuthenticated, setIsAuthenticated] = useState(hasRefreshToken);
+  const { setIsAuthenticated } = useAuthStore();
+
+  useEffect(() => {
+    setIsAuthenticated(hasRefreshToken);
+  }, [hasRefreshToken, setIsAuthenticated]);
 
-  return (
-    <AuthContext.Provider value={{ isAuthenticated, setIsAuthenticated }}>
-      {children}
-    </AuthContext.Provider>
-  );
+  return <>{children}</>;
 };

src/stores/index.ts

@@ -0,0 +1,2 @@
+export { useAuthStore } from './useAuthStore';
+export { useNotificationStore } from './useNotificationStore';

src/stores/useAuthStore/index.ts

@@ -0,0 +1,11 @@
+import { create } from 'zustand';
+
+interface AuthState {
+  isAuthenticated: boolean;
+  setIsAuthenticated: (value: boolean) => void;
+}
+
+export const useAuthStore = create<AuthState>((set) => ({
+  isAuthenticated: false,
+  setIsAuthenticated: (value) => set({ isAuthenticated: value }),
+}));

src/stores/useNotificationStore/index.ts

@@ -0,0 +1,17 @@
+import { create } from 'zustand';
+
+import { NotificationItem } from '@/types/service/notification';
+
+interface NotificationState {
+  receivedData: NotificationItem | null;
+  setReceivedData: (value: NotificationItem | null) => void;
+  hasNewNotification: boolean;
+  setHasNewNotification: (value: boolean) => void;
+}
+
+export const useNotificationStore = create<NotificationState>((set) => ({
+  receivedData: null,
+  setReceivedData: (value) => set({ receivedData: value }),
+  hasNewNotification: false,
+  setHasNewNotification: (value) => set({ hasNewNotification: value }),
+}));