Completed 👊

• List 컴포넌트 구현
• Recoil 도입
• 지도 움직일때, 지도 중심 기준 주변 정보 보여주기
• List에서 거리별 정보 나타내기

( 유저 주변 거리별 정보)

( 지도 이동시 주변 정보 나타내기)

Problems 😿

• Emotion 도입?
  • O => list 컴포넌트 상황별 props 받아서 구현하기 편리함.
  • X => 초기 세팅과 css가 많이 사용되지 않는 점
  • 결국 도입!
  • 초기 세팅 별로 안걸리고 List 컴포넌트 구현하는데 mouseEvent에 따라서 (들어가고 나오고, 클릭) css 적용하는 데 도움이 많이 됐다.
• 지도 위에 컴포넌트 올리기
  • z-index를 사용해서 컴포넌트를 올리면 지도를 움직일 수 없고, z-index를 사용하지 않으면 컴포넌트가 보이지 않았다.
  • z-index를 사용하지 않는 방법을 찾아봤지만, 예제와 kakao developers답변에서도 z-index를 사용했다.
  • 옆에 모달처럼 띄우는 것보다 내가 참조했던 레퍼런스들 지도 앱이나 타다나 쏘카처럼 아래에서 올라오는 형식으로 구현하고 싶었다.
  • 다른 지도 사용하여 구현한 앱을 참조해서 결국 원하는 방식으로 구현했다.
  • 기본 상태에서는 point-event를 none으로 설정해둔다.
  • 마우스가 list 컴포넌트에 위에 있을 때 point-event를 auto로 변경시켜서 scroll 가능하게 한다.

하루 회고 📝

친척집 방문하고 돌아와서 지금까지 했는데, 처음 List 컴포넌트 구현할때, 어떻게 구현할지 고민하면서 지도 사용하는 앱들 찾아보면서 (카카오 지도, 타다, 쏘카 등...) 참고하고 적용해보면서 더 나은 UI/UX를 어떻게 만들지 고민하는 과정이 조금 시간이 걸렸다.
기능 자체의 구현은 어렵진 않았지만 사실 중요하게 생각하고 고민해야될 부분인 것 같다.

Recoil을 도입했는데, 확실히 Redux사용하다 사용해보니 boilerplate코드가 적은게 확실히 느껴졌고, 훨씬 간결하고 가볍다라는 느낌을 많이 받았다. 물론 아직 찍먹정도 수준이긴 하지만...

조금 늦게 시작했지만, 정말 시간 가는 줄 모르고 개발한 것 같다.
완전히 몰입해서 막힌 부분들도 고민하면서 해결하고

내일 지도 움직일때 지나간 부분들 지우는 것 구현하고, 서버에서 적절한 타이밍에 data 업데이트 하는 것도 React Query 도입해서 고민해보자.
오늘도 수고했다.

내일 할일 🏋️

• 지도 이동하면서 범위 아닌 부분들 신호 지우기
• 서버에서 data 시간 맞게 받아오기