feat(phase2.5): 사주 섹션 인라인 SVG 아이콘 세트(SajuIcons)
- SajuIcon 컴포넌트 및 12개 stroke 기반 SVG 아이콘 정의 - SECTION_ICON_ORDER 배열로 섹션 순서 관리(기질·오행·지지·신살·재물·직업·애정·건강·대운·세운·황금기·종합) - LottoIcon 추가 export - currentColor 사용으로 색상 커스터마이징 가능 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
45
app/work/saju/result/SajuIcons.tsx
Normal file
45
app/work/saju/result/SajuIcons.tsx
Normal file
@@ -0,0 +1,45 @@
|
|||||||
|
import type { SVGProps } from 'react';
|
||||||
|
|
||||||
|
export type SajuIconName =
|
||||||
|
| 'trait' | 'element' | 'branch' | 'sinsal' | 'wealth' | 'career'
|
||||||
|
| 'love' | 'health' | 'daeun' | 'seun' | 'golden' | 'summary';
|
||||||
|
|
||||||
|
// SECTION_META 순서(기질·오행·지지·신살·재물·직업·애정·건강·대운·세운·황금기·종합)와 1:1
|
||||||
|
export const SECTION_ICON_ORDER: SajuIconName[] = [
|
||||||
|
'trait', 'element', 'branch', 'sinsal', 'wealth', 'career',
|
||||||
|
'love', 'health', 'daeun', 'seun', 'golden', 'summary',
|
||||||
|
];
|
||||||
|
|
||||||
|
const PATHS: Record<SajuIconName, string> = {
|
||||||
|
trait: 'M12 3l2.2 5.6L20 9l-4.5 3.9L17 19l-5-3-5 3 1.5-6.1L4 9l5.8-.4z', // 별/기질
|
||||||
|
element: 'M12 3v18M3 12h18', // 균형/오행
|
||||||
|
branch: 'M7 7h10v10M7 7v10h10', // 연결/지지
|
||||||
|
sinsal: 'M12 2l2 7h7l-5.5 4 2 7L12 17l-5.5 3 2-7L3 9h7z', // 신살(sparkle)
|
||||||
|
wealth: 'M12 4a8 4 0 1 0 0 8a8 4 0 1 0 0-8M4 8v8a8 4 0 0 0 16 0V8', // 재물(coin stack)
|
||||||
|
career: 'M4 8h16v11H4zM9 8V5h6v3', // 직업(가방)
|
||||||
|
love: 'M12 20s-7-4.4-7-9a4 4 0 0 1 7-2.6A4 4 0 0 1 19 11c0 4.6-7 9-7 9z', // 애정(하트)
|
||||||
|
health: 'M3 12h4l2-5 3 10 2-6 2 1h5', // 건강(맥박)
|
||||||
|
daeun: 'M4 20L20 4M14 4h6v6', // 대운(길/화살)
|
||||||
|
seun: 'M4 7h16v13H4zM4 11h16M8 3v4M16 3v4', // 세운(달력)
|
||||||
|
golden: 'M6 9a6 6 0 1 0 12 0a6 6 0 1 0-12 0M9 15l-1 6 4-2 4 2-1-6', // 황금기(메달)
|
||||||
|
summary: 'M6 3h9l3 3v15H6zM9 9h6M9 13h6M9 17h4', // 종합(문서)
|
||||||
|
};
|
||||||
|
|
||||||
|
export function SajuIcon({ name, className }: { name: SajuIconName; className?: string }) {
|
||||||
|
return (
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.6}
|
||||||
|
strokeLinecap="round" strokeLinejoin="round" className={className} aria-hidden>
|
||||||
|
<path d={PATHS[name]} />
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function LottoIcon(props: SVGProps<SVGSVGElement>) {
|
||||||
|
return (
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.6}
|
||||||
|
strokeLinecap="round" strokeLinejoin="round" aria-hidden {...props}>
|
||||||
|
<circle cx="12" cy="12" r="8" />
|
||||||
|
<path d="M12 8v8M8 12h8" />
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user