From 601bc38a121c59ccd08e9079c6935a691a73a39a Mon Sep 17 00:00:00 2001
From: gahusb <bgg8988@gmail.com>
Date: Tue, 28 Apr 2026 03:46:16 +0900
Subject: [PATCH] =?UTF-8?q?feat(nav):=20TopNav=20supabase=20auth=20?=
 =?UTF-8?q?=EA=B5=AC=EB=8F=85=20+=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20?=
 =?UTF-8?q?=EC=83=81=ED=83=9C=20=ED=86=A0=EA=B8=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 로그아웃 시: "로그인" link + "Try now" 버튼 (기존)
- 로그인 시: "마이페이지" link + "로그아웃" 버튼 (신규)
- 데스크톱 + 모바일 오버레이 둘 다 동일 패턴
- Sidebar.tsx:93-103 의 auth 구독 패턴 차용

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

diff --git a/app/components/TopNav.tsx b/app/components/TopNav.tsx
index ce85e49..1a2331b 100644
--- a/app/components/TopNav.tsx
+++ b/app/components/TopNav.tsx
@@ -1,8 +1,10 @@
 'use client';
 
 import Link from 'next/link';
-import { usePathname } from 'next/navigation';
+import { usePathname, useRouter } from 'next/navigation';
 import { useState, useEffect } from 'react';
+import { createClient } from '@/lib/supabase/client';
+import type { User } from '@supabase/supabase-js';
 
 const LINKS = [
   { href: '/', label: '홈' },
@@ -14,8 +16,11 @@ const LINKS = [
 
 export default function TopNav() {
   const pathname = usePathname();
+  const router = useRouter();
+  const supabase = createClient();
   const [open, setOpen] = useState(false);
   const [scrolled, setScrolled] = useState(false);
+  const [user, setUser] = useState<User | null>(null);
 
   useEffect(() => {
     const onScroll = () => setScrolled(window.scrollY > 8);
@@ -24,6 +29,28 @@ export default function TopNav() {
     return () => window.removeEventListener('scroll', onScroll);
   }, []);
 
+  // Supabase auth state subscription (Sidebar.tsx:93-103 패턴)
+  useEffect(() => {
+    let mounted = true;
+    supabase.auth.getUser().then(({ data }) => {
+      if (mounted) setUser(data.user ?? null);
+    });
+    const { data: { subscription } } = supabase.auth.onAuthStateChange((_event, session) => {
+      if (mounted) setUser(session?.user ?? null);
+    });
+    return () => {
+      mounted = false;
+      subscription.unsubscribe();
+    };
+  }, [supabase]);
+
+  const handleLogout = async () => {
+    await supabase.auth.signOut();
+    setOpen(false);
+    router.push('/');
+    router.refresh();
+  };
+
   useEffect(() => { setOpen(false); }, [pathname]);
 
   useEffect(() => {
@@ -89,20 +116,45 @@ export default function TopNav() {
         </div>
 
         <div className="flex items-center gap-3">
-          <Link
-            href="/login"
-            className="hidden sm:inline-block text-sm font-medium px-4 py-2 transition-colors"
-            style={{ color: 'var(--kx-on-variant)', textDecoration: 'none' }}
-          >
-            로그인
-          </Link>
-          <Link
-            href="/services/music"
-            className="kx-btn-primary hidden sm:inline-flex items-center px-5 py-2 rounded-full text-sm"
-            style={{ textDecoration: 'none' }}
-          >
-            Try now
-          </Link>
+          {user ? (
+            <>
+              <Link
+                href="/mypage"
+                className="hidden sm:inline-block text-sm font-medium px-4 py-2 transition-colors"
+                style={{ color: 'var(--kx-on-variant)', textDecoration: 'none' }}
+              >
+                마이페이지
+              </Link>
+              <button
+                onClick={handleLogout}
+                className="hidden sm:inline-flex items-center px-5 py-2 rounded-full text-sm font-medium transition-colors"
+                style={{
+                  color: 'var(--kx-on-surface)',
+                  border: '1px solid rgba(255,255,255,0.15)',
+                  background: 'transparent',
+                }}
+              >
+                로그아웃
+              </button>
+            </>
+          ) : (
+            <>
+              <Link
+                href="/login"
+                className="hidden sm:inline-block text-sm font-medium px-4 py-2 transition-colors"
+                style={{ color: 'var(--kx-on-variant)', textDecoration: 'none' }}
+              >
+                로그인
+              </Link>
+              <Link
+                href="/services/music"
+                className="kx-btn-primary hidden sm:inline-flex items-center px-5 py-2 rounded-full text-sm"
+                style={{ textDecoration: 'none' }}
+              >
+                Try now
+              </Link>
+            </>
+          )}
           <button
             onClick={() => setOpen(true)}
             aria-label="메뉴 열기"
@@ -151,20 +203,41 @@ export default function TopNav() {
               </Link>
             ))}
             <div className="mt-6 flex gap-3">
-              <Link
-                href="/login"
-                className="flex-1 py-3 text-center rounded-full text-sm font-bold"
-                style={{ border: '1px solid rgba(255,255,255,0.15)', color: 'var(--kx-on-surface)', textDecoration: 'none' }}
-              >
-                로그인
-              </Link>
-              <Link
-                href="/services/music"
-                className="kx-btn-primary flex-1 py-3 text-center rounded-full text-sm"
-                style={{ textDecoration: 'none' }}
-              >
-                Try now
-              </Link>
+              {user ? (
+                <>
+                  <Link
+                    href="/mypage"
+                    className="flex-1 py-3 text-center rounded-full text-sm font-bold"
+                    style={{ border: '1px solid rgba(255,255,255,0.15)', color: 'var(--kx-on-surface)', textDecoration: 'none' }}
+                  >
+                    마이페이지
+                  </Link>
+                  <button
+                    onClick={handleLogout}
+                    className="flex-1 py-3 text-center rounded-full text-sm font-bold"
+                    style={{ border: '1px solid rgba(255,255,255,0.15)', color: 'var(--kx-on-surface)', background: 'transparent' }}
+                  >
+                    로그아웃
+                  </button>
+                </>
+              ) : (
+                <>
+                  <Link
+                    href="/login"
+                    className="flex-1 py-3 text-center rounded-full text-sm font-bold"
+                    style={{ border: '1px solid rgba(255,255,255,0.15)', color: 'var(--kx-on-surface)', textDecoration: 'none' }}
+                  >
+                    로그인
+                  </Link>
+                  <Link
+                    href="/services/music"
+                    className="kx-btn-primary flex-1 py-3 text-center rounded-full text-sm"
+                    style={{ textDecoration: 'none' }}
+                  >
+                    Try now
+                  </Link>
+                </>
+              )}
             </div>
           </div>
         </div>