Feat(design-system): 홈 배너 상단 캐러셀 구현

apps/client/src/pages/home/page/home.css.ts

@@ -0,0 +1,7 @@
+import { style } from '@vanilla-extract/css';
+import { themeVars } from '@confeti/design-system/styles';
+
+export const mainStyle = style({
+  paddingTop: '3rem',
+  background: themeVars.color.confeti_purple_grad,
+});

apps/client/src/pages/home/page/home.tsx

@@ -1,4 +1,7 @@
-import { Footer, Navigation } from '@confeti/design-system';
+import { Footer, TopCarousel, Navigation } from '@confeti/design-system';
+import { performData } from '@shared/mocks/top-carousel-mock';
+import * as styles from './home.css';
+
 import { TAB_MENU } from '../constants/menu';
 
 const Home = () => {
@@ -11,10 +14,15 @@ const Home = () => {
         </Navigation.List>
         <Navigation.Panels>
           {/* TODO: 추후 페이지 연결 */}
-          <Navigation.Panel>홈페이지</Navigation.Panel>
+          <Navigation.Panel>
+            <div className={styles.mainStyle}>
+              <TopCarousel performData={performData}></TopCarousel>
+            </div>
+          </Navigation.Panel>
           <Navigation.Panel>타임테이블</Navigation.Panel>
         </Navigation.Panels>
       </Navigation.Root>
+
       <Footer />
     </>
   );

apps/client/src/shared/mocks/top-carousel-mock.ts

@@ -0,0 +1,61 @@
+export const performData = [
+  {
+    performanceId: 1,
+    type: 'concert',
+    title: '오아시스 내한공연',
+    subTitle: 'LIVE NATION PRESENTS COLDPLAY',
+    performanceAt: '2025.10.21',
+    posterUrl:
+      'https://image.utoimage.com/preview/cp872722/2022/12/202212008462_500.jpg',
+  },
+  {
+    performanceId: 2,
+    type: 'festival',
+    title: '오아시스 내한공연',
+    subTitle: '',
+    performanceAt: '2025.10.21',
+    posterUrl: 'https://dummyimage.com/197x262',
+  },
+  {
+    performanceId: 3,
+    type: 'festival',
+    title: '오아시스 내한공연3',
+    subTitle: 'LIVE NATION PRESENTS COLDPLAY',
+    performanceAt: '2025.10.21',
+    posterUrl: 'https://dummyimage.com/197x262',
+  },
+  {
+    performanceId: 4,
+    type: 'festival',
+    title: '오아시스 내한공연4',
+    subTitle: '',
+    performanceAt: '2025.10.21',
+    posterUrl:
+      'https://image.utoimage.com/preview/cp872722/2022/12/202212008462_500.jpg',
+  },
+  {
+    performanceId: 5,
+    type: 'festival',
+    title: '오아시스 내한공연5',
+    subTitle: 'LIVE NATION PRESENTS COLDPLAY',
+    performanceAt: '2025.10.21',
+    posterUrl: 'https://dummyimage.com/197x262',
+  },
+  {
+    performanceId: 6,
+    type: 'festival',
+    title: '오아시스 내한공연6',
+    subTitle: 'LIVE NATION PRESENTS COLDPLAY',
+    performanceAt: '2025.10.21',
+    posterUrl:
+      'https://image.utoimage.com/preview/cp872722/2022/12/202212008462_500.jpg',
+  },
+  {
+    performanceId: 7,
+    type: 'festival',
+    title: '오아시스 내한공연7',
+    subTitle: '',
+    performanceAt: '2025.10.21',
+    posterUrl: 'https://dummyimage.com/197x262',
+  },
+];

packages/design-system/package.json

@@ -39,12 +39,15 @@
     "vite": "^5.4.8"
   },
   "dependencies": {
+    "@types/react-slick": "^0.23.13",
     "@vanilla-extract/css": "^1.17.0",
     "@vanilla-extract/recipes": "^0.5.5",
     "@vanilla-extract/sprinkles": "^1.6.3",
     "clsx": "^2.1.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "react-router-dom": "^7.1.1"
+    "react-router-dom": "^7.1.1",
+    "react-slick": "^0.30.3",
+    "slick-carousel": "^1.8.1"
   }
 }

packages/design-system/src/components/index.ts

@@ -6,5 +6,8 @@ export { default as FloatingButton } from './floating-button/floating-button';
 export { default as ToastContainer } from './toast/toast-container';
 export { toast } from './toast/utils/toast';
 export { default as Header } from './header/header';
+
+export { default as TopCarousel } from './top-carousel/top-carousel';
+
 export { default as FestivalCard } from './festival-card/festival-card';
 export { default as Spacing } from './spacing/spacing';

