dbmsv4/app/Views/templates/common/modal_fetch_v2.php

<!-- 모달 HTML -->
<div id="modal_action_form" class="modal fade" tabindex="-1" aria-labelledby="modal_label" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modal_label">
                    &nbsp;&nbsp;<?= icon('DESKTOP') ?> <?= $viewDatas['content_title'] ?>&nbsp;&nbsp;
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" id="modal-body-content" style="max-height: 80vh; overflow-y: auto;">
                <!-- 여기에 AJAX로 콘텐츠가 삽입됨 -->
            </div>
        </div>
    </div>
</div>

<!-- 필수 CDN (jQuery, Select2, jQuery UI Datepicker, TinyMCE) -->
<link href="//cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="//code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>

<script>
    const modal = document.getElementById('modal_action_form');
    const modalBody = document.getElementById('modal-body-content');

    // 콘텐츠 로드 함수
    async function loadContent(url) {
        try {
            const response = await fetch(url);
            if (!response.ok) throw new Error(`HTTP 오류! 상태: ${response.status}`);
            const content = await response.text();
            modalBody.innerHTML = content;

            // 스크립트 실행
            const scripts = modalBody.getElementsByTagName('script');
            for (let script of scripts) {
                if (script.src) {
                    await loadScript(script.src);
                } else {
                    eval(script.innerHTML);
                }
            }

            setupFormSubmission();
            initializePlugins(); // 플러그인 초기화

        } catch (error) {
            console.error('콘텐츠 로드 중 오류 발생:', error);
            modalBody.innerHTML = '<p>콘텐츠를 로드하는 중 오류가 발생했습니다. 다시 시도해 주세요.</p>';
        }
    }

    // 외부 스크립트 로드 함수
    function loadScript(src) {
        return new Promise((resolve, reject) => {
            const script = document.createElement('script');
            script.src = src;
            script.onload = () => resolve();
            script.onerror = () => reject(new Error(`스크립트 로드 실패: ${src}`));
            document.body.appendChild(script);
        });
    }

    // 폼 제출 처리
    function setupFormSubmission() {
        const form = modalBody.querySelector('form');
        if (form) {
            form.addEventListener('submit', async (e) => {
                e.preventDefault();
                const formData = new FormData(form);
                try {
                    const response = await fetch(form.action, {
                        method: 'POST',
                        body: formData
                    });
                    const contentType = response.headers.get("content-type");
                    if (contentType && contentType.includes("application/json")) {
                        const result = await response.json();
                        if (result.success) {
                            modalBody.innerHTML = '<p>데이터가 성공적으로 저장되었습니다.</p>';
                            setTimeout(() => {
                                bootstrap.Modal.getInstance(modal).hide();
                                window.location.reload();
                            }, 2000);
                        } else {
                            modalBody.innerHTML = result.html;
                            setupFormSubmission();
                            initializePlugins(); // 다시 초기화
                        }
                    } else {
                        const htmlContent = await response.text();
                        modalBody.innerHTML = htmlContent;
                        const scripts = modalBody.getElementsByTagName('script');
                        for (let script of scripts) {
                            eval(script.innerHTML);
                        }
                        setupFormSubmission();
                        initializePlugins();
                    }
                } catch (error) {
                    console.error('폼 제출 중 오류 발생:', error);
                    modalBody.innerHTML = '<p>데이터 저장 중 오류가 발생했습니다. 다시 시도해 주세요.</p>';
                }
            });
        }
    }

    // 플러그인 초기화 (TinyMCE, Select2, Datepicker)
    function initializePlugins() {
        // TinyMCE
        if (typeof tinymce !== 'undefined') {
            tinymce.remove(); // 모든 에디터 제거 후 재초기화
            tinymce.init({
                selector: 'textarea.tinymce',
                license_key: 'gpl',
                height: 250,
                plugins: 'advlist autolink lists link image charmap preview anchor',
                toolbar: 'undo redo blocks fontfamily fontsize forecolor backcolor | bold italic underline strikethrough | align numlist bullist | link image | table media | code fullscreen preview',
                menubar: 'file edit view insert format tools table help'
            });
        }

        // Select2
        if (typeof $ !== 'undefined' && $.fn.select2) {
            $(".calender").datepicker({
                changeYear: true,
                changeMonth: true,
                yearRange: "-10:+0",
                dateFormat: "yy-mm-dd"
            });
        }

        // Datepicker (jQuery UI)
        if (typeof $ !== 'undefined' && $.fn.datepicker) {
            $(".select-field").select2({
                theme: "classic",
                width: 'style',
                dropdownAutoWidth: true
            });
        }
    }

    // 모달 열릴 때 AJAX 콘텐츠 로드
    modal.addEventListener('show.bs.modal', (event) => {
        const button = event.relatedTarget;
        const url = button.getAttribute('data-src');
        if (url) {
            loadContent(url);
        } else {
            console.error('data-src 속성이 없습니다.');
            modalBody.innerHTML = '<p>URL을 찾을 수 없습니다. 다시 시도해 주세요.</p>';
        }
    });

    // 모달 닫힐 때 초기화
    modal.addEventListener('hidden.bs.modal', () => {
        modalBody.innerHTML = '';
    });
</script>