-
Notifications
You must be signed in to change notification settings - Fork 5
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
Conversation
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.
애니메이션 도입해서 고급스러워졌는데 디테일까지 좋습니다! 이제 안 깨지고 로딩을 보여줄 수 있을 것 같아요.
@@ -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'}} /> |
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.
하나 궁금한 것이 있는데 로딩을 넣는 버튼이 매우 작아서 lottie animation보다 작다면 어떻게 되나요?
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.
FixedButton에서 만들어 준건데, FixedButton component 내부의 이 코드에서 animation보다 작아질 일은 없습니다~
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.
소소한 버그도 야무지개 주워먹는 토달스
issue
구현 목적
2024-09-25.1.42.49.mov
FixedButton 에서 button의 variant가 loading인 경우에 아래의 영상처럼 layout이 깨져 이상하게 보이는 오류가 존재했습니다.
이를 올바르게 수정하여 좋은 사용자경험을 주고자 합니다.
구현 내용
기존에 FixedButton이 아닌, 버튼이 한개일 경우 사용되는 width 240 설정이 적용되어 있어 이를 해제함으로써 해결
🫡 참고사항