gahusb/jaengseung-made
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(nav): TopNav 로그인 시에도 "Try now" 노출 (마케팅 컨버전 유지)

Browse Source 
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>
This commit is contained in:
gahusb
2026-05-16 04:14:20 +09:00
parent 25b682b7cb
commit 960728c99c
1 changed files with 30 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
app/components/TopNav.tsx
View File

@@ -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>