From 22fe05b4d8bce7f4617db5931aaed71a40e15549 Mon Sep 17 00:00:00 2001
From: gahusb <bgg8988@gmail.com>
Date: Tue, 28 Apr 2026 03:50:41 +0900
Subject: [PATCH] =?UTF-8?q?fix(nav):=20TopNav=20auth=20=EA=B5=AC=EB=8F=85?=
 =?UTF-8?q?=20=EC=95=88=EC=A0=95=ED=99=94=20+=20=EB=A1=9C=EA=B7=B8?=
 =?UTF-8?q?=EC=95=84=EC=9B=83=20UX=20=EB=B3=B4=EA=B0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

코드 리뷰 후속:
- (I-1) useMemo로 supabase client 안정화 → 매 렌더 re-subscribe 제거
- (I-2) getUser() → getSession() → first paint flash 거의 제거 (localStorage 동기 읽기)
- (M-1) 로그아웃 router.push → router.replace → 보호 페이지 백스택 잔존 방지
- (M-2) 모바일 로그아웃 button transition-colors 추가 (데스크톱과 일관)

Defer (별도 검토):
- M-3 로그인 시 Try now 사라짐 — marketing 결정 필요
- M-5 잔여 flash — Phase 2 server prop hydration 시 완전 제거

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 app/components/TopNav.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/app/components/TopNav.tsx b/app/components/TopNav.tsx
index 1a2331b..b4c5529 100644
--- a/app/components/TopNav.tsx
+++ b/app/components/TopNav.tsx
@@ -2,7 +2,7 @@
 
 import Link from 'next/link';
 import { usePathname, useRouter } from 'next/navigation';
-import { useState, useEffect } from 'react';
+import { useMemo, useState, useEffect } from 'react';
 import { createClient } from '@/lib/supabase/client';
 import type { User } from '@supabase/supabase-js';
 
@@ -17,7 +17,7 @@ const LINKS = [
 export default function TopNav() {
   const pathname = usePathname();
   const router = useRouter();
-  const supabase = createClient();
+  const supabase = useMemo(() => createClient(), []);
   const [open, setOpen] = useState(false);
   const [scrolled, setScrolled] = useState(false);
   const [user, setUser] = useState<User | null>(null);
@@ -32,8 +32,8 @@ export default function TopNav() {
   // Supabase auth state subscription (Sidebar.tsx:93-103 패턴)
   useEffect(() => {
     let mounted = true;
-    supabase.auth.getUser().then(({ data }) => {
-      if (mounted) setUser(data.user ?? null);
+    supabase.auth.getSession().then(({ data }) => {
+      if (mounted) setUser(data.session?.user ?? null);
     });
     const { data: { subscription } } = supabase.auth.onAuthStateChange((_event, session) => {
       if (mounted) setUser(session?.user ?? null);
@@ -47,7 +47,7 @@ export default function TopNav() {
   const handleLogout = async () => {
     await supabase.auth.signOut();
     setOpen(false);
-    router.push('/');
+    router.replace('/');
     router.refresh();
   };
 
@@ -214,7 +214,7 @@ export default function TopNav() {
                   </Link>
                   <button
                     onClick={handleLogout}
-                    className="flex-1 py-3 text-center rounded-full text-sm font-bold"
+                    className="flex-1 py-3 text-center rounded-full text-sm font-bold transition-colors"
                     style={{ border: '1px solid rgba(255,255,255,0.15)', color: 'var(--kx-on-surface)', background: 'transparent' }}
                   >
                     로그아웃