[feat] 댓글 입력 영역 컴포넌트 구현 #35
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
suji8073
requested review from
jungjunhyung99,
seonghyuk1 and
vvizi
as code owners
suji8073
changed the title
vvizi
reviewed
Feb 26, 2025
suji8073
changed the base branch from
r/refactor-text-input-textarea/suji
to
develop
- minHeight, maxHeight, maxLineCount를 활용해 최대 줄 수 제한 - useEffect를 이용해 paddingTop 동적으로 설정 - 최대 줄 수 넘을 경우 paddingTop을 0px로 설정 - useLayoutEffect를 활용해 textarea의 높이를 자동 조절하는 기능 추가
- input type='file'을 사용하여 클릭 시 네이티브 갤러리 열리는 기능 추가 - 선택한 이미지를 미리보기 및 업로드 할 수 있도록 images 변수에 관리 - 임시로 개별 이미지 삭제, 닫기, 전송 버튼 구현 - 추후 기획 완료 시 수정 필요
- 댓글 입력 컴포넌트 구현: input, imageUploader 기능 추가 - ImageUploader 컴포넌트를 포함하여 이미지 업로드 기능 가능 - CommentInput 컴포넌트를 포함하여 댓글 입력 가능 - 댓글 여부에 따라 전송 버튼(Upload, UploadActive) 활성화 가능 - 추후 API 연결 필요
- CommentBox, ImageUploader : atoms, molecules 조합 / 비즈니스 로직 포함 → features 폴더에 정의 - CommentInput : atoms을 조합한 UI / 비즈니스 로직 x → molecules 폴더에 정의
- CommentBox 컴포넌트 스토리북 추가 : CommentInput, ImageUploader 포함 - parameters layout:'fullscreen' 추가하여 padding 으로 인해 영향 받지 않도록 처리
suji8073
force-pushed
the
f/comment-component/suji
branch
from
657cd84 to
ed7015a
Compare
jungjunhyung99
approved these changes
Feb 28, 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 🔑
CommentInput 컴포넌트 구현
minHeight,maxHeight,maxLineCount를 활용해 최대 줄 수 제한useEffect를 이용해paddingTop동적으로 설정paddingTop을0px로 설정useLayoutEffect를 활용해 textarea의 높이를 자동 조절하는 기능 추가Comment ImageUploader 컴포넌트 구현
input type='file'을 사용하여 클릭 시 네이티브 갤러리 열리는 기능 추가images변수에 관리CommentBox 컴포넌트 구현
Upload,UploadActive) 활성화 가능Plus, Upload, UploadActive svg 아이콘 추가
Attachment 📷