gahusb
4f41f09a8c
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01AAtcmKKtqDUe4NyVgy1aLQ
4.2 KiB
4.2 KiB
Phase 2.6 사주 랜딩·입력 라이트 재스킨 설계
- 날짜: 2026-07-03
- 선행: Phase 2.5(사주 결과 화면 라이트 재스킨) main 머지 완료(
5ace251) - 배경: 2.5가 결과 화면만 라이트로 전환 → 공개 진입점(
/work/saju랜딩·입력)이 아직 다크로 남아 톤 불일치. 남은 3파일을 동일 방식으로 전환해 사주 서비스 전 화면 라이트 완결.
결정 사항 (CEO 확정, 2026-07-03)
| 결정 | 내용 |
|---|---|
| 방식 | Phase 2.5와 완전 동일 — --jsm 라이트 순수 시각 재스킨, 색상 매핑 표 재사용 |
| 범위 | 랜딩 page.tsx + 입력 input/page.tsx + components/SajuForm.tsx (3파일) |
| 이모지 | 대상 3파일에 이모지 없음(grep 0) — 아이콘 교체 불필요, 순수 색 재스킨 |
대상 (위반 분포, gradient/violet/purple/blur)
app/work/saju/page.tsx— 랜딩(333줄, 9건): 히어로bg-[#04102b]+repeating-linear-gradient텍스처,bg-gradient-to-r from-[#1a56db] to-[#7c3aed]CTA 버튼,violet-300/600/500텍스트·뱃지·테두리, AI PREMIUM 카드, MY RECORDS 섹션app/work/saju/input/page.tsx— 입력(41줄, 3건)app/work/saju/components/SajuForm.tsx— 폼(220줄, 1건)
원칙 (2.5 스펙 그대로)
- 순수 시각 변경: 로직·데이터·props·라우팅 무변경. className/style만
- 신규 색 토큰 금지 — 기존 11개
--jsm-*(bg/surface/surface-alt/ink/ink-soft/ink-faint/line/navy/accent/accent-soft/accent-hover)만 - gradient / blur / 보라(violet/purple) / 이모지 0건(대상 3파일)
- navy 밴드 = 무테두리 flat + 흰 CTA(2.5·
app/page.tsx에서 확립된 사이트 관용구) - 의미색(있다면 상태 신호색)은 2.5 선례대로 보존
색상 매핑 (2.5와 동일 — 이 표대로 치환)
| 현재(제거) | 교체(→) |
|---|---|
#04102b 다크 배경 + repeating-linear-gradient 텍스처 |
bg-[var(--jsm-navy)] 플랫(히어로 밴드) / bg-[var(--jsm-bg)](페이지) — 텍스처 제거 |
bg-gradient-to-r from-[#1a56db] to-[#7c3aed] 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 등 |
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 밴드).
워크스트림 3개 (순차)
WS1. 랜딩 page.tsx 재스킨 (9건)
- 히어로 다크 밴드+repeating-linear-gradient 텍스처 →
bg-[var(--jsm-navy)]플랫, 페이지 배경 라이트 - CTA 버튼 gradient → 플랫 accent
violet-*텍스트/뱃지/테두리(부제·MY RECORDS 라벨·레코드 카드 hover·AI PREMIUM 카드) → --jsm 토큰- 서버/클라 로직·데이터 조회·JSX 구조 미변경
WS2. input/page.tsx + SajuForm.tsx 재스킨 (4건)
- 입력 화면·폼의 다크/gradient/violet → --jsm 토큰. 폼 필드·버튼 스타일 라이트
useSajuForm등 로직·상태·핸들러 미변경
WS3. 최종 검증 + CLAUDE.md
- 사주 전체 게이트:
grep -rnE "gradient|violet|purple|blur" app/work/saju/**/*.tsx(result 포함) → 0건, 이모지 0건 npm run build성공,npm test(30) 유지- CLAUDE.md 사주 시스템 섹션: "결과 화면"→"전 화면(랜딩·입력·결과) --jsm 라이트 재스킨 완료(2026-07-03)"로 갱신
범위 밖
- 로직·계산·프롬프트·데이터 무변경(순수 시각)
- 이로써 사주 서비스 전 화면 라이트 완결 — 추가 재스킨 후속 없음
리스크·주의
- 랜딩
page.tsx가 클라이언트에서 saju 기록(MY RECORDS)을 조회하는 로직이 있으면 그 fetch/상태는 미변경 — className만 - navy 밴드 위 accent 텍스트는 대비상
accent-soft사용(2.5 선례) - 시각 회귀 자동 테스트 불가 → 빌드+게이트 grep + 수동 확인