Feature/Carousel

package.json

@@ -27,8 +27,9 @@
     "axios": "^1.10.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "embla-carousel-react": "^8.6.0",
     "lucide-react": "^0.525.0",
-    "next": "13.5.11",
+    "next": "^15.4.4",
     "react": "^18",
     "react-dom": "^18",
     "react-hook-form": "^7.59.0",

src/components/common/winelist/WineCard.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+
+import Link from 'next/link';
+
+import StarIcon from '@/assets/icons/Star.svg';
+import { ImageCard } from '@/components/common/card/ImageCard';
+import { cn } from '@/lib/utils';
+
+interface WineCardProps {
+  id: number;
+  image: string;
+  name: string;
+  rating: number;
+}
+
+export default function WineCard({ id, image, name, rating }: WineCardProps) {
+  return (
+    <Link href={`/wines/${id}`} key={id} className='no-underline'>
+      <div
+        className={cn(
+          'flex h-[160px] bg-white p-2 border border-gray-200 ',
+          'rounded-[12px]',
+          'shadow-[0px_2px_20px_0px_rgba(0,0,0,0.04)]',
+          'md:w-[232px] md:h-[185px]',
+        )}
+      >
+        {/* 왼쪽: 이미지 카드 */}
+        <div className='flex-shrink-0'>
+          <ImageCard
+            imageSrc={image}
+            className='p-0 border-none bg-transparent w-[80px] h-[112px]'
+            imageClassName='w-[38px] h-[136px] ml-[10px] rounded-md object-cover mt-[14px] md:w-[44px] md:h-[155px] md:mt-[20px] md:ml-[20px]'
+          />
+        </div>
+
+        {/* 오른쪽: 평점 + 별점 + 이름 */}
+        <div className='w-[80px] h-[97px] flex flex-col justify-start mt-[10px] ml-[5px] md:w-[100px] md:h-[125px] md:ml-[20px]'>
+          <div className='text-[28px] font-extrabold leading-100% text-gray-800 md:text-[36px] '>
+            {rating.toFixed(1)}
+          </div>
+          <div className='flex gap-[4px] w-[60px] h-[12px] -mt-[2px] md:w-[90px] md:h-[18px]'>
+            {Array.from({ length: 5 }).map((_, i) => (
+              <StarIcon
+                key={i}
+                className={cn(
+                  rating >= i + 1 ? 'fill-purpleDark' : 'fill-gray-300',
+                  'w-[12px] h-[12px] md:w-[18px] md:h-[18px]',
+                )}
+              />
+            ))}
+          </div>
+          <p className='text-[10px] leading-[140%] text-gray-500 mt-[10px] md:custom-text-xs-regular'>
+            {name}
+          </p>
+        </div>
+      </div>
+    </Link>
+  );
+}

src/components/common/winelist/WineFilter.tsx

@@ -0,0 +1,120 @@
+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 { Button } from '@/components/ui/button';
+
+export default function WineFilter() {
+  // const [isFilterOpen, setIsFilterOpen] = useState(false);
+
+  return (
+    <div className='w-full max-w-[1140px] mx-auto'>
+      {/* PC: 필터 + 검색창 + 등록 버튼 */}
+      <div className='hidden xl:flex  max-w-[1140px] mx-auto mt-[30px] gap-[24px]'>
+        <div className='flex-shrink-0 w-[260px] h-auto flex flex-col gap-[50px] ml-[-28px]'>
+          <div className='pt-[70px] '>
+            <WineTypeFilter className='h-[450px]' />
+          </div>
+          <Button
+            variant='purpleDark'
+            size='md'
+            width={null}
+            className='ml-[30px] mb-[200px] w-[284px]'
+          >
+            와인 등록하기
+          </Button>
+        </div>
+
+        <div className='flex-1 flex flex-col items-end gap-[18px] text-gray-500 [&_label]:top-[10px] md:[&_label]:top-[14px] xl:[&_label]:top-[14px]'>
+          <Input
+            id='wine-search'
+            type='text'
+            placeholder='와인을 검색해 보세요'
+            variant='search'
+            className='
+              xl:w-[800px] h-[48px] px-[20px] py-[14px] pl-[55px]
+              border border-gray-300 rounded-full
+            '
+          />
+          {/* WineListCard PC에서만 노출 */}
+          <div className='hidden xl:flex pt-[20px]'>
+            <WineListCard />
+          </div>
+        </div>
+      </div>
+
+      {/* Tablet: 필터 버튼 + 검색창 + 등록 버튼 */}
+      <div className='hidden md:flex xl:hidden flex-row items-center px-[20px] mt-[24px] md:mt-[50px] md:mb-[80px]'>
+        <Button
+          // onClick={() => setIsFilterOpen(true)}
+          variant='white'
+          size={null}
+          width={null}
+          className='flex items-center justify-center border border-gray-300 w-[48px] h-[48px] rounded-[8px] p-0'
+        >
+          <SearchButton className='w-[20px] h-[20px] text-gray-500' />
+        </Button>
+
+        <div className='flex-grow ml-[24px] text-gray-500 [&_label]:top-[14px]'>
+          <Input
+            id='wine-search'
+            type='text'
+            placeholder='와인을 검색해 보세요'
+            variant='search'
+            className='
+              md:w-full w-full
+              h-[48px] px-[20px] py-[14px] pl-[55px]
+              border border-gray-300 rounded-full
+            '
+          />
+        </div>
+
+        <Button
+          variant='purpleDark'
+          size={null}
+          width={null}
+          className='w-[220px] h-[48px] rounded-[16px] flex-shrink-0 ml-[16px]'
+        >
+          와인 등록하기
+        </Button>
+      </div>
+
+      {/* Mobile: 검색창 + 필터 버튼 */}
+      <div className='flex flex-col md:hidden gap-[8px] px-[16px] mt-[24px]'>
+        <div className='text-gray-500 [&_label]:top-[10px]'>
+          <Input
+            id='wine-search'
+            type='text'
+            placeholder='와인을 검색해 보세요'
+            variant='search'
+            className='w-full h-[38px] px-[15px] py-[14px] pl-[55px] border border-gray-300 rounded-full'
+          />
+        </div>
+
+        <div className='w-fit mt-[15px] mb-[20px]'>
+          <Button
+            // onClick={() => setIsFilterOpen(true)}
+            variant='white'
+            size='sm'
+            width='xs'
+            className='flex items-center justify-center border border-gray-300 w-[38px] h-[38px] p-0'
+          >
+            <SearchButton className='w-[20px] h-[20px] text-gray-500' />
+          </Button>
+        </div>
+      </div>
+
+      {/* Mobile: 하단 고정 등록 버튼 */}
+      <div className='fixed bottom-[20px] left-0 right-0 z-10 px-[16px] md:hidden'>
+        <Button
+          variant='purpleDark'
+          size='sm'
+          width='full'
+          className='w-full h-[48px] rounded-[12px] text-sm'
+        >
+          와인 등록하기
+        </Button>
+      </div>
+    </div>
+  );
+}

