[#66] - Toast 공통 컴포넌트 구현

[subsub-e]

📌 연관된 이슈 번호

close #66

🌱 주요 변경 사항

1. Icon 기존 타입으로 색상 가져오는 방식에서 색상 코드를 넣어주는 방식으로 변경 (ColorSystem에 없는 색상이 아이콘 색으로 들어갈 경우가 있다고 판단해서 바꿨습니다..!)

2. @storybook/preview-api 라이브러리 추가 (토스트 메세지 스토리에서 상태 변경을 위해 설치)

3. Toast 공통 컴포넌트 구현

위의 사진처럼 사용하시면 됩니다!!
onClick 이벤트 같은 경우에는 aiCompleteLarge 인 토스트 메세지의 경우에 존재할 수 있다고 판단하여 optional 하게 설정하였습니다.
스토리에 해당 부분 넣어두었습니다.

📸 스크린샷

🗣 리뷰어에게 할 말 (선택)

토스트 메세지 구현할때 어떤 방식으로 구현하는게 가장 깔끔할지에 대해 많은 고민이 있었습니다,,

1. 각 토스트 메세지마다 별도의 컴포넌트로 구성하고 children이나 render props로 넣어주기
2. <Toast.AAAA /> 와 같은 방식으로 Toast 객체 내부에 토스트 컴포넌트를 넣어주기

우선 제가 선택한 방식은 위의 2가지 방식이 아닌

toastConfig와 toastVariants를 분리하여 스타일과 메시지를 독립적으로 관리합니다.
따라서 새로운 토스트 메시지를 추가할 때 별도의 컴포넌트를 만들 필요 없이 toast-config 와 style 코드만 추가하면 되는 방향으로 구현했습니다.

이유는 toast 컴포넌트 자체의 구조는 일관되고 토스트 메세지의 스타일과 text, icon만 변경되기 때문입니다.

추후에 토스트 메세지가 쌓이는 구조로 변경하고 싶을때는
<Toast.provider > 를 외부로 빼고 context나 상태 관리 라이브러리를 활용하면 될꺼 같습니다!!

이 방식에 대한 피드백이나 더 좋은 구조에 대한 의견이 있다면 공유 부탁드립니다! 🙌

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

1 Skipped Deployment

Name	Status	Preview	Comments	Updated (UTC)
onepiece-fe	⬜️ Ignored (Inspect)			Feb 27, 2025 4:11pm

[Limgabi]

🚀 Storybook Deploy : https://67a21b40b49ad2ad0c08c418-hkmuyimktc.chromatic.com/