icon (1) 썸네일형 리스트형 [리팩토링] Icon 컴포넌트 리팩토링 이번엔 프로젝트에서 많이 사용하는 Icon 컴포넌트를 리팩토링한 경험을 공유해 보려고 합니다.SVG 아이콘을 쉽게 사용할 수 있도록 배경색과 반경 조정, 동적 사이즈 스케일링을 추가했습니다! 기존 코드 문제 📖기존 Icon 컴포넌트는 각각 아이콘을 렌더링 하는 기능만 가지고 있었습니다. ❗문제점 1. 중복되는 코드가 너무 많았고 유지보수가 어려운 점2. 사용자가 `배경색`와 `반경 설정`을 하려면 새로운 컴포넌트를 생성해서 사용해야 한다는 점에서 일관적인 스타일링의 어려움3. SVG 사이즈 조정 시 배경만 커지는 문제 다양한 사이즈를 사용하는 UI에서 큰 문제였습니다. 리팩토링 📖기존 Icon 컴포넌트// AlbumIcon.tsxexport const AlbumIcon = () => { retu.. 이전 1 다음
