Refactor/wine index

src/components/Modal/FilterModal/FilterModal.tsx

@@ -48,7 +48,11 @@ const FilterModal = ({
 
   const renderForm = (
     <form onSubmit={handleApplyFilter}>
-      <WineTypeFilter className='mt-[20px] mb-[25px] ' showBorder={true} hasMargin={false} />
+      <WineTypeFilter
+        className='mt-[20px] mb-[25px] mx-5 md:mx-0'
+        showBorder={true}
+        hasMargin={false}
+      />
     </form>
   );
 

src/components/common/Filter/WineTypeFilter.tsx

@@ -50,7 +50,7 @@ const WineTypeFilter = ({
           max={1000000}
           value={priceRange}
           onChange={setPriceRange}
-          className='w-[17.7rem]'
+          className='w-[17.7rem] ml-1'
         />
       </div>
       <span className={cn(showBorder && borderClass, 'my-[1.9rem]')}></span>

src/components/ui/carousel.tsx

@@ -189,6 +189,7 @@ const CarouselPrevious = React.forwardRef<HTMLButtonElement, React.ComponentProp
           orientation === 'horizontal'
             ? 'left-2 !top-1/2 [-webkit-transform:translateY(calc(-50%+3px))] [transform:translateY(calc(-50%+3px))]'
             : 'top-4 left-1/2 -translate-x-1/2 rotate-90',
+          !canScrollPrev ? 'sr-only' : '',
           className,
         )}
         disabled={!canScrollPrev}
@@ -217,6 +218,7 @@ const CarouselNext = React.forwardRef<HTMLButtonElement, React.ComponentProps<ty
           orientation === 'horizontal'
             ? 'right-2 !top-1/2 !-translate-y-1/2'
             : 'bottom-4 left-1/2 -translate-x-1/2 rotate-90',
+          !canScrollNext ? 'sr-only' : '',
           className,
         )}
         disabled={!canScrollNext}

src/pages/wines/index.tsx

@@ -1,8 +1,21 @@
+import { useEffect } from 'react';
+
 import WineFilter from '@/components/common/winelist/WineFilter';
 import WineListCard from '@/components/common/winelist/WineListCard';
 import WineSlider from '@/components/common/winelist/WineSlider';
+import useFilterStore from '@/stores/filterStore';
+import useWineSearchKeywordStore from '@/stores/searchStore';
 
 export default function Wines() {
+  const reset = useFilterStore((state) => state.reset);
+  const setSearchTerm = useWineSearchKeywordStore((state) => state.setSearchTerm);
+  useEffect(() => {
+    return () => {
+      reset();
+      setSearchTerm('');
+    };
+  }, []);
+
   return (
     <div>
       <WineSlider />