feat: 메인페이지 qa 반영 (#263)

* feat: 메인 배너 컴포넌트 화 및 메인 페이지로 이동

* design: 오늘의 경기 탭 삭제

* fix: dayCarousel 반응형 고려

* fix: header 반응형 고려

* feat: 경기 상태 버튼 추가

* design: 경기 취소, 종료 스타일 변경

* feat: 데이터 없을 때 로직 추가 및 버튼 클릭시 이동하게 구현

* design: 반응형 반영

* design: 간격 수정

* feat: 헤더 반응형 구현

* design: 사이즈 조정

* design: margin 추가

components/DayCarousel.tsx

@@ -52,7 +52,7 @@ export default function MonthlyDateCarousel({
   return (
     <section
       className="w-full sticky top-[4rem] z-10 bg-white mb-5"
-      aria-label="Monthly Date Carousel"
+      aria-label="경기 날짜 선택"
     >
       <div className="relative w-full">
         <Carousel
@@ -68,11 +68,11 @@ export default function MonthlyDateCarousel({
           >
             <ChevronLeft size={18} className="text-indigo-600" />
           </CarouselPrevious>
-          <CarouselContent className="flex items-center gap-2 p-4">
+          <CarouselContent className="flex items-center gap-2 px-2 md:px-4 p-2">
             {dates.map((date) => {
               let textColor = "text-gray-600";
               let dateStyles =
-                "cursor-pointer transition-all duration-200 transform rounded-full w-28 h-14 flex flex-col items-center justify-center";
+                "cursor-pointer transition-all duration-200 transform rounded-full w-16 h-14 flex flex-col items-center justify-center md:w-28";
 
               if (selectedDate.toDateString() === date.date.toDateString()) {
                 dateStyles +=
@@ -95,7 +95,7 @@ export default function MonthlyDateCarousel({
               return (
                 <CarouselItem
                   key={date.date.toISOString()}
-                  className="flex-none basis-1/6"
+                  className="flex-none basis-[20%] sm:basis-[14.2857%] md:basis-1/6"
                 >
                   <button
                     className={`${dateStyles} ${textColor}`}
@@ -109,10 +109,12 @@ export default function MonthlyDateCarousel({
                     type="button"
                   >
                     <div className="flex flex-col items-center justify-center p-0">
-                      <span className={`text-sm font-medium ${textColor}`}>
+                      <span
+                        className={`text-xs md:text-sm font-medium ${textColor}`}
+                      >
                         {format(date.date, "EEE", { locale: ko })}
                       </span>
-                      <span className="text-xl font-bold">
+                      <span className="text-lg md:text-xl font-bold">
                         {format(date.date, "d")}
                       </span>
                     </div>

components/MainBannerCarousel.tsx

@@ -0,0 +1,84 @@
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+} from "@/components/ui/carousel";
+import Autoplay from "embla-carousel-autoplay";
+import type { UseEmblaCarouselType } from "embla-carousel-react";
+import { useCallback, useEffect, useState } from "react";
+
+const imageUrl = [
+  "/images/banner-rules.png",
+  "/images/banner-process.png",
+  "/images/banner-polite.png",
+  "/images/banner-match.png",
+];
+
+function MainBannerCarousel() {
+  const [api, setApi] = useState<UseEmblaCarouselType[1]>();
+  const [current, setCurrent] = useState(0);
+  const [count, setCount] = useState(0);
+
+  useEffect(() => {
+    if (!api) {
+      return;
+    }
+
+    setCount(api.scrollSnapList().length);
+    setCurrent(api.selectedScrollSnap());
+
+    api.on("select", () => {
+      setCurrent(api.selectedScrollSnap());
+    });
+  }, [api]);
+
+  const scrollTo = useCallback(
+    (index: number) => {
+      api?.scrollTo(index);
+    },
+    [api],
+  );
+
+  return (
+    <section>
+      <Carousel
+        plugins={[
+          Autoplay({
+            delay: 5000,
+          }),
+        ]}
+        setApi={setApi}
+        className="w-full"
+      >
+        <CarouselContent>
+          {imageUrl.map((url, index) => (
+            <CarouselItem key={url} className="w-full h-[346px]">
+              <img
+                src={`${url}`}
+                alt={`banner ${index + 1}`}
+                className="w-[1048px] h-[346px] object-fit rounded-lg"
+              />
+            </CarouselItem>
+          ))}
+        </CarouselContent>
+      </Carousel>
+      <div className="flex justify-center space-x-2 mt-4 gap-2">
+        {Array.from({ length: count }).map((_, index) => (
+          <button
+            type="button"
+            key={`dots-${
+              // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
+              index
+            }`}
+            className={`w-2 h-2 rounded-full transition-colors duration-200 ${
+              index === current ? "bg-primary" : "bg-gray-300"
+            }`}
+            onClick={() => scrollTo(index)}
+          />
+        ))}
+      </div>
+    </section>
+  );
+}
+
+export default MainBannerCarousel;