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

[FE] Loading Button으로 인해 Layout이 깨지는 문제 #624

Merged
merged 1 commit into from
Sep 26, 2024

Conversation

Todari
Copy link
Contributor

@Todari Todari commented Sep 25, 2024

issue

구현 목적

2024-09-25.1.42.49.mov

FixedButton 에서 button의 variant가 loading인 경우에 아래의 영상처럼 layout이 깨져 이상하게 보이는 오류가 존재했습니다.
이를 올바르게 수정하여 좋은 사용자경험을 주고자 합니다.

구현 내용

기존에 FixedButton이 아닌, 버튼이 한개일 경우 사용되는 width 240 설정이 적용되어 있어 이를 해제함으로써 해결

🫡 참고사항

@Todari Todari added 🖥️ FE Frontend 🚨 bug bug 🔍 QC quality check labels Sep 25, 2024
@Todari Todari added this to the v2.0.0 milestone Sep 25, 2024
Copy link

@Todari Todari self-assigned this Sep 25, 2024
@Todari Todari linked an issue Sep 25, 2024 that may be closed by this pull request
Copy link
Contributor

@jinhokim98 jinhokim98 left a comment

Choose a reason for hiding this comment

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

애니메이션 도입해서 고급스러워졌는데 디테일까지 좋습니다! 이제 안 깨지고 로딩을 보여줄 수 있을 것 같아요.

@@ -40,7 +40,7 @@ export const FixedButton: React.FC<FixedButtonProps> = forwardRef<HTMLButtonElem
{...htmlProps}
>
{variants === 'loading' ? (
<Lottie animationData={loadingAnimation} loop={true} style={{width: 240, height: 20}} />
<Lottie animationData={loadingAnimation} loop={true} style={{height: '1.25rem'}} />
Copy link
Contributor

Choose a reason for hiding this comment

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

하나 궁금한 것이 있는데 로딩을 넣는 버튼이 매우 작아서 lottie animation보다 작다면 어떻게 되나요?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

FixedButton에서 만들어 준건데, FixedButton component 내부의 이 코드에서 animation보다 작아질 일은 없습니다~

Copy link
Contributor

@soi-ha soi-ha left a comment

Choose a reason for hiding this comment

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

깔-끔한 해결 굳굳쓰

Copy link
Contributor

@pakxe pakxe left a comment

Choose a reason for hiding this comment

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

소소한 버그도 야무지개 주워먹는 토달스

@soi-ha soi-ha merged commit 7fe6b20 into fe-dev Sep 26, 2024
2 checks passed
@soi-ha soi-ha deleted the feature/#620 branch September 26, 2024 06:14
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🚨 bug bug 🖥️ FE Frontend 🔍 QC quality check
Projects
Status: ✅ Done
Development

Successfully merging this pull request may close these issues.

[FE] Loading Button으로 인해 Layout이 깨지는 문제
4 participants