From c87d874c4bb805f177634d86217850607a8074d5 Mon Sep 17 00:00:00 2001
From: dongyoungKo <ehddud3254@naver.com>
Date: Thu, 26 Jun 2025 10:26:45 +0900
Subject: [PATCH] add PDFModal component

---
 .../src/components/PDFViewer/PDFModal.jsx     | 16 +++++++++
 .../components/PDFViewer/PDFModal.module.less | 35 +++++++++++++++++++
 .../src/views/MainView/MainView.jsx           | 22 ++++++++----
 3 files changed, 66 insertions(+), 7 deletions(-)
 create mode 100644 com.twin.app.shoptime/src/components/PDFViewer/PDFModal.jsx
 create mode 100644 com.twin.app.shoptime/src/components/PDFViewer/PDFModal.module.less

diff --git a/com.twin.app.shoptime/src/components/PDFViewer/PDFModal.jsx b/com.twin.app.shoptime/src/components/PDFViewer/PDFModal.jsx
new file mode 100644
index 00000000..5077db2a
--- /dev/null
+++ b/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;
diff --git a/com.twin.app.shoptime/src/components/PDFViewer/PDFModal.module.less b/com.twin.app.shoptime/src/components/PDFViewer/PDFModal.module.less
new file mode 100644
index 00000000..b18a01c6
--- /dev/null
+++ b/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;
+}
diff --git a/com.twin.app.shoptime/src/views/MainView/MainView.jsx b/com.twin.app.shoptime/src/views/MainView/MainView.jsx
index 1fa9cc04..7ec82a98 100644
--- a/com.twin.app.shoptime/src/views/MainView/MainView.jsx
+++ b/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={() =>
-          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"
-          )
-        }
+        onClick={() => setShowPDF(true)}
       >
         button
       </button>
+      {showPDF && (
+        <PDFModal
+          pdfUrl="https://www.orimi.com/pdf-test.pdf"
+          onClose={() => setShowPDF(false)}
+        />
+      )}
     </div>
   );
 }