[#57] ✨ 공통 컴포넌트 TextArea 구현 #110
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
4 tasks
yongb2n
changed the title
KingNono1030
approved these changes
Nov 20, 2024
Contributor
There was a problem hiding this comment.
가독성이 좋고 재사용성이 뛰어나게 보이네요. 아토믹한 디자인을 잘 이해하고 계신 것 같아요 !
다만 text input 에서 처럼 훅폼과 같이 쓸 수 있게, register props를 내려주는 것이 좋아보입니다 !
유효성 검사 (글자 100자 제한) 등을 어겼을 때, 에러 스타일이 나타날 수 있게 처리 해주는 것도 좋아보이구요
Contributor
There was a problem hiding this comment.
저도 방금 찾아봐서 처음 알았는데, 또한 forward ref 등록이 훅 폼의 모든 기능을 활용할 수 있게 한다고 하네요
const MyInput = forwardRef<HTMLInputElement, MyInputProps>(
({ label, ...rest }, ref) => {
return (
<label className='flex flex-col'>
<span>{label}</span>
<input ref={ref} {...rest} />
</label>
);
}
);
Contributor
There was a problem hiding this comment.
훅 폼 사용을 위한 register prop 좋네요..!!
yellowjang
approved these changes
Nov 20, 2024
Contributor
yellowjang
left a comment
yellowjang
left a comment
There was a problem hiding this comment.
제가 공통 컨포넌트를 건들이지 않다보니 css 사용이 낯선데, 코드 보면서 많이 배웠습니다.
고생하셨습니다!
Comment on lines
21
to
31
| const textAreaClass = twMerge( | ||
| baseStyles, | ||
| clsx( | ||
| { | ||
| 'w-full': fullWidth, | ||
| 'h-104': size === 'md', | ||
| 'h-140': size === 'lg', | ||
| }, | ||
| className | ||
| ) | ||
| ) |
Contributor
There was a problem hiding this comment.
css에 관한 것도 이렇게 복잡하군요 .... 대단합니다
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.
📌 PR 템플릿
🏷️ PR 타입 (PR Type)
📝 요약 (Summary)
🔍 상세 내용 (Describe your changes)
TextArea컴포넌트 구현TextAreaAutoResized->TextArea로 변경invalid스타일링 처리TextInputforwardRef로 리팩토링 -> 기존 register prop 제거🔗 관련 이슈 또는 링크 (Issue Number or Link)
✅ 체크리스트 (Checklist)
📸 스크린샷 (선택 사항)
2024-11-19.10.56.52.mov
invalid prop (추가된 prop이라 이미지로 첨부)
📝 기타 사항
TextArea의 컴포넌트의 사이즈가 3개로 분리가 되어 sm, md, lg로 진행했는데...! 어떠신지 의견 부탁드려용