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