[#6] 아이콘 컴포넌트 개발

[suuuuya]

📄 PR 내용 요약

아이콘 타입, 사이즈, 색상을 선택해 사용할 수 있는 컴포넌트입니다.

✅ 작업 내용 상세

import Icon from "@/components/Icon";

{/* 기본값: size:md(24px) color:default("")(아이콘마다 기본색이 달라서 빈값으로 뒀어요) */}
<Icon icon="AlertIcon" />

{/* 직접 지정 */}
<Icon icon="AlertIcon" size="lg" color="primary" className="custom-class" />

• icon: 사용할 아이콘 이름 (스토리북 참고해주세요)
• size: 아이콘 크기 ("xs" | "sm" | "md" | "lg" | "xl" | "2xl")
• color: 아이콘 색상("default" | "primary" | "secondary" | "danger100" | "danger200" | "gray" | "black" | "white")
• className: pc:, tablet:, mobile:, w-[], h-[], text-[컬러] 등 상황에 맞게 커스텀해서 사용가능합니다!

📸 스크린샷 (선택사항)

스토리북 스크린샷

💬 참고 사항

• 아이콘 이미지는 /public/icons/..디렉토리에 추가했습니다.
• 아이콘 컴포넌트는 기본적으로 정사각형(1:1 비율) 아이콘만을 지원합니다.
  아이콘이 아닌 꾸밈용 백터(svg) 일러스트같은 경우에는 svgr로 직접 import해서 사용해서 사용하는게 좀 더 자연스럽지 않나 생각하는데.. 어떤 방법이 좋을까요?

import ImgName from "/public/[일러스트 이미지].svg";

<ImgName width={120} height={40} />

<ImgName className="pc:w-[120px] pc:h-[40px] ..."/>

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
wine	Ready	Preview	Comment	Sep 26, 2025 8:02am