Skip to content

Conversation

@suuuuya
Copy link
Contributor

@suuuuya suuuuya commented Sep 26, 2025

📄 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-[컬러] 등 상황에 맞게 커스텀해서 사용가능합니다!

📸 스크린샷 (선택사항)

스토리북 스크린샷

스크린샷 2025-09-26 오후 12 34 47 스크린샷 2025-09-26 오후 12 35 06 스크린샷 2025-09-26 오후 12 34 23

💬 참고 사항

  • 아이콘 이미지는 /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] ..."/>

@suuuuya suuuuya self-assigned this Sep 26, 2025
@suuuuya suuuuya added the ✨ Feature 기능 개발 label Sep 26, 2025
@suuuuya suuuuya added this to WHYNE Sep 26, 2025
@suuuuya suuuuya added the 🎨 Design UI/UX, 디자인 변경 label Sep 26, 2025
@vercel
Copy link

vercel bot commented Sep 26, 2025

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

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

@suuuuya suuuuya moved this to 백로그 in WHYNE Sep 26, 2025
@suuuuya suuuuya moved this from 백로그 to 진행 중 in WHYNE Sep 26, 2025
@suuuuya suuuuya moved this from 진행 중 to 검토 중 in WHYNE Sep 26, 2025
@suuuuya suuuuya merged commit 208399c into develop Sep 26, 2025
3 checks passed
@suuuuya suuuuya deleted the design/icon-component branch September 26, 2025 08:07
@github-project-automation github-project-automation bot moved this from 검토 중 to 완료 in WHYNE Sep 26, 2025
@suuuuya suuuuya linked an issue Oct 16, 2025 that may be closed by this pull request
4 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

🎨 Design UI/UX, 디자인 변경 ✨ Feature 기능 개발

Projects

Status: 완료

Development

Successfully merging this pull request may close these issues.

[Feature] 아이콘 컴포넌트 개발

3 participants