Merge pull request #81 from whatjang/feature/sheepyis-search-api#74

✨ Feat: 시장 검색 API 연동 완료

Author: sheepyis

.env.example

@@ -0,0 +1,6 @@
+# Kakao Developers에서 발급한 REST API Key
+NEXT_PUBLIC_KAKAO_REST_API_KEY=
+
+# Backend API 기본 주소
+# Example: https://api.example.com
+NEXT_PUBLIC_API_BASE_URL=

package-lock.json

@@ -22,6 +22,7 @@
     "pretendard": "^1.3.9",
     "react": "19.2.4",
     "react-dom": "19.2.4",
+    "react-spinners": "^0.17.1",
     "zustand": "^5.0.15"
   },
   "devDependencies": {

package.json

@@ -1,98 +1,105 @@
-import type { LucideIcon } from "lucide-react";
-import {
-  Apple,
-  Beef,
-  Carrot,
-  ChevronRight,
-  CookingPot,
-  Drumstick,
-  Fish,
-  MapPin,
-  Navigation,
-} from "lucide-react";
+import { ChevronRight, MapPin, Navigation } from "lucide-react";
 import Link from "next/link";
 
-import type { Market, MarketSpecialtyIcon } from "@/src/types/market";
+import {
+  DEFAULT_PRODUCT_ICON,
+  PRODUCT_ICONS,
+} from "@/src/constants/marketProductIcons";
+import type { MarketSearchItem } from "@/src/types/market/marketSearch";
 
 interface MarketItemProps {
-  market: Market;
+  market: MarketSearchItem;
 }
 
-const specialtyIcons: Record<MarketSpecialtyIcon, LucideIcon> = {
-  seafood: Fish,
-  "fried-chicken": Drumstick,
-  vegetable: Carrot,
-  meat: Beef,
-  fruit: Apple,
-  food: CookingPot,
-};
+function isToday(date: string) {
+  const today = new Date();
+  const year = today.getFullYear();
+  const month = String(today.getMonth() + 1).padStart(2, "0");
+  const day = String(today.getDate()).padStart(2, "0");
+
+  return date === `${year}-${month}-${day}`;
+}
 
 export default function MarketItem({ market }: MarketItemProps) {
-  const marketDayText = market.marketDays.join(", ");
+  const marketDayText =
+    market.open_day_numbers.length > 0
+      ? `${market.open_day_numbers.join("·")}일 장`
+      : "상설장";
+  const isMarketDayToday =
+    market.open_day_numbers.length > 0 && isToday(market.next_open_date);
 
   return (
     <li className="min-w-full">
       <article className="group overflow-hidden rounded-3xl bg-white">
         <div className="bg-light-gray relative aspect-2/1 min-h-40">
-          {market.isOpenToday && (
+          {isMarketDayToday && (
             <span className="bg-green absolute top-4 left-4 rounded-full px-3 py-1 text-sm font-bold text-white shadow-sm">
               오늘 장날 (Today)
             </span>
           )}
         </div>
 
         <div className="flex flex-col gap-2 p-4">
-          <div className="flex items-center justify-between">
-            <h3 className="text-green text-lg font-bold">{market.name}</h3>
+          <div className="flex items-start justify-between gap-3">
+            <h3 className="text-green line-clamp-2 min-w-0 flex-1 text-lg font-bold">
+              {market.name}
+            </h3>
 
-            <span className="border-light-brown/20 bg-light-brown/10 text-light-brown rounded-full border px-2 py-0.5 text-xs font-bold">
-              {marketDayText}일 주기
+            <span className="border-light-brown/20 bg-light-brown/10 text-light-brown shrink-0 rounded-full border px-2 py-0.5 text-xs font-bold">
+              {marketDayText}
             </span>
           </div>
 
-          <div className="flex items-center gap-1">
+          <div className="flex items-start gap-1">
             <MapPin className="h-4 w-4" strokeWidth={2} aria-hidden="true" />
 
-            <p className="text-xs font-semibold">{market.address}</p>
+            <p className="text-xs font-semibold">
+              {market.road_address?.trim() || "주소 정보 알 수 없음"}
+            </p>
           </div>
 
           <ul
             className="mt-2 flex flex-wrap items-center gap-2"
             aria-label={`${market.name} 대표 상품`}
           >
-            {market.specialties.map((specialty) => {
-              const SpecialtyIcon = specialtyIcons[specialty.icon];
+            {market.products.map((product) => {
+              const ProductIcon =
+                PRODUCT_ICONS[product] ?? DEFAULT_PRODUCT_ICON;
 
               return (
                 <li
-                  key={`${market.id}-${specialty.label}`}
+                  key={`${market.market_id}-${product}`}
                   className="flex items-center gap-1 text-xs font-semibold"
                 >
-                  <SpecialtyIcon
+                  <ProductIcon
                     className="text-green h-4 w-4"
                     strokeWidth={2}
                     aria-hidden="true"
                   />
 
-                  <span>{specialty.label}</span>
+                  <span>{product}</span>
                 </li>
               );
             })}
           </ul>
 
           <div className="border-deep-gray text-green mt-2 border-t py-3 font-bold">
             <Link
-              href={`/markets/${market.id}`}
+              href={`/markets/${market.market_id}`}
               className="flex items-center justify-between text-xs"
               aria-label={`${market.name} 상세보기`}
             >
               <span className="flex items-center gap-1">
-                <Navigation
-                  className="h-4 w-4"
-                  strokeWidth={2}
-                  aria-hidden="true"
-                />
-                {market.distanceKm.toFixed(1)}km 인근
+                {market.distance_km !== null && (
+                  <>
+                    <Navigation
+                      className="h-4 w-4"
+                      strokeWidth={2}
+                      aria-hidden="true"
+                    />
+                    {market.distance_km.toFixed(1)}km 인근
+                  </>
+                )}
               </span>
 
               <span className="flex items-center">

src/app/(main)/search/_components/MarketItem.tsx

@@ -1,17 +1,73 @@
-import { markets } from "@/src/mocks/market";
+"use client";
+
+import Spinner from "@/src/components/common/Spinner";
+import { useInfiniteScroll } from "@/src/hooks/useInfiniteScroll";
+import type { MarketSearchItem } from "@/src/types/market/marketSearch";
 
 import MarketItem from "./MarketItem";
 
-export default function MarketList() {
+interface MarketListProps {
+  markets: MarketSearchItem[];
+  totalCount: number;
+  isLoading: boolean;
+  hasSearched: boolean;
+  hasNext: boolean;
+  onLoadMore: () => void;
+}
+
+export default function MarketList({
+  markets,
+  totalCount,
+  isLoading,
+  hasSearched,
+  hasNext,
+  onLoadMore,
+}: MarketListProps) {
+  const observerRef = useInfiniteScroll({
+    hasNext,
+    isLoading,
+    onLoadMore,
+  });
+
+  if (!hasSearched) {
+    return null;
+  }
+
+  if (markets.length === 0 && isLoading) {
+    return (
+      <div className="flex w-full justify-center py-10">
+        <Spinner />
+      </div>
+    );
+  }
+
   if (markets.length === 0) {
-    return <p className="text-center text-sm">검색된 데이터가 없습니다.</p>;
+    return <p className="py-10 text-center text-xs">검색된 시장이 없습니다.</p>;
   }
 
   return (
-    <ul className="flex w-full flex-col gap-4">
-      {markets.map((market) => (
-        <MarketItem key={market.id} market={market} />
-      ))}
-    </ul>
+    <>
+      <div className="border-green flex items-center justify-between border-b pb-2">
+        <p className="text-deep-gray text-sm font-bold">검색 결과</p>
+
+        <span className="bg-green/10 text-green rounded-full px-2.5 py-1 text-xs font-bold">
+          {totalCount}건
+        </span>
+      </div>
+
+      <ul className="flex w-full flex-col gap-4">
+        {markets.map((market) => (
+          <MarketItem key={market.market_id} market={market} />
+        ))}
+      </ul>
+
+      {isLoading && (
+        <div className="flex w-full justify-center py-6">
+          <Spinner />
+        </div>
+      )}
+
+      {hasNext && <div ref={observerRef} className="h-1" />}
+    </>
   );
 }