src/components/common/winelist/WineListCard.tsx

@@ -0,0 +1,190 @@
+import Link from 'next/link';
+
+import NextIcon from '@/assets/icons/Next.svg';
+import StarIcon from '@/assets/icons/Star.svg';
+import { ImageCard } from '@/components/common/card/ImageCard';
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+
+const mockWines = [
+  {
+    id: 1,
+    name: 'Sentinel Carbernet Sauvignon 2016',
+    region: 'Western Cape, South Africa',
+    image: '/images/image1.svg',
+    price: 64900,
+    rating: 4.8,
+    review:
+      'Cherry, cocoa, vanilla and clove - beautiful red fruit driven Amarone. Low acidity and medium tannins. Nice long velvety finish.',
+  },
+  {
+    id: 2,
+    name: 'Palazzo della Torre 2017',
+    region: 'Western Cape, South Africa',
+    image: '/images/image3.svg',
+    price: 64900,
+    rating: 4.6,
+    review:
+      'Cherry, cocoa, vanilla and clove - beautiful red fruit driven Amarone. Low acidity and medium tannins. Nice long velvety finish.',
+  },
+  {
+    id: 3,
+    name: 'Sentinel Carbernet Sauvignon 2016',
+    region: 'Western Cape, South Africa',
+    image: '/images/image2.svg',
+    price: 59900,
+    rating: 4.6,
+    review:
+      'Cherry, cocoa, vanilla and clove - beautiful red fruit driven Amarone. Low acidity and medium tannins. Nice long velvety finish.',
+  },
+  {
+    id: 4,
+    name: 'Palazzo della Torre 2017',
+    region: 'Western Cape, South Africa',
+    image: '/images/image4.svg',
+    price: 74000,
+    rating: 3.1,
+    review:
+      'Cherry, cocoa, vanilla and clove - beautiful red fruit driven Amarone. Low acidity and medium tannins. Nice long velvety finish.',
+  },
+];
+
+export default function WineListCard() {
+  return (
+    <div className='flex flex-col gap-[24px] px-[16px] mt-[12px] min-w-[370px] md:px-[20px] md:mt-[24px] xl:px-0 max-w-[1140px] mx-auto xl:max-w-[800px]'>
+      {mockWines.map((wine) => (
+        <Link href={`/wines/${wine.id}`} key={wine.id} className='no-underline'>
+          {/* 카드 컨테이너 */}
+          <div className='w-full bg-white border border-gray-300 rounded-xl flex flex-col relative min-w-[320px]'>
+            <ImageCard
+              imageSrc={wine.image}
+              className='pt-[20px] pb-0 border-none md:pl-[30px]'
+              imageClassName={cn(
+                'block object-contain rounded-md',
+                'w-[60px] h-[208px] mt-[30px] min-w-[50px] min-h-[180px]',
+                'md:min-w-0 md:min-h-0',
+                'md:w-[70px] md:h-[210px] md:ml-[10px] md:mt-[30px]',
+                'xl:w-[60px] xl:h-[205px] xl:ml-[25px] xl:mt-[30x] xl:mr-[20px]',
+              )}
+              rightSlot={null}
+            >
+              <div className='flex flex-col w-full px-[16px] md:px-0'>
+                {/* name, region, price 버튼 */}
+                <div
+                  className='flex flex-col w-full ml-0 mt-[20px] gap-[8px]
+                             md:w-[300px] md:ml-[36px] md:gap-[10px]'
+                >
+                  <div
+                    className='custom-text-xl-semibold text-gray-800 leading-[32px] h-auto
+                               break-words max-w-[220px] mt-[5px] md:custom-text-3xl-semibold md:max-w-none'
+                  >
+                    {wine.name}
+                  </div>
+                  <div
+                    className='custom-text-md-regular text-gray-500 leading-[24px] h-[24px]
+                               md:text-[16px] md:leading-[26px] md:h-[26px] break-words'
+                  >
+                    {wine.region}
+                  </div>
+                  <Button
+                    variant='purpleLight'
+                    fontSize={null}
+                    width={null}
+                    size={null}
+                    className='
+                    text-[14px] text-purpleDark font-bold leading-[24px] 
+                    px-[10px] py-[2px] rounded-[10px] h-[30px]
+                    w-full max-w-[86px] md:max-w-[114px]
+                    md:text-[18px]
+                    md:px-[2px] md:py-[2px] 
+                    md:rounded-[12px] 
+                    md:w-[114px] md:h-[42px] md:mt-[5px]'
+                  >
+                    ₩ {wine.price.toLocaleString()}
+                  </Button>
+                </div>
+
+                {/* 모바일용 rating */}
+                <div
+                  className='flex flex-row items-start mt-[23px] w-full ml-0 gap-[6px]
+                             md:hidden'
+                >
+                  <div className='text-[28px] font-extrabold text-gray-800 w-auto h-auto'>
+                    {wine.rating.toFixed(1)}
+                  </div>
+                  <div className='flex flex-col gap-[5px] ml-[15px] w-[100px] h-auto mt-[-6px]'>
+                    <div className='flex gap-[4px] flex-nowrap'>
+                      {Array.from({ length: 5 }).map((_, i) => (
+                        <StarIcon
+                          key={i}
+                          className={cn(
+                            wine.rating >= i + 1 ? 'fill-purpleDark' : 'fill-gray-300',
+                            'w-3 h-3',
+                          )}
+                        />
+                      ))}
+                    </div>
+                    <div className='custom-text-xs-regular text-gray-500 break-words'>
+                      47개의 후기
+                    </div>
+                  </div>
+                </div>
+
+                {/* 모바일용 NextIcon */}
+                <div className='flex-grow md:hidden flex justify-end items-center px-[16px] pr-[10px] mt-[-35px]'>
+                  <button type='button' className='w-[36px] h-[36px] p-[4px] rounded'>
+                    <NextIcon className='w-full h-full text-gray-300 hover:text-gray-500' />
+                  </button>
+                </div>
+              </div>
+            </ImageCard>
+
+            {/* 태블릿/PC용 rating */}
+            <div className='hidden md:flex flex-col items-start absolute top-[40px] right-[-10px] z-10'>
+              <div className='text-[48px] font-extrabold text-gray-800 leading-[48px] md:mt-[9px]'>
+                {wine.rating.toFixed(1)}
+              </div>
+              <div className='flex flex-col gap-[5px] w-[160px] mt-[15px] items-start'>
+                <div className='flex gap-[4px] flex-nowrap'>
+                  {Array.from({ length: 5 }).map((_, i) => (
+                    <StarIcon
+                      key={i}
+                      className={cn(
+                        wine.rating >= i + 1 ? 'fill-purpleDark' : 'fill-gray-300',
+                        'w-[16px] h-[16px]',
+                      )}
+                    />
+                  ))}
+                </div>
+                <div className='custom-text-sm-regular text-gray-500 break-words w-[100px] text-left mt-[7px]'>
+                  47개의 후기
+                </div>
+              </div>
+            </div>
+
+            {/* 태블릿/PC용 NextIcon */}
+            <button
+              type='button'
+              className='w-[40px] h-[40px] p-[4px] rounded flex-shrink-0 ml-0 hidden md:block absolute top-[185px] right-[50px] z-20'
+            >
+              <NextIcon className='w-full h-full text-gray-300 hover:text-gray-500' />
+            </button>
+
+            {/* 구분선 */}
+            <div className='w-full h-px bg-gray-300 mt-[-1px]' />
+
+            {/* 후기 영역 */}
+            <div className='px-[16px] py-[20px]'>
+              <div className='text-[14px] font-semibold text-gray-800 mb-[4px] break-words'>
+                최신 후기
+              </div>
+              <div className='text-[14px] text-gray-500 leading-[24px] break-words'>
+                {wine.review}
+              </div>
+            </div>
+          </div>
+        </Link>
+      ))}
+    </div>
+  );
+}