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

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

@@ -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 += '<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 += '<img src="' + CDN_URL + imgPath + '" alt="event_con' + (i+1) + '" />';
contentHTML += '<img src="' + CDN_URL + imgPath + '" alt="event_con' + (i + 1) + '" />';
contentHTML += '</a>';
contentHTML += '</div>';
popupContentList.append(contentHTML);
@@ -196,7 +196,7 @@ function fn_selectListWebPopupJson(){
// 탭 리스트 생성 (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 += '<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>';
@@ -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 += '<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 += ' <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>';
}
@@ -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 += '<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 += ' <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>';
@@ -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 += '<div class="swiper-slide" aria-label="'+currentAriaLabel+'">';
listHTML += ' <a href="'+permalink+'" target="_blank" rel="noopener">';
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)+'" />';
listHTML += ' <img src="' + thumbnailUrl + '" alt="instagram' + (i + 1) + '" />';
} else {
listHTML += ' <img src="'+mediaUrl+'" alt="instagram'+(i+1)+'" />';
listHTML += ' <img src="' + mediaUrl + '" alt="instagram' + (i + 1) + '" />';
}
listHTML += ' </a>';
listHTML += '</div>';
@@ -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 += `<div class="custom-swiper-thumb ${isActive}" data-index="${dataIndex}">
<img src="${thumbnailUrl}" alt="thumb${dataIndex+1}" />
<img src="${thumbnailUrl}" alt="thumb${dataIndex + 1}" />
</div>`;
}
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();
});

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

@@ -1,150 +1,154 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{/web/layout/layout}">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{/web/layout/layout}">
<th:block layout:fragment="layoutCss">
<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/index.css">
<link rel="stylesheet" href="/css/web/instagram-swiper-custom.css?v1.0">
</th:block>
<th:block layout:fragment="layoutContent">
<div class="popup-background-mask"></div>
<main>
<section class="banner main_banner">
<div class="swiper main_banner_swiper">
<div class="swiper-wrapper" id="mainBannerList">
</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 class="popup-background-mask"></div>
<main>
<section class="banner main_banner">
<div class="swiper main_banner_swiper">
<div class="swiper-wrapper" id="mainBannerList">
</div>
<div class="swiper-pagination main_banner_pagination"></div>
</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>
</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/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>
</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>
</th:block>
<th:block layout:fragment="layoutContentScript">
<script>
// CDN_URL 전역 정의
const CDN_URL = "[(${@environment.getProperty('url.cdn')})]";
</script>
<script src="/js/web/index.js"></script>
</script>
<script src="/js/web/index.js"></script>
</th:block>
</html>