diff --git a/public/assets/home/banner/bannerVer1.svg b/public/assets/home/banner/bannerVer1.svg deleted file mode 100644 index 8a68568e..00000000 --- a/public/assets/home/banner/bannerVer1.svg +++ /dev/null @@ -1,139 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/public/assets/home/banner/bannerVer1.webp b/public/assets/home/banner/bannerVer1.webp new file mode 100644 index 00000000..e64fc177 Binary files /dev/null and b/public/assets/home/banner/bannerVer1.webp differ diff --git a/public/assets/home/banner/bannerVer2.svg b/public/assets/home/banner/bannerVer2.svg deleted file mode 100644 index 2607c9d8..00000000 --- a/public/assets/home/banner/bannerVer2.svg +++ /dev/null @@ -1,93 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/public/assets/home/banner/bannerVer2.webp b/public/assets/home/banner/bannerVer2.webp new file mode 100644 index 00000000..83b3d07f Binary files /dev/null and b/public/assets/home/banner/bannerVer2.webp differ diff --git a/src/App.css b/src/App.css index ac357dca..0331c2a0 100644 --- a/src/App.css +++ b/src/App.css @@ -71,6 +71,7 @@ .animate-slide-down { animation: slideDown 0.5s ease-out; } + /* 자주 사용하는 스타일을 재사용하기 위해 컴포넌트화*/ @layer components { .flex-center { diff --git a/src/components/recruting/home/_main/LazyLoad.css b/src/components/recruting/home/_main/Carousel.css similarity index 100% rename from src/components/recruting/home/_main/LazyLoad.css rename to src/components/recruting/home/_main/Carousel.css diff --git a/src/components/recruting/home/_main/Carousel.tsx b/src/components/recruting/home/_main/Carousel.tsx new file mode 100644 index 00000000..0102c8e7 --- /dev/null +++ b/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 ( +
+ +
+ +
+
+ +
+ +
+ ); +} diff --git a/src/components/recruting/home/_main/LazyLoad.tsx b/src/components/recruting/home/_main/LazyLoad.tsx deleted file mode 100644 index be551562..00000000 --- a/src/components/recruting/home/_main/LazyLoad.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import Slider from "react-slick"; -import "slick-carousel/slick/slick.css"; -import "slick-carousel/slick/slick-theme.css"; -import "./LazyLoad.css"; - -function LazyLoad() { - const settings = { - dots: true, //개수 표시 점 - infinite: true, - speed: 500, //다음 컨텐츠까지의 속도 - slidesToShow: 1, //화면에 보이는 컨텐츠의 수 - slidesToScroll: 1, //스크롤 시 넘어가는 컨텐츠 수 - initialSlide: 0, //첫 컨텐츠 번호 - autoplay: true, //자동 캐러셀 - autoplaySpeed: 3000, //자동 캐러셀 속도 - draggable: false //드래그 - }; - return ( -
- -
- -
-
- -
- -
- ); -} - -export default LazyLoad; diff --git a/src/components/recruting/home/_main/MainBanner.tsx b/src/components/recruting/home/_main/MainBanner.tsx index fe7094df..d15af2fd 100644 --- a/src/components/recruting/home/_main/MainBanner.tsx +++ b/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( - ["popularClubs"], - getPopularClub - ); - - console.log(clubsData); - if (isLoading) return ; - return (
- - -
- {clubsData && - clubsData - .slice(0, 3) - .map((club) => ( - - ))} -
+
); }