From 2d2895c9a45979d3acc9e13a83d35ff8d35227cc Mon Sep 17 00:00:00 2001
From: gahusb <bgg8988@gmail.com>
Date: Tue, 26 May 2026 08:32:35 +0900
Subject: [PATCH] =?UTF-8?q?feat(saju):=20=EC=82=AC=EC=A3=BC=ED=92=80?=
 =?UTF-8?q?=EC=9D=B4=20=EA=B2=B0=EA=B3=BC=20=ED=8E=98=EC=9D=B4=EC=A7=80=20?=
 =?UTF-8?q?(4=EA=B8=B0=EB=91=A5=20+=20=EC=98=A4=ED=96=89=20+=2012=EA=B0=9C?=
 =?UTF-8?q?=EC=9B=94=20+=20AI=2012=ED=95=AD=EB=AA=A9)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/saju/SajuResult.jsx | 138 +++++++++++++++++++++++++++++++++-
 1 file changed, 135 insertions(+), 3 deletions(-)

diff --git a/src/pages/saju/SajuResult.jsx b/src/pages/saju/SajuResult.jsx
index a37bac5..f878bc7 100644
--- a/src/pages/saju/SajuResult.jsx
+++ b/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>
   );
 }