Merge pull request #133 from Luganic/fix/winelistcard

Fix/와인 카드 호버 영역 수정 및 상단 바로가기 버튼 생성

Author: Luganic

src/components/common/scrollToTop.tsx

@@ -0,0 +1,39 @@
+import { useEffect, useState } from 'react';
+
+import NextIcon from '@/assets/icons/Next.svg';
+
+export default function ScrollToTop() {
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      setIsVisible(window.scrollY > 3000);
+    };
+
+    window.addEventListener('scroll', handleScroll);
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
+
+  const scrollToTop = () => {
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  };
+
+  if (!isVisible) return null;
+
+  /*뱃지 색깔: bg-primary-100 통일: bg-primary*/
+  return (
+    <button
+      onClick={scrollToTop}
+      className='
+    fixed bottom-[157px] right-[20px] md:bottom-[90px] z-50
+    rounded-full bg-gray-300
+    hover:bg-primary 
+        p-[12px] shadow-lg transition
+        group
+      '
+      aria-label='Scroll to top'
+    >
+      <NextIcon className='w-[30px] h-[30px] rotate-[-90deg] text-white group-hover:text-white' />
+    </button>
+  );
+}

src/components/common/winelist/WineCard.tsx

@@ -9,11 +9,22 @@ interface WineCardProps {
   image: string;
   name: string;
   rating: number;
+  isCarouselEnd?: boolean;
 }
 
-export default function WineCard({ id, image, name, rating }: WineCardProps) {
+export default function WineCard({ id, image, name, rating, isCarouselEnd }: WineCardProps) {
   return (
-    <Link href={`/wines/${id}`} key={id} className='no-underline'>
+    <Link
+      href={`/wines/${id}`}
+      key={id}
+      className='no-underline'
+      onClick={(e) => {
+        if (isCarouselEnd) {
+          e.preventDefault();
+          e.stopPropagation();
+        }
+      }}
+    >
       <div
         className={cn(
           'flex h-[160px] bg-white p-2 border border-gray-200 ',

src/components/common/winelist/WineListCard.tsx

@@ -54,13 +54,13 @@ export default function WineListCard() {
 
   return (
     <div
-      className='flex flex-col gap-[24px] px-[16px] mt-[12px] min-w-[370px] h-[390px]
+      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] xl:800px'
     >
       {wineList?.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]'>
+          <div className='w-full bg-white border border-gray-300 rounded-xl flex flex-col relative min-w-[320px] group'>
             <ImageCard
               imageSrc={wine.image}
               className='pt-[20px] pb-0 border-none md:pl-[30px]'
@@ -114,7 +114,7 @@ export default function WineListCard() {
                     </div>
                   </div>
                   <button type='button' className='w-[36px] h-[36px] p-[4px] rounded'>
-                    <NextIcon className='w-full h-full text-gray-300 hover:text-gray-500' />
+                    <NextIcon className='w-full h-full text-gray-300 group-hover:text-gray-700' />
                   </button>
                 </div>
               </div>
@@ -144,7 +144,7 @@ export default function WineListCard() {
               type='button'
               className='w-[40px] h-[40px] p-[4px] rounded flex-shrink-0 ml-10 hidden md:block absolute top-[185px] right-[20px]'
             >
-              <NextIcon className='w-full h-full text-gray-300 hover:text-gray-500' />
+              <NextIcon className='w-full h-full text-gray-300 group-hover:text-gray-700' />
             </button>
             <div className='w-full h-px bg-gray-300 mt-[-1px]' />
             <div className='px-[25px] py-[20px] xl:w-[800px] xl:h-[110px]'>

src/components/common/winelist/WineSlider.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 
@@ -9,6 +9,7 @@ import {
   CarouselItem,
   CarouselPrevious,
   CarouselNext,
+  type CarouselApi,
 } from '@/components/ui/carousel';
 import { getRecommendedWines } from '@/lib/wineApi';
 import { RecommendedWineResponse } from '@/types/wineListType';
@@ -40,6 +41,33 @@ export default function WineSlider() {
     });
   }, [data]);
 
+  // useState 훅들을 여기에 선언합니다.
+  const [api, setApi] = useState<CarouselApi | undefined>();
+  const [isAtStart, setIsAtStart] = useState(true);
+  const [isAtEnd, setIsAtEnd] = useState(false);
+
+  // setApi prop에 직접 콜백을 작성하는 대신,
+  // api 상태가 변경될 때마다 캐러셀 이벤트를 관리하는 useEffect 훅을 사용합니다.
+  useEffect(() => {
+    if (!api) return;
+
+    const handleSelect = () => {
+      setIsAtStart(!api.canScrollPrev());
+      setIsAtEnd(!api.canScrollNext());
+    };
+
+    // 초기 렌더링 시에도 상태를 업데이트합니다.
+    handleSelect();
+
+    api.on('select', handleSelect);
+    api.on('reInit', handleSelect);
+
+    return () => {
+      api.off('select', handleSelect);
+      api.off('reInit', handleSelect);
+    };
+  }, [api]);
+
   return (
     <div className='mx-auto px-[16px] md:px-[20px] xl:px-0 max-w-[1140px] min-w-[365px] mt-[20px] mb-[24px]'>
       <section className='w-full min-h-[241px] rounded-[12px] bg-gray-100 py-[20px] md:min-h-[285px]'>
@@ -65,21 +93,23 @@ export default function WineSlider() {
                     align: 'start',
                     slidesToScroll: 2,
                   }}
+                  setApi={setApi} // <-- useState로 선언한 setApi 함수를 prop으로 전달합니다.
                 >
                   <CarouselContent>
-                    {filteredWines.map((wine) => (
+                    {filteredWines.map((wine, index) => (
                       <CarouselItem key={wine.id} className='basis-auto flex items-start '>
                         <WineCard
                           id={wine.id}
                           image={wine.image}
                           name={wine.name}
                           rating={wine.avgRating}
+                          isCarouselEnd={isAtEnd && index >= filteredWines.length - 2}
                         />
                       </CarouselItem>
                     ))}
                   </CarouselContent>
-                  <CarouselPrevious />
-                  <CarouselNext />
+                  <CarouselPrevious disabled={isAtStart} className='z-50' />
+                  <CarouselNext disabled={isAtEnd} className='z-50' />
                 </Carousel>
               );
             })()

src/pages/wines/index.tsx

@@ -1,5 +1,6 @@
 import { useEffect } from 'react';
 
+import ScrollToTop from '@/components/common/scrollToTop';
 import WineFilter from '@/components/common/winelist/WineFilter';
 import WineListCard from '@/components/common/winelist/WineListCard';
 import WineSlider from '@/components/common/winelist/WineSlider';
@@ -23,6 +24,7 @@ export default function Wines() {
       <div className='xl:hidden'>
         <WineListCard />
       </div>
+      <ScrollToTop />
     </div>
   );
 }