From fd7297a3836083d0946a125e8ba1b39404fe0f6e Mon Sep 17 00:00:00 2001
From: gahusb <bgg8988@gmail.com>
Date: Sat, 16 May 2026 04:05:46 +0900
Subject: [PATCH] =?UTF-8?q?docs(plan):=20D=20=ED=8A=B8=EB=9E=99=20follow-u?=
 =?UTF-8?q?p=20=E2=80=94=204=20task=20cleanup?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

P0/P1/P2 review에서 defer된 4 cleanup 일괄:
- D1: lib/contact.ts — KAKAO_OPENCHAT_URL SSOT
- D2: KakaoFloatButton.tsx 컴포넌트 추출
- D3: mypage 잔여 정돈 (kakao URL 상수 + EmptyState linkHref 새 URL + 탭 가로 스크롤)
- D4: TopNav "Try now" 로그인 시 노출 (컨버전 유지)

당초 5 follow-up 중 "mypage 다운로드 버튼 조건부 렌더"는 Phase 2 implementation
에서 이미 조건부 처리됨 → D3 정돈에 흡수.

총 ~100 LOC 미만. brainstorm 생략 (review에서 이미 명세).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../plans/2026-05-16-d-track-followup.md      | 689 ++++++++++++++++++
 1 file changed, 689 insertions(+)
 create mode 100644 docs/superpowers/plans/2026-05-16-d-track-followup.md

