add PDFModal component

com.twin.app.shoptime/src/components/PDFViewer/PDFModal.jsx

@@ -0,0 +1,16 @@
+import React from "react";
+import css from "./PDFModal.module.less";
+const PDFModal = ({ pdfUrl, onClose }) => {
+  return (
+    <div className={css.overlay}>
+      <div className={css.modal}>
+        <button className={css.closeButton} onClick={onClose}>
+          ✕ 닫기
+        </button>
+        <iframe src={pdfUrl} className={css.iframe} title="PDF Viewer" />
+      </div>
+    </div>
+  );
+};
+
+export default PDFModal;

com.twin.app.shoptime/src/components/PDFViewer/PDFModal.module.less

@@ -0,0 +1,35 @@
+.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 999;
+}
+
+.modal {
+  position: relative;
+  width: 80%;
+  height: 80%;
+  margin: 5% auto;
+  background: white;
+  border-radius: 10px;
+  overflow: hidden;
+}
+
+.iframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+}
+
+.closeButton {
+  position: absolute;
+  top: 10px;
+  right: 15px;
+  background: transparent;
+  border: none;
+  font-size: 18px;
+  cursor: pointer;
+}

com.twin.app.shoptime/src/views/MainView/MainView.jsx

@@ -85,6 +85,7 @@ import WelcomeEventPanel from "../WelcomeEventPanel/WelcomeEventPanel";
 import OptionalTermsConfirm from "../../components/Optional/OptionalTermsConfirm";
 import OptionalTermsConfirmBottom from "../../components/Optional/OptionalTermsConfirmBottom";
 import css from "./MainView.module.less";
+import PDFModal from "../../components/PDFViewer/PDFModal";
 
 const preloadImages = [
   LoadingPreloadImage,
@@ -164,7 +165,7 @@ export default function MainView({ className, initService }) {
   );
 
   const deviceCountryCode = httpHeader?.["X-Device-Country"] || "";
-
+  const [showPDF, setShowPDF] = useState(false);
   const isLogSentRef = useRef(false);
   const watchRecord = useSelector((state) => state.localSettings?.watchRecord);
   const watchRecordRef = usePrevious(watchRecord);
@@ -173,6 +174,7 @@ export default function MainView({ className, initService }) {
   const [imagePreloaded, setImagePreloaded] = useState(false);
   const [ariaHidden, setAriaHidden] = useState(false);
   const [showEndOfServicePopup, setShowEndOfServicePopup] = useState(false);
+
   const topPanel = panels[panels.length - 1];
 
   useEffect(() => {
@@ -376,7 +378,11 @@ export default function MainView({ className, initService }) {
   );
 
   const openPdfPopup = (pdfUrl) => {
-    window.open(pdfUrl, "_blank", "width=800,height=600");
+    window.open(
+      pdfUrl,
+      "pdfWindow",
+      "width=800,height=600,top=100,left=100,resizable=yes,scrollbars=yes,toolbar=no,menubar=no,status=no"
+    );
   };
   useEffect(() => {
     document.addEventListener("cursorStateChange", cursorStateChange, false);
@@ -842,14 +848,16 @@ export default function MainView({ className, initService }) {
           opacity: ".5",
           zIndex: "999",
         }}
-        onClick={() =>
+        onClick={() => setShowPDF(true)}
-          openPdfPopup(
-            "https://www.lg.com/de/lgecs.downloadFile.ldwf?DOC_ID=20240131210092&ORIGINAL_NAME_b1_a1=F4WR703YB.pdf&FILE_NAME=F4WR703YB[20240131210092].pdf&TC=DwnCmd&GSRI_DOC=GSRI&SPEC_DOWNLOAD=N"
-          )
-        }
       >
         button
       </button>
+      {showPDF && (
+        <PDFModal
+          pdfUrl="https://www.orimi.com/pdf-test.pdf"
+          onClose={() => setShowPDF(false)}
+        />
+      )}
     </div>
   );
 }