Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Feature/BAR-161] Tab 컴포넌트 Switcher 디자인 구현 #42

Merged
merged 9 commits into from
Jan 20, 2024

Conversation

dmswl98
Copy link
Member

@dmswl98 dmswl98 commented Jan 16, 2024

Summary

구현 내용 및 작업한 내역을 요약해서 적어주세요

To Reviewers

PR을 볼 때 주의깊게 봐야하거나 말하고 싶은 점을 적어주세요

2024-01-19.2.58.21.mov
  • 기존의 Tab을 filter라고 정의하고, 추가적으로 switcher 타입도 구현해두었어요.
  • 다행히 만들어두었던 마크업을 활용해서 만들 수 있었어요... 😮‍💨
2024-01-18.2.23.33.mov
  • 특정 타입에만(switcher) 아이콘을 허용하는게 코드적으로도 부자연스러운 것 같아 범용적으로 아이콘을 넣을 수 있도록 구현해두었어요.

이슈

  • sprinkles를 이용해서 typography를 작성했을 때, hover 상태에 특정 font-weight을 변경하는 부분은 적용이 되지 않아 일단 임시로 sprinkles를 사용하지 않고 작성해두었어요.
  • 코드가 많이 난잡합니다.. 개선할 부분이 있다면 코멘트 남겨주세요.

How To Test

PR의 기능을 확인하는 방법을 상세하게 적어주세요

  • storybook 확인해주세요!

Copy link

Copy link
Member

@wonjin-dev wonjin-dev left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

고생하셨습니다 ..!!!

src/components/Tabs/components/TabsTrigger.tsx Outdated Show resolved Hide resolved
Comment on lines +53 to +55
fontSize: '16px',
fontWeight: 500,
lineHeight: '19px',
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@dmswl98
여기서는 sprinkle 사용이 어렵나요?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ㅋㅋㅋ위에 적어두었는데...🤣

sprinkles를 이용해서 typography를 작성하는 경우,
만약 hover 상태에 typography의 특정 속성을 변경하는 코드를 작성하면 적용되지 않더라구요!
그래서 일단 임시로 sprinkles를 사용하지 않고 작성해두었어요.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

앗앗...ㅎㅎ 죄송합니다. 이전에 말씀주셨던 그 문제라 비슷한 경우인가 보군요.....ㅠㅠ 저도 주말에 반드시 한번 봐보겟습니다!

Copy link
Contributor

@miro-ring miro-ring left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

수고하셨습니다!

Comment on lines +119 to +124
<Tabs type="filter" defaultValue="끄적이는">
<Tabs.List>
<Tabs.Trigger
value="끄적이는"
icon={{ default: 'pencilDefault', active: 'pencilActive' }}
>
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@dongkyun-dev @wonjin-dev
개인적으로 궁금한 부분인데
아이콘 상태에 따라 구분짓고 아이콘과 관련된 값을 그룹핑하기 위해 객체 prop으로 정의해두었는데 이렇게도 많이 사용하나요? 👀

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@dmswl98
저라면 굳이 객체로 그룹핑하지 않았을 것 같긴 합니다.

@dmswl98 dmswl98 merged commit 5359425 into main Jan 20, 2024
@dmswl98 dmswl98 deleted the feature/BAR-161 branch January 20, 2024 05:40
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants