Migrate saju service UI

src/pages/saju/CompatibilityResult.jsx

@@ -12,6 +12,7 @@ import MascotBubble from './_shell/MascotBubble';
 import OrnateFrame from './_shell/OrnateFrame';
 import PrimaryButton from './_shell/PrimaryButton';
 import GhostButton from './_shell/GhostButton';
+import MatchResultDesktop from './views/match-result.desktop.jsx';
 import { compatGetReading } from '../../api';
 
 export default function CompatibilityResult() {
@@ -35,9 +36,12 @@ export default function CompatibilityResult() {
   return (
     <div className="saju-v2">
       {mode === 'desktop' && <DesktopHeader />}
-      <main className="page paper-bg screen-in">
-        <TopRibbon color="#4E6B5C" opacity={0.6} />
-        <div style={{ maxWidth: mode === 'desktop' ? 720 : 'none', margin: '0 auto', padding: '24px 20px 40px' }}>
+      {result && mode === 'desktop' ? (
+        <MatchResultDesktop result={result} />
+      ) : (
+        <main className="page paper-bg screen-in">
+          <TopRibbon color="#4E6B5C" opacity={0.6} />
+          <div style={{ maxWidth: mode === 'desktop' ? 720 : 'none', margin: '0 auto', padding: '24px 20px 40px' }}>
           {!cid && (
             <>
               <TitleBlock title="궁합 결과" gold="#4E6B5C" />
@@ -100,8 +104,9 @@ export default function CompatibilityResult() {
               )}
             </>
           )}
-        </div>
-      </main>
+          </div>
+        </main>
+      )}
       {mode === 'mobile' && <BottomNav theme="ivory" />}
     </div>
   );