feat(saju-ui-v2): Saju.jsx — useViewportMode 분기 + Home v2 진입

src/pages/saju/Saju.jsx

@@ -1,80 +1,19 @@
 import React from 'react';
-import './Saju.css';
+import './_shell/tokens.css';
-import SajuNav from './components/SajuNav';
+import './_shell/shell.css';
-import HoryungMascot from './components/HoryungMascot';
+import useViewportMode from './_shell/useViewportMode';
-import SajuInputForm from './components/SajuInputForm';
+import BottomNav from './_shell/BottomNav';
-import ActionCard from './components/ActionCard';
+import DesktopHeader from './_shell/DesktopHeader';
-import useSajuForm from './hooks/useSajuForm';
+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">
+    <div className="saju-v2">
-      <SajuNav />
+      {mode === 'desktop' ? <DesktopHeader /> : null}
-
+      {mode === 'desktop' ? <HomeDesktop /> : <HomeMobile />}
-      <section className="saju-hero">
+      {mode === 'mobile' ? <BottomNav theme="navy" /> : null}
-        <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>
   );
 }