dnssash/theme/rd.dnssash/skin/board/construction/view.skin.php

<?php
if (!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가
include_once(G5_LIB_PATH.'/thumbnail.lib.php');

// 이 페이지에서도 스킨의 CSS 파일을 불러옵니다.
add_stylesheet('<link rel="stylesheet" href="' . $board_skin_url . '/style.css?ver=' . time() . '">', 0);
?>

<section id="bo_v">
    <h2 id="bo_v_title">
        <?php if ($category_name) { ?><span class="item-category"><?php echo $view['ca_name']; ?></span><?php } ?>
        <?php echo cut_str(get_text($view['wr_subject']), 70); // 글제목 출력 ?>
    </h2>

    <div id="bo_v_info">
        <!-- 예약 노출 여부 표시 -->
            <label class="frm_label"><?php echo $board['bo_1_subj'] ?></label>
            <div class="option_group">
                <label>
                    <input type="radio" name="wr_1_view" value="IMMEDIATE"
                        <?php echo ($view['wr_1'] !== 'RESERVED') ? 'checked' : ''; ?>
                           disabled> 즉시 노출
                </label>
                <label>
                    <input type="radio" name="wr_1_view" value="RESERVED"
                        <?php echo ($view['wr_1'] === 'RESERVED') ? 'checked' : ''; ?>
                           disabled> 예약 노출
                </label>
            </div>
        <?php if ($view['wr_1'] === 'RESERVED') { ?>
            <div id="reservation_fields" class="write_div">
                <div class="date_picker_group">
                    <div class="date_item">
                        <label class="frm_label"><?php echo $board['bo_2_subj'] ?></label>
                        <div class="frm_static"><?php echo $view['wr_2']; ?></div>
                    </div>
                    <span class="date_divider">~</span>
                    <div class="date_item">
                        <label class="frm_label"><?php echo $board['bo_3_subj'] ?></label>
                        <div class="frm_static"><?php echo $view['wr_3']; ?></div>
                    </div>
                </div>
            </div>
        <?php } ?>
    </div>
    <div id="bo_v_atc">
<!--        --><?php
//        // 📌 [핵심] 첫번째 첨부파일을 메인 비주얼로 상단에 크게 표시합니다.
//        if (isset($view['file'][0]['file']) && $view['file'][0]['file']) {
//            $file = $view['file'][0];
//            $file_ext = strtolower(pathinfo($file['file'], PATHINFO_EXTENSION));
//            $is_video = in_array($file_ext, ['mp4', 'mov', 'webm']);
//            $file_url = $file['path'].'/'.$file['file'];
//
//            echo "<div id=\"bo_v_main_visual\">\n";
//            if ($is_video) {
//                // 동영상 파일일 경우 video 태그로 출력
//                echo '<video src="'.$file_url.'" controls preload="metadata" playsinline></video>';
//            } else {
//                // 이미지 파일일 경우 img 태그로 출력
//                echo '<img src="'.$file_url.'" alt="'.get_text($file['source']).'">';
//            }
//            echo "</div>\n";
//        }
//        ?>

        <!-- 본문 내용 -->
        <div class="write_div">
            <label for="wr_content" class="frm_label">상세 내용</label>
            <div class="view_content">
                <?php echo conv_content($view['wr_content'], 1); ?>
            </div>
        </div>

        <!--        <div id="bo_v_con">-->
<!--            --><?php //echo get_view_thumbnail($view['content']); ?>
<!--        </div>-->

        <?php
        // 📌 [핵심] 두번째 첨부파일부터는 하단에 갤러리 형태로 표시합니다.
        if (isset($view['file']) && count($view['file']) > 0) {
            echo "<div id=\"bo_v_gallery\">\n";
            echo "<h3>첨부 파일</h3>";
            echo "<div class='gallery_grid'>";
            // 첫 번째 파일(메인 비주얼)을 제외하고 루프를 시작합니다.
            for ($i = 0; $i < $view['file']['count']; $i++) {
                $file = $view['file'][$i];
                if (empty($file['file'])) continue;
                $file_ext = strtolower(pathinfo($file['file'], PATHINFO_EXTENSION));
                $is_image = in_array($file_ext, ['gif', 'jpg', 'jpeg', 'png', 'webp']);
                $file_url = $file['path'].'/'.$file['file'];
                if ($is_image) {
                    // 썸네일 생성
                    $source_path = G5_DATA_PATH.'/file/'.$bo_table;
                    $thumb = thumbnail($file['file'], $source_path, $source_path, 200, 200, false, true);
                    $thumb_url = G5_DATA_URL.'/file/'.$bo_table.'/'.$thumb;

                    echo '<a href="'.$file_url.'" class="view_image_link">';
                    echo '<img src="'.$thumb_url.'" alt="'.get_text($file['source']).'">';
                    echo '</a>';
                } else {
                    // 이미지가 아닌 파일은 다운로드 링크 제공
                    echo '<div class="gallery_item_other">';
                    echo '<a href="'.$file['href'].'" class="view_file_link">';
                    echo '<i class="fa fa-download"></i> '.get_text($file['source']);
                    echo '</a>';
                    echo '</div>';
                }
            }
            echo "</div>"; // .gallery_grid
            echo "</div>\n"; // #bo_v_gallery
        }
        ?>
    </div>

    <div id="bo_v_bot">
        <div class="btn_area">
            <?php if ($update_href) { ?><a href="<?php echo $update_href ?>" class="btn_b02 btn">수정</a><?php } ?>
            <?php if ($delete_href) { ?><a href="<?php echo $delete_href ?>" onclick="del(this.href); return false;" class="btn_b02 btn">삭제</a><?php } ?>
            <?php if ($write_href) { ?><a href="<?php echo $write_href ?>" class="btn_b02 btn">글쓰기</a><?php } ?>
            <a href="<?php echo $list_href ?>" class="btn_b01 btn">목록</a>
        </div>
    </div>
</section>

<!-- 이미지 팝업(라이트박스) HTML과 스크립트 -->
<div id="image_lightbox" class="image_lightbox">
    <span class="lightbox_close">&times;</span>
    <img class="lightbox_content" id="lightbox_image">
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const lightbox = document.getElementById('image_lightbox');
        const lightboxImage = document.getElementById('lightbox_image');
        const imageLinks = document.querySelectorAll('.view_image_link');
        const closeBtn = document.querySelector('.lightbox_close');

        if (!lightbox || !imageLinks.length) return;

        imageLinks.forEach(link => {
            link.addEventListener('click', function(e) {
                e.preventDefault();
                lightboxImage.src = this.href;
                lightbox.style.display = 'flex';
            });
        });

        function closeModal() {
            lightbox.style.display = 'none';
            lightboxImage.src = '';
        }

        if(closeBtn) {
            closeBtn.addEventListener('click', closeModal);
        }
        lightbox.addEventListener('click', function(e) {
            if (e.target === lightbox) {
                closeModal();
            }
        });
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape' && lightbox.style.display === 'flex') {
                closeModal();
            }
        });
    });
</script>