그누보드 스킨보드 mp4 mp3 pdf 동작 구현 sample 보기

그누보드 첨부파일 보기/재생 토글 구현 (PDF / MP3 / MP4)

???? 구현 내용 요약

$view['file'] 배열을 기반으로 첨부파일 확장자를 체크

확장자별 토글 버튼 생성 → 클릭 시 열기/닫기 기능

파일명 표시 → 업로드 당시 원래 이름(origin_name 또는 source) 사용

다운로드 버튼 제공 (MP3, MP4)

모바일 대응

PDF → PDF.js 사용 (Base64)

MP3 → <audio>

MP4 → <video>

PC/모바일 공통 호환, 자동재생 없이 버튼 클릭으로 재생

???? 전체 구현 코드
1️⃣ PDF 보기
<!-- PDF 보기 (다중 PDF, PC/모바일 통합) -->
<?php
if (isset($view['file']) && is_array($view['file'])) {
    $pdfIndex = 0;
    foreach ($view['file'] as $file) {
        $ext = strtolower(pathinfo($file['source'], PATHINFO_EXTENSION));
        if ($ext === 'pdf') {
            $pdfIndex++;
            $pdf_url = G5_DATA_URL.'/file/'.$bo_table.'/'.$file['file'];
            $pdf_path = G5_DATA_PATH.'/file/'.$bo_table.'/'.$file['file'];
            $pdf_base64 = file_exists($pdf_path) ? base64_encode(file_get_contents($pdf_path)) : '';
            $btnId = "pdfToggleBtn_$pdfIndex";
            $containerId = "pdfcontainer_$pdfIndex";
            ?>
            <div style="margin:20px 0">
                <button id="<?php echo $btnId; ?>">첨부된 PDF 바로보기 (<?php echo $file['source']; ?>)</button>
            </div>
            <div id="<?php echo $containerId; ?>" style="width:100%; max-height:100vh; overflow-y:auto; border:1px solid #ccc; display:none;"></div>

            <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfobject/2.2.8/pdfobject.min.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.min.js"></script>

            <script>
                (function() {
                    const btn = document.getElementById("<?php echo $btnId; ?>");
                    const container = document.getElementById("<?php echo $containerId; ?>");
                    let isPdfOpen = false;

                    btn.addEventListener("click", function () {
                        if (!isPdfOpen) {
                            container.innerHTML = "";
                            container.style.display = "block";

                            if (/Mobi|Android/i.test(navigator.userAgent)) {
                                const pdfData = atob("<?php echo $pdf_base64; ?>");
                                pdfjsLib.getDocument({ data: pdfData, disableWorker: true }).promise.then(function(pdf) {
                                    let pageNum = 1;
                                    function renderPage() {
                                        if (pageNum > pdf.numPages) return;
                                        pdf.getPage(pageNum).then(function(page) {
                                            const canvas = document.createElement("canvas");
                                            const ctx = canvas.getContext("2d");
                                            const containerWidth = container.clientWidth;
                                            const viewport = page.getViewport({ scale: 1 });
                                            const scale = containerWidth / viewport.width;
                                            const scaledViewport = page.getViewport({ scale: scale });
                                            canvas.width = scaledViewport.width;
                                            canvas.height = scaledViewport.height;
                                            page.render({ canvasContext: ctx, viewport: scaledViewport }).promise.then(() => {
                                                container.appendChild(canvas);
                                                pageNum++;
                                                renderPage();
                                            });
                                        });
                                    }
                                    renderPage();
                                }).catch(err => {
                                    container.innerHTML = "PDF 로딩 실패: " + err.message;
                                });
                            } else {
                                PDFObject.embed("<?php echo $pdf_url; ?>", "#<?php echo $containerId; ?>", {
                                    width: "100%",
                                    height: "800px",
                                    pdfOpenParams: { view: "FitH" }
                                });
                            }

                            btn.textContent = "PDF 닫기";
                            isPdfOpen = true;
                        } else {
                            container.innerHTML = "";
                            container.style.display = "none";
                            btn.textContent = "첨부된 PDF 바로보기 (<?php echo $file['source']; ?>)";
                            isPdfOpen = false;
                        }
                    });
                })();
            </script>
            <?php
        }
    }
}
?>
<!-- PDF 보기 끝 -->

