-
Notifications
You must be signed in to change notification settings - Fork 6
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
refactor-fe: Tab 컴포넌트 수정 #680
Conversation
1727069629.005379 |
1727069637.599449 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
작업 고생하셨습니다~
if (index !== choices.length - 1) { | ||
inputRefs.current[index + 1]?.focus(); | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
마지막 Input이 아닐 때 엔터가 입력될 경우 다음 input으로 포커스가 이동하는 기능이 추가됐네요.👍
이건 그냥 취향 차이인 것 같은데, early return을 사용하는 경우가 아니니 그냥 if-else문으로 연결하는 것도 좋을 것 같습니다.
조건을 1번만 이해해도 된다면 코드가 더 쉽게 읽히니까요 :)
꼭 고칠 필요는 없으니 자유롭게 반영해 주세요!
@@ -51,17 +61,14 @@ const TabButton = styled.button<{ isActive: boolean }>` | |||
} | |||
`; | |||
|
|||
const TabPanel = styled.div<{ isVisible: boolean }>` |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
제안했던 부분이 채택됐네용😎
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
러기 고생하셨습니다. 애니메이션과 포커스, 그리고 TabPanel
에 대한 isVisible
처리가 훨씬 더 깔끔해진 걸 확인했어요. 특별히 예상되는 이슈가 보이지 않아 Approve 드립니다.
transition: transform 0.2s ease-in-out; | ||
transform: translateY(${({ isVisible }) => (isVisible ? '0' : '1rem')}); | ||
|
||
${({ isVisible }) => (isVisible ? visibleStyles : hiddenStyles)}; | ||
animation: ${showUp} 0.2s ease-in-out; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
keyframes
를 이용한 translateY
애니메이션으로 깔끔하게 정리되었네요 👍
return <S.TabPanel isVisible={isVisible}>{children}</S.TabPanel>; | ||
return isVisible && <S.TabPanel>{children}</S.TabPanel>; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
👍
Co-authored-by: Jeongwoo Park <[email protected]>
Original issue description
목적
작업 세부사항
참고 사항
TAB_ANIMATE
closes #679