feat(saju-ui-v2): Mascot.jsx + 7 variant 매핑 test
This commit is contained in:
18
src/pages/saju/_shell/Mascot.jsx
Normal file
18
src/pages/saju/_shell/Mascot.jsx
Normal file
@@ -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 }} />
|
||||||
|
);
|
||||||
|
}
|
||||||
16
src/pages/saju/_shell/Mascot.test.jsx
Normal file
16
src/pages/saju/_shell/Mascot.test.jsx
Normal file
@@ -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/');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
Reference in New Issue
Block a user