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

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

@@ -7,7 +7,7 @@ function fn_init() {
//인스타그램 리스트
fn_selectListWebInstagramJson();
//상단, 하단 배너
//상단, 하단 배너
fn_selectListWebMainBannerTypeAJson();
fn_selectListWebMainBannerTypeBJson();
}
@@ -47,21 +47,21 @@ function hideBackgroundMask() {
************************************************/
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=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,8 +161,8 @@ 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) {
@@ -186,9 +186,9 @@ function fn_selectListWebPopupJson(){
// 탭 콘텐츠 생성
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,7 +236,7 @@ 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');
@@ -290,7 +290,7 @@ 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');
// *** 배경 마스킹 제거 추가 ***
@@ -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: {
@@ -381,24 +381,24 @@ function fn_selectListWebMainBannerTypeAJson(){
}
}
}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: {
@@ -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();
}
@@ -601,7 +601,7 @@ 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;
@@ -611,7 +611,7 @@ function initInstagramCustomNav(data) {
createThumbnails(0);
// Swiper 인스턴스
setTimeout(function() {
setTimeout(function () {
const instagramSwiper = new Swiper('.instagram_swiper', {
loop: true,
autoplay: {
@@ -628,7 +628,7 @@ function initInstagramCustomNav(data) {
},
},
on: {
slideChange: function() {
slideChange: function () {
const newIndex = this.realIndex % totalCount;
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();
};
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);
@@ -684,7 +684,7 @@ function initInstagramCustomNav(data) {
// 활성 썸네일 표시
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);
});
@@ -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();
});

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

@@ -1,15 +1,13 @@
<!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">
</th:block>
<th:block layout:fragment="layoutContent">
<div class="popup-background-mask"></div>
<main>
<div class="popup-background-mask"></div>
<main>
<section class="banner main_banner">
<div class="swiper main_banner_swiper">
<div class="swiper-wrapper" id="mainBannerList">
@@ -73,24 +71,28 @@
<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">
<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/20251014/써마지.jpg" alt="img" style="cursor:pointer">
<img class="mb" src="/image/equip/20251014/써마지.jpg" alt="img" style="cursor:pointer">
<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/20251014/울쎄라.jpg" alt="img" style="cursor:pointer">
<img class="mb" src="/image/equip/20251014/울쎄라.jpg" alt="img" style="cursor:pointer">
<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/20251014/줄기세포.jpg" alt="img" style="cursor:pointer">
<img class="mb" src="/image/equip/20251014/줄기세포.jpg" alt="img" style="cursor:pointer">
<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/20251014/튠페이스.jpg" alt="img" style="cursor:pointer">
<img class="mb" src="/image/equip/20251014/튠페이스.jpg" alt="img" style="cursor:pointer">
<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>
@@ -101,10 +103,11 @@
<div class="swiper-area">
<div class="instagram_top">
<h3>
MADE U 인스타그램<br/>
MADE U 인스타그램<br />
<span>@madeu_gn</span>
</h3>
<button class="more_btn" onClick="window.open('https://instagram.com/madeu_gn')">View more ≫</button>
<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">
@@ -120,24 +123,24 @@
</div>
</div>
</section>
</main>
</main>
<!-- 팝업 -->
<div class="popup">
<!-- 팝업 -->
<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"/>
<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>
<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">
@@ -147,4 +150,5 @@
</script>
<script src="/js/web/index.js"></script>
</th:block>
</html>