feat(saju): 사주풀이 결과 페이지 (4기둥 + 오행 + 12개월 + AI 12항목)

src/pages/saju/SajuResult.jsx

@@ -1,10 +1,142 @@
 import React from 'react';
+import { useSearchParams, Link } from 'react-router-dom';
+import './Saju.css';
+import SajuNav from './components/SajuNav';
+import HoryungMascot from './components/HoryungMascot';
+import SajuPillars from './components/SajuPillars';
+import ElementBarChart from './components/ElementBarChart';
+import InterpretAccordion from './components/InterpretAccordion';
+import HoryungQuote from './components/HoryungQuote';
+import MonthlyFlow from './components/MonthlyFlow';
+import useSajuReading from './hooks/useSajuReading';
 
 export default function SajuResult() {
+  const [params] = useSearchParams();
+  const rid = params.get('rid');
+  const ridNum = rid ? parseInt(rid, 10) : null;
+  const { data, loading, error } = useSajuReading(ridNum);
+
+  if (!rid) {
+    return (
+      <div className="saju-page">
+        <SajuNav />
+        <div className="saju-stub">
+          <HoryungMascot pose="thinking" />
+          <h2 className="saju-h2">사주 정보가 없어요</h2>
+          <p>먼저 메인 페이지에서 사주를 입력해주세요.</p>
+          <Link to="/saju">메인으로 가기</Link>
+        </div>
+      </div>
+    );
+  }
+
+  if (loading) {
+    return (
+      <div className="saju-page">
+        <SajuNav />
+        <div className="saju-stub">
+          <HoryungMascot pose="thinking" />
+          <p>호령이 사주를 풀어보는 중...</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (error || !data) {
+    return (
+      <div className="saju-page">
+        <SajuNav />
+        <div className="saju-stub">
+          <h2 className="saju-h2">사주 결과를 찾을 수 없어요</h2>
+          <p>{error || '다시 입력해주세요.'}</p>
+          <Link to="/saju">메인으로 가기</Link>
+        </div>
+      </div>
+    );
+  }
+
+  const saju = data.saju_data;
+  const analysis = data.analysis_data;
+  const interp = data.interpretation_json;
+  const monthlyFlow = data.monthly_flow;
+
   return (
-    <div style={{ padding: '2rem', color: '#fff' }}>
-      <h1>사주 분석 결과</h1>
-      <p>UI 시안 적용 대기 중...</p>
+    <div className="saju-page">
+      <SajuNav />
+
+      <section className="saju-hero">
+        <div className="saju-hero__left">
+          <HoryungMascot pose="thinking" size="lg" />
+        </div>
+        <div className="saju-hero__right">
+          <h1 className="saju-h1">사주풀이</h1>
+          <p className="saju-sub">
+            {data.birth_year}년 {data.birth_month}월 {data.birth_day}일
+            {data.birth_hour !== null ? ` ${data.birth_hour}시` : ' (시간 미상)'} ·{' '}
+            {data.gender === 'male' ? '남' : '여'} ·{' '}
+            {data.calendar_type === 'lunar' ? '음력' : '양력'}
+          </p>
+          {interp?.summary && (
+            <HoryungQuote pose="thinking" text={interp.summary} />
+          )}
+        </div>
+      </section>
+
+      <section style={{ padding: '0 2rem', maxWidth: 1400, margin: '0 auto', display: 'grid', gap: '2rem' }}>
+        <div>
+          <h2 className="saju-h2" style={{ marginBottom: '1rem' }}>사주 4기둥</h2>
+          <SajuPillars saju={saju} />
+        </div>
+
+        <div>
+          <h2 className="saju-h2" style={{ marginBottom: '1rem' }}>오행 분석</h2>
+          <ElementBarChart scores={analysis?.element_scores} />
+        </div>
+
+        {analysis?.day_master_strength && (
+          <div>
+            <h2 className="saju-h2" style={{ marginBottom: '1rem' }}>일간 강도</h2>
+            <div className="saju-quote-box" style={{ maxWidth: 'none' }}>
+              <p style={{ margin: 0 }}>
+                <strong>{analysis.day_master_strength.result}</strong> · 점수 {analysis.day_master_strength.score}<br />
+                {(analysis.day_master_strength.reasons || []).join(' · ')}
+              </p>
+            </div>
+          </div>
+        )}
+
+        {monthlyFlow && (
+          <div>
+            <h2 className="saju-h2" style={{ marginBottom: '1rem' }}>12개월 운세 흐름</h2>
+            <MonthlyFlow flow={monthlyFlow} />
+          </div>
+        )}
+
+        {interp?.items && (
+          <div>
+            <h2 className="saju-h2" style={{ marginBottom: '1rem' }}>AI 12항목 해석</h2>
+            <InterpretAccordion items={interp.items} />
+          </div>
+        )}
+
+        {interp?.advice && (
+          <div>
+            <h2 className="saju-h2" style={{ marginBottom: '1rem' }}>호령의 조언</h2>
+            <HoryungQuote pose="happy" text={interp.advice} />
+          </div>
+        )}
+      </section>
+
+      <section style={{ padding: '3rem 2rem', display: 'flex', gap: '1rem', justifyContent: 'center' }}>
+        <Link to={`/saju/today?rid=${rid}`} className="saju-action-card saju-action-card--today" style={{ maxWidth: 240 }}>
+          <span className="saju-action-card__icon">☀</span>
+          <span className="saju-action-card__title">오늘의 운세</span>
+        </Link>
+        <Link to="/saju" className="saju-action-card saju-action-card--saju" style={{ maxWidth: 240 }}>
+          <span className="saju-action-card__icon">📖</span>
+          <span className="saju-action-card__title">새 사주 보기</span>
+        </Link>
+      </section>
     </div>
   );
 }