From 016fdf86472440a394172ed4395e0b5ede4eb0be Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EC=84=B1=EC=A3=BC?=
 <154496280+626-ju@users.noreply.github.com>
Date: Thu, 31 Jul 2025 16:15:08 +0900
Subject: [PATCH] =?UTF-8?q?Revert=20"Feature/=EB=AA=A9=EB=A1=9D=20?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=AC=B4=ED=95=9C=20=EC=8A=A4?=
 =?UTF-8?q?=ED=81=AC=EB=A1=A4=20=EC=A0=81=EC=9A=A9=20"?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/winelist/WineFilter.tsx |   7 +
 .../common/winelist/WineListCard.tsx          |  71 ++++---
 src/hooks/useWineListQuery.ts                 |   1 -
 src/lib/getWines.ts                           |   7 +-
 src/stores/wineAddStore.ts                    | 186 +-----------------
 5 files changed, 59 insertions(+), 213 deletions(-)

diff --git a/src/components/common/winelist/WineFilter.tsx b/src/components/common/winelist/WineFilter.tsx
index 065fe14..4771719 100644
--- a/src/components/common/winelist/WineFilter.tsx
+++ b/src/components/common/winelist/WineFilter.tsx
@@ -33,6 +33,7 @@ export default function WineFilter() {
             와인 등록하기
           </Button>
         </div>
+
         <div className='flex-1 flex flex-col items-end gap-[18px] text-gray-500 [&_label]:top-[10px] md:[&_label]:top-[14px] xl:[&_label]:top-[14px]'>
           <Input
             id='wine-search'
@@ -51,6 +52,7 @@ export default function WineFilter() {
           </div>
         </div>
       </div>
+
       {/* Tablet: 필터 버튼 + 검색창 + 등록 버튼 */}
       <div className='hidden md:flex xl:hidden flex-row items-center px-[20px] mt-[24px] md:mt-[50px] md:mb-[80px]'>
         <Button
@@ -62,6 +64,7 @@ export default function WineFilter() {
         >
           <SearchButton className='w-[20px] h-[20px] text-gray-500' />
         </Button>
+
         <div className='flex-grow ml-[24px] text-gray-500 [&_label]:top-[14px]'>
           <Input
             id='wine-search'
@@ -77,6 +80,7 @@ export default function WineFilter() {
             onChange={(e) => setSearchTerm(e.target.value)}
           />
         </div>
+
         <Button
           variant='purpleDark'
           size={null}
@@ -87,6 +91,7 @@ export default function WineFilter() {
           와인 등록하기
         </Button>
       </div>
+
       {/* Mobile: 검색창 + 필터 버튼 */}
       <div className='flex flex-col md:hidden gap-[8px] px-[16px] mt-[24px]'>
         <div className='text-gray-500 [&_label]:top-[10px] min-w-[343px]'>
@@ -100,6 +105,7 @@ export default function WineFilter() {
             onChange={(e) => setSearchTerm(e.target.value)}
           />
         </div>
+
         <div className='w-fit mt-[15px] mb-[20px]'>
           <Button
             onClick={() => setIsFilterOpen(true)}
@@ -113,6 +119,7 @@ export default function WineFilter() {
         </div>
       </div>
       {isFilterOpen && <FilterModal open={isFilterOpen} onOpenChange={setIsFilterOpen} />}
+
       {/* Mobile: 하단 고정 등록 버튼 */}
       <div className='fixed bottom-[20px] left-0 right-0 z-10 px-[16px] md:hidden'>
         <Button
diff --git a/src/components/common/winelist/WineListCard.tsx b/src/components/common/winelist/WineListCard.tsx
index 8e1d0f9..229cbd6 100644
--- a/src/components/common/winelist/WineListCard.tsx
+++ b/src/components/common/winelist/WineListCard.tsx
@@ -1,41 +1,60 @@
-import { useRef } from 'react';
-
 import Link from 'next/link';
 
 import NextIcon from '@/assets/icons/Next.svg';
 import StarIcon from '@/assets/icons/star.svg';
 import { ImageCard } from '@/components/common/card/ImageCard';
 import { Button } from '@/components/ui/button';
-import { useInfiniteScroll } from '@/hooks/useInfiniteScroll';
-import { useWineListQuery } from '@/hooks/useWineListQuery';
 import { cn } from '@/lib/utils';
-
+import useFilterStore from '@/stores/filterStore';
+import useWineSearchKeywordStore from '@/stores/searchStore';
+import useWineStore from '@/stores/wineAddStore';
 
 export default function WineListCard() {
-  const { data, fetchNextPage, hasNextPage, isFetchingNextPage, isLoading, isError } =
-    useWineListQuery();
-
-
-  const observerRef = useRef<HTMLDivElement | null>(null);
-
-  useInfiniteScroll({
-    targetRef: observerRef,
-    hasNextPage,
-    fetchNextPage,
-    isFetching: isFetchingNextPage,
-    threshold: 0.3,
+  const type = useFilterStore((state) => state.type);
+  const minPrice = useFilterStore((state) => state.minPrice);
+  const maxPrice = useFilterStore((state) => state.maxPrice);
+  const rating = useFilterStore((state) => state.rating);
+
+  const wines = useWineStore((state) => state.wines); // 와인 타입 정의, mock
+
+  const { searchTerm } = useWineSearchKeywordStore();
+
+  /* 별점 범위 필터 */
+  const ratingRangeMap: Record<string, [number, number]> = {
+    all: [0, 5],
+    '4.6': [4.5, 5],
+    '4.1': [4.0, 4.5],
+    '3.6': [3.5, 4.0],
+    '3.1': [3.0, 3.5],
+  };
+
+  const filteredWines = wines.filter((wine) => {
+    /* 종류 필터 */
+    if (type && wine.type !== type) return false;
+    /* 가격 범위 필터 */
+    if (wine.price < minPrice || wine.price > maxPrice) return false;
+    /* 평점 필터 */
+    if (rating !== 'all') {
+      const [min, max] = ratingRangeMap[rating] || [0, 5];
+      if (wine.rating < min || wine.rating > max) return false;
+    }
+    /* 검색어 필터 (이름 or 지역) */
+    if (searchTerm) {
+      const lowerCaseSearchTerm = searchTerm.toLowerCase();
+      if (
+        !wine.name.toLowerCase().includes(lowerCaseSearchTerm) &&
+        !wine.region.toLowerCase().includes(lowerCaseSearchTerm)
+      ) {
+        return false;
+      }
+    }
+
+    return true;
   });
 
-  if (isLoading) return <p>불러오는 중...</p>;
-  if (isError || !data) return <p>와인 데이터를 불러올 수 없습니다.</p>;
-
-
-  /* 전체 와인 리스트 조합 */
-  const wineList = data.pages.flatMap((page) => page.list);
-
   return (
     <div className='flex flex-col gap-[24px] px-[16px] mt-[12px] min-w-[370px] md:px-[20px] md:mt-[24px] xl:px-0 max-w-[1140px] mx-auto xl:max-w-[800px]'>
-      {wineList.map((wine) => (
+      {filteredWines.map((wine) => (
         <Link href={`/wines/${wine.id}`} key={wine.id} className='no-underline'>
           <div className='w-full bg-white border border-gray-300 rounded-xl flex flex-col relative min-w-[320px]'>
             <ImageCard
@@ -141,8 +160,6 @@ export default function WineListCard() {
           </div>
         </Link>
       ))}
-      {/* 무한 스크롤 감지 */}
-      <div ref={observerRef} className='h-[1px]' />
     </div>
   );
 }
diff --git a/src/hooks/useWineListQuery.ts b/src/hooks/useWineListQuery.ts
index 9809f8b..529d42a 100644
--- a/src/hooks/useWineListQuery.ts
+++ b/src/hooks/useWineListQuery.ts
@@ -7,7 +7,6 @@ import useWineSearchKeywordStore from '@/stores/searchStore';
 const PAGE_LIMIT = 8;
 
 export function useWineListQuery() {
-  /* 각 필터 상태 */
   const type = useFilterStore((state) => state.type);
   const minPrice = useFilterStore((state) => state.minPrice);
   const maxPrice = useFilterStore((state) => state.maxPrice);
diff --git a/src/lib/getWines.ts b/src/lib/getWines.ts
index 630fc35..5dcc030 100644
--- a/src/lib/getWines.ts
+++ b/src/lib/getWines.ts
@@ -1,4 +1,4 @@
-import useWineAddStore, { Wine } from '@/stores/wineAddStore';
+import useWinAddStore, { Wine } from '@/stores/wineAddStore';
 
 interface GetWinesParams {
   cursor: number;
@@ -18,7 +18,6 @@ interface GetWinesResponse {
   totalCount: number;
 }
 
-/* 평점 필터링 */
 const ratingRangeMap: Record<string, [number, number]> = {
   all: [0, 5],
   '4.6': [4.5, 5],
@@ -27,9 +26,9 @@ const ratingRangeMap: Record<string, [number, number]> = {
   '3.1': [3.0, 3.5],
 };
 
-/* 필터링 + 페이징 */
 export function getWines({ cursor, limit, filters }: GetWinesParams): GetWinesResponse {
-  const allWines = useWineAddStore.getState().wines;
+  // zustand에서 mock 데이터 직접 가져옴
+  const allWines = useWinAddStore.getState().wines;
 
   const { type, minPrice = 0, maxPrice = Infinity, rating = 'all', searchTerm = '' } = filters;
 
diff --git a/src/stores/wineAddStore.ts b/src/stores/wineAddStore.ts
index 108f832..5bcf621 100644
--- a/src/stores/wineAddStore.ts
+++ b/src/stores/wineAddStore.ts
@@ -16,7 +16,7 @@ interface WineStoreState {
   addWine: (newWine: Wine) => void;
 }
 
-const useWineAddStore = create<WineStoreState>((set) => ({
+const useWinAddStore = create<WineStoreState>((set) => ({
   wines: [
     {
       id: 1,
@@ -36,188 +36,12 @@ const useWineAddStore = create<WineStoreState>((set) => ({
       image: '/images/image3.svg',
       price: 64900,
       rating: 4.6,
-      type: 'Sparkling',
-      review:
-        'Cherry, cocoa, vanilla and clove - beautiful red fruit driven Amarone. Low acidity and medium tannins. Nice long velvety finish.',
-    },
-    {
-      id: 3,
-      name: 'Sentinel Carbernet Sauvignon 2016',
-      region: 'Western Cape, South Africa',
-      image: '/images/image2.svg',
-      price: 59900,
-      rating: 3.6,
       type: 'White',
       review:
         'Cherry, cocoa, vanilla and clove - beautiful red fruit driven Amarone. Low acidity and medium tannins. Nice long velvety finish.',
     },
     {
-      id: 4,
-      name: 'Palazzo della Torre 2017',
-      region: 'Western Cape, South Africa',
-      image: '/images/image4.svg',
-      price: 74000,
-      rating: 2.1,
-      type: 'Red',
-      review:
-        'Cherry, cocoa, vanilla and clove - beautiful red fruit driven Amarone. Low acidity and medium tannins. Nice long velvety finish.',
-    },
-    {
-      id: 5,
-      name: 'Sentinel Carbernet Sauvignon 2016',
-      region: 'Western Cape, South Africa',
-      image: '/images/image1.svg',
-      price: 64900,
-      rating: 4.5,
-      type: 'Red',
-      review:
-        'Cherry, cocoa, vanilla and clove - beautiful red fruit driven Amarone. Low acidity and medium tannins. Nice long velvety finish.',
-    },
-    {
-      id: 6,
-      name: 'Palazzo della Torre 2017',
-      region: 'Western Cape, South Africa',
-      image: '/images/image3.svg',
-      price: 64900,
-      rating: 4.6,
-      type: 'Red',
-      review:
-        'Cherry, cocoa, vanilla and clove - beautiful red fruit driven Amarone. Low acidity and medium tannins. Nice long velvety finish.',
-    },
-    {
-      id: 7,
-      name: 'Sentinel Carbernet Sauvignon 2016',
-      region: 'Western Cape, South Africa',
-      image: '/images/image2.svg',
-      price: 59900,
-      rating: 3.6,
-      type: 'Red',
-      review:
-        'Cherry, cocoa, vanilla and clove - beautiful red fruit driven Amarone. Low acidity and medium tannins. Nice long velvety finish.',
-    },
-    {
-      id: 8,
-      name: 'Palazzo della Torre 2017',
-      region: 'Western Cape, South Africa',
-      image: '/images/image4.svg',
-      price: 74000,
-      rating: 2.1,
-      type: 'Red',
-      review:
-        'Cherry, cocoa, vanilla and clove - beautiful red fruit driven Amarone. Low acidity and medium tannins. Nice long velvety finish.',
-    },
-    {
-      id: 9,
-      name: 'Sentinel Carbernet Sauvignon 2016',
-      region: 'Western Cape, South Africa',
-      image: '/images/image1.svg',
-      price: 64900,
-      rating: 4.5,
-      type: 'Red',
-      review:
-        'Cherry, cocoa, vanilla and clove - beautiful red fruit driven Amarone. Low acidity and medium tannins. Nice long velvety finish.',
-    },
-    {
-      id: 10,
-      name: 'Palazzo della Torre 2017',
-      region: 'Western Cape, South Africa',
-      image: '/images/image3.svg',
-      price: 64900,
-      rating: 4.6,
-      type: 'Red',
-      review:
-        'Cherry, cocoa, vanilla and clove - beautiful red fruit driven Amarone. Low acidity and medium tannins. Nice long velvety finish.',
-    },
-    {
-      id: 11,
-      name: 'Sentinel Carbernet Sauvignon 2016',
-      region: 'Western Cape, South Africa',
-      image: '/images/image2.svg',
-      price: 59900,
-      rating: 3.6,
-      type: 'Red',
-      review:
-        'Cherry, cocoa, vanilla and clove - beautiful red fruit driven Amarone. Low acidity and medium tannins. Nice long velvety finish.',
-    },
-    {
-      id: 12,
-      name: 'Palazzo della Torre 2017',
-      region: 'Western Cape, South Africa',
-      image: '/images/image4.svg',
-      price: 74000,
-      rating: 2.1,
-      type: 'Red',
-      review:
-        'Cherry, cocoa, vanilla and clove - beautiful red fruit driven Amarone. Low acidity and medium tannins. Nice long velvety finish.',
-    },
-    {
-      id: 13,
-      name: 'Sentinel Carbernet Sauvignon 2016',
-      region: 'Western Cape, South Africa',
-      image: '/images/image1.svg',
-      price: 64900,
-      rating: 4.5,
-      type: 'Red',
-      review:
-        'Cherry, cocoa, vanilla and clove - beautiful red fruit driven Amarone. Low acidity and medium tannins. Nice long velvety finish.',
-    },
-    {
-      id: 14,
-      name: 'Palazzo della Torre 2017',
-      region: 'Western Cape, South Africa',
-      image: '/images/image3.svg',
-      price: 64900,
-      rating: 4.6,
-      type: 'Red',
-      review:
-        'Cherry, cocoa, vanilla and clove - beautiful red fruit driven Amarone. Low acidity and medium tannins. Nice long velvety finish.',
-    },
-    {
-      id: 15,
-      name: 'Sentinel Carbernet Sauvignon 2016',
-      region: 'Western Cape, South Africa',
-      image: '/images/image2.svg',
-      price: 59900,
-      rating: 3.6,
-      type: 'Red',
-      review:
-        'Cherry, cocoa, vanilla and clove - beautiful red fruit driven Amarone. Low acidity and medium tannins. Nice long velvety finish.',
-    },
-    {
-      id: 16,
-      name: 'Palazzo della Torre 2017',
-      region: 'Western Cape, South Africa',
-      image: '/images/image4.svg',
-      price: 74000,
-      rating: 2.1,
-      type: 'Red',
-      review:
-        'Cherry, cocoa, vanilla and clove - beautiful red fruit driven Amarone. Low acidity and medium tannins. Nice long velvety finish.',
-    },
-    {
-      id: 17,
-      name: 'Sentinel Carbernet Sauvignon 2016',
-      region: 'Western Cape, South Africa',
-      image: '/images/image1.svg',
-      price: 64900,
-      rating: 4.5,
-      type: 'Red',
-      review:
-        'Cherry, cocoa, vanilla and clove - beautiful red fruit driven Amarone. Low acidity and medium tannins. Nice long velvety finish.',
-    },
-    {
-      id: 18,
-      name: 'Palazzo della Torre 2017',
-      region: 'Western Cape, South Africa',
-      image: '/images/image3.svg',
-      price: 64900,
-      rating: 4.6,
-      type: 'Red',
-      review:
-        'Cherry, cocoa, vanilla and clove - beautiful red fruit driven Amarone. Low acidity and medium tannins. Nice long velvety finish.',
-    },
-    {
-      id: 19,
+      id: 3,
       name: 'Sentinel Carbernet Sauvignon 2016',
       region: 'Western Cape, South Africa',
       image: '/images/image2.svg',
@@ -228,13 +52,13 @@ const useWineAddStore = create<WineStoreState>((set) => ({
         'Cherry, cocoa, vanilla and clove - beautiful red fruit driven Amarone. Low acidity and medium tannins. Nice long velvety finish.',
     },
     {
-      id: 20,
+      id: 4,
       name: 'Palazzo della Torre 2017',
       region: 'Western Cape, South Africa',
       image: '/images/image4.svg',
       price: 74000,
       rating: 2.1,
-      type: 'Red',
+      type: 'Sparkling',
       review:
         'Cherry, cocoa, vanilla and clove - beautiful red fruit driven Amarone. Low acidity and medium tannins. Nice long velvety finish.',
     },
@@ -246,4 +70,4 @@ const useWineAddStore = create<WineStoreState>((set) => ({
     })),
 }));
 
-export default useWineAddStore;
+export default useWinAddStore;