[Feat/#36] Toast component

[minjeoong]

🔥 Related Issues

• close [ Feat ] Toast 컴포넌트 구현 #36

✅ 작업 리스트

• Toast 컴포넌트 구현

🔧 작업 내용

토스트 props 확인해주십쇼 해당 컴포넌트는 5초 뒤에 사라지도록 구현하였습니다.

[ @param variant 종류 (default, error) ]
Toast 는 variant 가 두개 입니다.

1. variant = default
2. variant = error

[ @param iconColor 아이콘 색상 (black, white) ]
옆에 있는 X 버튼의 색상은 props 로 줘야 합니다.
추후 디자인에 따라 같은 배경이라도 버튼 색깔이 다를 수 있을 것이라 생각하여 다음과 같이 구현했는데, 혹시 다른 의견 있으시면 주시면 감사합니다.

📣 리뷰어에게 어떠신가요?

해당 디자인 배경 구현 문제 있었습니다.

1. 왼쪽에 빨간 요소를 직접 렌더링 하는 방법
2. 배경을 추출해서 요소의 백그라운드 하는 방법

두 방법 중 2번 방법 선택하였습니다.
그 방법에서 오는 문제는
-> 추출한 요소의 크기보다 토스트 크기가 커지면 문제가 있을 수 있음.

해당 요소의 크기 자체를 고정하는 방법으로 해결하였습니다.

📸 스크린샷 / GIF / Link

1. variant = default
   https://github.com/user-attachments/assets/d6074f45-73a0-40b9-803a-f3906bac3456

2. variant = error
   https://github.com/user-attachments/assets/15685dae-0225-457e-b670-c0bb653212ab

[ocahs9]

토스트 컴포넌트 깔끔하게 구현되었네요~

다만 당장은 사용하는 곳이 없지만 나중에 사용하게 된다면 prop이 더 필요할 거 같아요!
isVisible 로 토스트 오픈 여부를 관리하고, useToast와 같은 훅을 통해 토스트 상태를 관리하는 게 사용성 측면에서 좋을 것 같아요! 참고만 해두고 나중에 여유되거나 실제로 사용할 때 개선해봅시다!

충돌 처리는 제가 방금 하고 push 해뒀습니다 어푸할게요!