diff --git a/src/pages/saju/Today.jsx b/src/pages/saju/Today.jsx new file mode 100644 index 0000000..5d7aed5 --- /dev/null +++ b/src/pages/saju/Today.jsx @@ -0,0 +1,138 @@ +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 FortuneRing from './components/FortuneRing'; +import ScoreCard from './components/ScoreCard'; +import LuckyBox from './components/LuckyBox'; +import HoryungQuote from './components/HoryungQuote'; +import useSajuReading from './hooks/useSajuReading'; + +export default function Today() { + 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 scores = data.fortune_scores; + const lucky = data.lucky; + + return ( +
+ + +
+
+ +
+
+

오늘의 운세

+

+ 오늘 하루 어떤 흐름이 호령을 따라올지 확인해보세요. +

+
+
+ +
+ {scores && ( +
+
+

오늘의 종합점

+ +
+
+ + + + +
+
+ )} + + {lucky && ( +
+

오늘의 럭키

+ +
+ )} + + {(lucky?.good_signs?.length || lucky?.warnings?.length) ? ( +
+ {lucky.good_signs?.length > 0 && ( +
+ ✦ 행운 알림 +
    + {lucky.good_signs.map((s, i) =>
  • {s}
  • )} +
+
+ )} + {lucky.warnings?.length > 0 && ( +
+ ⚠ 주의사항 +
    + {lucky.warnings.map((s, i) =>
  • {s}
  • )} +
+
+ )} +
+ ) : null} + + +
+ +
+ + 📖 + 사주풀이 보기 + + + + 궁합 (준비 중) + +
+
+ ); +} diff --git a/src/routes.jsx b/src/routes.jsx index e744f02..6d3a90a 100644 --- a/src/routes.jsx +++ b/src/routes.jsx @@ -37,6 +37,7 @@ const TarotReading = lazy(() => import('./pages/tarot/Reading')); const TarotHistory = lazy(() => import('./pages/tarot/History')); const Saju = lazy(() => import('./pages/saju/Saju')); const SajuResult = lazy(() => import('./pages/saju/SajuResult')); +const SajuToday = lazy(() => import('./pages/saju/Today')); const Compatibility = lazy(() => import('./pages/saju/Compatibility')); const CompatibilityResult = lazy(() => import('./pages/saju/CompatibilityResult')); @@ -262,6 +263,10 @@ export const appRoutes = [ path: 'saju/result', element: , }, + { + path: 'saju/today', + element: , + }, { path: 'saju/compatibility', element: ,