Carousel 추가

README.md

@@ -116,6 +116,23 @@ const Parent = () => {
 
 <br />
 
+## Carousel
+
+캐러셀 컴포넌트입니다.
+
+### Example
+
+```jsx
+const carouselList = [0, 1, 2].map((index) => ({
+  id: index,
+  children: <div>{index}</div>,
+}));
+
+<Carousel carouselList={carouselList} />;
+```
+
+<br />
+
 ## **Checkbox**
 
 체크박스 컴포넌트입니다.

src/Carousel/Carousel.stories.tsx

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import Carousel from './Carousel';
+
+const meta: Meta<typeof Carousel> = {
+  title: 'Carousel',
+  component: Carousel,
+};
+
+export default meta;
+type Story = StoryObj<typeof Carousel>;
+
+export const Default: Story = {
+  args: {
+    carouselList: [
+      {
+        id: 0,
+        children: <div>1</div>,
+      },
+      {
+        id: 1,
+        children: <div>2</div>,
+      },
+      {
+        id: 2,
+        children: <div>3</div>,
+      },
+    ],
+  },
+};

src/Carousel/Carousel.tsx

@@ -0,0 +1,65 @@
+import type { ReactNode } from 'react';
+import { useEffect, useState } from 'react';
+import styled from 'styled-components';
+
+export interface CarouselProps {
+  carouselList: {
+    id: number;
+    children: ReactNode;
+  }[];
+}
+
+const Carousel = ({ carouselList }: CarouselProps) => {
+  const extendedCarouselList = [...carouselList, carouselList[0]];
+  const [currentIndex, setCurrentIndex] = useState(0);
+
+  const CAROUSEL_WIDTH = window.innerWidth;
+
+  const showNextSlide = () => {
+    setCurrentIndex((prev) => (prev === carouselList.length ? 0 : prev + 1));
+  };
+
+  useEffect(() => {
+    const timer = setInterval(showNextSlide, 2000);
+
+    return () => clearInterval(timer);
+  }, [currentIndex]);
+
+  return (
+    <CarouselContainer>
+      <CarouselWrapper
+        style={{
+          transform: 'translateX(-' + currentIndex * CAROUSEL_WIDTH + 'px)',
+          transition: currentIndex === length - 1 ? '' : 'all 0.5s ease-in-out',
+        }}
+      >
+        {extendedCarouselList.map(({ id, children }, index) => (
+          <CarouselItem
+            key={index === extendedCarouselList.length - 1 ? `${id}-last` : id}
+            style={{ width: `${CAROUSEL_WIDTH}px` }}
+          >
+            {children}
+          </CarouselItem>
+        ))}
+      </CarouselWrapper>
+    </CarouselContainer>
+  );
+};
+
+export default Carousel;
+
+const CarouselContainer = styled.div`
+  display: flex;
+  width: 100%;
+  border: 1px solid ${({ theme }) => theme.colors.gray2};
+  border-radius: 10px;
+  overflow: hidden;
+`;
+
+const CarouselWrapper = styled.ul`
+  display: flex;
+`;
+
+const CarouselItem = styled.li`
+  height: fit-content;
+`;

src/Carousel/index.ts

@@ -0,0 +1,5 @@
+import Carousel from './Carousel';
+
+export type { CarouselProps } from './Carousel';
+
+export default Carousel;

src/index.ts

@@ -7,12 +7,13 @@ export { default as Badge } from './Badge';
 export { default as BottomSheet } from './BottomSheet';
 export * from './BottomSheet';
 export { default as Button } from './Button';
+export { default as Carousel } from './Carousel';
 export { default as Checkbox } from './Checkbox';
 export { default as Divider } from './Divider';
 export { default as Heading } from './Heading';
+export { default as Input } from './Input';
 export { default as Link } from './Link';
+export { default as Skeleton } from './Skeleton';
 export { default as Spacing } from './Spacing';
 export { default as Text } from './Text';
 export { default as Textarea } from './Textarea';
-export { default as Input } from './Input';
-export { default as Skeleton } from './Skeleton';

src/types.ts

@@ -1,4 +1,4 @@
-import type { ComponentPropsWithRef, ComponentPropsWithoutRef, ElementType } from 'react';
+import type { ComponentPropsWithRef, ComponentPropsWithoutRef, ElementType, ReactNode } from 'react';
 
 export type Sizes = 'xs' | 'sm' | 'md' | 'lg' | 'xl';