From cc0a00b598b3a5ab04dcb702a0990454fd8146a9 Mon Sep 17 00:00:00 2001
From: kuan <guen9310@gmail.com>
Date: Thu, 5 Feb 2026 20:43:46 +0900
Subject: [PATCH] =?UTF-8?q?chore:=20mainbutton=20div=20->=20Image=20?=
 =?UTF-8?q?=EB=A1=9C=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../domains/main/mainContent/MainContent.tsx  |  7 +-
 .../MainContentButton.constants.ts            | 17 ++++-
 .../MainContentButton/MainContentButton.tsx   | 32 +++++---
 .../MainContentButton/MainContentButtons.tsx  | 75 ++++++++++++++++---
 .../MainContentButtonsSwiper.tsx              | 61 ---------------
 src/lib/constants/images.ts                   |  4 +-
 6 files changed, 101 insertions(+), 95 deletions(-)
 delete mode 100644 src/components/domains/main/mainContent/MainContentButton/MainContentButtonsSwiper.tsx

diff --git a/src/components/domains/main/mainContent/MainContent.tsx b/src/components/domains/main/mainContent/MainContent.tsx
index 2c88efed..3a03af7f 100644
--- a/src/components/domains/main/mainContent/MainContent.tsx
+++ b/src/components/domains/main/mainContent/MainContent.tsx
@@ -1,5 +1,4 @@
 import { MainContentButtons } from "./MainContentButton/MainContentButtons";
-import { MainContentButtonsSwiper } from "./MainContentButton/MainContentButtonsSwiper";
 import { MainContentReview } from "./MainContentReview";
 import { MainContentCommunity } from "./mainContentCommunity/MainContentCommunity";
 
@@ -7,14 +6,10 @@ 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>
diff --git a/src/components/domains/main/mainContent/MainContentButton/MainContentButton.constants.ts b/src/components/domains/main/mainContent/MainContentButton/MainContentButton.constants.ts
index c9a20a22..34775fce 100644
--- a/src/components/domains/main/mainContent/MainContentButton/MainContentButton.constants.ts
+++ b/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,
   },
 ];
diff --git a/src/components/domains/main/mainContent/MainContentButton/MainContentButton.tsx b/src/components/domains/main/mainContent/MainContentButton/MainContentButton.tsx
index 5fce2c6e..d471eb30 100644
--- a/src/components/domains/main/mainContent/MainContentButton/MainContentButton.tsx
+++ b/src/components/domains/main/mainContent/MainContentButton/MainContentButton.tsx
@@ -1,12 +1,18 @@
 "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 = ({
@@ -14,25 +20,27 @@ export const MainContentButton = ({
   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>
diff --git a/src/components/domains/main/mainContent/MainContentButton/MainContentButtons.tsx b/src/components/domains/main/mainContent/MainContentButton/MainContentButtons.tsx
index 138192e9..bce5915e 100644
--- a/src/components/domains/main/mainContent/MainContentButton/MainContentButtons.tsx
+++ b/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>
+    </>
   );
 };
diff --git a/src/components/domains/main/mainContent/MainContentButton/MainContentButtonsSwiper.tsx b/src/components/domains/main/mainContent/MainContentButton/MainContentButtonsSwiper.tsx
deleted file mode 100644
index 93c9b028..00000000
--- a/src/components/domains/main/mainContent/MainContentButton/MainContentButtonsSwiper.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-"use client";
-
-import { MainContentButton } from "./MainContentButton";
-import IMAGES from "@/lib/constants/images";
-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";
-
-// TODO: pagination bullet 스타일 수정 필요
-export const MainContentButtonsSwiper = () => {
-  return (
-    <div className="relative w-full tablet:px-5 px-4">
-      <Swiper
-        spaceBetween={10}
-        slidesPerView={1}
-        modules={[Pagination, Autoplay, Navigation]}
-        pagination={{
-          clickable: true,
-          // el: ".custom-swiper-pagination",
-        }}
-        navigation={{
-          nextEl: ".custom-next",
-          prevEl: ".custom-prev",
-        }}
-        autoplay={{ delay: 5000, disableOnInteraction: false }}
-      >
-        <SwiperSlide>
-          <MainContentButton
-            link="/perfumes"
-            title={
-              <>
-                원하는 향수를
-                <br />
-                찾아보세요!
-              </>
-            }
-            linkText="향수 검색페이지로 이동하기 ->"
-            bgImage={IMAGES.MainButton1.src.src}
-          />
-        </SwiperSlide>
-        <SwiperSlide>
-          <MainContentButton
-            link="/community"
-            title={
-              <>
-                내가 좋아하는 향을
-                <br />
-                추천해보세요!
-              </>
-            }
-            linkText="커뮤니티 페이지로 이동하기 ->"
-            bgImage={IMAGES.MainButton2.src.src}
-          />
-        </SwiperSlide>
-      </Swiper>
-    </div>
-  );
-};
diff --git a/src/lib/constants/images.ts b/src/lib/constants/images.ts
index 559c9722..c1b9e150 100644
--- a/src/lib/constants/images.ts
+++ b/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;