gahusb
d5be617eb2
app/work/saju/input/page.tsx: 다크 히어로(#04102b + repeating-linear -gradient 텍스처) → bg-[var(--jsm-navy)] 플랫 밴드, violet 배지 → navy 위 accent-soft, 하드코드 hex(#dbe8ff/#1a56db/#7c3aed/#04102b) → jsm-line/jsm-accent/jsm-ink 토큰. SajuForm.tsx: 제출 버튼 gradient(#1a56db→#7c3aed) → 플랫 bg-[var(--jsm-accent)] hover:bg-[var(--jsm-accent-hover)]. 폼 필드 보더·포커스·선택 버튼·체크박스의 하드코드 hex를 동일 역할의 --jsm-line/--jsm-accent/--jsm-ink 토큰으로 통일. useSajuForm 상태·핸들러·submit·라우팅 로직은 라인 단위로 100% 동일 (className/style만 변경). grep gradient|violet|purple|blur 게이트 0건, npm run build 성공, npm test 30/30 유지. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
41 lines
1.7 KiB
TypeScript
41 lines
1.7 KiB
TypeScript
import SajuForm from '@/app/work/saju/components/SajuForm';
|
|
|
|
export default function SajuInputPage() {
|
|
return (
|
|
<div className="min-h-full bg-[var(--jsm-bg)]">
|
|
{/* Hero */}
|
|
<div className="relative overflow-hidden px-6 py-12 bg-[var(--jsm-navy)]">
|
|
|
|
<div className="relative max-w-xl mx-auto text-center">
|
|
<div className="inline-flex items-center gap-2 bg-white/10 border border-white/20 text-[var(--jsm-accent-soft)] text-xs font-semibold px-4 py-1.5 rounded-full mb-4 tracking-wide">
|
|
<span className="w-1.5 h-1.5 rounded-full bg-amber-400 animate-pulse" />
|
|
AI 사주 분석 · 생년월일 입력
|
|
</div>
|
|
<h1 className="text-3xl md:text-4xl font-extrabold text-white leading-tight mb-3 tracking-tight">
|
|
생년월일을 입력해주세요
|
|
</h1>
|
|
<p className="text-blue-200/60 text-sm leading-relaxed">
|
|
정확한 생년월일과 태어난 시간을 입력하면<br />
|
|
더 정밀한 사주팔자를 계산할 수 있습니다.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Form 영역 */}
|
|
<div className="px-6 py-10 max-w-2xl mx-auto">
|
|
<div className="bg-white rounded-2xl border border-[var(--jsm-line)] p-8 shadow-lg">
|
|
<div className="flex items-center gap-2 mb-6">
|
|
<div className="w-1 h-5 bg-[var(--jsm-accent)] rounded-full" />
|
|
<h2 className="font-bold text-[var(--jsm-ink)] text-base">기본 정보 입력</h2>
|
|
</div>
|
|
<SajuForm />
|
|
</div>
|
|
|
|
<p className="text-center text-xs text-slate-400 mt-6">
|
|
입력하신 정보는 사주 계산에만 사용되며 별도로 저장되지 않습니다.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|