From c274a8f5e79d191d85e90af0c51d5cd654f6fc2e Mon Sep 17 00:00:00 2001
From: gahusb <bgg8988@gmail.com>
Date: Tue, 26 May 2026 08:25:37 +0900
Subject: [PATCH] =?UTF-8?q?feat(saju):=20HoryungMascot=20+=20SajuNav=20?=
 =?UTF-8?q?=EA=B3=B5=ED=86=B5=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/saju/components/HoryungMascot.jsx | 22 +++++++++++++++++++++
 src/pages/saju/components/SajuNav.jsx       | 16 +++++++++++++++
 2 files changed, 38 insertions(+)
 create mode 100644 src/pages/saju/components/HoryungMascot.jsx
 create mode 100644 src/pages/saju/components/SajuNav.jsx

diff --git a/src/pages/saju/components/HoryungMascot.jsx b/src/pages/saju/components/HoryungMascot.jsx
new file mode 100644
index 0000000..5244592
--- /dev/null
+++ b/src/pages/saju/components/HoryungMascot.jsx
@@ -0,0 +1,22 @@
+import React from 'react';
+
+const POSE_TO_FILE = {
+  front: '/images/saju/horyung/horyung-front.png',
+  bust: '/images/saju/horyung/horyung-bust.png',
+  greeting: '/images/saju/horyung/horyung-greeting.png',
+  thinking: '/images/saju/horyung/horyung-thinking.png',
+  pointing: '/images/saju/horyung/horyung-pointing.png',
+  happy: '/images/saju/horyung/horyung-happy.png',
+};
+
+export default function HoryungMascot({ pose = 'front', size = 'lg', className = '' }) {
+  const src = POSE_TO_FILE[pose] || POSE_TO_FILE.front;
+  return (
+    <img
+      src={src}
+      alt="호령"
+      className={`horyung-mascot horyung-mascot--${size} ${className}`}
+      onError={(e) => { e.target.style.visibility = 'hidden'; }}
+    />
+  );
+}
diff --git a/src/pages/saju/components/SajuNav.jsx b/src/pages/saju/components/SajuNav.jsx
new file mode 100644
index 0000000..594b00e
--- /dev/null
+++ b/src/pages/saju/components/SajuNav.jsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import { Link, NavLink } from 'react-router-dom';
+
+export default function SajuNav() {
+  return (
+    <nav className="saju-nav" aria-label="호령 사주">
+      <Link to="/saju" className="saju-nav__logo">호령사주</Link>
+      <ul className="saju-nav__links">
+        <li><NavLink to="/saju/today">오늘의 운세</NavLink></li>
+        <li><NavLink to="/saju/compatibility">궁합보기</NavLink></li>
+        <li><NavLink to="/saju/result">사주풀이</NavLink></li>
+      </ul>
+      <Link to="/saju" className="saju-nav__cta">사주풀이 시작하기</Link>
+    </nav>
+  );
+}