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

refactor-fe: Tab 컴포넌트 수정 #680

Merged
merged 5 commits into from
Sep 24, 2024
Merged

refactor-fe: Tab 컴포넌트 수정 #680

merged 5 commits into from
Sep 24, 2024

Conversation

github-actions[bot]
Copy link
Contributor

@github-actions github-actions bot commented Sep 20, 2024

Original issue description

목적

애니메이션 부분 수정합니다.

작업 세부사항

  • Tab컴포넌트 애니메이션 추가
  • input focus 버그 수정

참고 사항

아래의 별표줄 밑에 요구사항 ID만 작성해주세요. Prefix 금지!


TAB_ANIMATE

closes #679

@github-actions github-actions bot added frontend 프론트엔드 refactor 기존 코드 수정 labels Sep 20, 2024
Copy link
Contributor Author

1727069629.005379

Copy link
Contributor Author

1727069637.599449

Copy link
Contributor

@llqqssttyy llqqssttyy 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 58 to 60
if (index !== choices.length - 1) {
inputRefs.current[index + 1]?.focus();
}
Copy link
Contributor

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 }>`
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

@seongjinme seongjinme left a comment

Choose a reason for hiding this comment

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

러기 고생하셨습니다. 애니메이션과 포커스, 그리고 TabPanel에 대한 isVisible 처리가 훨씬 더 깔끔해진 걸 확인했어요. 특별히 예상되는 이슈가 보이지 않아 Approve 드립니다.

Comment on lines -61 to +71
transition: transform 0.2s ease-in-out;
transform: translateY(${({ isVisible }) => (isVisible ? '0' : '1rem')});

${({ isVisible }) => (isVisible ? visibleStyles : hiddenStyles)};
animation: ${showUp} 0.2s ease-in-out;
Copy link
Contributor

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>;
Copy link
Contributor

Choose a reason for hiding this comment

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

👍

@lurgi lurgi merged commit 2097c37 into fe/develop Sep 24, 2024
6 checks passed
@lurgi lurgi deleted the fe-679-TAB_ANIMATE branch September 24, 2024 01:35
llqqssttyy pushed a commit that referenced this pull request Sep 27, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
frontend 프론트엔드 refactor 기존 코드 수정
Projects
Status: 완료
Development

Successfully merging this pull request may close these issues.

3 participants