jaengseung-made/docs/superpowers/plans/2026-07-03-phase2_6-saju-entry-reskin.md

Phase 2.6 사주 랜딩·입력 라이트 재스킨 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: 사주 진입 화면 3파일(랜딩 page.tsx·input/page.tsx·SajuForm.tsx)을 --jsm 라이트로 재스킨해 사주 서비스 전 화면 톤을 통일한다.

Architecture: Phase 2.5와 동일한 순수 시각 재스킨 — 로직·데이터·props 무변경, 다크 hex·gradient·보라 className을 --jsm-* 토큰으로 치환. 대상 3파일엔 이모지가 없어 아이콘 작업 불필요. 각 파일 done-condition은 금지 패턴 grep 0건 + 빌드 성공.

Tech Stack: Next.js 16 (App Router, TS), Tailwind v4(--jsm-* 토큰), vitest

Spec: docs/superpowers/specs/2026-07-03-phase2_6-saju-entry-reskin-design.md

Global Constraints

• 순수 시각 변경: 로직·조건분기·fetch·상태·props·데이터·라우팅 라인은 건드리지 않는다(className/style만)
• 신규 색 토큰 추가 금지 — 아래 11개 --jsm-*만: --jsm-bg --jsm-surface --jsm-surface-alt --jsm-ink --jsm-ink-soft --jsm-ink-faint --jsm-line --jsm-navy --jsm-accent --jsm-accent-soft --jsm-accent-hover
• 대상 3파일에서 gradient / violet / purple / blur / 이모지 0건(각 Task 종료 게이트)
• navy 밴드 = 무테두리 flat + 흰 CTA(2.5·app/page.tsx에서 확립된 사이트 관용구). navy 배경 위 강조 텍스트는 --jsm-accent-soft(대비 확보)
• 의미색(상태 신호색)은 있으면 2.5 선례대로 보존
• next.config.ts·로직 파일 수정 금지
• 커밋은 스코프 파일만 스테이징 — git add -A·git commit -a 금지, 커밋 전 git status 확인
• 각 Task 종료 시 npm run build 성공 + npm test(30) 유지 후 커밋
• 커밋 트레일러: Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

색상 매핑 (모든 Task 공통 — 이 표대로 치환)

