From d5be617eb26c88009a38f7ecc6dc437791f5c0bf Mon Sep 17 00:00:00 2001
From: gahusb <bgg8988@gmail.com>
Date: Fri, 3 Jul 2026 11:25:53 +0900
Subject: [PATCH] =?UTF-8?q?feat(phase2.6):=20=EC=82=AC=EC=A3=BC=20?=
 =?UTF-8?q?=EC=9E=85=EB=A0=A5=20=ED=99=94=EB=A9=B4=C2=B7=ED=8F=BC=20?=
 =?UTF-8?q?=EB=9D=BC=EC=9D=B4=ED=8A=B8=20=EC=9E=AC=EC=8A=A4=ED=82=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 app/work/saju/components/SajuForm.tsx | 36 +++++++++++++--------------
 app/work/saju/input/page.tsx          | 13 +++++-----
 2 files changed, 24 insertions(+), 25 deletions(-)

diff --git a/app/work/saju/components/SajuForm.tsx b/app/work/saju/components/SajuForm.tsx
index 7a76af1..b2c39c8 100644
--- a/app/work/saju/components/SajuForm.tsx
+++ b/app/work/saju/components/SajuForm.tsx
@@ -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>
diff --git a/app/work/saju/input/page.tsx b/app/work/saju/input/page.tsx
index 5fb5ac0..5fb0c86 100644
--- a/app/work/saju/input/page.tsx
+++ b/app/work/saju/input/page.tsx
@@ -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>