[31] Toast 컴포넌트 구현 #52
Conversation
There was a problem hiding this comment.
수고하셨습니다 연경님 :)
react-toastify가 toast 라이브러리로 유명해서 디자인 및 기능 잡을 때 여기서 참고하셔도 좋을 것 같아요:)
추가적으로 테스팅하면서 나온 버그입니다:
- progressBarHeight 조정 시 뒤의 검정색 배경 부분만 변합니다
progressBar는 선협님 React강의 참고하셔서 새로운 컴포넌트로 구분하시는 것도 좋을 것 같습니다
또
- 토스트에 borderRadius가 있어도 좋을 것 같습니다.
- 토스트 배경색상을 흰색을 기본으로 하되, props로 주입할 수 있으면 좋을 것 같습니다 (현재 배경색상이 지정되어 있는 거 같지 않습니다)
| } | ||
| `; | ||
|
|
||
| const ProgressBar = styled.div` |
There was a problem hiding this comment.
ProgressBar를 별도의 컴포넌트 파일로 분리해도 될 것 같습니다 🤔
| <Flex justifyContent='flex-end'> | ||
| <CloseButton>x</CloseButton> | ||
| </Flex> | ||
| <Text |
There was a problem hiding this comment.
Text 뿐만 아니라 Toast 메시지 종류에 따라 앞에 Icon이 있으면 좋을 것 같습니다
우선 메시지 종류부터 정해야 하는데
- HTTP 에러
- HTTP 성공
2 종류가 생각이 나네요. 혹시 더 추가해야 할 종류들이 있을까요?
| <Spacer padding={'0.75rem 0.75rem 1.25rem 0.75rem'}> | ||
| <Flex direction='column'> | ||
| <Flex justifyContent='flex-end'> | ||
| <CloseButton>x</CloseButton> |
There was a problem hiding this comment.
CloseButton에 click 이벤트 핸들링을 달아줘야 할 것 같아요. 누르면 토스트가 없어지게 하는게 이상적일 것 같아요 👍
| </Text> | ||
| </Flex> | ||
| </Spacer> | ||
| <ProgressBarContainer> |
There was a problem hiding this comment.
ProgressBar animation이 완료되면 toast가 자동으로 사라져야 합니다. 해당 로직이 필요할 것 같아요 :)
또 Toast에 hover 했을 때 progress bar가 멈추는 기능도 있으면 좋을 것 같아요 (이건 여유 있으시면 하시면 될 것 같습니다)
| interface ToastPropsType { | ||
| text: string; | ||
| size?: FontSizeType; | ||
| weight?: FontWeightType; | ||
| color?: ColorType; | ||
| borderColor?: ColorType; | ||
| progressBarColor?: ColorType; | ||
| progressBarHeight?: number; | ||
| position?: 'top' | 'bottom' | 'center'; | ||
| time?: number; | ||
| } |
There was a problem hiding this comment.
👍 열심히 커스텀 할 수 있도록 만들어 주셨는데, 아마 borderColor는 색상 없이 갈 것 같고, progressBarHeight도 한번 정해지면 변경되지 않을 것 같아요. 😢
text, size, weight 는 Toast에 표시될 제목과 본문을 따로 주입 받는 방식으로 대체할 수 있을 것 같아요.
<Toast title={} body={} />color 같은 경우는 활용 방법을 생각해봤을 때 성공이나 실패를 알려주는 Toast에 사용할 수 있을 것 같은데, 만약에 Icon을 사용할 수 있고 구현해주신 progressBarColor 를 같이 사용하면 충분히 color 없이도 사용할 수 있을 것 같아요.
<Toast
progressBarColor='--green500'
time={3000}
>
<Toast.Title icon={<IconInfoCircle size={16} stroke={3} />}>
알림
<Toast.Title>
<Toast.Body>포스트를 삭제했어요<Toast.Body>
</Toast>Toast 컴포넌트 아래 Toast.Title, Toast,Body를 서브 컴포넌트라고 부르는데, 이렇게 사용하는걸 컴파운드 패턴이라고 하는 것 같아요.
꼭 이런 형태가 아니더라도, 모든 기능을 담기보다 최대한 컴포넌트 합성을 통해 해결해보면 어떨까 싶어요. 🤔
🚀 주요 작업 내용
📌 스크린샷
✅ 고민 중인 부분 및 참고사항
close #31