-
Notifications
You must be signed in to change notification settings - Fork 2
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[31] Toast 컴포넌트 구현 #52
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
수고하셨습니다 연경님 :)
react-toastify가 toast 라이브러리로 유명해서 디자인 및 기능 잡을 때 여기서 참고하셔도 좋을 것 같아요:)
추가적으로 테스팅하면서 나온 버그입니다:
- progressBarHeight 조정 시 뒤의 검정색 배경 부분만 변합니다
progressBar는 선협님 React강의 참고하셔서 새로운 컴포넌트로 구분하시는 것도 좋을 것 같습니다
또
- 토스트에 borderRadius가 있어도 좋을 것 같습니다.
- 토스트 배경색상을 흰색을 기본으로 하되, props로 주입할 수 있으면 좋을 것 같습니다 (현재 배경색상이 지정되어 있는 거 같지 않습니다)
} | ||
`; | ||
|
||
const ProgressBar = styled.div` |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ProgressBar를 별도의 컴포넌트 파일로 분리해도 될 것 같습니다 🤔
<Flex justifyContent='flex-end'> | ||
<CloseButton>x</CloseButton> | ||
</Flex> | ||
<Text |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
CloseButton에 click 이벤트 핸들링을 달아줘야 할 것 같아요. 누르면 토스트가 없어지게 하는게 이상적일 것 같아요 👍
</Text> | ||
</Flex> | ||
</Spacer> | ||
<ProgressBarContainer> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ProgressBar animation이 완료되면 toast가 자동으로 사라져야 합니다. 해당 로직이 필요할 것 같아요 :)
또 Toast에 hover 했을 때 progress bar가 멈추는 기능도 있으면 좋을 것 같아요 (이건 여유 있으시면 하시면 될 것 같습니다)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
고생 많으셨습니다. 🙂
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
👍 열심히 커스텀 할 수 있도록 만들어 주셨는데, 아마 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