feat(saju): HoryungMascot + SajuNav 공통 컴포넌트

This commit is contained in:
2026-05-26 08:25:37 +09:00
parent 8fd7f83586
commit c274a8f5e7
2 changed files with 38 additions and 0 deletions

View File

@@ -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'; }}
/>
);
}

View File

@@ -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>
);
}