feat: 랜딩 페이지 구현 및 캐러셀, 랜딩 이미지 최적화

src/App.css

@@ -71,6 +71,7 @@
 .animate-slide-down {
   animation: slideDown 0.5s ease-out;
 }
+
 /* 자주 사용하는 스타일을 재사용하기 위해 컴포넌트화*/
 @layer components {
   .flex-center {

src/components/recruting/home/_main/Carousel.tsx

@@ -0,0 +1,32 @@
+import Slider from "react-slick";
+import "slick-carousel/slick/slick.css";
+import "slick-carousel/slick/slick-theme.css";
+import "./Carousel.css";
+import { lazy } from "react";
+
+const settings = {
+  dots: true, //개수 표시 점
+  infinite: true,
+  speed: 300, //다음 컨텐츠까지의 속도
+  slidesToShow: 1, //화면에 보이는 컨텐츠의 수
+  slidesToScroll: 1, //스크롤 시 넘어가는 컨텐츠 수
+  initialSlide: 0, //첫 컨텐츠 번호
+  autoplay: true, //자동 캐러셀
+  autoplaySpeed: 3000, //자동 캐러셀 속도
+  draggable: true //드래그
+};
+
+export default function Carousel() {
+  return (
+    <div className="slider-container ">
+      <Slider {...settings}>
+        <div>
+          <img src={"/assets/home/banner/bannerVer1.webp"} className="w-full" />
+        </div>
+        <div>
+          <img src={"/assets/home/banner/bannerVer2.webp"} className="w-full" />
+        </div>
+      </Slider>
+    </div>
+  );
+}

src/components/recruting/home/_main/MainBanner.tsx

@@ -1,50 +1,9 @@
-import { useQuery } from "@tanstack/react-query";
-import PopularClub from "./PopularClub";
-import { getPopularClub } from "../../../club/service/Club";
-import { clubCategoryList } from "../../../../constants/recruting";
-import LoadingSpinner from "../../common/LoadingSpinner";
-import LazyLoad from "./LazyLoad";
-
-function mapClubDataToPopularClubProps(club: ClubData): PopularClubProps {
-  const categoryDescription =
-    clubCategoryList.find((category) => category.value === club.category)
-      ?.description || "기타";
-
-  return {
-    logoSrc: club.profile || "/assets/ic-add.svg",
-    logoAlt: `${club.name} 로고`,
-    mainImageSrc: club.recruits[0]?.image || "/assets/home/profile-default.png",
-    clubType: club.type === "INTERNAL" ? "INTERNAL" : "EXTERNAL",
-    clubTitleFirst: categoryDescription,
-    clubTitleSecond: club.name,
-    tags: club.keyword
-  };
-}
+import Carousel from "./Carousel";
 
 export default function MainBanner() {
-  const { data: clubsData, isLoading } = useQuery<ClubData[]>(
-    ["popularClubs"],
-    getPopularClub
-  );
-
-  console.log(clubsData);
-  if (isLoading) return <LoadingSpinner />;
-
   return (
     <div className="w-full">
-      <LazyLoad />
-
-      <div className="absolute right-[150px] top-[85.5px] flex gap-[25.36px]">
-        {clubsData &&
-          clubsData
-            .slice(0, 3)
-            .map((club) => (
-              <PopularClub
-                key={club.id}
-                {...mapClubDataToPopularClubProps(club)}
-              />
-            ))}
-      </div>
+      <Carousel />
     </div>
   );
 }