팝업창 개발

src/components/common/PopupModal.tsx

@@ -0,0 +1,89 @@
+import React, { useEffect, useState } from 'react';
+import {Link} from "react-router-dom";
+
+interface PopupModalProps {
+  imageSrc: string;
+  button1Text: string;
+  button1Link: string;
+  button2Text: string;
+  button2Link: string;
+  popupKey: string;
+  offsetRightPx?: number;
+}
+
+const PopupModal: React.FC<PopupModalProps> = ({
+                                                 imageSrc,
+                                                 button1Text,
+                                                 button1Link,
+                                                 button2Text,
+                                                 button2Link,
+                                                 popupKey,
+                                                 offsetRightPx = 24,
+                                               }) => {
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    const hiddenUntil = localStorage.getItem(popupKey);
+    if (!hiddenUntil || Date.now() > Number(hiddenUntil)) {
+      setVisible(true);
+    }
+  }, []);
+
+  const handleClose = () => setVisible(false);
+
+  const handleCloseFor24Hours = () => {
+    const later = Date.now() + 24 * 60 * 60 * 1000;
+    localStorage.setItem(popupKey, later.toString());
+    setVisible(false);
+  };
+
+  if (!visible) return null;
+
+  return (
+    <div
+      className="fixed bottom-6 z-50 bg-white shadow-2xl rounded-lg p-4 text-center w-[400px] md:w-[480px]"
+      style={{ right: `${offsetRightPx}px` }}
+    >
+      {/* 닫기 버튼 */}
+      <button
+        onClick={handleClose}
+        className="absolute top-2 right-2 text-gray-500 hover:text-gray-700 text-xl cursor-pointer"
+      >
+        &times;
+      </button>
+
+      {/* 이미지 */}
+      <img
+        src={imageSrc}
+        alt="popup"
+        className="w-full h-auto min-h-[200px] rounded mb-4 object-contain"
+      />
+
+      {/* 버튼 영역 */}
+      <div className="flex gap-2 mb-4">
+        <Link
+          to={button1Link}
+          className="flex-1 bg-blue-600 text-white px-3 py-2 rounded text-sm hover:bg-blue-700"
+        >
+          {button1Text}
+        </Link>
+        <Link
+          to={button2Link}
+          className="flex-1 bg-green-600 text-white px-3 py-2 rounded text-sm hover:bg-green-700"
+        >
+          {button2Text}
+        </Link>
+      </div>
+
+      {/* 24시간 숨기기 */}
+      {/*<button*/}
+      {/*  onClick={handleCloseFor24Hours}*/}
+      {/*  className="text-xs text-gray-500 hover:underline cursor-pointer"*/}
+      {/*>*/}
+      {/*  24시간 동안 다시 열람하지 않습니다.*/}
+      {/*</button>*/}
+    </div>
+  );
+};
+
+export default PopupModal;

src/pages/Main.tsx

@@ -1,6 +1,7 @@
 import React, { lazy, Suspense } from 'react';
 import TopButton from "@/components/common/TopButton";
 import LoadingSpinner from "@/components/common/LoadingSpinner";
+import PopupModal from "@/components/common/PopupModal"; // ✅ import
 
 const Hero = lazy(() => import("@/components/main/Hero.jsx"));
 const Business = lazy(() => import("@/components/main/Business.jsx"));
@@ -12,14 +13,35 @@ const Footer = lazy(() => import("@/components/main/Footer.jsx"));
 const Main = () => {
   return (
     <>
+      <PopupModal
+        imageSrc="/image/popup/popup1.jpg"
+        button1Text="자세히 보기"
+        button1Link="/business/sections"
+        button2Text="전국 문의"
+        button2Link="/business/sections"
+        popupKey="popup_hidden_1"
+        offsetRightPx={24} // right-6
+      />
+
+      <PopupModal
+        imageSrc="/image/popup/popup2.jpg"
+        button1Text="자세히 보기"
+        button1Link="/business/sections"
+        button2Text="견적 문의하기"
+        button2Link="/business/sections"
+        popupKey="popup_hidden_2"
+        offsetRightPx={360} // right-90px (popup1 width + margin)
+      />
+
       <Suspense fallback={<LoadingSpinner />}>
-        <Hero/>
-        <Business/>
-        <Project/>
-        <Partners/>
-        <Directions/>
-        <Footer/>
+        <Hero />
+        <Business />
+        <Project />
+        <Partners />
+        <Directions />
+        <Footer />
       </Suspense>
+
       <TopButton />
     </>
   );