diff --git a/src/main/resources/static/image/equip/20260313/써마지FLX.jpg b/src/main/resources/static/image/equip/20260313/써마지FLX.jpg new file mode 100644 index 0000000..2bd754c Binary files /dev/null and b/src/main/resources/static/image/equip/20260313/써마지FLX.jpg differ diff --git a/src/main/resources/static/image/equip/20260313/온다리프팅(Face).jpg b/src/main/resources/static/image/equip/20260313/온다리프팅(Face).jpg new file mode 100644 index 0000000..d98b3e6 Binary files /dev/null and b/src/main/resources/static/image/equip/20260313/온다리프팅(Face).jpg differ diff --git a/src/main/resources/static/image/equip/20260313/울쎄라.jpg b/src/main/resources/static/image/equip/20260313/울쎄라.jpg new file mode 100644 index 0000000..18a253d Binary files /dev/null and b/src/main/resources/static/image/equip/20260313/울쎄라.jpg differ diff --git a/src/main/resources/static/image/equip/20260313/튠페이스.jpg b/src/main/resources/static/image/equip/20260313/튠페이스.jpg new file mode 100644 index 0000000..7ae573d Binary files /dev/null and b/src/main/resources/static/image/equip/20260313/튠페이스.jpg differ diff --git a/src/main/resources/static/image/equip/20260313/티타늄리프팅(Face).jpg b/src/main/resources/static/image/equip/20260313/티타늄리프팅(Face).jpg new file mode 100644 index 0000000..a24b4ab Binary files /dev/null and b/src/main/resources/static/image/equip/20260313/티타늄리프팅(Face).jpg differ diff --git a/src/main/resources/static/js/web/index.js b/src/main/resources/static/js/web/index.js index 6b6e66e..612c2b0 100644 --- a/src/main/resources/static/js/web/index.js +++ b/src/main/resources/static/js/web/index.js @@ -7,7 +7,7 @@ function fn_init() { //인스타그램 리스트 fn_selectListWebInstagramJson(); -//상단, 하단 배너 + //상단, 하단 배너 fn_selectListWebMainBannerTypeAJson(); fn_selectListWebMainBannerTypeBJson(); } @@ -22,10 +22,10 @@ function showBackgroundMask() { if (mask) { mask.classList.add('active'); } - + // body에 popup-open 클래스 추가 (스크롤 비활성화 및 블러 효과) document.body.classList.add('popup-open'); - + console.log('Background mask activated'); } @@ -35,10 +35,10 @@ function hideBackgroundMask() { if (mask) { mask.classList.remove('active'); } - + // body에서 popup-open 클래스 제거 document.body.classList.remove('popup-open'); - + console.log('Background mask deactivated'); } @@ -46,22 +46,22 @@ function hideBackgroundMask() { * 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 + '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 = ['레이저리프팅','쉬다주사(Face)','스컬트라','스킨부스터', '필러'] +const bullet1 = ['레이저리프팅', '쉬다주사(Face)', '스컬트라', '스킨부스터', '필러'] const useCont1Loop = bullet1.length > 5; // slidesPerView(1.3)보다 많을 때만 loop const cont1Swiper = new Swiper('.cont1_swiper', { loop: useCont1Loop, slidesPerView: 'auto', spaceBetween: 10, - autoplay : { + autoplay: { disableOnInteraction: false, }, pagination: { @@ -73,22 +73,22 @@ const cont1Swiper = new Swiper('.cont1_swiper', { }, on: { init: function () { - document.querySelectorAll('.cont1_swiper .swiper-slide').forEach(function(slide, idx) { + 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() { + slide.addEventListener('click', function () { const url = slide.getAttribute('data-url'); - if(url) window.open(url, '_blank'); + if (url) window.open(url, '_blank'); }); }); }, slideChange: function () { - document.querySelectorAll('.cont1_swiper .swiper-slide').forEach(function(slide, idx) { + 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() { + slide.onclick = function () { const url = slide.getAttribute('data-url'); - if(url) window.open(url, '_blank'); + if (url) window.open(url, '_blank'); }; }); } @@ -99,21 +99,21 @@ const cont1Swiper = new Swiper('.cont1_swiper', { * 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 + 'https://petit.madeu.co.kr/webservice/selectServiceDetailIntro.do?categoryDivCd=03&categoryNo=4&postNo=8' // 첫 번째 슬라이드 URL + , 'https://petit.madeu.co.kr/webservice/selectServiceDetailIntro.do?categoryDivCd=03&categoryNo=4&postNo=2' // 두 번째 슬라이드 URL + , 'https://petit.madeu.co.kr/webservice/selectServiceDetailIntro.do?categoryDivCd=03&categoryNo=4&postNo=10' // 세 번째 슬라이드 URL + , 'https://petit.madeu.co.kr/webservice/selectServiceDetailIntro.do?categoryDivCd=03&categoryNo=4&postNo=3' // 네 번째 슬라이드 URL + , 'https://petit.madeu.co.kr/webservice/selectServiceDetailIntro.do?categoryDivCd=03&categoryNo=4&postNo=4' // 다섯 번째 슬라이드 URL ]; -const bullet2 = ['티타늄','써마지','울쎄라', '줄기세포', '튠페이스'] +const bullet2 = ['써마지FLX', '울쎄라', '온다리프팅', '티타늄리프팅', '튠페이스'] const useCont2Loop = bullet2.length > 5; // slidesPerView(1.3)보다 많을 때만 loop const cont2Swiper = new Swiper('.cont2_swiper', { loop: useCont2Loop, slidesPerView: 'auto', spaceBetween: 10, - autoplay : { + autoplay: { disableOnInteraction: false, }, pagination: { @@ -125,22 +125,22 @@ const cont2Swiper = new Swiper('.cont2_swiper', { }, on: { init: function () { - document.querySelectorAll('.cont2_swiper .swiper-slide').forEach(function(slide, idx) { + 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() { + slide.addEventListener('click', function () { const url = slide.getAttribute('data-url'); - if(url) window.open(url, '_blank'); + if (url) window.open(url, '_blank'); }); }); }, slideChange: function () { - document.querySelectorAll('.cont2_swiper .swiper-slide').forEach(function(slide, idx) { + 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() { + slide.onclick = function () { const url = slide.getAttribute('data-url'); - if(url) window.open(url, '_blank'); + if (url) window.open(url, '_blank'); }; }); } @@ -150,7 +150,7 @@ const cont2Swiper = new Swiper('.cont2_swiper', { /**************************************************************************** * 팝업 리스트 조회 (마스킹 기능 추가) ****************************************************************************/ -function fn_selectListWebPopupJson(){ +function fn_selectListWebPopupJson() { let formData = new FormData(); $.ajax({ @@ -161,13 +161,13 @@ function fn_selectListWebPopupJson(){ contentType: false, type: 'POST', async: true, - success: function(data){ - if(data.msgCode=='0'){ + success: function (data) { + if (data.msgCode == '0') { //쿠기값 확인 let cookiedata = document.cookie; if (cookiedata.indexOf("popup=done") < 0) { $('.popup').addClass('open'); - + // *** 배경 마스킹 활성화 추가 *** showBackgroundMask(); @@ -175,20 +175,20 @@ function fn_selectListWebPopupJson(){ if (0 < totalCount) { let popupContentList = $('#popupContentList'); let popupTabList = $('#popupTabList'); - - popupContentList.empty(); + + 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 += '
'; + contentHTML += '
'; contentHTML += ''; - contentHTML += 'event_con' + (i+1) + ''; + contentHTML += 'event_con' + (i + 1) + ''; contentHTML += ''; contentHTML += '
'; popupContentList.append(contentHTML); @@ -196,7 +196,7 @@ function fn_selectListWebPopupJson(){ // 탭 리스트 생성 (data-toggle 제거하고 클릭 이벤트 직접 처리) let tabHTML = ''; tabHTML += ''; @@ -207,27 +207,27 @@ function fn_selectListWebPopupJson(){ setupTabEvents(); setupPopupCloseEvents(); } - }else{ + } else { $('.popup').removeClass('open'); hideBackgroundMask(); // 추가 } - }else if('-2' == data.msgCode){ - modalEvent.danger("로그인 오류", data.msgDesc, function(){ + } else if ('-2' == data.msgCode) { + modalEvent.danger("로그인 오류", data.msgDesc, function () { fn_leftFormAction('/weblogin/logout.do'); }); - }else{ + } else { modalEvent.danger("조회 오류", data.msgDesc); } }, - error : function(xhr, status, error) { + error: function (xhr, status, error) { modalEvent.danger("조회 오류", "조회 중 오류가 발생하였습니다. 잠시후 다시시도하십시오."); }, - beforeSend:function(){ + beforeSend: function () { // 로딩열기 $(".loading-image-layer").show(); }, - complete:function(){ + complete: function () { // 로딩닫기 $(".loading-image-layer").hide(); } @@ -236,15 +236,15 @@ function fn_selectListWebPopupJson(){ // 탭 이벤트 설정 함수 추가 function setupTabEvents() { - $('#popupTabList a[role="tab"]').off('click').on('click', function(e) { + $('#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'); @@ -259,7 +259,7 @@ function setupPopupCloseEvents() { // 기존 이벤트 리스너 복제본 생성하여 교체 const newCloseBtn = closeBtn.cloneNode(true); closeBtn.parentNode.replaceChild(newCloseBtn, closeBtn); - + // 새로운 이벤트 리스너 추가 newCloseBtn.addEventListener('click', function () { //체크박스 확인 @@ -269,7 +269,7 @@ function setupPopupCloseEvents() { setCookie('done', 1); } else { $('.popup').removeClass('open'); - hideBackgroundMask(); + hideBackgroundMask(); } }); } @@ -290,9 +290,9 @@ function fn_addBrAfterFirstWord(input) { function setCookie(value, expiredays) { let todayDate = new Date(); todayDate.setDate(todayDate.getDate() + expiredays); - document.cookie = "popup=" + escape( value ) + "; path=/; expires=" + todayDate.toGMTString() + ";"; + document.cookie = "popup=" + escape(value) + "; path=/; expires=" + todayDate.toGMTString() + ";"; $('.popup').removeClass('open'); - + // *** 배경 마스킹 제거 추가 *** hideBackgroundMask(); } @@ -300,7 +300,7 @@ function setCookie(value, expiredays) { /**************************************************************************** * 메인 배너 리스트 조회 ****************************************************************************/ -function fn_selectListWebMainBannerTypeAJson(){ +function fn_selectListWebMainBannerTypeAJson() { let formData = new FormData(); formData.append('bannerType', 'PT'); @@ -312,8 +312,8 @@ function fn_selectListWebMainBannerTypeAJson(){ contentType: false, type: 'POST', async: true, - success: function(data){ - if(data.msgCode=='0'){ + success: function (data) { + if (data.msgCode == '0') { let totalCount = data.rows.length; if (0 < totalCount) { let listHTML = ''; @@ -326,8 +326,8 @@ function fn_selectListWebMainBannerTypeAJson(){ // 이미지와 링크를 a 태그로 감싸기 (url 파라미터 사용) listHTML += '
'; listHTML += ' '; - listHTML += ' banner' + (i+1) + ''; - listHTML += ' banner' + (i+1) + ''; + listHTML += ' banner' + (i + 1) + ''; + listHTML += ' banner' + (i + 1) + ''; listHTML += ' '; listHTML += '
'; } @@ -340,7 +340,7 @@ function fn_selectListWebMainBannerTypeAJson(){ const mainBannerSwiper = new Swiper('.main_banner_swiper', { loop: useMainBannerLoop, slidesPerView: 1, - autoplay : { + autoplay: { disableOnInteraction: false, }, pagination: { @@ -361,7 +361,7 @@ function fn_selectListWebMainBannerTypeAJson(){ }, }); - ///////// swiper-pagination-bullet 넓이 동적 조정 ///////// + ///////// swiper-pagination-bullet 넓이 동적 조정 ///////// function adjustBulletWidth() { const bullets = document.querySelectorAll('.main_banner_pagination .swiper-pagination-bullet'); const paginationWidth = 490; @@ -373,32 +373,32 @@ function fn_selectListWebMainBannerTypeAJson(){ } ///////// 활성화된 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'); // 하나만 추가 - } - } + 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(){ + } else { $("#mainBannerList").empty(); } + } else if ('-2' == data.msgCode) { + modalEvent.danger("로그인 오류", data.msgDesc, function () { fn_leftFormAction('/weblogin/logout.do'); }); - }else{ + } else { modalEvent.danger("조회 오류", data.msgDesc); } }, - error : function(xhr, status, error) { + error: function (xhr, status, error) { modalEvent.danger("조회 오류", "조회 중 오류가 발생하였습니다. 잠시후 다시시도하십시오."); }, - beforeSend:function(){ + beforeSend: function () { // 로딩열기 $(".loading-image-layer").show(); }, - complete:function(){ + complete: function () { // 로딩닫기 $(".loading-image-layer").hide(); } @@ -408,7 +408,7 @@ function fn_selectListWebMainBannerTypeAJson(){ /**************************************************************************** * 서브 배너 이벤트 리스트 조회 ****************************************************************************/ -function fn_selectListWebMainBannerTypeBJson(){ +function fn_selectListWebMainBannerTypeBJson() { let formData = new FormData(); formData.append('bannerType', 'PB'); @@ -420,8 +420,8 @@ function fn_selectListWebMainBannerTypeBJson(){ contentType: false, type: 'POST', async: true, - success: function(data){ - if(data.msgCode=='0'){ + success: function (data) { + if (data.msgCode == '0') { let totalCount = data.rows.length; if (0 < totalCount) { @@ -435,8 +435,8 @@ function fn_selectListWebMainBannerTypeBJson(){ // 이미지와 링크를 a 태그로 감싸기 (url 파라미터 사용) listHTML += '
'; listHTML += ' '; - listHTML += ' banner' + (i+1) + ''; - listHTML += ' banner' + (i+1) + ''; + listHTML += ' banner' + (i + 1) + ''; + listHTML += ' banner' + (i + 1) + ''; listHTML += ' '; listHTML += ' '; listHTML += '
'; @@ -450,7 +450,7 @@ function fn_selectListWebMainBannerTypeBJson(){ const subBannerSwiper = new Swiper('.sub_banner_swiper', { loop: useSubBannerLoop, slidesPerView: 1, - autoplay : { + autoplay: { disableOnInteraction: false, }, pagination: { @@ -471,7 +471,7 @@ function fn_selectListWebMainBannerTypeBJson(){ }, }); - ///////// swiper-pagination-bullet 넓이 동적 조정 ///////// + ///////// swiper-pagination-bullet 넓이 동적 조정 ///////// function adjustSubBulletWidth() { const bullets = document.querySelectorAll('.sub_banner_pagination .swiper-pagination-bullet'); const paginationWidth = 490; @@ -495,24 +495,24 @@ function fn_selectListWebMainBannerTypeBJson(){ }); } - }else{$("#subBannerList").empty();} - }else if('-2' == data.msgCode){ - modalEvent.danger("로그인 오류", data.msgDesc, function(){ + } else { $("#subBannerList").empty(); } + } else if ('-2' == data.msgCode) { + modalEvent.danger("로그인 오류", data.msgDesc, function () { fn_leftFormAction('/weblogin/logout.do'); }); - }else{ + } else { modalEvent.danger("조회 오류", data.msgDesc); } }, - error : function(xhr, status, error) { + error: function (xhr, status, error) { modalEvent.danger("조회 오류", "조회 중 오류가 발생하였습니다. 잠시후 다시시도하십시오."); }, - beforeSend:function(){ + beforeSend: function () { // 로딩열기 $(".loading-image-layer").show(); }, - complete:function(){ + complete: function () { // 로딩닫기 $(".loading-image-layer").hide(); } @@ -522,7 +522,7 @@ function fn_selectListWebMainBannerTypeBJson(){ /**************************************************************************** * 인스타그램 피드 리스트 조회 (백엔드 API 사용) ****************************************************************************/ -function fn_selectListWebInstagramJson(){ +function fn_selectListWebInstagramJson() { let formData = new FormData(); $.ajax({ url: encodeURI('/webinstagram/selectListWebInstagram.do'), @@ -532,8 +532,8 @@ function fn_selectListWebInstagramJson(){ contentType: false, type: 'POST', async: true, - success: function(data){ - if(data.msgCode=='0'){ + success: function (data) { + if (data.msgCode == '0') { let totalCount = data.rows.length; if (0 < totalCount) { let listHTML = ''; @@ -544,12 +544,12 @@ function fn_selectListWebInstagramJson(){ let permalink = data.rows[i].permalink; let mediaType = data.rows[i].media_type || ''; let thumbnailUrl = data.rows[i].thumbnail_url || mediaUrl; - listHTML += '
'; - listHTML += ' '; + listHTML += '
'; + listHTML += ' '; if (mediaType === 'VIDEO' || mediaType === 'REEL') { - listHTML += ' instagram'+(i+1)+''; + listHTML += ' instagram' + (i + 1) + ''; } else { - listHTML += ' instagram'+(i+1)+''; + listHTML += ' instagram' + (i + 1) + ''; } listHTML += ' '; listHTML += '
'; @@ -558,22 +558,22 @@ function fn_selectListWebInstagramJson(){ // 커스텀 내비게이션과 연동 initInstagramCustomNav(data); } - }else if('-2' == data.msgCode){ - modalEvent.danger("로그인 오류", data.msgDesc, function(){ + } else if ('-2' == data.msgCode) { + modalEvent.danger("로그인 오류", data.msgDesc, function () { fn_leftFormAction('/weblogin/logout.do'); }); - }else{ + } else { modalEvent.danger("조회 오류", data.msgDesc); } }, - error : function(xhr, status, error) { + error: function (xhr, status, error) { modalEvent.danger("조회 오류", "조회 중 오류가 발생하였습니다. 잠시후 다시시도하십시오."); }, - beforeSend:function(){ + beforeSend: function () { // 로딩열기 $(".loading-image-layer").show(); }, - complete:function(){ + complete: function () { // 로딩닫기 $(".loading-image-layer").hide(); } @@ -586,12 +586,12 @@ function fn_selectListWebInstagramJson(){ 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 = ''; @@ -601,17 +601,17 @@ function initInstagramCustomNav(data) { const thumbnailUrl = data.rows[dataIndex].thumbnail_url || mediaUrl; const isActive = dataIndex === currentActiveIndex ? 'active' : ''; thumbsHTML += `
- thumb${dataIndex+1} + thumb${dataIndex + 1}
`; } document.querySelector('.custom-swiper-thumbs').innerHTML = thumbsHTML; } - + // 초기 썸네일 생성 createThumbnails(0); // Swiper 인스턴스 - setTimeout(function() { + setTimeout(function () { const instagramSwiper = new Swiper('.instagram_swiper', { loop: true, autoplay: { @@ -628,18 +628,18 @@ function initInstagramCustomNav(data) { }, }, on: { - slideChange: function() { + 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 => + const isActiveVisible = visibleThumbs.some(thumb => parseInt(thumb.dataset.index) === currentActiveIndex ); - + // 활성 썸네일이 보이지 않으면 썸네일 업데이트 if (!isActiveVisible) { updateThumbnailsForIndex(currentActiveIndex); @@ -655,41 +655,41 @@ function initInstagramCustomNav(data) { }); // 좌우 버튼 이벤트 - document.querySelector('.custom-swiper-btn.prev').onclick = function() { + document.querySelector('.custom-swiper-btn.prev').onclick = function () { instagramSwiper.slidePrev(); }; - document.querySelector('.custom-swiper-btn.next').onclick = function() { + document.querySelector('.custom-swiper-btn.next').onclick = function () { instagramSwiper.slideNext(); }; - + // 썸네일 클릭 이벤트 - document.querySelector('.custom-swiper-thumbs').onclick = function(e) { + 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) { + document.querySelectorAll('.custom-swiper-thumb').forEach(function (thumb) { const thumbIndex = parseInt(thumb.dataset.index); thumb.classList.toggle('active', thumbIndex === activeIdx); }); } - + // 초기 활성 상태 설정 updateCustomThumbActive(0); }, 0); @@ -699,16 +699,16 @@ function initInstagramCustomNav(data) { fn_init(); // 기존 팝업 닫기 버튼 이벤트 (마스킹 기능 추가) -document.getElementById('btnPopupClose').addEventListener('click',function (){ +document.getElementById('btnPopupClose').addEventListener('click', function () { $('.popup').removeClass('open'); // *** 배경 마스킹 제거 추가 *** hideBackgroundMask(); }); // 추가 이벤트 리스너들 (새로 추가) -document.addEventListener('DOMContentLoaded', function() { +document.addEventListener('DOMContentLoaded', function () { // ESC 키로 팝업 닫기 - document.addEventListener('keydown', function(e) { + document.addEventListener('keydown', function (e) { if (e.key === 'Escape' && document.querySelector('.popup.open')) { $('.popup').removeClass('open'); hideBackgroundMask(); @@ -718,7 +718,7 @@ document.addEventListener('DOMContentLoaded', function() { // 마스크 영역 클릭 시 팝업 닫기 (선택사항) const mask = document.querySelector('.popup-background-mask'); if (mask) { - mask.addEventListener('click', function() { + mask.addEventListener('click', function () { $('.popup').removeClass('open'); hideBackgroundMask(); }); diff --git a/src/main/resources/templates/index.html b/src/main/resources/templates/index.html index 060aab0..b5901ce 100644 --- a/src/main/resources/templates/index.html +++ b/src/main/resources/templates/index.html @@ -1,150 +1,154 @@ - + - - + + -
-
- -
-
-

- MADE U 시그니처 -

-
-
-
- img - img -
-
- img - img -
-
- img - img -
-
- img - img -
-
- img - img -
-
-
-
-
-
- -
-
-

- MADE U 프리미엄장비 -

-
-
-
- img - img -
-
- img - img -
-
- img - img -
-
- img - img -
-
- img - img -
-
-
-
-
-
-
-
-
-

- MADE U 인스타그램
- @madeu_gn -

- +
+
+ +
+
+

+ MADE U 시그니처 +

+
+
+
+ img + img +
+
+ img + img +
+
+ img + img +
+
+ img + img +
+
+ img + img +
+
+
+
+
+
+ +
+
+

+ MADE U 프리미엄장비 +

+
+
+
+ img + img +
+
+ img + img +
+
+ img + img +
+
+ img + img +
+
+ img + img +
+
+
+
+
+
+
+
+
+

+ MADE U 인스타그램
+ @madeu_gn +

+ +
+
+
+
+
+
+ +
+ +
+ +
+
+
+
+
+ + +
+
+
+ +
+
+
+ + +
+
+
-
-
- - -
-
-
- -
-
-
- - -
-
- -
-
-
+
- + + + \ No newline at end of file