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

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

Browse Source
This commit is contained in:
pjs
2026-03-14 10:01:09 +09:00
parent 8e26533e2f
commit 441f3ce30b
6 changed files with 245 additions and 233 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 162 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: 117 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: 131 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 125 KiB

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

@@ -21,10 +21,10 @@ function showBackgroundMask() {
if (mask) {
mask.classList.add('active');
}
// body에 popup-open 클래스 추가 (스크롤 비활성화 및 블러 효과)
document.body.classList.add('popup-open');
console.log('Background mask activated');
}
@@ -34,10 +34,10 @@ function hideBackgroundMask() {
if (mask) {
mask.classList.remove('active');
}
// body에서 popup-open 클래스 제거
document.body.classList.remove('popup-open');
console.log('Background mask deactivated');
}
@@ -50,14 +50,14 @@ const cont1Urls = [
// 필요시 추가
];
const bullet1 = ['다이어트약','쉬다주사']
const bullet1 = ['다이어트약', '쉬다주사']
const useCont1Loop = bullet1.length > 2; // slidesPerView(1.3)보다 많을 때만 loop
const cont1Swiper = new Swiper('.cont1_swiper', {
loop: useCont1Loop,
slidesPerView: 'auto',
spaceBetween: 10,
autoplay : {
autoplay: {
disableOnInteraction: false,
},
pagination: {
@@ -69,22 +69,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');
};
});
}
@@ -95,19 +95,21 @@ const cont1Swiper = new Swiper('.cont1_swiper', {
* content2 스와이퍼
************************************************/
const cont2Urls = [
'https://diet.madeu.co.kr/webservice/selectServiceIntro.do?categoryNo=3', // 첫 번째 슬라이드 URL
'https://diet.madeu.co.kr/webservice/selectServiceIntro.do?categoryNo=3' // 두 번째 슬라이드 URL
'https://diet.madeu.co.kr/webservice/selectServiceDetailIntro.do?categoryDivCd=01&categoryNo=3&postNo=9',
'https://diet.madeu.co.kr/webservice/selectServiceDetailIntro.do?categoryDivCd=01&categoryNo=3&postNo=2',
'https://diet.madeu.co.kr/webservice/selectServiceDetailIntro.do?categoryDivCd=01&categoryNo=3&postNo=10',
'https://diet.madeu.co.kr/webservice/selectServiceDetailIntro.do?categoryDivCd=01&categoryNo=3&postNo=1'
// 필요시 추가
];
const bullet2 = ['울핏','튠바디']
const bullet2 = ['온다리프팅', '튠바디', '티타늄리프팅', '울핏']
const useCont2Loop = bullet2.length > 2; // slidesPerView(1.3)보다 많을 때만 loop
const cont2Swiper = new Swiper('.cont2_swiper', {
loop: useCont2Loop,
slidesPerView: 'auto',
spaceBetween: 10,
autoplay : {
autoplay: {
disableOnInteraction: false,
},
pagination: {
@@ -119,22 +121,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');
};
});
}
@@ -144,7 +146,7 @@ const cont2Swiper = new Swiper('.cont2_swiper', {
/****************************************************************************
* 팝업 리스트 조회 (마스킹 기능 추가)
****************************************************************************/
function fn_selectListWebPopupJson(){
function fn_selectListWebPopupJson() {
let formData = new FormData();
$.ajax({
@@ -155,12 +157,12 @@ 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();
@@ -168,20 +170,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);
@@ -189,7 +191,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>';
@@ -200,25 +202,25 @@ 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();
}
});
@@ -226,15 +228,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');
@@ -249,7 +251,7 @@ function setupPopupCloseEvents() {
// 기존 이벤트 리스너 복제본 생성하여 교체
const newCloseBtn = closeBtn.cloneNode(true);
closeBtn.parentNode.replaceChild(newCloseBtn, closeBtn);
// 새로운 이벤트 리스너 추가
newCloseBtn.addEventListener('click', function () {
//체크박스 확인
@@ -259,7 +261,7 @@ function setupPopupCloseEvents() {
setCookie('done', 1);
} else {
$('.popup').removeClass('open');
hideBackgroundMask();
hideBackgroundMask();
}
});
}
@@ -280,9 +282,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();
}
@@ -290,10 +292,10 @@ function setCookie(value, expiredays) {
/****************************************************************************
* 메인 배너 리스트 조회
****************************************************************************/
function fn_selectListWebMainBannerTypeAJson(){
function fn_selectListWebMainBannerTypeAJson() {
let formData = new FormData();
formData.append('bannerType', 'DT');
$.ajax({
url: encodeURI('/webmainbanner/selectListWebMainBanner.do'),
data: formData,
@@ -302,8 +304,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 = '';
@@ -316,8 +318,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>';
}
@@ -330,7 +332,7 @@ function fn_selectListWebMainBannerTypeAJson(){
const mainBannerSwiper = new Swiper('.main_banner_swiper', {
loop: useMainBannerLoop,
slidesPerView: 1,
autoplay : {
autoplay: {
disableOnInteraction: false,
},
pagination: {
@@ -351,7 +353,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;
@@ -363,43 +365,43 @@ 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();
}
});
}
/****************************************************************************
* 서브 배너 이벤트 리스트 조회
****************************************************************************/
function fn_selectListWebMainBannerTypeBJson(){
function fn_selectListWebMainBannerTypeBJson() {
let formData = new FormData();
formData.append('bannerType', 'DB');
@@ -411,8 +413,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) {
@@ -426,8 +428,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>';
@@ -441,7 +443,7 @@ function fn_selectListWebMainBannerTypeBJson(){
const subBannerSwiper = new Swiper('.sub_banner_swiper', {
loop: useSubBannerLoop,
slidesPerView: 1,
autoplay : {
autoplay: {
disableOnInteraction: false,
},
pagination: {
@@ -462,7 +464,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;
@@ -486,24 +488,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();
}
@@ -513,7 +515,7 @@ function fn_selectListWebMainBannerTypeBJson(){
/****************************************************************************
* 인스타그램 피드 리스트 조회 (백엔드 API 사용)
****************************************************************************/
function fn_selectListWebInstagramJson(){
function fn_selectListWebInstagramJson() {
let formData = new FormData();
$.ajax({
url: encodeURI('/webinstagram/selectListWebInstagram.do'),
@@ -523,8 +525,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 = '';
@@ -535,12 +537,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>';
@@ -549,22 +551,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();
}
@@ -577,12 +579,12 @@ function fn_selectListWebInstagramJson(){
function initInstagramCustomNav(data) {
const totalCount = data.rows.length;
if (totalCount === 0) return;
// 썸네일은 최대 3개로 고정
const maxThumbs = 3;
const showThumbs = Math.min(totalCount, maxThumbs);
let currentActiveIndex = 0; // 현재 활성 인덱스 추적
// 썸네일 버튼 생성 (활성 상태 포함)
function createThumbnails(startIndex = 0) {
let thumbsHTML = '';
@@ -592,17 +594,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: {
@@ -619,18 +621,18 @@ function initInstagramCustomNav(data) {
},
},
on: {
slideChange: function() {
slideChange: function () {
const newIndex = this.realIndex % totalCount;
currentActiveIndex = newIndex; // 활성 인덱스 업데이트
// 콘텐츠가 3개보다 많은 경우 썸네일 순환 업데이트
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);
@@ -646,41 +648,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);
@@ -690,29 +692,29 @@ 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();
}
});
// 마스크 영역 클릭 시 팝업 닫기 (선택사항)
// 마스크 영역 클릭 시 팝업 닫기 (선택사항)
const mask = document.querySelector('.popup-background-mask');
if (mask) {
mask.addEventListener('click', function() {
mask.addEventListener('click', function () {
$('.popup').removeClass('open');
hideBackgroundMask();
});
}
});

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

@@ -1,125 +1,135 @@
<!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/main-slide/signature_diet_medicine_20251001.jpg" alt="img">
<img class="mb" src="/image/main-slide/signature_diet_medicine_20251001.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">
<img class="mb" src="/image/equip/20251014/울핏.jpg" alt="img">
</div>
<div class="swiper-slide">
<img class="pc" src="/image/equip/20251014/튠바디.jpg" alt="img">
<img class="mb" src="/image/equip/20251014/튠바디.jpg" alt="img">
</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_diet</span>
</h3>
<button class="more_btn" onClick="window.open('https://instagram.com/madeu_diet')">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/main-slide/signature_diet_medicine_20251001.jpg" alt="img">
<img class="mb" src="/image/main-slide/signature_diet_medicine_20251001.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/온다리프팅(Body).jpg" alt="img">
<img class="mb" src="/image/equip/20260313/온다리프팅(Body).jpg" alt="img">
</div>
<div class="swiper-slide">
<img class="pc" src="/image/equip/20260313/튠바디.jpg" alt="img">
<img class="mb" src="/image/equip/20260313/튠바디.jpg" alt="img">
</div>
<div class="swiper-slide">
<img class="pc" src="/image/equip/20260313/티타늄리프팅(Body).jpg" alt="img">
<img class="mb" src="/image/equip/20260313/티타늄리프팅(Body).jpg" alt="img">
</div>
<div class="swiper-slide">
<img class="pc" src="/image/equip/20260313/울핏.jpg" alt="img">
<img class="mb" src="/image/equip/20260313/울핏.jpg" alt="img">
</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_diet</span>
</h3>
<button class="more_btn" onClick="window.open('https://instagram.com/madeu_diet')">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>