tanstack-query key 관리 방식 개선 및 Products 컴포넌트 적용, 기타 타입 개선, 마지막 방문 동네 설정(찐막)

[youzysu]

Issues

• 58

What is this PR? 👓

• tanstack-query key 관리 방식 개선(@lukemorales/query-key-factory 라이브러리 설치)
• Products 컴포넌트 적용
• 기존 유저인 경우 스토리지 저장된 동네 비교하여 마지막 방문 동네 설정하도록 개선

To Reviewer

• 일단 동일한 queryKey만 일관성 있게 사용하기 위해 createQueryKeys API로 queryKey만 관리하도록 했어요.
• mutate hook들은 지금처럼 사용하는 ProductMoreButton에 두고, invalidate 해줘야 하는 쿼리를 요청하는 컴포넌트(Products 컴포넌트 생성하는 컴포넌트)와 가까운 위치에서 props로 전달할 수 있도록 했어요.
  • 호이가 리뷰도 주셨지만 제 생각에도 ProductMoreButton 컴포넌트가 어떤 쿼리키의 쿼리를 갱신해야 하는지 직접 아는게 아니라, 이를 생성하는 부모로부터 전달받도록 하는게 더 적절하다고 판단해서 반영했습니다!
• productId, categoryId 등 id는 서버 상태와 동일한 타입으로 관리하는게 헷갈리지 않을 것 같아서 모두 다시 number 타입으로 변경했어요!
• api 함수에 넘기는 인자 타입도 null이나 undefined로 명시하지 않고 optional로 받고 전반적으로 반영했습니다.