[FEAT] 공통 컴포넌트 아이콘 SVG 삽입

[jeeminyi]

작업 내용 🧑‍💻

• 아이콘 에셋들 추가해두었습니다.
• 파일이 많아서 기존 파일들은 V1에, 새로운 아이콘들은 V2에 넣어두었으니, 아이콘 다 새로 갈아끼우고 나면 V1 파일은 날려버리면 될 것 같아요
• V1 아이콘들은 Icons.로 사용해서 새로운 아이콘들은 Icn으로 불러오면 됩니다.

알게된 점 🚀

기록하며 개발하기!

• 딱히 없습니다. 궁금한 점은 있더용 ㅋ
• 아이콘 퍼블리싱인줄 알고 피그마가 이상하다고 생각해서 오래 걸렸더용 ㅋ

리뷰 요구사항 💬

리뷰어가 특별히 봐주었으면 하는 부분이 있다면 작성해주세요

• 아이콘 크기가 뭐 이리 다양한지 다섯개 크기가 있더라구요. 우선 기본 svg는 24px로 추출되어있고, 해당 사이즈가 주로 사용될 것 같은데, 다른 사이즈로 활용되어야 할 경우에 width값 바로 설정해주면 될 것 같습니다.
• 고민이 되었던 부분은, 아예 사이즈 값을 기본 css에 정리해두고, svg 가져올 때 해당 사이즈 속성을 사용해주면 굳이 몇 픽셀인지 써주지 않아도 될 것 같은데 그게 더 편하려나요? (ex. 16px > small, 20px > medium ...) 이렇게 하려면 글로벌 스타일에 넣어두면 되는지.. 의견 부탁드려영 (혹시 사이즈 하나하나 설정하는게 번거로울까바 ㅋ)

🆕 👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇

• 마침 태승씨가 디코에 있길래 유태승 조언 한스푼 & 계속 에러 떠서 지피티 조언 두스쿱 받아서 사이즈 매핑 객체를 따로 만들어보았는데요, 자꾸 SelectedIcon이 JSX 컴포넌트로 렌더링 할 수 없다는 오류가 떠서 지피티를 조져보았습니다. 확인해보니, 저희가 index.ts에서 Icn을 svg 직접 경로로 불러오고 있어서 리액트 컴포넌트로 인식하지 못하는 문제가 원인이라고 합니다.
• 이를 해결하기 위해서는 @svgr/webpack를 사용해 SVG 파일을 React 컴포넌트로 변환하거나, Icn 객체를 사용하지 않고 아이콘을 직접 렌더링하는 방법이 있는데요, 혹시 다른 더 효율적이고 깔끔한 방식이 있을지 의견 듣고자 우선은 에러가 뜨지만 냅다 커밋 메세지 올려봅니다. 확인해보시고 다른 좋은 의견 말씀해주세요! 따로 없다면 @svgr/webpack을 써볼까 합니다....
  🆕👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆

관련 이슈

close #286

스크린샷 (선택)

[wrryu09]

피그마에 보시면 이렇게 size varient 가 있는데요, 해당 네이밍을 그대로 가져가진 않더라도 props로 해당 값을 받아서 사이즈를 적용한 컴포넌트를 돌려주도록 제작하면 좋을 것 같아요!
직접 사이즈를 설정하다 보면 매번 피그마에서 사이즈를 찾아야 하기도 하고, 오타가 나면 이상한 사이즈가 되기 쉬울 것 같아요!
props로 받는 size의 타입을 저 varient 로 설정해 두면 지정된 varient 안에서 size를 골라 해당 크기의 아이콘을 돌려받을 수 있어 좋을 것 같은데, 해당 방법은 어떨까요?

[wrryu09]

엄청 많은 아이콘들을 다 넣어주셨네요!!!! 고생하셨습니다 네이밍 결국 해결하네욤 ㅎ.ㅎ
위 댓글 함 확인해주시구 컨플릭트 나는 부분이랑 빌드 오류 나는 곳 잡아주면 좋을 것 같아요~~

[Kjiw0n]

아이콘 다 가져오느라 고생하셨습니다~~~ V1 파일쪽에서 오류가 많이 터져서, 이 부분 수정해주시구 SelectedIcon 오류 관련 질문드려용

• ?react 없애기
  vite.config.ts 파일에서

svgr({
	svgrOptions: {
		icon: true,
		memo: true,
	},
	include: '**/*.svg',
}),

이렇게 적용하면 ?react 없이 사용 가능하다고 합니다! 이 부분 추가 후 말씀드린 변경사항 추가해주세요!

• SelectedIcon 오류나는 문제

현재 이 Icn이 이런 식으로 구성되어있어서, 말씀하신대로 객체가 (IcnDown, IcnLeft, IcnRight, IcnUp 묶음)이 전달되는 게 문제로 보입니다!
const SelectedIcon = Icn[name]; 이 부분에서 SelectedIcon이 저 묶음 전체를 내보내고있는데, 이게 본래 의도한 게 맞을까요???

[Kjiw0n]