diff --git a/docs/superpowers/plans/2026-05-16-d-track-followup.md b/docs/superpowers/plans/2026-05-16-d-track-followup.md
new file mode 100644
index 0000000..d07a34c
--- /dev/null
+++ b/docs/superpowers/plans/2026-05-16-d-track-followup.md
@@ -0,0 +1,689 @@
+# D 트랙 — P0/P1/P2 Review Follow-up Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** P0/P1/P2 review feedback에서 defer된 5 follow-up cleanup 일괄 처리 — KAKAO URL SSOT, KakaoFloatButton 추출, mypage 잔여 정돈, 모바일 7-tab 가로 스크롤, "Try now" 로그인 시 노출.
+
+**Architecture:** 각 task 독립적 cleanup. 기존 review에서 명세된 fix들이라 design 결정 없음. 5 task × ~5-30 LOC = 총 약 100 LOC 미만. brainstorm 생략.
+
+**Tech Stack:** Next.js 16 App Router + TS + Tailwind v4
+
+**Source Reviews:**
+- P1 Task 2 review (TopNav auth): M-3 "Try now" disappears on login
+- P1 Task 3 review (PublicShell kakao button): I-1 component extraction, I-2 URL SSOT
+- P2 Task 4 review (mypage packs): M-2 disabled button conditional (already addressed in implementation), M-5 mobile tab wrap
+
+---
+
+## File Structure
+
+| 파일 | 종류 | 책임 |
+|---|---|---|
+| `lib/contact.ts` | Create | `KAKAO_OPENCHAT_URL` 상수 single source of truth |
+| `app/components/KakaoFloatButton.tsx` | Create | 카카오 1:1 상담 플로팅 버튼 컴포넌트 (PublicShell 인라인 JSX + style 추출) |
+| `app/components/PublicShell.tsx` | Modify | 인라인 카카오 버튼 → `<KakaoFloatButton />` 컴포넌트 사용 |
+| `app/mypage/page.tsx` | Modify | (a) kakao URL → 상수 import (b) EmptyState linkHref `/services/music` → `/music/packs` (c) 탭 바 `flex-wrap` → `overflow-x-auto flex-nowrap` |
+| `app/components/TopNav.tsx` | Modify | 로그인 상태에서도 "Try now" 노출 (마이페이지/로그아웃 옆) |
+
+---
+
+## Task 순서
+
+각 task는 독립적이라 어느 순서든 가능. 다음 순서로 진행:
+
+1. **D1**: `lib/contact.ts` 신규 + KAKAO_OPENCHAT_URL — 다른 task의 import source
+2. **D2**: `KakaoFloatButton.tsx` 신규 + PublicShell 인라인 추출 (D1의 상수 활용)
+3. **D3**: mypage 잔여 정돈 (kakao URL 상수 import + linkHref + 탭 가로 스크롤)
+4. **D4**: TopNav "Try now" 로그인 시 노출
+
+총 4 task. (당초 5개 중 "mypage 다운로드 버튼 조건부 렌더"는 Phase 2 implementation에서 이미 처리됨 — D3에 정돈 한 줄로 흡수.)
+
+---
+
+## Task D1: lib/contact.ts — KAKAO_OPENCHAT_URL SSOT
+
+**Files:**
+- Create: `C:\Users\jaeoh\Desktop\workspace\jaengseung-made\lib\contact.ts`
+
+- [ ] **Step 1: 파일 작성**
+
+```ts
+/**
+ * 외부 연락 채널 상수 SSOT.
+ * - KAKAO_OPENCHAT_URL: 1:1 카카오 오픈채팅. PublicShell 플로팅 버튼 + mypage 안내 등에서 공유.
+ *   URL 변경 시 이 파일만 수정.
+ */
+export const KAKAO_OPENCHAT_URL = 'https://open.kakao.com/o/s9stoNvb';
+```
+
+- [ ] **Step 2: 린트**
+
+```bash
+npx eslint lib/contact.ts
+```
+Expected: exit 0.
+
+- [ ] **Step 3: 커밋**
+
+```bash
+git add lib/contact.ts
+git commit -m "$(cat <<'EOF'
+feat(lib): contact.ts — KAKAO_OPENCHAT_URL SSOT 상수
+
+D 트랙 1/4. 현재 카카오 오픈채팅 URL이 3곳에 하드코딩(PublicShell, mypage,
+historical DashboardShell) — single source of truth로 정돈. 향후 URL 변경 시
+이 파일만 수정.
+
+Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
+EOF
+)"
+```
+
+- [ ] **Step 4: ⚠️ git log -3 직접 확인**
+
+```bash
+git log --oneline -3
+```
+
+기대: HEAD = 본인 commit, 직전 = `972bfd8` (P1 D1 완료) 또는 그 이후 push 후 영향 없음 (push는 origin/main 동기화만).
+
+---
+
+## Task D2: KakaoFloatButton 컴포넌트 추출
+
+**Files:**
+- Create: `C:\Users\jaeoh\Desktop\workspace\jaengseung-made\app\components\KakaoFloatButton.tsx`
+- Modify: `C:\Users\jaeoh\Desktop\workspace\jaengseung-made\app\components\PublicShell.tsx`
+
+- [ ] **Step 1: KakaoFloatButton.tsx 신규 작성**
+
+기존 PublicShell.tsx 의 인라인 카카오 버튼 JSX + `<style>` 블록을 추출.
+
+`app/components/KakaoFloatButton.tsx`:
+
+```tsx
+import { KAKAO_OPENCHAT_URL } from '@/lib/contact';
+
+/**
+ * 카카오 1:1 상담 플로팅 버튼.
+ * PublicShell footer 다음에 마운트되어 모든 공개 페이지에 노출.
+ */
+export default function KakaoFloatButton() {
+  return (
+    <>
+      <a
+        href={KAKAO_OPENCHAT_URL}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="kakao-float-btn"
+        aria-label="카카오 오픈채팅 상담"
+        title="카카오 오픈채팅으로 1:1 상담"
+      >
+        <svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
+          <path d="M12 3C6.477 3 2 6.589 2 11c0 2.713 1.574 5.117 4 6.663V21l3.5-2.1A11.5 11.5 0 0 0 12 19c5.523 0 10-3.589 10-8s-4.477-8-10-8z"/>
+        </svg>
+        <span className="kakao-float-label">1:1 상담</span>
+      </a>
+
+      <style>{`
+        .kakao-float-btn {
+          position: fixed;
+          bottom: 28px;
+          right: 28px;
+          z-index: 50;
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          background: #FEE500;
+          color: #3A1D1D;
+          padding: 12px 18px;
+          border-radius: 100px;
+          font-weight: 700;
+          font-size: 14px;
+          text-decoration: none;
+          box-shadow: 0 4px 20px rgba(254,229,0,0.4), 0 2px 8px rgba(0,0,0,0.15);
+          transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+          white-space: nowrap;
+        }
+        .kakao-float-btn:hover {
+          transform: translateY(-3px) scale(1.04);
+          box-shadow: 0 8px 28px rgba(254,229,0,0.5), 0 4px 12px rgba(0,0,0,0.15);
+        }
+        .kakao-float-btn:active {
+          transform: translateY(-1px) scale(0.98);
+        }
+        @media (max-width: 640px) {
+          .kakao-float-btn {
+            bottom: 20px;
+            right: 16px;
+            padding: 10px 14px;
+            font-size: 13px;
+          }
+        }
+      `}</style>
+    </>
+  );
+}
+```
+
+추가 사항:
+- SVG에 `aria-hidden` 추가 (parent anchor의 aria-label이 announce 대체)
+- KAKAO_OPENCHAT_URL import (D1에서 신규)
+
+- [ ] **Step 2: PublicShell.tsx 수정**
+
+현재 (119-169행 부근):
+```tsx
+{/* 카카오 오픈채팅 플로팅 버튼 */}
+<a href="https://open.kakao.com/o/s9stoNvb" ...>
+  ...
+</a>
+<style>{`...`}</style>
+```
+
+위 두 element(`<a>` + `<style>`) **전체를** 다음 한 줄로 교체:
+
+```tsx
+<KakaoFloatButton />
+```
+
+또한 PublicShell.tsx 상단 import 영역에 추가:
+
+```tsx
+import KakaoFloatButton from './KakaoFloatButton';
+```
+
+- [ ] **Step 3: 린트 + 빌드**
+
+```bash
+npx eslint app/components/KakaoFloatButton.tsx app/components/PublicShell.tsx
+npm run build 2>&1 | tail -10
+```
+
+빌드 통과 필수.
+
+- [ ] **Step 4: 커밋**
+
+```bash
+git add app/components/KakaoFloatButton.tsx app/components/PublicShell.tsx
+git commit -m "$(cat <<'EOF'
+refactor(shell): KakaoFloatButton 컴포넌트 추출 — PublicShell 인라인 → 별도 컴포넌트
+
+D 트랙 2/4. P1 Task 3 review I-1 후속:
+- PublicShell의 인라인 카카오 버튼 JSX + style 블록 → KakaoFloatButton.tsx
+- KAKAO_OPENCHAT_URL은 lib/contact 에서 import
+- SVG에 aria-hidden 추가 (parent aria-label 우선)
+
+향후 admin shell 또는 다른 surface에서 재사용 가능.
+
+Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
+EOF
+)"
+```
+
+- [ ] **Step 5: ⚠️ git log -3 직접 확인**
+
+```bash
+git log --oneline -3
+```
+
+---
+
+## Task D3: mypage 잔여 정돈 (kakao URL + linkHref + 탭 overflow)
+
+**Files:**
+- Modify: `C:\Users\jaeoh\Desktop\workspace\jaengseung-made\app\mypage\page.tsx`
+
+3가지 cleanup을 단일 commit에 묶음:
+(a) hardcoded kakao URL → import 상수
+(b) EmptyState `linkHref="/services/music"` → `/music/packs` (P1 새 URL)
+(c) 탭 바 `flex-wrap` → `overflow-x-auto flex-nowrap` (모바일 7-tab 가로 스크롤)
+
+- [ ] **Step 1: import 추가**
+
+`app/mypage/page.tsx` 상단 import 영역에 추가:
+
+```tsx
+import { KAKAO_OPENCHAT_URL } from '@/lib/contact';
+```
+
+기존 import 그룹과 일관되게 배치 (예: 다른 `@/lib/*` import 옆).
+
+- [ ] **Step 2: hardcoded kakao URL 교체**
+
+mypage page.tsx 안의 다음 패턴을 찾아 교체:
+
+검색: `href="https://open.kakao.com/o/s9stoNvb"`
+교체: `href={KAKAO_OPENCHAT_URL}`
+
+grep 으로 확인:
+```bash
+grep -n "open.kakao.com" app/mypage/page.tsx
+```
+
+이전 코드(line 880 부근):
+```tsx
+<a
+  href="https://open.kakao.com/o/s9stoNvb"
+  target="_blank"
+  rel="noopener noreferrer"
+  className="text-violet-600 hover:underline font-semibold"
+>
+  카톡 오픈채팅 →
+</a>
+```
+
+변경 후:
+```tsx
+<a
+  href={KAKAO_OPENCHAT_URL}
+  target="_blank"
+  rel="noopener noreferrer"
+  className="text-violet-600 hover:underline font-semibold"
+>
+  카톡 오픈채팅 →
+</a>
+```
+
+- [ ] **Step 3: EmptyState linkHref 정돈**
+
+mypage packs 탭의 EmptyState (현재 line 800-807 부근):
+
+이전:
+```tsx
+<EmptyState
+  icon="🎵"
+  title="구매한 팩이 없습니다"
+  desc="AI 음악 팩을 구매하시면 자료가 여기에 표시됩니다"
+  linkHref="/services/music"
+  linkLabel="Music 팩 보기"
+/>
+```
+
+변경 후 (`linkHref` 만):
+```tsx
+linkHref="/music/packs"
+```
+
+(redirect 처리되긴 하지만 직접 새 URL 사용 — 1 hop 절약)
+
+추가로, mypage 안에 다른 `/services/*`, `/freelance`, `/saju`, `/studio` 잔존 URL 있는지 grep:
+
+```bash
+grep -nE "/services/(music|blog|website)|href=\"/(freelance|saju|studio)" app/mypage/page.tsx
+```
+
+각각 새 URL로 교체:
+- `/services/music` → `/music/packs`
+- `/services/blog` → `/work/blog`
+- `/services/website` → `/work/website`
+- `/freelance` → `/work/freelance`
+- `/saju` → `/work/saju`
+- `/studio` → `/music/studio`
+
+- [ ] **Step 4: 탭 바 `flex-wrap` → 가로 스크롤**
+
+현재 line 361 부근:
+
+```tsx
+<div className="flex flex-wrap gap-1 bg-white border border-slate-200 rounded-xl p-1 mb-6">
+```
+
+변경 후:
+
+```tsx
+<div className="flex flex-nowrap gap-1 bg-white border border-slate-200 rounded-xl p-1 mb-6 overflow-x-auto scrollbar-hide">
+```
+
+키 차이:
+- `flex-wrap` → `flex-nowrap` (한 줄 강제)
+- `overflow-x-auto` 추가 (모바일 좁을 때 가로 스크롤)
+- `scrollbar-hide` 추가 (스크롤바 시각 숨김 — Tailwind plugin 없으면 CSS 별도)
+
+⚠️ `scrollbar-hide`가 Tailwind 기본 또는 프로젝트 설정에 없을 수 있음. 확인:
+
+```bash
+grep -rn "scrollbar-hide" app/ --include="*.tsx" --include="*.css" 2>/dev/null | head -3
+```
+
+매칭 없으면 `scrollbar-hide` 클래스를 빼고 그냥 `overflow-x-auto`만 사용. 또는 globals.css에 다음 추가:
+
+```css
+/* app/globals.css 끝에 추가 */
+.scrollbar-hide {
+  scrollbar-width: none;
+}
+.scrollbar-hide::-webkit-scrollbar {
+  display: none;
+}
+```
+
+⚠️ globals.css 변경 권장 — 스크롤바 시각 제거 (가로 스크롤 UX 미려화).
+
+또한 탭 button에 `min-w-[100px]` 이미 있는지 확인. 있으면 가로 스크롤과 자연스럽게 작동. 없으면 추가 검토 — 단, 현재 spec(P1 코드)에 이미 `min-w-[100px]` 있어 OK일 가능성 큼.
+
+```bash
+grep -nE "min-w-\[100px\]|min-w-\[" app/mypage/page.tsx | head -5
+```
+
+- [ ] **Step 5: globals.css에 scrollbar-hide 추가 (이전 step에서 없으면)**
+
+`app/globals.css` 파일 끝에 추가 (이미 있으면 skip):
+
+```css
+/* 가로 스크롤 탭바 등에서 스크롤바 시각 숨김 */
+.scrollbar-hide {
+  scrollbar-width: none;
+}
+.scrollbar-hide::-webkit-scrollbar {
+  display: none;
+}
+```
+
+- [ ] **Step 6: 린트 + 빌드**
+
+```bash
+npx eslint app/mypage/page.tsx
+npm run build 2>&1 | tail -10
+```
+
+- [ ] **Step 7: 커밋**
+
+```bash
+git add app/mypage/page.tsx app/globals.css
+git commit -m "$(cat <<'EOF'
+refactor(mypage): kakao URL 상수 + EmptyState linkHref + 탭 가로 스크롤
+
+D 트랙 3/4. 잔여 정돈:
+- kakao 오픈채팅 URL hardcoded → KAKAO_OPENCHAT_URL import (lib/contact)
+- EmptyState linkHref "/services/music" → "/music/packs" (P1 새 URL)
+- 탭 바: flex-wrap → flex-nowrap + overflow-x-auto + scrollbar-hide
+  → 모바일 7-tab을 한 줄 가로 스크롤 (wrap 시 2줄 불규칙 배치 해소)
+- globals.css에 scrollbar-hide 유틸리티 추가
+
+P2 Task 4 review M-5 (mobile 7-tab orphan) 해소.
+
+Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
+EOF
+)"
+```
+
+- [ ] **Step 8: ⚠️ git log -3 직접 확인**
+
+```bash
+git log --oneline -3
+```
+
+---
+
+## Task D4: TopNav "Try now" 로그인 시에도 노출
+
+**Files:**
+- Modify: `C:\Users\jaeoh\Desktop\workspace\jaengseung-made\app\components\TopNav.tsx`
+
+P1 Task 2 review M-3 후속: 로그인 사용자도 "팩 더 사기" 컨버전 경로 유지 — "Try now" 그대로 노출 + "로그아웃" 텍스트 버튼.
+
+현재 (로그인 시 데스크톱 우측 영역):
+```
+[마이페이지] [로그아웃]
+```
+
+변경 후 (3개 노출 — Try now 추가):
+```
+[마이페이지] [Try now] [로그아웃]
+```
+
+기획 의도: 로그인 사용자도 새 팩 구매 동기 유지. "Try now"는 컨버전 액션이라 헤더에서 떼어내면 안 됨.
+
+- [ ] **Step 1: 데스크톱 우측 영역 변경**
+
+`app/components/TopNav.tsx` 의 로그인 분기 (현재 우측 영역, line ~119-147 부근):
+
+이전:
+```tsx
+{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>
+  </>
+) : (
+  ...
+)}
+```
+
+변경 후 (마이페이지 + Try now + 로그아웃 3개):
+```tsx
+{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>
+    <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-3 py-2 text-sm font-medium transition-colors"
+      style={{ color: 'var(--kx-on-variant)', background: 'transparent' }}
+    >
+      로그아웃
+    </button>
+  </>
+) : (
+  ...
+)}
+```
+
+변경 핵심:
+- 마이페이지 (텍스트 link 그대로)
+- "Try now" (`kx-btn-primary` 보라 버튼 추가, href `/music`)
+- 로그아웃 (border 제거, 텍스트만 — Try now가 시각적 강조라서 로그아웃은 가볍게)
+
+- [ ] **Step 2: 모바일 오버레이 하단 영역 변경**
+
+현재 (line ~209-237 부근):
+```tsx
+{user ? (
+  <>
+    <Link href="/mypage" ...>마이페이지</Link>
+    <button onClick={handleLogout} ...>로그아웃</button>
+  </>
+) : (
+  ...
+)}
+```
+
+모바일은 공간 충분 (full-screen overlay). 3개 모두 노출:
+
+```tsx
+{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>
+    <Link
+      href="/music"
+      className="kx-btn-primary flex-1 py-3 text-center rounded-full text-sm"
+      style={{ textDecoration: 'none' }}
+    >
+      Try now
+    </Link>
+  </>
+) : (
+  ...
+)}
+```
+
+⚠️ **모바일 로그아웃 위치 결정**: 모바일에서 3개 버튼은 한 줄에 안 들어감. 옵션:
+- (a) 마이페이지 + Try now만 노출, 로그아웃은 마이페이지 안에 진입해서 처리 (현재 mypage에는 로그아웃 버튼 없음 — Phase 1에서 제거됨)
+- (b) 두 줄로: 위에 마이페이지+Try now, 아래에 별도 로그아웃 row
+
+(a)를 하려면 mypage에 로그아웃 다시 추가하거나, 모바일에선 로그아웃 별도 위치.
+
+**결정**: (b) 두 줄. 첫 줄 `flex gap-3` 로 [마이페이지][Try now], 두 번째 줄에 width-full "로그아웃" 텍스트 버튼.
+
+수정:
+
+```tsx
+{user ? (
+  <>
+    <div className="flex gap-3 w-full">
+      <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="w-full py-3 text-center text-sm font-medium mt-2"
+      style={{ color: 'var(--kx-on-variant)', background: 'transparent' }}
+    >
+      로그아웃
+    </button>
+  </>
+) : (
+  ...
+)}
+```
+
+⚠️ 외곽 `<div className="mt-6 flex gap-3">` 의 flex 레이아웃은 기존 — 새 구조는 첫 줄 flex + 두 번째 줄 standalone. 외곽 부모를 `flex-col`로 변경하거나, 위 코드처럼 fragment 안에서 div + button 2개로 처리.
+
+원본 외곽 (line ~205-208 부근):
+```tsx
+<div className="mt-6 flex gap-3">
+  {user ? (...) : (...)}
+</div>
+```
+
+→ 변경 후 외곽을 `<div className="mt-6 flex flex-col gap-2">` 로 (column 방향):
+
+```tsx
+<div className="mt-6 flex flex-col gap-2">
+  {user ? (
+    <>
+      <div className="flex gap-3">
+        <Link href="/mypage" className="flex-1 py-3 ...">마이페이지</Link>
+        <Link href="/music" className="kx-btn-primary flex-1 py-3 ...">Try now</Link>
+      </div>
+      <button onClick={handleLogout} className="w-full py-3 text-center text-sm font-medium" style={{ color: 'var(--kx-on-variant)', background: 'transparent' }}>
+        로그아웃
+      </button>
+    </>
+  ) : (
+    <div className="flex gap-3">
+      <Link href="/login" className="flex-1 py-3 ...">로그인</Link>
+      <Link href="/music" className="kx-btn-primary flex-1 py-3 ...">Try now</Link>
+    </div>
+  )}
+</div>
+```
+
+(비로그인 분기도 동일하게 가운데 div로 감싸서 flex-col 부모와 호환)
+
+- [ ] **Step 3: 린트 + 빌드**
+
+```bash
+npx eslint app/components/TopNav.tsx
+npm run build 2>&1 | tail -10
+```
+
+- [ ] **Step 4: 커밋**
+
+```bash
+git add app/components/TopNav.tsx
+git commit -m "$(cat <<'EOF'
+feat(nav): TopNav 로그인 시에도 "Try now" 노출 (마케팅 컨버전 유지)
+
+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>
+EOF
+)"
+```
+
+- [ ] **Step 5: ⚠️ git log -3 직접 확인**
+
+```bash
+git log --oneline -3
+```
+
+---
+
+## 부록 A. 검증 인프라
+
+각 task 검증:
+1. `npx eslint <변경 파일>` — TS + ESLint
+2. `npm run build` — Next 빌드 통과
+3. 시각 회귀 — 마지막 task 후 사용자 수동 확인
+
+테스트 인프라(jest/vitest/playwright) 없음. P0/P1/P2와 동일 검증 흐름.
+
+## 부록 B. 검증 시나리오 (D 트랙 종료 후)
+
+`npm run dev` 후 사용자 수동 검증:
+
+**카카오 버튼 SSOT**:
+- [ ] 메인 `/` 우측 하단 노란 카카오 버튼 정상 클릭 → 오픈채팅 열림
+- [ ] mypage "구매한 팩" 탭에서 입금 대기 상태 시 카톡 안내 링크 정상 작동
+- [ ] (선택) `lib/contact.ts` 에서 URL 임시 변경 → 두 곳 모두 새 URL 반영 확인
+
+**mypage 잔여 정돈**:
+- [ ] "구매한 팩" 탭 EmptyState의 "Music 팩 보기" 클릭 → 한 번에 `/music/packs` (이전엔 `/services/music` → redirect)
+- [ ] 모바일 viewport(예: iPhone SE)에서 7개 탭 가로 스크롤 작동 (한 줄, swipe 가능)
+- [ ] 데스크톱에서는 그대로 한 줄에 7개 노출
+
+**TopNav Try now**:
+- [ ] 로그인 후 데스크톱 헤더: `JSM | Music | Custom Build | 마이페이지 | Try now | 로그아웃`
+- [ ] Try now 클릭 → `/music` 진입
+- [ ] 로그아웃 클릭 → `/` 이동 + 토글 복귀 (로그인/Try now)
+- [ ] 모바일 햄버거 오버레이: 마이페이지+Try now 한 줄 + 로그아웃 텍스트 줄
+
+## 부록 C. P3+ 후속 (이 plan 종료 후)
+
+- 자체 정가 표 (가격 결정 후 `/work` 허브에 추가)
+- `/about` 페이지
+- 사주 카탈로그 (재정리 후 49만 코어 + 11 모듈)
+- sitemap.xml 자동 생성 (`app/sitemap.ts`)
+- `lib/contact.ts` 확장 — EMAIL, PHONE 등 추가 상수