[페이먼츠 미션 Step 3] 센트(김영우) 미션 제출합니다. #293
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
HyeonaKwon
approved these changes
May 8, 2023
There was a problem hiding this comment.
안녕하세요 센트! 로딩화면 추가해주신 것 잘 확인했습니다 ㅎㅎ 확실히 로딩화면 들어오니 UI/UX 가 더 예뻐보이네요!
전체적으로 상대경로로 import 하고 계신데요, tsconfig 를 이용해서 절대경로로 자동 import 되도록 설정해보시면 좋을 것 같아요. 그러면 파일 위치를 옮기거나 할 때 수정해야할 부분이 더 적어질거예요!
그리고 loading 과 관려해서는 React 의 Suspense 를 공부해보시면 좋을 것 같습니다.
이번 페이먼츠 미션 수행하느라 고생 많으셨습니다! 앞으로도 더더욱 성장하는 개발자가 되시면 좋겠네요 ㅎㅎ
Comment on lines
+99
to
+127
| &:before { | ||
| content: ''; | ||
| position: absolute; | ||
| left: -6px; | ||
| top: -18px; | ||
| width: 112px; | ||
| height: 218px; | ||
| border-radius: 8px; | ||
| background: linear-gradient( | ||
| 80deg, | ||
| rgba(0, 0, 0, 0.05) 45%, | ||
| rgba(0, 0, 0, 0) 46% | ||
| ); | ||
| } | ||
| &:after { | ||
| content: ''; | ||
| position: absolute; | ||
| box-sizing: border-box; | ||
| left: 60px; | ||
| top: 8px; | ||
| width: 24px; | ||
| height: 24px; | ||
| z-index: 2; | ||
| backdrop-filter: blur(5px); | ||
| border-radius: 50%; | ||
| background: rgba(0, 0, 0, 0.12); | ||
| border: 2px solid rgba(255, 255, 255, 0.2); | ||
| animation: ${thumbMove} 4s linear infinite; | ||
| } |
There was a problem hiding this comment.
before 이나 after 에는 aria-hidden 처럼 스크린오버가 인식하지 않도록 하는 방법은 어떤게 있을까요?
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.
배포 페이지 | story book 배포 페이지 | 배포한 모달 저장소
안녕하세요 헤인티!! 페이먼츠 마지막 스텝 리뷰 잘 부탁드립니다👍
이번 스텝에서는 직접 npm에 모달을 배포해 이를 사용하고, 로딩 스켈레톤을 추가해보았습니다!
배포한 모달은 context api를 활용해 모달의 기능적인 부분을 구현했고, styled components를 활용해 모달 템플릿을 따로 제공해주도록 구성해보았습니다!
로딩 스켈레톤이 보여지게 하기 위해서 닉네임이 입력된 후
setTimeout함수를 통해 로딩 시간을 만들어주었습니다.