[Refactor] Box 컴포넌트의 children의 가로 길이가 100%가 되도록 해요. #101
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
eugene028
requested review from
ghdtjgus76,
hamo-o,
SeieunYoo and
kongnayeon
as code owners
2 tasks
SeieunYoo
approved these changes
Jul 26, 2024
| @@ -86,21 +86,23 @@ const Box = <T extends BoxVariantType = "text">({ | |||
| onClick={handleArrowClick} | |||
| {...rest} | |||
| > | |||
| <Flex alignItems="center" direction="row" gap="xs"> | |||
| <Flex alignItems="center" direction="row" gap="xs" width="100%"> | |||
There was a problem hiding this comment.
p4;
스토리북 살펴보다가 발견,,,오른쪽 요소가 없을 때에는 gap 이 들어가지 않으면 좋을 것 같아요!
hamo-o
approved these changes
Jul 26, 2024
오 그렇군요! 체크해주셔서 감사합니다~ |
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.
🎉 변경 사항
Box 컴포넌트의 내부 children이 span태그로 이루어져 있고, 이를 감싸고 있는 Flex 컴포넌트들의 가로 길이가
fit-content형식이라 내부에서 아무리 width를 100을 주어도 내부 요소의 가로 길이가 늘어나지 않는 문제가 있었어요.이를 해결하기 위하여 Box의 내부 element를 감싸고 있는 요소들의 가로 길이를 100%로 설정하였어요.
🚩 관련 이슈
#100
🙏 여기는 꼭 봐주세요!
@hamo-o
props 중에서
text와children을 분리하기가 어려운 이유가..아래 사진과 같이 포멀한 Box의 상태로 사용하고 싶을 때에도 글자를 굵게 하거나 언더라인을 치고 싶을 때를 대비하여서 text를 아예 ReactNode를 받도록 해 두었어요. (텍스트 꾸미기를 다양하게 하기 위해)
그리고 위의 사진과 같이 사용하는 예시를 일반적인 형태로 보고 개발하여서, ReactNode만으로만 Box 요소를 채워넣는다던가 하는 것은 일반적이지 않은 경우 같아서 현 상태의 props구조를 유지하는게 좋을 것 같기도 해용!