Liquid Glass 메인 surface와 톤 정렬:
- 본문 배경 #f0f5ff → slate-50
- 액센트 #1a56db → violet-600 (탭 active, 버튼, 링크)
- 카드 보더 #dbe8ff → slate-200
- 다크 카드(프로젝트 헤더) #04102b → #060e20 (kx-surface 일관)
- 강조 박스 blue-50/200 → violet-50/200
- 다크 위 텍스트 blue-300/60 → white/50 등
- 탭 button min-w-[100px] 추가 (모바일 wrap 시 텍스트 잘림 방지)
의미 색(emerald/orange/amber/red/rose/pink/cyan/sky)는 시그널이므로 보존.
프로젝트 헤더 in_progress 상태 핀은 sky 계열로 이전(브랜드 블루 잔존 제거).
Task 4에서 추가된 새 코드(AI 스튜디오 카드 등)도 함께 마이그레이션.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
코드 리뷰 후속 (I-1):
인접 div에 사용자 이메일이 텍스트로 노출되므로 아바타 글자는 decoration.
스크린 리더가 외톨이 글자("B" 등)를 읽지 않도록 aria-hidden 처리.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
- Hero: bg-[#04102b] → kx-surface, py-10→py-8, 아바타 보라 액센트, 가입일 톤 다운,
로그아웃 버튼 제거 (TopNav가 담당)
- Tab type에 'packs' 추가, 결제 내역 다음 위치에 "구매한 팩" 탭
- packOrders 계산: orders.service 에서 extractPackTier로 Music 팩만 필터
- 신규 탭 JSX: status별 분기(완료/처리중/대기) + 자료 리스트 + 비활성 다운로드 버튼
+ 카톡 안내. Phase 2에서 다운로드 활성화 예정
- 빠른 메뉴: AI 스튜디오 카드 1개 추가 (사주·외주 옆), grid-cols-2→sm:grid-cols-3
- 탭 컨테이너 flex-wrap 적용 (모바일 7개 wrap)
- handleLogout 함수 제거 (사용처 없어짐)
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
DashboardShell 사이드바 분기에서 mypage 전용으로만 노출되던 카카오 버튼을
모든 공개 페이지(메인/서비스/외주/사주/결제/legal/mypage 등)에서 노출되도록 이동.
DashboardShell 쪽 원본은 Task 6에서 사이드바 분기 제거와 함께 자연 삭제 예정.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
코드 리뷰 후속:
- (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>
- 로그아웃 시: "로그인" link + "Try now" 버튼 (기존)
- 로그인 시: "마이페이지" link + "로그아웃" 버튼 (신규)
- 데스크톱 + 모바일 오버레이 둘 다 동일 패턴
- Sidebar.tsx:93-103 의 auth 구독 패턴 차용
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
코드 리뷰 후속 (I1+M2):
- TIER_LABEL: PackTier → 한국어 표시명 single source of truth
- PACK_ASSETS[*].name 백틱 템플릿으로 TIER_LABEL 참조
- extractPackTier if-ladder → LABEL_TO_TIER lookup (자동 derive)
- 마케팅 카피(입문/프로/마스터) 변경 시 한 곳만 수정으로 mypage·music 동기화
추가 코멘트 (M1, I3):
- U+00B7 middle-dot 명시
- Phase 2 PackFile 형태 마이그레이션 가이드 (files: string[] → { label, url? }[])
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
- PACK_ASSETS: starter/pro/master 각 자료 리스트 (Phase 1 placeholder, 실제 파일 URL은 Phase 2)
- extractPackTier(): orders.service "구매 신청: AI 음악 마스터 팩 · {tier}" → tier key
· "·" 뒤의 마지막 단어로 매칭하여 "마스터 팩" + "프로" 같은 충돌 회피
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Spec docs/superpowers/specs/2026-04-27-mypage-liquidglass-redesign.md 의 7개 섹션
모두 task로 매핑. 검증 인프라 부재 → lint + build + 시각 회귀 3단계 검증.
Task 순서 안전 분석(부록 A): 각 commit 후 mypage 로그아웃 경로 + 카카오 진입 항상 유지.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Final code reviewer 후속 3건:
- 명명 통일: Home 카드 "웹사이트" → "웹사이트 제작", "사주 카탈로그" → "AI 사주" /
JSON-LD "맞춤 개발 외주" → "외주 개발". Footer와 4개 라인 라벨 일치.
- priceSpecification 스텁 제거 (Schema.org price-on-request 관용 표기 아님).
P1에서 자체 정가 확정 시 Offer.price + priceCurrency 동시 추가 예정.
- 카드별 trackCTAClick("home_v6_custom_build_card_<key>") 5개 추가 — P1 IA
결정용 라인별 클릭 데이터.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Custom Build 사업부의 두 라인을 JSON-LD에 노출:
- 맞춤 개발 외주 (/freelance)
- 웹사이트 제작 (/services/website)
자체 정가가 미정이라 Offer.price 생략 (P1에서 가격 확정 후 추가).
provider는 기존 Person(@id="...#person") 재사용.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
- 카드 grid: grid-cols-2 md:grid-cols-5 → grid-cols-1 sm:grid-cols-2 lg:grid-cols-5
(모바일 orphan 방지)
- ContactModal service를 state로 lift (modalService) — Custom Build CTA에서
"외주 개발 문의" 자동 선택. 모달 close 시 "일반 문의"로 리셋.
- 카드 화살표 span에 aria-hidden 추가 (a11y)
- 카드 Link 의 redundant inline style 제거
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
- spec: Music + Custom Build 동등 두 사업부 (A/A-1) IA 재구조
· /work 사용, /work/saju 통합, 자체 정가, 외주 5건 비공개
· 메인 안 2 (Brand Hero + 2-up) + 헤더 안 b 추천
· TODO P0~P3 우선순위
- plan: P0 4 task (TopNav 외주 링크 / 푸터 Custom Build / 메인 미니 섹션 / JSON-LD)
· 결제는 이미 계좌이체 단일화 상태(Music/Blog) 발견 → P0 결제 task 제외
· 사주 1,000원 PG는 미해결로 부록 분리
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
A(반복 판매 표준화) + C(LTV 락인) 방향으로 D 듀얼 페르소나(사주집·인스타) 대상
B 단일 코어 + 모듈 카탈로그 구조 확정. 풀세트 사주집 1년 LTV 746만 시나리오 포함.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
- next/font/google로 Bagel_Fat_One (weight 400) 로드
- --font-kx-hero 변수로 주입, .kx-display가 우선 적용
- 한글은 Bagel Fat One(latin-only) → Space Grotesk/CookieRun 자연 폴백
- 카드 radius 전면 rounded-2xl 통일 (가격·FAQ 3xl→2xl)
- 섹션 H2 스케일 통일 (text-2xl md:text-3xl)
- 4단계 공정: 세로 대형 카드 → 2x2/4열 컴팩트 그리드
- 최종 CTA 카피 정정: '평생 업데이트' → '12개월 무료 업데이트'
- /services/music/samples 신규: 6개 장르 샘플 갤러리 + 구매 CTA
- 음악 페이지 #samples 섹션: 가장 인기 1개(featured)만 노출 + 갤러리 링크
- TopNav/Hero 보조 CTA '샘플' → /services/music/samples 로 통일
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Evidence 섹션에 '예시' 배지/면책 문구 (실샘플 전 법적 리스크 정리)
- JSON-LD Offer에 price/priceCurrency/availability 추가 (39k/99k/149k/29k/무료)
- 모바일에서 3-tier 가격 칩 세로 스택 (🔥프로 강조 유지)
- Hero '샘플 결과 보기' 앵커 /services/music#samples로 통일
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- TopNav 한국어화 (홈/샘플/가격/팩 상세), API 제거
- Hero 배지: 상품 형태 명시 "프롬프트·템플릿 팩 (PDF + 에셋)"
- Hero CTA: "₩39,000 팩 자세히 보기" (기대↔페이지 정렬)
- Hero 하단 3-tier 가격 요약 + 프로 티어 "가장 많이 팔림" 강조
- Final CTA 음악 단일화 ("오늘 밤 첫 AI 뮤비"), 문의는 서브 링크로 격하
- Other Products 헤더 "박재오가 만든 다른 도구" + 운영자 1줄
- layout 메타데이터·OG·Twitter·keywords 전면 음악 중심 재편
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- @media print CSS 보강: html/body height auto, overflow visible, fixed 요소 숨김
- 하단 고정바에 no-print 클래스 추가
- afterprint 이벤트 리스너로 isPrinting 상태 안정적 해제
- 필수 항목 헤더에 40% 할인 배지, 소계에 정가 취소선/할인액 표시
- 합계 박스에 정가→할인가 비교 표시
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
