[FE] FIX: 새로고침 버튼 누를 때 나타나는 스크롤바 제거

innovationacademy-kr / Cabi

사물함 관리 서비스

https://cabi.42seoul.io

MIT License

62 stars 15 forks source link

[FE] FIX: 새로고침 버튼 누를 때 나타나는 스크롤바 제거 #1693

Closed jihyunk03 closed 1 month ago

jihyunk03 commented 1 month ago

해당 사항 (중복 선택)

[ ] FEAT : 새로운 기능 추가 및 개선
[x] FIX : 기존 기능 수정 및 정상 동작을 위한 간단한 추가, 수정사항
[ ] BUG : 버그 수정
[ ] REFACTOR : 결과의 변경 없이 코드의 구조를 재조정
[ ] TEST : 테스트 코드 추가
[ ] DOCS : 코드가 아닌 문서를 수정한 경우
[ ] REMOVE : 파일을 삭제하는 작업만 수행
[ ] RENAME : 파일 또는 폴더명을 수정하거나 위치(경로)를 변경
[ ] ETC : 이외에 다른 경우 - 어떠한 사항인지 작성해주세요.

설명

MainPage에서 isLoading의 값에 따라 보이는 컴포넌트 변경
LoadingAnimation에 스크롤 기능 제거하기 위해 hidden 추가

https://github.com/innovationacademy-kr/42cabi/issues/1669

jihyunk03 commented 1 month ago

컨벤션에 삼항연산자를 지양한다고 되어있는데, if else로 return 하는 것보다 가독성이 좋다고 생각했습니다.. 그리고 해당 컴포넌트에서 return되는 최상위 컴포넌트가 하나여서 <></> 부분을 제거하였더니, 변경된 부분이 많아졌습니다.. (실제 변경된 부분은 삼항 연산자 부분 뿐입니다)

jihyunk03 commented 1 month ago

이번 이슈가 로딩창을 확인하는 것이었는데 로딩이 엄청 빨라서 확인하기 힘들던데 어떤 방식으로 확인해보셨나요? 저는 개발자도구 network탭에서 throttling을 걸어서 로딩이 오래 걸리게 만들었는데 또 좋은 방법이 있는지 궁금합니다.

먼저 크롬에서는 로딩 이후에 스크롤을 내려도 별 문제가 생기진 않지만, 사파리에서는 로딩 중 스크롤을 내리면 해당 컴포넌트가 밀려서 사라지는 현상이 생겼습니다. 이를 실제로 확인하기 위해 onclick에서 진행되는 refreshCabinetList 함수 내부에서 setTimeout의 값을 늘렸습니다!

wet6123 commented 1 month ago

@jihyunk03

먼저 크롬에서는 로딩 이후에 스크롤을 내려도 별 문제가 생기진 않지만, 사파리에서는 로딩 중 스크롤을 내리면 해당 컴포넌트가 밀려서 사라지는 현상이 생겼습니다.

오 이건 원인이 뭘까요? 사파리에 쓰로틀링 기능이 사라진것 같아서 사파리로 테스트를 해보지는 못했는데 신기하네요.

jihyunk03 commented 1 month ago

@wet6123

오 이건 원인이 뭘까요? 사파리에 쓰로틀링 기능이 사라진것 같아서 사파리로 테스트를 해보지는 못했는데 신기하네요.

실은 저도 원인은 모르고, 사파리를 자주 사용하다보니 알게된것 같아요 ㅎㅎ 원인을 알게되면 말씀드릴게요!

jnkeniaem commented 1 month ago

첫번째 이슈 해결 🎊 추카추카

저두 return 문에선 삼항연산자나 논리 연산자 사용하는 편입니당 ㅎㅎ

jnkeniaem commented 1 month ago

assignees, labels 선택해주세요~