jaengseung-made/docs/superpowers/specs/2026-07-03-phase2_5-saju-reskin-design.md

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: Record<string, (props)=>JSX.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 항목에 추가