메인 페이지 배너 캐러셀 구현

src/components/common/LandingBanner.tsx

@@ -0,0 +1,73 @@
+import Image from 'next/image';
+import { BannerCard, BannerCardContent } from '../ui/BannerCard';
+import Autoplay from 'embla-carousel-autoplay';
+import { Button } from '../ui/button';
+import {
+  BannerCarousel,
+  BannerCarouselContent,
+  BannerCarouselItem,
+  BannerCarouselNext,
+  BannerCarouselPrevious,
+  CarouselApi,
+} from '../ui/BannerCarousel';
+import React from 'react';
+
+export function LandingBanner() {
+  const [api, setApi] = React.useState<CarouselApi>();
+  const [current, setCurrent] = React.useState(0);
+  const [count, setCount] = React.useState(0);
+
+  React.useEffect(() => {
+    if (!api) {
+      return;
+    }
+
+    setCount(api.scrollSnapList().length);
+    setCurrent(api.selectedScrollSnap() + 1);
+
+    api.on('select', () => {
+      setCurrent(api.selectedScrollSnap() + 1);
+    });
+  }, [api]);
+  return (
+    <div className='flex flex-col items-center justify-center'>
+      <BannerCarousel setApi={setApi} className='w-2/3' plugins={[Autoplay({ delay: 4000 })]}>
+        <BannerCarouselPrevious />
+        <BannerCarouselContent>
+          {Array.from({ length: 3 }).map((_, index) => (
+            <BannerCarouselItem key={index}>
+              <BannerCard className='rounded-full border-none'>
+                <BannerCardContent className='flex items-center justify-center bg-white p-6'>
+                  {index === 0 ? (
+                    <Image width={1375} height={398} src={'/svgs/배너.svg'} alt='배너 이미지' className='relative' />
+                  ) : index === 1 ? (
+                    <Image
+                      width={137}
+                      height={39}
+                      src={'/svgs/email-icon.svg'}
+                      alt='배너 이미지'
+                      className='relative'
+                    />
+                  ) : index === 2 ? (
+                    <Image width={137} height={39} src={'/svgs/yumu-logo.svg'} alt='배너 이미지' className='relative' />
+                  ) : null}
+                </BannerCardContent>
+              </BannerCard>
+            </BannerCarouselItem>
+          ))}
+        </BannerCarouselContent>
+        <BannerCarouselNext />
+        <div className=' flex flex-row items-center justify-center gap-2 pl-[90%]'>
+          {Array.from(Array(count).keys()).map((_, index) => (
+            <Button
+              key={index}
+              size={'sm'}
+              className={`h-[1.5rem] rounded-full bg-gray-D  ${index === current - 1 ? 'bg-red-F ' : 'bg-gray-D'}`}
+              onClick={() => api?.scrollTo(index)}
+            ></Button>
+          ))}
+        </div>
+      </BannerCarousel>
+    </div>
+  );
+}

src/components/ui/BannerCard.tsx

@@ -0,0 +1,43 @@
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+const BannerCard = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => <div ref={ref} className={cn('', className)} {...props} />,
+);
+BannerCard.displayName = 'Card';
+
+const BannerCardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />
+  ),
+);
+BannerCardHeader.displayName = 'CardHeader';
+
+const BannerCardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <h3 ref={ref} className={cn('text-2xl font-semibold leading-none tracking-tight', className)} {...props} />
+  ),
+);
+BannerCardTitle.displayName = 'CardTitle';
+
+const BannerCardDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, ...props }, ref) => (
+    <p ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />
+  ),
+);
+BannerCardDescription.displayName = 'CardDescription';
+
+const BannerCardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />,
+);
+BannerCardContent.displayName = 'CardContent';
+
+const BannerCardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('flex items-center p-6 pt-0', className)} {...props} />
+  ),
+);
+BannerCardFooter.displayName = 'CardFooter';
+
+export { BannerCard, BannerCardHeader, BannerCardFooter, BannerCardTitle, BannerCardDescription, BannerCardContent };

