[Feature/BAR-53] Tabs 컴포넌트 구현 #17
Conversation
This comment was marked as outdated.
This comment was marked as outdated.
| children, | ||
| defaultValue, | ||
| }: PropsWithChildren<TabsRootProps>) => { | ||
| const [selectedTab, setSelectedTab] = useState(defaultValue); |
There was a problem hiding this comment.
@dmswl98
탭을 구현할 때 선택 요소를 단순 state로만 관리하게 되면 다음과 같은 경우들을 대응하기 어려워지더라고요!
- 첫진입시 '끄적이는'이 아닌 '참고하는'이 선택된 상태로 진입되어야하는 경우
- '참고하는'이 선택된 상태에서 다른 페이지를 이동했다가 다시 돌아왔을 때 '참고하는'이 선택된 상태여야 하는 경우
그래서 선택값에 대한 내용은 URL에 path 혹은 query로 관리하는게 어떨까요? (path로 관리하게 되면 말씀 주신 깜빡이는 이슈가 있을 것 같습니다.)
| export const tabsTrigger = recipe({ | ||
| base: { | ||
| fontSize: '15px', | ||
| fontWeight: 500, | ||
| lineHeight: '18px', | ||
| letterSpacing: '0px', | ||
| paddingBottom: '4px', | ||
| borderBottom: '2px solid transparent', | ||
| transition: 'all 150ms ease-in-out', | ||
|
|
||
| ':hover': { | ||
| fontWeight: 700, | ||
| }, | ||
| }, | ||
| variants: { | ||
| isActive: { | ||
| true: { | ||
| fontWeight: 700, | ||
| borderBottomColor: '#121212', | ||
| }, | ||
| }, | ||
| }, | ||
| }); |
There was a problem hiding this comment.
📌 이슈 기록
typography sprinkles를 사용하니 isActive 값에 따라 변해야 하는 fontWeight 속성 값이 적용되지 않아요. 화면을 보니 fontWeight이 700이 되었다가 base 스타일인 500으로 변경되는 것을 확인했습니다. 추측하기로는 base 스타일로 덮어씌워지는 것 같아요. 추후 다시 리팩토링 작업이 필요할 것 같습니다.
export const tabsTrigger = recipe({
base: [
sprinkles({ typography: '15/Body/Medium' }),
{
paddingBottom: '4px',
borderBottom: '2px solid transparent',
transition: 'all 150ms ease-in-out',
':hover': {
fontWeight: 700,
},
},
],
variants: {
isActive: {
true: {
fontWeight: 700,
borderBottomColor: '#121212',
},
},
},
});There was a problem hiding this comment.
@dmswl98
요거 확인해서 수정 PR 올리도록 하겠습니다!! 감사합니다 ㅎㅎ
| { | ||
| padding: '16px 0 12px', | ||
| gap: '40px', | ||
| backgroundColor: COLORS['Grey/White'], |
There was a problem hiding this comment.
@dongkyun-dev
color와 background도 sprinkles로 정의되어 있는데, 이미 createGlobalTheme에 정의되어 있어 상수로서 사용해도 무방할 것 같습니다!
There was a problem hiding this comment.
@dmswl98
요게 그래서 사실 sprinkle로 둘지 고민했던 부분인데 아예 사용하지 않을 것 같다면 제거하는 것은 어떨까요!?
Summary
To Reviewers
How To Test