feat: Tab 컴포넌트를 구현합니다. #37
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
hjy0951
approved these changes
Jul 24, 2024
| @@ -1 +1 @@ | |||
| export { Button } from './button'; | |||
| export { Button } from './Button'; | |||
Comment on lines
+1
to
+16
| export type ButtonProps = { | ||
| size: 'large' | 'medium' | 'small'; | ||
| disabled?: boolean; | ||
| label: string; | ||
| leftIcon?: boolean; | ||
| rightIcon?: boolean; | ||
| interaction: 'normal' | 'hovered' | 'focused' | 'pressed'; | ||
| variant?: 'solid' | 'outlined' | 'text'; | ||
| type?: 'primary' | 'secondary' | 'assistive'; | ||
| }; | ||
|
|
||
| export interface ButtonPropsWithIcons extends ButtonProps { | ||
| leftIconSrc?: string; | ||
| rightIconSrc?: string; | ||
| onClick?: () => void; | ||
| } |
There was a problem hiding this comment.
여기는 확실히 다시 이야기를 해봐야겠네영~
type vs interface
Comment on lines
+12
to
+31
| const tabStyles = css({ | ||
| width: | ||
| type === 'primary' ? '375px' : type === 'assistive' ? '150px' : '335px', | ||
| height: | ||
| type === 'primary' ? '56px' : type === 'assistive' ? '34px' : '44px', | ||
| display: 'flex', | ||
| justifyContent: variant === 'fill' ? 'center' : 'left', | ||
| alignItems: 'center', | ||
| gap: '8px', | ||
| backgroundColor: | ||
| type === 'primary' | ||
| ? 'white' | ||
| : type === 'assistive' | ||
| ? '' | ||
| : 'background.gray', | ||
| borderBottom: type === 'primary' ? '1px solid' : '', | ||
| borderColor: type === 'primary' ? 'line.neutral' : '', | ||
| borderRadius: type === 'primary' ? '' : type === 'assistive' ? '' : '12px', | ||
| padding: type === 'primary' ? '' : '3px', | ||
| }); |
There was a problem hiding this comment.
type을 기준으로 여러 css 스타일을 만들어서 cx로 묶는 방식도 괜찮은 것 같아요!
There was a problem hiding this comment.
ㅠㅠ 이 부분은 객체로 한 번 묶어서 리팩토링 시도해봤었는데, 어제 말한대로 적용이 안됐어서 고민이었는데 cx 참고해보겠습니닷! 감사합니두 👍🏻👍🏻
king2dwellsang
added
Approved 🆗
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.
🤔 어떤 문제가 발생했나요?
🎉 어떻게 해결했나요?
📷 이미지 첨부 (Option)
2024-07-24.5.59.07.mov
TabItem에는 type, variant, selected, text, onClick을 주어야 합니다.
Tab에도 type, variant를 주어야 합니다.
주석 참고하시면 됩니다.
사용할 페이지에서 이렇게 useState와 onClick 함수를 사용해서 구현해야 할 것 같아요.
(이 부분은 더 좋은 아이디어가 있으시면 말씀 부탁드립니다 🥹)