최초 세팅

src/main/resources/static/js/web/index.js

@@ -0,0 +1,726 @@
+/************************************************
+ * 초기화
+ ************************************************/
+function fn_init() {
+    //팝업
+    fn_selectListWebPopupJson();
+    //인스타그램 리스트
+    fn_selectListWebInstagramJson();
+
+//상단, 하단 배너
+    fn_selectListWebMainBannerTypeAJson();
+    fn_selectListWebMainBannerTypeBJson();
+}
+
+/************************************************
+ * 팝업 마스킹 관련 함수들 (새로 추가)
+ ************************************************/
+
+// 배경 마스킹 표시
+function showBackgroundMask() {
+    const mask = document.querySelector('.popup-background-mask');
+    if (mask) {
+        mask.classList.add('active');
+    }
+    
+    // body에 popup-open 클래스 추가 (스크롤 비활성화 및 블러 효과)
+    document.body.classList.add('popup-open');
+    
+    console.log('Background mask activated');
+}
+
+// 배경 마스킹 제거
+function hideBackgroundMask() {
+    const mask = document.querySelector('.popup-background-mask');
+    if (mask) {
+        mask.classList.remove('active');
+    }
+    
+    // body에서 popup-open 클래스 제거
+    document.body.classList.remove('popup-open');
+    
+    console.log('Background mask deactivated');
+}
+
+/************************************************
+ * content1 스와이퍼
+ ************************************************/
+const cont1Urls = [
+     'https://petit.madeu.co.kr/webservice/selectServiceIntro.do?categoryNo=4' // 첫 번째 슬라이드 URL
+    ,'https://petit.madeu.co.kr/webservice/selectServiceIntro.do?categoryNo=1'  // 두 번째 슬라이드 URL
+    ,'https://petit.madeu.co.kr/webservice/selectServiceIntro.do?categoryNo=5'  // 세 번째 슬라이드 URL
+    ,'https://petit.madeu.co.kr/index'  // 네 번째 슬라이드 URL
+    ,'https://petit.madeu.co.kr/webservice/selectServiceIntro.do?categoryNo=1'  // 다섯 번째 슬라이드 URL
+    // 필요시 추가
+];
+
+const bullet1 = ['레이저리프팅','보톡스','스킨부스터','제모', '필러']
+
+const useCont1Loop = bullet1.length > 5; // slidesPerView(1.3)보다 많을 때만 loop
+const cont1Swiper = new Swiper('.cont1_swiper', {
+    loop: useCont1Loop,
+    slidesPerView: 'auto',
+    spaceBetween: 10,
+    autoplay : {
+        disableOnInteraction: false,
+    },
+    pagination: {
+        el: '.cont1_swiper_pagination',
+        clickable: true,
+        renderBullet: function (index, className) {
+            return '<div class="' + className + '"><span>' + (bullet1[index]) + '</span></div>';
+        }
+    },
+    on: {
+        init: function () {
+            document.querySelectorAll('.cont1_swiper .swiper-slide').forEach(function(slide, idx) {
+                slide.style.cursor = 'pointer';
+                slide.setAttribute('data-url', cont1Urls[idx] || cont1Urls[0]);
+                slide.addEventListener('click', function() {
+                    const url = slide.getAttribute('data-url');
+                    if(url) window.open(url, '_blank');
+                });
+            });
+        },
+        slideChange: function () {
+            document.querySelectorAll('.cont1_swiper .swiper-slide').forEach(function(slide, idx) {
+                slide.style.cursor = 'pointer';
+                slide.setAttribute('data-url', cont1Urls[idx] || cont1Urls[0]);
+                slide.onclick = function() {
+                    const url = slide.getAttribute('data-url');
+                    if(url) window.open(url, '_blank');
+                };
+            });
+        }
+    }
+});
+
+/************************************************
+ * content2 스와이퍼
+ ************************************************/
+const cont2Urls = [
+     'https://petit.madeu.co.kr/webservice/selectServiceIntro.do?categoryNo=4' // 첫 번째 슬라이드 URL
+    ,'https://petit.madeu.co.kr/webservice/selectServiceIntro.do?categoryNo=4'  // 두 번째 슬라이드 URL
+    ,'https://petit.madeu.co.kr/webservice/selectServiceIntro.do?categoryNo=4'  // 세 번째 슬라이드 URL
+    ,'https://petit.madeu.co.kr/webservice/selectServiceIntro.do?categoryNo=4'  // 네 번째 슬라이드 URL
+    ,'https://petit.madeu.co.kr/webservice/selectServiceIntro.do?categoryNo=4'  // 다섯 번째 슬라이드 URL
+];
+
+const bullet2 = ['써마지','울세라','줄기세포', '튠페이스', '티타늄리프팅']
+
+const useCont2Loop = bullet2.length > 5; // slidesPerView(1.3)보다 많을 때만 loop
+const cont2Swiper = new Swiper('.cont2_swiper', {
+    loop: useCont2Loop,
+    slidesPerView: 'auto',
+    spaceBetween: 10,
+    autoplay : {
+        disableOnInteraction: false,
+    },
+    pagination: {
+        el: '.cont2_swiper_pagination',
+        clickable: true,
+        renderBullet: function (index, className) {
+            return '<div class="' + className + '"><span>' + (bullet2[index]) + '</span></div>';
+        }
+    },
+    on: {
+        init: function () {
+            document.querySelectorAll('.cont2_swiper .swiper-slide').forEach(function(slide, idx) {
+                slide.style.cursor = 'pointer';
+                slide.setAttribute('data-url', cont2Urls[idx] || cont2Urls[0]);
+                slide.addEventListener('click', function() {
+                    const url = slide.getAttribute('data-url');
+                    if(url) window.open(url, '_blank');
+                });
+            });
+        },
+        slideChange: function () {
+            document.querySelectorAll('.cont2_swiper .swiper-slide').forEach(function(slide, idx) {
+                slide.style.cursor = 'pointer';
+                slide.setAttribute('data-url', cont2Urls[idx] || cont2Urls[0]);
+                slide.onclick = function() {
+                    const url = slide.getAttribute('data-url');
+                    if(url) window.open(url, '_blank');
+                };
+            });
+        }
+    }
+});
+
+/****************************************************************************
+* 팝업 리스트 조회 (마스킹 기능 추가)
+****************************************************************************/
+function fn_selectListWebPopupJson(){
+    let formData = new FormData();
+
+    $.ajax({
+        url: encodeURI('/webpopup/selectListWebPopup.do'),
+        data: formData,
+        dataType: 'json',
+        processData: false,
+        contentType: false,
+        type: 'POST',
+        async: true,
+        success: function(data){
+            if(data.msgCode=='0'){
+                //쿠기값 확인
+                let cookiedata = document.cookie;
+                if (cookiedata.indexOf("popup=done") < 0) {
+                    $('.popup').addClass('open');
+                    
+                    // *** 배경 마스킹 활성화 추가 ***
+                    showBackgroundMask();
+
+                    let totalCount = data.rows.length;
+                    if (0 < totalCount) {
+                        let popupContentList = $('#popupContentList');
+                        let popupTabList = $('#popupTabList');
+                        
+                        popupContentList.empty(); 
+                        popupTabList.empty();
+
+                        for (let i = 0; i < Math.min(data.rows.length, 5); i++) {
+                            let isActive = i === 0 ? ' active' : '';
+                            const isMobile = window.innerWidth <= 768;
+                            const imgPath = isMobile ? (data.rows[i].m_filePath || data.rows[i].filePath) : data.rows[i].filePath;
+                            
+                            // 탭 콘텐츠 생성
+                            let contentHTML = '';
+                            contentHTML += '<div role="tabpanel" class="tab-pane' + isActive + '" id="content' + (i+1) + '">';
+                            contentHTML += '<a href="' + data.rows[i].url + '" target="_blank" rel="noopener">';
+                            contentHTML += '<img src="' + CDN_URL + imgPath + '" alt="event_con' + (i+1) + '" />';
+                            contentHTML += '</a>';
+                            contentHTML += '</div>';
+                            popupContentList.append(contentHTML);
+
+                            // 탭 리스트 생성 (data-toggle 제거하고 클릭 이벤트 직접 처리)
+                            let tabHTML = '';
+                            tabHTML += '<li role="presentation"' + (isActive ? ' class="active"' : '') + '>';
+                            tabHTML += '<a href="#content' + (i+1) + '" role="tab" id="contentTitle' + (i+1) + '" data-target="content' + (i+1) + '">';
+                            tabHTML += fn_addBrAfterFirstWord(data.rows[i].title);
+                            tabHTML += '</a>';
+                            tabHTML += '</li>';
+                            popupTabList.append(tabHTML);
+                        }
+
+                        // 탭 클릭 이벤트 수동 구현
+                        setupTabEvents();
+                        setupPopupCloseEvents();
+                    }
+                }else{
+                    $('.popup').removeClass('open');
+                    hideBackgroundMask();  // 추가
+                }
+            }else if('-2' == data.msgCode){
+                modalEvent.danger("로그인 오류", data.msgDesc, function(){
+                    fn_leftFormAction('/weblogin/logout.do');
+                });
+            }else{
+                modalEvent.danger("조회 오류", data.msgDesc);
+            }
+
+        },
+        error : function(xhr, status, error) {
+            modalEvent.danger("조회 오류", "조회 중 오류가 발생하였습니다. 잠시후 다시시도하십시오.");
+        },
+        beforeSend:function(){
+            // 로딩열기
+            $(".loading-image-layer").show();
+        },
+        complete:function(){
+            // 로딩닫기
+            $(".loading-image-layer").hide();
+        }
+    });
+}
+
+// 탭 이벤트 설정 함수 추가
+function setupTabEvents() {
+    $('#popupTabList a[role="tab"]').off('click').on('click', function(e) {
+        e.preventDefault();
+        
+        const targetId = $(this).data('target');
+        
+        // 모든 탭과 콘텐츠에서 active 클래스 제거
+        $('#popupTabList li').removeClass('active');
+        $('#popupContentList .tab-pane').removeClass('active');
+        
+        // 클릭된 탭과 해당 콘텐츠에 active 클래스 추가
+        $(this).parent('li').addClass('active');
+        $('#' + targetId).addClass('active');
+    });
+}
+
+// 팝업 닫기 이벤트들을 설정하는 함수
+function setupPopupCloseEvents() {
+    // 기존 이벤트 리스너 제거 후 새로 추가
+    const closeBtn = document.getElementById('btnPopupClose');
+    if (closeBtn) {
+        // 기존 이벤트 리스너 복제본 생성하여 교체
+        const newCloseBtn = closeBtn.cloneNode(true);
+        closeBtn.parentNode.replaceChild(newCloseBtn, closeBtn);
+        
+        // 새로운 이벤트 리스너 추가
+        newCloseBtn.addEventListener('click', function () {
+            //체크박스 확인
+            const todayCheckbox = document.getElementById('today');
+
+            if (todayCheckbox.checked) {
+                setCookie('done', 1);
+            } else {
+                $('.popup').removeClass('open');
+				hideBackgroundMask();
+            }
+        });
+    }
+}
+
+function fn_addBrAfterFirstWord(input) {
+    // 문자열을 공백 기준으로 나눔
+    const words = input.trim().split(" ");
+
+    // 단어가 2개 이상일 때 첫 번째 단어 뒤에 <br class="mb"/> 추가
+    if (words.length > 1) {
+        return `${words[0]}<br class="mb"/> ${words.slice(1).join(" ")}`;
+    }
+    return input;
+}
+
+//쿠키데이터 설정 function (마스킹 기능 추가)
+function setCookie(value, expiredays) {
+    let todayDate = new Date();
+    todayDate.setDate(todayDate.getDate() + expiredays);
+    document.cookie = "popup=" + escape( value ) + "; path=/; expires=" + todayDate.toGMTString() + ";";
+    $('.popup').removeClass('open');
+    
+    // *** 배경 마스킹 제거 추가 ***
+    hideBackgroundMask();
+}
+
+/****************************************************************************
+ * 메인 배너 리스트 조회
+ ****************************************************************************/
+function fn_selectListWebMainBannerTypeAJson(){
+    let formData = new FormData();
+    formData.append('bannerType', 'PT');
+
+    $.ajax({
+        url: encodeURI('/webmainbanner/selectListWebMainBanner.do'),
+        data: formData,
+        dataType: 'json',
+        processData: false,
+        contentType: false,
+        type: 'POST',
+        async: true,
+        success: function(data){
+            if(data.msgCode=='0'){
+                let totalCount = data.rows.length;
+                if (0 < totalCount) {
+                    let listHTML = '';
+                    let backgroundColorArr = ['#FC7687', '#ffafba', '#a94e4e', '#e1a28d'];
+
+                    for (let i = 0; i < data.rows.length; i++) {
+                        const backgroundColor = backgroundColorArr[i % backgroundColorArr.length];
+                        const currentSlideIndex = i + 1; // 슬라이드 번호 (1부터 시작)
+                        const currentAriaLabel = `${currentSlideIndex} / ${data.rows.length}`; // 동적으로 aria-label 설정
+                        // 이미지와 링크를 a 태그로 감싸기 (url 파라미터 사용)
+                        listHTML += '<div class="swiper-slide" style="background:' + backgroundColor + ';" aria-label="' + currentAriaLabel + '">';
+                        listHTML += '   <a href="' + data.rows[i].url + '" target="_blank" rel="noopener">';
+                        listHTML += '       <img class="pc" src="' + CDN_URL + data.rows[i].webFilePath + '" alt="banner' + (i+1) + '" />';
+                        listHTML += '       <img class="mb" src="' + CDN_URL + data.rows[i].mobileFilePath + '" alt="banner' + (i+1) + '" />';
+                        listHTML += '   </a>';
+                        listHTML += '</div>';
+                    }
+                    $("#mainBannerList").html(listHTML).trigger("create");
+
+                    /************************************************
+                     * main_banner 스와이퍼
+                     ************************************************/
+                    const useMainBannerLoop = totalCount > 1; // slidesPerView(1)보다 많을 때만 loop
+                    const mainBannerSwiper = new Swiper('.main_banner_swiper', {
+                        loop: useMainBannerLoop,
+                        slidesPerView: 1,
+                        autoplay : {
+                            disableOnInteraction: false,
+                        },
+                        pagination: {
+                            el: '.main_banner_pagination',
+                            clickable: true,
+                            renderBullet: function (index, className) {
+                                return `<span class="${className}" style="flex: 1;"></span>`;
+                            },
+                        },
+                        on: {
+                            init: function () {
+                                adjustBulletWidth();
+                                updateActiveBullets(this.activeIndex);
+                            },
+                            slideChange: function () {
+                                updateActiveBullets(this.realIndex);
+                            },
+                        },
+                    });
+
+                ///////// swiper-pagination-bullet 넓이 동적 조정 /////////
+                    function adjustBulletWidth() {
+                        const bullets = document.querySelectorAll('.main_banner_pagination .swiper-pagination-bullet');
+                        const paginationWidth = 490;
+                        const bulletWidth = paginationWidth / bullets.length;
+
+                        bullets.forEach(bullet => {
+                            bullet.style.width = `${bulletWidth}px`;
+                        });
+                    }
+
+                    ///////// 활성화된 swiper-pagination-bullet 업데이트 /////////
+					function updateActiveBullets(activeIndex) {
+					  const bullets = document.querySelectorAll('.mainbannerpagination .swiper-pagination-bullet');
+					  bullets.forEach(bullet => bullet.classList.remove('swiper-pagination-bullet-active'));  // 먼저 모두 제거
+					  if (bullets[activeIndex]) {
+					    bullets[activeIndex].classList.add('swiper-pagination-bullet-active');  // 하나만 추가
+					  }
+					}
+
+                }else{$("#mainBannerList").empty();}
+            }else if('-2' == data.msgCode){
+                modalEvent.danger("로그인 오류", data.msgDesc, function(){
+                    fn_leftFormAction('/weblogin/logout.do');
+                });
+            }else{
+                modalEvent.danger("조회 오류", data.msgDesc);
+            }
+
+        },
+        error : function(xhr, status, error) {
+            modalEvent.danger("조회 오류", "조회 중 오류가 발생하였습니다. 잠시후 다시시도하십시오.");
+        },
+        beforeSend:function(){
+            // 로딩열기
+            $(".loading-image-layer").show();
+        },
+        complete:function(){
+            // 로딩닫기
+            $(".loading-image-layer").hide();
+        }
+    });
+}
+
+/****************************************************************************
+ * 서브 배너 이벤트 리스트 조회
+ ****************************************************************************/
+function fn_selectListWebMainBannerTypeBJson(){
+    let formData = new FormData();
+    formData.append('bannerType', 'PB');
+
+    $.ajax({
+        url: encodeURI('/webmainbanner/selectListWebMainBanner.do'),
+        data: formData,
+        dataType: 'json',
+        processData: false,
+        contentType: false,
+        type: 'POST',
+        async: true,
+        success: function(data){
+            if(data.msgCode=='0'){
+                let totalCount = data.rows.length;
+
+                if (0 < totalCount) {
+                    let listHTML = '';
+                    let backgroundColorArr = ['#666', '#999', '#ddd'];
+
+                    for (let i = 0; i < data.rows.length; i++) {
+                        const backgroundColor = backgroundColorArr[i % backgroundColorArr.length];
+                        const currentSlideIndex = i + 1; // 슬라이드 번호 (1부터 시작)
+                        const currentAriaLabel = `${currentSlideIndex} / ${data.rows.length}`; // 동적으로 aria-label 설정
+                        // 이미지와 링크를 a 태그로 감싸기 (url 파라미터 사용)
+                        listHTML += '<div class="swiper-slide" style="background:' + backgroundColor + ';" aria-label="' + currentAriaLabel + '">';
+                        listHTML += '   <a href="' + data.rows[i].url + '" target="_blank" rel="noopener">';
+                        listHTML += '       <img class="pc" src="' + CDN_URL + data.rows[i].webFilePath + '" alt="banner' + (i+1) + '" />';
+                        listHTML += '       <img class="mb" src="' + CDN_URL + data.rows[i].mobileFilePath + '" alt="banner' + (i+1) + '" />';
+                        listHTML += '       <button class="detail_btn">Detail view ></button>';
+                        listHTML += '   </a>';
+                        listHTML += '</div>';
+                    }
+                    $("#subBannerList").html(listHTML).trigger("create");
+
+                    /************************************************
+                     * sub_banner 스와이퍼
+                     ************************************************/
+                    const useSubBannerLoop = totalCount > 1; // slidesPerView(1)보다 많을 때만 loop
+                    const subBannerSwiper = new Swiper('.sub_banner_swiper', {
+                        loop: useSubBannerLoop,
+                        slidesPerView: 1,
+                        autoplay : {
+                            disableOnInteraction: false,
+                        },
+                        pagination: {
+                            el: '.sub_banner_pagination',
+                            clickable: true,
+                            renderBullet: function (index, className) {
+                                return `<span class="${className}" style="flex: 1;"></span>`;
+                            },
+                        },
+                        on: {
+                            init: function () {
+                                adjustSubBulletWidth();
+                                updateSubActiveBullets(this.activeIndex);
+                            },
+                            slideChange: function () {
+                                updateSubActiveBullets(this.realIndex);
+                            },
+                        },
+                    });
+
+                ///////// swiper-pagination-bullet 넓이 동적 조정 /////////
+                    function adjustSubBulletWidth() {
+                        const bullets = document.querySelectorAll('.sub_banner_pagination .swiper-pagination-bullet');
+                        const paginationWidth = 490;
+                        const bulletWidth = paginationWidth / bullets.length;
+
+                        bullets.forEach((bullet) => {
+                            bullet.style.width = `${bulletWidth}px`;
+                        });
+                    }
+
+                    ///////// 활성화된 swiper-pagination-bullet 업데이트 /////////
+                    function updateSubActiveBullets(activeIndex) {
+                        const bullets = document.querySelectorAll('.sub_banner_pagination .swiper-pagination-bullet');
+
+                        bullets.forEach((bullet, index) => {
+                            if (index <= activeIndex) {
+                                bullet.classList.add('swiper-pagination-bullet-active');
+                            } else {
+                                bullet.classList.remove('swiper-pagination-bullet-active');
+                            }
+                        });
+                    }
+
+                }else{$("#subBannerList").empty();}
+            }else if('-2' == data.msgCode){
+                modalEvent.danger("로그인 오류", data.msgDesc, function(){
+                    fn_leftFormAction('/weblogin/logout.do');
+                });
+            }else{
+                modalEvent.danger("조회 오류", data.msgDesc);
+            }
+
+        },
+        error : function(xhr, status, error) {
+            modalEvent.danger("조회 오류", "조회 중 오류가 발생하였습니다. 잠시후 다시시도하십시오.");
+        },
+        beforeSend:function(){
+            // 로딩열기
+            $(".loading-image-layer").show();
+        },
+        complete:function(){
+            // 로딩닫기
+            $(".loading-image-layer").hide();
+        }
+    });
+}
+
+/****************************************************************************
+ * 인스타그램 피드 리스트 조회 (백엔드 API 사용)
+ ****************************************************************************/
+function fn_selectListWebInstagramJson(){
+    let formData = new FormData();
+    $.ajax({
+        url: encodeURI('/webinstagram/selectListWebInstagram.do'),
+        data: formData,
+        dataType: 'json',
+        processData: false,
+        contentType: false,
+        type: 'POST',
+        async: true,
+        success: function(data){
+            if(data.msgCode=='0'){
+                let totalCount = data.rows.length;
+                if (0 < totalCount) {
+                    let listHTML = '';
+                    for (let i = 0; i < data.rows.length; i++) {
+                        const currentSlideIndex = i + 1;
+                        const currentAriaLabel = `${currentSlideIndex} / ${data.rows.length}`;
+                        let mediaUrl = data.rows[i].media_url;
+                        let permalink = data.rows[i].permalink;
+                        let mediaType = data.rows[i].media_type || '';
+                        let thumbnailUrl = data.rows[i].thumbnail_url || mediaUrl;
+                        listHTML += '<div class="swiper-slide" aria-label="'+currentAriaLabel+'">';
+                        listHTML += '   <a href="'+permalink+'" target="_blank" rel="noopener">';
+                        if (mediaType === 'VIDEO' || mediaType === 'REEL') {
+                            listHTML += '       <img src="'+thumbnailUrl+'" alt="instagram'+(i+1)+'" />';
+                        } else {
+                            listHTML += '       <img src="'+mediaUrl+'" alt="instagram'+(i+1)+'" />';
+                        }
+                        listHTML += '   </a>';
+                        listHTML += '</div>';
+                    }
+                    $("#instagramList").html(listHTML).trigger("create");
+                    // 커스텀 내비게이션과 연동
+                    initInstagramCustomNav(data);
+                }
+            }else if('-2' == data.msgCode){
+                modalEvent.danger("로그인 오류", data.msgDesc, function(){
+                    fn_leftFormAction('/weblogin/logout.do');
+                });
+            }else{
+                modalEvent.danger("조회 오류", data.msgDesc);
+            }
+        },
+        error : function(xhr, status, error) {
+            modalEvent.danger("조회 오류", "조회 중 오류가 발생하였습니다. 잠시후 다시시도하십시오.");
+        },
+        beforeSend:function(){
+            // 로딩열기
+            $(".loading-image-layer").show();
+        },
+        complete:function(){
+            // 로딩닫기
+            $(".loading-image-layer").hide();
+        }
+    });
+}
+
+/**********************************
+ * instagram 스와이퍼 + 커스텀 내비게이션 (썸네일 3개 고정) - 수정버전
+ **********************************/
+function initInstagramCustomNav(data) {
+    const totalCount = data.rows.length;
+    if (totalCount === 0) return;
+    
+    // 썸네일은 최대 5개로 고정
+    const maxThumbs = 3;
+    const showThumbs = Math.min(totalCount, maxThumbs);
+    let currentActiveIndex = 0; // 현재 활성 인덱스 추적
+    
+    // 썸네일 버튼 생성 (활성 상태 포함)
+    function createThumbnails(startIndex = 0) {
+        let thumbsHTML = '';
+        for (let i = 0; i < showThumbs; i++) {
+            const dataIndex = (startIndex + i) % totalCount;
+            const mediaUrl = data.rows[dataIndex].media_url;
+            const thumbnailUrl = data.rows[dataIndex].thumbnail_url || mediaUrl;
+            const isActive = dataIndex === currentActiveIndex ? 'active' : '';
+            thumbsHTML += `<div class="custom-swiper-thumb ${isActive}" data-index="${dataIndex}">
+                <img src="${thumbnailUrl}" alt="thumb${dataIndex+1}" />
+            </div>`;
+        }
+        document.querySelector('.custom-swiper-thumbs').innerHTML = thumbsHTML;
+    }
+    
+    // 초기 썸네일 생성
+    createThumbnails(0);
+
+    // Swiper 인스턴스
+    setTimeout(function() {
+        const instagramSwiper = new Swiper('.instagram_swiper', {
+            loop: true,
+            autoplay: {
+                disableOnInteraction: false,
+            },
+            breakpoints: {
+                768: {
+                    slidesPerView: 3.2,
+                    spaceBetween: 20,
+                },
+                0: {
+                    slidesPerView: 2.1,
+                    spaceBetween: 5,
+                },
+            },
+            on: {
+                slideChange: function() {
+                    const newIndex = this.realIndex % totalCount;
+                    currentActiveIndex = newIndex; // 활성 인덱스 업데이트
+                    
+                    // 콘텐츠가 5개보다 많은 경우 썸네일 순환 업데이트
+                    if (totalCount > maxThumbs) {
+                        // 현재 활성 썸네일이 보이는지 확인
+                        const visibleThumbs = Array.from(document.querySelectorAll('.custom-swiper-thumb'));
+                        const isActiveVisible = visibleThumbs.some(thumb => 
+                            parseInt(thumb.dataset.index) === currentActiveIndex
+                        );
+                        
+                        // 활성 썸네일이 보이지 않으면 썸네일 업데이트
+                        if (!isActiveVisible) {
+                            updateThumbnailsForIndex(currentActiveIndex);
+                        } else {
+                            // 보이면 활성 상태만 업데이트
+                            updateCustomThumbActive(currentActiveIndex);
+                        }
+                    } else {
+                        updateCustomThumbActive(currentActiveIndex);
+                    }
+                }
+            }
+        });
+
+        // 좌우 버튼 이벤트
+        document.querySelector('.custom-swiper-btn.prev').onclick = function() {
+            instagramSwiper.slidePrev();
+        };
+        document.querySelector('.custom-swiper-btn.next').onclick = function() {
+            instagramSwiper.slideNext();
+        };
+        
+        // 썸네일 클릭 이벤트
+        document.querySelector('.custom-swiper-thumbs').onclick = function(e) {
+            const thumb = e.target.closest('.custom-swiper-thumb');
+            if (thumb) {
+                const targetIndex = parseInt(thumb.dataset.index);
+                instagramSwiper.slideToLoop(targetIndex);
+            }
+        };
+        
+        // 현재 슬라이드에 맞춰 썸네일 업데이트
+        function updateThumbnailsForIndex(activeIndex) {
+            if (totalCount <= maxThumbs) return;
+            
+            // 현재 활성 인덱스를 중심으로 썸네일 배치
+            let startIndex = activeIndex - Math.floor(maxThumbs / 2);
+            if (startIndex < 0) startIndex = totalCount + startIndex;
+            
+            createThumbnails(startIndex);
+        }
+        
+        // 활성 썸네일 표시
+        function updateCustomThumbActive(activeIdx) {
+            document.querySelectorAll('.custom-swiper-thumb').forEach(function(thumb) {
+                const thumbIndex = parseInt(thumb.dataset.index);
+                thumb.classList.toggle('active', thumbIndex === activeIdx);
+            });
+        }
+        
+        // 초기 활성 상태 설정
+        updateCustomThumbActive(0);
+    }, 0);
+}
+
+// 초기화 실행
+fn_init();
+
+// 기존 팝업 닫기 버튼 이벤트 (마스킹 기능 추가)
+document.getElementById('btnPopupClose').addEventListener('click',function (){
+    $('.popup').removeClass('open');
+    // *** 배경 마스킹 제거 추가 ***
+    hideBackgroundMask();
+});
+
+// 추가 이벤트 리스너들 (새로 추가)
+document.addEventListener('DOMContentLoaded', function() {
+    // ESC 키로 팝업 닫기
+    document.addEventListener('keydown', function(e) {
+        if (e.key === 'Escape' && document.querySelector('.popup.open')) {
+            $('.popup').removeClass('open');
+            hideBackgroundMask();
+        }
+    });
+
+    // 마스크 영역 클릭 시 팝업 닫기 (선택사항)
+    const mask = document.querySelector('.popup-background-mask');
+    if (mask) {
+        mask.addEventListener('click', function() {
+            $('.popup').removeClass('open');
+            hideBackgroundMask();
+        });
+    }
+});