From 13794c4528b366198af45ae66c2a292da7349bf3 Mon Sep 17 00:00:00 2001
From: leeemingyu <skystar9927@naver.com>
Date: Thu, 26 Jun 2025 11:24:50 +0900
Subject: [PATCH] =?UTF-8?q?Feat:=EC=9A=94=EA=B8=88=EC=A0=9C=20=EC=A0=95?=
 =?UTF-8?q?=EB=A0=AC=20=ED=95=84=ED=84=B0=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/ComparePage/FilterSection.tsx  | 11 +++++++
 client/src/components/types/Plan.ts           |  2 +-
 client/src/hooks/usePlanFilter.ts             | 31 +++++++++++++++++--
 client/src/pages/ComparePage.tsx              | 19 ++++++++++++
 4 files changed, 60 insertions(+), 3 deletions(-)

diff --git a/client/src/components/ComparePage/FilterSection.tsx b/client/src/components/ComparePage/FilterSection.tsx
index 0945a92..03ebabc 100644
--- a/client/src/components/ComparePage/FilterSection.tsx
+++ b/client/src/components/ComparePage/FilterSection.tsx
@@ -3,19 +3,25 @@ import Carousel from '@/components/ComparePage/Carousel';
 interface FilterSectionProps {
   dataList: string[];
   priceList: string[];
+  dataAmountList: string[];
   activeDataIndex: number;
   activePriceIndex: number;
+  activeDataAmountIndex: number;
   onDataIndexChange: (index: number) => void;
   onPriceIndexChange: (index: number) => void;
+  onDataAmountIndexChange: (index: number) => void;
 }
 
 const FilterSection: React.FC<FilterSectionProps> = ({
   dataList,
   priceList,
+  dataAmountList,
   activeDataIndex,
   activePriceIndex,
+  activeDataAmountIndex,
   onDataIndexChange,
   onPriceIndexChange,
+  onDataAmountIndexChange,
 }) => {
   return (
     <div className="fixed top-[45px] w-full pt-2 bg-background-40 z-5">
@@ -36,6 +42,11 @@ const FilterSection: React.FC<FilterSectionProps> = ({
           activeIndex={activePriceIndex}
           setActiveIndex={onPriceIndexChange}
         />
+        <Carousel
+          categoryList={dataAmountList}
+          activeIndex={activeDataAmountIndex}
+          setActiveIndex={onDataAmountIndexChange}
+        />
       </div>
     </div>
   );
diff --git a/client/src/components/types/Plan.ts b/client/src/components/types/Plan.ts
index 5126491..4812ec6 100644
--- a/client/src/components/types/Plan.ts
+++ b/client/src/components/types/Plan.ts
@@ -4,7 +4,7 @@ export interface Plan {
   name: string;
   description?: string;
   isPopular: boolean;
-  dataGb?: number;
+  dataGb: number;
   sharedDataGb?: number;
   voiceMinutes?: number;
   addonVoiceMinutes?: number;
diff --git a/client/src/hooks/usePlanFilter.ts b/client/src/hooks/usePlanFilter.ts
index 0dd4bfa..936853c 100644
--- a/client/src/hooks/usePlanFilter.ts
+++ b/client/src/hooks/usePlanFilter.ts
@@ -5,8 +5,10 @@ export const usePlanFilter = (
   plans: Plan[],
   dataList: string[],
   priceList: string[],
+  dataAmountList: string[],
   activeDataIndex: number,
   activePriceIndex: number,
+  activeDataAmountIndex: number,
 ) => {
   return useMemo(() => {
     if (!plans) return [];
@@ -30,7 +32,32 @@ export const usePlanFilter = (
         }
       };
 
-      return matchNetwork && matchPrice();
+      const matchDataAmount = () => {
+        const amount = plan.dataGb;
+        switch (dataAmountList[activeDataAmountIndex]) {
+          case '5GB 미만':
+            return amount >= 0 && amount < 5;
+          case '5GB ~ 20GB':
+            return amount >= 5 && amount <= 20;
+          case '20GB ~ 50GB':
+            return amount > 20 && amount <= 50;
+          case '50GB ~ 100GB':
+            return amount > 50 && amount <= 100;
+          case '무제한':
+            return (amount === -1) === true;
+          default:
+            return true;
+        }
+      };
+
+      return matchNetwork && matchPrice() && matchDataAmount();
     });
-  }, [plans, dataList, priceList, activeDataIndex, activePriceIndex]);
+  }, [
+    plans,
+    dataList,
+    priceList,
+    activeDataIndex,
+    activePriceIndex,
+    dataAmountList,
+  ]);
 };
diff --git a/client/src/pages/ComparePage.tsx b/client/src/pages/ComparePage.tsx
index 6990362..796924b 100644
--- a/client/src/pages/ComparePage.tsx
+++ b/client/src/pages/ComparePage.tsx
@@ -25,6 +25,7 @@ const ComparePage: React.FC = () => {
   const [sheetOpen, setSheetOpen] = useState(false);
   const [activeDataIndex, setActiveDataIndex] = useState(0);
   const [activePriceIndex, setActivePriceIndex] = useState(0);
+  const [activeDataAmountIndex, setActiveDataAmountIndex] = useState(0);
   const [openDropdowns, setOpenDropdowns] = useState<Record<string, boolean>>(
     {},
   );
@@ -46,13 +47,23 @@ const ComparePage: React.FC = () => {
     '5만원 이상 10만원 미만',
     '10만원 이상',
   ];
+  const dataAmountList = [
+    '전체',
+    '5GB 미만',
+    '5GB ~ 20GB',
+    '20GB ~ 50GB',
+    '50GB ~ 100GB',
+    '무제한',
+  ];
 
   const filteredPlans = usePlanFilter(
     plans,
     dataList,
     priceList,
+    dataAmountList,
     activeDataIndex,
     activePriceIndex,
+    activeDataAmountIndex,
   );
 
   const resetDropdowns = () => setOpenDropdowns({});
@@ -67,6 +78,11 @@ const ComparePage: React.FC = () => {
     resetDropdowns();
   };
 
+  const handleSetActiveDataAmountIndex = (index: number) => {
+    setActiveDataAmountIndex(index);
+    resetDropdowns();
+  };
+
   const handleSelectPlan = (plan: Plan) => {
     const isAlreadySelected =
       selectedLeft?._id === plan._id || selectedRight?._id === plan._id;
@@ -166,10 +182,13 @@ const ComparePage: React.FC = () => {
           <FilterSection
             dataList={dataList}
             priceList={priceList}
+            dataAmountList={dataAmountList}
             activeDataIndex={activeDataIndex}
             activePriceIndex={activePriceIndex}
+            activeDataAmountIndex={activeDataAmountIndex}
             onDataIndexChange={handleSetActiveDataIndex}
             onPriceIndexChange={handleSetActivePriceIndex}
+            onDataAmountIndexChange={handleSetActiveDataAmountIndex}
           />
 
           {isLoading && <LoadingSpinner />}