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: 게이트 검증**

```bash
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: 게이트 검증**

```bash
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: 사주 전체 게이트 검증**

```bash
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: 최종 빌드·테스트**

```bash
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(무변) |