src/components/ui/BannerCarousel.tsx

@@ -0,0 +1,229 @@
+import * as React from 'react';
+import useEmblaCarousel, { type UseEmblaCarouselType } from 'embla-carousel-react';
+import { IoIosArrowBack, IoIosArrowForward } from 'react-icons/io';
+
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
+
+type CarouselApi = UseEmblaCarouselType[1];
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
+type CarouselOptions = UseCarouselParameters[0];
+type CarouselPlugin = UseCarouselParameters[1];
+
+type CarouselProps = {
+  opts?: CarouselOptions;
+  plugins?: CarouselPlugin;
+  orientation?: 'horizontal' | 'vertical';
+  setApi?: (api: CarouselApi) => void;
+};
+
+type CarouselContextProps = {
+  carouselRef: ReturnType<typeof useEmblaCarousel>[0];
+  api: ReturnType<typeof useEmblaCarousel>[1];
+  scrollPrev: () => void;
+  scrollNext: () => void;
+  canScrollPrev: boolean;
+  canScrollNext: boolean;
+} & CarouselProps;
+
+const CarouselContext = React.createContext<CarouselContextProps | null>(null);
+
+function useCarousel() {
+  const context = React.useContext(CarouselContext);
+
+  if (!context) {
+    throw new Error('useCarousel must be used within a <Carousel />');
+  }
+
+  return context;
+}
+
+const BannerCarousel = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement> & CarouselProps>(
+  ({ orientation = 'horizontal', opts, setApi, plugins, className, children, ...props }, ref) => {
+    const [carouselRef, api] = useEmblaCarousel(
+      {
+        ...opts,
+        axis: orientation === 'horizontal' ? 'x' : 'y',
+      },
+      plugins,
+    );
+    const [canScrollPrev, setCanScrollPrev] = React.useState(false);
+    const [canScrollNext, setCanScrollNext] = React.useState(false);
+
+    const onSelect = React.useCallback((api: CarouselApi) => {
+      if (!api) {
+        return;
+      }
+
+      setCanScrollPrev(api.canScrollPrev());
+      setCanScrollNext(api.canScrollNext());
+    }, []);
+
+    const scrollPrev = React.useCallback(() => {
+      api?.scrollPrev();
+    }, [api]);
+
+    const scrollNext = React.useCallback(() => {
+      api?.scrollNext();
+    }, [api]);
+
+    const handleKeyDown = React.useCallback(
+      (event: React.KeyboardEvent<HTMLDivElement>) => {
+        if (event.key === 'ArrowLeft') {
+          event.preventDefault();
+          scrollPrev();
+        } else if (event.key === 'ArrowRight') {
+          event.preventDefault();
+          scrollNext();
+        }
+      },
+      [scrollPrev, scrollNext],
+    );
+
+    React.useEffect(() => {
+      if (!api || !setApi) {
+        return;
+      }
+
+      setApi(api);
+    }, [api, setApi]);
+
+    React.useEffect(() => {
+      if (!api) {
+        return;
+      }
+
+      onSelect(api);
+      api.on('reInit', onSelect);
+      api.on('select', onSelect);
+
+      return () => {
+        api?.off('select', onSelect);
+      };
+    }, [api, onSelect]);
+
+    return (
+      <CarouselContext.Provider
+        value={{
+          carouselRef,
+          api: api,
+          opts,
+          orientation: orientation || (opts?.axis === 'y' ? 'vertical' : 'horizontal'),
+          scrollPrev,
+          scrollNext,
+          canScrollPrev,
+          canScrollNext,
+        }}
+      >
+        <div
+          ref={ref}
+          onKeyDownCapture={handleKeyDown}
+          className={cn('relative', className)}
+          role='region'
+          aria-roledescription='carousel'
+          {...props}
+        >
+          {children}
+        </div>
+      </CarouselContext.Provider>
+    );
+  },
+);
+BannerCarousel.displayName = 'Carousel';
+
+const BannerCarouselContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => {
+    const { carouselRef, orientation } = useCarousel();
+
+    return (
+      <div ref={carouselRef} className='overflow-hidden'>
+        <div
+          ref={ref}
+          className={cn('flex', orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col', className)}
+          {...props}
+        />
+      </div>
+    );
+  },
+);
+BannerCarouselContent.displayName = 'CarouselContent';
+
+const BannerCarouselItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => {
+    const { orientation } = useCarousel();
+
+    return (
+      <div
+        ref={ref}
+        role='group'
+        aria-roledescription='slide'
+        className={cn('min-w-0 shrink-0 grow-0 basis-full', orientation === 'horizontal' ? 'pl-4' : 'pt-4', className)}
+        {...props}
+      />
+    );
+  },
+);
+BannerCarouselItem.displayName = 'CarouselItem';
+
+const BannerCarouselPrevious = React.forwardRef<HTMLButtonElement, React.ComponentProps<typeof Button>>(
+  ({ className, variant = 'outline', size = 'icon', ...props }, ref) => {
+    const { orientation, scrollPrev, canScrollPrev } = useCarousel();
+
+    return (
+      <Button
+        ref={ref}
+        variant={variant}
+        size={size}
+        className={cn(
+          `${!canScrollPrev ? `absolute z-10 ml-[2%] flex h-[5rem] w-[5rem] items-center justify-center rounded-full border-white bg-white text-[4rem] text-gray-D shadow-lg` : `absolute z-10 ml-[2%] flex h-[5rem] w-[5rem] items-center justify-center rounded-full border-white bg-white text-[4rem]  shadow-lg`}`,
+          orientation === 'horizontal'
+            ? '-left-12 top-1/2 -translate-y-1/2'
+            : '-top-12 left-1/2 -translate-x-1/2 rotate-90',
+          className,
+        )}
+        onClick={scrollPrev}
+        {...props}
+      >
+        <IoIosArrowBack />
+        <span className='sr-only'>Previous slide</span>
+      </Button>
+    );
+  },
+);
+BannerCarouselPrevious.displayName = 'CarouselPrevious';
+
+const BannerCarouselNext = React.forwardRef<HTMLButtonElement, React.ComponentProps<typeof Button>>(
+  ({ className, variant = 'outline', size = 'icon', ...props }, ref) => {
+    const { orientation, scrollNext, canScrollNext } = useCarousel();
+
+    return (
+      <Button
+        ref={ref}
+        variant={variant}
+        size={size}
+        className={cn(
+          `${!canScrollNext ? `absolute z-10 mr-[2%] flex h-[5rem] w-[5rem] items-center justify-center rounded-full border-white bg-white text-[4rem] text-gray-D shadow-lg` : `absolute z-10 mr-[2%] flex h-[5rem] w-[5rem] items-center justify-center rounded-full border-white bg-white text-[4rem]  shadow-lg`}`,
+          orientation === 'horizontal'
+            ? '-right-12 top-1/2 -translate-y-1/2'
+            : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
+          className,
+        )}
+        onClick={scrollNext}
+        {...props}
+      >
+        <IoIosArrowForward className='flex items-center justify-center' />
+        <span className='sr-only'>Next slide</span>
+      </Button>
+    );
+  },
+);
+BannerCarouselNext.displayName = 'CarouselNext';
+
+export {
+  type CarouselApi,
+  BannerCarousel,
+  BannerCarouselContent,
+  BannerCarouselItem,
+  BannerCarouselPrevious,
+  BannerCarouselNext,
+};

src/pages/landing/index.tsx

@@ -1,7 +1,9 @@
+import { LandingBanner } from '@/components/common/LandingBanner';
+
 export default function Landing() {
   return (
-    <>
-      <h1>랜딩</h1>
-    </>
+    <div className='flexCenter'>
+      <LandingBanner />
+    </div>
   );
 }