refactor: 장소 상세 api node.js bff로 마이그레이션 (#213)

src/app/api/search/places/detail/route.ts → src/app/api/search/places/[placeId]/route.ts

@@ -2,7 +2,7 @@ import { NextRequest, NextResponse } from 'next/server';
 
 import { PlaceDetailsResponseData } from '@googlemaps/google-maps-services-js';
 
-import { fetchNaverSearchBlog } from '@/app/api';
+import { fetchNaverSearchBlog } from '@/app/api/handler';
 import { paramsSerializer } from '@/lib/apis';
 import { PlaceDetail } from '@/lib/types/google.maps';
 

src/app/api/search/places/route.ts

@@ -6,7 +6,7 @@ import { checkEmpty } from '@nf-team/core';
 import { paramsSerializer } from '@/lib/apis';
 import { filteredPlaces } from '@/utils';
 
-import { fetchAllSettledSearchNaverBlogs } from '../..';
+import { fetchAllSettledSearchNaverBlogs } from '../../handler';
 
 export const runtime = 'edge';
 

src/components/detail/PlaceDetailWindow/index.tsx

@@ -47,7 +47,7 @@ type Props = {
   isVisible: boolean;
   isLoading: boolean;
   onClose: () => void;
-  placeDetail: PlacesWithSearchResult<true> | null;
+  placeDetail?: PlacesWithSearchResult<true>;
 };
 
 function PlaceDetailWindow({
@@ -197,11 +197,11 @@ function PlaceDetailWindow({
                       ))}
                     </div>
                   </Accordion>
-                  {placeDetail?.searchBlogPost.status === 'fulfilled' && (
+                  {placeDetail?.searchBlogPost?.status === 'fulfilled' && (
                     <Accordion
                       title="네이버 검색결과"
                       counterColor={blogCount ? 'danger' : 'positive'}
-                      counter={placeDetail?.searchBlogPost.value.total_count}
+                      counter={checkNumber(placeDetail?.searchBlogPost.value?.total_count)}
                       wrapperClassName={styles.reviewAccordionWrapper}
                     >
                       <div className={styles.resultWrapper}>

src/components/detail/PlaceDetailWindowContainer/index.tsx

@@ -1,6 +1,4 @@
-import useGetPlaceDetail from '@/hooks/queries/useGetPlaceDetail';
-import useGetSearchBlog from '@/hooks/queries/useGetSearchBlog';
-import { PlaceResult } from '@/lib/types/google.maps';
+import useGetSearchPlace from '@/hooks/queries/useGetSearchPlace';
 import usePlaceDetailWindowStore from '@/stores/placeDetailWindow';
 
 import PlaceDetailWindow from '../PlaceDetailWindow';
@@ -9,23 +7,17 @@ function PlaceDetailWindowContainer() {
   const {
     isOpenPlaceDetailWindow, onClosePlaceDetailWindow, placeId,
   } = usePlaceDetailWindowStore(['isOpenPlaceDetailWindow', 'onClosePlaceDetailWindow', 'placeId']);
-  const { data: placeDetail, isSuccess } = useGetPlaceDetail({ placeId });
-
-  const { data: placesWithSearchResult, isLoading } = useGetSearchBlog<true>({
-    placesResult: [placeDetail?.result as PlaceResult],
-    includePost: true,
-    enabled: isSuccess && !!placeDetail?.result,
-  });
+  const { data: placesWithSearchResult, isFetching } = useGetSearchPlace({ placeId });
 
   const onCloseDetailWindow = () => {
     onClosePlaceDetailWindow();
   };
 
   return (
     <PlaceDetailWindow
-      isLoading={isLoading}
+      isLoading={isFetching}
       isVisible={isOpenPlaceDetailWindow}
-      placeDetail={placesWithSearchResult?.[0]}
+      placeDetail={placesWithSearchResult?.result}
       onClose={onCloseDetailWindow}
     />
   );

src/components/map/PlaceBottomSheet/index.tsx

@@ -73,7 +73,7 @@ function PlaceBottomSheet({
               onClick={onClickPlaceItem}
             />
           ))}
-          {isFetchingNextPage && (
+          {(isFetchingNextPage || isFetching) && (
             <div className={styles.loadingWrapper}>
               <Spinner isLoading />
             </div>

src/components/map/PlaceBottomSheetItem/index.tsx

@@ -34,8 +34,8 @@ function PlaceBottomSheetItem({ place, onClick, wrapperRef }: Props) {
         <StarRating rating={place?.rating} type="list" />
         <div className={styles.placeUserRatingsTotal}>{`(${checkNumber(user_ratings_total)})`}</div>
       </div>
-      {place.searchBlogPost.status === 'fulfilled' && (
-        <div className={styles.searchTotal}>{`네이버 검색결과 ${numberWithComma(place.searchBlogPost.value.total_count)}개`}</div>
+      {place.searchBlogPost?.status === 'fulfilled' && (
+        <div className={styles.searchTotal}>{`네이버 검색결과 ${numberWithComma(checkNumber(place.searchBlogPost?.value?.total_count))}개`}</div>
       )}
     </li>
   );

src/hooks/queries/useGetSearchPlace.ts

@@ -0,0 +1,20 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { fetchPlaceDetailV2 } from '@/lib/apis/search';
+import { SearchPlace } from '@/lib/types/search';
+
+const TEN_MINUTES = 600000;
+
+function useGetSearchPlace({
+  placeId, sessionToken,
+}: { placeId?: string; sessionToken?: string; }) {
+  const query = useQuery<SearchPlace>(['placeDetailV2', placeId], () => fetchPlaceDetailV2({ placeId: placeId as string, sessionToken }), {
+    enabled: !!placeId,
+    staleTime: TEN_MINUTES,
+    cacheTime: TEN_MINUTES,
+  });
+
+  return query;
+}
+
+export default useGetSearchPlace;

src/lib/apis/search/index.test.ts

@@ -6,7 +6,9 @@ import FIXTURE_NAVER_SEARCH_BLOG from '@/mocks/fixtures/searchBlog';
 import { api, paramsSerializer } from '..';
 
 import { NaverSearchBlogResponse } from './model';
-import { fetchGoogleSearch, fetchNaverSearchBlog, fetchPlaceDetail } from '.';
+import {
+  fetchGoogleSearch, fetchNaverSearchBlog, fetchPlaceDetail, fetchPlaceDetailV2,
+} from '.';
 
 jest.mock('..');
 
@@ -108,4 +110,36 @@ describe('search API', () => {
       });
     });
   });
+
+  describe('fetchPlaceDetailV2', () => {
+    const placeId = 'placeId';
+    const sessionToken = 'sessionToken';
+    const mockResponse: TextSearchPlace = {
+      error_message: '',
+      status: Status.OK,
+      results: [],
+    };
+
+    beforeEach(() => {
+      (api as jest.Mock).mockReturnValueOnce(mockResponse);
+    });
+
+    it(`GET /search/places/${placeId}`, async () => {
+      const response = await fetchPlaceDetailV2({
+        placeId,
+        sessionToken,
+      });
+
+      expect(response).toEqual(mockResponse);
+      expect(api).toBeCalledWith({
+        method: 'GET',
+        headers: {
+          'session-token': sessionToken,
+        },
+        url: `/search/places/${placeId}`,
+        paramsSerializer,
+        isBFF: true,
+      });
+    });
+  });
 });

src/lib/apis/search/index.ts

@@ -1,7 +1,11 @@
 import { api, paramsSerializer } from '..';
 
 import {
-  NaverSearchBlogResponse, PlaceDetailsResponse, SearchPlacesResponse, TextSearchPlaceResponse,
+  NaverSearchBlogResponse,
+  PlaceDetailsResponse,
+  SearchPlaceResponse,
+  SearchPlacesResponse,
+  TextSearchPlaceResponse,
 } from './model';
 
 const BATCH_SIZE = 10;
@@ -107,3 +111,19 @@ export const fetchPlaceDetail = async ({
 
   return response;
 };
+
+export const fetchPlaceDetailV2 = async ({
+  placeId, sessionToken,
+}: { placeId: string; sessionToken?: string; }) => {
+  const response = await api<SearchPlaceResponse>({
+    method: 'GET',
+    url: `/search/places/${placeId}`,
+    headers: {
+      'session-token': sessionToken,
+    },
+    paramsSerializer,
+    isBFF: true,
+  });
+
+  return response;
+};

src/lib/apis/search/model.ts

@@ -1,7 +1,7 @@
 import { TextSearchResponseData } from '@googlemaps/google-maps-services-js';
 
 import { PlaceDetail } from '@/lib/types/google.maps';
-import { NaverSearchBlog, SearchPlaces } from '@/lib/types/search';
+import { NaverSearchBlog, SearchPlace, SearchPlaces } from '@/lib/types/search';
 
 export type NaverSearchBlogResponse<T> = NaverSearchBlog<T>;
 
@@ -10,3 +10,5 @@ export type TextSearchPlaceResponse = TextSearchResponseData;
 export type PlaceDetailsResponse = PlaceDetail;
 
 export type SearchPlacesResponse = SearchPlaces;
+
+export type SearchPlaceResponse = SearchPlace;

src/lib/types/search.ts

@@ -1,4 +1,4 @@
-import { TextSearchResponseData } from '@googlemaps/google-maps-services-js';
+import { PlaceDetailsResponseData, TextSearchResponseData } from '@googlemaps/google-maps-services-js';
 
 import { PlaceResult } from './google.maps';
 
@@ -10,7 +10,7 @@ export type BlogPost = {
 };
 
 export interface NaverSearchBlog<T = boolean> {
-  total_count: number;
+  total_count: number | null;
   posts: T extends true ? BlogPost[] : null;
 }
 
@@ -20,9 +20,13 @@ export type SelectedPlace = {
 };
 
 export interface PlacesWithSearchResult<T = false> extends PlaceResult {
-  searchBlogPost: PromiseSettledResult<NaverSearchBlog<T>>;
+  searchBlogPost: PromiseSettledResult<NaverSearchBlog<T>> | null;
 }
 
 export interface SearchPlaces extends TextSearchResponseData {
   results: PlacesWithSearchResult[];
 }
+
+export interface SearchPlace extends PlaceDetailsResponseData {
+  result: PlacesWithSearchResult<true>;
+}