From 79b9ad8b9c58c34650a990e7eb7e8056c480ffc2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=EA=B4=80=ED=98=84=5CLuganic?=
 <rhksgus509@gmail.com>
Date: Wed, 30 Jul 2025 22:01:42 +0900
Subject: [PATCH 1/4] =?UTF-8?q?chore:=20=EB=AC=B4=ED=95=9C=EC=8A=A4?=
 =?UTF-8?q?=ED=81=AC=EB=A1=A4=20=EA=B5=AC=ED=98=84?=
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          |  60 ++----
 src/hooks/useWineListQuery.ts                 |  28 +++
 src/lib/getWines.ts                           |  60 ++++++
 src/stores/wineAddStore.ts                    | 180 +++++++++++++++++-
 5 files changed, 285 insertions(+), 50 deletions(-)
 create mode 100644 src/hooks/useWineListQuery.ts
 create mode 100644 src/lib/getWines.ts

diff --git a/src/components/common/winelist/WineFilter.tsx b/src/components/common/winelist/WineFilter.tsx
index 3422ec85..335b5da4 100644
--- a/src/components/common/winelist/WineFilter.tsx
+++ b/src/components/common/winelist/WineFilter.tsx
@@ -33,7 +33,6 @@ 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'
@@ -52,7 +51,6 @@ 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
@@ -64,7 +62,6 @@ 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'
@@ -80,7 +77,6 @@ export default function WineFilter() {
             onChange={(e) => setSearchTerm(e.target.value)}
           />
         </div>
-
         <Button
           variant='purpleDark'
           size={null}
@@ -91,7 +87,6 @@ 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]'>
@@ -105,7 +100,6 @@ export default function WineFilter() {
             onChange={(e) => setSearchTerm(e.target.value)}
           />
         </div>
-
         <div className='w-fit mt-[15px] mb-[20px]'>
           <Button
             onClick={() => setIsFilterOpen(true)}
@@ -119,7 +113,6 @@ 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 bbffdc31..50943460 100644
--- a/src/components/common/winelist/WineListCard.tsx
+++ b/src/components/common/winelist/WineListCard.tsx
@@ -1,60 +1,37 @@
+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 useSearchStore from '@/stores/searchStore';
-import useWineStore from '@/stores/wineAddStore';
 
 export default function WineListCard() {
-  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 { data, fetchNextPage, hasNextPage, isFetchingNextPage, isLoading, isError } =
+    useWineListQuery();
 
-  const { searchTerm } = useSearchStore();
+  const observerRef = useRef<HTMLDivElement | null>(null);
 
-  /* 별점 범위 필터 */
-  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],
-  };
+  useInfiniteScroll({
+    targetRef: observerRef,
+    hasNextPage,
+    fetchNextPage,
+    isFetching: isFetchingNextPage,
+    threshold: 0.3,
+  });
 
-  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;
-      }
-    }
+  if (isLoading) return <p>불러오는 중...</p>;
+  if (isError || !data) return <p>와인 데이터를 불러올 수 없습니다.</p>;
 
