From 0d1e8b3c2d2f586aa918c3b4d77d845f930f3353 Mon Sep 17 00:00:00 2001 From: gahusb Date: Wed, 27 May 2026 07:43:12 +0900 Subject: [PATCH] =?UTF-8?q?feat(saju-ui-v2):=20SajuResult.jsx=20v2=20?= =?UTF-8?q?=EC=A7=84=EC=9E=85=20+=20Empty/Loading/Error=20state?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/saju/SajuResult.jsx | 187 +++++++++++----------------------- 1 file changed, 59 insertions(+), 128 deletions(-) diff --git a/src/pages/saju/SajuResult.jsx b/src/pages/saju/SajuResult.jsx index f878bc7..853a47d 100644 --- a/src/pages/saju/SajuResult.jsx +++ b/src/pages/saju/SajuResult.jsx @@ -1,142 +1,73 @@ 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 './_shell/tokens.css'; +import './_shell/shell.css'; +import useViewportMode from './_shell/useViewportMode'; import useSajuReading from './hooks/useSajuReading'; +import BottomNav from './_shell/BottomNav'; +import DesktopHeader from './_shell/DesktopHeader'; +import Mascot from './_shell/Mascot'; +import MascotBubble from './_shell/MascotBubble'; +import PrimaryButton from './_shell/PrimaryButton'; +import GhostButton from './_shell/GhostButton'; +import SajuMobile from './views/saju.mobile.jsx'; +import SajuDesktop from './views/saju.desktop.jsx'; export default function SajuResult() { + const mode = useViewportMode(); const [params] = useSearchParams(); const rid = params.get('rid'); const ridNum = rid ? parseInt(rid, 10) : null; const { data, loading, error } = useSajuReading(ridNum); - if (!rid) { - return ( -
- -
- -

사주 정보가 없어요

-

먼저 메인 페이지에서 사주를 입력해주세요.

- 메인으로 가기 -
-
- ); - } - - if (loading) { - return ( -
- -
- -

호령이 사주를 풀어보는 중...

-
-
- ); - } - - if (error || !data) { - return ( -
- -
-

사주 결과를 찾을 수 없어요

-

{error || '다시 입력해주세요.'}

- 메인으로 가기 -
-
- ); - } - - const saju = data.saju_data; - const analysis = data.analysis_data; - const interp = data.interpretation_json; - const monthlyFlow = data.monthly_flow; - return ( -
- - -
-
- -
-
-

사주풀이

-

- {data.birth_year}년 {data.birth_month}월 {data.birth_day}일 - {data.birth_hour !== null ? ` ${data.birth_hour}시` : ' (시간 미상)'} ·{' '} - {data.gender === 'male' ? '남' : '여'} ·{' '} - {data.calendar_type === 'lunar' ? '음력' : '양력'} -

- {interp?.summary && ( - - )} -
-
- -
-
-

사주 4기둥

- -
- -
-

오행 분석

- -
- - {analysis?.day_master_strength && ( -
-

일간 강도

-
-

- {analysis.day_master_strength.result} · 점수 {analysis.day_master_strength.score}
- {(analysis.day_master_strength.reasons || []).join(' · ')} -

-
-
- )} - - {monthlyFlow && ( -
-

12개월 운세 흐름

- -
- )} - - {interp?.items && ( -
-

AI 12항목 해석

- -
- )} - - {interp?.advice && ( -
-

호령의 조언

- -
- )} -
- -
- - ☀ - 오늘의 운세 - - - 📖 - 새 사주 보기 - -
+
+ {mode === 'desktop' && } + {!rid && } + {rid && loading && } + {rid && error && } + {rid && data && (mode === 'desktop' + ? + : + )} + {mode === 'mobile' && }
); } + +function EmptyState() { + return ( +
+ + + + 사주 입력하러 가기 + +
+ ); +} + +function LoadingState() { + return ( +
+ + +
+ ); +} + +function ErrorState() { + return ( +
+ + + window.location.reload()}>다시 시도 +
+ ); +}