fix: hydration mismatch 및 불필요한 API 호출 제거

AuthProvider의 매 새로고침 시 사용자 조회 호출을 제거하고,
useAuthHydrated 훅으로 SSR hydration 불일치 문제를 해결.

Author: alexization

src/app/settings/page.tsx

@@ -4,7 +4,7 @@ import { useEffect, useState } from "react"
 import { useRouter } from "next/navigation"
 import { motion } from "framer-motion"
 import { ArrowLeft, User, Trash2, ChevronRight, Shield } from "lucide-react"
-import { useAuthStore } from "@/features/auth/store/auth-store"
+import { useAuthStore, useAuthHydrated } from "@/features/auth/store/auth-store"
 import { DeleteAccountModal } from "@/features/user/components/delete-account-modal"
 import { Avatar, AvatarImage, AvatarFallback } from "@/shared/components/avatar"
 import { Button } from "@/shared/components/button"
@@ -14,21 +14,17 @@ import { Skeleton } from "@/shared/components/skeleton"
 export default function SettingsPage() {
     const router = useRouter()
     const { user, isAuthenticated } = useAuthStore()
-    const [mounted, setMounted] = useState(false)
+    const hydrated = useAuthHydrated()
     const [deleteModalOpen, setDeleteModalOpen] = useState(false)
 
     useEffect(() => {
-        setMounted(true)
-    }, [])
-
-    useEffect(() => {
-        if (mounted && !isAuthenticated) {
+        if (hydrated && !isAuthenticated) {
             router.push('/login')
         }
-    }, [mounted, isAuthenticated, router])
+    }, [hydrated, isAuthenticated, router])
 
     // Loading state
-    if (!mounted) {
+    if (!hydrated) {
         return (
             <div className="min-h-screen bg-background">
                 <div className="container max-w-2xl py-8 px-4">

src/features/auth/store/auth-store.ts

@@ -1,3 +1,4 @@
+import { useState, useEffect } from 'react';
 import { create } from 'zustand';
 import { persist } from 'zustand/middleware';
 import { User } from '@/shared/types/api';
@@ -22,3 +23,18 @@ export const useAuthStore = create<AuthState>()(
     }
   )
 );
+
+export const useAuthHydrated = () => {
+  const [hydrated, setHydrated] = useState(false);
+
+  useEffect(() => {
+    if (useAuthStore.persist?.hasHydrated?.()) {
+      setHydrated(true);
+      return;
+    }
+    const unsub = useAuthStore.persist?.onFinishHydration?.(() => setHydrated(true));
+    return () => unsub?.();
+  }, []);
+
+  return hydrated;
+};

src/shared/components/layout/header.tsx

@@ -4,7 +4,7 @@ import Link from "next/link"
 import { usePathname, useRouter } from "next/navigation"
 import { LogOut, User, Flame, Loader2, DoorOpen, Settings } from "lucide-react"
 import { motion } from "framer-motion"
-import { useAuthStore } from "@/features/auth/store/auth-store"
+import { useAuthStore, useAuthHydrated } from "@/features/auth/store/auth-store"
 import { useLogout } from "@/features/auth/api/auth-service"
 import { Button } from "@/shared/components/button"
 import { ThemeToggle } from "@/shared/components/theme-toggle"
@@ -26,21 +26,17 @@ import {
     AlertDialogTitle,
 } from "@/shared/components/alert-dialog"
 import { Avatar, AvatarFallback, AvatarImage } from "@/shared/components/avatar"
-import { useEffect, useState } from "react"
+import { useState } from "react"
 import { cn } from "@/shared/lib/utils"
 
 export function Header() {
     const { user, isAuthenticated } = useAuthStore()
+    const hydrated = useAuthHydrated()
     const logoutMutation = useLogout()
     const router = useRouter()
-    const [mounted, setMounted] = useState(false)
     const [showLogoutDialog, setShowLogoutDialog] = useState(false)
     const pathname = usePathname()
 
-    useEffect(() => {
-        setMounted(true)
-    }, [])
-
     const handleLogin = () => {
         window.location.href = '/login'
     }
@@ -94,7 +90,9 @@ export function Header() {
 
                     <ThemeToggle />
 
-                    {mounted && isAuthenticated && user ? (
+                    {!hydrated ? (
+                        <div className="w-8 h-8" />
+                    ) : isAuthenticated && user ? (
                         <DropdownMenu>
                             <DropdownMenuTrigger asChild>
                                 <button className="flex items-center gap-2.5 rounded-full py-1.5 pl-1.5 pr-3 transition-all duration-200 hover:bg-secondary/80 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2">

src/shared/providers/auth-provider.tsx

@@ -1,37 +1,5 @@
 "use client"
 
-import { useEffect, useRef } from "react"
-import { useAuthStore } from "@/features/auth/store/auth-store"
-import { apiClient } from "@/shared/lib/api-client"
-import { getUser } from "@/features/user/api/user-service"
-
 export function AuthProvider({ children }: { children: React.ReactNode }) {
-  const { isAuthenticated, user, login, logout } = useAuthStore()
-  const hasVerifiedRef = useRef(false)
-
-  useEffect(() => {
-    if (hasVerifiedRef.current || !isAuthenticated || !user) {
-      return
-    }
-    hasVerifiedRef.current = true
-
-    const verifyAuth = async () => {
-      try {
-        // /auth/me로 쿠키 유효성 확인 후 전체 사용자 정보 조회
-        const me = await apiClient.get<void, { username: string }>('/auth/me')
-        const freshUser = await getUser(me.username)
-        login(freshUser)
-      } catch {
-        if (process.env.NODE_ENV === "development") {
-          console.log("[AuthProvider] Auth verification failed, logging out")
-        }
-        logout()
-      }
-    }
-
-    verifyAuth()
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isAuthenticated])
-
   return <>{children}</>
 }