Merge pull request #202 from mbti-nf-team/feat/google-node-api

src/app/api/google-text-search/route.ts → src/app/api/google/search/route.ts

@@ -13,6 +13,7 @@ export async function GET(request: NextRequest) {
   const requestHeaders = new Headers(request.headers);
 
   const query = searchParams.get('query');
+  const nextCursor = searchParams.get('nextCursor');
 
   if (!query) {
     return NextResponse.json(null, {
@@ -27,6 +28,8 @@ export async function GET(request: NextRequest) {
       key: process.env.NEXT_PUBLIC_GOOGLE_MAP_API_KEY,
       query,
       region: 'KR',
+      opennow: false,
+      pagetoken: nextCursor ?? undefined,
     },
   });
 

src/components/detail/PlaceDetailWindow/index.tsx

@@ -21,7 +21,7 @@ import StarRating from '@/components/common/StarRating';
 import useRenderToast from '@/hooks/useRenderToast';
 import { paramsSerializer } from '@/lib/apis';
 import { CloseIcon, ShareIcon } from '@/lib/assets/icons';
-import { PlacesWithSearchResult } from '@/lib/types/search';
+import { PlacesWithDetailSearchResult } from '@/lib/types/search';
 
 import styles from './index.module.scss';
 
@@ -47,7 +47,7 @@ type Props = {
   isVisible: boolean;
   isLoading: boolean;
   onClose: () => void;
-  placeDetail: PlacesWithSearchResult<true> | null;
+  placeDetail: PlacesWithDetailSearchResult<true> | null;
 };
 
 function PlaceDetailWindow({

src/components/detail/PlaceDetailWindowContainer/index.tsx

@@ -2,8 +2,8 @@ import { useEffect } from 'react';
 
 import useGetPlaceDetails from '@/hooks/maps/useGetPlaceDetails';
 import useGetSearchBlog from '@/hooks/queries/useGetSearchBlog';
-import { PlaceResult } from '@/lib/types/google.maps';
-import { PlacesWithSearchResult } from '@/lib/types/search';
+import { PlaceDetailResult } from '@/lib/types/google.maps';
+import { PlacesWithDetailSearchResult } from '@/lib/types/search';
 import usePlaceDetailWindowStore from '@/stores/placeDetailWindow';
 
 import PlaceDetailWindow from '../PlaceDetailWindow';
@@ -16,7 +16,7 @@ function PlaceDetailWindowContainer() {
   } = usePlaceDetailWindowStore(['isOpenPlaceDetailWindow', 'onClosePlaceDetailWindow', 'placeId']);
 
   const { data: placesWithSearchResult, isLoading } = useGetSearchBlog<true>({
-    placesResult: [placeDetailsState as PlaceResult],
+    placesResult: [placeDetailsState as PlaceDetailResult],
     includePost: true,
     enabled: !!placeDetailsState,
   });
@@ -36,7 +36,7 @@ function PlaceDetailWindowContainer() {
     <PlaceDetailWindow
       isLoading={isLoading}
       isVisible={isOpenPlaceDetailWindow}
-      placeDetail={placesWithSearchResult?.[0] as PlacesWithSearchResult<true> | null}
+      placeDetail={placesWithSearchResult?.[0] as PlacesWithDetailSearchResult<true> | null}
       onClose={onCloseDetailWindow}
     />
   );

src/components/map/LoadMapContainer/index.tsx

@@ -1,9 +1,10 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 
+import { Status } from '@googlemaps/google-maps-services-js';
 import { useGoogleMap } from '@react-google-maps/api';
 
 import PlaceDetailWindowContainer from '@/components/detail/PlaceDetailWindowContainer';
-import useTextSearch from '@/hooks/maps/useTextSearch';
+import useGetGoogleSearch from '@/hooks/queries/useGetGoogleSearch';
 import usePlaceDetailWindowStore from '@/stores/placeDetailWindow';
 import useRecentSearchStore from '@/stores/recentSearch';
 
@@ -19,22 +20,22 @@ type Props = {
 
 function LoadMapContainer({ defaultCountryCode, defaultPlaceId, defaultPlaceName }: Props) {
   const map = useGoogleMap();
+  const [searchKeyword, setSearchKeyword] = useState<string>('');
 
   const { addRecentSearch: saveNextKeyword } = useRecentSearchStore(['addRecentSearch']);
   const { onOpenPlaceDetailWindow } = usePlaceDetailWindowStore(['onOpenPlaceDetailWindow']);
+
   const {
-    placesResult, onTextSearch, isZeroResult,
-  } = useTextSearch(map);
+    query: { data: places, isSuccess }, refState,
+  } = useGetGoogleSearch({ keyword: searchKeyword });
 
   const handleSubmit = (keyword: string) => {
-    onTextSearch({ query: keyword });
+    setSearchKeyword(keyword);
     saveNextKeyword(keyword);
   };
 
   useEffect(() => {
     if (defaultPlaceId && defaultPlaceName && map) {
-      onTextSearch({ query: defaultPlaceName });
-
       onOpenPlaceDetailWindow({
         placeId: defaultPlaceId,
         placeName: defaultPlaceName,
@@ -60,15 +61,39 @@ function LoadMapContainer({ defaultCountryCode, defaultPlaceId, defaultPlaceName
     });
   }, [defaultCountryCode, map]);
 
+  useEffect(() => {
+    if (
+      !map
+      || !isSuccess
+      || places?.pages?.[0]?.status === Status.ZERO_RESULTS
+      || !places?.pages.length
+    ) {
+      return;
+    }
+
+    const markerBounds = new google.maps.LatLngBounds();
+
+    places.pages.flatMap((place) => place.results).forEach((place) => {
+      if (place?.geometry?.location) {
+        markerBounds.extend(place.geometry.location);
+      }
+    });
+
+    map.fitBounds(markerBounds);
+  }, [map, isSuccess, places]);
+
   return (
     <>
       <SearchInput onSubmit={handleSubmit} />
-      {placesResult.map((place) => (
-        <PlaceResultMarker key={place.place_id} place={place} />
+      {places?.pages?.map((placeResult) => (
+        placeResult.results.map((place) => (
+          <PlaceResultMarker key={place.place_id} place={place} />
+        ))
       ))}
       <PlaceBottomSheet
-        placesResult={placesResult}
-        isZeroResult={isZeroResult}
+        places={places}
+        refState={refState}
+        isSuccess={isSuccess}
       />
       <PlaceDetailWindowContainer />
     </>

src/components/map/PlaceBottomSheet/index.tsx

@@ -1,15 +1,15 @@
-import { useEffect, useState } from 'react';
 import { BottomSheet } from 'react-spring-bottom-sheet';
 
-import { checkEmpty } from '@nf-team/core';
+import { Status } from '@googlemaps/google-maps-services-js';
+import { checkEmpty, isEmpty } from '@nf-team/core';
+import { InfiniteData } from '@tanstack/react-query';
 
 import Button from '@/components/common/Button';
 import Spinner from '@/components/common/Spinner';
 import useGetSearchBlog from '@/hooks/queries/useGetSearchBlog';
-import useIntersectionObserver from '@/hooks/useIntersectionObserver';
-import { PlaceResult } from '@/lib/types/google.maps';
-import { SelectedPlace } from '@/lib/types/search';
-import usePlaceStore from '@/stores/place';
+import { InfiniteRefState } from '@/lib/types';
+import { TextSearchPlace } from '@/lib/types/google.maps';
+import { PlacesWithSearchResult, SelectedPlace } from '@/lib/types/search';
 import usePlaceDetailWindowStore from '@/stores/placeDetailWindow';
 import { targetFalseThenValue } from '@/utils';
 
@@ -18,52 +18,38 @@ import PlaceBottomSheetItem from '../PlaceBottomSheetItem';
 import styles from './index.module.scss';
 
 type Props = {
-  placesResult: PlaceResult[];
-  isZeroResult?: boolean;
+  places?: InfiniteData<TextSearchPlace>;
+  refState: InfiniteRefState<HTMLDivElement>;
+  isSuccess: boolean;
 };
 
-function PlaceBottomSheet({ placesResult, isZeroResult }: Props) {
-  const [isOpen, setIsOpen] = useState<boolean>(false);
-
-  const { pagination: placePagination } = usePlaceStore(['pagination']);
-
-  const refState = useIntersectionObserver<HTMLDivElement>({
-    isRoot: true,
-    fetchNextPage: placePagination?.fetchNextPage,
-    hasNextPage: placePagination?.hasNextPage,
-    intersectionOptions: {
-      rootMargin: '80px',
-    },
-  });
+function PlaceBottomSheet({ places, refState, isSuccess }: Props) {
+  const placesResult = checkEmpty(places?.pages.flatMap((value) => value.results));
+  const isZeroResult = isSuccess && (
+    isEmpty(placesResult) || places?.pages?.[0].status === Status.ZERO_RESULTS
+  );
 
   const {
     onOpenPlaceDetailWindow, isOpenPlaceDetailWindow,
   } = usePlaceDetailWindowStore(['onOpenPlaceDetailWindow', 'isOpenPlaceDetailWindow']);
 
+  // TODO - 마이그레이션
   const {
-    data: placesWithSearchResult, isFetching,
+    data: placesWithSearchResult, isFetching, isSuccess: isSuccessPlacesWithSearchResult,
   } = useGetSearchBlog<false>({
     placesResult,
     includePost: false,
-    enabled: !!placesResult?.length && !isZeroResult,
+    enabled: !isEmpty(placesResult),
   });
 
   const onClickPlaceItem = (
     selectedPlaceForm: SelectedPlace,
   ) => onOpenPlaceDetailWindow(selectedPlaceForm);
 
-  useEffect(() => {
-    if (placesResult?.length || isZeroResult) {
-      setIsOpen(true);
-      return;
-    }
-
-    setIsOpen(false);
-  }, [placesResult?.length, isZeroResult]);
-
   return (
     <BottomSheet
-      open={isOpen && !isOpenPlaceDetailWindow}
+      open={!isOpenPlaceDetailWindow
+        && (isZeroResult || isSuccessPlacesWithSearchResult || isFetching)}
       blocking={false}
       defaultSnap={({ maxHeight }) => (isZeroResult ? 168 : maxHeight / 2)}
       snapPoints={({ maxHeight }) => (isZeroResult ? [168] : [
@@ -90,7 +76,7 @@ function PlaceBottomSheet({ placesResult, isZeroResult }: Props) {
                   !(placesWithSearchResult.length - 1 === index),
                 )(refState.lastItemRef)
               }
-              place={place}
+              place={place as PlacesWithSearchResult}
               onClick={onClickPlaceItem}
             />
           ))}

src/components/map/PlaceResultMarker/index.tsx

@@ -30,7 +30,7 @@ function PlaceResultMarker({ place }: Props) {
       icon={icon}
       onClick={onClickMarker}
       title={place.name}
-      position={place.geometry?.location as google.maps.LatLng}
+      position={place.geometry?.location}
     />
   );
 }

src/hooks/maps/useGetPlaceDetails.ts

@@ -3,19 +3,19 @@ import { useCallback, useState } from 'react';
 import { useGoogleMap } from '@react-google-maps/api';
 
 import useRenderToast from '@/hooks/useRenderToast';
-import { PlaceResult } from '@/lib/types/google.maps';
+import { PlaceDetailResult } from '@/lib/types/google.maps';
 
 const hasPlaceLocation = (
   placeDetail: google.maps.places.PlaceResult | null,
-): placeDetail is PlaceResult => Boolean(placeDetail?.geometry?.location);
+): placeDetail is PlaceDetailResult => Boolean(placeDetail?.geometry?.location);
 
 function useGetPlaceDetails():
-[PlaceResult | null, (placeId: string) => void, () => void] {
+[PlaceDetailResult | null, (placeId: string) => void, () => void] {
   const map = useGoogleMap();
   const renderToast = useRenderToast();
   const [
     placeDetailsState, setPlaceDetailsState,
-  ] = useState<PlaceResult | null>(null);
+  ] = useState<PlaceDetailResult | null>(null);
 
   const onGetPlaceDetails = useCallback((placeId: string) => {
     if (!map) {

src/hooks/maps/useTextSearch.ts

@@ -20,7 +20,7 @@ function useTextSearch(map: google.maps.Map | null) {
   ) {
     if (status === google.maps.places.PlacesServiceStatus.OK && places?.length) {
       setIsZeroResult(false);
-      addPlaces(filteredPlaces(places));
+      addPlaces(filteredPlaces(places as any) as any);
       setPagination({
         hasNextPage: pagination?.hasNextPage,
         fetchNextPage: () => {
@@ -54,27 +54,6 @@ function useTextSearch(map: google.maps.Map | null) {
     }
   }, [map]);
 
-  useEffect(() => {
-    if (!placesResult.length || !map || isZeroResult) {
-      return;
-    }
-
-    const markerBounds = new google.maps.LatLngBounds();
-
-    placesResult.forEach((place) => {
-      if (place?.geometry?.viewport) {
-        markerBounds.union(place.geometry.viewport);
-      }
-
-      if (place?.geometry?.location) {
-        markerBounds.extend(place.geometry.location);
-      }
-    });
-
-    map.fitBounds(markerBounds);
-    map.fitBounds(markerBounds);
-  }, [placesResult, map, isZeroResult]);
-
   return {
     onTextSearch,
     placesResult,

src/hooks/queries/useGetGoogleSearch.ts

@@ -1,13 +1,40 @@
-import { useQuery } from '@tanstack/react-query';
+import { checkEmpty } from '@nf-team/core';
+import { useInfiniteQuery } from '@tanstack/react-query';
 
 import { fetchGoogleSearch } from '@/lib/apis/search';
+import { TextSearchPlace } from '@/lib/types/google.maps';
+import { filteredPlaces } from '@/utils';
+
+import useIntersectionObserver from '../useIntersectionObserver';
 
 function useGetGoogleSearch({ keyword }: { keyword: string; }) {
-  const query = useQuery([keyword], () => fetchGoogleSearch({ keyword }), {
+  const query = useInfiniteQuery<TextSearchPlace>(['googleSearch', keyword], ({ pageParam }) => fetchGoogleSearch({ keyword, nextCursor: pageParam }), {
     enabled: !!keyword,
+    getNextPageParam: ({ next_page_token }) => next_page_token,
+    select: (response) => ({
+      ...response,
+      pages: checkEmpty(response?.pages).map((places) => ({
+        ...places,
+        results: filteredPlaces(checkEmpty(places?.results)),
+      })),
+    }),
+  });
+
+  const { hasNextPage, fetchNextPage } = query;
+
+  const refState = useIntersectionObserver<HTMLDivElement>({
+    isRoot: true,
+    fetchNextPage,
+    hasNextPage,
+    intersectionOptions: {
+      rootMargin: '80px',
+    },
   });
 
-  return query;
+  return {
+    query,
+    refState,
+  };
 }
 
 export default useGetGoogleSearch;

src/hooks/queries/useGetSearchBlog.ts

@@ -1,15 +1,31 @@
+import { useMemo } from 'react';
+
 import { checkEmpty } from '@nf-team/core';
 import { useQuery } from '@tanstack/react-query';
 
 import { fetchAllSettledSearchBlogs } from '@/lib/apis/search';
-import { PlaceResult } from '@/lib/types/google.maps';
+import { PlaceDetailResult, PlaceResult } from '@/lib/types/google.maps';
 
 const TEN_MINUTES = 600000;
 
+const isPlaceDetail = <T = boolean>(
+  placesResult: PlaceDetailResult[] | PlaceResult[],
+  includePost?: T,
+): placesResult is PlaceDetailResult[] => Boolean(includePost) === true;
+
 function useGetSearchBlog<T = boolean>({
   placesResult, includePost, enabled,
-}: { placesResult: PlaceResult[]; includePost?: T; enabled?: boolean; }) {
-  const placeName = placesResult.filter((place) => place).map((place) => place?.name);
+}: {
+  placesResult: PlaceDetailResult[] | PlaceResult[];
+  includePost?: T;
+  enabled?: boolean; }) {
+  const placeName = useMemo(() => {
+    if (isPlaceDetail<T>(placesResult, includePost)) {
+      return placesResult.filter((place) => place).map((place) => place?.name);
+    }
+
+    return placesResult.filter((place) => place).map((place) => place?.name);
+  }, [placesResult, includePost]);
 
   const query = useQuery(
     [{ placeName, includePost }],