admin/madeu_petit_home
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

2026-03-13 장비 슬라이드 변경

Browse Source
This commit is contained in:
pjs
2026-03-14 12:25:59 +09:00
parent f73751497a
commit 5e53f19f2a
7 changed files with 266 additions and 262 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/main/resources/static/image/equip/20260313/써마지FLX.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 115 KiB

BIN
src/main/resources/static/image/equip/20260313/온다리프팅(Face).jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 163 KiB

BIN
src/main/resources/static/image/equip/20260313/울쎄라.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 104 KiB

BIN
src/main/resources/static/image/equip/20260313/튠페이스.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 124 KiB

BIN
src/main/resources/static/image/equip/20260313/티타늄리프팅(Face).jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 124 KiB

204
src/main/resources/static/js/web/index.js
View File

@@ -7,7 +7,7 @@ function fn_init() {
//인스타그램 리스트 //인스타그램 리스트
fn_selectListWebInstagramJson(); fn_selectListWebInstagramJson();
//상단, 하단 배너 //상단, 하단 배너
fn_selectListWebMainBannerTypeAJson(); fn_selectListWebMainBannerTypeAJson();
fn_selectListWebMainBannerTypeBJson(); fn_selectListWebMainBannerTypeBJson();
} }
@@ -46,22 +46,22 @@ function hideBackgroundMask() {
* content1 스와이퍼 * content1 스와이퍼
************************************************/ ************************************************/
const cont1Urls = [ const cont1Urls = [
'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=1' // 두 번째 슬라이드 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/webservice/selectServiceIntro.do?categoryNo=5' // 세 번째 슬라이드 URL
,'https://petit.madeu.co.kr/index' // 네 번째 슬라이드 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=1' // 다섯 번째 슬라이드 URL
// 필요시 추가 // 필요시 추가
]; ];
const bullet1 = ['레이저리프팅','쉬다주사(Face)','스컬트라','스킨부스터', '필러'] const bullet1 = ['레이저리프팅', '쉬다주사(Face)', '스컬트라', '스킨부스터', '필러']
const useCont1Loop = bullet1.length > 5; // slidesPerView(1.3)보다 많을 때만 loop const useCont1Loop = bullet1.length > 5; // slidesPerView(1.3)보다 많을 때만 loop
const cont1Swiper = new Swiper('.cont1_swiper', { const cont1Swiper = new Swiper('.cont1_swiper', {
loop: useCont1Loop, loop: useCont1Loop,
slidesPerView: 'auto', slidesPerView: 'auto',
spaceBetween: 10, spaceBetween: 10,
autoplay : { autoplay: {
disableOnInteraction: false, disableOnInteraction: false,
}, },
pagination: { pagination: {
@@ -73,22 +73,22 @@ const cont1Swiper = new Swiper('.cont1_swiper', {
}, },
on: { on: {
init: function () { 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.style.cursor = 'pointer';
slide.setAttribute('data-url', cont1Urls[idx] || cont1Urls[0]); slide.setAttribute('data-url', cont1Urls[idx] || cont1Urls[0]);
slide.addEventListener('click', function() { slide.addEventListener('click', function () {
const url = slide.getAttribute('data-url'); const url = slide.getAttribute('data-url');
if(url) window.open(url, '_blank'); if (url) window.open(url, '_blank');
}); });
}); });
}, },
slideChange: function () { 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.style.cursor = 'pointer';
slide.setAttribute('data-url', cont1Urls[idx] || cont1Urls[0]); slide.setAttribute('data-url', cont1Urls[idx] || cont1Urls[0]);
slide.onclick = function() { slide.onclick = function () {
const url = slide.getAttribute('data-url'); 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 스와이퍼 * content2 스와이퍼
************************************************/ ************************************************/
const cont2Urls = [ const cont2Urls = [
'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/selectServiceIntro.do?categoryNo=4' // 두 번째 슬라이드 URL , 'https://petit.madeu.co.kr/webservice/selectServiceDetailIntro.do?categoryDivCd=03&categoryNo=4&postNo=2' // 두 번째 슬라이드 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=10' // 세 번째 슬라이드 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=3' // 네 번째 슬라이드 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=4' // 다섯 번째 슬라이드 URL
]; ];
const bullet2 = ['티타늄','써마지','울쎄라', '줄기세포', '튠페이스'] const bullet2 = ['써마지FLX', '울쎄라', '온다리프팅', '티타늄리프팅', '튠페이스']
const useCont2Loop = bullet2.length > 5; // slidesPerView(1.3)보다 많을 때만 loop const useCont2Loop = bullet2.length > 5; // slidesPerView(1.3)보다 많을 때만 loop
const cont2Swiper = new Swiper('.cont2_swiper', { const cont2Swiper = new Swiper('.cont2_swiper', {
loop: useCont2Loop, loop: useCont2Loop,
slidesPerView: 'auto', slidesPerView: 'auto',
spaceBetween: 10, spaceBetween: 10,
autoplay : { autoplay: {
disableOnInteraction: false, disableOnInteraction: false,
}, },
pagination: { pagination: {
@@ -125,22 +125,22 @@ const cont2Swiper = new Swiper('.cont2_swiper', {
}, },
on: { on: {
init: function () { 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.style.cursor = 'pointer';
slide.setAttribute('data-url', cont2Urls[idx] || cont2Urls[0]); slide.setAttribute('data-url', cont2Urls[idx] || cont2Urls[0]);
slide.addEventListener('click', function() { slide.addEventListener('click', function () {
const url = slide.getAttribute('data-url'); const url = slide.getAttribute('data-url');
if(url) window.open(url, '_blank'); if (url) window.open(url, '_blank');
}); });
}); });
}, },
slideChange: function () { 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.style.cursor = 'pointer';
slide.setAttribute('data-url', cont2Urls[idx] || cont2Urls[0]); slide.setAttribute('data-url', cont2Urls[idx] || cont2Urls[0]);
slide.onclick = function() { slide.onclick = function () {
const url = slide.getAttribute('data-url'); 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(); let formData = new FormData();
$.ajax({ $.ajax({
@@ -161,8 +161,8 @@ function fn_selectListWebPopupJson(){
contentType: false, contentType: false,
type: 'POST', type: 'POST',
async: true, async: true,
success: function(data){ success: function (data) {
if(data.msgCode=='0'){ if (data.msgCode == '0') {
//쿠기값 확인 //쿠기값 확인
let cookiedata = document.cookie; let cookiedata = document.cookie;
if (cookiedata.indexOf("popup=done") < 0) { if (cookiedata.indexOf("popup=done") < 0) {
@@ -186,9 +186,9 @@ function fn_selectListWebPopupJson(){
// 탭 콘텐츠 생성 // 탭 콘텐츠 생성
let contentHTML = ''; let contentHTML = '';
contentHTML += '<div role="tabpanel" class="tab-pane' + isActive + '" id="content' + (i+1) + '">'; contentHTML += '<div role="tabpanel" class="tab-pane' + isActive + '" id="content' + (i + 1) + '">';
contentHTML += '<a href="' + data.rows[i].url + '" target="_blank" rel="noopener">'; contentHTML += '<a href="' + data.rows[i].url + '" target="_blank" rel="noopener">';
contentHTML += '<img src="' + CDN_URL + imgPath + '" alt="event_con' + (i+1) + '" />'; contentHTML += '<img src="' + CDN_URL + imgPath + '" alt="event_con' + (i + 1) + '" />';
contentHTML += '</a>'; contentHTML += '</a>';
contentHTML += '</div>'; contentHTML += '</div>';
popupContentList.append(contentHTML); popupContentList.append(contentHTML);
@@ -196,7 +196,7 @@ function fn_selectListWebPopupJson(){
// 탭 리스트 생성 (data-toggle 제거하고 클릭 이벤트 직접 처리) // 탭 리스트 생성 (data-toggle 제거하고 클릭 이벤트 직접 처리)
let tabHTML = ''; let tabHTML = '';
tabHTML += '<li role="presentation"' + (isActive ? ' class="active"' : '') + '>'; 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 += '<a href="#content' + (i + 1) + '" role="tab" id="contentTitle' + (i + 1) + '" data-target="content' + (i + 1) + '">';
tabHTML += fn_addBrAfterFirstWord(data.rows[i].title); tabHTML += fn_addBrAfterFirstWord(data.rows[i].title);
tabHTML += '</a>'; tabHTML += '</a>';
tabHTML += '</li>'; tabHTML += '</li>';
@@ -207,27 +207,27 @@ function fn_selectListWebPopupJson(){
setupTabEvents(); setupTabEvents();
setupPopupCloseEvents(); setupPopupCloseEvents();
} }
}else{ } else {
$('.popup').removeClass('open'); $('.popup').removeClass('open');
hideBackgroundMask(); // 추가 hideBackgroundMask(); // 추가
} }
}else if('-2' == data.msgCode){ } else if ('-2' == data.msgCode) {
modalEvent.danger("로그인 오류", data.msgDesc, function(){ modalEvent.danger("로그인 오류", data.msgDesc, function () {
fn_leftFormAction('/weblogin/logout.do'); fn_leftFormAction('/weblogin/logout.do');
}); });
}else{ } else {
modalEvent.danger("조회 오류", data.msgDesc); modalEvent.danger("조회 오류", data.msgDesc);
} }
}, },
error : function(xhr, status, error) { error: function (xhr, status, error) {
modalEvent.danger("조회 오류", "조회 중 오류가 발생하였습니다. 잠시후 다시시도하십시오."); modalEvent.danger("조회 오류", "조회 중 오류가 발생하였습니다. 잠시후 다시시도하십시오.");
}, },
beforeSend:function(){ beforeSend: function () {
// 로딩열기 // 로딩열기
$(".loading-image-layer").show(); $(".loading-image-layer").show();
}, },
complete:function(){ complete: function () {
// 로딩닫기 // 로딩닫기
$(".loading-image-layer").hide(); $(".loading-image-layer").hide();
} }
@@ -236,7 +236,7 @@ function fn_selectListWebPopupJson(){
// 탭 이벤트 설정 함수 추가 // 탭 이벤트 설정 함수 추가
function setupTabEvents() { function setupTabEvents() {
$('#popupTabList a[role="tab"]').off('click').on('click', function(e) { $('#popupTabList a[role="tab"]').off('click').on('click', function (e) {
e.preventDefault(); e.preventDefault();
const targetId = $(this).data('target'); const targetId = $(this).data('target');
@@ -269,7 +269,7 @@ function setupPopupCloseEvents() {
setCookie('done', 1); setCookie('done', 1);
} else { } else {
$('.popup').removeClass('open'); $('.popup').removeClass('open');
hideBackgroundMask(); hideBackgroundMask();
} }
}); });
} }
@@ -290,7 +290,7 @@ function fn_addBrAfterFirstWord(input) {
function setCookie(value, expiredays) { function setCookie(value, expiredays) {
let todayDate = new Date(); let todayDate = new Date();
todayDate.setDate(todayDate.getDate() + expiredays); 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'); $('.popup').removeClass('open');
// *** 배경 마스킹 제거 추가 *** // *** 배경 마스킹 제거 추가 ***
@@ -300,7 +300,7 @@ function setCookie(value, expiredays) {
/**************************************************************************** /****************************************************************************
* 메인 배너 리스트 조회 * 메인 배너 리스트 조회
****************************************************************************/ ****************************************************************************/
function fn_selectListWebMainBannerTypeAJson(){ function fn_selectListWebMainBannerTypeAJson() {
let formData = new FormData(); let formData = new FormData();
formData.append('bannerType', 'PT'); formData.append('bannerType', 'PT');
@@ -312,8 +312,8 @@ function fn_selectListWebMainBannerTypeAJson(){
contentType: false, contentType: false,
type: 'POST', type: 'POST',
async: true, async: true,
success: function(data){ success: function (data) {
if(data.msgCode=='0'){ if (data.msgCode == '0') {
let totalCount = data.rows.length; let totalCount = data.rows.length;
if (0 < totalCount) { if (0 < totalCount) {
let listHTML = ''; let listHTML = '';
@@ -326,8 +326,8 @@ function fn_selectListWebMainBannerTypeAJson(){
// 이미지와 링크를 a 태그로 감싸기 (url 파라미터 사용) // 이미지와 링크를 a 태그로 감싸기 (url 파라미터 사용)
listHTML += '<div class="swiper-slide" style="background:' + backgroundColor + ';" aria-label="' + currentAriaLabel + '">'; listHTML += '<div class="swiper-slide" style="background:' + backgroundColor + ';" aria-label="' + currentAriaLabel + '">';
listHTML += ' <a href="' + data.rows[i].url + '" target="_blank" rel="noopener">'; 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="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 += ' <img class="mb" src="' + CDN_URL + data.rows[i].mobileFilePath + '" alt="banner' + (i + 1) + '" />';
listHTML += ' </a>'; listHTML += ' </a>';
listHTML += '</div>'; listHTML += '</div>';
} }
@@ -340,7 +340,7 @@ function fn_selectListWebMainBannerTypeAJson(){
const mainBannerSwiper = new Swiper('.main_banner_swiper', { const mainBannerSwiper = new Swiper('.main_banner_swiper', {
loop: useMainBannerLoop, loop: useMainBannerLoop,
slidesPerView: 1, slidesPerView: 1,
autoplay : { autoplay: {
disableOnInteraction: false, disableOnInteraction: false,
}, },
pagination: { pagination: {
@@ -361,7 +361,7 @@ function fn_selectListWebMainBannerTypeAJson(){
}, },
}); });
///////// swiper-pagination-bullet 넓이 동적 조정 ///////// ///////// swiper-pagination-bullet 넓이 동적 조정 /////////
function adjustBulletWidth() { function adjustBulletWidth() {
const bullets = document.querySelectorAll('.main_banner_pagination .swiper-pagination-bullet'); const bullets = document.querySelectorAll('.main_banner_pagination .swiper-pagination-bullet');
const paginationWidth = 490; const paginationWidth = 490;
@@ -373,32 +373,32 @@ function fn_selectListWebMainBannerTypeAJson(){
} }
///////// 활성화된 swiper-pagination-bullet 업데이트 ///////// ///////// 활성화된 swiper-pagination-bullet 업데이트 /////////
function updateActiveBullets(activeIndex) { function updateActiveBullets(activeIndex) {
const bullets = document.querySelectorAll('.mainbannerpagination .swiper-pagination-bullet'); const bullets = document.querySelectorAll('.mainbannerpagination .swiper-pagination-bullet');
bullets.forEach(bullet => bullet.classList.remove('swiper-pagination-bullet-active')); // 먼저 모두 제거 bullets.forEach(bullet => bullet.classList.remove('swiper-pagination-bullet-active')); // 먼저 모두 제거
if (bullets[activeIndex]) { if (bullets[activeIndex]) {
bullets[activeIndex].classList.add('swiper-pagination-bullet-active'); // 하나만 추가 bullets[activeIndex].classList.add('swiper-pagination-bullet-active'); // 하나만 추가
} }
} }
}else{$("#mainBannerList").empty();} } else { $("#mainBannerList").empty(); }
}else if('-2' == data.msgCode){ } else if ('-2' == data.msgCode) {
modalEvent.danger("로그인 오류", data.msgDesc, function(){ modalEvent.danger("로그인 오류", data.msgDesc, function () {
fn_leftFormAction('/weblogin/logout.do'); fn_leftFormAction('/weblogin/logout.do');
}); });
}else{ } else {
modalEvent.danger("조회 오류", data.msgDesc); modalEvent.danger("조회 오류", data.msgDesc);
} }
}, },
error : function(xhr, status, error) { error: function (xhr, status, error) {
modalEvent.danger("조회 오류", "조회 중 오류가 발생하였습니다. 잠시후 다시시도하십시오."); modalEvent.danger("조회 오류", "조회 중 오류가 발생하였습니다. 잠시후 다시시도하십시오.");
}, },
beforeSend:function(){ beforeSend: function () {
// 로딩열기 // 로딩열기
$(".loading-image-layer").show(); $(".loading-image-layer").show();
}, },
complete:function(){ complete: function () {
// 로딩닫기 // 로딩닫기
$(".loading-image-layer").hide(); $(".loading-image-layer").hide();
} }
@@ -408,7 +408,7 @@ function fn_selectListWebMainBannerTypeAJson(){
/**************************************************************************** /****************************************************************************
* 서브 배너 이벤트 리스트 조회 * 서브 배너 이벤트 리스트 조회
****************************************************************************/ ****************************************************************************/
function fn_selectListWebMainBannerTypeBJson(){ function fn_selectListWebMainBannerTypeBJson() {
let formData = new FormData(); let formData = new FormData();
formData.append('bannerType', 'PB'); formData.append('bannerType', 'PB');
@@ -420,8 +420,8 @@ function fn_selectListWebMainBannerTypeBJson(){
contentType: false, contentType: false,
type: 'POST', type: 'POST',
async: true, async: true,
success: function(data){ success: function (data) {
if(data.msgCode=='0'){ if (data.msgCode == '0') {
let totalCount = data.rows.length; let totalCount = data.rows.length;
if (0 < totalCount) { if (0 < totalCount) {
@@ -435,8 +435,8 @@ function fn_selectListWebMainBannerTypeBJson(){
// 이미지와 링크를 a 태그로 감싸기 (url 파라미터 사용) // 이미지와 링크를 a 태그로 감싸기 (url 파라미터 사용)
listHTML += '<div class="swiper-slide" style="background:' + backgroundColor + ';" aria-label="' + currentAriaLabel + '">'; listHTML += '<div class="swiper-slide" style="background:' + backgroundColor + ';" aria-label="' + currentAriaLabel + '">';
listHTML += ' <a href="' + data.rows[i].url + '" target="_blank" rel="noopener">'; 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="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 += ' <img class="mb" src="' + CDN_URL + data.rows[i].mobileFilePath + '" alt="banner' + (i + 1) + '" />';
listHTML += ' <button class="detail_btn">Detail view ></button>'; listHTML += ' <button class="detail_btn">Detail view ></button>';
listHTML += ' </a>'; listHTML += ' </a>';
listHTML += '</div>'; listHTML += '</div>';
@@ -450,7 +450,7 @@ function fn_selectListWebMainBannerTypeBJson(){
const subBannerSwiper = new Swiper('.sub_banner_swiper', { const subBannerSwiper = new Swiper('.sub_banner_swiper', {
loop: useSubBannerLoop, loop: useSubBannerLoop,
slidesPerView: 1, slidesPerView: 1,
autoplay : { autoplay: {
disableOnInteraction: false, disableOnInteraction: false,
}, },
pagination: { pagination: {
@@ -471,7 +471,7 @@ function fn_selectListWebMainBannerTypeBJson(){
}, },
}); });
///////// swiper-pagination-bullet 넓이 동적 조정 ///////// ///////// swiper-pagination-bullet 넓이 동적 조정 /////////
function adjustSubBulletWidth() { function adjustSubBulletWidth() {
const bullets = document.querySelectorAll('.sub_banner_pagination .swiper-pagination-bullet'); const bullets = document.querySelectorAll('.sub_banner_pagination .swiper-pagination-bullet');
const paginationWidth = 490; const paginationWidth = 490;
@@ -495,24 +495,24 @@ function fn_selectListWebMainBannerTypeBJson(){
}); });
} }
}else{$("#subBannerList").empty();} } else { $("#subBannerList").empty(); }
}else if('-2' == data.msgCode){ } else if ('-2' == data.msgCode) {
modalEvent.danger("로그인 오류", data.msgDesc, function(){ modalEvent.danger("로그인 오류", data.msgDesc, function () {
fn_leftFormAction('/weblogin/logout.do'); fn_leftFormAction('/weblogin/logout.do');
}); });
}else{ } else {
modalEvent.danger("조회 오류", data.msgDesc); modalEvent.danger("조회 오류", data.msgDesc);
} }
}, },
error : function(xhr, status, error) { error: function (xhr, status, error) {
modalEvent.danger("조회 오류", "조회 중 오류가 발생하였습니다. 잠시후 다시시도하십시오."); modalEvent.danger("조회 오류", "조회 중 오류가 발생하였습니다. 잠시후 다시시도하십시오.");
}, },
beforeSend:function(){ beforeSend: function () {
// 로딩열기 // 로딩열기
$(".loading-image-layer").show(); $(".loading-image-layer").show();
}, },
complete:function(){ complete: function () {
// 로딩닫기 // 로딩닫기
$(".loading-image-layer").hide(); $(".loading-image-layer").hide();
} }
@@ -522,7 +522,7 @@ function fn_selectListWebMainBannerTypeBJson(){
/**************************************************************************** /****************************************************************************
* 인스타그램 피드 리스트 조회 (백엔드 API 사용) * 인스타그램 피드 리스트 조회 (백엔드 API 사용)
****************************************************************************/ ****************************************************************************/
function fn_selectListWebInstagramJson(){ function fn_selectListWebInstagramJson() {
let formData = new FormData(); let formData = new FormData();
$.ajax({ $.ajax({
url: encodeURI('/webinstagram/selectListWebInstagram.do'), url: encodeURI('/webinstagram/selectListWebInstagram.do'),
@@ -532,8 +532,8 @@ function fn_selectListWebInstagramJson(){
contentType: false, contentType: false,
type: 'POST', type: 'POST',
async: true, async: true,
success: function(data){ success: function (data) {
if(data.msgCode=='0'){ if (data.msgCode == '0') {
let totalCount = data.rows.length; let totalCount = data.rows.length;
if (0 < totalCount) { if (0 < totalCount) {
let listHTML = ''; let listHTML = '';
@@ -544,12 +544,12 @@ function fn_selectListWebInstagramJson(){
let permalink = data.rows[i].permalink; let permalink = data.rows[i].permalink;
let mediaType = data.rows[i].media_type || ''; let mediaType = data.rows[i].media_type || '';
let thumbnailUrl = data.rows[i].thumbnail_url || mediaUrl; let thumbnailUrl = data.rows[i].thumbnail_url || mediaUrl;
listHTML += '<div class="swiper-slide" aria-label="'+currentAriaLabel+'">'; listHTML += '<div class="swiper-slide" aria-label="' + currentAriaLabel + '">';
listHTML += ' <a href="'+permalink+'" target="_blank" rel="noopener">'; listHTML += ' <a href="' + permalink + '" target="_blank" rel="noopener">';
if (mediaType === 'VIDEO' || mediaType === 'REEL') { if (mediaType === 'VIDEO' || mediaType === 'REEL') {
listHTML += ' <img src="'+thumbnailUrl+'" alt="instagram'+(i+1)+'" />'; listHTML += ' <img src="' + thumbnailUrl + '" alt="instagram' + (i + 1) + '" />';
} else { } else {
listHTML += ' <img src="'+mediaUrl+'" alt="instagram'+(i+1)+'" />'; listHTML += ' <img src="' + mediaUrl + '" alt="instagram' + (i + 1) + '" />';
} }
listHTML += ' </a>'; listHTML += ' </a>';
listHTML += '</div>'; listHTML += '</div>';
@@ -558,22 +558,22 @@ function fn_selectListWebInstagramJson(){
// 커스텀 내비게이션과 연동 // 커스텀 내비게이션과 연동
initInstagramCustomNav(data); initInstagramCustomNav(data);
} }
}else if('-2' == data.msgCode){ } else if ('-2' == data.msgCode) {
modalEvent.danger("로그인 오류", data.msgDesc, function(){ modalEvent.danger("로그인 오류", data.msgDesc, function () {
fn_leftFormAction('/weblogin/logout.do'); fn_leftFormAction('/weblogin/logout.do');
}); });
}else{ } else {
modalEvent.danger("조회 오류", data.msgDesc); modalEvent.danger("조회 오류", data.msgDesc);
} }
}, },
error : function(xhr, status, error) { error: function (xhr, status, error) {
modalEvent.danger("조회 오류", "조회 중 오류가 발생하였습니다. 잠시후 다시시도하십시오."); modalEvent.danger("조회 오류", "조회 중 오류가 발생하였습니다. 잠시후 다시시도하십시오.");
}, },
beforeSend:function(){ beforeSend: function () {
// 로딩열기 // 로딩열기
$(".loading-image-layer").show(); $(".loading-image-layer").show();
}, },
complete:function(){ complete: function () {
// 로딩닫기 // 로딩닫기
$(".loading-image-layer").hide(); $(".loading-image-layer").hide();
} }
@@ -601,7 +601,7 @@ function initInstagramCustomNav(data) {
const thumbnailUrl = data.rows[dataIndex].thumbnail_url || mediaUrl; const thumbnailUrl = data.rows[dataIndex].thumbnail_url || mediaUrl;
const isActive = dataIndex === currentActiveIndex ? 'active' : ''; const isActive = dataIndex === currentActiveIndex ? 'active' : '';
thumbsHTML += `<div class="custom-swiper-thumb ${isActive}" data-index="${dataIndex}"> thumbsHTML += `<div class="custom-swiper-thumb ${isActive}" data-index="${dataIndex}">
<img src="${thumbnailUrl}" alt="thumb${dataIndex+1}" /> <img src="${thumbnailUrl}" alt="thumb${dataIndex + 1}" />
</div>`; </div>`;
} }
document.querySelector('.custom-swiper-thumbs').innerHTML = thumbsHTML; document.querySelector('.custom-swiper-thumbs').innerHTML = thumbsHTML;
@@ -611,7 +611,7 @@ function initInstagramCustomNav(data) {
createThumbnails(0); createThumbnails(0);
// Swiper 인스턴스 // Swiper 인스턴스
setTimeout(function() { setTimeout(function () {
const instagramSwiper = new Swiper('.instagram_swiper', { const instagramSwiper = new Swiper('.instagram_swiper', {
loop: true, loop: true,
autoplay: { autoplay: {
@@ -628,7 +628,7 @@ function initInstagramCustomNav(data) {
}, },
}, },
on: { on: {
slideChange: function() { slideChange: function () {
const newIndex = this.realIndex % totalCount; const newIndex = this.realIndex % totalCount;
currentActiveIndex = newIndex; // 활성 인덱스 업데이트 currentActiveIndex = newIndex; // 활성 인덱스 업데이트
@@ -655,15 +655,15 @@ function initInstagramCustomNav(data) {
}); });
// 좌우 버튼 이벤트 // 좌우 버튼 이벤트
document.querySelector('.custom-swiper-btn.prev').onclick = function() { document.querySelector('.custom-swiper-btn.prev').onclick = function () {
instagramSwiper.slidePrev(); instagramSwiper.slidePrev();
}; };
document.querySelector('.custom-swiper-btn.next').onclick = function() { document.querySelector('.custom-swiper-btn.next').onclick = function () {
instagramSwiper.slideNext(); 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'); const thumb = e.target.closest('.custom-swiper-thumb');
if (thumb) { if (thumb) {
const targetIndex = parseInt(thumb.dataset.index); const targetIndex = parseInt(thumb.dataset.index);
@@ -684,7 +684,7 @@ function initInstagramCustomNav(data) {
// 활성 썸네일 표시 // 활성 썸네일 표시
function updateCustomThumbActive(activeIdx) { 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); const thumbIndex = parseInt(thumb.dataset.index);
thumb.classList.toggle('active', thumbIndex === activeIdx); thumb.classList.toggle('active', thumbIndex === activeIdx);
}); });
@@ -699,16 +699,16 @@ function initInstagramCustomNav(data) {
fn_init(); fn_init();
// 기존 팝업 닫기 버튼 이벤트 (마스킹 기능 추가) // 기존 팝업 닫기 버튼 이벤트 (마스킹 기능 추가)
document.getElementById('btnPopupClose').addEventListener('click',function (){ document.getElementById('btnPopupClose').addEventListener('click', function () {
$('.popup').removeClass('open'); $('.popup').removeClass('open');
// *** 배경 마스킹 제거 추가 *** // *** 배경 마스킹 제거 추가 ***
hideBackgroundMask(); hideBackgroundMask();
}); });
// 추가 이벤트 리스너들 (새로 추가) // 추가 이벤트 리스너들 (새로 추가)
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function () {
// ESC 키로 팝업 닫기 // ESC 키로 팝업 닫기
document.addEventListener('keydown', function(e) { document.addEventListener('keydown', function (e) {
if (e.key === 'Escape' && document.querySelector('.popup.open')) { if (e.key === 'Escape' && document.querySelector('.popup.open')) {
$('.popup').removeClass('open'); $('.popup').removeClass('open');
hideBackgroundMask(); hideBackgroundMask();
@@ -718,7 +718,7 @@ document.addEventListener('DOMContentLoaded', function() {
// 마스크 영역 클릭 시 팝업 닫기 (선택사항) // 마스크 영역 클릭 시 팝업 닫기 (선택사항)
const mask = document.querySelector('.popup-background-mask'); const mask = document.querySelector('.popup-background-mask');
if (mask) { if (mask) {
mask.addEventListener('click', function() { mask.addEventListener('click', function () {
$('.popup').removeClass('open'); $('.popup').removeClass('open');
hideBackgroundMask(); hideBackgroundMask();
}); });

274
src/main/resources/templates/index.html
View File

@@ -1,150 +1,154 @@
<!DOCTYPE html> <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" <html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{/web/layout/layout}">
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{/web/layout/layout}">
<th:block layout:fragment="layoutCss"> <th:block layout:fragment="layoutCss">
<link rel="stylesheet" href="/css/web/index.css"> <link rel="stylesheet" href="/css/web/index.css">
<link rel="stylesheet" href="/css/web/instagram-swiper-custom.css?v1.0"> <link rel="stylesheet" href="/css/web/instagram-swiper-custom.css?v1.0">
</th:block> </th:block>
<th:block layout:fragment="layoutContent"> <th:block layout:fragment="layoutContent">
<div class="popup-background-mask"></div> <div class="popup-background-mask"></div>
<main> <main>
<section class="banner main_banner"> <section class="banner main_banner">
<div class="swiper main_banner_swiper"> <div class="swiper main_banner_swiper">
<div class="swiper-wrapper" id="mainBannerList"> <div class="swiper-wrapper" id="mainBannerList">
</div> </div>
<div class="swiper-pagination main_banner_pagination"></div> <div class="swiper-pagination main_banner_pagination"></div>
</div>
</section>
<section class="cont content1">
<div class="swiper-area">
<h3>
<span style="color:#fff;">MADE U</span> <span style="color:#ffcccc">시그니처</span>
</h3>
<div class="swiper cont1_swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img class="pc" src="/image/signature/20251024/레이저리프팅.jpg" alt="img">
<img class="mb" src="/image/signature/20251024/레이저리프팅.jpg" alt="img">
</div>
<div class="swiper-slide">
<img class="pc" src="/image/signature/20251024/쉬다주사(Face).jpg" alt="img">
<img class="mb" src="/image/signature/20251024/쉬다주사(Face).jpg" alt="img">
</div>
<div class="swiper-slide">
<img class="pc" src="/image/signature/20251024/스컬트라.jpg" alt="img">
<img class="mb" src="/image/signature/20251024/스컬트라.jpg" alt="img">
</div>
<div class="swiper-slide">
<img class="pc" src="/image/signature/20251024/스킨부스터.jpg" alt="img">
<img class="mb" src="/image/signature/20251024/스킨부스터.jpg" alt="img">
</div>
<div class="swiper-slide">
<img class="pc" src="/image/signature/20251024/필러.jpg" alt="img">
<img class="mb" src="/image/signature/20251024/필러.jpg" alt="img">
</div>
</div>
<div class="swiper-pagination cont1_swiper_pagination"></div>
</div>
</div>
</section>
<section class="banner sub_banner">
<div class="swiper sub_banner_swiper">
<div class="swiper-wrapper" id="subBannerList">
<div class="swiper-slide" style="background:#666;">
<button class="detail_btn">Detail view ></button>
</div>
<div class="swiper-slide" style="background:#999;">
<button class="detail_btn">Detail view ></button>
</div>
<div class="swiper-slide" style="background:#ddd;">
<button class="detail_btn">Detail view ></button>
</div>
</div>
<div class="swiper-pagination sub_banner_pagination"></div>
</div>
</section>
<section class="cont content2">
<div class="swiper-area">
<h3>
<span style="color:#cc3333">MADE U</span> <span style="color:#000">프리미엄장비</span>
</h3>
<div class="swiper cont2_swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img class="pc" src="/image/equip/20251014/티타늄.jpg" alt="img" style="cursor:pointer">
<img class="mb" src="/image/equip/20251014/티타늄.jpg" alt="img" style="cursor:pointer">
</div>
<div class="swiper-slide">
<img class="pc" src="/image/equip/20251014/써마지.jpg" alt="img" style="cursor:pointer">
<img class="mb" src="/image/equip/20251014/써마지.jpg" alt="img" style="cursor:pointer">
</div>
<div class="swiper-slide">
<img class="pc" src="/image/equip/20251014/울쎄라.jpg" alt="img" style="cursor:pointer">
<img class="mb" src="/image/equip/20251014/울쎄라.jpg" alt="img" style="cursor:pointer">
</div>
<div class="swiper-slide">
<img class="pc" src="/image/equip/20251014/줄기세포.jpg" alt="img" style="cursor:pointer">
<img class="mb" src="/image/equip/20251014/줄기세포.jpg" alt="img" style="cursor:pointer">
</div>
<div class="swiper-slide">
<img class="pc" src="/image/equip/20251014/튠페이스.jpg" alt="img" style="cursor:pointer">
<img class="mb" src="/image/equip/20251014/튠페이스.jpg" alt="img" style="cursor:pointer">
</div>
</div>
<div class="swiper-pagination cont2_swiper_pagination"></div>
</div>
</div>
</section>
<section class="instagram">
<div class="swiper-area">
<div class="instagram_top">
<h3>
MADE U 인스타그램<br/>
<span>@madeu_gn</span>
</h3>
<button class="more_btn" onClick="window.open('https://instagram.com/madeu_gn')">View more ≫</button>
</div> </div>
<div class="instagram_btm" id="instagramFeed"> </section>
<div class="swiper instagram_swiper"> <section class="cont content1">
<div class="swiper-wrapper" id="instagramList"> <div class="swiper-area">
</div> <h3>
</div> <span style="color:#fff;">MADE U</span> <span style="color:#ffcccc">시그니처</span>
<!-- 커스텀 내비게이션 하단 영역 --> </h3>
<div class="instagram-swiper-footer"> <div class="swiper cont1_swiper">
<button class="custom-swiper-btn prev"></button> <div class="swiper-wrapper">
<div class="custom-swiper-thumbs"></div> <div class="swiper-slide">
<button class="custom-swiper-btn next"></button> <img class="pc" src="/image/signature/20251024/레이저리프팅.jpg" alt="img">
</div> <img class="mb" src="/image/signature/20251024/레이저리프팅.jpg" alt="img">
</div>
<div class="swiper-slide">
<img class="pc" src="/image/signature/20251024/쉬다주사(Face).jpg" alt="img">
<img class="mb" src="/image/signature/20251024/쉬다주사(Face).jpg" alt="img">
</div>
<div class="swiper-slide">
<img class="pc" src="/image/signature/20251024/스컬트라.jpg" alt="img">
<img class="mb" src="/image/signature/20251024/스컬트라.jpg" alt="img">
</div>
<div class="swiper-slide">
<img class="pc" src="/image/signature/20251024/스킨부스터.jpg" alt="img">
<img class="mb" src="/image/signature/20251024/스킨부스터.jpg" alt="img">
</div>
<div class="swiper-slide">
<img class="pc" src="/image/signature/20251024/필러.jpg" alt="img">
<img class="mb" src="/image/signature/20251024/필러.jpg" alt="img">
</div>
</div>
<div class="swiper-pagination cont1_swiper_pagination"></div>
</div>
</div>
</section>
<section class="banner sub_banner">
<div class="swiper sub_banner_swiper">
<div class="swiper-wrapper" id="subBannerList">
<div class="swiper-slide" style="background:#666;">
<button class="detail_btn">Detail view ></button>
</div>
<div class="swiper-slide" style="background:#999;">
<button class="detail_btn">Detail view ></button>
</div>
<div class="swiper-slide" style="background:#ddd;">
<button class="detail_btn">Detail view ></button>
</div>
</div>
<div class="swiper-pagination sub_banner_pagination"></div>
</div>
</section>
<section class="cont content2">
<div class="swiper-area">
<h3>
<span style="color:#cc3333">MADE U</span> <span style="color:#000">프리미엄장비</span>
</h3>
<div class="swiper cont2_swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img class="pc" src="/image/equip/20260313/써마지FLX.jpg" alt="img" style="cursor:pointer">
<img class="mb" src="/image/equip/20260313/써마지FLX.jpg" alt="img" style="cursor:pointer">
</div>
<div class="swiper-slide">
<img class="pc" src="/image/equip/20260313/울쎄라.jpg" alt="img" style="cursor:pointer">
<img class="mb" src="/image/equip/20260313/울쎄라.jpg" alt="img" style="cursor:pointer">
</div>
<div class="swiper-slide">
<img class="pc" src="/image/equip/20260313/온다리프팅(Face).jpg" alt="img"
style="cursor:pointer">
<img class="mb" src="/image/equip/20260313/온다리프팅(Face).jpg" alt="img"
style="cursor:pointer">
</div>
<div class="swiper-slide">
<img class="pc" src="/image/equip/20260313/티타늄리프팅(Face).jpg" alt="img"
style="cursor:pointer">
<img class="mb" src="/image/equip/20260313/티타늄리프팅(Face).jpg" alt="img"
style="cursor:pointer">
</div>
<div class="swiper-slide">
<img class="pc" src="/image/equip/20260313/튠페이스.jpg" alt="img" style="cursor:pointer">
<img class="mb" src="/image/equip/20260313/튠페이스.jpg" alt="img" style="cursor:pointer">
</div>
</div>
<div class="swiper-pagination cont2_swiper_pagination"></div>
</div>
</div>
</section>
<section class="instagram">
<div class="swiper-area">
<div class="instagram_top">
<h3>
MADE U 인스타그램<br />
<span>@madeu_gn</span>
</h3>
<button class="more_btn" onClick="window.open('https://instagram.com/madeu_gn')">View more
≫</button>
</div>
<div class="instagram_btm" id="instagramFeed">
<div class="swiper instagram_swiper">
<div class="swiper-wrapper" id="instagramList">
</div>
</div>
<!-- 커스텀 내비게이션 하단 영역 -->
<div class="instagram-swiper-footer">
<button class="custom-swiper-btn prev"></button>
<div class="custom-swiper-thumbs"></div>
<button class="custom-swiper-btn next"></button>
</div>
</div>
</div>
</section>
</main>
<!-- 팝업 -->
<div class="popup">
<div class="top">
<div class="tab-content" id="popupContentList"></div>
<ul class="nav nav-tabs" role="tablist" id="popupTabList"></ul>
</div>
<div class="btm">
<div class="left_box">
<input type="checkbox" id="today" />
<label for="today">오늘 하루 안보기</label>
</div>
<div class="right_box">
<button class="close_btn_btm" id="btnPopupClose"><img src="/image/web/close.png" alt="close" /></button>
</div> </div>
</div> </div>
</section> </div>
</main>
<!-- 팝업 -->
<div class="popup">
<div class="top">
<div class="tab-content" id="popupContentList"></div>
<ul class="nav nav-tabs" role="tablist" id="popupTabList"></ul>
</div>
<div class="btm">
<div class="left_box">
<input type="checkbox" id="today"/>
<label for="today">오늘 하루 안보기</label>
</div>
<div class="right_box">
<button class="close_btn_btm" id="btnPopupClose"><img src="/image/web/close.png" alt="close"/></button>
</div>
</div>
</div>
</th:block> </th:block>
<th:block layout:fragment="layoutContentScript"> <th:block layout:fragment="layoutContentScript">
<script> <script>
// CDN_URL 전역 정의 // CDN_URL 전역 정의
const CDN_URL = "[(${@environment.getProperty('url.cdn')})]"; const CDN_URL = "[(${@environment.getProperty('url.cdn')})]";
</script> </script>
<script src="/js/web/index.js"></script> <script src="/js/web/index.js"></script>
</th:block> </th:block>
</html> </html>