refactor(planner): useSearchPlace 훅으로 주변 식당 데이터 가져오기 로직 변경 및 관련 타입 수정

Author: garlatonic

src/components/planner/sidebar/PlannerNearbyRestaurants.tsx

@@ -1,13 +1,13 @@
 "use client";
 import { Button } from "@/components/ui/button";
-import { getNearbyRestaurants } from "@/lib/api/planner/location.client";
+import { useSearchPlace } from "@/hooks/planner/useSearchPlace";
 import { cn } from "@/lib/utils";
 import { NearbyPlaces, ScheduleDetail } from "@/types/planner";
 import { formatDistance } from "@/utils/helpers/formatters";
 import { calculateDistance } from "@/utils/helpers/geolocation";
 import { Loader2Icon, ChevronDownIcon } from "lucide-react";
 import Link from "next/link";
-import { useEffect, useState, useTransition } from "react";
+import { useState } from "react";
 
 const INITIAL_DISPLAY_COUNT = 3;
 
@@ -16,69 +16,44 @@ export default function PlannerNearbyRestaurants({
 }: {
   concertSchedule: ScheduleDetail;
 }) {
-  const [isPending, startTransition] = useTransition();
-  const [nearbyRestaurants, setNearbyRestaurants] = useState<NearbyPlaces[]>([]);
-  const [isExpanded, setIsExpanded] = useState(false);
+  const coords = { lat: concertSchedule.locationLat!, lon: concertSchedule.locationLon! };
 
-  useEffect(() => {
-    let cancelled = false;
-    const fetchNearbyRestaurants = async () => {
-      const data = await getNearbyRestaurants(
-        concertSchedule.locationLon!,
-        concertSchedule.locationLat!
-      );
-      if (cancelled) return;
-      startTransition(() => {
-        setNearbyRestaurants(data);
-      });
-    };
-    fetchNearbyRestaurants();
-    return () => {
-      cancelled = true;
-    };
-  }, [concertSchedule.locationLon, concertSchedule.locationLat]);
+  const { results, isLoading, stableCoords } = useSearchPlace("", coords, "MEAL");
+  const [isExpanded, setIsExpanded] = useState(false);
 
-  const displayedRestaurants = isExpanded
-    ? nearbyRestaurants
-    : nearbyRestaurants.slice(0, INITIAL_DISPLAY_COUNT);
+  const visibleResults = isExpanded ? results : results.slice(0, INITIAL_DISPLAY_COUNT);
 
   return (
     <div className="bg-bg-main border-border flex-1 lg:overflow-hidden lg:border lg:p-6">
       <h4 className="text-base font-semibold">주변 식당</h4>
-      {isPending ? (
+      {isLoading ? (
         <div className="flex items-center justify-center py-10">
           <Loader2Icon className="text-muted-foreground animate-spin" />
         </div>
-      ) : nearbyRestaurants.length === 0 ? (
+      ) : results.length === 0 ? (
         <div className="text-text-sub flex items-center justify-center py-10 text-sm">
           주변에 식당이 없습니다.
         </div>
       ) : (
         <>
-          <ul
-            className={cn(
-              "space-y-3",
-              isExpanded && "scrollbar-hide lg:max-h-[300px] lg:overflow-y-auto lg:pr-2"
-            )}
-          >
-            {displayedRestaurants.map((restaurant) => {
-              const distance = calculateDistance(
-                concertSchedule.locationLat!,
-                concertSchedule.locationLon!,
-                restaurant.y,
-                restaurant.x
-              );
+          <ul className={cn("space-y-3", isExpanded && "lg:pr-2")}>
+            {visibleResults.map((place: NearbyPlaces) => {
+              const distance = stableCoords
+                ? calculateDistance(
+                    stableCoords.lat,
+                    stableCoords.lon,
+                    Number(place.y),
+                    Number(place.x)
+                  )
+                : 0;
 
               return (
-                <li
-                  key={restaurant.place_url}
-                  className="bg-bg-sub flex flex-col gap-1 rounded-xl p-4"
-                >
-                  <strong>{restaurant.place_name}</strong>
-                  <span className="text-text-sub text-xs">{restaurant.road_address_name}</span>
+                <li key={place.place_url} className="bg-bg-sub flex flex-col gap-1 rounded-xl p-4">
+                  <strong>{place.place_name}</strong>
+                  <span className="text-text-sub text-xs">{place.road_address_name}</span>
                   <div className="flex justify-between text-xs">
                     <Link
-                      href={restaurant.place_url}
+                      href={place.place_url}
                       target="_blank"
                       rel="noopener noreferrer"
                       className="text-muted-foreground underline"
@@ -91,7 +66,7 @@ export default function PlannerNearbyRestaurants({
               );
             })}
           </ul>
-          {nearbyRestaurants.length > INITIAL_DISPLAY_COUNT && (
+          {results.length > INITIAL_DISPLAY_COUNT && (
             <Button
               variant="outline"
               className="w-full cursor-pointer gap-2"
@@ -100,9 +75,7 @@ export default function PlannerNearbyRestaurants({
               <ChevronDownIcon
                 className={cn("size-4 transition-transform", isExpanded && "rotate-180")}
               />
-              {isExpanded
-                ? "숨기기"
-                : `${nearbyRestaurants.length - INITIAL_DISPLAY_COUNT}개 더보기`}
+              {isExpanded ? "숨기기" : `${results.length - INITIAL_DISPLAY_COUNT}개 더보기`}
             </Button>
           )}
         </>

src/lib/api/planner/location.client.ts

@@ -1,5 +1,5 @@
 import { ResponseData } from "@/types/api";
-import { NearbyPlaces, UserPlace } from "@/types/planner";
+import { NearbyPlaces, SearchPlace, UserPlace } from "@/types/planner";
 import ClientApi from "@/utils/helpers/clientApi";
 
 /**
@@ -115,7 +115,7 @@ export const deleteUserLocation = async (): Promise<void> => {
  * @param {string} query - 검색 키워드
  * @returns {Promise<any[]>} 검색된 장소 목록
  */
-export const searchPlaceByKeyword = async (query: string) => {
+export const searchPlaceByKeyword = async (query: string): Promise<SearchPlace[]> => {
   const res = await fetch(`/api/location?query=${encodeURIComponent(query)}`);
 
   if (!res.ok) throw new Error("장소 검색 실패");