add PDFViewer

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

@@ -1,16 +0,0 @@
-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

@@ -1,35 +0,0 @@
-.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/components/PDFViewer/PDFViewer.jsx

@@ -0,0 +1,81 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import * as pdfjsLib from "pdfjs-dist";
+import pdfjsWorker from "pdfjs-dist/build/pdf.worker.mjs.map";
+import { getDocument } from "pdfjs-dist";
+
+pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorker;
+
+const PDFViewer = ({ pdfPath }) => {
+  const canvasRef = useRef(null);
+  const [page, setPage] = useState(1);
+
+  const drawCanvas = useCallback(
+    ({ width, height }) => {
+      if (!canvasRef.current) {
+        throw new Error("canvasRef가 없음");
+      }
+      const canvas = canvasRef.current;
+      canvas.width = width;
+      canvas.height = height;
+
+      const context = canvas.getContext("2d");
+      if (context) {
+        return context;
+      } else {
+        throw new Error("canvas context가 없음");
+      }
+    },
+    [canvasRef]
+  );
+
+  const renderPage = useCallback(
+    async (doc) => {
+      const currentPage = await doc.getPage(page);
+      const viewport = currentPage.getViewport({ scale: 1.0 }); // each pdf has its own viewport
+      const context = drawCanvas({
+        width: viewport.width,
+        height: viewport.height,
+      });
+
+      const renderContext = {
+        canvasContext: context,
+        viewport: viewport,
+      };
+
+      await currentPage.render(renderContext).promise;
+      console.log(`${page}로딩 성공`);
+    },
+    [page, drawCanvas]
+  );
+
+  const getPDF = useCallback(
+    async (pdfPath) => {
+      try {
+        const loadingTask = getDocument(pdfPath);
+        const doc = await loadingTask.promise;
+
+        const pageNum = doc.numPages;
+        console.log(`document 로딩 성공: 전체 페이지 ${pageNum}`);
+
+        renderPage(doc);
+        console.log("pdf 로딩 성공이라네");
+      } catch (e) {
+        console.log("pdf 로딩 실패!");
+        console.log(e);
+      }
+    },
+    [renderPage]
+  );
+
+  useEffect(() => {
+    getPDF(pdfPath);
+  }, [pdfPath]);
+
+  return (
+    <div>
+      <canvas ref={canvasRef} style={{ height: "500px" }} />
+    </div>
+  );
+};
+
+export default PDFViewer;

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

@@ -85,7 +85,8 @@ 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";
+
+import PDFViewer from "../../components/PDFViewer/PDFViewer";
 
 const preloadImages = [
   LoadingPreloadImage,
@@ -852,12 +853,7 @@ export default function MainView({ className, initService }) {
       >
         button
       </button>
-      {showPDF && (
-        <PDFModal
-          pdfUrl="https://www.orimi.com/pdf-test.pdf"
-          onClose={() => setShowPDF(false)}
-        />
-      )}
+      {showPDF && <PDFViewer pdfPath={"https://www.orimi.com/pdf-test.pdf"} />}
     </div>
   );
 }