feat : 구매 배너 추가 (#446)

* feat: 구매 오픈 배너 추가

* feat: 배너 클릭 시 새 탭 이동

* fix: 배너 순서 변경

Author: goodsmell

src/assets/image/banner/purchaseOpen/banner_purchase_1280.png

@@ -13,6 +13,9 @@ import JunhyukBanner768 from "@/assets/image/banner/banner_jh_768.png";
 import JinsungBanner1280 from "@/assets/image/banner/banner_js_1280.png";
 import JinsungBannerDefault from "@/assets/image/banner/banner_js_default.png";
 import JinsungBanner768 from "@/assets/image/banner/banner_js_768.png";
+import PurchaseBanner768 from "@/assets/image/banner/purchaseOpen/banner_purchase_768.png";
+import PurchaseBanner1280 from "@/assets/image/banner/purchaseOpen/banner_purchase_1280.png";
+import PurchaseBannerDefault from "@/assets/image/banner/purchaseOpen/banner_purchase_1920.png";
 
 // bannerImages를 props로 받을 수 있게 처리
 type ResponsiveSrc = {
@@ -32,6 +35,14 @@ interface InfiniteBannerProps {
 
 const InfiniteBanner = ({
   banners = [
+    {
+      image: {
+        default: PurchaseBannerDefault,
+        md: PurchaseBanner768,
+        lg: PurchaseBanner1280,
+      },
+      link: "https://www.podo-store.com/post",
+    },
     {
       image: {
         default: PodoalBannerDefault, // 모바일 기본
@@ -60,11 +71,7 @@ const InfiniteBanner = ({
 }: InfiniteBannerProps) => {
   const realBannerCount = banners.length;
 
-  const clonedBannerImages = [
-    banners[realBannerCount - 1],
-    ...banners,
-    banners[0],
-  ];
+  const clonedBannerImages = [banners[realBannerCount - 1], ...banners, banners[0]];
 
   const [fakeIndex, setFakeIndex] = useState(1);
   const [isTransitioning, setIsTransitioning] = useState(true);
@@ -130,9 +137,7 @@ const InfiniteBanner = ({
           className="flex h-full will-change-transform"
           style={{
             transform: `translateX(-${fakeIndex * 100}%)`,
-            transition: isTransitioning
-              ? "transform 600ms cubic-bezier(0.25, 1, 0.5, 1)"
-              : "none",
+            transition: isTransitioning ? "transform 600ms cubic-bezier(0.25, 1, 0.5, 1)" : "none",
             width: `${clonedBannerImages.length * 100}%`,
           }}
           onTransitionEnd={handleTransitionEnd}
@@ -142,22 +147,20 @@ const InfiniteBanner = ({
             const isResponsive = typeof img !== "string";
             return (
               <div className="flex-none w-full h-full" key={idx}>
-                <a href={banner.link} className="block w-full h-full">
+                <a
+                  href={banner.link}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="block w-full h-full"
+                >
                   {isResponsive ? (
                     <picture>
                       {/* 데스크톱(≥1920px) → default */}
-                      <source
-                        media="(min-width: 1920px)"
-                        srcSet={img.default}
-                      />
+                      <source media="(min-width: 1920px)" srcSet={img.default} />
                       {/* 데스크톱(≥1280px) */}
-                      {img.lg && (
-                        <source media="(min-width: 1280px)" srcSet={img.lg} />
-                      )}
+                      {img.lg && <source media="(min-width: 1280px)" srcSet={img.lg} />}
                       {/* 태블릿(≥768px) */}
-                      {img.md && (
-                        <source media="(min-width: 768px)" srcSet={img.md} />
-                      )}
+                      {img.md && <source media="(min-width: 768px)" srcSet={img.md} />}
                       {/* 최종 폴백(모바일) */}
                       <img
                         src={img.default}