From a6d52c9725a52c5c9d40bcd0e2727e8aeaab1826 Mon Sep 17 00:00:00 2001
From: gahusb <bgg8988@gmail.com>
Date: Wed, 27 May 2026 02:02:05 +0900
Subject: [PATCH] =?UTF-8?q?feat(saju-ui-v2):=20Mascot.jsx=20+=207=20varian?=
 =?UTF-8?q?t=20=EB=A7=A4=ED=95=91=20test?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/saju/_shell/Mascot.jsx      | 18 ++++++++++++++++++
 src/pages/saju/_shell/Mascot.test.jsx | 16 ++++++++++++++++
 2 files changed, 34 insertions(+)
 create mode 100644 src/pages/saju/_shell/Mascot.jsx
 create mode 100644 src/pages/saju/_shell/Mascot.test.jsx

diff --git a/src/pages/saju/_shell/Mascot.jsx b/src/pages/saju/_shell/Mascot.jsx
new file mode 100644
index 0000000..61a42ea
--- /dev/null
+++ b/src/pages/saju/_shell/Mascot.jsx
@@ -0,0 +1,18 @@
+import React from 'react';
+
+const VARIANT_TO_SRC = {
+  full:     '/images/saju/horyung/horyung-main.png',
+  head:     '/images/saju/horyung/horyung-bust.png',
+  upper:    '/images/saju/horyung/horyung-front.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 Mascot({ variant = 'full', size = 200, style = {}, alt = '호령' }) {
+  const src = VARIANT_TO_SRC[variant] || VARIANT_TO_SRC.full;
+  return (
+    <img src={src} alt={alt} width={size} loading="lazy" style={{ display: 'block', ...style }} />
+  );
+}
diff --git a/src/pages/saju/_shell/Mascot.test.jsx b/src/pages/saju/_shell/Mascot.test.jsx
new file mode 100644
index 0000000..0bc404b
--- /dev/null
+++ b/src/pages/saju/_shell/Mascot.test.jsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import Mascot from './Mascot';
+
+describe('Mascot', () => {
+  const VARIANTS = ['full', 'head', 'upper', 'greeting', 'thinking', 'pointing', 'happy'];
+  VARIANTS.forEach((v) => {
+    it(`renders variant=${v} with correct src`, () => {
+      const { container } = render(<Mascot variant={v} size={100} />);
+      const img = container.querySelector('img');
+      expect(img).toBeTruthy();
+      expect(img.getAttribute('src')).toContain('/images/saju/horyung/');
+    });
+  });
+});