[마이페이지] 카드 컴포넌트 스켈레톤 UI 적용

[hoeun0723]

이슈 넘버

• close [마이페이지] 카드 컴포넌트 로딩 스켈레톤 UI 적용 #476

구현 사항

• 카드 컴포넌트 스켈레톤 UI 적용 (3가지 종류의 카드 컴포넌트)

Need Review

• 초반엔 suspense 각각 card 마다 적용해준 후 skeleton 이 띄워지게 했는데, 좋지 않은 코드가 되더라구요 ㅠㅠ
  생각을 많이 해봤는데, 현재 mypage 로딩 될때, 스켈레톤 UI가 아닌, 전체적인 페이지 로딩을 suspense로 잡아주고 있어서 중복 적용이 필요할까? 라는 의문이 들어 이렇게 pr 먼저 날렸습니다.
• 만약, 스켈레톤 UI를 적용하는게 유저 입장에서 더 낫다면, 해당 페이지 전체 로딩을 mypage 부분에 제외하고 스켈레톤 로딩 UI를 카드 컴포넌트 별로 적용하는게 좋을 거 같아요.
• mypage 정보를 mypage.tsx에서 받아온 후, 모든 각각의 컴포넌트들에게 props로 내려주는 형식인지라, suspense를 적용하기가 애매하더라구요.. 이 부분도 조금 더 고민해야할거 같아요 !!!
• 그래서, 전체 페이지 로딩 vs 카드 컴포넌트 로딩 을 의견을 받아본 후 진행하는게 좋을 거 같습니다 !!! 좋은 리뷰 부탁드릴게요 🔥
  @urjimyu @ExceptAnyone @imeureka

📸 스크린샷

Reference

[github-actions]

PR Preview Action v1.4.6
🚀 Deployed preview to https://SWEET-DEVELOPERS.github.io/sweet-client/pr-preview/pr-490/
on branch gh-pages at 2024-03-12 09:15 UTC

[urjimyu]

개인적으로 로딩뷰가 필요한 곳에는 로딩뷰만 주고, 스켈레톤 적용할 곳에는 스켈레톤만 적용하는 것이 좋을 것 같다고 생각해요..! 이전에 공유했던 레퍼런스처럼 로딩 시간이 긴 경우에만 스켈레톤을 주고, 이미지 로딩이 빨라 스켈레톤이 오히려 불편함을 가져온다면 로딩뷰만 적용하는 것이 사용성 측면에서 좋을 것 같다는 생각입니다☺️ 저의 경우 선물 등록은 이미지 때문에 로딩 시간이 꽤 길어서 스켈레톤을 적용하였고, 선물홈처럼 짧은 로딩이 있는 화면에서는 로딩뷰만 적용한 상태예요. 뷰에 맞게 선택해도 괜찮을 것 같아요~!

[ExceptAnyone]

저는 로딩속도에 따라 다르게 해주면 어떨까하는 생각입니다. 저같은 경우에는 썸네일을 업로드하는 과정에서 post와 put이 동시에 이루어져야 하는 상황이기 때문에, 특정 용량 이상의 이미지는 모바일에서 굉장히 느리더라구요. 그 상황에 Loading 스피너와 스켈레톤을 따로 적용시켜보았는데, 비교적 오래 걸리는 상황에서는 스켈레톤이 훨씬 유저 이탈이 적을 것 같더라구요!!

결론적으로 얼마나 오래걸리느냐에 따라 다르게 하는 것은 어떨지 조심스레 의견 내봅니다!

[hoeun0723]

좋은 의견 다들 너무 감사합니다 !! 흠.. 현재 마이페이지 같은 경우는 로딩이 길어지지 않고 있어서 페이지 로딩으로 남겨두는게 좋지 않을까 라는 판단이 드네요. (mypage에서 get method로 한번만 데이터를 받아오다보니 그런거 같아요 !! )

의견 참고하여 마이페이지 카드 컴포넌트는 지금 suspense 범위를 유지해볼까 하는데 괜찮을까요 ~?? @urjimyu @imeureka @ExceptAnyone

괜찮다면 해당 pr은 그냥 닫도록 하겠습니다 !