재사용 (2) 썸네일형 리스트형 [리팩토링] Icon 컴포넌트 리팩토링 이번엔 프로젝트에서 많이 사용하는 Icon 컴포넌트를 리팩토링한 경험을 공유해 보려고 합니다.SVG 아이콘을 쉽게 사용할 수 있도록 배경색과 반경 조정, 동적 사이즈 스케일링을 추가했습니다! 기존 코드 문제 📖기존 Icon 컴포넌트는 각각 아이콘을 렌더링 하는 기능만 가지고 있었습니다. ❗문제점 1. 중복되는 코드가 너무 많았고 유지보수가 어려운 점2. 사용자가 `배경색`와 `반경 설정`을 하려면 새로운 컴포넌트를 생성해서 사용해야 한다는 점에서 일관적인 스타일링의 어려움3. SVG 사이즈 조정 시 배경만 커지는 문제 다양한 사이즈를 사용하는 UI에서 큰 문제였습니다. 리팩토링 📖기존 Icon 컴포넌트// AlbumIcon.tsxexport const AlbumIcon = () => { retu.. Next Loading UI 구현하기 svg 애니메이션과 사용자 경험을 끌어올릴 수 있는 로딩 애니메이션을 구현했습니다.LoadingBouce 컴포넌트 📖const LoadingBounce = () => ( 모아가 여행을 준비중이에요 );export default LoadingBounce; 아래 스타일을 사용해 고정 위치를 설정해 화면 가운데 UI가 보이게 했습니다.className="fixed inset-0 z-50" `animate-bounceLoading`클래스는 애니메이션 속성을 부여해 svg가 자연스럽게 반응하도록 했습니다.animate-bounceLoading LoadingBouce 컴포넌트 재사용 📖Loading UI는 다양한 페이지에서 재사용될 수 있도록 `Loading`컴포넌트를 .. 이전 1 다음
