fix: 와인 타입 필터 className, hasMargin props 추가

src/components/common/Filter/WineTypeFilter.tsx

@@ -7,10 +7,16 @@ import useFilterStore, { WineType } from '@/stores/filterStore';
 import DualSlider from '../slider/DualSlider';
 
 interface WineTypeFilterProps {
-  showBorder: boolean;
+  showBorder?: boolean;
+  hasMargin?: boolean;
+  className?: string;
 }
 
-const WineTypeFilter = ({ showBorder = false }: WineTypeFilterProps) => {
+const WineTypeFilter = ({
+  showBorder = false,
+  hasMargin = true,
+  className,
+}: WineTypeFilterProps) => {
   const { type, setType, minPrice, maxPrice, setPriceRange, rating, setRating } = useFilterStore();
 
   const wineTypeOptions: WineType[] = ['Red', 'White', 'Sparkling'];
@@ -19,7 +25,7 @@ const WineTypeFilter = ({ showBorder = false }: WineTypeFilterProps) => {
   const borderClass = 'border-b border-gray-100';
 
   return (
-    <div className='max-w-[20.5rem] m-8 flex flex-col'>
+    <div className={cn('max-w-[20.5rem] flex flex-col', hasMargin && 'm-8', className)}>
       <div className='flex flex-col gap-3'>
         <span className='custom-text-xl-bold'>WINE TYPES</span>
         <div className='flex gap-4'>

src/stores/filterStore.ts

@@ -10,16 +10,22 @@ type FilterState = {
   setPriceRange: (range: [number, number]) => void;
   rating: string;
   setRating: (val: string) => void;
+  reset: () => void;
 };
 
-const useFilterStore = create<FilterState>((set) => ({
-  type: 'Red',
-  setType: (val) => set({ type: val }),
+const initialFilterState = {
+  type: 'Red' as WineType,
   minPrice: 0,
   maxPrice: 1000000,
-  setPriceRange: ([min, max]) => set({ minPrice: min, maxPrice: max }),
   rating: 'all',
-  setRating: (val) => set({ rating: val }),
+};
+
+const useFilterStore = create<FilterState>((set) => ({
+  ...initialFilterState,
+  setType: (type) => set({ type }),
+  setPriceRange: ([minPrice, maxPrice]) => set({ minPrice, maxPrice }),
+  setRating: (rating) => set({ rating }),
+  reset: () => set(initialFilterState),
 }));
 
 export default useFilterStore;