diff --git a/docs/superpowers/specs/2026-07-03-phase2_5-saju-reskin-design.md b/docs/superpowers/specs/2026-07-03-phase2_5-saju-reskin-design.md new file mode 100644 index 0000000..266105c --- /dev/null +++ b/docs/superpowers/specs/2026-07-03-phase2_5-saju-reskin-design.md @@ -0,0 +1,69 @@ +# Phase 2.5 사주 결과 화면 라이트 재스킨 설계 + +- 날짜: 2026-07-03 +- 선행: Phase 2(사주 공개 전환) main 머지 완료 +- 배경: Phase 2에서 `/work/saju`가 공개 전환됐으나 결과 화면이 다크 우주테마 + gradient + 보라(violet/purple) + 이모지로 jaengseung-made 가드레일을 위반. 최종 리뷰가 후속 재스킨을 권고. + +## 결정 사항 (CEO 확정, 2026-07-03) + +| 결정 | 내용 | +|------|------| +| 미감 방향 | **타로·사이트와 동일한 `--jsm` 라이트**. navy 밴드로 명리 무게감만 유지(gradient 없이 플랫) | +| 범위 | **결과 화면 중심** — `result/SajuAISection.tsx`(위반 23) · `result/SajuFortuneSection.tsx`(14) · `result/page.tsx`(5). 랜딩·입력은 범위 밖(후속) | +| 이모지 | **인라인 stroke SVG 아이콘으로 교체**(currentColor) | + +## 원칙 + +- **순수 시각 재스킨**: 로직·데이터·props·AI 프롬프트·계산 무변경. JSX 구조는 유지하되 className/style만 교체 +- 신규 색 토큰 추가 금지 — 기존 `--jsm-*`(bg/surface/surface-alt/ink/ink-soft/ink-faint/line/navy/accent/accent-soft/accent-hover)만 +- gradient / blur / 보라(violet/purple) / 이모지 **0건**(대상 3파일) + +## 색상 매핑 (현재 → --jsm) + +| 현재 | 교체 | +|------|------| +| `#04102b`·`#0a1f5c`·`#0a2a44` 다크 배경 | `--jsm-bg` / `--jsm-surface` / `--jsm-surface-alt` | +| 히어로 다크 밴드·그라디언트 | `--jsm-navy` 플랫 배경 + `--jsm-surface` 본문 | +| `from-violet-500 to-purple-600`, `#a78bfa` 라디얼 | `--jsm-accent` 단색 (blur 오버레이 제거) | +| amber-400 (프리미엄·행운 강조) | `--jsm-accent` (강조) 또는 `--jsm-ink-soft` (보조) | +| 흰색/`blue-200/xx` 텍스트 | `--jsm-ink` / `--jsm-ink-soft` / `--jsm-ink-faint` | +| gradient 버튼·뱃지 | 플랫 `accent` bg + 흰 텍스트 / `accent-soft` bg + `accent` 텍스트 | +| SECTION_META 항목별 gradient/badge 팔레트(violet·rose·pink·amber…) | 전 항목 통일 `accent`/`accent-soft` (또는 중립 line/surface-alt). 항목 구분은 아이콘+라벨로 | + +## 워크스트림 4개 (순차) + +### WS1. 아이콘 세트 (`SajuIcons.tsx`) +- 신규 `app/work/saju/result/SajuIcons.tsx`: SECTION_META 12항목 대응 stroke SVG(currentColor, `w-*` prop) + 로또 아이콘 + - 12 라벨: 기질·오행·지지·신살·재물·직업·애정·건강·대운·세운·황금기·종합 + - 간결한 라인 아이콘. 의미 매핑(예: 재물=코인, 애정=하트-라인, 건강=하트비트, 대운=길/화살, 종합=문서). 필요 시 유사 항목 재사용 + - `export const SAJU_ICONS: RecordJSX.Element>` 또는 인덱스 배열 — SECTION_META 순서와 1:1 +- 단위 테스트 불요(시각). 렌더 스모크는 build로 대체 + +### WS2. SajuAISection 재스킨 (위반 23·최다) +- `SECTION_META` 재정의: 이모지 → 아이콘 참조로, 항목별 gradient/badge 팔레트 → 통일 `accent`/중립 토큰. `icon: string`(이모지) 필드 제거하고 아이콘 컴포넌트/인덱스로 대체 +- AI PREMIUM 뱃지·**로그인 CTA(Phase 2 추가분)**·로딩 스피너·완료 헤더의 gradient/보라/amber → `--jsm` 토큰 +- 미리보기 그리드(SECTION_META.map)·해석 카드(section별 meta)의 다크/그라디언트 → 라이트 카드(`surface`+`line`) +- 로직(`hasPaid` 게이트, 재생성, fetch, 429 처리) 무변경 + +### WS3. SajuFortuneSection 재스킨 (위반 14) +- 오늘의 운세 카드·점수 링(SVG stroke 색)·용신 표시·로또 섹션(🎱→SajuIcons 로또 아이콘) 라이트 전환 +- 점수/오행 색: 기존 다크 대비색 → `--jsm` 토큰 유지 대비. `hasLottoSubscription` 분기 문구·로직 무변경 + +### WS4. result/page.tsx 재스킨 + 검증·문서 (위반 5) +- 히어로 다크 밴드 → `--jsm-navy` 플랫 배경(gradient 제거), 컨테이너 배경 → `--jsm-bg`/`surface` +- 사주팔자 표(사주 4기둥) 등 잔여 다크 카드 라이트 전환 +- CLAUDE.md: 사주 시스템 섹션에 "결과 화면 --jsm 라이트 재스킨 완료(2026-07-03)" 반영, 디자인 가드레일 준수 명시 +- 최종 검증: `grep -nE "gradient|violet|purple|blur" app/work/saju/result/*.tsx` 0건, 이모지 0건, `npm run build` 성공, `npm test` 30 유지 + +## 범위 밖 (후속 Phase 2.6 권고) + +- `/work/saju/page.tsx`(랜딩, 위반 9)·`input/page.tsx`·`components/SajuForm.tsx` — 공개 진입점이라 결과와 톤 불일치가 남음. 별도 후속으로 라이트 전환 권고(스펙에 명시) +- 로직·계산·프롬프트·데이터 무변경(순수 시각) +- 호령 마스코트/전통 일러스트 신규 제작(있다면) — 이번 범위 아님 + +## 리스크·주의 + +- 대상 3파일이 크다(합 ~1400줄). 항목별 className 치환이 많으므로 **JSX 구조·조건분기 보존**이 핵심 — 로직 라인은 건드리지 않음 +- 점수 링 등 SVG stroke는 인라인 색을 쓰므로 `--jsm` 토큰 CSS 변수를 `stroke`/`fill`에 적용(`var(--jsm-accent)`) +- SECTION_META의 `number` 기반 meta 매핑(`section.number - 1`) 로직은 유지 — 아이콘 배열도 동일 인덱스 순서 보장 +- 시각 회귀는 자동 테스트 불가 → 빌드+가드레일 grep + 수동 확인으로 검증. 수동 확인은 CEO E2E 항목에 추가