현재(제거 대상)	교체(→)
#04102b 다크 배경 + repeating-linear-gradient 텍스처	bg-[var(--jsm-navy)] 플랫(히어로 밴드) / bg-[var(--jsm-bg)](페이지). 텍스처 style 삭제
bg-gradient-to-r from-[#1a56db] to-[#7c3aed](+hover) CTA	bg-[var(--jsm-accent)] hover:bg-[var(--jsm-accent-hover)] 흰 텍스트
violet-300/500/600·#7c3aed·shadow-violet-*	var(--jsm-accent); navy 밴드 위 텍스트는 var(--jsm-accent-soft)
amber 강조	var(--jsm-accent) 또는 var(--jsm-ink-soft)
흰색·blue-xx 본문 텍스트	text-[var(--jsm-ink)] / ink-soft / ink-faint
다크 카드/테두리 #dbe8ff·#1a3a7a 등	bg-[var(--jsm-surface)] + border-[var(--jsm-line)]

참고 관용구: app/work/saju/result/page.tsx(2.5 완료본), app/showcase/page.tsx, app/page.tsx(navy CTA 밴드).

---

Task 1: 랜딩 page.tsx 재스킨

Files:

• Modify: app/work/saju/page.tsx (333줄, 위반 9건)

Interfaces:

• Consumes: 없음 (기존 --jsm 토큰만)

• Produces: 없음

• Step 1: 전체 Read 후 색상 매핑 치환

app/work/saju/page.tsx를 먼저 전체 Read. 다음 위반 지점을 색상 매핑 표대로 치환(className/style만):

• 히어로(79행): bg-[#04102b] + repeating-linear-gradient style → bg-[var(--jsm-navy)](밴드) + 텍스처 style 삭제

• 부제(84행): text-violet-300/70 → text-[var(--jsm-accent-soft)](navy 위)

• CTA 버튼(120행): bg-gradient-to-r from-[#1a56db] to-[#7c3aed] hover:… shadow-violet-900/40 → bg-[var(--jsm-accent)] hover:bg-[var(--jsm-accent-hover)](shadow는 기본 유지 또는 제거)

• MY RECORDS 라벨(138행): text-violet-600 → text-[var(--jsm-accent)]

• 레코드 카드(144행): border-[#dbe8ff] hover:border-violet-300 → border-[var(--jsm-line)] hover:border-[var(--jsm-accent-soft)]

• 하단 섹션 텍스처(186·255행): repeating-linear-gradient style 삭제, 다크 배경 → navy/surface

• AI PREMIUM 카드(262·268행): bg-violet-500/20 border-violet-400/30·text-violet-300 → navy 밴드 위 bg-white/10 border-white/20·text-[var(--jsm-accent-soft)]

• 그 외 #04102b 텍스트·다크 카드 → --jsm-ink/surface/line

• 서버/클라 로직·데이터 조회(MY RECORDS)·JSX 구조 미변경

• Step 2: 게이트 검증

grep -nE "gradient|violet|purple|blur" app/work/saju/page.tsx   # 기대: 0
npm run build && npm test   # build 성공 + 30 PASS

• Step 3: 커밋 — git add app/work/saju/page.tsx && git commit -m "feat(phase2.6): 사주 랜딩 라이트 재스킨 — gradient/보라→--jsm, 텍스처 제거"

---

Task 2: input/page.tsx + SajuForm.tsx 재스킨

Files:

• Modify: app/work/saju/input/page.tsx (41줄, 위반 3건)
• Modify: app/work/saju/components/SajuForm.tsx (220줄, 위반 1건)

Interfaces:

• Consumes: 없음

• Produces: 없음

• Step 1: 두 파일 Read 후 치환

각 파일 전체 Read. 다크/gradient/violet/purple 지점을 색상 매핑 표대로 치환:

• input/page.tsx: 입력 화면 컨테이너·헤더·다크 배경 → bg-[var(--jsm-bg)]/navy 밴드, violet → accent, 텍스트 → ink

• SajuForm.tsx: 폼 필드·버튼·강조 색의 gradient/violet → 플랫 accent, 다크 → surface/line. useSajuForm 등 폼 상태·핸들러·submit 로직 미변경

• Step 2: 게이트 검증

grep -nE "gradient|violet|purple|blur" app/work/saju/input/page.tsx app/work/saju/components/SajuForm.tsx   # 0
npm run build && npm test

• Step 3: 커밋 — git add app/work/saju/input/page.tsx app/work/saju/components/SajuForm.tsx && git commit -m "feat(phase2.6): 사주 입력 화면·폼 라이트 재스킨"

---

Task 3: 사주 전체 게이트 + CLAUDE.md

Files:

• Modify: CLAUDE.md

Interfaces:

• Consumes: Task 1~2 완료

• Produces: 문서 정합

• Step 1: 사주 전체 게이트 검증

grep -rnE "gradient|violet|purple|blur" app/work/saju --include="*.tsx"   # result 포함 사주 전체 0건

2.5 재스킨된 result 파일(SajuIcons·SajuAISection·SajuFortuneSection·result/page)과 이번 3파일 모두 0건이어야 함. 이모지도 Grep 유니코드로 0건 확인.

• Step 2: CLAUDE.md 갱신

## 사주 시스템 섹션의 2.5 재스킨 안내 문구("결과 화면 --jsm 라이트 재스킨 완료(2026-07-03)")를 "전 화면(랜딩·입력·결과) --jsm 라이트 재스킨 완료(2026-07-03)"로 갱신. 무관 섹션 미변경.

• Step 3: 최종 빌드·테스트

npm run build   # 성공, /work/saju·/work/saju/input·/work/saju/result 라우트 존재
npm test        # 30 PASS

• Step 4: 커밋 — git add CLAUDE.md && git commit -m "docs(phase2.6): CLAUDE.md — 사주 전 화면 라이트 재스킨 반영"

• Step 5: 보고

• 수동 확인: /work/saju 랜딩→입력→결과 전 플로우가 라이트로 일관 렌더

• 사주 서비스 전 화면 라이트 완결 — 재스킨 후속 없음

---

검증 요약

검증	명령	기대
사주 전체 가드레일	grep -rnE "gradient|violet|purple|blur" app/work/saju --include="*.tsx"	0건
이모지	grep 유니코드 범위	0건
빌드	npm run build	성공
테스트	npm test	30 PASS(무변)