✨ Feat: Toast UI 구현 #68
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
hyesung99
approved these changes
Sep 22, 2023
src/components/Toast/Toast.style.ts
Outdated
Comment on lines
43
to
53
| @keyframes hide { | ||
| 0% { | ||
| opacity: 1; | ||
| } | ||
| 80% { | ||
| opacity: 1; | ||
| } | ||
| 100% { | ||
| opacity: 0; | ||
| } | ||
| } |
There was a problem hiding this comment.
p2;
opacity로 UI를 가리면 뒤에있는 뒤에있는 요소들이 클릭되지 않는 이슈가 있어서...
100%일때 height을 0으로 만들어 버린다던지 하는 처리가 필요할 것 같아요!
There was a problem hiding this comment.
헉 그런 이슈가 있군요 배워갑니다! 100% 일때 display: none 으로 설정해두겠습니다!
src/components/Toast/Toast.tsx
Outdated
Comment on lines
3
to
8
| interface ToastProps { | ||
| width: number; | ||
| height: number; | ||
| content: string; | ||
| type: 'WARNING' | 'ERROR' | 'ALERT' | 'SUCCESS'; | ||
| } |
There was a problem hiding this comment.
p2;
스타일드 컴포넌트에서는 width,height이 optional속성인데 여기서는 필수네요!
여기서도 optional속성으로 만들고 인자를 받아올때 기본값을 주면 좋을것같아요!
sscoderati
approved these changes
Sep 22, 2023
src/components/Toast/Toast.tsx
Outdated
| type: 'WARNING' | 'ERROR' | 'ALERT' | 'SUCCESS'; | ||
| } | ||
|
|
||
| const Toast = ({ width, height, content, type }: Partial<ToastProps>) => { |
There was a problem hiding this comment.
생각해보니...content type 은 필수로 두고 width 와 height 만 선택속성으로 둬야겠네요!
- 2초에서 3초로 애니메이션 시간을 증가시켰습니다.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
🪄 변경사항
toast UI 구현
🖥 결과 화면
✏️ PR 포인트
생략합니다.