Cache onboarding + Logout 추가 (#45)

* fix: improve onboarding redirect logic and implement logout

- Add logout functionality in MyPage component using auth store
- Optimize onboarding page redirect by using useGoals hook with loading state
- Replace window.location.href with Next.js router.replace() for better performance
- Add loading spinner during goal data fetch in onboarding
- Remove SSR/CSR conflicts by moving redirect logic to useEffect

* fix: handle Zustand hydration delay in onboarding page

- Add hydration state check to prevent premature login state evaluation
- Wait 50ms for Zustand persist data to hydrate before checking login status
- Show loading spinner during hydration process
- Add debug console logs for hydration and auth states
- Fix redirect logic to only execute after store has been properly hydrated

* fix: resolve 401 error and smooth onboarding page transitions

- Fix premature API call issue where useGoals was called before login completion
- Add error handling and retry logic for 401 authentication errors
- Use SWR mutate function to retry goals API after successful login
- Improve loading state logic to prevent flickering during page transitions
- Set shouldRetryOnError to false to prevent automatic retries on auth errors
- Show loading spinner until proper authentication and data fetching is complete

* fix: improve loading spinner visibility and eliminate page flash

- Change spinner color from border-primary-500 to border-gray-800 for better visibility on white background
- Add additional loading state for when goals exist and redirect is about to happen
- Prevent brief flash of onboarding content during page transitions
- Show consistent loading spinner during all redirect scenarios

Author: devgony

app/onboarding/page.tsx

@@ -1,15 +1,68 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useEffect } from "react";
+import { useRouter } from "next/navigation";
 import LoginScreen from "./_components/LoginScreen";
 import GoalInputScreen from "./_components/GoalInputScreen";
 import PeriodSelectionScreen from "./_components/PeriodSelectionScreen";
 import CompletionScreen from "./_components/CompletionScreen";
 import useAuthStore from "@/stores/useAuthStore";
+import { useGoals } from "@/api/hooks";
 
 export default function OnboardingPage() {
+  const router = useRouter();
   const [currentStep, setCurrentStep] = useState(0);
-  const { setHasCompletedOnboarding } = useAuthStore();
+  const [hasHydrated, setHasHydrated] = useState(false);
+  const { setHasCompletedOnboarding, isLoggedIn, hasCompletedOnboarding } =
+    useAuthStore();
+
+  // 클라이언트 사이드에서만 hydration 체크
+  useEffect(() => {
+    // 짧은 지연 후 hydration 완료로 간주
+    const timer = setTimeout(() => {
+      setHasHydrated(true);
+    }, 50);
+
+    return () => clearTimeout(timer);
+  }, []);
+
+  console.log("hasHydrated:", hasHydrated);
+  console.log("isLoggedIn:", isLoggedIn);
+  console.log("hasCompletedOnboarding:", hasCompletedOnboarding);
+
+  // hasCompletedOnboarding이 true면 즉시 redirect (hydration 후에만)
+  useEffect(() => {
+    if (hasHydrated && hasCompletedOnboarding) {
+      router.replace("/");
+      return;
+    }
+  }, [hasHydrated, hasCompletedOnboarding, router]);
+
+  // goals 가져오기
+  const { data: { goals } = {}, isLoading, error, mutate } = useGoals({
+    revalidateOnFocus: false,
+    revalidateOnReconnect: false,
+    shouldRetryOnError: false, // 401 에러 시 재시도 방지
+  });
+
+  // 로그인 상태가 true로 변경될 때 goals API 재호출
+  useEffect(() => {
+    if (hasHydrated && isLoggedIn && error) {
+      console.log("Retrying goals API after login...");
+      mutate();
+    }
+  }, [hasHydrated, isLoggedIn, error, mutate]);
+
+  console.log("goals:", goals);
+  console.log("isLoading:", isLoading);
+  console.log("error:", error);
+
+  useEffect(() => {
+    if (hasHydrated && isLoggedIn && goals && goals.length > 0) {
+      setHasCompletedOnboarding(true);
+      router.replace("/");
+    }
+  }, [hasHydrated, isLoggedIn, goals, setHasCompletedOnboarding, router]);
 
   const nextStep = () => {
     setCurrentStep((prev) => prev + 1);
@@ -33,7 +86,7 @@ export default function OnboardingPage() {
             onComplete={() => {
               // Navigate to main app
               setHasCompletedOnboarding(true);
-              window.location.href = "/";
+              router.replace("/");
             }}
           />
         );
@@ -42,9 +95,22 @@ export default function OnboardingPage() {
     }
   };
 
-  const { hasCompletedOnboarding } = useAuthStore();
-  if (hasCompletedOnboarding) {
-    window.location.href = "/";
+  // hydration이 완료되지 않았거나 로그인된 상태에서 처리 중이면 스피너 표시
+  if (!hasHydrated || (hasHydrated && isLoggedIn && (isLoading || (!goals && !error)))) {
+    return (
+      <div className="min-h-screen bg-background-normal flex items-center justify-center">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-800"></div>
+      </div>
+    );
+  }
+
+  // 로그인된 상태에서 goals가 있으면 빈 화면 표시 (redirect 준비)
+  if (hasHydrated && isLoggedIn && goals && goals.length > 0) {
+    return (
+      <div className="min-h-screen bg-background-normal flex items-center justify-center">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-800"></div>
+      </div>
+    );
   }
 
   return (

components/mypage/MyPage.tsx

@@ -27,7 +27,7 @@ interface MyPageProps {
 
 export function MyPage({ className = "" }: MyPageProps) {
   const router = useSafeRouter();
-  const { isLoggedIn, login } = useAuthStore();
+  const { isLoggedIn, login, logout } = useAuthStore();
   const { data: user, isLoading, error } = useMyProfile();
 
   const handleLogin = () => {
@@ -56,6 +56,14 @@ export function MyPage({ className = "" }: MyPageProps) {
           hasIcon: false,
           onClick: () => {},
         },
+        {
+          label: "로그아웃",
+          hasIcon: false,
+          onClick: () => {
+            logout();
+            router.push("/");
+          },
+        },
       ]
     : [
         {