Feat/요금제정렬필터추가

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>
   );

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;

client/src/hooks/usePlanFilter.ts

@@ -5,8 +5,10 @@
   plans: Plan[],
   dataList: string[],
   priceList: string[],
+  dataAmountList: string[],
   activeDataIndex: number,
   activePriceIndex: number,
+  activeDataAmountIndex: number,
 ) => {
   return useMemo(() => {
     if (!plans) return [];
@@ -30,7 +32,32 @@
         }
       };
 
-      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,
+  ]);
 };

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 />}