feat(saju-ui-v2): Compatibility.jsx — placeholder → 두 사람 입력 폼 + compat API

src/pages/saju/Compatibility.jsx

@@ -1,19 +1,55 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
-import './Saju.css';
-import SajuNav from './components/SajuNav';
-import HoryungMascot from './components/HoryungMascot';
+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import './_shell/tokens.css';
+import './_shell/shell.css';
+import useViewportMode from './_shell/useViewportMode';
+import BottomNav from './_shell/BottomNav';
+import DesktopHeader from './_shell/DesktopHeader';
+import MatchMobile from './views/match.mobile.jsx';
+import MatchDesktop from './views/match.desktop.jsx';
+import { compatInterpret } from '../../api';
+
+const EMPTY_PERSON = {
+  name: '', year: '', month: '', day: '', hour: null,
+  gender: 'male', calendar_type: 'solar',
+};
 
 export default function Compatibility() {
+  const mode = useViewportMode();
+  const navigate = useNavigate();
+  const [personA, setPersonA] = useState({ ...EMPTY_PERSON });
+  const [personB, setPersonB] = useState({ ...EMPTY_PERSON });
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+
+  const handleSubmit = async (e) => {
+    if (e && e.preventDefault) e.preventDefault();
+    setError(null);
+    if (!personA.year || !personA.month || !personA.day ||
+        !personB.year || !personB.month || !personB.day) {
+      setError('두 사람의 생년월일을 입력해주세요.');
+      return;
+    }
+    setLoading(true);
+    try {
+      const res = await compatInterpret({ person_a: personA, person_b: personB });
+      navigate(`/saju/compatibility/result?cid=${res.reading_id}`);
+    } catch (err) {
+      setError(err?.message || '궁합 풀이에 실패했어요.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const props = {
+    personA, personB, onChangeA: setPersonA, onChangeB: setPersonB,
+    onSubmit: handleSubmit, loading, error,
+  };
   return (
-    <div className="saju-page">
-      <SajuNav />
-      <div className="saju-stub">
-        <HoryungMascot pose="thinking" />
-        <h2 className="saju-h2">궁합보기는 곧 만나요</h2>
-        <p>두 사람의 사주를 함께 풀어보는 기능을 준비 중입니다.<br />조금만 기다려 주세요.</p>
-        <Link to="/saju">메인으로 돌아가기</Link>
-      </div>
+    <div className="saju-v2">
+      {mode === 'desktop' && <DesktopHeader />}
+      {mode === 'desktop' ? <MatchDesktop {...props} /> : <MatchMobile {...props} />}
+      {mode === 'mobile' && <BottomNav theme="ivory" />}
     </div>
   );
 }