사용자 인터페이스(UI)에서 공통적으로 사용될 컴포넌트를 설계하고, Storybook을 활용하여 문서화 및 테스트를 진행

이를 통해 유지보수성을 높이고, 다양한 화면 환경에서 일관된 UI를 제공할 수 있도록 함.

1️⃣ NPM 배포 UI 컴포넌트 개발

🔹 주요 내용

• 유저, 관리자, 숙소 운영자가 공통으로 사용하는 UI 컴포넌트 구축
• 프로젝트 전반에서 재사용 가능한 컴포넌트로 유지보수성 향상
• 공통 스타일을 유지하면서도 type과 props를 활용하여 다양한 형태(사이즈, 색상, 키워드)에 유연하게 대응할 수 있도록 확장성 고려

🔹 대표적인 컴포넌트 사례

✅ 키워드 뱃지 (BadgeIcon)

• 숙소의 특성을 한눈에 알아볼 수 있도록 키워드와 아이콘을 조합한 배지를 개발
• KEYWORDS 객체를 활용하여 각 키워드에 맞는 아이콘과 색상을 매핑
• BadgeIconBase 컴포넌트를 확장하여 다양한 스타일의 배지를 적용 가능

🔹 관련 코드 (핵심 부분)