[Feature] SVG를 컴포넌트로 구현해서 사용하는 기능 건의 #40
Description
📌 어떤 기능인가요?
현재 assets/images 폴더에 있는 svg파일의 경우 컴포넌트로 구현해서 사용할 수 있습니다.
컴포넌트로 구현하게 되면 얻는 이점
- 내부 스타일을 조작할 수 있습니다. 체크 아이콘의 경우 체크가 된 경우와 체크가 되지 않은 경우 두가지 아이콘을 assets에 포함하게 되면 http 요청이 2번 발생하게 됩니다. 그러나 컴포넌트를 통해서 체크와 빈체크를 컴포넌트로 구현하게 되면 번들에 같이 삽입되어 요청이 줄어들게 됩니다.
- 커스터마이징이 가능하게 되어 전달받는 props에 따라서 색상, 크기, 애니메이션 등을 자유롭게 제어 가능해집니다.
- 접근성이 좋아집니다. role, aria-label 같은 속성을 컴포넌트에서 관리할 수 있습니다.
- 일관성 있고 가독성이 좋아집니다. 예를들어 체크와 빈 체크 아이콘을 사용하는 경우에 2개의 svg를 import 하거나 Image 컴포넌트로 해당 아이콘의 경로를 전달해야 합니다. 이경우 해당 아이콘을 인지하는데 약간의 가독성 저하가 발생할 수 있습니다. 아이콘이 많아진다면 더욱 어려워 질 수 있습니다. -> 이 때 컴포넌트로 svg구현후 선언적으로 사용하게 되면 의 형태로 사용이 가능해져 가독성과 개발자의 의도를 전달하기 편해질 것이라 예상합니다
📄 작업 상세 내용
- svg를 컴포넌트로 변환 하는 걸 도와주는 SVGR 설치 개발용으로 설치합니다.
- 현재 사용되는 svg를 컴포넌트로 변환합니다. 이땐 조건부로 변경되는 경우 해당 조건을 prop으로 받게 해 반영합니다.
- 기존에 svg를 파일 형태로 사용하고 있던 파일들을 수정합니다.