import Icn_arrow_narrow_right from '@/assets/svg/V1/arrow-narrow-right.svg';
import Arrow_up from '@/assets/svg/V1/arrow-up.svg';
import Icn_calander from '@/assets/svg/V1/calendar-minus-01.svg';
import ClockCheck from '@/assets/svg/V1/clock-check.svg';
import Icn_date_clock from '@/assets/svg/V1/clock.svg';
import Dashboard_Complete from '@/assets/svg/V1/Dashboard_Complete_Icon.svg';
import DashboardPostpone from '@/assets/svg/V1/Dashboard_Postpone_Icon.svg';
import DashboardProgress from '@/assets/svg/V1/Dashboard_Progress_Icon.svg';
import DeleteIcon from '@/assets/svg/V1/Delete.svg';
import DoneIcon from '@/assets/svg/V1/DoneIcon.svg';
import TimelineDelete from '@/assets/svg/V1/ic_delete.svg';
import Icn_selectbox_selected from '@/assets/svg/V1/ic_selectbox_selected.svg';
import Icn_selectbox_Unselected from '@/assets/svg/V1/ic_selectbox_unselected.svg';
import IcnArrangeCalendar from '@/assets/svg/V1/icn_arrange_calendar.svg';
import IcnArrangeLeft from '@/assets/svg/V1/icn_arrange_left.svg';
import IcnArrangeRight from '@/assets/svg/V1/icn_arrange_right.svg';
import IcnArrangeSet from '@/assets/svg/V1/icn_arrange_set.svg';
import Icn_clock from '@/assets/svg/V1/icn_clock.svg';
import IcnFile from '@/assets/svg/V1/icn_file.svg';
import Icn_hover_indicator from '@/assets/svg/V1/icn_hover_indicator.svg';
import Icn_nav_calendar from '@/assets/svg/V1/icn_nav_calendar.svg';
import Icn_nav_dashboard from '@/assets/svg/V1/icn_nav_dashboard.svg';
import Icn_nav_setting from '@/assets/svg/V1/icn_nav_setting.svg';
import Icn_nav_today from '@/assets/svg/V1/icn_nav_today.svg';
import Icn_line from '@/assets/svg/V1/line164.svg';
import plus_circle from '@/assets/svg/V1/plus-circle.svg';
import PlusArrow from '@/assets/svg/V1/PlusArrow.svg';
import ProgressIcon from '@/assets/svg/V1/ProgressIcon.svg';
import Refresh from '@/assets/svg/V1/refresh.svg';
import SelectedBox from '@/assets/svg/V1/Selectbox_Selected.svg';
import UnselectedBox from '@/assets/svg/V1/Selectbox_Unselected.svg';
import SettingCheck1 from '@/assets/svg/V1/SettingCheck1.svg';
import SettingCheck2 from '@/assets/svg/V1/SettingCheck2Icon.svg';
import SettingCheck3 from '@/assets/svg/V1/SettingCheck3Icon.svg';
import SettingCheck4 from '@/assets/svg/V1/SettingCheck4Icon.svg';
import SettingProgress from '@/assets/svg/V1/SettingProgressIcon.svg';
import SettingX from '@/assets/svg/V1/SettingXIcon.svg';
import IcnXCricle from '@/assets/svg/V1/x-circle.svg';

여기 import 다 오류나네요! 이렇게 바꿔주세요!!

[jeeminyi]

아 기존 V2파일 추가하면서 ?react 부분을 깜빡했었네요! ㅜㅜ
?react가 붙어야 svg 파일들을 리액트 컴포넌트로 사용할 수 있는거로 알고 있는데 V1 경로만 추가해두면 될 것 같아요!

[Kjiw0n]

이 부분 참고해주세요!

[jeeminyi]

아 저걸 적용하면 저 부분 생략하고도 컴포넌트로 활용 가능하다는 말잉었군요! 잘못 이해했습니다... 수정해둘게용!!

[Kjiw0n]

파일명 오타났네요! IcnCalendar.svg 로 e -> a 변경해주세여!! index.ts에서 오류나네요

[jeeminyi]

레전드 매의 눈 감샇합니다 ㅜ

[jeeminyi]

으엉 왜 자꾸 충돌나는거지 빌드 에러 잡아볼게요
const SelectedIcon = Icn[name]; 이 부분은 Icn 객체를 수정했습니다! 크게 묶일 만큼 공통된 아이콘이 많거나 복잡한게 아니라
다른 의견 있으면 말씀해주세용

[wrryu09]

svg 직접 경로로 불러오고 있어서 리액트 컴포넌트로 인식하지 못하는 문제가 있다고 해서 돌려봤는데요, 타입 관련된 문제인 것 같아 svg.d.ts를 봤는데 이게 src 안이 아니라 어디 더 깊숙하게 들어있더라구요..(ㅜㅜ) 그래서 얘를 src 폴더로 옮겨주고

declare module '*.svg' {
	const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
	export default ReactComponent;
}

다음과 같이 타입 인지할 수 있도록 바꿨습니다.
이제 나머지 파일들에서 타입 잘 알아먹구 빌드 잘 되는 것 같습니다! 따로 패키지로 설정할 필요는 없을 것 같아요

아래 커밋 확인해주시구 궁금한 점이나 다른 문제가 있다면 알려주세요!!

[Kjiw0n]

수정사항 확인했습니다!! 수고하셨어요 👍 👍

한가지 제안드리자면, <Icon name="IcnDown" /> 지금은 이런 식으로 사용중인데 조금 더 편하게 사용하기 위해 <Icon name=Icon.IcnDown /> 이렇게 사용할 수 있도록 props 타입 수정해주실 수 있을까요??

앞으로 워낙 자주 사용될 컴포넌트라서 제안드립니당!!

[github-actions]

🚀 Storybook 🚀

• https://673df30e5491debc7e4062eb-udkqlylyzc.chromatic.com/