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/common/winelist/WineFilter.tsx

@@ -1,12 +1,15 @@
 import { useState } from 'react';
 
+import { toast } from 'sonner';
+
 import SearchButton from '@/assets/icons/SearchButton.svg';
 import WineTypeFilter from '@/components/common/Filter/WineTypeFilter';
 import Input from '@/components/common/Input';
 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 { useUser } from '@/hooks/useUser';
 import useWineSearchKeywordStore from '@/stores/searchStore';
 
 export default function WineFilter() {
@@ -15,6 +18,8 @@ export default function WineFilter() {
 
   const { searchTerm, setSearchTerm } = useWineSearchKeywordStore();
 
+  const { user } = useUser();
+
   return (
     <div className='w-full max-w-[1140px] mx-auto'>
       {/* PC: 필터 + 검색창 + 등록 버튼 */}
@@ -27,7 +32,10 @@ export default function WineFilter() {
             variant='purpleDark'
             size='md'
             width={null}
-            onClick={() => setShowRegisterModal(true)}
+            onClick={() => {
+              if (!user) toast.error('', { description: '로그인이 필요합니다.' });
+              else setShowRegisterModal(true);
+            }}
             className='ml-[30px] mb-[200px] w-[284px]'
           >
             와인 등록하기

src/components/common/winelist/WineListCard.tsx

@@ -74,7 +74,7 @@ export default function WineListCard() {
               rightSlot={null}
             >
               <div className='flex flex-col w-full px-[16px] md:px-0'>
-                <div className='flex flex-col w-full ml-0 mt-[20px] gap-[8px] md:w-[300px] md:ml-[36px] md:gap-[10px]'>
+                <div className='flex flex-col w-full ml-0 mt-[20px] gap-[8px] md:w-[360px] md:ml-[36px] md:gap-[10px]'>
                   <div className='custom-text-xl-semibold text-gray-800 leading-[32px] h-auto max-w-[220px] mt-[5px] md:text-[30px] md:max-w-[400px] md:min-h-[10px]'>
                     {wine.name}
                   </div>

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