From 1bf1f1405b95f609a2e8a715394ef2a7ed367706 Mon Sep 17 00:00:00 2001
From: gahusb <bgg8988@gmail.com>
Date: Wed, 27 May 2026 02:12:25 +0900
Subject: [PATCH] =?UTF-8?q?feat(saju-ui-v2):=20Saju.jsx=20=E2=80=94=20useV?=
 =?UTF-8?q?iewportMode=20=EB=B6=84=EA=B8=B0=20+=20Home=20v2=20=EC=A7=84?=
 =?UTF-8?q?=EC=9E=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/saju/Saju.jsx | 85 ++++++-----------------------------------
 1 file changed, 12 insertions(+), 73 deletions(-)

diff --git a/src/pages/saju/Saju.jsx b/src/pages/saju/Saju.jsx
index 671690c..f9b63c6 100644
--- a/src/pages/saju/Saju.jsx
+++ b/src/pages/saju/Saju.jsx
@@ -1,80 +1,19 @@
 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';
+import './_shell/tokens.css';
+import './_shell/shell.css';
+import useViewportMode from './_shell/useViewportMode';
+import BottomNav from './_shell/BottomNav';
+import DesktopHeader from './_shell/DesktopHeader';
+import HomeMobile from './views/home.mobile.jsx';
+import HomeDesktop from './views/home.desktop.jsx';
 
 export default function Saju() {
-  const { form, handleChange, handleSubmit, loading, error } = useSajuForm();
-
+  const mode = useViewportMode();
   return (
-    <div className="saju-page saju-page--main">
-      <SajuNav />
-
-      <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 className="saju-v2">
+      {mode === 'desktop' ? <DesktopHeader /> : null}
+      {mode === 'desktop' ? <HomeDesktop /> : <HomeMobile />}
+      {mode === 'mobile' ? <BottomNav theme="navy" /> : null}
     </div>
   );
 }