-    return true;
-  });
+  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]'>
-      {filteredWines.map((wine) => (
+      {wineList.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
@@ -160,6 +137,7 @@ 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
new file mode 100644
index 00000000..09934797
--- /dev/null
+++ b/src/hooks/useWineListQuery.ts
@@ -0,0 +1,28 @@
+// src/hooks/useWineListQuery.ts
+import { useInfiniteQuery } from '@tanstack/react-query';
+
+import { getWines } from '@/lib/getWines';
+import useFilterStore from '@/stores/filterStore';
+import useSearchStore 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);
+  const rating = useFilterStore((state) => state.rating);
+  const searchTerm = useSearchStore((state) => state.searchTerm);
+
+  return useInfiniteQuery({
+    queryKey: ['wines', { type, minPrice, maxPrice, rating, searchTerm }],
+    queryFn: ({ pageParam = 0 }) =>
+      getWines({
+        cursor: pageParam,
+        limit: PAGE_LIMIT,
+        filters: { type, minPrice, maxPrice, rating, searchTerm },
+      }),
+    initialPageParam: 0,
+    getNextPageParam: (lastPage) => lastPage.nextCursor ?? undefined,
+  });
+}
diff --git a/src/lib/getWines.ts b/src/lib/getWines.ts
new file mode 100644
index 00000000..be907997
--- /dev/null
+++ b/src/lib/getWines.ts
@@ -0,0 +1,60 @@
+import useWineStore, { Wine } from '@/stores/wineAddStore';
+
+interface GetWinesParams {
+  cursor: number;
+  limit: number;
+  filters: {
+    type?: string;
+    minPrice?: number;
+    maxPrice?: number;
+    rating?: string;
+    searchTerm?: string;
+  };
+}
+
+interface GetWinesResponse {
+  list: Wine[];
+  nextCursor: number | null;
+  totalCount: number;
+}
+
+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],
+};
+
+export function getWines({ cursor, limit, filters }: GetWinesParams): GetWinesResponse {
+  // zustand에서 mock 데이터 직접 가져옴
+  const allWines = useWineStore.getState().wines;
+
+  const { type, minPrice = 0, maxPrice = Infinity, rating = 'all', searchTerm = '' } = filters;
+
+  const [minRating, maxRating] = ratingRangeMap[rating] ?? [0, 5];
+  const keyword = searchTerm.toLowerCase();
+
+  const filtered = allWines.filter((wine) => {
+    if (type && wine.type !== type) return false;
+    if (wine.price < minPrice || wine.price > maxPrice) return false;
+    if (wine.rating < minRating || wine.rating > maxRating) return false;
+    if (
+      keyword &&
+      !wine.name.toLowerCase().includes(keyword) &&
+      !wine.region.toLowerCase().includes(keyword)
+    )
+      return false;
+    return true;
+  });
+
+  const totalCount = filtered.length;
+  const paged = filtered.slice(cursor, cursor + limit);
+  const nextCursor = cursor + limit < totalCount ? cursor + limit : null;
+
+  return {
+    list: paged,
+    nextCursor,
+    totalCount,
+  };
+}
diff --git a/src/stores/wineAddStore.ts b/src/stores/wineAddStore.ts
index e96bf600..193b857a 100644
--- a/src/stores/wineAddStore.ts
+++ b/src/stores/wineAddStore.ts
@@ -36,7 +36,7 @@ const useWineStore = create<WineStoreState>((set) => ({
       image: '/images/image3.svg',
       price: 64900,
       rating: 4.6,
-      type: 'White',
+      type: 'Red',
       review:
         'Cherry, cocoa, vanilla and clove - beautiful red fruit driven Amarone. Low acidity and medium tannins. Nice long velvety finish.',
     },
@@ -58,7 +58,183 @@ const useWineStore = create<WineStoreState>((set) => ({
       image: '/images/image4.svg',
       price: 74000,
       rating: 2.1,
-      type: 'Sparkling',
+      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,
+      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: 20,
+      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.',
     },

From bc3060127e1a21bed5d91d9b617d907de1e54521 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=EA=B4=80=ED=98=84=5CLuganic?=
 <rhksgus509@gmail.com>
Date: Wed, 30 Jul 2025 22:33:23 +0900
Subject: [PATCH 2/4] =?UTF-8?q?fix:=20star=20=EC=82=AD=EC=A0=9C=20?=
 =?UTF-8?q?=ED=9B=84=20=EC=BB=A4=EB=B0=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/icons/{Star.svg => star.svg} | 0
 src/hooks/useWineListQuery.ts           | 1 -
 2 files changed, 1 deletion(-)
 rename src/assets/icons/{Star.svg => star.svg} (100%)

diff --git a/src/assets/icons/Star.svg b/src/assets/icons/star.svg
similarity index 100%
rename from src/assets/icons/Star.svg
rename to src/assets/icons/star.svg
diff --git a/src/hooks/useWineListQuery.ts b/src/hooks/useWineListQuery.ts
index 09934797..a225229d 100644
--- a/src/hooks/useWineListQuery.ts
+++ b/src/hooks/useWineListQuery.ts
@@ -1,4 +1,3 @@
-// src/hooks/useWineListQuery.ts
 import { useInfiniteQuery } from '@tanstack/react-query';
 
 import { getWines } from '@/lib/getWines';

From aaf1b59725469b23760865977b221688bea848bc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=EA=B4=80=ED=98=84=5CLuganic?=
 <rhksgus509@gmail.com>
Date: Wed, 30 Jul 2025 22:50:34 +0900
Subject: [PATCH 3/4] fix update wine components and remove Star.svg

---
 src/assets/icons/star.svg | 3 ---
 1 file changed, 3 deletions(-)
 delete mode 100644 src/assets/icons/star.svg

diff --git a/src/assets/icons/star.svg b/src/assets/icons/star.svg
deleted file mode 100644
index 81950d80..00000000
--- a/src/assets/icons/star.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="18" height="17" viewBox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M9.00002 14.2752L4.85002 16.7752C4.66668 16.8919 4.47502 16.9419 4.27501 16.9252C4.07501 16.9085 3.90001 16.8419 3.75002 16.7252C3.60001 16.6085 3.48335 16.4627 3.40002 16.2877C3.31668 16.1127 3.30002 15.9169 3.35002 15.7002L4.45002 10.9752L0.775015 7.80019C0.608348 7.6502 0.504182 7.47936 0.462515 7.28769C0.420848 7.09603 0.433348 6.90853 0.500015 6.72519C0.566682 6.54186 0.666682 6.39186 0.800015 6.2752C0.933348 6.15853 1.11668 6.08353 1.35002 6.0502L6.20002 5.6252L8.07502 1.1752C8.15835 0.975195 8.28752 0.825195 8.46252 0.725195C8.63752 0.625195 8.81668 0.575195 9.00002 0.575195C9.18335 0.575195 9.36252 0.625195 9.53752 0.725195C9.71252 0.825195 9.84168 0.975195 9.92502 1.1752L11.8 5.6252L16.65 6.0502C16.8833 6.08353 17.0667 6.15853 17.2 6.2752C17.3333 6.39186 17.4333 6.54186 17.5 6.72519C17.5667 6.90853 17.5792 7.09603 17.5375 7.28769C17.4958 7.47936 17.3917 7.6502 17.225 7.80019L13.55 10.9752L14.65 15.7002C14.7 15.9169 14.6833 16.1127 14.6 16.2877C14.5167 16.4627 14.4 16.6085 14.25 16.7252C14.1 16.8419 13.925 16.9085 13.725 16.9252C13.525 16.9419 13.3333 16.8919 13.15 16.7752L9.00002 14.2752Z" fill="#CFDBEA"/>
-</svg>

From 7aa6aba5a68683530e37913d9b9e457e6324596d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=EA=B4=80=ED=98=84=5CLuganic?=
 <rhksgus509@gmail.com>
Date: Thu, 31 Jul 2025 03:10:15 +0900
Subject: [PATCH 4/4] =?UTF-8?q?chore:=20=EB=AC=B4=ED=95=9C=20=EC=8A=A4?=
 =?UTF-8?q?=ED=81=AC=EB=A1=A4=20=ED=85=8C=EC=8A=A4=ED=8A=B8=20=EC=99=84?=
 =?UTF-8?q?=EB=A3=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/icons/star.svg                       | 3 +++
 src/components/common/winelist/WineFilter.tsx   | 4 ++--
 src/components/common/winelist/WineListCard.tsx | 2 ++
 src/hooks/useWineListQuery.ts                   | 5 +++--
 src/lib/getWines.ts                             | 7 ++++---
 src/stores/searchStore.ts                       | 4 ++--
 src/stores/wineAddStore.ts                      | 8 ++++----
 7 files changed, 20 insertions(+), 13 deletions(-)
 create mode 100644 src/assets/icons/star.svg

diff --git a/src/assets/icons/star.svg b/src/assets/icons/star.svg
new file mode 100644
index 00000000..81950d80
--- /dev/null
+++ b/src/assets/icons/star.svg
@@ -0,0 +1,3 @@
+<svg width="18" height="17" viewBox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.00002 14.2752L4.85002 16.7752C4.66668 16.8919 4.47502 16.9419 4.27501 16.9252C4.07501 16.9085 3.90001 16.8419 3.75002 16.7252C3.60001 16.6085 3.48335 16.4627 3.40002 16.2877C3.31668 16.1127 3.30002 15.9169 3.35002 15.7002L4.45002 10.9752L0.775015 7.80019C0.608348 7.6502 0.504182 7.47936 0.462515 7.28769C0.420848 7.09603 0.433348 6.90853 0.500015 6.72519C0.566682 6.54186 0.666682 6.39186 0.800015 6.2752C0.933348 6.15853 1.11668 6.08353 1.35002 6.0502L6.20002 5.6252L8.07502 1.1752C8.15835 0.975195 8.28752 0.825195 8.46252 0.725195C8.63752 0.625195 8.81668 0.575195 9.00002 0.575195C9.18335 0.575195 9.36252 0.625195 9.53752 0.725195C9.71252 0.825195 9.84168 0.975195 9.92502 1.1752L11.8 5.6252L16.65 6.0502C16.8833 6.08353 17.0667 6.15853 17.2 6.2752C17.3333 6.39186 17.4333 6.54186 17.5 6.72519C17.5667 6.90853 17.5792 7.09603 17.5375 7.28769C17.4958 7.47936 17.3917 7.6502 17.225 7.80019L13.55 10.9752L14.65 15.7002C14.7 15.9169 14.6833 16.1127 14.6 16.2877C14.5167 16.4627 14.4 16.6085 14.25 16.7252C14.1 16.8419 13.925 16.9085 13.725 16.9252C13.525 16.9419 13.3333 16.8919 13.15 16.7752L9.00002 14.2752Z" fill="#CFDBEA"/>
+</svg>
diff --git a/src/components/common/winelist/WineFilter.tsx b/src/components/common/winelist/WineFilter.tsx
index 335b5da4..065fe143 100644
--- a/src/components/common/winelist/WineFilter.tsx
+++ b/src/components/common/winelist/WineFilter.tsx
@@ -7,13 +7,13 @@ import WineListCard from '@/components/common/winelist/WineListCard';
 import FilterModal from '@/components/Modal/FilterModal/FilterModal';
 import AddWineModal from '@/components/Modal/WineModal/AddWineModal';
 import { Button } from '@/components/ui/button';
-import useSearchStore from '@/stores/searchStore';
+import useWineSearchKeywordStore from '@/stores/searchStore';
 
 export default function WineFilter() {
   const [isFilterOpen, setIsFilterOpen] = useState(false);
   const [showRegisterModal, setShowRegisterModal] = useState(false);
 
-  const { searchTerm, setSearchTerm } = useSearchStore();
+  const { searchTerm, setSearchTerm } = useWineSearchKeywordStore();
 
   return (
     <div className='w-full max-w-[1140px] mx-auto'>
diff --git a/src/components/common/winelist/WineListCard.tsx b/src/components/common/winelist/WineListCard.tsx
index 50943460..d5bf850f 100644
--- a/src/components/common/winelist/WineListCard.tsx
+++ b/src/components/common/winelist/WineListCard.tsx
@@ -27,6 +27,7 @@ export default function WineListCard() {
   if (isLoading) return <p>불러오는 중...</p>;
   if (isError || !data) return <p>와인 데이터를 불러올 수 없습니다.</p>;
 
+  /* 전체 와인 리스트 조합 */
   const wineList = data.pages.flatMap((page) => page.list);
 
   return (
@@ -137,6 +138,7 @@ 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 a225229d..9809f8bf 100644
--- a/src/hooks/useWineListQuery.ts
+++ b/src/hooks/useWineListQuery.ts
@@ -2,16 +2,17 @@ import { useInfiniteQuery } from '@tanstack/react-query';
 
 import { getWines } from '@/lib/getWines';
 import useFilterStore from '@/stores/filterStore';
-import useSearchStore from '@/stores/searchStore';
+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);
   const rating = useFilterStore((state) => state.rating);
-  const searchTerm = useSearchStore((state) => state.searchTerm);
+  const searchTerm = useWineSearchKeywordStore((state) => state.searchTerm);
 
   return useInfiniteQuery({
     queryKey: ['wines', { type, minPrice, maxPrice, rating, searchTerm }],
diff --git a/src/lib/getWines.ts b/src/lib/getWines.ts
index be907997..630fc350 100644
--- a/src/lib/getWines.ts
+++ b/src/lib/getWines.ts
@@ -1,4 +1,4 @@
-import useWineStore, { Wine } from '@/stores/wineAddStore';
+import useWineAddStore, { Wine } from '@/stores/wineAddStore';
 
 interface GetWinesParams {
   cursor: number;
@@ -18,6 +18,7 @@ interface GetWinesResponse {
   totalCount: number;
 }
 
+/* 평점 필터링 */
 const ratingRangeMap: Record<string, [number, number]> = {
   all: [0, 5],
   '4.6': [4.5, 5],
@@ -26,9 +27,9 @@ const ratingRangeMap: Record<string, [number, number]> = {
   '3.1': [3.0, 3.5],
 };
 
+/* 필터링 + 페이징 */
 export function getWines({ cursor, limit, filters }: GetWinesParams): GetWinesResponse {
-  // zustand에서 mock 데이터 직접 가져옴
-  const allWines = useWineStore.getState().wines;
+  const allWines = useWineAddStore.getState().wines;
 
   const { type, minPrice = 0, maxPrice = Infinity, rating = 'all', searchTerm = '' } = filters;
 
diff --git a/src/stores/searchStore.ts b/src/stores/searchStore.ts
index 5c0a1d68..69d20428 100644
--- a/src/stores/searchStore.ts
+++ b/src/stores/searchStore.ts
@@ -5,9 +5,9 @@ type SearchState = {
   setSearchTerm: (term: string) => void;
 };
 
-const useSearchStore = create<SearchState>((set) => ({
+const useWineSearchKeywordStore = create<SearchState>((set) => ({
   searchTerm: '',
   setSearchTerm: (term) => set({ searchTerm: term }),
 }));
 
-export default useSearchStore;
+export default useWineSearchKeywordStore;
diff --git a/src/stores/wineAddStore.ts b/src/stores/wineAddStore.ts
index 193b857a..108f8326 100644
--- a/src/stores/wineAddStore.ts
+++ b/src/stores/wineAddStore.ts
@@ -16,7 +16,7 @@ interface WineStoreState {
   addWine: (newWine: Wine) => void;
 }
 
-const useWineStore = create<WineStoreState>((set) => ({
+const useWineAddStore = create<WineStoreState>((set) => ({
   wines: [
     {
       id: 1,
@@ -36,7 +36,7 @@ const useWineStore = create<WineStoreState>((set) => ({
       image: '/images/image3.svg',
       price: 64900,
       rating: 4.6,
-      type: 'Red',
+      type: 'Sparkling',
       review:
         'Cherry, cocoa, vanilla and clove - beautiful red fruit driven Amarone. Low acidity and medium tannins. Nice long velvety finish.',
     },
@@ -47,7 +47,7 @@ const useWineStore = create<WineStoreState>((set) => ({
       image: '/images/image2.svg',
       price: 59900,
       rating: 3.6,
-      type: 'Red',
+      type: 'White',
       review:
         'Cherry, cocoa, vanilla and clove - beautiful red fruit driven Amarone. Low acidity and medium tannins. Nice long velvety finish.',
     },
@@ -246,4 +246,4 @@ const useWineStore = create<WineStoreState>((set) => ({
     })),
 }));
 
-export default useWineStore;
+export default useWineAddStore;