feat(saju): HoryungMascot + SajuNav 공통 컴포넌트
This commit is contained in:
22
src/pages/saju/components/HoryungMascot.jsx
Normal file
22
src/pages/saju/components/HoryungMascot.jsx
Normal 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'; }}
|
||||
/>
|
||||
);
|
||||
}
|
||||
16
src/pages/saju/components/SajuNav.jsx
Normal file
16
src/pages/saju/components/SajuNav.jsx
Normal 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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user