[refactor] 댓글 입력 영역 컴포넌트 리팩토링 #41
Merged
Conversation
This file contains hidden or 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
- layout-max-w CSS 변수를 100% 로 정의
- BottomSheet 내 header와 children을 각각 BottomSheetHeader와 BottomSheetContent로 분리 - observerRef(MutationObserver)를 통해 BottomSheet 높이 변화 감지 - FloatingInput이 BottomSheet 위에 정확히 위치되도록 대응
- CommentInput, UploadBtn, ImageOpen view를 TextFieldBottom 컴포넌트로 분리 - BottomSheet의 height를 기반으로 상위 컴포넌트의 bottom 스타일을 동적으로 조정 - 업로드 버튼 클릭 시 텍스트/이미지 존재 여부에 따라 분기 처리하여 업로드 로직 수행
suji8073
requested review from
jungjunhyung99,
seonghyuk1 and
vvizi
as code owners
vvizi
reviewed
Mar 28, 2025
| setShowGallery: (value: boolean) => void; | ||
| }) => { | ||
| const openNativeGallery = () => { | ||
| document.getElementById('fileInput')?.click(); |
Contributor
There was a problem hiding this comment.
ref 가 아닌 직접 돔을 참조한 이유가 있을까용??
Member
Author
There was a problem hiding this comment.
아녀! 그렇진 않지만 id로 참조하는 것보단 ref가 더 정확할 것 같아 수정 완료했습니닷 !!
- BottomSheetHeader 내 image 타입 string[]으로 제한 - input을 통한 카메라 앨범 접근 시 dom id 접근이 아닌 Ref로 접근하도록 수정
jungjunhyung99
approved these changes
Mar 29, 2025
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.
Motivation 🤔
Key Changes 🔑
[BottomSheet]
--rsbs-overlay-h,--rsbs-overlay-translate-y값을 직접 읽어 계산하는 방식으로 변경react-spring-bottom-sheet의 custom은 꽤 제한적[Storybook]
global.css를 분리해 별도로 관리--layout-max-w변수로 너비가 설정되는데, 이 값이 기본global.css에서는480px로 지정됨fullScreen파라미터로 인해 댓글 입력 영역은 100%로 출력되지만, BottomSheet는 여전히 480px로 제한되는 문제 발생--layout-max-w값을 100%로 관리되도록 설정Attachment 📷