chore: mainbutton div -> Image 로 변경

src/components/domains/main/mainContent/MainContent.tsx

@@ -1,20 +1,15 @@
 import { MainContentButtons } from "./MainContentButton/MainContentButtons";
-import { MainContentButtonsSwiper } from "./MainContentButton/MainContentButtonsSwiper";
 import { MainContentReview } from "./MainContentReview";
 import { MainContentCommunity } from "./mainContentCommunity/MainContentCommunity";
 
 export const MainContent = () => {
   return (
     <section className="w-full flex items-center justify-center">
       <div className="pc:max-w-[1200px] w-full h-fit flex pc:flex-row flex-col items-start justify-center gap-8 pb-10">
-        <div className="pc:flex hidden h-full flex-col gap-5">
+        <div className="w-full pc:w-auto flex flex-col gap-5 pc:gap-5">
           <MainContentButtons />
           <MainContentReview />
         </div>
-        <div className="pc:hidden flex flex-col items-center justify-center gap-10 w-full">
-          <MainContentButtonsSwiper />
-          <MainContentReview />
-        </div>
         <MainContentCommunity />
       </div>
     </section>

src/components/domains/main/mainContent/MainContentButton/MainContentButton.constants.ts

@@ -1,16 +1,27 @@
+import type { StaticImageData } from "next/image";
 import IMAGES from "@/lib/constants/images";
 
-export const MAIN_BUTTONS = [
+interface MainButton {
+  link: string;
+  title: string;
+  linkText: string;
+  bgImage: {
+    src: StaticImageData;
+    alt: string;
+  };
+}
+
+export const MAIN_BUTTONS: MainButton[] = [
   {
     link: "/perfumes",
     title: "원하는 향수를\n찾아보세요!",
     linkText: "향수 검색페이지로 이동하기 ->",
-    bgImage: IMAGES.MainButton1.src.src,
+    bgImage: IMAGES.SearchButton,
   },
   {
     link: "/community",
     title: "내가 좋아하는 향을\n추천해보세요!",
     linkText: "커뮤니티 페이지로 이동하기 ->",
-    bgImage: IMAGES.MainButton2.src.src,
+    bgImage: IMAGES.RecommendButton,
   },
 ];

src/components/domains/main/mainContent/MainContentButton/MainContentButton.tsx

@@ -1,38 +1,46 @@
 "use client";
 
 import Link from "next/link";
+import Image from "next/image";
+import type { StaticImageData } from "next/image";
 
 interface IMaincontentButtonProps {
   link: string;
   title: string | JSX.Element;
   linkText: string | JSX.Element;
-  bgImage?: string;
+  bgImage: {
+    src: StaticImageData;
+    alt: string;
+  };
+  isPriority?: boolean;
 }
 
 export const MainContentButton = ({
   link,
   title,
   linkText,
   bgImage,
+  isPriority = false,
 }: IMaincontentButtonProps) => {
   return (
     <Link
       href={link}
       className="pc:w-[340px] w-full tablet:h-[200px] h-[140px] bg-neutral-100 rounded-xl inline-flex flex-col justify-start items-start gap-12 "
     >
-      <div
-        className="w-full h-full rounded-xl flex flex-col justify-between items-start flex-1 tablet:p-8 p-6 overflow-hidden relative"
-        style={{
-          backgroundImage: `url(${bgImage})`,
-          backgroundSize: "cover",
-          backgroundPosition: "center",
-        }}
-      >
-        <div className="w-full h-full absolute top-0 left-0 self-stretchs bg-gradient-to-l from-black-100/30 to-[#000]/50 rounded-xl" />
-        <div className=" text-white tablet:text-headline-2 text-title-2 font-semibold z-10 whitespace-pre-line">
+      <div className="w-full h-full rounded-xl flex flex-col justify-between items-start flex-1 tablet:p-8 p-6 overflow-hidden relative">
+        <Image
+          src={bgImage.src}
+          alt={bgImage.alt}
+          fill
+          priority={isPriority}
+          className="object-cover rounded-xl"
+          sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 340px"
+        />
+        <div className="w-full h-full absolute top-0 left-0 self-stretchs bg-gradient-to-l from-black-100/30 to-[#000]/50 rounded-xl z-10" />
+        <div className=" text-white tablet:text-headline-2 text-title-2 font-semibold z-20 whitespace-pre-line">
           {title}
         </div>
-        <div className="text-right text-white tablet:text-body-1 text-label-2 font-semibold z-10">
+        <div className="text-right text-white tablet:text-body-1 text-label-2 font-semibold z-20">
           {linkText}
         </div>
       </div>

src/components/domains/main/mainContent/MainContentButton/MainContentButtons.tsx

@@ -1,18 +1,71 @@
+"use client";
+
 import { MainContentButton } from "./MainContentButton";
 import { MAIN_BUTTONS } from "./MainContentButton.constants";
+import { Autoplay, Navigation, Pagination } from "swiper/modules";
+import { Swiper, SwiperSlide } from "swiper/react";
+import "swiper/css";
+import "swiper/css/pagination";
+import "swiper/css/navigation";
+import "./MainContentButtonsSwiper.styles.css";
 
 export const MainContentButtons = () => {
   return (
-    <div className="flex gap-7">
-      {MAIN_BUTTONS.map((button, index) => (
-        <MainContentButton
-          key={index}
-          link={button.link}
-          title={button.title}
-          linkText={button.linkText}
-          bgImage={button.bgImage}
-        />
-      ))}
-    </div>
+    <>
+      {/* Desktop/Tablet: Grid Layout */}
+      <div className="pc:flex hidden gap-7">
+        {MAIN_BUTTONS.map((button, index) => (
+          <MainContentButton
+            key={index}
+            link={button.link}
+            title={button.title}
+            linkText={button.linkText}
+            bgImage={button.bgImage}
+            isPriority={index === 0}
+          />
+        ))}
+      </div>
+
+      {/* Mobile: Swiper */}
+      <div className="pc:hidden block relative w-full tablet:px-5 px-4">
+        <Swiper
+          spaceBetween={10}
+          slidesPerView={1}
+          modules={[Pagination, Autoplay, Navigation]}
+          pagination={{
+            clickable: true,
+          }}
+          navigation={{
+            nextEl: ".custom-next",
+            prevEl: ".custom-prev",
+          }}
+          autoplay={{ delay: 5000, disableOnInteraction: false }}
+        >
+          {MAIN_BUTTONS.map((button, index) => {
+            const titleLines = button.title.split("\n");
+            return (
+              <SwiperSlide key={index}>
+                <MainContentButton
+                  link={button.link}
+                  title={
+                    <>
+                      {titleLines.map((line, i) => (
+                        <span key={i}>
+                          {line}
+                          {i < titleLines.length - 1 && <br />}
+                        </span>
+                      ))}
+                    </>
+                  }
+                  linkText={button.linkText}
+                  bgImage={button.bgImage}
+                  isPriority={index === 0}
+                />
+              </SwiperSlide>
+            );
+          })}
+        </Swiper>
+      </div>
+    </>
   );
 };

src/lib/constants/images.ts

@@ -20,8 +20,8 @@ const IMAGES: { [key: string]: TImage } = {
   Google: { src: Google, alt: "google" },
   Naver: { src: Naver, alt: "naver" },
   Kakao: { src: Kakao, alt: "kakao" },
-  MainButton1: { src: MainButton1, alt: "main button 1" },
-  MainButton2: { src: MainButton2, alt: "main button 2" },
+  SearchButton: { src: MainButton1, alt: "search button" },
+  RecommendButton: { src: MainButton2, alt: "recommend button" },
 };
 
 export default IMAGES;