From 2dd92d025f7a4f99b5a16cc4372d0fae0e659d94 Mon Sep 17 00:00:00 2001
From: gahusb <bgg8988@gmail.com>
Date: Tue, 26 May 2026 08:28:46 +0900
Subject: [PATCH] =?UTF-8?q?feat(saju):=20=EB=A9=94=EC=9D=B8=20=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EC=A0=95=EC=8B=9D=20=EA=B5=AC=ED=98=84=20?=
 =?UTF-8?q?(=ED=98=B8=EB=A0=B9=20hero=20+=203=20ActionCard=20+=20=EC=9E=85?=
 =?UTF-8?q?=EB=A0=A5=20=ED=8F=BC)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/saju/Saju.jsx | 76 +++++++++++++++++++++++++++++++++++++++--
 1 file changed, 73 insertions(+), 3 deletions(-)

diff --git a/src/pages/saju/Saju.jsx b/src/pages/saju/Saju.jsx
index b40e443..671690c 100644
--- a/src/pages/saju/Saju.jsx
+++ b/src/pages/saju/Saju.jsx
@@ -1,10 +1,80 @@
 import React from 'react';
+import './Saju.css';
+import SajuNav from './components/SajuNav';
+import HoryungMascot from './components/HoryungMascot';
+import SajuInputForm from './components/SajuInputForm';
+import ActionCard from './components/ActionCard';
+import useSajuForm from './hooks/useSajuForm';
 
 export default function Saju() {
+  const { form, handleChange, handleSubmit, loading, error } = useSajuForm();
+
   return (
-    <div style={{ padding: '2rem', color: '#fff' }}>
-      <h1>사주 분석</h1>
-      <p>UI 시안 적용 대기 중...</p>
+    <div className="saju-page saju-page--main">
+      <SajuNav />
+
+      <section className="saju-hero">
+        <div className="saju-hero__left">
+          <HoryungMascot pose="greeting" size="lg" />
+          <div className="saju-quote-box">
+            <p style={{ margin: 0 }}>
+              전통 사주명리학 + AI 인사이트로<br />
+              당신의 오늘을 풀어드립니다
+            </p>
+          </div>
+        </div>
+        <div className="saju-hero__right">
+          <h1 className="saju-h1">호령이 반갑게<br />맞이하는 오늘의 사주</h1>
+          <p className="saju-sub">
+            오랜 지혜와 정성으로 다듬어진 사주명리학을 호령이 풀어드립니다.<br />
+            당신의 사주 8자에 담긴 운명을 만나보세요.
+          </p>
+
+          <div className="saju-action-cards">
+            <ActionCard
+              to="/saju/today"
+              icon="today"
+              title="오늘의 운세"
+              desc="오늘 하루의 흐름을 확인하세요"
+              variant="today"
+            />
+            <ActionCard
+              to="/saju/compatibility"
+              icon="heart"
+              title="궁합보기"
+              desc="두 사람의 인연을 풀어보세요"
+              variant="gunghab"
+              disabled
+            />
+            <ActionCard
+              to="/saju/result"
+              icon="book"
+              title="사주풀이"
+              desc="당신의 사주 8자를 자세히"
+              variant="saju"
+            />
+          </div>
+        </div>
+      </section>
+
+      <section className="saju-bottom">
+        <div>
+          <h2 className="saju-h2" style={{ color: 'var(--saju-cream)' }}>
+            오늘의 운세 미리보기
+          </h2>
+          <p style={{ color: 'var(--saju-cream)', opacity: 0.7, lineHeight: 1.6 }}>
+            사주 8자를 입력하시면 오늘의 종합점수, 4가지 카테고리 분석, 럭키 정보를 한 번에<br />
+            확인하실 수 있습니다.
+          </p>
+        </div>
+        <SajuInputForm
+          form={form}
+          onChange={handleChange}
+          onSubmit={handleSubmit}
+          loading={loading}
+          error={error}
+        />
+      </section>
     </div>
   );
 }