refactor: SKSK-60 query params를 주입하지 않고 customQuery에서 store 호출하도록 리팩토링

Author: ryu9663

src/pages/Home/components/HomeWithPosition/index.tsx

@@ -3,28 +3,14 @@ import KakaoMap from '@/pages/Home/components/KakaoMap';
 import PlaceList from '@/pages/Home/components/PlaceList';
 import { PlaceListSkeleton } from '@/pages/Home/components/PlaceList/PlaceListSkeleton';
 import { usePlacesQuery } from '@/pages/Home/hooks/usePlacesQuery';
-import { useQueryParamsStore } from '@/pages/Home/hooks/useQueryParamsStore';
 import styles from '../../index.module.scss';
 
 interface HomeWithPositionProps {
   position: PositionType;
 }
 
 export const HomeWithPosition = ({ position }: HomeWithPositionProps) => {
-  const [pickPoint, radius_KM, numOfPlaces] = useQueryParamsStore(state => [
-    state.pickPoint,
-    state.radius_KM,
-    state.numOfPlaces
-  ]);
-  const { data: places, isLoading } = usePlacesQuery(
-    {
-      numOfRows: numOfPlaces,
-      mapX: pickPoint ? pickPoint.lon : position?.lon,
-      mapY: pickPoint ? pickPoint.lat : position?.lat,
-      radius: radius_KM * 1000
-    },
-    position
-  );
+  const { data: places, isLoading } = usePlacesQuery(position);
   return (
     <>
       <KakaoMap position={position} places={places} isLoading={isLoading} />

src/pages/Home/hooks/usePlacesQuery.ts

@@ -4,10 +4,22 @@ import { PlaceParams, PlaceType } from '@/pages/Home/types';
 import { getPlaces } from '@/query/queryFn';
 import queryKeys from '@/query/queryKeys';
 import { PositionType } from '@/pages/Home';
+import { useQueryParamsStore } from '@/pages/Home/hooks/useQueryParamsStore';
+
+export const usePlacesQuery = (position: PositionType) => {
+  const [pickPoint, radius_KM, numOfPlaces] = useQueryParamsStore(state => [
+    state.pickPoint,
+    state.radius_KM,
+    state.numOfPlaces
+  ]);
+
+  const placeParams: PlaceParams = {
+    numOfRows: numOfPlaces,
+    mapX: pickPoint ? pickPoint.lon : position?.lon,
+    mapY: pickPoint ? pickPoint.lat : position?.lat,
+    radius: radius_KM * 1000
+  };
 
-export const usePlacesQuery = (placeParams: PlaceParams, position: PositionType) => {
-  //! TODO 여기에서 useQueryParamsStore 호출? 고민해보기
-  // const [pickPoint, radius_KM, numOfPlaces] = useQueryParamsStore(state => [..])
   const query = useQuery({
     queryKey: queryKeys.PLACES(placeParams),
     queryFn: async () => await getPlaces(placeParams),

src/pages/Home/index.test.tsx

@@ -7,7 +7,7 @@ import { PlaceType } from '@/pages/Home/types';
 import { renderAppWithRouterMatch } from '@/utils/test/renderWidthQuery';
 import { fireEvent, render, screen } from '@testing-library/react';
 
-describe('위치를 모를ㅎ때', () => {
+describe('위치를 모를때', () => {
   test("위치추적 안되었을때 '현재 위치를 받아오고 있다는 문구' 노출", () => {
     render(renderAppWithRouterMatch(<Home />));
     const loadingTextForGettingPosition = screen.getByText('현재 위치를 받아오고 있습니다.');