[FIX] 공통 모달 퍼블리싱 수정

[seong-hui]

작업 내용 🧑‍💻

• 이전에 배치만 맞춰뒀던 모달에 세부적인 컴포넌트를 넣었습니다.
• 기존의 SettingCheck1 ~ SettingCheck4 버튼에서 공통 부분을 뽑아서 SettingCheckBtn을 만들었습니다.
• SettingCheckBtn에서는 size, type, isHover, isActive, isPassed, onClick을 받습니다.
• 세팅 버튼 중에서 progress 타입의 경우 svg에서 색상이 채워진 게 stoke가 아닌 fill이라서 type이 progress의 경우 isFill을 true로 해서 svg의 fill의 색상을 변경하는 방식으로 코드를 구성했습니다.
• 기존의 setting svg가 꽉채워진 이미지가 아니라서 꽉 채워진 svg로 변경했습니다.

알게된 점 🚀

기록하며 개발하기!

• 승연이의 버튼 코드를 참고하였는데

 const settingIconMap: Record<string, FunctionComponent<SVGProps<SVGSVGElement>>> = {
	complete: Icons.SettingIcons.SettingCheck1,
	check: Icons.SettingIcons.SettingCheck2,
	done: Icons.SettingIcons.SettingCheck3,
	progress: Icons.SettingIcons.SettingCheck4,
	xBtn: Icons.SettingX,
};

이렇게 이미지를 선언하고 const IconComponent = settingIconMap[type]; 변수로 선언해서

const StyledSettingCheck2Icon = styled(IconComponent)<{ size: string }>`
   	${({ size }) => (size === 'small' ? smallIcon : bigIcon)};
   `;

위처럼 IconComponent를 동적으로 아이콘을 선택해서 StyledSettingCheck2Icon으로 스타일링한 후 렌더링할 수 있음을 알게 되었습니다.

리뷰 요구사항 💬

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

관련 이슈

close #65

스크린샷 (선택)

[wrryu09]

고생하셨습니다.! 따봉 🥇

[wrryu09]

css 를 써보는 것은 어떨까요~?

[seong-hui]

아 css안써도 되길래 그냥 했는데 정렬이 안되는군요 해당 사항 반영했습니다! 감사합니당

[jeeminyi]

이게,, 큰 기능이 없는거라 단순해보일 순 있어도,, 해본 사람 입장으로서 대가리 빠지는 부분인걸 아는데 ㅠㅠ 제가 싸놓은 똥을 이렇게 잘 수습해주셔서 너무너무너무 죄송하고 고생 많으셨습니다아 증맬루,, 🥲 성희 고생 너무 많았어요!! LGTM 입니다 💜

[jeeminyi]

으앙,,, 제가 처음으로 퍼블리싱한 쪽이라 많이 미숙했나봅니다 초반엔,, 말씀 하시지 잉잉 ㅜ 감사합니다,,,

[seong-hui]

아잇 아닙니다 넘 잘한다 우리 지민이 💜

[jeeminyi]

동일한 스타일 속성을 가진 버튼들을 하나로 합쳐서 type으로 아이콘만 변경해주었군요! 다 다른 svg 파일을 가져오기 어려울 것 같아 여러 파일들로 뺐는데 이렇게 하니 훨신 편할 것 같네요,, 정말 고생 많으셨습니다.. 👍

[jeeminyi]

아이콘 맵 함수로 빼는 법 배우고 갑니다 ㅎㅎ 굿굿

[Kjiw0n]

수고해써영 짱짱

[Kjiw0n]

헉 진짜 깔끔하다 👍 👍 굳굳