diff --git a/docs/superpowers/specs/2026-04-27-mypage-liquidglass-redesign.md b/docs/superpowers/specs/2026-04-27-mypage-liquidglass-redesign.md new file mode 100644 index 0000000..41037fe --- /dev/null +++ b/docs/superpowers/specs/2026-04-27-mypage-liquidglass-redesign.md @@ -0,0 +1,455 @@ +# mypage Liquid Glass 리뉴얼 (Phase 1) + +- **작성일**: 2026-04-27 +- **목표**: mypage를 메인 surface(Liquid Glass + Jua)와 시각적으로 조화시키고, Music 사업부 통합의 첫 단계로 "구매한 팩" 탭을 신설한다. 백엔드 자료 호스팅(NAS · HMAC · 토큰)은 Phase 2로 분리. +- **결정 라인 (CEO 확정)**: + 1. **음악 통합** = D — B(구매한 팩 자료) + C(스튜디오 링크). 트랙 DB 저장(A)은 별도 plan + 2. **구조** = B — `/mypage`를 `PublicShell + TopNav`로 통합 (Sidebar 제거) + 3. **톤** = B — Hybrid Dark Hero + Light Cards + 4. **NAS 호스팅** = 가 — Phase 1만 (디자인+구조), Phase 2 별도 spec + 5. **신원 표시** = C — TopNav에 "마이페이지/로그아웃" link + mypage 축소 hero (가입일·아바타 유지, 로그아웃 버튼 제거) + +## 1. 컨텍스트 + +### As-Is (P0 직후 시점, HEAD = `3033572`) +- 메인 공개 surface: TopNav (알약 글래스 헤더) + Liquid Glass 톤 + Jua 폰트 + 검정/흰색 교차 섹션 +- mypage(`/mypage`): `DashboardShell.tsx:9` `SIDEBAR_PATHS=['/mypage']` → 좌측 검정 사이드바(`Sidebar.tsx`) + 본문 라이트 블루 (`bg-[#f0f5ff]`, `bg-[#1a56db]` 액센트, `border-[#dbe8ff]`) +- TopNav는 supabase auth 구독 안 함 — 로그인 후에도 항상 "로그인 / Try now"만 표시 (CEO 보고 이슈) +- Sidebar는 supabase auth 구독함 (Sidebar.tsx:93-103) — 로그인 시 마이페이지/로그아웃 토글 정상 작동 + +### Why now +- 메인 공개 surface는 P0(Liquid Glass) 마이그레이션 완료, 회원 surface(mypage)는 옛 톤 유지 → 사용자가 메인 → mypage 이동 시 시각 단절 +- "music 도 mypage에 포함시킬 거" — Music 팩 구매 자료를 mypage에서 다운로드받게 하는 흐름의 첫 단계 (자료 호스팅은 Phase 2) +- TopNav 로그인 상태 미반영은 별도 이슈로 보고됨 → 같은 spec에 묶어 처리 + +### Phase 분리 근거 +- Phase 1 = 프론트엔드만 (디자인 + 구조 + 신규 탭 UI placeholder + TopNav auth) — 1 spec/plan으로 처리 가능한 단위 +- Phase 2 = 백엔드/인프라 (NAS `/media/packs/`, HMAC 토큰, Next API, admin 업로드) — Phase 1 끝난 후 별도 spec/plan +- "구매한 팩" 탭은 Phase 1에서 UI만 노출하되 다운로드 버튼은 비활성 + "준비 중 — 카톡으로 안내" 안내 + +## 2. 변경 범위 (4 파일) + +| 파일 | 변경 종류 | 책임 | +|---|---|---| +| `app/components/DashboardShell.tsx` | Modify | `SIDEBAR_PATHS` 상수 + `useSidebar` 분기 + Sidebar import + `if (!useSidebar)` 분기 + 사이드바 분기 안의 카카오 버튼 — 모두 삭제. mypage는 PublicShell 폴백 경로를 탐. STANDALONE_PATHS는 그대로 유지. | +| `app/components/TopNav.tsx` | Modify | supabase auth 구독 추가 + 로그인 상태 토글 (데스크톱 우측 + 모바일 오버레이 하단). | +| `app/components/Sidebar.tsx` | Delete | 사용처 0이 됨 (DashboardShell만 import 했음). | +| `app/mypage/page.tsx` | Modify | 디자인 토큰 마이그레이션 + hero 축소(로그아웃 버튼 제거) + "구매한 팩" 탭 신설 (placeholder). | + +기타 영향: +- `app/components/DashboardShell.tsx`의 `STANDALONE_PATHS`(login/signup/admin) 그대로 유지 +- `app/admin/*`은 `STANDALONE_PATHS`로 분기되어 자체 admin shell 사용 — 영향 없음 +- `app/login/page.tsx` 로그인 후 redirect 대상은 `/mypage` 그대로 (구조 변경 없음) + +## 3. TopNav 로그인 상태 (구체 디자인) + +### 3.1 패턴 차용 +`app/components/Sidebar.tsx:87-110` 의 auth 구독 + 로그아웃 핸들러 그대로 차용: +- 마운트 시 `supabase.auth.getUser()` 1회 + `onAuthStateChange` 구독으로 세션 변경 추적 +- cleanup: `subscription.unsubscribe()` +- 로그아웃: `signOut() → router.push('/') → router.refresh()` + +### 3.2 데스크톱(`md+`) 우측 영역 +``` +로그아웃 상태 (현재 그대로): + [로그인] [Try now] + +로그인 상태 (신규): + [마이페이지] [로그아웃] +``` +- "마이페이지" = 텍스트 link (현재 "로그인" 자리 className 그대로 — `hidden sm:inline-block text-sm font-medium px-4 py-2 ...`) +- "로그아웃" = button (현재 "Try now" `kx-btn-primary` 자리에 `text-sm font-medium px-5 py-2 rounded-full` text 버튼 + `border border-white/20` hover effect — `kx-btn-primary` 보라 글로우는 비회원 전환 도구이므로 회원 화면에는 부적합) + +### 3.3 모바일 오버레이 (하단 CTA 영역, 현재 152-167행) +``` +로그아웃 상태 (현재): + [로그인] [Try now] + +로그인 상태 (신규): + [마이페이지] [로그아웃] +``` +- 동일 className 패턴 유지 (`flex-1 py-3 text-center rounded-full`) +- 좌측 link, 우측 button + +### 3.4 활성 탭 표시 (선택적) +- 현재 TopNav는 `LINKS` 배열 항목에만 active 표시 (`isActive` 함수). "마이페이지"는 LINKS가 아닌 우측 영역 → active 표시 없이 두는 것이 단순. 사용자가 mypage 안에 있으면 "마이페이지" 텍스트가 그대로 노출되어 충분히 구분됨. + +## 4. mypage 디자인 (구체) + +### 4.1 Layout 구조 변경 +- **현재**: `
` 라이트 블루 풀 배경 +- **변경**: `
` — 옅은 회색 본문 배경. PublicShell의 `pt-20` 헤더 여백을 통과해 mypage 자체 hero가 곧장 시작. + +### 4.2 사용자 헤더 (Dark Hero — 축소) + +**현재**(mypage page.tsx:302-325): +```tsx +
+
+
+
{user.email?.[0].toUpperCase()}
+
+
{user.email}
+
가입일: {...}
+
+
+ +
+
+
+
+``` + +**변경**: +```tsx +
+
+
+
+ {user.email?.[0].toUpperCase()} +
+
+
{user.email}
+
+ 가입일 {new Date(user.created_at).toLocaleDateString('ko-KR')} +
+
+
+
+
+``` + +차이점: +- `bg-[#04102b]` → CSS var `var(--kx-surface)` (= #060e20, 더 깊음) +- `bg-[#1a56db]` 아바타 → `var(--kx-primary)` (#cc97ff 보라) +- 패딩 `py-10` → `py-8` (덜 압도적) +- 아바타 크기 `w-14 h-14 text-xl` → `w-12 h-12 text-lg` (한 단계 축소) +- 가입일 폰트 `text-sm` → `text-xs` 색 `text-blue-300/60` → `text-white/50` (덜 강조) +- "가입일:" 콜론 → "가입일 " 공백 (kx 톤, 미니멀) +- **로그아웃 버튼 완전 제거** — TopNav로 이동 +- 헤더 폰트에 `kx-display` 클래스 추가 (Jua + letter-spacing 정돈) + +### 4.3 탭 바 (7개로 확장) + +**현재 6개**: 프로젝트현황 / 의뢰내역 / 결제내역 / 내정보 / 구독관리 / 사주기록 +**추가 1개**: 구매한 팩 +**총 7개** + +**탭 디자인 변경**: +- 컨테이너: `bg-white border border-[#dbe8ff] rounded-xl p-1` → `bg-white border border-slate-200 rounded-xl p-1` +- 액티브 탭 배경: `bg-[#1a56db] text-white shadow` → `bg-violet-600 text-white shadow` (보라) +- 비액티브 텍스트: `text-slate-500 hover:text-slate-700` → `text-slate-500 hover:text-violet-600` +- 카운트 배지 액티브: `bg-white/20 text-white` 그대로 +- 카운트 배지 비액티브: `bg-slate-100 text-slate-600` 그대로 + +**탭 7개 표시**: +- 데스크톱: `flex` 한 줄 — 가능 (각 탭 평균 5~7글자) +- 모바일: 현재도 `flex` 한 줄이나 7개에서 글자 잘림 위험. **`flex-wrap` 적용** + 각 탭 `min-width: 110px` 정도 부여 → 자연스럽게 2줄로 떨어짐 +- 또는 모바일에서 `grid-cols-3 sm:grid-cols-4 md:flex` 단계적 적용 + +탭 순서 (구매한 팩 위치 결정): +- "구매한 팩"을 `결제 내역` 다음에 배치 — 결제와 자료가 인접 +- 최종: `프로젝트현황 / 의뢰내역 / 결제내역 / 구매한 팩 / 내정보 / 구독관리 / 사주기록` + +### 4.4 본문 카드 토큰 마이그레이션 + +전체 mypage `page.tsx`(~960행)에서 다음 색 토큰을 일괄 치환: + +| 현재 토큰 | 새 토큰 | 의미 | +|---|---|---| +| `bg-[#f0f5ff]` | `bg-slate-50` | 본문 배경 (또는 흰색) | +| `bg-[#04102b]` (헤더 외 위치) | `bg-[#060e20]` 또는 `var(--kx-surface)` | 다크 강조 | +| `bg-[#1a56db]`, `bg-blue-600` | `bg-violet-600` | 주 액센트 | +| `hover:bg-[#1e4fc2]`, `hover:bg-blue-700` | `hover:bg-violet-500` | 액센트 hover | +| `bg-[#1a56db]/20`, `text-[#1a56db]` | `text-violet-600`, `bg-violet-100` | 텍스트 액센트 | +| `border-[#dbe8ff]` | `border-slate-200` | 중성 카드 보더 | +| `bg-blue-50 border-blue-200` | `bg-violet-50 border-violet-200` | 강조 박스 | +| `text-[#04102b]` | `text-slate-900` | 본문 다크 텍스트 | +| `text-blue-300/60` (다크 hero 안) | `text-white/50` | 다크 위 옅은 텍스트 | + +**유지하는 색 (보조 의미를 가지므로 그대로)**: +- `bg-emerald-*` 완료/이용중 status +- `bg-orange-*` 해지 예정 warning +- `bg-amber-*` 유료 배지 +- `bg-red-*` 에러/해지 +- `bg-rose-*`, `bg-pink-*` 사주 메타 +- `bg-cyan-*` 사주 메타 +- `bg-sky-*` 텔레그램 연동 + +이들은 의미 색이라 톤 통일에서 제외. + +### 4.5 "구매한 팩" 탭 (신규 — Placeholder) + +#### 데이터 소스 — 정정 (코드 검증 결과) + +**확인된 결제 흐름** (`app/services/music/page.tsx:295` + `app/components/PurchaseAgreementModal.tsx:55-63`): +- Music 팩 구매: `PurchaseAgreementModal`이 `/api/contact` POST → **`contact_requests` 테이블**(mypage에서 `orders` 변수로 fetch 중) +- `service` 컬럼 = `"구매 신청: AI 음악 마스터 팩 · {tier.name}"` 형식 (예: `"구매 신청: AI 음악 마스터 팩 · 프로"`) +- `payments` 테이블은 **PortOne PG 결제 전용** (현재 사주 1,000원만) — Music 팩과 무관 + +→ **데이터 소스는 기존 `orders` (contact_requests)**. 추가 fetch 불필요 (mypage:129-136에서 이미 fetch 중). + +#### Tier 매핑 함수 + +`lib/pack-assets.ts` (신규 파일): + +```ts +export interface PackAsset { + name: string; + files: string[]; +} + +export const PACK_ASSETS: Record<'starter' | 'pro' | 'master', PackAsset> = { + starter: { + name: 'AI 음악 마스터 팩 (입문)', + files: [ + 'Suno 프롬프트 북 PDF (40p)', + '구조 템플릿 PDF', + '저작권 가이드 기본판', + ], + }, + pro: { + name: 'AI 음악 마스터 팩 (프로)', + files: [ + '입문 자료 전체', + 'MV 워크플로우 가이드 (Runway · Luma · Pika)', + '샘플 프로젝트 1개 (.prj 파일 + 영상)', + '유튜브 SEO 템플릿', + '1:1 Q&A 1회 (이메일 응답)', + ], + }, + master: { + name: 'AI 음악 마스터 팩 (마스터)', + files: [ + '프로 자료 전체', + '샘플 프로젝트 장르별 3종', + '저작권 심화판 + 상업 이용 체크리스트', + '제작 레시피 영상 (우선 공개)', + ], + }, +}; + +/** + * orders.service ("구매 신청: AI 음악 마스터 팩 · 프로") → tier key. + * 매칭 안 되면 null 반환 (Music 팩 외 의뢰). + */ +export function extractPackTier(service: string): 'starter' | 'pro' | 'master' | null { + if (!service.startsWith('구매 신청:')) return null; + if (service.includes('입문')) return 'starter'; + if (service.includes('프로')) return 'pro'; + if (service.includes('마스터')) return 'master'; + return null; +} +``` + +(파일 크기, 실제 파일 URL은 Phase 2에서 추가) + +#### Status 매핑 + +`orders.status` 값별 표시: +- `'completed'` — 자료 발송 완료. 자료 리스트 + (Phase 2)다운로드 버튼 노출 +- `'in_progress'` — 입금 확인 중. "결제 처리 중" 안내 + 자료 리스트는 보여주되 다운로드 비활성 +- `'pending'` 또는 그 외 — "입금 대기 중" + 자료 리스트는 미노출 (또는 흐리게) + +#### UI 컴포넌트 (구체) + +```tsx +import { PACK_ASSETS, extractPackTier } from '@/lib/pack-assets'; + +// ... + +{tab === 'packs' && ( +
+ {(() => { + const packOrders = orders + .map((o) => ({ order: o, tier: extractPackTier(o.service) })) + .filter((x): x is { order: Order; tier: 'starter' | 'pro' | 'master' } => x.tier !== null); + + if (packOrders.length === 0) { + return ( + + ); + } + + return packOrders.map(({ order, tier }) => { + const asset = PACK_ASSETS[tier]; + const statusLabel = + order.status === 'completed' ? '자료 발송 완료' : + order.status === 'in_progress' ? '결제 처리 중' : + '입금 대기'; + const statusColor = + order.status === 'completed' ? 'bg-violet-50 text-violet-600 border-violet-200' : + order.status === 'in_progress' ? 'bg-amber-50 text-amber-600 border-amber-200' : + 'bg-slate-100 text-slate-500 border-slate-200'; + + return ( +
+
+
+
{asset.name}
+
+ {new Date(order.created_at).toLocaleDateString('ko-KR')} 신청 +
+
+ + {statusLabel} + +
+ +
+
+ 📦 자료 패키지 ({asset.files.length}개) +
+
    + {asset.files.map((file, i) => ( +
  • + · + {file} +
    • + ))} +
+ + +

+ 현재는 카톡 1:1로 자료를 보내드립니다. 자동 다운로드는 곧 활성화됩니다. +
+ + 카톡 오픈채팅 → + +

+
+
+ ); + }); + })()} +
+)} +``` + +#### Phase 2에서 변경될 것 +- `disabled` 버튼 → `` 활성화 +- "자료 준비 중" → "자료 다운로드" +- 카톡 안내 문구 제거 +- `PACK_ASSETS` 상수는 그대로 유지 가능 (정적 자료 매핑은 Phase 2에서도 유효), Phase 2는 파일별 URL/HMAC 토큰만 추가 +- `order.status === 'completed'` 일 때만 다운로드 활성, 그 외엔 placeholder 유지 + +### 4.6 Tab type 확장 + +```ts +type Tab = 'profile' | 'projects' | 'subscription' | 'saju' | 'payments' | 'orders' | 'packs'; +``` + +`packs` 추가. `tabs` 배열에 정의 추가: +```ts +{ key: 'packs', label: '구매한 팩', count: packPayments.length || undefined } +``` + +순서: `projects → orders → payments → packs → profile → subscription → saju` + +### 4.7 사용자 빠른 메뉴 (`tab === 'profile'` 안) + +현재 mypage page.tsx:512-535 에 "빠른 메뉴" 섹션이 있음: +- 사주 분석 (`/saju/input`) +- 외주 의뢰 (`/freelance`) + +음악 통합 강화를 위해 다음 항목 추가: +- **AI 스튜디오** (`/studio`) — 새 트랙 만들기. 아이콘은 음악 아이콘. +- (선택) **AI 음악 팩** (`/services/music`) — 다른 팩 둘러보기 + +이 항목들은 디자인 토큰 마이그레이션과 함께 처리. 현재 4.4의 `border-[#dbe8ff]`, `bg-blue-50/50` 등을 `border-slate-200`, `bg-violet-50/50`으로 치환. + +## 5. 보존되는 동작 (회귀 방지) + +이번 spec은 시각·구조 변경이 본질이고, 비즈니스 로직(데이터 fetch, 텔레그램 연결, 구독 해지, 견적 토큰 연결, 사주 기록 표시 등)은 그대로 유지한다. 회귀 점검 목록: + +- supabase auth getUser 후 `/login` redirect — 그대로 +- payments / orders / saju_records / projects fetch — 그대로 +- 텔레그램 deeplink 발급, 연결/해제 — 그대로 +- 구독 자동갱신 토글, 구독 해지 — 그대로 +- 견적서 토큰 연결 폼 — 그대로 +- 카카오 오픈채팅 플로팅 버튼 (현재 DashboardShell에 있음) — Sidebar 제거 후에도 PublicShell에서 작동해야 함 + - **주의**: DashboardShell.tsx 의 카카오 버튼은 사이드바 분기(useSidebar=true) 안에 있음 (76-127행) — 이 분기 자체가 사라지면 카카오 버튼도 사라짐 + - **수정 필요**: 카카오 플로팅 버튼을 PublicShell.tsx로 이동 (또는 별도 컴포넌트로 분리하여 두 shell 모두에 마운트) +- TelegramGuideModal — 그대로 + +## 6. Phase 2 미리보기 (별도 spec — 이번 plan 종료 후 작성) + +Phase 2가 다룰 것: + +1. **NAS `/media/packs/` 디렉토리 셋업** — `/volume1/docker/webpage/media/packs/{starter|pro|master}/` +2. **nginx 설정** — `/media/packs/...` 정적 서빙. 토큰 검증 옵션은 다음 중 결정: + - (a) Next.js API에서 토큰 검증 후 file 응답 (메모리 부담) + - (b) nginx auth_request 모듈로 사전 검증 +3. **Next.js API** `/api/packs/[productId]` — supabase user auth + payments 확인 후 HMAC 토큰 발급, file URL 반환 +4. **DB 스키마** — `pack_files` 테이블 (또는 정적 매핑 유지). 파일 메타데이터(크기, 종류, 업데이트일). +5. **admin 업로드 UI** — `/admin/services` 또는 별도 `/admin/packs` — 새 자료 등록 흐름 +6. **mypage** — `disabled` 버튼 → 활성 다운로드 링크로 교체 +7. **회귀 테스트** — 구매하지 않은 사용자가 토큰 우회 시도 시 차단 + +## 7. 의도적 제외 (이번 spec 범위 밖) + +| 항목 | 이유 | +|---|---| +| Studio 트랙 DB 저장 | 음악 통합 옵션 A — 별도 plan 필요 | +| `/admin` shell Liquid Glass 마이그레이션 | mypage와 별도 surface, 우선순위 낮음 | +| 사주 1,000원 PG 결제 결정 | P0 brainstorm 부록 A에 보류 항목 | +| URL 마이그레이션 (`/freelance` → `/work/freelance` 등) | P1 home-restructure plan | +| `/work` 우산 페이지 | P1 home-restructure plan | +| Music 팩 자체 페이지(`/services/music`) 디자인 변경 | 이미 P0(Liquid Glass)로 처리됨 | +| 모바일 햄버거 오버레이 디테일 정돈 | 필요 시 P1 home-restructure plan에 흡수 | + +## 8. 다음 단계 + +1. 이 spec 검토 (사용자) +2. 승인 후 → `superpowers:writing-plans` 스킬로 implementation plan 작성 +3. plan 작성 후 → `superpowers:subagent-driven-development` 로 task별 실행 +4. 모두 종료 후 → 통합 final review + finishing-a-development-branch +5. Phase 2 spec 별도 작성 시점은 CEO 결정 (운영상 자료 자동 다운로드 수요가 생길 때) + +## 부록 A. 영향받는 라우트 / 라우트별 사용 shell + +| 라우트 | 현재 shell | 변경 후 shell | +|---|---|---| +| `/` | PublicShell | PublicShell (변경 X) | +| `/services/*` | PublicShell | PublicShell (변경 X) | +| `/freelance`, `/saju`, `/studio` | PublicShell | PublicShell (변경 X) | +| `/login`, `/signup` | Standalone | Standalone (변경 X) | +| `/admin/*` | Standalone (자체 admin shell) | Standalone (변경 X) | +| `/mypage` | Sidebar (DashboardShell 분기) | **PublicShell + TopNav** | +| `/payment/*` | PublicShell | PublicShell (변경 X) | +| `/legal/*`, `/portfolio/[token]`, `/quote/[token]` | PublicShell | PublicShell (변경 X) | + +## 부록 B. 카카오 플로팅 버튼 처리 결정 + +**현재**: `DashboardShell.tsx:76-90`의 `useSidebar=true` 분기에만 mount → mypage 전용으로만 노출. + +**변경 후**: mypage가 PublicShell로 옮겨지면 카카오 버튼이 사라짐. 하지만 카카오 1:1 상담은 모든 페이지에서 유효한 도구. + +**결정**: 카카오 버튼을 `PublicShell.tsx`로 이동 → 모든 공개 페이지에서 노출 (mypage 포함). + +**구체 위치**: `PublicShell.tsx`의 `