gahusb/jaengseung-made
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(phase2.6): 사주 입력 화면·폼 라이트 재스킨

Browse Source 
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>
This commit is contained in:
gahusb
2026-07-03 11:25:53 +09:00
parent abec100a73
commit d5be617eb2
2 changed files with 24 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
app/work/saju/components/SajuForm.tsx
View File

@@ -66,14 +66,14 @@ export default function SajuForm() {
<form onSubmit={handleSubmit} className="space-y-6">
{/* 생년월일 */}
<div>
<label className="block text-left text-sm font-bold text-[#04102b] mb-3">
<label className="block text-left text-sm font-bold text-[var(--jsm-ink)] mb-3">
생년월일
</label>
<div className="grid grid-cols-3 gap-3">
<input
type="number"
placeholder="년 (예: 1990)"
className="px-4 py-3 border-2 border-[#dbe8ff] rounded-xl focus:border-[#1a56db] focus:outline-none transition bg-white text-[#04102b]"
className="px-4 py-3 border-2 border-[var(--jsm-line)] rounded-xl focus:border-[var(--jsm-accent)] focus:outline-none transition bg-white text-[var(--jsm-ink)]"
min="1900"
max="2100"
value={year}
@@ -83,7 +83,7 @@ export default function SajuForm() {
<input
type="number"
placeholder="월 (1-12)"
className="px-4 py-3 border-2 border-[#dbe8ff] rounded-xl focus:border-[#1a56db] focus:outline-none transition bg-white text-[#04102b]"
className="px-4 py-3 border-2 border-[var(--jsm-line)] rounded-xl focus:border-[var(--jsm-accent)] focus:outline-none transition bg-white text-[var(--jsm-ink)]"
min="1"
max="12"
value={month}
@@ -93,7 +93,7 @@ export default function SajuForm() {
<input
type="number"
placeholder="일 (1-31)"
className="px-4 py-3 border-2 border-[#dbe8ff] rounded-xl focus:border-[#1a56db] focus:outline-none transition bg-white text-[#04102b]"
className="px-4 py-3 border-2 border-[var(--jsm-line)] rounded-xl focus:border-[var(--jsm-accent)] focus:outline-none transition bg-white text-[var(--jsm-ink)]"
min="1"
max="31"
value={day}
@@ -105,11 +105,11 @@ export default function SajuForm() {
{/* 태어난 시간 */}
<div>
<label className="block text-left text-sm font-bold text-[#04102b] mb-3">
<label className="block text-left text-sm font-bold text-[var(--jsm-ink)] mb-3">
태어난 시간 (선택)
</label>
<select
className="w-full px-4 py-3 border-2 border-[#dbe8ff] rounded-xl focus:border-[#1a56db] focus:outline-none transition bg-white text-[#04102b]"
className="w-full px-4 py-3 border-2 border-[var(--jsm-line)] rounded-xl focus:border-[var(--jsm-accent)] focus:outline-none transition bg-white text-[var(--jsm-ink)]"
value={hour}
onChange={(e) => setHour(e.target.value)}
>
@@ -131,7 +131,7 @@ export default function SajuForm() {
{/* 양력/음력 선택 */}
<div>
<label className="block text-left text-sm font-bold text-[#04102b] mb-3">
<label className="block text-left text-sm font-bold text-[var(--jsm-ink)] mb-3">
생일 구분
</label>
<div className="grid grid-cols-2 gap-3">
@@ -140,8 +140,8 @@ export default function SajuForm() {
onClick={() => setCalendarType('solar')}
className={`px-6 py-3 rounded-xl font-bold transition ${
calendarType === 'solar'
? 'bg-[#1a56db] text-white shadow-lg'
: 'bg-white border-2 border-[#dbe8ff] text-[#04102b] hover:border-[#1a56db]'
? 'bg-[var(--jsm-accent)] text-white shadow-lg'
: 'bg-white border-2 border-[var(--jsm-line)] text-[var(--jsm-ink)] hover:border-[var(--jsm-accent)]'
}`}
>
양력
@@ -151,8 +151,8 @@ export default function SajuForm() {
onClick={() => setCalendarType('lunar')}
className={`px-6 py-3 rounded-xl font-bold transition ${
calendarType === 'lunar'
? 'bg-[#1a56db] text-white shadow-lg'
: 'bg-white border-2 border-[#dbe8ff] text-[#04102b] hover:border-[#1a56db]'
? 'bg-[var(--jsm-accent)] text-white shadow-lg'
: 'bg-white border-2 border-[var(--jsm-line)] text-[var(--jsm-ink)] hover:border-[var(--jsm-accent)]'
}`}
>
음력
@@ -165,7 +165,7 @@ export default function SajuForm() {
type="checkbox"
checked={isLeapMonth}
onChange={(e) => setIsLeapMonth(e.target.checked)}
className="w-4 h-4 text-[#1a56db] border-gray-300 rounded focus:ring-[#1a56db]"
className="w-4 h-4 text-[var(--jsm-accent)] border-gray-300 rounded focus:ring-[var(--jsm-accent)]"
/>
<span>윤달</span>
</label>
@@ -175,7 +175,7 @@ export default function SajuForm() {
{/* 성별 선택 */}
<div>
<label className="block text-left text-sm font-bold text-[#04102b] mb-3">
<label className="block text-left text-sm font-bold text-[var(--jsm-ink)] mb-3">
성별
</label>
<div className="grid grid-cols-2 gap-3">
@@ -184,8 +184,8 @@ export default function SajuForm() {
onClick={() => setGender('male')}
className={`px-6 py-3 rounded-xl font-bold transition ${
gender === 'male'
? 'bg-[#1a56db] text-white shadow-lg'
: 'bg-white border-2 border-[#dbe8ff] text-[#04102b] hover:border-[#1a56db]'
? 'bg-[var(--jsm-accent)] text-white shadow-lg'
: 'bg-white border-2 border-[var(--jsm-line)] text-[var(--jsm-ink)] hover:border-[var(--jsm-accent)]'
}`}
>
남성
@@ -195,8 +195,8 @@ export default function SajuForm() {
onClick={() => setGender('female')}
className={`px-6 py-3 rounded-xl font-bold transition ${
gender === 'female'
? 'bg-[#1a56db] text-white shadow-lg'
: 'bg-white border-2 border-[#dbe8ff] text-[#04102b] hover:border-[#1a56db]'
? 'bg-[var(--jsm-accent)] text-white shadow-lg'
: 'bg-white border-2 border-[var(--jsm-line)] text-[var(--jsm-ink)] hover:border-[var(--jsm-accent)]'
}`}
>
여성
@@ -207,7 +207,7 @@ export default function SajuForm() {
{/* 제출 버튼 */}
<button
type="submit"
className="w-full bg-gradient-to-r from-[#1a56db] to-[#7c3aed] hover:from-[#1e4fc2] hover:to-[#6d28d9] text-white py-4 rounded-xl text-lg font-bold transition shadow-lg hover:shadow-xl hover:scale-[1.02]"
className="w-full bg-[var(--jsm-accent)] hover:bg-[var(--jsm-accent-hover)] text-white py-4 rounded-xl text-lg font-bold transition shadow-lg hover:shadow-xl hover:scale-[1.02]"
>
내 사주 보기 →
</button>

13
app/work/saju/input/page.tsx
View File

@@ -2,13 +2,12 @@ import SajuForm from '@/app/work/saju/components/SajuForm';
export default function SajuInputPage() {
return (
<div className="min-h-full bg-[#f0f5ff]">
<div className="min-h-full bg-[var(--jsm-bg)]">
{/* Hero */}
<div className="relative overflow-hidden px-6 py-12"
style={{ background: '#04102b', backgroundImage: 'repeating-linear-gradient(135deg, rgba(255,255,255,0.012) 0px, rgba(255,255,255,0.012) 1px, transparent 1px, transparent 40px)' }}>
<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-violet-400/10 border border-violet-400/25 text-violet-300 text-xs font-semibold px-4 py-1.5 rounded-full mb-4 tracking-wide">
<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>
@@ -24,10 +23,10 @@ export default function SajuInputPage() {
{/* Form 영역 */}
<div className="px-6 py-10 max-w-2xl mx-auto">
<div className="bg-white rounded-2xl border border-[#dbe8ff] p-8 shadow-lg">
<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-gradient-to-b from-[#1a56db] to-[#7c3aed] rounded-full" />
<h2 className="font-bold text-[#04102b] text-base">기본 정보 입력</h2>
<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>