packages/design-system/src/components/top-carousel/dots.css

@@ -0,0 +1,35 @@
+.dots_custom {
+  display: flex;
+  justify-content: center;
+  vertical-align: middle;
+  margin: 0;
+  padding-top: 0rem !important;
+  padding-bottom: 1.6 !important;
+}
+
+.dots_custom li {
+  list-style: none;
+  cursor: pointer;
+  display: inline-block;
+  margin-right: 8px;
+  padding: 0;
+}
+
+.dots_custom li button {
+  border: none;
+  background: #ffffff;
+  opacity: 0.2;
+  cursor: pointer;
+  display: block;
+  height: 6px;
+  width: 6px;
+  border-radius: 100%;
+  padding: 0;
+  content: '';
+  color: transparent;
+}
+
+.dots_custom li.slick-active button {
+  background-color: #92c015;
+  opacity: 1;
+}

packages/design-system/src/components/top-carousel/slick.css

@@ -0,0 +1,107 @@
+/* Slider */
+.slick-slider {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+
+  -webkit-touch-callout: none;
+  -khtml-user-select: none;
+  -ms-touch-action: pan-y;
+  touch-action: pan-y;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.slick-list {
+  gap: 2rem;
+  overflow: hidden;
+
+  margin: 0;
+}
+.slick-list:focus {
+  outline: none;
+}
+.slick-list.dragging {
+  cursor: pointer;
+  cursor: hand;
+}
+
+.slick-slider .slick-track,
+.slick-slider .slick-list {
+  -webkit-transform: translate3d(0, 0, 0);
+  -moz-transform: translate3d(0, 0, 0);
+  -ms-transform: translate3d(0, 0, 0);
+  -o-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
+}
+
+.slick-track {
+  margin: auto;
+  padding-bottom: 2rem;
+}
+.slick-track:before,
+.slick-track:after {
+  display: table;
+  content: '';
+}
+.slick-track:after {
+  clear: both;
+}
+.slick-loading .slick-track {
+  visibility: hidden;
+}
+
+.slick-slide {
+  display: none;
+  float: left;
+
+  height: 100%;
+  min-height: 1px;
+}
+[dir='rtl'] .slick-slide {
+  float: right;
+}
+.slick-slide img {
+  display: block;
+}
+.slick-slide.slick-loading img {
+  display: none;
+}
+.slick-slide.dragging img {
+  pointer-events: none;
+}
+.slick-initialized .slick-slide {
+  display: block;
+}
+.slick-loading .slick-slide {
+  visibility: hidden;
+}
+.slick-vertical .slick-slide {
+  display: block;
+
+  height: auto;
+
+  border: 1px solid transparent;
+}
+.slick-arrow.slick-hidden {
+  display: none;
+}
+
+/* 기본 슬라이드 스타일 */
+.slick-slide {
+  transition:
+    transform 0.5s ease,
+    opacity 0.5s ease;
+  opacity: 0.7;
+  transform: scale(0.8);
+}
+
+/* 중앙 슬라이드 스타일 */
+.slick-center {
+  opacity: 1;
+  transform: scale(1);
+}

packages/design-system/src/components/top-carousel/top-carousel.css

@@ -0,0 +1,63 @@
+@keyframes fadeInOut {
+  0% {
+    opacity: 0;
+  }
+
+  50% {
+    opacity: 0.5;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+.banner-title {
+  margin-top: 3rem;
+
+  height: 10.3rem;
+}
+
+.title-date {
+  color: var(--grayscale-white, #fff);
+  text-align: center;
+  margin-bottom: 1.2rem;
+
+  /* subtitle/subtitle5_sb_12 */
+  font-size: 1.2rem;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 140%; /* 16.8px */
+  animation: fadeInOut 1s ease-out forwards; /* 4초마다 반복되는 애니메이션 */
+}
+
+.title-name {
+  color: var(--grayscale-white, #fff);
+  text-align: center;
+  margin-bottom: 4px;
+  /* title/title1_b_24 */
+  font-size: 2.4rem;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+  animation: fadeInOut 1s ease-out forwards; /* 4초마다 반복되는 애니메이션 */
+}
+
+.title-sub {
+  color: var(--grayscale-gray500, #93959d);
+  text-align: center;
+  /* body/body3_m_14 */
+  font-size: 1.4rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+  animation: fadeInOut 1s ease-out forwards; /* 4초마다 반복되는 애니메이션 */
+}
+
+.card {
+  z-index: 1;
+  width: 19.7rem;
+  height: 26.2rem;
+  border-radius: 10px;
+  box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.25);
+}