fix: 다짐메시지, 환영배너, 프로필 등록 완료 QA 반영 #1572
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
…cus를 설정해주는 방식으로 변경
|
|
🚀 프리뷰 배포 확인하기 🚀 |
seojisoosoo
approved these changes
Sep 26, 2024
| @@ -34,7 +35,7 @@ const ModalComponent: FC<ModalProps> = (props) => { | |||
| <DialogPortal> | |||
| <StyledBackground zIndex={props.zIndex} asChild> | |||
| <m.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 0.2 }}> | |||
| <StyledModalContainer asChild {...restProps}> | |||
| <StyledModalContainer onOpenAutoFocus={onOpenAutoFocus} asChild {...restProps}> | |||
There was a problem hiding this comment.
원인 파악 어려웠을텐데 넘 고생했어요!!ㅜㅜ 옵셔널로 props준 거라서 공통 컴포넌트에 큰 문제는 없어보입니다!혹시 이 함수가 없는 다른 모달에도 영향이 없는지 한 번만 더 확인 부탁드려요!
There was a problem hiding this comment.
넵! 다른 모달들 정상 동작하는 것 확인 했씁니다!
| @@ -42,6 +37,133 @@ const ImageHolder = styled.div` | |||
| height: 180px; | |||
| `; | |||
|
|
|||
| const Image = styled(ResizedImage)` | |||
There was a problem hiding this comment.
이미지 자체가 크지 않고 정적으로 제공하는 이미지라 꼭 리사이즈하지 않아도 될 것 같아요 원인 파악하기 어려웠을 텐데 넘 고생했어요!!
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.
🤫 쉿, 나한테만 말해줘요. 이슈넘버
🧐 어떤 것을 변경했어요~?
다짐메시지
환영배너
프로필 등록 완료
🤔 그렇다면, 어떻게 구현했어요~?
모달 자동 포커스 해제 관련
다짐메시지 모달을 열었을 때 textarea에 자동으로 focus가 되는 걸 해제해달라는 QA 요청이 있었습니다.
여기서 헤맨 과정을 공유하자면...
textarea에 아무리 autoFocus={false} 옵션을 줘도(Components 탭에서 해당 옵션이 잘 적용되어있는 것도 확인) focus해제가 되지 않는 문제가 있었습니다. 여러가지 방법을 시도하다가, useState로 '첫 포커스'인지를 관리하고 이 값을 이용해 onFocus 함수를 핸들하는 방식 (관련 커밋)으로 문제를 해결했었는데요.
너무 해키한 방식이라고 생각해서 더 알아본 결과 자동 포커스는 radix ui Dialog.Content에서 자동으로 해주는 것이었습니다.
따라서 이를 해제하기위해 Dialog.Content에
onOpenAutoFocus옵션을 추가해야했고, 따라서 불가피하게 Dialog 공통 컴포넌트를 살짝 건드리게 되었습니다.onOpenAutoFocus옵션에 preventDefault()를 넘겨주어 해결했습니다. 참고자료프로필 등록 완료 카드 로고 관련
프로필 등록 완료 카드 뒷면 로고가 느리게 뜬다는 QA내용이 있었습니다. 저도 테스트해보니 캐싱되기 전에는 이미지가 뜨기도 전에 카드가 뒤집혀버릴 때도 있더라구요.
그래서 기존에 ResizedImage로 렌더하던 로고를 InlineSVG로 변경해서 즉각적으로 렌더링이 되도록 개선했습니다.
❤️🔥 당신이 생각하는 PR포인트, 내겐 매력포인트.
커밋 단위로 리뷰하시는게 편하실거예요!!!
📸 스크린샷, 없으면 이것 참,, 섭섭한데요?