2️⃣ MP3 플레이어
<!-- MP3 플레이어 -->
<?php
if (isset($view['file']) && is_array($view['file'])) {
    $mp3Index = 0;
    foreach ($view['file'] as $file) {
        $ext = strtolower(pathinfo($file['source'], PATHINFO_EXTENSION));
        if ($ext === 'mp3') {
            $mp3Index++;
            $mp3_name = isset($file['origin_name']) ? $file['origin_name'] : $file['source'];
            $mp3_url = G5_DATA_URL.'/file/'.$bo_table.'/'.$file['file'];
            $btnId = "mp3ToggleBtn_$mp3Index";
            $containerId = "mp3container_$mp3Index";
            ?>
            <div style="margin:15px 0">
                <button id="<?php echo $btnId; ?>">첨부된 MP3 듣기 (<?php echo $mp3_name; ?>)</button>
            </div>
            <div id="<?php echo $containerId; ?>" style="display:none; margin-bottom:15px; border:1px solid #ccc; padding:10px; border-radius:6px;">
                <audio controls preload="none" style="width:100%;">
                    <source src="<?php echo $mp3_url; ?>" type="audio/mpeg">
                    브라우저가 audio 태그를 지원하지 않습니다.
                </audio>
                <div style="margin-top:8px;">
                    <a href="<?php echo $mp3_url; ?>" download style="text-decoration:none; border:1px solid #ddd; padding:4px 8px; border-radius:4px;">다운로드</a>
                </div>
            </div>

            <script>
                (function() {
                    const btn = document.getElementById("<?php echo $btnId; ?>");
                    const container = document.getElementById("<?php echo $containerId; ?>");
                    let isOpen = false;
                    btn.addEventListener("click", function () {
                        if (!isOpen) {
                            container.style.display = "block";
                            btn.textContent = "MP3 닫기 (<?php echo $mp3_name; ?>)";
                            isOpen = true;
                        } else {
                            container.style.display = "none";
                            btn.textContent = "첨부된 MP3 듣기 (<?php echo $mp3_name; ?>)";
                            isOpen = false;
                        }
                    });
                })();
            </script>
            <?php
        }
    }
}
?>
<!-- MP3 플레이어 끝 -->

3️⃣ MP4 동영상 플레이어
<!-- MP4 플레이어 -->
<?php
if (isset($view['file']) && is_array($view['file'])) {
    $mp4Index = 0;
    foreach ($view['file'] as $file) {
        $ext = strtolower(pathinfo($file['source'], PATHINFO_EXTENSION));
        if ($ext === 'mp4') {
            $mp4Index++;
            $video_url = G5_DATA_URL.'/file/'.$bo_table.'/'.$file['file'];
            $btnId = "videoToggleBtn_$mp4Index";
            $containerId = "videocontainer_$mp4Index";
            ?>
            <div style="margin:20px 0">
                <button id="<?php echo $btnId; ?>">동영상 보기 (<?php echo $file['source']; ?>)</button>
            </div>
            <div id="<?php echo $containerId; ?>" style="display:none; margin-top:10px;"></div>

            <script>
                (function() {
                    const btn = document.getElementById("<?php echo $btnId; ?>");
                    const container = document.getElementById("<?php echo $containerId; ?>");
                    let isVideoOpen = false;

                    btn.addEventListener("click", function () {
                        if (!isVideoOpen) {
                            container.innerHTML = `
                                <video controls width="100%" style="max-height:70vh; background:#000;">
                                    <source src="<?php echo $video_url; ?>" type="video/mp4">
                                    지원하지 않는 브라우저입니다.
                                </video>
                                <div style="margin-top:8px;">
                                    <a href="<?php echo $video_url; ?>" download style="text-decoration:none; border:1px solid #ddd; padding:4px 8px; border-radius:4px;">다운로드</a>
                                </div>
                            `;
                            container.style.display = "block";
                            btn.textContent = "동영상 닫기";
                            isVideoOpen = true;
                        } else {
                            container.innerHTML = "";
                            container.style.display = "none";
                            btn.textContent = "동영상 보기 (<?php echo $file['source']; ?>)";
                            isVideoOpen = false;
                        }
                    });
                })();
            </script>
            <?php
        }
    }
}
?>
<!-- MP4 플레이어 끝 -->

✅ 특징 정리

토글 방식: 열기/닫기 버튼

파일명 표시: 업로드 당시 이름 기준(origin_name 또는 source)

다운로드 버튼: MP3 / MP4 제공

모바일 지원: <audio> / <video> / PDF.js

확장 가능: 이미지, ZIP 등 다른 파일도 동일 패턴 적용 가능

Appreciate the recommendation. Let me try it out

좋은 자료 감사합니다.

감사합니다.