feat : 인포윈도우 인터랙션 구현 및 비동기 데이터 스켈레톤 처리

[Sangjun-man]

Motivation

스크린샷

https://user-images.githubusercontent.com/66112027/216886152-73a52718-1732-449c-9826-1cf12ddf9dc4.mov

35

• 이미지 슬라이드, 블러 인터랙션 구현

  • 이미지 슬라이드 인터랙션 구현
  • 피그마 프로토타입처럼 구현하기 위해서 styledCarousel 대신 직접 imageSlide를 구현해서 사용했습니다...
  • 인포윈도우 높이에 따른 인터랙션 구현
  • 이미지 크기가 인포윈도우 높이에 맞게 변경됩니다
  • 블러 상태가 인포윈도우 높이에 맞게 변경됩니다

• useRecoilValueLodable로 받아오는 비동기 데이터 부분에 스켈레톤을 구현하였습니다

  • 인포윈도우의 카페 제목, 이미지 등 api 요청으로 받아온 데이터를 보여주는 부분에 응답 대기중일 경우 스켈레톤 처리했습니다
  • MakeLodableSuspens 컴포넌트로 해당 부분을 감싸고, loading시 보여줄 컴포넌트를 loading props로 보내주면 됩니다

Key Changes

• infowindow 컴포넌트의 구조를 대폭 수정하였습니다

• StyledCarousel 대신 ImageSlide 컴포넌트를 사용합니다

• handle 함수 내에 css 속성을 바꿔주는 부분을 따로 분리하였습니다

  • @component/Infowindow/view 폴더 내에 작성중입니다.

To Reviewers

• 하다보니 커밋을 나누지 못하고 한번에 해버렸네요.. 양해부탁드립니다,,
• 아직 세팅 관련 코드 작성과 인터랙션 코드 관련 리팩토링을 다 하지 못한 관계로 draft 상태로 두고 이후에 pr로 바꿔두겠습니다

[netlify[bot]]

✅ Deploy Preview for hipspot-webview ready!

Name	Link
🔨 Latest commit	08d7cd1ffaf6abb18294751d100124aadfb7a1d1
🔍 Latest deploy log	https://app.netlify.com/sites/hipspot-webview/deploys/63e11b6ac46cc00008578dc0
😎 Deploy Preview	https://deploy-preview-40--hipspot-webview.netlify.app/
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[Sangjun-man]

https://user-images.githubusercontent.com/66112027/216959546-fc690fb9-7e57-445c-bffa-cc23fcf708cd.mov

완료했습니다~

[sjsjsj1246]

컴포넌트가 데이터를 직접 가져오다 보니 테스트 하기가 힘드네요..

[sjsjsj1246]

리코일 문서 보면서 테스트 방식은 다시 생각 해 보겠습니다