https://0404.go.kr/js/commons/common_modal.js?ver=1790913596795

1document.addEventListener('DOMContentLoaded',()=>{
2    console.log("common_modal.js start!");
3/*
4
5    /!**
6     * 모달 창을 드래그하여 이동할 수 있도록 설정하는 기능
7     *!/
8    /!*  모달 드래그 기능 start *!/
9    // 모달 및 모달 헤더 요소 가져오기
10    const modalList = document.querySelectorAll(".modalPopup");
11    //const modalHeaderList = document.querySelectorAll(".pop_header");
12
13    // 드래그 상태 및 좌표 오프셋 변수
14    let isDragging = false;
15    let offsetX, offsetY;
16
17    // 모달 요소가 없으면 실행 중지
18    if (isNull(modalList[0])) return;
19    //if (isNull(modalList[0]) || isNull(modalHeaderList[0])) return;
20
21    /!**
22     * 모달 드래그 시작 (mousedown 이벤트)
23     * 사용자가 모달 헤더를 클릭하면 드래그 시작
24     *!/
25    modalList.forEach(modal => modal.querySelector('.pop_header').addEventListener("mousedown", function (event) {
26        isDragging = true;
27
28        // 현재 마우스 위치에서 모달의 상대적 위치 계산
29        offsetX = event.clientX - modal.getBoundingClientRect().left;
30        offsetY = event.clientY - modal.getBoundingClientRect().top;
31
32        // 드래그 중 스크롤 방지 및 커서 스타일 변경
33        document.body.style.overflow = "hidden";
34        modal.querySelector('.pop_header').style.cursor = "grabbing";
35    }));
36
37    /!**
38     * 모달 이동 (mousemove 이벤트)
39     * 마우스를 움직이면 모달 위치를 변경
40     *!/
41    modalList.forEach(modal => modal.querySelector('.pop_header').addEventListener("mousemove", function (event) {
42        if (!isDragging) return;
43
44        // 새로운 X, Y 좌표 계산 (스크롤 고려)
45        let newX = event.clientX - offsetX;
46        let newY = event.clientY - offsetY + window.scrollY;
47
48        // 화면 경계를 벗어나지 않도록 제한
49        let maxX = window.innerWidth - modal.offsetWidth;
50        let maxY = window.innerHeight - modal.offsetHeight + window.scrollY;
51
52        newX = Math.max(0, Math.min(newX, maxX));
53        newY = Math.max(window.scrollY, Math.min(newY, maxY));
54
55        // 모달 위치 업데이트
56        modal.style.left = newX + "px";
57        modal.style.top = newY + "px";
58        modal.style.transform = "none"; // 변형 초기화
59    }));
60
61    /!**
62     * 모달 드래그 종료 (mouseup 이벤트)
63     * 마우스 버튼을 놓으면 드래그 중지
64     *!/
65    modalList.forEach(modal => modal.querySelector('.pop_header').addEventListener("mouseup", function () {
66        isDragging = false;
67        document.body.style.overflow = ""; // 스크롤 잠금 해제
68        modal.querySelector('.pop_header').style.cursor = "grab";
69    }));
70
71    /!*  모달 드래그 기능 end *!/
72*/
73});
74
75/**
76 * 모달 팝업을 동적으로 열고 화면 중앙에 배치하는 함수
77 * @param {string} title - 팝업 제목
78 * @param {string} contentHtml - 팝업 내부에 삽입할 HTML 콘텐츠
79 * @param {Object} [options={}] - 팝업 크기 설정 옵션
80 * @param {number} [options.width=1700] - 팝업 가로 크기 (기본값: 1700px)
81 * @param {number} [options.height=800] - 팝업 세로 크기 (기본값: 800px)
82 */
83/*async function openModalPopupUrl(url, title, data={}, {width = 1700, height = 800} = {}) {
84
85    const contentHtml = await fetchWrapper(url, data, { method : "GET",isShowLoading: true});
86
87    // 모달 팝업 요소 가져오기
88    const modalElement = document.querySelector('#modalPopupUrl');
89
90    // 팝업 제목 설정
91    modalElement.querySelector('.popUpTitle').innerText = title;
92
93    // 팝업 내용 설정 (최대 높이 제한 후 콘텐츠 추가)
94    modalElement.querySelector('.popUpContent').style.maxHeight = (height - 100) + "px";
95    modalElement.querySelector('.popUpContent').innerHTML = null;
96    modalElement.querySelector('.popUpContent').insertAdjacentHTML('beforeend', contentHtml);
97

98    // 모달 팝업의 크기와 위치를 설정하고 화면에 표시한다.
99    setShowModalPopupSizeAndPosition(modalElement, width, height);
100}*/
101
102/**
103 * 모달 팝업을 동적으로 열고 화면 중앙에 배치하는 함수
104 * @param {string} title - 팝업 제목
105 * @param {string} contentHtml - 팝업 내부에 삽입할 HTML 콘텐츠
106 * @param {Object} [options={}] - 팝업 크기 설정 옵션
107 * @param {number} [options.width=1700] - 팝업 가로 크기 (기본값: 1700px)
108 * @param {number} [options.height=800] - 팝업 세로 크기 (기본값: 800px)
109 */
110/*
111function openModalPopup(title, contentHtml, { width = 1700, height = 800 } = {}) {
112    // 모달 팝업 요소 가져오기
113    const modalElement = document.querySelector('#modalPopupDefault');
114
115    // 팝업 제목 설정
116    modalElement.querySelector('.popUpTitle').innerText = title;
117
118    // 팝업 내용 설정 (최대 높이 제한 후 콘텐츠 추가)
119    modalElement.querySelector('.popUpContent').style.maxHeight = (height - 100) + "px";
120    modalElement.querySelector('.popUpContent').innerHTML = contentHtml;
121    //modalElement.querySelector('.popUpContent').insertAdjacentHTML('beforeend', contentHtml);
122

123    // 모달 팝업의 크기와 위치를 설정하고 화면에 표시한다.
124    setShowModalPopupSizeAndPosition(modalElement, width, height);
125}
126*/
127
128/**
129 * 게시판 미리보기 모달 팝업
130 * @param {string} contentHtml - 미리보기로 출력할 html
131 * @param {Object} [options={}] - 팝업 크기 설정 옵션
132 * @param {number} [options.width=1700] - 팝업 가로 크기 (기본값: 1700px)
133 * @param {number} [options.height=800] - 팝업 세로 크기 (기본값: 800px)
134 */
135/*function openBbsPreview(contentHtml, {width = 1280, height = 800} = {}){
136
137    const modalPopup = document.querySelector('#previewModalPopup');
138    const iframe = modalPopup.querySelector('#previewIframe');
139    const iframeHtml = iframeHtmlStart + contentHtml + iframeHtmlEnd;
140
141    const doc = iframe.contentWindow.document;
142    doc.open();
143    doc.write(iframeHtml);
144    doc.close();
145    iframe.style.height = (height - 100) + "px";
146    iframe.style.width =  (width - 80) + "px";
147    setShowModalPopupSizeAndPosition(modalPopup, width, height);
148}*/
149
150/**
151 * 국가리스트를 출력하고 선택하는 모달 팝업
152 * @param cntntCd 대륙코드
153 * @param rgnGroupCd 지역코드
154 * @param {string} [options.type="radio"] - 선택 타입, radio or checkbox
155 * @param {number} [options.width=1700] - 팝업 가로 크기 (기본값: 1700px)
156 * @param {number} [options.height=800] - 팝업 세로 크기 (기본값: 800px)
157 */
158function openSelectNtnListModalPopup(cntntCd = null, {type = "radio", width = 900, height = 800} = {}) {
159
160    return new Promise(async (resolve, reject) => {
161        // 모달 팝업 요소 가져오기
162        const modalElement = document.querySelector('#selectNtnListModalPopup');
163
164        showLoading(true);
165        // 검색후 컨텐츠 추가
166        /*let [ntnList, rgnCdList, cntntCdList] = await Promise.all(
167                [getNtnList({cntntCd: cntntCd, rgnGroupCd:rgnGroupCd})
168                    , getComnCdList("RGN")
169                    , getComnCdList("CNTNT")]);*/
170
171        let [ntnList, cntntCdList] = await Promise.all(
172                [getNtnList({cntntCd: cntntCd})
173                    , getComnCdList("CNTNT")]);
174
175        showLoading(false);
176
177        const searchHtml =`
178            <div class="input-btn-01">
179                <select name="cntntCd" class="selectbox" title="대륙">
180                    <option value="">전체</option>
181                    ${cntntCdList.map(item =>
182                        item.comnCd == cntntCd
183                        ? `<option value="${item.comnCd}" selected >${item.comnCdNm}</option>`
184                        : `<option value="${item.comnCd}">${item.comnCdNm}</option>`
185                    ).join('')}
186                </select>
187                <input type="text" class="input-01" placeholder="국가/지역을 검색해 주세요." id="ntnListNtnSearchTxt" name="keyword">
188                <label for="popupCS01" class="blind">국가/지역을 검색</label>
189                <input type="submit" value="검색" class="btn btn-blue-02" id="ntnListNtnSearch">
190            </div>
191        `;
192        // 팝업 내용 설정 (최대 높이 제한 후 콘텐츠 추가)
193        modalElement.querySelector('.ntnListModalSearchForm').innerHTML = null;
194        modalElement.querySelector('.ntnListModalSearchForm').insertAdjacentHTML('beforeend', searchHtml);
195        //modalElement.querySelector('.tbody_scroll').style.height = (height - 350) + "px";
196
197        insertNtnList(ntnList);
198

199        // 모달 팝업의 크기와 위치를 설정하고 화면에 표시한다.
200        //setShowModalPopupSizeAndPosition(modalElement, width, height);
201
202        modalElement.style.display = 'block';
203        if(!isNull(document.querySelector('.dim'))){
204            document.querySelector('.dim').style.display = 'block';
205        }
206
207        // 취소버튼
208/*        function cancelSelectNtn(){
209            resolve(null);
210            closeModalPopup(modalElement);
211            modalElement.querySelectorAll('.cancelSelectNtn').forEach(e => e.removeEventListener('click', cancelSelectNtn));
212        }*/
213        // 국가 검색
214        async function searchNtn() {
215            const searchData = getFormValuesContainer(modalElement.querySelector('#ntnListModalSearchForm'));
216            ntnList = await getNtnList(searchData,{isShowLoading: true}); // ntnList에 재할당
217            insertNtnList(ntnList);
218        }
219
220        // 국가리스트를 팝업에 삽입
221        async function insertNtnList(ntnList) {
222            const selectNtnListTbody = modalElement.querySelector('#selectNtnListTbody');
223            selectNtnListTbody.innerHTML = null;
224
225            if(ntnList.length === 0 || isEmptyObject(ntnList)) {
226                modalElement.querySelector('#ntnSearchListTable').style.display = 'none';
227                modalElement.querySelector('#ntnSearchNoList').style.display = 'block';
228                return;
229            }
230
231            modalElement.querySelector('#ntnSearchListTable').style.display = 'block';
232            modalElement.querySelector('#ntnSearchNoList').style.display = 'none';
233
234            selectNtnListTbody.innerHTML = ntnList.reduce((acc, ntn, indx, array) => {
235                const html = `
236                    <tr>
237                        <input type="hidden" name="ntnCd" value="${ntn.ntnCd}">
238                        <td class="pc-only">${ntn.cntntCdNm}</td>
239                        <td>
240                            <button class="btn ntnListSelectNtn" data-ntn-cd="${ntn.ntnCd}">
241                                <p class="mo-only">${ntn.cntntCdNm}</p><!-- mo 화면용 대륙명 -->
242                                <p class="btn-text-01">${ntn.ntnNm}</p>
243                            </button>
244                        </td>
245                        <td><button class="btn btn-white-02 ntnListSelectNtn" data-ntn-cd="${ntn.ntnCd}" >선택</button></td>
246                    </tr>
247                    `;
248                return acc + "" + html;
249            }, "");
250
251            modalElement.querySelectorAll('.ntnListSelectNtn').forEach(e => e.addEventListener('click', (ev)=>{
252                const ntnCd = ev.currentTarget.dataset.ntnCd
253                const ntnInfo = ntnList.find(ntn => ntn.ntnCd == ntnCd);
254                resolve(ntnInfo);
255                closeModalPopup(modalElement);
256            }));
257
258        }
259
260        //modalElement.querySelectorAll('.btn-popup-close-ntn-list-modal').forEach(e => e.addEventListener('click', cancelSelectNtn));
261        modalElement.querySelector('#ntnListNtnSearch').addEventListener('click', searchNtn);
262        modalElement.querySelector('#ntnListNtnSearchTxt').addEventListener('keyup', (key)=>{
263            if(key.keyCode && key.keyCode === 13){
264                 searchNtn();
265            }
266        });
267
268        $('body').addClass('noscroll');
269    });
270}
271
272
273function closeModalPopup(modalElement){
274    if(!isNull(document.querySelector('.dim'))){
275        document.querySelector('.dim').style.display = 'none';
276    }
277
278    modalElement.style.display='none';
279    document.querySelector('#ntnSearchListTable').scrollTo({ top: 0});
280    if ( $('body').hasClass('noscroll') ){
281        $('body').removeClass('noscroll').find('.wrap').removeAttr('style');
282    }
283}
284
285
286/**

287 * 모달 팝업의 크기와 위치를 설정하고 화면에 표시하는 함수
288 * @param {HTMLElement} modalElement - 크기와 위치를 설정할 모달 요소
289 * @param {number} width - 모달 팝업의 너비 (px 단위)
290 * @param {number} height - 모달 팝업의 높이 (px 단위)
291 */
292/*
293function setShowModalPopupSizeAndPosition(modalElement, width = 1700, height = 800) {
294    // 팝업을 화면 중앙에 배치하기 위한 좌표 계산
295    const { left, top } = calcPopupCenterPosition(width, height);
296
297    // 모달 팝업의 크기 설정
298    modalElement.style.width = width + "px";
299    modalElement.style.height = height + "px";
300
301    // 모달 팝업의 위치 설정 (화면 중앙 정렬)
302    modalElement.style.left = left + "px";
303    modalElement.style.top = top + "px";
304
305    // 모달 팝업을 화면에 표시
306    modalElement.style.display = "block";
307
308    // 배경을 어둡게(dim 처리)하여 팝업이 강조되도록 설정
309    document.querySelector('.dim').style.display = 'block';
310}
311*/
312
313
314/**
315 * 팝업창 크기를 기준으로 중앙 위치를 계산하는 함수
316 *
317 * @param {number} popupWidth - 팝업창 가로 크기
318 * @param {number} popupHeight - 팝업창 세로 크기
319 * @returns {Object} - 팝업의 `left` 및 `top` 좌표
320 */
321/*
322function calcPopupCenterPosition(popupWidth, popupHeight) {
323    // 현재 화면의 가로 및 세로 크기 가져오기
324    const windowWidth = window.innerWidth;
325    const windowHeight = window.innerHeight;
326
327    // 현재 문서의 스크롤 위치 가져오기 (스크롤이 있는 경우 반영)
328    const scrollTop = window.scrollY || document.documentElement.scrollTop;
329
330    // 팝업을 화면 정중앙에 배치할 좌표 계산
331    const left = (windowWidth - popupWidth) / 2;
332    const top = (windowHeight - popupHeight) / 2 + scrollTop;
333
334    return { left, top };
335}
336*/