first commit 2

2026-06-11 18:47:38 +09:00
parent c768729ce6
commit 6f534e33a6
11095 changed files with 1595758 additions and 0 deletions
@@ -0,0 +1,147 @@
+(function(){
+
+    window.PDFViewer = {
+
+        opt: {},
+        pdf: null,
+        isMobile: window.innerWidth < 768,
+        rendered: {},
+        totalPages: 0,
+
+        init(opt) {
+            this.opt = opt;
+            this.loadPDF();
+        },
+
+        loadPDF() {
+            pdfjsLib.GlobalWorkerOptions.workerSrc = this.opt.worker;
+
+            pdfjsLib.getDocument(this.opt.pdf).promise.then(pdf => {
+                this.pdf = pdf;
+                this.totalPages = pdf.numPages;
+
+                this.createCover();
+                this.renderPage(1);
+                this.renderPage(2);
+
+                this.initTurn();
+            });
+        },
+
+        /* =====================
+           표지 + 마지막 페이지
+        ===================== */
+        createCover() {
+            const fb = document.getElementById(this.opt.target);
+
+            fb.insertAdjacentHTML('beforeend', `
+            <div class="page cover">
+                <div class="cover-inner">
+                    <h1>${this.opt.title || 'DOCUMENT'}</h1>
+                </div>
+            </div>
+        `);
+        },
+
+        createBackCover() {
+            const fb = document.getElementById(this.opt.target);
+
+            fb.insertAdjacentHTML('beforeend', `
+            <div class="page back-cover">
+                <div class="cover-inner">
+                    <p>END</p>
+                </div>
+            </div>
+        `);
+        },
+
+        /* =====================
+           Lazy Load 렌더
+        ===================== */
+        renderPage(pageNum) {
+            if (this.rendered[pageNum]) return;
+
+            this.pdf.getPage(pageNum).then(page => {
+                const scale = this.isMobile ? 1.1 : 1.5;
+                const viewport = page.getViewport({ scale });
+
+                const canvas = document.createElement('canvas');
+                const ctx = canvas.getContext('2d');
+
+                canvas.width = viewport.width;
+                canvas.height = viewport.height;
+
+                page.render({ canvasContext: ctx, viewport }).promise.then(() => {
+
+                    const div = document.createElement('div');
+                    div.className = 'page';
+                    div.dataset.page = pageNum;
+
+                    div.appendChild(canvas);
+                    div.insertAdjacentHTML('beforeend',
+                        `<span class="page-number">${pageNum}</span>`
+                    );
+
+                    document.getElementById(this.opt.target).appendChild(div);
+                    this.rendered[pageNum] = true;
+                });
+            });
+        },
+
+        /* =====================
+           turn.js 초기화
+        ===================== */
+        initTurn() {
+            const self = this;
+
+            this.opt.$('#' + this.opt.target).turn({
+                width: this.isMobile ? window.innerWidth : 900,
+                height: this.isMobile ? window.innerHeight * 0.75 : 600,
+                display: this.isMobile ? 'single' : 'double',
+                autoCenter: true,
+
+                turning(event, page) {
+                    self.lazyLoad(page);
+                },
+
+                turned(event, page) {
+                    if (page === self.totalPages) {
+                        self.createBackCover();
+                    }
+                }
+            });
+        },
+
+        /* =====================
+           Lazy Load 범위
+        ===================== */
+        lazyLoad(page) {
+            for (let i = page - 2; i <= page + 2; i++) {
+                if (i > 0 && i <= this.totalPages) {
+                    this.renderPage(i);
+                }
+            }
+        },
+
+        /* =====================
+           모달 뷰어
+        ===================== */
+        openModal(pdfUrl) {
+            document.body.insertAdjacentHTML('beforeend', `
+            <div id="pdf-modal">
+                <div class="modal-bg"></div>
+                <div class="modal-body">
+                    <button class="close">×</button>
+                    <div id="flipbook"></div>
+                </div>
+            </div>
+        `);
+
+            document.querySelector('#pdf-modal .close').onclick = () => {
+                document.getElementById('pdf-modal').remove();
+            };
+        }
+
+    };
+
+})();