From 960728c99c5cd994d63543220b594e27b67da46d Mon Sep 17 00:00:00 2001
From: gahusb <bgg8988@gmail.com>
Date: Sat, 16 May 2026 04:14:20 +0900
Subject: [PATCH] =?UTF-8?q?feat(nav):=20TopNav=20=EB=A1=9C=EA=B7=B8?=
 =?UTF-8?q?=EC=9D=B8=20=EC=8B=9C=EC=97=90=EB=8F=84=20"Try=20now"=20?=
 =?UTF-8?q?=EB=85=B8=EC=B6=9C=20(=EB=A7=88=EC=BC=80=ED=8C=85=20=EC=BB=A8?=
 =?UTF-8?q?=EB=B2=84=EC=A0=84=20=EC=9C=A0=EC=A7=80)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

D 트랙 4/4. P1 Task 2 review M-3 후속:
- 로그인 사용자: [마이페이지] [Try now] [로그아웃] 3개 모두 노출
  → 신규 팩 구매 동기 유지 (이전: Try now가 사라져 컨버전 손실)
- 로그아웃 button을 텍스트 스타일로 가볍게 (Try now가 시각 강조)
- 모바일: flex-col로 2줄 배치 (1줄: 마이페이지+Try now, 2줄: 로그아웃 텍스트)

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

diff --git a/app/components/TopNav.tsx b/app/components/TopNav.tsx
index 809a9b0..57d3b04 100644
--- a/app/components/TopNav.tsx
+++ b/app/components/TopNav.tsx
@@ -121,14 +121,17 @@ export default function TopNav() {
               >
                 마이페이지
               </Link>
+              <Link
+                href="/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={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',
-                }}
+                className="hidden sm:inline-flex items-center px-3 py-2 text-sm font-medium transition-colors"
+                style={{ color: 'var(--kx-on-variant)', background: 'transparent' }}
               >
                 로그아웃
               </button>
@@ -198,26 +201,35 @@ export default function TopNav() {
                 {l.label}
               </Link>
             ))}
-            <div className="mt-6 flex gap-3">
+            <div className="mt-6 flex flex-col gap-2">
               {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>
+                  <div className="flex gap-3">
+                    <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>
+                    <Link
+                      href="/music"
+                      className="kx-btn-primary flex-1 py-3 text-center rounded-full text-sm"
+                      style={{ textDecoration: 'none' }}
+                    >
+                      Try now
+                    </Link>
+                  </div>
                   <button
                     onClick={handleLogout}
-                    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' }}
+                    className="w-full py-3 text-center text-sm font-medium transition-colors"
+                    style={{ color: 'var(--kx-on-variant)', background: 'transparent' }}
                   >
                     로그아웃
                   </button>
                 </>
               ) : (
-                <>
+                <div className="flex gap-3">
                   <Link
                     href="/login"
                     className="flex-1 py-3 text-center rounded-full text-sm font-bold"
@@ -232,7 +244,7 @@ export default function TopNav() {
                   >
                     Try now
                   </Link>
-                </>
+                </div>
               )}
             </div>
           </div>