feat(saju): 메인 페이지 정식 구현 (호령 hero + 3 ActionCard + 입력 폼)

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' }}>
+    <div className="saju-page saju-page--main">
-      <h1>사주 분석</h1>
+      <SajuNav />
-      <p>UI 시안 적용 대기 중...</p>
+
+      <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>
   );
 }