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

최초 세팅

Browse Source
This commit is contained in:
bd091
2025-10-18 10:53:16 +09:00
commit 3632629a76
434 changed files with 61338 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

121
src/main/resources/templates/web/accept/acceptPrivacy.html Normal file
View File

@@ -0,0 +1,121 @@
<!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}">
<th:block layout:fragment="layoutCss">
<link rel="stylesheet" href="/css/web/accept/webAccept.css?ver=2">
</th:block>
<th:block layout:fragment="layoutContent">
<main>
<section class="privacy-policy">
<header>
<h2>📄 메이드유의원 개인정보처리방침</h2>
<p>메이드유의원(이하 "의원"이라 함)은 「개인정보 보호법」 등 관련 법령에 따라 이용자의 개인정보를 보호하고, 이와 관련한 고충을 신속하고 원활하게 처리할 수 있도록 다음과 같은 개인정보처리방침을 수립·공개합니다.</p>
</header>
<hr>
<section>
<h3>제1조 (개인정보의 수집 항목 및 수집 방법)</h3>
<ol>
<li><strong>수집 항목</strong>
<ul>
<li>필수항목: 이름, 이메일, 전화번호, 주소</li>
</ul>
</li>
<li><strong>수집 방법</strong>
<ul>
<li>홈페이지 회원가입, 고객문의, 상담 신청 등을 통해 수집됩니다.</li>
</ul>
</li>
</ol>
</section>
<hr>
<section>
<h3>제2조 (개인정보의 수집 및 이용 목적)</h3>
<ul>
<li>홈페이지 회원관리 및 서비스 제공</li>
<li>고객문의 및 상담 응대</li>
<li>이벤트, 마케팅 및 광고 활용</li>
</ul>
</section>
<hr>
<section>
<h3>제3조 (개인정보의 보유 및 이용 기간)</h3>
<ul>
<li><strong>회원정보</strong>: 회원 탈퇴 시까지 보유</li>
<li><strong>관련 법령에 따른 보존</strong>: 전자상거래 등에서의 소비자 보호에 관한 법률 등 관계법령에서 정한 기간</li>
</ul>
<p>의원은 수집한 개인정보를 원칙적으로 개인정보의 수집 및 이용 목적이 달성된 후에는 지체 없이 파기합니다. 단, 관련 법령에 따라 일정 기간 보존이 필요한 경우에는 해당 기간 동안 보관합니다.</p>
</section>
<hr>
<section>
<h3>제4조 (개인정보의 제3자 제공)</h3>
<ul>
<li>이용자의 사전 동의를 받은 경우</li>
<li>법령의 규정에 의거하거나, 수사 목적으로 법령에 정해진 절차와 방법에 따라 수사기관의 요구가 있는 경우</li>
</ul>
<table class="info-table">
<tr><th>제공 대상</th><td>(주)리라로</td></tr>
<tr><th>제공 목적</th><td>마케팅 및 이벤트 안내</td></tr>
<tr><th>제공 항목</th><td>이름, 전화번호, 이메일 등</td></tr>
<tr><th>보유 및 이용 기간</th><td>제공 목적 달성 시까지</td></tr>
</table>
</section>
<hr>
<section>
<h3>제5조 (개인정보의 처리 위탁)</h3>
<p>의원은 현재 개인정보 처리를 외부 업체에 <strong>위탁하고 있지 않습니다.</strong></p>
</section>
<hr>
<section>
<h3>제6조 (정보주체의 권리와 행사방법)</h3>
<ul>
<li>개인정보 열람요구</li>
<li>오류 등이 있을 경우 정정요구</li>
<li>삭제요구</li>
<li>처리정지 요구</li>
</ul>
<p>권리 행사는 이메일(<a href="mailto:gol1980@lilaloglobal.com">gol1980@lilaloglobal.com</a>)을 통해 요청하실 수 있으며, 의원은 이에 대해 지체 없이 조치하겠습니다.</p>
</section>
<hr>
<section>
<h3>제7조 (개인정보의 파기 절차 및 방법)</h3>
<ul>
<li><strong>파기절차</strong>: 목적 달성 후 별도 DB로 옮겨져 내부 방침 및 관련 법령에 따라 일정 기간 저장 후 파기</li>
<li><strong>파기방법</strong>: 전자적 파일은 복구 불가능한 방법으로 영구 삭제, 종이 문서는 분쇄기로 파기</li>
</ul>
</section>
<hr>
<section>
<h3>제8조 (개인정보의 안전성 확보조치)</h3>
<ul>
<li>개인정보의 암호화</li>
<li>해킹 등에 대비한 기술적 대책</li>
<li>접근통제 및 권한 관리</li>
<li>개인정보 처리 직원의 최소화 및 교육</li>
</ul>
</section>
<hr>
<section>
<h3>제9조 (개인정보 보호책임자)</h3>
<ul>
<li><strong>개인정보 보호책임자</strong>: 메이드유의원</li>
<li><strong>이메일</strong>: <a href="mailto:gol1980@lilaloglobal.com">gol1980@lilaloglobal.com</a></li>
</ul>
</section>
<hr>
<section>
<h3>제10조 (개인정보처리방침의 변경)</h3>
<ul>
<li>이 개인정보처리방침은 법령, 정책 또는 의원 내부 방침에 따라 변경될 수 있으며, 개정 시 홈페이지를 통해 사전 공지합니다.</li>
<li><strong>공고일자</strong>: 2025년 9월 5일</li>
<li><strong>시행일자</strong>: 2025년 9월 12일</li>
</ul>
</section>
</section>
</main>
</th:block>
<th:block layout:fragment="layoutContentScript">
<script src="/js/web/accept/webAccept.js?ver=2"></script>
</th:block>
</html>

136
src/main/resources/templates/web/accept/acceptSite.html Normal file
View File

@@ -0,0 +1,136 @@
<!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}">
<th:block layout:fragment="layoutCss">
<link rel="stylesheet" href="/css/web/accept/webAccept.css?ver=2">
</th:block>
<th:block layout:fragment="layoutContent">
<main>
<section class="terms-policy">
<header>
<h2>📄 메이드유의원 홈페이지 이용약관</h2>
<p>본 이용약관은 메이드유의원(이하 "의원")이 운영하는 웹사이트(이하 "사이트")의 이용과 관련하여, 이용자와 의원 간의 권리, 의무 및 책임사항, 기타 필요한 사항을 규정함을 목적으로 합니다.</p>
</header>
<hr>
<section>
<h3>제1조 (목적)</h3>
<p>이 약관은 의원이 제공하는 인터넷 관련 서비스(이하 "서비스")의 이용 조건 및 절차, 이용자와 의원의 권리·의무 및 책임사항 등을 규정함을 목적으로 합니다.</p>
</section>
<hr>
<section>
<h3>제2조 (정의)</h3>
<ol>
<li><strong>사이트</strong>: 메이드유의원이 운영하는 웹사이트를 의미합니다.</li>
<li><strong>이용자</strong>: 사이트에 접속하여 이 약관에 따라 서비스를 이용하는 자를 말합니다.</li>
<li><strong>회원</strong>: 사이트에 개인정보를 제공하여 회원등록을 한 자로서, 지속적으로 의원이 제공하는 정보를 이용할 수 있는 자를 말합니다.</li>
<li><strong>비회원</strong>: 회원가입을 하지 않고 서비스를 이용하는 자를 말합니다.</li>
</ol>
</section>
<hr>
<section>
<h3>제3조 (약관의 효력 및 변경)</h3>
<ol>
<li>본 약관은 사이트에 게시하거나 기타의 방법으로 이용자에게 공지함으로써 효력을 발생합니다.</li>
<li>의원은 관련 법령을 위반하지 않는 범위 내에서 약관을 개정할 수 있으며, 개정된 약관은 적용일자 및 개정사유와 함께 사이트에 공지합니다.</li>
<li>이용자가 변경된 약관에 동의하지 않을 경우, 회원탈퇴를 요청할 수 있으며, 변경 약관의 효력 발생일 이후에도 서비스를 계속 이용할 경우 약관에 동의한 것으로 간주합니다.</li>
</ol>
</section>
<hr>
<section>
<h3>제4조 (서비스의 제공 및 변경)</h3>
<ol>
<li>의원은 다음과 같은 서비스를 제공합니다.
<ul>
<li>홈페이지를 통한 병원 정보 제공</li>
<li>온라인 문의 및 상담</li>
<li>이벤트 및 프로모션 안내</li>
<li>기타 의원이 정하는 서비스</li>
</ul>
</li>
<li>의원은 서비스의 내용, 운영상 또는 기술상 필요에 따라 변경할 수 있습니다. 이 경우 변경된 내용을 사전에 공지합니다.</li>
</ol>
</section>
<hr>
<section>
<h3>제5조 (서비스의 중단)</h3>
<ol>
<li>의원은 다음의 경우 서비스 제공을 일시적으로 중단할 수 있습니다.
<ul>
<li>시스템 점검, 유지보수 등 필요한 경우</li>
<li>정전, 서버 장애, 시스템 다운 등 불가항력적 사유가 발생한 경우</li>
<li>기타 운영상 상당한 이유가 있는 경우</li>
</ul>
</li>
<li>서비스 중단 시 사전에 공지하며, 부득이한 경우 사후에 공지할 수 있습니다.</li>
</ol>
</section>
<hr>
<section>
<h3>제6조 (회원가입 및 관리)</h3>
<ol>
<li>이용자는 의원이 정한 가입 양식에 따라 회원정보를 기입하여 회원가입을 신청합니다.</li>
<li>의원은 신청자에게 서비스 이용을 허락함으로써 회원가입이 완료됩니다.</li>
<li>회원은 등록한 정보에 변경이 있을 경우, 즉시 수정해야 하며, 수정하지 않아 발생한 불이익에 대해서는 의원이 책임지지 않습니다.</li>
</ol>
</section>
<hr>
<section>
<h3>제7조 (이용자의 의무)</h3>
<ul>
<li>타인의 정보를 도용하거나 허위 정보를 입력하는 행위</li>
<li>사이트 운영을 방해하거나 장애를 유발하는 행위</li>
<li>저작권 등 타인의 권리를 침해하는 행위</li>
<li>공공질서 및 미풍양속에 반하는 행위</li>
<li>관련 법령 또는 본 약관을 위반하는 행위</li>
</ul>
</section>
<hr>
<section>
<h3>제8조 (의원의 의무)</h3>
<ol>
<li>의원은 관련 법령과 본 약관이 금지하거나 미풍양속에 반하는 행위를 하지 않으며, 지속적이고 안정적으로 서비스를 제공하기 위해 최선을 다합니다.</li>
<li>의원은 이용자의 개인정보 보호를 위해 개인정보처리방침을 수립하고 준수합니다.</li>
</ol>
</section>
<hr>
<section>
<h3>제9조 (저작권의 귀속 및 이용 제한)</h3>
<ol>
<li>사이트에 게시된 모든 콘텐츠(텍스트, 이미지 등)의 저작권은 의원 또는 정당한 권리자에게 있으며, 무단 복제, 배포, 전송, 변형 등을 금합니다.</li>
<li>이용자는 서비스를 이용함으로써 얻은 정보를 의원의 사전 승인 없이 복제, 유통, 상업적 이용할 수 없습니다.</li>
</ol>
</section>
<hr>
<section>
<h3>제10조 (면책 조항)</h3>
<ol>
<li>의원은 천재지변, 시스템 오류 등 불가항력적 사유로 인해 서비스를 제공할 수 없는 경우 책임을 지지 않습니다.</li>
<li>의원은 이용자의 귀책사유로 인한 서비스 이용 장애에 대하여 책임을 지지 않습니다.</li>
<li>의원은 이용자가 사이트에 게재한 정보, 자료, 사실의 신뢰도 및 정확성에 대하여 책임을 지지 않습니다.</li>
</ol>
</section>
<hr>
<section>
<h3>제11조 (분쟁 해결 및 관할법원)</h3>
<ol>
<li>서비스 이용과 관련하여 의원과 이용자 사이에 분쟁이 발생한 경우, 원만한 해결을 위해 상호 협의합니다.</li>
<li>협의가 이루어지지 않을 경우, 민사소송법상의 관할법원에 소를 제기할 수 있습니다.</li>
</ol>
</section>
<hr>
<section>
<h3>부칙</h3>
<ul>
<li>본 약관은 2025년 9월 12일부터 시행합니다.</li>
<li>본 약관에 명시되지 않은 사항은 관계 법령 및 상관례에 따릅니다.</li>
</ul>
</section>
</section>
</main>
</th:block>
<th:block layout:fragment="layoutContentScript">
<script src="/js/web/accept/webAccept.js?ver=2"></script>
</th:block>
</html>

189
src/main/resources/templates/web/diet/dietInjectionSelect.html Normal file
View File

@@ -0,0 +1,189 @@
<!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}">
<th:block layout:fragment="layoutCss">
<link rel="stylesheet" href="/css/web/diet/dietInjectionSelect.css?v1.0">
</th:block>
<th:block layout:fragment="layoutContent">
<div class="same">
<aside>
<ul>
<li class="first"><a href="#v">메쉬다 V</a></li>
<li><a href="#s">메쉬다 S</a></li>
</ul>
</aside>
<main>
<section class="main_img">
<img class="pc" src="/image/web/diet_main.jpg" alt="diet"/>
<img class="mb" src="/image/web/Mdiet_main.jpg" alt="diet"/>
<div class="text_box">
<div class="left_text_box">
<p class="sub_title">메이드유<span> 쉬운 다이어트 주사 메쉬다 S / V</span></p>
<p class="title">Unique <span>Solution</span></p>
<p class="sub_text">아름다움 극대화를 위해<br/><span>끊임없이 연구하고 노력합니다.</span></p>
</div>
<div class="right_text_box"><p><span>V </span>Line</p></div>
</div>
</section>
<section class="content1">
<div class="inner_wrap">
<p class="title">다이어트 주사 - 메쉬다 V, S</p>
<p class="sub_title">메쉬다는 얼굴 메쉬다V와 바디 메쉬다S로 구분</p>
<p class="sub_text">
메쉬다S는 오랜임상을 거쳐 만든 독자적인 메이드유만의 바디 지방파괴 및 감소 효과를 보이며 <br/>
말랑말랑 바디 지방 + 탱탱 바디 지방을 동시에 해결하는 주사로 3~5회를 추천드립니다.
</p>
</div>
</section>
<section class="content2">
<div class="inner_wrap">
<h3><span>시술효과 </span>Effect</h3>
<ul>
<li><p>1회시술만으로도<br/>효과UP</p></li>
<li><p>지방 세포<br/>분해</p></li>
<li><p>림프순환촉진<br/>UP으로<br/>붓기최소화</p></li>
<li><p>바디 탄력<br/>효과</p></li>
</ul>
</div>
</section>
<section class="content3">
<div class="inner_wrap">
<h3><span>특징 </span>Unique</h3>
<ul class="box_list">
<li>
<div><img src="/image/web/check.svg" alt="check"/></div>
<p>PPC NO! 붓기가 일어날 수 있는 PPC성분이 없습니다.</p>
</li>
<li>
<div><img src="/image/web/check.svg" alt="check"/></div>
<p>메이드유만의 독자적인 단계별 다이어트약 병행</p>
</li>
<li>
<div><img src="/image/web/check.svg" alt="check"/></div>
<p>효과 Double UP! 독자적인 노하우로 효과가 큽니다.</p>
</li>
</ul>
</div>
</section>
<section class="content4">
<div class="inner_wrap">
<h3><span>시술횟수 </span>Time</h3>
<ul class="box_list">
<li>
<div><img src="/image/web/time.png" alt="check"/></div>
<p>1주 간격으로 5~10회</p>
</li>
</ul>
</div>
</section>
<section class="content5">
<div class="inner_wrap">
<h3><span>주의사항 </span>Notice</h3>
<ul class="box_list">
<li>
<div><img src="/image/web/notice.png" alt="check"/></div>
<p>
개인의 특성에 따라 붓기가 생길수 있습니다.<br/>
시술 부위를 누르거나 문지르는 등의 강한 자극은 피해주셔야 합니다<br/>
시술 후 일주일 동안은 흡연, 음주를 삼갑니다.
</p>
</li>
</ul>
</div>
</section>
<div id="v">
<section class="content6 img_cont">
<div class="inner_wrap">
<p>
수술없이 티안나게 나타나는 V라인<br/>
<span>MADE U 메쉬다 V주사</span>
</p>
<ul>
<li>
<img src="/image/web/cont6_1.jpg" alt="cont6_1"/>
<div class="text_box">
<p class="sub_title">Facial contouring improvement</p>
<p class="title">얼굴 윤곽 개선</p>
<p class="sub_text">접히고 튀어나온 턱선을 매끈하고<br/> 갸름하게 만들어 또렷한 인상으로!</p>
</div>
</li>
<li>
<img src="/image/web/cont6_2.jpg" alt="cont6_2"/>
<div class="text_box">
<p class="sub_title">Skin tone enhancement</p>
<p class="title">안색 개선</p>
<p class="sub_text">메쉬다 V주사는 조각난 지방과 <br/>노폐물 배출로, 안색 개선을 도움!</p>
</div>
</li>
<li>
<img src="/image/web/cont6_3.jpg" alt="cont6_3"/>
<div class="text_box">
<p class="sub_title">Facial asymmetry correction</p>
<p class="title">안면 비대칭 개선</p>
<p class="sub_text">한쪽으로 치우친 턱 라인을 균형잡아 <br/>예쁜 브이라인을 만듭니다.</p>
</div>
</li>
<li>
<img src="/image/web/cont6_4.jpg" alt="cont6_4"/>
<div class="text_box">
<p class="sub_title">Facial slimming</p>
<p class="title">얼굴 축소</p>
<p class="sub_text">턱 밑에 자리잡은 지방 제거로, <br/>얼굴이 작아지는 효과!</p>
</div>
</li>
</ul>
</div>
</section>
</div>
<div id="s">
<section class="content7 img_cont">
<div class="inner_wrap">
<p>
메이드유 지방분해주사 특징은?<br/>
<span>MADE U 메쉬다 S주사</span>
</p>
<ul>
<li>
<img src="/image/web/cont7_1.jpg" alt="cont6_1"/>
<div class="text_box">
<p class="sub_title">Detail 01</p>
<p class="title">복부 둘레감소</p>
<p class="sub_text">복부의 잘 빠지지 않는 지방세포<br/>자체를 분해하여 복부 둘레를 감소!</p>
</div>
</li>
<li>
<img src="/image/web/cont7_2.jpg" alt="cont7_2"/>
<div class="text_box">
<p class="sub_title">Detail 02</p>
<p class="title">복부라인 개선</p>
<p class="sub_text">아랫배, 러브핸들 부위의 군살, <br/>셀룰라이트를 제거, 슬림한 S라인!</p>
</div>
</li>
<li>
<img src="/image/web/cont7_3.jpg" alt="cont7_3"/>
<div class="text_box">
<p class="sub_title">Detail 03</p>
<p class="title">허벅지 안쪽라인 개선</p>
<p class="sub_text">축적된 허벅지 안쪽 지방을 제거,<br/>허벅지 사이에 충분한 틈을 생성!</p>
</div>
</li>
<li>
<img src="/image/web/cont7_4.jpg" alt="cont7_4"/>
<div class="text_box">
<p class="sub_title">Detail 04</p>
<p class="title">종아리 부종 개선</p>
<p class="sub_text">종아리에 쌓인 부종을 제거하여<br/>매끈한 라인으로 개선합니다.</p>
</div>
</li>
</ul>
</div>
</section>
</div>
</main>
</div>
</th:block>
<th:block layout:fragment="layoutContentScript">
</th:block>
</html>

196
src/main/resources/templates/web/diet/dietLaserSelect.html Normal file
View File

@@ -0,0 +1,196 @@
<!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}">
<th:block layout:fragment="layoutCss">
<link rel="stylesheet" href="/css/web/diet/dietLaserSelect.css?v1.0">
</th:block>
<th:block layout:fragment="layoutContent">
<div class="same">
<aside>
<ul>
<li class="first"><a href="#ulfit">울핏</a></li>
<li><a href="#tunebody">튠바디</a></li>
</ul>
</aside>
<main>
<!-- 울핏 -->
<div id="ulfit">
<section class="main_img">
<img class="pc" src="/image/web/diet_main3_1.jpg" alt="diet"/>
<img class="mb" src="/image/web/Mdiet_main3_1.jpg" alt="diet"/>
<div class="text_box">
<div class="left_text_box">
<p class="sub_title">바디를 탄력있고 아름답게 관리!</p>
<p class="title">울핏 Ulfit</p>
<p class="sub_text">
넓은 부위도 균일하고 빠르게! <br/>
바디 (복부 및 허벅지) 탄력개선 HIFU 장비
</p>
</div>
</div>
</section>
<section class="content1">
<div class="inner_wrap">
<p class="title">울핏 Ulfit</p>
<p class="sub_title">울핏은 강한 초음파 에너지 (HIFU)를 이용하여 탄력있는 바디를 위한 핏을 만드는 시술!</p>
<p class="sub_text">
강한 초음파 에너지 (HIFU)를 피하지방층에 집속하여 빠른 시술 효과로 탄력있고 매력적인 몸매를 만들어줍니다. <br/>
울핏 바디 타이트닝은 비침습적 방식으로 고질적인 지방 세포를 재배치하여 바디타이트닝에 효과적입니다. <br/>
고강도 집속 초음파를 이용하여 비침습적 시술이 가능하며 시술 후 빠른 일상생활이 가능합니다.
</p>
</div>
</section>
<section class="content2">
<div class="inner_wrap">
<h3><span>시술효과 </span>Effect</h3>
<ul>
<li><p>늘어지고 <br/>처진피부의 개선</p></li>
<li><p>탄력있는 <br/>바디 타이트닝</p></li>
<li><p>원하는 부위의 <br/>지방제거 <br/>운동만으로 부족한 <br/>체형 개선</p></li>
<li><p>2번 당겨주는 <br/>2단계 리프팅 효과</p></li>
</ul>
</div>
</section>
<section class="content3">
<div class="inner_wrap">
<h3><span>특징 </span>Unique</h3>
<ul class="box_list">
<li>
<div><img src="/image/web/check.svg" alt="check"/></div>
<p>2단계 탄력 바디 개선으로 편안합니다. </p>
</li>
<li>
<div><img src="/image/web/check.svg" alt="check"/></div>
<p>식약처가 허가한 비침습 방식의 안전한 시술입니다.</p>
</li>
<li>
<div><img src="/image/web/check.svg" alt="check"/></div>
<p>원하는 부위 시술이 가능, 늘어지고 처진 몸매에 탄력을!</p>
</li>
<li>
<div><img src="/image/web/check.svg" alt="check"/></div>
<p>시술 후 일상생활을 하는데 지장이 없습니다.</p>
</li>
</ul>
</div>
</section>
<section class="content4">
<div class="inner_wrap">
<h3><span>시술횟수 </span>Time</h3>
<ul class="box_list">
<li>
<div><img src="/image/web/time.png" alt="check"/></div>
<p>체형 분석후 의료진의 처방에 따라</p>
</li>
</ul>
</div>
</section>
<section class="content5">
<div class="inner_wrap">
<h3><span>주의사항 </span>Notice</h3>
<ul class="box_list">
<li>
<div><img src="/image/web/notice.png" alt="check"/></div>
<p>
통증과 부작용은 거의 없음<br/>
일시적으로 멍이 발생할수 있으나 자연스럽게 사라짐
</p>
</li>
</ul>
</div>
</section>
</div>
<!-- 튠바디 -->
<div id="tunebody">
<section class="main_img">
<img class="pc" src="/image/web/diet_main3_2.jpg" alt="diet"/>
<img class="mb" src="/image/web/Mdiet_main3_2.jpg" alt="diet"/>
<div class="text_box">
<div class="left_text_box">
<p class="sub_title">잃어버린 바디라인을 되찾다!</p>
<p class="title">튠바디</p>
<p class="sub_text">
튠은 시술 깊이를 조절하는 <br/>
선택적 치료기술을 통해 환자 개인에 맞는 <br/>
맞춤형 치료를 제공할 수 있습니다.
</p>
</div>
</div>
</section>
<section class="content1">
<div class="inner_wrap">
<p class="title">튠바디</p>
<p class="sub_title">지방세포막 파괴 효과! 튼살부터 셀룰라이트까지</p>
<p class="sub_text">
통증 없이 선택적으로 파괴하는 3D 입체초음파 레이저 지방분해시술
</p>
</div>
</section>
<section class="content2">
<div class="inner_wrap">
<h3><span>시술효과 </span>Effect</h3>
<ul>
<li><p>요요 현상 없이 <br/>오래도록 <br/>지속되는 바디 시술</p></li>
<li><p>팔뚝, 복부, 옆구리, <br/>종아리, 허벅지 등 <br/>바디 시술 가능</p></li>
<li><p>적은 통증과 <br/>자극으로 <br/>20분내에 완성되는 <br/>효과적인 시술</p></li>
<li><p>모든 부위에 <br/>시술 가능</p></li>
</ul>
</div>
</section>
<section class="content3">
<div class="inner_wrap">
<h3><span>특징 </span>Unique</h3>
<ul class="box_list">
<li>
<div><img src="/image/web/check.svg" alt="check"/></div>
<p>3D 입체 초음파 웨이브가 지방세포만을 파괴합니다.</p>
</li>
<li>
<div><img src="/image/web/check.svg" alt="check"/></div>
<p>지방세포막을 자극하고 파괴해 효과적인 비만치료가 가능!</p>
</li>
<li>
<div><img src="/image/web/check.svg" alt="check"/></div>
<p>원하는 부위 시술이 가능, 늘어지고 처진 몸매에 탄력을!</p>
</li>
<li>
<div><img src="/image/web/check.svg" alt="check"/></div>
<p>통증과 자극 최소화하고 20분만에 완성되는 시술입니다.</p>
</li>
</ul>
</div>
</section>
<section class="content4">
<div class="inner_wrap">
<h3><span>시술횟수 </span>Time</h3>
<ul class="box_list">
<li>
<div><img src="/image/web/time.png" alt="check"/></div>
<p>체형 분석후 의료진의 처방에 따라</p>
</li>
</ul>
</div>
</section>
<section class="content5">
<div class="inner_wrap">
<h3><span>주의사항 </span>Notice</h3>
<ul class="box_list">
<li>
<div><img src="/image/web/notice.png" alt="check"/></div>
<p>
바세린 알레르기가 있는 분은 시술 받기 어렵습니다.<br/>
시술 후 붉은기, 피부 특성에 따라 30분에서 1일 정도 지속
</p>
</li>
</ul>
</div>
</section>
</div>
</main>
</div>
</th:block>
<th:block layout:fragment="layoutContentScript">
</th:block>
</html>

108
src/main/resources/templates/web/diet/dietSapSelect.html Normal file
View File

@@ -0,0 +1,108 @@
<!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}">
<th:block layout:fragment="layoutCss">
</th:block>
<th:block layout:fragment="layoutContent">
<div class="same">
<aside>
<ul>
<li class="first"><a href="#arginine">아르기닌 주사</a></li>
</ul>
</aside>
<main>
<div id="arginine">
<section class="main_img">
<img class="pc" src="/image/web/diet_main4.jpg" alt="diet"/>
<img class="mb" src="/image/web/Mdiet_main4.jpg" alt="diet"/>
<div class="text_box">
<div class="left_text_box">
<p class="sub_title">산화질소 생성을 도와 비만탈출!</p>
<p class="title">아르기닌 주사</p>
<p class="sub_text">
체내 산화질소 생성을 자극하여 혈관을 확장합니다.<br/>
확장된 혈관은 순환이 잘되기 때문에<br/>
체지방감소, 근육 생성에 도움이 되는 주사제입니다.
</p>
</div>
</div>
</section>
<section class="content1">
<div class="inner_wrap">
<p class="title">아르기닌주사</p>
<p class="sub_title">지방분해를 돕는 아르기닌 성분을 주입하여 자연스럽게 지방분해를 촉진시킵니다.</p>
<p class="sub_text">
방송에 나와 많이 알려진 지방분해 촉진 주사! 지방세포의 지방을 지방산으로 분해해주는 건강한 지방제거 주사.
인체내에서 합성과정을 통해 산화질소(no)를 만들어내는 아미노산의 일종으로 인체내 필요한 산화질소 생성을 돕는 성분인 아르기닌을 주사하여 지방을 분해하는 효과를 얻는 시술입니다.
</p>
</div>
</section>
<section class="content2">
<div class="inner_wrap">
<h3><span>시술효과 </span>Effect</h3>
<ul>
<li><p>국소지방감소 <br/>기초대사량증가</p></li>
<li><p>혈액순환 촉진 <br/>손발저림완화</p></li>
<li><p>면역기능강화 <br/>항암효과</p></li>
<li><p>근육량증가 <br/>성기능향상</p></li>
</ul>
</div>
</section>
<section class="content3">
<div class="inner_wrap">
<h3><span>특징 </span>Unique</h3>
<ul class="box_list">
<li>
<div><img src="/image/web/check.svg" alt="check"/></div>
<p>산화질소 생성→ 아르기니의 대사, 지방분해효소 활성화!</p>
</li>
<li>
<div><img src="/image/web/check.svg" alt="check"/></div>
<p>L-아르기닌→ 평활근(내장근)이완 효소를 활성→ 혈관확장</p>
</li>
<li>
<div><img src="/image/web/check.svg" alt="check"/></div>
<p>이산화탄소와 노폐물 배출이 용이</p>
</li>
<li>
<div><img src="/image/web/check.svg" alt="check"/></div>
<p>L-아르기닌으로 생긴 산화질소가 혈액순환을 원활하게!</p>
</li>
</ul>
</div>
</section>
<section class="content4">
<div class="inner_wrap">
<h3><span>시술횟수 </span>Time</h3>
<ul class="box_list">
<li>
<div><img src="/image/web/time.png" alt="check"/></div>
<p>1주 간격으로 5~10회</p>
</li>
</ul>
</div>
</section>
<section class="content5">
<div class="inner_wrap">
<h3><span>주의사항 </span>Notice</h3>
<ul class="box_list">
<li>
<div><img src="/image/web/notice.png" alt="check"/></div>
<p>
개인의 특성에 따라 붓기가 생길수 있습니다.<br/>
시술 부위를 누르거나 문지르는등의 강한 자극은 피합니다.<br/>
시술 후 일주일 동안은 흡연, 음주를 삼갑니다.
</p>
</li>
</ul>
</div>
</section>
</div>
</main>
</div>
</th:block>
<th:block layout:fragment="layoutContentScript">
</th:block>
</html>

290
src/main/resources/templates/web/introduction/introductionHospitalSelect.html Normal file
View File

@@ -0,0 +1,290 @@
<!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}">
<th:block layout:fragment="layoutCss">
<link rel="stylesheet" href="/css/web/introduction/introductionHospitalSelect.css?v1.0">
</th:block>
<th:block layout:fragment="layoutContent">
<main>
<section class="main_img">
<div class="inner_wrap">
<img src="/image/web/introduction_main.png" alt="introduction"/>
<div class="text_box">
<p class="hashtag">#맞춤진료 #만족스러운결과</p>
<p class="title">
<span>MADE U 강남본점</span><br/>
Total Beauty<br class="mb"/> One Stop System
</p>
<p class="sub_text">
한 공간에서 고객 한분 한분께 자연스러운<br class="mb"/> 아름다움과 건강한 다이어트를 위해<br/>
항상 노력하는 함께하는<br class="mb"/> 조언자가 되어 드릴 것을 약속드립니다.
</p>
</div>
</div>
</section>
<section class="content1">
<div class="inner_wrap">
<div class="text_box">
<p class="hashtag">#차별화된 맞춤 플랜</p>
<p class="title">Looking Around<br/>MADE <span class="red">U</span></p>
<p class="sub_title">
쾌적하고 안락한 공간을 제공하는<br/>
<span>메이드유 강남본점</span>
</p>
<p class="sub_text">
깨끗한 공간, 친절한 상담을 제공<span class="pc">하겠습니다.</span>
</p>
</div>
<img src="/image/web/introduction_content1.png" alt="content1"/>
</div>
</section>
<section class="content2">
<div class="inner_wrap">
<p class="mb">쉬운다이어트 방법 없을까?<br/><span>MADE U 시그니처 프로그램</span></p>
<ul>
<li>
<img src="/image/web/introduction_content2-1.png" alt="content2-1"/>
<div class="text_box">
<p>One-On-One Customized Counseling</p>
<p class="sub_title">
MADE U 강남본점만의<br/>
<span>1:1 맞춤 상담</span>
</p>
<p class="sub_text">
고객님의 체형별 그리고 고민<br class="mb"/> 부위별 맞춤진료로,<br/>
숨겨진 아름다움을 찾아드립니다.
</p>
</div>
</li>
<li>
<img src="/image/web/introduction_content2-2.png" alt="content2-2"/>
<div class="text_box">
<p>Trademark Application</p>
<p class="sub_title">
MADE U 강남본점만의<br/>
<span>특허<span class="red">✓</span>상표 출원</span>
</p>
<p class="sub_text">
메이드유 강남본점에서 자체 개발한<br class="mb"/> 메쉬다 주사<br class="pc"/>
레시피의 뛰어난<br class="mb"/> 효과를 바탕으로 다수의<br/>
특허와 상표를 등록했습니다.
</p>
</div>
</li>
</ul>
</div>
</section>
<section class="content3">
<div class="inner_wrap">
<p>국내 고가명품 최다보유<br><span>MADE U</span> 프리미엄 장비 소개</p>
<div class="equipment-grid">
<div class="equipment-card">
<div class="equipment-image">
<img src="/image/equip/써마지.jpg" alt="써마지">
</div>
<div class="equipment-info">
<h3 class="equipment-name">써마지</h3>
<p class="equipment-desc">깊은 탄력과 리프팅을 동시에</p>
<p class="equipment-price"><!-- 1,800,000<span>부터</span> --></p>
</div>
</div>
<div class="equipment-card">
<div class="equipment-image">
<img src="/image/equip/울쎄라.jpg" alt="울쎄라">
</div>
<div class="equipment-info">
<h3 class="equipment-name">울쎄라</h3>
<p class="equipment-desc">깊은 탄력과 리프팅을 동시에</p>
<p class="equipment-price"><!-- 400,000<span>부터</span> --></p>
</div>
</div>
<div class="equipment-card">
<div class="equipment-image">
<img src="/image/equip/티타늄.jpg" alt="티타늄리프팅">
</div>
<div class="equipment-info">
<h3 class="equipment-name">티타늄리프팅</h3>
<p class="equipment-desc">깊은 탄력과 리프팅을 동시에</p>
<p class="equipment-price"><!-- 600,000<span>부터</span> --></p>
</div>
</div>
<div class="equipment-card">
<div class="equipment-image">
<img src="/image/equip/튠바디.jpg" alt="튠바디">
</div>
<div class="equipment-info">
<h3 class="equipment-name">튠바디</h3>
<p class="equipment-desc">깊은 탄력과 리프팅을 동시에</p>
<p class="equipment-price"><!-- 150,000<span>부터</span> --></p>
</div>
</div>
<!-- 2번째 행 -->
<div class="equipment-card">
<div class="equipment-image">
<img src="/image/equip/튠페이스.jpg" alt="튠페이스">
</div>
<div class="equipment-info">
<h3 class="equipment-name">튠페이스</h3>
<p class="equipment-desc">깊은 탄력과 리프팅을 동시에</p>
<p class="equipment-price"><!-- 400,000<span>부터</span> --></p>
</div>
</div>
<div class="equipment-card">
<div class="equipment-image">
<img src="/image/equip/울핏.jpg" alt="울핏">
</div>
<div class="equipment-info">
<h3 class="equipment-name">울핏</h3>
<p class="equipment-desc">깊은 탄력과 리프팅을 동시에</p>
<p class="equipment-price"><!-- 50,000<span>부터</span> --></p>
</div>
</div>
<div class="equipment-card">
<div class="equipment-image">
<img src="/image/equip/포텐자.jpg" alt="포텐자">
</div>
<div class="equipment-info">
<h3 class="equipment-name">포텐자</h3>
<p class="equipment-desc">깊은 탄력과 리프팅을 동시에</p>
<p class="equipment-price"><!-- 150,000<span>부터</span> --></p>
</div>
</div>
<div class="equipment-card">
<div class="equipment-image">
<img src="/image/equip/인모드.jpg" alt="인모드">
</div>
<div class="equipment-info">
<h3 class="equipment-name">인모드</h3>
<p class="equipment-desc">깊은 탄력과 리프팅을 동시에</p>
<p class="equipment-price"><!-- 100,000<span>부터</span> --></p>
</div>
</div>
<!-- 3번째 행 -->
<div class="equipment-card">
<div class="equipment-image">
<img src="/image/equip/슈링크유니버스.jpg" alt="슈링크유니버스">
</div>
<div class="equipment-info">
<h3 class="equipment-name">슈링크유니버스</h3>
<p class="equipment-desc">깊은 탄력과 리프팅을 동시에</p>
<p class="equipment-price"><!-- 89,000<span>부터</span> --></p>
</div>
</div>
<div class="equipment-card">
<div class="equipment-image">
<img src="/image/equip/바디고주파테라피.jpg" alt="바디고주파테라피">
</div>
<div class="equipment-info">
<h3 class="equipment-name">바디고주파테라피</h3>
<p class="equipment-desc">깊은 탄력과 리프팅을 동시에</p>
<p class="equipment-price"><!-- 100,000<span>부터</span> --></p>
</div>
</div>
<div class="equipment-card">
<div class="equipment-image">
<img src="/image/equip/리포덤.jpg" alt="리포덤">
</div>
<div class="equipment-info">
<h3 class="equipment-name">리포덤</h3>
<p class="equipment-desc">깊은 탄력과 리프팅을 동시에</p>
<p class="equipment-price"><!-- 50,000<span>부터</span> --></p>
</div>
</div>
<div class="equipment-card">
<div class="equipment-image">
<img src="/image/equip/라비앙.jpg" alt="라비앙">
</div>
<div class="equipment-info">
<h3 class="equipment-name">라비앙</h3>
<p class="equipment-desc">깊은 탄력과 리프팅을 동시에</p>
<p class="equipment-price"><!-- 165,000<span>부터</span> --></p>
</div>
</div>
</div>
</div>
</section>
<section class="content4">
<div class="inner_wrap">
<p>
한 공간에서 고객 한분 한분께 자연스러운 아름다움과<br class="mb"/> 건강한 다이어트를 위해 항상 노력하는<br/>
<span>Total Beauty One Stop System</span>
</p>
<ul>
<li class="first">
<div class="text_box">
<p>
<span>
자연스러운 아름다움과<br/>
건강한 다이어트
</span>
</p>
<p>
메이드유는 <span>Total Beauty One Stop System</span>으로<br class="pc"/>
한 공간에서 고객 한분 <br class="mb"/>한분께 자연스러운 아름다움과<br/>
건강한 다이어트를 위해 항상 노력하는 함께하는 조언자가<br class="pc"/>
되어 드릴 것을 약속드립니다.
</p>
</div>
<img class="pc" src="/image/web/introduction_content4-1.jpg" alt="introduction_content4-1"/>
<img class="mb" src="/image/web/Mintroduction_content4-1.jpg" alt="introduction_content4-1"/>
</li>
<li class="red_box">
<div class="text_box">
<p>
<span>고객을 가족으로 생각하는 마음으로<br class="pc"/>정직한 시술, <br class="mb"/>만족할 수 있는 결과,</span><br/>
더 나은 감동을 선사하기 위해<br/>
끊임없이 노력하겠습니다.
</p>
<p>
메이드유는 <span>전국, 해외에서 찾아오는 비만센터와<br class="pc"/> 프리미멈 명품
장비 보유 및 장비 최다 보유</span>와 엘란쎄, <br class="pc"/>스컬트라 콜라겐 볼륨
전국 3대 병원인 쁘띠 센터로 <br class="pc"/>구분되어 고객에 맞춰 운영되고
있습니다.
</p>
</div>
<img class="pc" src="/image/web/introduction_content4-2.jpg" alt="introduction_content4-2"/>
<img class="mb" src="/image/web/Mintroduction_content4-2.jpg" alt="introduction_content4-2"/>
</li>
<li>
<div class="text_box">
<p>
No Pain 통증 없이<br/>
No Bruise 멍 없이<br/>
No Swelling 붓기 없이<br/>
<span>3No 의료서비스를 지향</span>
</p>
<p>
모든 제품은 정품, 정량, 정품 장비 사용을 원칙으로 안전을 <br class="pc"/>
최우선으로 하고 있으며, 모든 시술은 <span>No Pain, No Bruise, <br class="pc"/>
No Swelling라는 3No 의료서비스를 지향</span>합니다. <br class="pc"/>
앞으로도 고품질의 관리와 서비스를 받을 수 있도록 노력하며 <br class="pc"/>
사소한 불편까지 읽어주는 세심한 배려, 마음까지 읽는 서비스로<br class="pc"/>
무한 감동을 드릴 것을 약속합니다.
</p>
</div>
<img class="pc" src="/image/web/introduction_content4-3.jpg" alt="introduction_content4-3"/>
<img class="mb" src="/image/web/Mintroduction_content4-3.jpg" alt="introduction_content4-3"/>
</li>
</ul>
</div>
</section>
</main>
</th:block>
<th:block layout:fragment="layoutContentScript">
</th:block>
</html>

120
src/main/resources/templates/web/introduction/introductionPriceSelect.html Normal file
View File

@@ -0,0 +1,120 @@
<!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}">
<th:block layout:fragment="layoutCss">
<link rel="stylesheet" href="/css/web/introduction/introductionPriceSelect.css?v1.0">
</th:block>
<th:block layout:fragment="layoutContent">
<main>
<section class="content1">
<div class="inner_wrap">
<div class="text_box">
<p class="hashtag">#맞춤진료 #합리적인 비용</p>
<p class="title">
<span>MADE U 강남본점</span><br/>
비급여 안내
</p>
<p class="sub_text">
고객님이 원하시는 아름다움을 찾기<br class="mb"/> 위해,<br class="pc"/>
고객님별 그리고 고민하시는<br class="mb"/> 부위별 맞춤 진료를 하겠습니다.
</p>
</div>
<div class="table_box">
<img class="mb" src="/image/web/price.png" alt="price"/>
<table class="pc">
<tr class="thead">
<td colspan="2">분류</td>
<td colspan="2">항목</td>
<td colspan="2">진료 비용 등<br class="mb"/>(단위:원)</td>
<td rowspan="2">특이사항</td>
<td rowspan="2">비고</td>
</tr>
<tr class="sub_thead">
<td>중분류</td>
<td>소분류</td>
<td>코드</td>
<td>명칭</td>
<td>구분</td>
<td>비용</td>
</tr>
<tr>
<td>기본진료료</td>
<td>기본진료료</td>
<td></td>
<td>기본진료료</td>
<td></td>
<td>10,000</td>
<td></td>
<td></td>
</tr>
<tr>
<td>제증명수수료</td>
<td>제증명수수료</td>
<td></td>
<td>진단서</td>
<td></td>
<td>30,000</td>
<td></td>
<td></td>
</tr>
<tr>
<td>제증명수수료</td>
<td>제증명수수료</td>
<td></td>
<td>진료확인서</td>
<td></td>
<td>10,000</td>
<td></td>
<td></td>
</tr>
<tr>
<td>제증명수수료</td>
<td>제증명수수료</td>
<td></td>
<td>통원확인서</td>
<td></td>
<td>10,000</td>
<td></td>
<td></td>
</tr>
<tr>
<td>제증명수수료</td>
<td>제증명수수료</td>
<td></td>
<td>의무기록사본</td>
<td></td>
<td>10,000</td>
<td>진료기록부</td>
<td></td>
</tr>
<tr>
<td>제증명수수료</td>
<td>제증명수수료</td>
<td></td>
<td>의무기록사본 추가</td>
<td></td>
<td>1,000</td>
<td>진료기록부</td>
<td>장당</td>
</tr>
<tr>
<td>제증명수수료</td>
<td>제증명수수료</td>
<td></td>
<td>제증명발급</td>
<td></td>
<td>1,000</td>
<td>처방전 포함</td>
<td>장당</td>
</tr>
</table>
</div>
</div>
</section>
</main>
</th:block>
<th:block layout:fragment="layoutContentScript">
</th:block>
</html>

131
src/main/resources/templates/web/introduction/introductionStaffSelect.html Normal file
View File

@@ -0,0 +1,131 @@
<!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}">
<th:block layout:fragment="layoutCss">
<link rel="stylesheet" href="/css/web/introduction/introductionStaffSelect.css?v1.0">
</th:block>
<th:block layout:fragment="layoutContent">
<main>
<section class="main_img">
<!-- 2025.09.03 요구사항으로 인한 주석처리 byPJS <img src="/image/web/staff_main.png" alt="staff_main"/> -->
</section>
<section class="content1">
<div class="inner_wrap">
<div class="captain_box">
<img class="pc" src="/image/web/staff_cont1.jpg" alt="captain" />
<img class="mb" src="/image/web/Mstaff_cont1.jpg" alt="captain" />
<div class="text_box">
<p class="sub_title">메이드유 강남본점 <span>대표원장 박재우</span></p>
<p class="title">Specialist</p>
<p class="sub_text">
메이드유 강남본점의 전문의료진은<br class="pc"/>
아름다움 극대화를 <br class="mb"/>위해 끊임없이 연구하고 노력합니다.
</p>
</div>
</div>
</div>
</section>
<section class="content2">
<div class="inner_wrap">
<p>본연의 장점을 살려주는 것이 변화의 시작!<br/><span>MADE U 전문의료진 소개</span></p>
<ul>
<li>
<img src="/image/web/profile1.jpg" alt="profile"/>
<div class="text_box">
<p class="field">
<span>비만</span>
</p>
<p class="name">
<span class="name">박재우</span>
대표원장 / <span>Chief Medical Director</span>
</p>
<p class="last">
<span>Profile</span><br/>
현&#41; 메이드유의원 프랜차이즈 대표원장 <br/>
현&#41; 메이드유의원 강남본점 대표원장 <br/>
현&#41; 메이드유의원 비만센터 대표원장 <br/>
대한미용외과학회 회원 <br/>
대한미용성형레이저의학회 회원 <br/>
대한비만치료학회 회원
</p>
</div>
</li>
<li>
<img src="/image/web/profile2.png" alt="profile"/>
<div class="text_box">
<p class="field">
<span>피부</span>
<span>쁘띠</span>
<span>제모</span>
</p>
<p class="name">
<span class="name">김종효</span>
대표원장 / <span>Medical Director</span>
</p>
<p class="last">
<span>Profile</span><br/>
현&#41; 메이드유의원 강남본점 원장 <br/>
전&#41; 메이드유의원 명동점 대표원장 <br/>
전&#41; 톡스앤필 홍대신촌 원장 <br/>
대한레이저피부모발학회 회원 <br/>
대한미용외과학회 회원 <br/>
한국미용성형학회 회원
</p>
</div>
</li>
<!-- <li> 2025.09.03 요구사항으로 인한 주석처리 byPJS
<img src="/image/web/profile3.png" alt="profile"/>
<div class="text_box">
<p class="field">
<span>비만</span>
<span>쁘띠</span>
<span>피부</span>
<span>제모</span>
</p>
<p class="name">
<span class="name">신다은</span>
원장 / <span>Medical Director</span>
</p>
<p class="last">
<span>Profile</span><br/>
현&#41; 메이드유의원 강남본점 원장<br/>
대한레이저피부모발학회 회원<br/>
대한미용외과학회 회원<br/>
대한리프팅연구회 회원<br/>
한국미용성형학회 회원
</p>
</div>
</li> -->
<li>
<img src="/image/web/profile4.png" alt="profile"/>
<div class="text_box">
<p class="field">
<span>피부</span>
<span>쁘띠</span>
<span>제모</span>
</p>
<p class="name">
<span class="name">김준혁</span>
원장 / <span>Medical Director</span>
</p>
<p class="last">
<span>Profile</span><br/>
현&#41; 메이드유의원 강남본점 원장<br/>
전&#41; JD클리닉 신사점 원장<br/>
전&#41; 팝루미에의원 강남점 원장<br/>
대한리프팅연구회 회원<br/>
대한비만치료학회 회원<br/>
대한미용성형레이저의학회 회원
</p>
</div>
</li>
</ul>
</div>
</section>
</main>
</th:block>
<th:block layout:fragment="layoutContentScript">
</th:block>
</html>

98
src/main/resources/templates/web/introduction/introductionWaySelect.html Normal file
View File

@@ -0,0 +1,98 @@
<!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}">
<th:block layout:fragment="layoutCss">
<link rel="stylesheet" href="/css/web/introduction/introductionWaySelect.css?v1.0">
</th:block>
<th:block layout:fragment="layoutContent">
<main>
<section class="main_img">
<ul>
<li><img src="/image/web/introduction_way_main1.jpg" alt="way"/></li>
<li><img src="/image/web/introduction_way_main2.jpg" alt="way"/></li>
<li><img src="/image/web/introduction_way_main3.jpg" alt="way"/></li>
</ul>
</section>
<section class="content1">
<div class="inner_wrap">
<p>7호선 논현역 / 신분당선 논현역 3번 출구<br/><span>MADE U 강남본점 위치 안내</span></p>
<div class="top">
<div class="img_box img_left">
<img src="/image/web/introduction_way_con1_1.png" alt="way"/>
</div>
<div class="img_box img_right">
<img src="/image/web/introduction_way_con1_2.png" alt="way"/>
</div>
<div class="text_box">
<p>도보 <span>2분 거리</span></p>
</div>
</div>
<div class="btm">
<ul>
<li class="red">논현역 <br class="mb"/>3번 출구</li>
<li>뚜레쥬르 <br class="mb"/>카페</li>
<li>HOLLYS <br class="mb"/>COFFEE</li>
<li class="red">메이드유 <br class="mb"/>빌딩</li>
</ul>
</div>
</div>
</section>
<section class="content2">
<div class="inner_wrap">
<!-- * 카카오맵 - 지도퍼가기 -->
<!-- 1. 지도 노드 -->
<div id="daumRoughmapContainer1757836409022" class="root_daum_roughmap root_daum_roughmap_landing"></div>
<!--
2. 설치 스크립트
* 지도 퍼가기 서비스를 2개 이상 넣을 경우, 설치 스크립트는 하나만 삽입합니다.
-->
<script charset="UTF-8" class="daum_roughmap_loader_script" src="https://ssl.daumcdn.net/dmaps/map_js_init/roughmapLoader.js"></script>
<!-- 3. 실행 스크립트 -->
<script charset="UTF-8">
new daum.roughmap.Lander({
"timestamp" : "1757836409022",
"key" : "wao8xnsxkey",
"mapWidth" : "1280",
"mapHeight" : "900"
}).render();
</script>
</div>
</section>
<section class="content4">
<div class="inner_wrap">
<ul>
<li><img src="/image/web/introduction_way_con4_1.jpg" alt="way"></li>
<li><img src="/image/web/introduction_way_con4_2.jpg" alt="way"></li>
<li class="pc"><img src="/image/web/introduction_way_con4_3.jpg" alt="way"></li>
</ul>
<div>
<div class="left_box">
<p>Contact <span class="red">MADE</span> U</p>
<p>
정보를 남겨주시면, 빠르게 확인 후 연락드리겠습니다.<br/>
다이어트에 대한 고민을 메이드유 강남본점과 상의하세요
</p>
</div>
<div class="right_box">
<p>빠른 상담 예약 <span>02.547.4711</span></p>
<button onclick="window.open('https://booking.naver.com/booking/6/bizes/162191')">
<!-- <img class="naver_img" src="/image/web/naver.svg" alt="naver"/> -->
<span>네이버 예약 </span> 바로가기
<img src="/image/web/arrow2.svg" alt="arrow"/>
</button>
</div>
</div>
</div>
</section>
</main>
</th:block>
<th:block layout:fragment="layoutContentScript">
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=5b8e8d554e06d9b6cd5f1fb628ed301a&libraries=services"></script>
<script src="/js/web/introduction/introductionWaySelect.js"></script>
</th:block>
</html>

27
src/main/resources/templates/web/layout/layout.html Normal file
View File

@@ -0,0 +1,27 @@
<!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">
<head>
<th:block th:replace="/web/layout/layoutHead :: layoutHead"></th:block>
</head>
<body>
<!-- 상단 스크립트 타임리프 변수 선언 -->
<th:block layout:fragment="layout_top_script"></th:block>
<div class="project_wrap">
<th:block th:replace="/web/layout/layoutHeader :: layoutHeader"></th:block>
<!-- 오른쪽내용 -->
<th:block layout:fragment="layoutContent"></th:block>
<th:block th:replace="/web/layout/layoutFooter :: layoutFooter"></th:block>
</div>
<!-- 모달 -->
<th:block layout:fragment="layoutContentModal"></th:block>
<!-- 스크립트 -->
<th:block layout:fragment="layoutContentScript"></th:block>
</body>
</html>

25
src/main/resources/templates/web/layout/layoutFooter.html Normal file
View File

@@ -0,0 +1,25 @@
<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
<th:block th:fragment="layoutFooter">
<!-- footer_section -->
<footer>
<div class="inner_wrap">
<div class="text_box">
<img class="fLogo" src="/image/logo_121x33_W.png" alt="logo"/>
<a href="/webaccept/acceptSite.do">사이트 이용약관</a>
<a href="/webaccept/acceptPrivacy.do">개인정보처리방침</a>
<ul>
<li>상호명 : 메이드유의원&emsp;|&emsp;</li>
<li>서울특별시 강남구 강남대로 516, 2,3,4층(논현동, 메이드유빌딩)&emsp;|&emsp;</li>
<li>대표 : 박재우&emsp;|&emsp;</li>
<li>전화 : 02-547-4711&emsp;|&emsp;</li>
<li>팩스 : 070-5226-3771&emsp;|&emsp;</li>
<li>사업자등록번호 : 490-12-01321&emsp;|&emsp;</li>
<li>E-mail : imadeu@naver.com</li>
</ul>
</div>
</div>
</footer>
</th:block>
</html>

55
src/main/resources/templates/web/layout/layoutHead.html Normal file
View File

@@ -0,0 +1,55 @@
<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<th:block th:fragment="layoutHead">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="keyword" content="HTML, meta, tag, element, reference">
<meta name="author" content="NTSOFT">
<meta name="description" content={props.description} data-react-helmet="true" />
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta http-equiv="Cache-Control" content="No-Cache" />
<meta http-equiv="pragma" content="No-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE10">
<!-- sns미리보기 -->
<meta property="og:type" content="website">
<!-- <meta property="og:url" content="https://ntsoft.kr/"> -->
<meta property="og:image" content="">
<meta property="og:title" content="메이드유">
<meta property="og:description" content="설명문구">
<!-- 사이트등록및소유확인 -->
<meta name="naver-site-verification" content="" />
<title>메이드유</title>
<!-- 파비콘 -->
<link rel="shortcut icon" href="" type="image/x-icon">
<link rel="icon" href="" type="image/x-icon">
<!-- 적용css -->
<link rel="stylesheet" href="/css/normalize.min.css">
<link rel="stylesheet" href="/css/web/header.css">
<link rel="stylesheet" href="/css/web/footer.css">
<link rel="stylesheet" href="/css/web/modal.css">
<link rel="stylesheet" href="/css/web/modal_styles.css">
<link rel="stylesheet" href="/css/web/common.css">
<link rel="stylesheet" href="/css/web/font.css">
<link rel="stylesheet" href="/css/web/jquery-ui.css">
<link rel="stylesheet" href="/css/web/swiper-bundle.min.css">
<th:block layout:fragment="layoutCss"></th:block>
<!-- 베이스script -->
<script src="/js/jquery.min.js"></script>
<!-- 적용script -->
<script src="/js/jquery-ui.js"></script>
<script src="/js/swiper-bundle.min.js"></script>
<script src="/js/web/common.js"></script>
</th:block>
</html>

99
src/main/resources/templates/web/layout/layoutHeader.html Normal file
View File

@@ -0,0 +1,99 @@
<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
<th:block th:fragment="layoutHeader">
<th:block th:replace="/web/layout/layoutModal :: layoutModal"></th:block>
<link rel="stylesheet" href="/css/web/quick_menu/quick_menu.css">
<script>
// 디바이스 감지 함수
function isMobileDevice() {
return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
|| window.innerWidth <= 768;
}
function movePetitCenter(){
window.location.href="https://petit.madeu.co.kr/index";
}
// 카카오톡 상담 함수 (모든 디바이스에서 동작)
function openKakaoTalk() {
window.open('https://pf.kakao.com/_puZExd', '_blank');
}
// 전화걸기 함수 (모바일에서만 동작)
function makePhoneCall() {
if (isMobileDevice()) {
// 모바일에서만 전화걸기
window.location.href = 'tel:02-547-4711';
} else {
// 데스크톱에서는 동작 안함 (필요시 알림 추가)
console.log('전화걸기는 모바일에서만 가능합니다.');
}
}
// 모바일 여부 확인 함수
function isMobile() {
return window.innerWidth <= 768; // 필요 시 기준 너비 조정
}
// 현재 경로가 /index인지 확인
function isIndexPage() {
return window.location.pathname === '/index'; // '/index.html'인 경우 조정 필요
}
// 퀵메뉴 표시/숨김 함수
function toggleQuickMenu() {
const quickMenu = document.querySelector('.quick-menu-simple');
if (!quickMenu) return; // 요소가 없으면 종료
if (isMobile()) {
// 모바일: /index일 때만 표시
quickMenu.style.display = isIndexPage() ? '' : 'none';
} else {
// 데스크톱: 항상 표시
quickMenu.style.display = '';
}
}
// 페이지 로드와 리사이즈 이벤트 연결
window.addEventListener('load', toggleQuickMenu);
window.addEventListener('resize', toggleQuickMenu);
</script>
<header>
<div class="inner_wrap">
<button class="mb mbmenu" onClick="openNav()"></button>
<a class="logo" href="/index"><img src="/image/logo_199x54.png" alt="logo"></a>
<nav>
<ul class="depth1">
<li th:each="menu : ${menuList}">
<a class="mmenu" th:href="${menu.menuUrl}" th:text="${menu.menuName}"></a>
<ul class="depth2" th:if="${#lists.size(menu.children) > 0}">
<li></li>
<li th:each="subMenu : ${menu.children}">
<a th:href="${subMenu.menuUrl}" th:text="${subMenu.menuName}"></a>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</header>
<!-- 퀵메뉴 -->
<div class="quick-menu-simple">
<div class="quick-item" onclick="movePetitCenter()">
<img src="/image/quick_menu/petit_center.png" alt="쁘띠센터">
</div>
<!-- 카카오톡 상담 -->
<div class="quick-item kakao-consult" onclick="openKakaoTalk()">
<img src="/image/quick_menu/kakao_consultation.png" alt="카카오톡 상담">
</div>
<!-- 전화 상담 -->
<div class="quick-item phone-consult" onclick="makePhoneCall()">
<div class="phone-default">
<img src="/image/quick_menu/call_consultation.png" alt="전화 상담">
</div>
<div class="phone-number">
<img src="/image/quick_menu/madeu_phone_number.png" alt="전화 상담">
</div>
</div>
</div>
<script src="/js/web/layout/layoutHeader.js?ver=1"></script>
</th:block>
</html>

351
src/main/resources/templates/web/layout/layoutModal.html Normal file
View File

@@ -0,0 +1,351 @@
<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
<th:block th:fragment="layoutModal">
<div id="modalBox"></div>
<script>
<!-- success Modal 셋팅 -->
function fn_setSuccessModal(targetId){
let successModalHTML = '';
successModalHTML += '<div class="success popupColored">';
successModalHTML += ' <div class="modal modal_success" id="'+targetId+'" role="dialog" style="padding-right: 17px;">';
successModalHTML += ' <div class="modal-dialog">';
successModalHTML += ' <div class="modal-content">';
successModalHTML += ' <div class="modal-header">';
successModalHTML += ' <div class="modal-name successTextBox">';
successModalHTML += ' <svg xmlns="http://www.w3.org/2000/svg" width="52.012" height="52.012" viewBox="0 0 52.012 52.012">';
successModalHTML += ' <g id="그룹_1" data-name="그룹 1" transform="translate(-41 -25)">';
successModalHTML += ' <g id="patch-check" transform="translate(41.751 25.501)">';
successModalHTML += ' <path id="패스_1" data-name="패스 1" d="M22.406,6.477a1.625,1.625,0,0,1,0,2.3L12.654,18.53a1.625,1.625,0,0,1-2.3,0L5.476,13.654a1.627,1.627,0,1,1,2.3-2.3L11.5,15.081l8.6-8.6a1.625,1.625,0,0,1,2.3,0Z" transform="translate(11.25 13.5)" fill-rule="evenodd"/>';
successModalHTML += ' </g>';
successModalHTML += ' <g id="pause-circle" transform="translate(41 25)">';
successModalHTML += ' <path id="패스_10" data-name="패스 10" d="M26.006,48.761A22.755,22.755,0,1,1,48.761,26.006,22.755,22.755,0,0,1,26.006,48.761Zm0,3.251A26.006,26.006,0,1,0,0,26.006,26.006,26.006,0,0,0,26.006,52.012Z"/>';
successModalHTML += ' </g>';
successModalHTML += ' </g>';
successModalHTML += ' </svg>';
successModalHTML += ' <p class="title"><!-- 문구입력 --></p>';
successModalHTML += ' <p class="text"><!-- 문구입력 --></p>';
successModalHTML += ' </div>';
successModalHTML += ' </div>';
successModalHTML += ' <div class="modal-footer">';
successModalHTML += ' <div class="btn-box">';
successModalHTML += ' <button type="button" class="btn btnCommon btn-Success" style="outline:none;">확인</button>';
successModalHTML += ' </div>';
successModalHTML += ' </div>';
successModalHTML += ' </div>';
successModalHTML += ' </div>';
successModalHTML += ' </div>';
successModalHTML += '</div>';
$("#modalBox").append(successModalHTML);
}
<!-- danger Modal 셋팅 -->
function fn_setDangerModal(targetId){
let dangerModalHTML = '';
dangerModalHTML += '<div class="danger popupColored">';
dangerModalHTML += ' <div class="modal modal_danger" id="'+targetId+'" role="dialog" style="padding-right: 17px;">';
dangerModalHTML += ' <div class="modal-dialog">';
dangerModalHTML += ' <div class="modal-content">';
dangerModalHTML += ' <div class="modal-header">';
dangerModalHTML += ' <div class="modal-name dangerTextBox">';
dangerModalHTML += ' <svg xmlns="http://www.w3.org/2000/svg" width="52.012" height="52.012" viewBox="0 0 52.012 52.012">';
dangerModalHTML += ' <g id="그룹_3" data-name="그룹 3" transform="translate(-301 -25)">';
dangerModalHTML += ' <path id="패스_5" data-name="패스 5" d="M13.627,5.5a1.625,1.625,0,0,1,1.625,1.625V12h4.876a1.625,1.625,0,0,1,0,3.251H15.252v4.876a1.625,1.625,0,0,1-3.251,0V15.252H7.125a1.625,1.625,0,0,1,0-3.251H12V7.125A1.625,1.625,0,0,1,13.627,5.5Z" transform="translate(308.222 51.493) rotate(-45)" fill-rule="evenodd"/>';
dangerModalHTML += ' <g id="pause-circle" transform="translate(301 25)">';
dangerModalHTML += ' <path id="패스_10" data-name="패스 10" d="M26.006,48.761A22.755,22.755,0,1,1,48.761,26.006,22.755,22.755,0,0,1,26.006,48.761Zm0,3.251A26.006,26.006,0,1,0,0,26.006,26.006,26.006,0,0,0,26.006,52.012Z"/>';
dangerModalHTML += ' </g>';
dangerModalHTML += ' </g>';
dangerModalHTML += ' </svg>';
dangerModalHTML += ' <p class="title"><!-- 문구입력 --></p>';
dangerModalHTML += ' <p class="text"><!-- 문구입력 --></p>';
dangerModalHTML += ' </div>';
dangerModalHTML += ' </div>';
dangerModalHTML += ' <div class="modal-footer">';
dangerModalHTML += ' <div class="btn-box">';
dangerModalHTML += ' <button type="button" class="btn btnCommon btn-Success" style="outline:none;">확인</button>';
dangerModalHTML += ' </div>';
dangerModalHTML += ' </div>';
dangerModalHTML += ' </div>';
dangerModalHTML += ' </div>';
dangerModalHTML += ' </div>';
dangerModalHTML += '</div>';
$("#modalBox").append(dangerModalHTML);
}
<!-- warning Modal 셋팅 -->
function fn_setWarningModal(targetId){
let warningModalHTML = '';
warningModalHTML += '<div class="warning popupColored">';
warningModalHTML += ' <div class="modal modal_warning" id="'+targetId+'" role="dialog" style="padding-right: 17px;">';
warningModalHTML += ' <div class="modal-dialog">';
warningModalHTML += ' <div class="modal-content">';
warningModalHTML += ' <div class="modal-header">';
warningModalHTML += ' <div class="modal-name warningTextBox">';
warningModalHTML += ' <svg xmlns="http://www.w3.org/2000/svg" width="52.012" height="52.012" viewBox="0 0 52.012 52.012">';
warningModalHTML += ' <g id="그룹_2" data-name="그룹 2" transform="translate(-171 -25)">';
warningModalHTML += ' <path id="패스_3" data-name="패스 3" d="M7,26.767a3.251,3.251,0,1,1,3.251,3.251A3.251,3.251,0,0,1,7,26.767ZM7.323,7.246a2.942,2.942,0,1,1,5.851,0l-1.138,11.4a1.8,1.8,0,0,1-3.576,0Z" transform="translate(186.999 34.005)"/>';
warningModalHTML += ' <g id="pause-circle" transform="translate(171 25)">';
warningModalHTML += ' <path id="패스_10" data-name="패스 10" d="M26.006,48.761A22.755,22.755,0,1,1,48.761,26.006,22.755,22.755,0,0,1,26.006,48.761Zm0,3.251A26.006,26.006,0,1,0,0,26.006,26.006,26.006,0,0,0,26.006,52.012Z"/>';
warningModalHTML += ' </g>';
warningModalHTML += ' </g>';
warningModalHTML += ' </svg>';
warningModalHTML += ' <p class="title"><!-- 문구입력 --></p>';
warningModalHTML += ' <p class="text"><!-- 문구입력 --></p>';
warningModalHTML += ' </div>';
warningModalHTML += ' </div>';
warningModalHTML += ' <div class="modal-footer">';
warningModalHTML += ' <div class="btn-box">';
//warningModalHTML += ' <button type="button" class="btn btnCommon btn-cancel" style="outline:none;">취소</button>';
warningModalHTML += ' <button type="button" class="btn btnCommon btn-Success" style="outline:none;">확인</button>';
warningModalHTML += ' </div>';
warningModalHTML += ' </div>';
warningModalHTML += ' </div>';
warningModalHTML += ' </div>';
warningModalHTML += ' </div>';
warningModalHTML += '</div>';
$("#modalBox").append(warningModalHTML);
}
<!-- info Modal 셋팅 -->
function fn_setInfoModal(targetId){
let infoModalHTML = '';
infoModalHTML += '<div class="info popupColored">';
infoModalHTML += ' <div class="modal modal_info" id="'+targetId+'"role="dialog" style="padding-right: 17px;">';
infoModalHTML += ' <div class="modal-dialog">';
infoModalHTML += ' <div class="modal-content">';
infoModalHTML += ' <div class="modal-header">';
infoModalHTML += ' <div class="modal-name infoTextBox">';
infoModalHTML += ' <svg xmlns="http://www.w3.org/2000/svg" width="52.012" height="52.012" viewBox="0 0 52.012 52.012">';
infoModalHTML += ' <g id="그룹_4" data-name="그룹 4" transform="translate(-431 -25)">';
infoModalHTML += ' <g id="그룹_4-2" data-name="그룹 4" transform="translate(-1.004 0.625)">';
infoModalHTML += ' <path id="패스_7" data-name="패스 7" d="M12.664,23.33c1.092,0,1.638-.78,1.8-2.038.13-1.736.644-2.649,2.753-4.1a7.385,7.385,0,0,0,3.41-6.456A6.939,6.939,0,0,0,13.275,3.5C9.96,3.5,7.45,5.1,6.449,7.693A5.559,5.559,0,0,0,6,9.936c0,1.278.66,2.08,1.772,2.08.884,0,1.479-.478,1.833-1.658.514-1.924,1.707-2.974,3.491-2.974a3.285,3.285,0,0,1,3.348,3.524c0,1.83-.676,2.877-2.672,4.307a6.041,6.041,0,0,0-3.01,5.331v.361C10.763,22.3,11.439,23.33,12.664,23.33Z" transform="translate(445.004 32.875)"/>';
infoModalHTML += ' <path id="패스_9" data-name="패스 9" d="M7,13.251A3.251,3.251,0,1,1,10.252,16.5,3.251,3.251,0,0,1,7,13.251Z" transform="translate(447.258 47.505)"/>';
infoModalHTML += ' </g>';
infoModalHTML += ' <g id="pause-circle" transform="translate(431 25)">';
infoModalHTML += ' <path id="패스_10" data-name="패스 10" d="M26.006,48.761A22.755,22.755,0,1,1,48.761,26.006,22.755,22.755,0,0,1,26.006,48.761Zm0,3.251A26.006,26.006,0,1,0,0,26.006,26.006,26.006,0,0,0,26.006,52.012Z"/>';
infoModalHTML += ' </g>';
infoModalHTML += ' </g>';
infoModalHTML += ' </svg>';
infoModalHTML += ' <p class="title"><!-- 문구입력 --></p>';
infoModalHTML += ' <p class="text"><!-- 문구입력 --></p>';
infoModalHTML += ' </div>';
infoModalHTML += ' </div>';
infoModalHTML += ' <div class="modal-footer">';
infoModalHTML += ' <div class="btn-box">';
infoModalHTML += ' <button type="button" class="btn btnCommon btn-cancel" style="outline:none;">취소</button>';
infoModalHTML += ' <button type="button" class="btn btnCommon btn-Success" style="outline:none;">확인</button>';
infoModalHTML += ' </div>';
infoModalHTML += ' </div>';
infoModalHTML += ' </div>';
infoModalHTML += ' </div>';
infoModalHTML += ' </div>';
infoModalHTML += '</div>';
$("#modalBox").append(infoModalHTML);
}
<!-- 팝업 -->
let modalEvent = {
open : function(target, tit, msg){
if(target.length < 1){
throw new Error("there is no target element !");
}
target.find(".modal-header>.modal-name>.title").html(tit);
//엔터 처리
let enterMsg = msg;//msg.replace(/\r?\n/g, '<br>');
target.find(".modal-header>.modal-name>.text").html(enterMsg);
target.modal({keyboard:false, backdrop:'static'});
},
close : function(target){
//팝업 지우기
//target.modal("hide");
//target.parent().remove();
$("#modalBox .modal").modal("hide");
$("#modalBox").children().remove();
},
success : function(tit, msg, callback){
//alert 팝업
//$(".modal_success .btn-Success").unbind("click");
if($("#modalBox > .popupColored").length > 0){
modalEvent.close();
}
// 모달 아이디 생성
let nowMilli = Date.now();
let targetId = "modal_success"+nowMilli;
// 모달 셋팅
fn_setSuccessModal(targetId);
// 현재 모달 설정
let target = $("#"+targetId);
// 모달 열기
modalEvent.open(target, tit, msg);
// 모달 이벤트
$("#"+targetId+" .btn-Success").click(function(e){
modalEvent.close();
if(typeof callback != 'undefined' && callback){
if(typeof callback == 'function'){
callback();
} else {
if( callback ) {
eval( callback );
}
}
}
});
},
danger : function(tit, msg, callback){
//alert 팝업
//$(".modal_danger .btn-Success").unbind("click");
if($("#modalBox > .popupColored").length > 0){
modalEvent.close();
}
// 모달 아이디 생성
let nowMilli = Date.now();
let targetId = "modal_danger"+nowMilli;
// 모달 셋팅
fn_setDangerModal(targetId);
// 현재 모달 설정
let target = $("#"+targetId);
// 모달 열기
modalEvent.open(target, tit, msg);
// 모달 이벤트
$("#"+targetId+" .btn-Success").click(function(e){
modalEvent.close();
if(typeof callback != 'undefined' && callback){
if(typeof callback == 'function'){
callback();
} else {
if( callback ) {
eval( callback );
}
}
}
});
},
warning : function(tit, msg, callback){
//alert 팝업
//$(".modal_warning .btn-Success").unbind("click");
if($("#modalBox > .popupColored").length > 0){
modalEvent.close();
}
// 모달 아이디 생성
let nowMilli = Date.now();
let targetId = "modal_warning"+nowMilli;
// 모달 셋팅
fn_setWarningModal(targetId);
// 현재 모달 설정
let target = $("#"+targetId);
// 모달 열기
modalEvent.open(target, tit, msg);
// 모달 이벤트
$("#"+targetId+" .btn-Success").click(function(e){
modalEvent.close();
if(typeof callback != 'undefined' && callback){
if(typeof callback == 'function'){
callback();
} else {
if( callback ) {
eval( callback );
}
}
}
});
},
info : function(tit, msg, callback, callback2){
//alert 팝업
//$(".modal_info .btn-Success").unbind("click");
if($("#modalBox > .popupColored").length > 0){
modalEvent.close();
}
// 모달 아이디 생성
let nowMilli = Date.now();
let targetId = "modal_info"+nowMilli;
// 모달 셋팅
fn_setInfoModal(targetId);
// 현재 모달 설정
let target = $("#"+targetId);
// 모달 열기
modalEvent.open(target, tit, msg);
// 모달 확인 이벤트
$("#"+targetId+" .btn-Success").click(function(e){
modalEvent.close();
if(typeof callback != 'undefined' && callback){
if(typeof callback == 'function'){
callback();
} else {
if( callback ) {
eval( callback );
}
}
}
});
// 모달 취소 이벤트
$("#"+targetId+" .btn-cancel").click(function(e){
modalEvent.close();
if(typeof callback2 != 'undefined' && callback2){
if(typeof callback2 == 'function'){
callback2();
} else {
if( callback2 ) {
eval( callback2 );
}
}
}
});
}
}
// 다중 팝업 index 조정
$(document).on('show.bs.modal', '.modal', function (event) {
let zIndex = 1040 + (10 * $('.modal:visible').length);
$(this).css('z-index', zIndex);
setTimeout(function() {
$('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack');
}, 0);
});
</script>
</th:block>
</html>

115
src/main/resources/templates/web/petit/petitAntiagingSelect.html Normal file
View File

@@ -0,0 +1,115 @@
<!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}">
<th:block layout:fragment="layoutCss">
<link rel="stylesheet" href="/css/web/petit/petitAntiagingSelect.css?v1.0">
</th:block>
<th:block layout:fragment="layoutContent">
<div class="same">
<aside>
<ul>
<li class="first"><a href="#skinbooster">스킨부스터</a></li>
<li><a href="#wellbeing">웰빙주사</a></li>
</ul>
</aside>
<main>
<!-- 스킨부스터 -->
<div id="skinbooster">
<section class="main_img">
<img class="pc" src="/image/web/petit_main3.jpg" alt="diet"/>
<img class="mb" src="/image/web/Mpetit_main3.jpg" alt="diet"/>
<div class="text_box">
<div class="left_text_box">
<p class="sub_title">피부의 재생력을 높여 탄력있고 밝은 피부!</p>
<p class="title"><span>Skin Booster</span></p>
<p class="sub_text">
<span>스트레스, 환경요인, 노화 등의 여러가지 요인으로 인해<br />
발생한 피부 문제를 간단하게 해결할 수 있는 주사제</span>
</p>
</div>
</div>
</section>
<section class="content1">
<div class="inner_wrap">
<p class="title">Skin Booster</p>
<p class="sub_title">더모톡신 스킨부스터</p>
<p class="sub_text">
피부를 뜻하는 더마와 보툴리눔 톡신의 톡신 합성어로 피부에 보툴리눔 톡신을 주사하는 치료법입니다.
근육층에 주로 주사를 놓아서 주름을 제거하는 보톡스와 달리 보툴리눔 톡신과 비타민, 미네랄 등을 함께 믹스한 용액을 피부 진피, 피하 지방층에 소량씩 주사합니다.
주름개선, 피부탄력 및 리프팅 효과를 주며 엷은 모공이나 여드름 흉터 치료 등 전체적인 얼굴 피부와 윤곽을 개선합니다.
</p>
</div>
</section>
<section class="content2">
<div class="inner_wrap">
<h3><span>시술효과 </span>Effect</h3>
<ul>
<li><p>강력한 수분감 <br/>잔주름 개선과 <br/>피부탄력증대 <br/>수분 함유율 증대</p></li>
<li><p>주름 및 탄력개선 <br/>나이가 들면서 감소하는 <br/>피부의 연조직 보충</p></li>
<li><p>환한 피부톤 <br/>얼굴의 윤기와 <br/>볼륨감 부여</p></li>
<li><p>흔적없는 시술 <br/>짧은 시술 시간 <br/>일상생활에 지장없음</p></li>
</ul>
</div>
</section>
<section class="content3">
<div class="inner_wrap">
<h3><span>특징 </span>Unique</h3>
<ul class="box_list">
<li>
<div><img src="/image/web/check.svg" alt="check"/></div>
<p>인젝터 사용으로 통증은 줄어들고 시술시간은 단축</p>
</li>
<li>
<div><img src="/image/web/check.svg" alt="check"/></div>
<p>피부 상태에 따른 맞춤형 스킨부스터 시술</p>
</li>
<li>
<div><img src="/image/web/check.svg" alt="check"/></div>
<p>친수성의 안전한 인체 구성물질, 하이드로 밸런스 복원</p>
</li>
<li>
<div><img src="/image/web/check.svg" alt="check"/></div>
<p>피부 수분유지와 탄력을 높이는 리프팅</p>
</li>
</ul>
</div>
</section>
<section class="content4">
<div class="inner_wrap">
<h3><span>시술횟수 </span>Time</h3>
<ul class="box_list">
<li>
<div><img src="/image/web/time.png" alt="check"/></div>
<p>2~4주 간격으로 3~5회</p>
</li>
</ul>
</div>
</section>
<section class="content5">
<div class="inner_wrap">
<h3><span>주의사항 </span>Notice</h3>
<ul class="box_list">
<li>
<div><img src="/image/web/notice.png" alt="check"/></div>
<p>
시술한 당일에는 샤워를 금해주시기를 바랍니다.<br/>
개인의 특성에 따라 붓기가 생길수 있습니다.<br/>
시술 부위를 누르거나 문지르는 등 강한 자극은 피합니다.<br/>
시술 후 일주일동안은 흡연, 음주를 삼갑니다.<br/>
통증이 시술 직후보다 더 심해지시면 의원에 즉시 연락!
</p>
</li>
</ul>
</div>
</section>
</div>
<!-- 웰빙주사 -->
<div id="wellbeing"></div>
</main>
</div>
</th:block>
<th:block layout:fragment="layoutContentScript">
</th:block>
</html>

232
src/main/resources/templates/web/petit/petitFillerSelect.html Normal file
View File

@@ -0,0 +1,232 @@
<!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}">
<th:block layout:fragment="layoutCss">
<link rel="stylesheet" href="/css/web/petit/petitFillerSelect.css?v1.0">
</th:block>
<th:block layout:fragment="layoutContent">
<div class="same">
<aside>
<ul>
<li class="first"><a href="#ellanse">엘란쎄</a></li>
<li><a href="#sculptra">스컬트라</a></li>
</ul>
</aside>
<main>
<!-- 엘란쎄 -->
<div id="ellanse">
<section class="main_img">
<img class="pc" src="/image/web/petit_main2.jpg" alt="diet"/>
<img class="mb" src="/image/web/Mpetit_main2.jpg" alt="diet"/>
<div class="text_box">
<div class="left_text_box">
<p class="sub_title">콜라겐 필러</p>
<p class="title">엘란쎄</p>
<p class="sub_text">
PCL성분으로 유지기간이<br class="mb"/> 2~4년 되는 <br class="pc"/>
오래가는 콜라겐 필러! <br class="mb"/>자연스러운 <br class="pc"/>
볼륨 효과와 <br class="mb"/>HA필러의 단점을 보완!
</p>
</div>
</div>
</section>
<section class="content1">
<div class="inner_wrap">
<p class="title">콜라겐 필러 엘란쎄</p>
<p class="sub_title">메이드유 엘란쎄 시술은 <br class="mb"/>국내 최다 16,000시린지 달성 시술병원</p>
<p class="sub_text">
콜라겐을 유발 자기살채움으로 자연스럽게 유지되는 볼륨형성되며 HA필러의 단점인 <br class="pc"/>울퉁불퉁현상, 틴들현상, 경계감, 이물감이 거의 없는 필러
엘란쎄 <span>M 2년</span>유지 엘란쎄 <span>E 4년</span> 유지
</p>
</div>
</section>
<section class="content2">
<div class="inner_wrap">
<h3><span>시술효과 </span>Effect</h3>
<ul>
<li><p>2013년 9월 ~ <br/>현시점까지 <br/>엘란쎄 누적 사용량<br/> 1등 병원</p></li>
<li><p>풍부한 시술 <br/>경험으로 예측 <br/>가능한 시술결과</p></li>
<li><p>원하는 디자인으로 <br/>시술 가능, 시술후 <br/>에도 교정 가능</p></li>
<li><p>합리적인 비용으로 <br/>성형수술에 비해 <br/>비용이 저렴</p></li>
</ul>
</div>
</section>
<section class="content3">
<div class="inner_wrap">
<h3><span>특징 </span>Unique</h3>
<ul class="box_list">
<li>
<div><img src="/image/web/check.svg" alt="check"/></div>
<p><span>즉각적인 콜라겐 볼륨업 - </span>자가 콜라겐생성으로 자연스러움</p>
</li>
<li>
<div><img src="/image/web/check.svg" alt="check"/></div>
<p><span>오랜 지속기간 - </span>2년간 유지시키는 볼륨효과</p>
</li>
<li>
<div><img src="/image/web/check.svg" alt="check"/></div>
<p><span>HA필러와 차별화 - </span>이동, 경계감, 틴들현상 없는 볼륨</p>
</li>
<li>
<div><img src="/image/web/check.svg" alt="check"/></div>
<p><span>일상생활 OK 붓기 멍 최소화 - </span>캐뉼라 사용으로 다운타임 최소화</p>
</li>
</ul>
</div>
</section>
<section class="content4">
<div class="inner_wrap">
<h3><span>시술횟수 </span>Time</h3>
<ul class="box_list">
<li>
<div><img src="/image/web/time.png" alt="check"/></div>
<p>의료진의 판단에 따라</p>
</li>
</ul>
</div>
</section>
<section class="content5">
<div class="inner_wrap">
<h3><span>주의사항 </span>Notice</h3>
<ul class="box_list">
<li>
<div><img src="/image/web/notice.png" alt="check"/></div>
<p>
붓기, 멍, 약간 가려운 현상은 사라지며, 과격한 세안 조심!<br/>
시술 후 부위가 심한 저온 또는 고온에 노출되지 않게 조심!<br/>
주사부위 마사지나 뜨거운 사우나, 심한운동은 7일간 조심!<br/>
하루 이상 통증 지속, 알러지 현상 나타나면 병원으로 내원!
</p>
</li>
</ul>
</div>
</section>
</div>
<!-- 스컬트라 -->
<div id="sculptra">
<section class="main_img">
<img class="pc" src="/image/web/petit_main2_2.jpg" alt="diet"/>
<img class="mb" src="/image/web/Mpetit_main2_2.jpg" alt="diet"/>
<div class="text_box">
<div class="left_text_box">
<p class="sub_title">피부, 속부터 채우다.</p>
<p class="title">스컬트라</p>
<p class="sub_text">
PLLA성분으로 구성된 콜라겐 촉진제 <br/>
볼륨을 채워주며 시간이 지날수록 <br/>
더욱 자연스러운 볼륨효과를!
</p>
</div>
</div>
</section>
<section class="content1">
<div class="inner_wrap">
<p class="title">콜라겐 볼륨 스컬트라</p>
<p class="sub_title">PLLA성분으로 구성된 콜라겐 촉진제 볼륨을 채워주며 시간이 지날수록 더욱 자연스러운 볼륨효과를!</p>
<p class="sub_text">
나이가 들어 탄력을 잃은 콜라겐을 촉진하고 강력하게 재생시켜 볼륨을 채워주는 방식으로 다른 물질이 아닌 본인의 체내성분으로
채워올리기 때문에 안전하며 시간이 지날수록 더욱 볼륨효과를 높여주는 신개념 동안 시스템입니다.
</p>
</div>
</section>
<section class="content2">
<div class="inner_wrap">
<h3><span>시술효과 </span>Effect</h3>
<ul>
<li><p>스컬트라 <br/>6,000vial <br/>돌파 병원</p></li>
<li><p>풍부한 시술 <br/>경험으로 예측 <br/>가능한 시술결과</p></li>
<li><p>원하는 디자인으로 <br/>시술 가능, 시술후 <br/>에도 교정 가능</p></li>
<li><p>합리적인 비용으로 <br/>성형수술에 비해 <br/>비용이 저렴</p></li>
</ul>
</div>
</section>
<section class="content3">
<div class="inner_wrap">
<h3><span>특징 </span>Unique</h3>
<ul class="box_list">
<li>
<div><img src="/image/web/check.svg" alt="check"/></div>
<p><span>콜라겐 볼륨업 - </span>자가 콜라겐 생성으로 자연스러움</p>
</li>
<li>
<div><img src="/image/web/check.svg" alt="check"/></div>
<p><span>오랜 지속기간 - </span>2년간 유지시키는 볼륨효과</p>
</li>
<li>
<div><img src="/image/web/check.svg" alt="check"/></div>
<p><span>HA필러와 차별화 - </span>이동, 경계감, 틴들현상 없는 볼륨</p>
</li>
<li>
<div><img src="/image/web/check.svg" alt="check"/></div>
<p><span>일상생활 OK 붓기 멍 최소화 - </span>캐뉼라 사용으로 다운타임 최소화</p>
</li>
</ul>
</div>
</section>
<section class="content4_1">
<div class="inner_wrap">
<h3><span>노하우</span> Know-how <span>3*3*3</span> SYSTEM</h3>
<ul class="box_list">
<li>
<div><img src="/image/web/knowhow.png" alt="check"/></div>
<p>
<span>3S시술전<br/>
3S시술전 통증, 멍 완화를 위한 메이드유만의 3가지 마취법</span><br/>
피부마취 : 마취 연고를 통한 1단계 피부마취<br/>
신경마취 : 신경주사를 통한 2단계 신경마취<br/>
메이드유마취 : 메이드유 주사를 통한 3단계 마취<br/>
<br/>
<span>3S시술 3S<br/>
시술 중 통증, 멍 완화를 위한 3가지 시술법</span><br/>
카테터 : 블런트 특수 카테터를 이용<br/>
나노니들 : 미세주사바늘을 이용<br/>
신의 손 : 메이드유 원장만의 노하우를 이용<br/>
<br/>
<span>3S시술 후 3S <br/>
시술 후 통증, 멍 완화를 위한 메이드유만의 3가지 진정법</span><br/>
크리이오 냉각테라피 : 크라이오 냉각테라피로 진정<br/>
진정 재생 관리 : 재생팩으로 피부진정, 재생<br/>
진정재생레이저 : 스마트룩스로 피부진정, 재생
</p>
</li>
</ul>
</div>
</section>
<section class="content4">
<div class="inner_wrap">
<h3><span>시술횟수 </span>Time</h3>
<ul class="box_list">
<li>
<div><img src="/image/web/time.png" alt="check"/></div>
<p>최소 3회 이상</p>
</li>
</ul>
</div>
</section>
<section class="content5">
<div class="inner_wrap">
<h3><span>주의사항 </span>Notice</h3>
<ul class="box_list">
<li>
<div><img src="/image/web/notice.png" alt="check"/></div>
<p>
붓기, 주사주위 멍, 약간의 가려운 현상은 자연스럽게 사라지며, 과격한 세안은 조심!<br/>
시술 후, 시술 부위가 너무 심한 저온 또는 고온에 노출되지 않게 조심해주세요.<br/>
주사부위의 마사지나 뜨거운 사우나, 심한 운동은 7일 정도 피하세요.<br/>
주사부위가 하루이상 통증이 계속 되거나, 알러지 현상이 나타나면 병원으로 내원!<br/>
스컬트라의 고른 분포를 위해 얼굴 중 뼈가 두드러진 부위를 빈틈없이 마사지!<br/>
5·5·5 Rule : 5일간, 하루에 5회, 5분동안 치료부위를 마사지!
</p>
</li>
</ul>
</div>
</section>
</div>
</main>
</div>
</th:block>
<th:block layout:fragment="layoutContentScript">
</th:block>
</html>

158
src/main/resources/templates/web/petit/petitLaserSelect.html Normal file
View File

@@ -0,0 +1,158 @@
<!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}">
<th:block layout:fragment="layoutCss">
<link rel="stylesheet" href="/css/web/petit/petitLaserSelect.css?v1.0">
<style>
@media (min-width: 769px) {
/* ====== 공통 레이아웃: 헤더 이후 aside/메인 정렬 및 다이어트 처방약 링크 ====== */
.project_wrap .same {
display: flex;
margin-top: 85px; /* header 높이만큼 아래로 */
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
}
.project_wrap .same aside {
width: 200px;
min-width: 200px;
background: url('/image/web/aside.jpg') repeat-y;
position: fixed;
top: 85px; /* header 높이만큼 아래로 */
left: 0;
height: 100vh;
z-index: 10;
}
.project_wrap .same aside ul {
position: static;
top: auto;
left: auto;
margin-top: 30px;
}
.project_wrap .same main {
width: 1080px;
min-width: 0;
position: relative;
margin-left: 200px;
}
.first {
float: right;
padding-right: 10px;
}
.project_wrap .same aside ul li a {
margin-top: 50px;
}
}
/* ====== END ====== */
</style>
</th:block>
<th:block layout:fragment="layoutContent">
<div class="same inner_wrap">
<aside>
<ul>
<li class="first"><a href="#shurink">슈링크<br/>(더블로 골드)</a></li>
</ul>
</aside>
<main>
<div id="shurink">
<section class="main_img">
<img class="pc" src="/image/web/petit_main1.jpg" alt="diet"/>
<img class="mb" src="/image/web/Mpetit_main1.jpg" alt="diet"/>
<div class="text_box">
<div class="left_text_box">
<p class="sub_title">약해진 얼굴의 SMAS(피부근막)층을 강화!</p>
<p class="title">SHURINK</p>
<p class="sub_text">
늘어진 피부를 탄력있게<br class="mb"/> 바꿔주는 슈링크!<br/>
고강도 집속 초음파를 통한<br class="mb"/> 즉각적인 효과
</p>
</div>
</div>
</section>
<section class="content1">
<div class="inner_wrap">
<p class="title">슈링크·더블로골드</p>
<p class="sub_title">노화로 인해 약해진 얼굴의 SMAS(피부근막)층을 강화시켜 피부를 탄력있게 바꾸어주는 시술!</p>
<p class="sub_text">
핫한 TV속 화제의 레이저리프팅 작아지고 탄탄해지는 V라인 & 작은얼굴 리프팅! 일반레이저가 침투하지 못하는
피부속 1.5~4.5mm 깊이게 정확학 강한 초음파 에너지를 집중시켜 피부를 리프팅 하는 시술입니다.
HIFU (고강도 직접 초음파 )를 통하여 진피층과 피부 처짐의 원인인 근막층에 즉각적인 리프팅 & 주름개선 효과를 얻을 수 있는 시술입니다.
</p>
</div>
</section>
<section class="content2">
<div class="inner_wrap">
<h3><span>시술효과 </span>Effect</h3>
<ul>
<li><p>비수술 <br/>비절개 방식의 시술</p></li>
<li><p>치료 부위를 <br/>모니터로 확인 가능</p></li>
<li><p>진피층, 근막층까지 <br/>두 개층을 <br/>동시에 치료</p></li>
<li><p>빠른 시술 시간 <br/>(약 30분 소요) <br/>시술 직후 바로 <br/>일상 생활 가능</p></li>
</ul>
</div>
</section>
<section class="content3">
<div class="inner_wrap">
<h3><span>특징 </span>Unique</h3>
<ul class="box_list">
<li>
<div><img src="/image/web/check.svg" alt="check"/></div>
<p>일반레이저가 침투하지 못하는 피부속까지 가능한 HIFU리프팅</p>
</li>
<li>
<div><img src="/image/web/check.svg" alt="check"/></div>
<p>1.5 ~ 4.5mm 깊이에 정확하고 강한 초음파 에너지 집중</p>
</li>
<li>
<div><img src="/image/web/check.svg" alt="check"/></div>
<p>피부조직이 응고, 수축되어 당김현상이 나타나는 리프팅</p>
</li>
<li>
<div><img src="/image/web/check.svg" alt="check"/></div>
<p>노화로 인해 약해진 얼굴의 SMAS층을 강화시켜, 탄력있게!</p>
</li>
<li>
<div><img src="/image/web/check.svg" alt="check"/></div>
<p>콜라겐이 진피층 및 피부지방 아래의 깊은 근막층까지 전달!</p>
</li>
</ul>
</div>
</section>
<section class="content4">
<div class="inner_wrap">
<h3><span>시술횟수 </span>Time</h3>
<ul class="box_list">
<li>
<div><img src="/image/web/time.png" alt="check"/></div>
<p>의료진의 판단에 따라</p>
</li>
</ul>
</div>
</section>
<section class="content5">
<div class="inner_wrap">
<h3><span>주의사항 </span>Notice</h3>
<ul class="box_list">
<li>
<div><img src="/image/web/notice.png" alt="check"/></div>
<p>
시술한 당일에는 샤워를 금해주시기를 바랍니다.<br/>
개인의 특성에 따라 붓기가 생길수 있습니다.<br/>
시술 부위를 누르거나 문지르는 등 강한 자극은 피합니다.<br/>
시술 후 일주일동안은 흡연, 음주를 삼갑니다.<br/>
통증이 시술 직후보다 더 심해지시면 의원에 즉시 연락!
</p>
</li>
</ul>
</div>
</section>
</div>
</main>
</div>
</th:block>
<th:block layout:fragment="layoutContentScript">
</th:block>
</html>

1420
src/main/resources/templates/web/service/makeReservation.html Normal file
View File

File diff suppressed because it is too large Load Diff

408
src/main/resources/templates/web/service/serviceInfo.html Normal file
View File

@@ -0,0 +1,408 @@
<!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}">
<th:block layout:fragment="layoutCss">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 전체 기본 스타일 */
html, body {
height: 100vh;
margin: 0;
padding: 0;
font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
background-color: #f8f9fa;
color: #1a1a1a;
line-height: 1.6;
overflow-x: hidden;
font-size: 16px;
}
/* 메인 컨테이너 */
.container {
max-width: 1280px;
width: 100%;
height: calc(100vh - 300px); /* 헤더/푸터 공간 확보 */
min-height: calc(100vh - 300px);
margin: 0 auto;
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 1.5rem;
}
/* 상단 헤더 영역 */
.header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 2rem;
background: white;
border-radius: 16px;
box-shadow: 0 2px 16px rgba(0,0,0,0.06);
border-bottom: 3px solid #C60B24;
flex-shrink: 0;
}
.page-title {
font-size: clamp(1.5rem, 3vw, 1.875rem); /* 24px ~ 30px */
font-weight: 600;
color: #1a1a1a;
margin: 0;
letter-spacing: -0.025em;
}
/* 하단 메인 콘텐츠 영역 (사이드바 + 메인) */
.content-wrapper {
flex: 1;
display: flex;
gap: 1.5rem;
min-height: 0;
}
/* 좌측 카테고리 사이드바 */
.sidebar {
width: 280px;
min-width: 250px;
flex-shrink: 0;
background: white;
border-radius: 16px;
box-shadow: 0 2px 16px rgba(0,0,0,0.06);
height: fit-content;
max-height: 100%;
overflow-y: auto;
position: sticky;
top: 0;
}
.sidebar-header {
padding: 1.25rem 1.5rem;
border-bottom: 1px solid #e9ecef;
font-size: 1.125rem; /* 18px */
font-weight: 600;
color: #374151;
}
.category-list {
list-style: none;
padding: 1rem;
}
.category-item {
margin-bottom: 0.375rem;
}
.category-link {
display: block;
padding: 0.875rem 1rem;
text-decoration: none;
color: #6b7280;
border-radius: 10px;
transition: all 0.2s ease;
border: 1px solid transparent;
cursor: pointer;
font-size: 0.95rem; /* 15.2px */
font-weight: 500;
}
.category-link:hover {
background-color: #f9fafb;
color: #C60B24;
border-color: #f3f4f6;
transform: translateX(2px);
}
.category-link.active {
background-color: rgba(198, 11, 36, 0.08);
color: #C60B24;
border-color: #C60B24;
border-left: 4px solid #C60B24;
font-weight: 600;
}
/* 메인 콘텐츠 영역 */
.main-content {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
height: 100%;
}
/* 스크롤 가능한 서비스 카드 컨테이너 */
.services-list {
flex: 1;
overflow-y: auto;
padding-right: 0.5rem;
min-height: 0;
}
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
gap: 1.25rem;
padding-bottom: 2rem;
}
.service-card {
background: white;
border-radius: 16px;
padding: 1.75rem;
box-shadow: 0 2px 16px rgba(0,0,0,0.06);
transition: all 0.3s ease;
border: 1px solid #f1f5f9;
}
.service-card:hover {
transform: translateY(-6px);
box-shadow: 0 8px 32px rgba(0,0,0,0.12);
border-color: #C60B24;
}
.service-title {
font-size: 1.375rem; /* 22px */
font-weight: 600;
color: #1a1a1a;
margin-bottom: 0.5rem;
letter-spacing: -0.025em;
}
.service-description {
color: #6b7280;
margin-bottom: 1rem;
line-height: 1.5;
font-size: 0.9375rem; /* 15px */
}
.service-price {
font-size: 1.5rem; /* 24px */
font-weight: 700;
color: #C60B24;
text-align: right;
}
.cancel-price {
font-size: 1.125rem; /* 18px */
font-weight: 400;
color: #9ca3af;
text-align: right;
text-decoration: line-through;
}
/* 로딩 스타일 */
.loading {
text-align: center;
padding: 2rem;
color: #6b7280;
font-size: 0.9375rem; /* 15px */
}
.error-message {
text-align: center;
padding: 2rem;
color: #dc2626;
font-size: 0.9375rem; /* 15px */
}
/* 스크롤바 커스텀 스타일링 */
.services-list::-webkit-scrollbar,
.sidebar::-webkit-scrollbar {
width: 6px;
}
.services-list::-webkit-scrollbar-track,
.sidebar::-webkit-scrollbar-track {
background: #f8fafc;
border-radius: 3px;
}
.services-list::-webkit-scrollbar-thumb,
.sidebar::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 3px;
}
.services-list::-webkit-scrollbar-thumb:hover,
.sidebar::-webkit-scrollbar-thumb:hover {
background: #C60B24;
}
/* 반응형 디자인 */
@media (max-width: 1024px) {
.container {
max-width: 100%;
padding: 1rem;
gap: 1rem;
}
.sidebar {
width: 240px;
min-width: 220px;
}
.services-grid {
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: 1rem;
}
.header {
padding: 1.25rem 1.5rem;
}
.page-title {
font-size: clamp(1.375rem, 2.8vw, 1.75rem); /* 22px ~ 28px */
}
}
@media (max-width: 768px) {
.container {
flex-direction: column;
padding: 1rem;
gap: 1rem;
height: auto;
min-height: calc(100vh - 300px);
}
.content-wrapper {
flex-direction: column;
gap: 1rem;
}
.sidebar {
width: 100%;
position: static;
order: 1;
flex-shrink: 0;
max-height: none;
}
.category-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 0.5rem;
padding: 1rem;
}
.category-link {
text-align: center;
padding: 0.75rem 0.5rem;
font-size: 0.875rem; /* 14px */
}
.main-content {
order: 2;
flex: 1;
height: auto;
min-height: 0;
}
.services-grid {
grid-template-columns: 1fr;
gap: 1rem;
}
.header {
padding: 1rem 1.5rem;
border-radius: 12px;
}
.page-title {
font-size: clamp(1.25rem, 2.5vw, 1.5rem); /* 20px ~ 24px */
}
.service-title {
font-size: 1.25rem; /* 20px */
}
.service-price {
font-size: 1.375rem; /* 22px */
}
}
@media (max-width: 480px) {
.container {
padding: 0.75rem;
}
.header {
padding: 0.875rem 1rem;
}
.page-title {
font-size: clamp(1.125rem, 2.2vw, 1.375rem); /* 18px ~ 22px */
}
.sidebar-header {
font-size: 1rem; /* 16px */
padding: 1rem 1.25rem;
}
.service-card {
padding: 1.25rem;
}
}
</style>
</th:block>
<th:block layout:fragment="layout_top_script">
<script th:inline="javascript">
// 서버에서 전달받은 파라미터들을 전역 변수로 설정
window.pageParams = {
categoryDivCd: /*[[${param.categoryDivCd}]]*/ '',
categoryNo: /*[[${param.categoryNo}]]*/ ''
};
// 빈 값 처리
if (!window.pageParams.categoryDivCd || window.pageParams.categoryDivCd === 'null') {
window.pageParams.categoryDivCd = 'SERVICE'; // 기본값
}
if (!window.pageParams.categoryNo || window.pageParams.categoryNo === 'null') {
window.pageParams.categoryNo = '';
}
console.log('페이지 파라미터:', window.pageParams);
</script>
</th:block>
<th:block layout:fragment="layoutContent">
<div class="container">
<!-- 상단 헤더 영역 -->
<div class="header">
<h2 class="page-title">시술안내/가격</h2>
</div>
<!-- 하단 콘텐츠 영역 (사이드바 + 메인) -->
<div class="content-wrapper">
<!-- 좌측 카테고리 사이드바 -->
<aside class="sidebar">
<div class="sidebar-header">Category</div>
<ul class="category-list" id="category-list">
<li class="category-item">
<div class="loading">카테고리 로딩 중...</div>
</li>
</ul>
</aside>
<!-- 메인 콘텐츠 -->
<main class="main-content">
<!-- 스크롤 가능한 서비스 카드 컨테이너 -->
<div class="services-list">
<div class="services-grid" id="services-grid">
<div class="loading">서비스 정보 로딩 중...</div>
</div>
</div>
</main>
</div>
</div>
</th:block>
<th:block layout:fragment="layoutContentScript">
<script src="/js/web/service/serviceInfo.js"></script>
</th:block>
</html>

782
src/main/resources/templates/web/service/webServiceDetail.html Normal file
View File

@@ -0,0 +1,782 @@
<!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}">
<meta name="viewport" content="width=device-width, initial-scale=1">
<th:block layout:fragment="layoutCss">
<!-- Choices.js CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/choices.js/10.2.0/choices.min.css" />
<style>
* { box-sizing: border-box; }
body {
font-family: 'Noto Sans KR', sans-serif;
margin: 0;
background: #f7f7f9;
color: #222;
}
#service-header {
background: #fff;
border-bottom: 1px solid #ececec;
padding: 14px 0 14px 24px;
font-size: 0.98em;
color: #888;
}
.main-wrap {
max-width: 1280px;
margin: 0 auto;
background: #fff;
border-radius: 18px;
box-shadow: 0 2px 12px rgba(0,0,0,0.07);
margin-top: 32px;
padding: 0 0 32px 0;
}
.top-section {
display: flex;
flex-wrap: wrap;
gap: 32px;
padding: 32px 32px 0 32px;
align-items: flex-start;
}
.img-box {
border-radius: 18px;
align-items: center;
justify-content: center;
overflow: hidden;
}
.img-box img {
width: 100%;
object-fit: cover;
border-radius: 18px;
}
.info-box {
flex: 1 1 300px;
min-width: 240px;
}
.info-title {
font-size: 1.7em;
font-weight: 700;
margin-bottom: 6px;
color: #222;
}
.info-desc {
color: #444;
font-size: 1.1em;
margin-bottom: 18px;
}
.info-price {
font-size: 1.2em;
font-weight: 700;
color: #b23c3c;
margin-bottom: 18px;
}
.select-row {
margin-bottom: 18px;
}
.select-row label {
font-weight: 500;
margin-bottom: 8px;
display: block;
}
.total-row {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 1.1em;
margin-bottom: 18px;
}
.total-row .total-label {
color: #888;
}
.total-row .total-price {
font-weight: bold;
color: #b23c3c;
}
.reserve-btn {
width: 100%;
padding: 14px 0;
background: #b23c3c;
color: #fff;
border: none;
border-radius: 8px;
font-size: 1.1em;
font-weight: bold;
cursor: pointer;
transition: background 0.15s;
}
.reserve-btn:disabled {
background: #ddd;
color: #888;
cursor: not-allowed;
}
.desc-section {
margin-top: 36px;
padding: 0 32px;
}
.desc-title {
font-size: 1.25em;
font-weight: 700;
margin-bottom: 12px;
color: #222;
}
.desc-content {
color: #444;
font-size: 1.05em;
line-height: 1.7;
margin-bottom: 20px;
}
.hashtag-section {
margin-top: 30px;
padding: 20px 0;
border-top: 1px solid #eee;
}
.hashtag-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.hashtag-list {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.hashtag {
display: inline-block;
background-color: #f8f9fa;
color: #495057;
padding: 8px 15px;
border-radius: 20px;
font-size: 14px;
text-decoration: none;
border: 1px solid #dee2e6;
transition: all 0.3s ease;
}
.hashtag:hover {
background-color: #007bff;
color: white;
border-color: #007bff;
cursor: pointer;
}
#thumbnail-bottom-txt{
padding: 8px;
margin-top: 10px;
background-color: #fff;
}
/* Choices.js 커스터마이징 - 개선된 버전 */
.choices {
border: 1px solid #ddd !important;
border-radius: 6px !important;
font-size: 1em !important;
background: #fff !important;
min-width: 300px !important;
}
.choices__inner {
background: #fff !important;
padding: 8px 12px !important;
min-height: 40px !important;
color: #222 !important;
min-width: 280px !important;
width: 100% !important;
}
/* 플레이스홀더 텍스트 잘림 방지 - 핵심 수정 */
.choices__placeholder {
color: #888 !important;
opacity: 1 !important;
width: 100% !important;
min-width: 200px !important;
white-space: nowrap !important;
overflow: visible !important;
text-overflow: clip !important;
display: block !important;
}
.choices__input {
color: #222 !important;
background: transparent !important;
min-width: 200px !important;
width: 100% !important;
}
.choices__input::placeholder {
color: #888 !important;
opacity: 1 !important;
width: 100% !important;
min-width: 200px !important;
white-space: nowrap !important;
overflow: visible !important;
}
/* 다중 선택시 입력 필드 너비 확보 */
.choices[data-type*="select-multiple"] .choices__input {
min-width: 200px !important;
width: auto !important;
flex: 1 !important;
}
/* 선택된 항목들과 입력 필드 공간 분배 */
.choices__list--multiple {
/* display: flex !important; */
flex-wrap: wrap !important;
align-items: center !important;
}
.choices__list--multiple:empty + .choices__input {
min-width: 200px !important;
width: 100% !important;
flex: 1 !important;
}
/* 선택된 항목의 가격 표시 스타일 - 새로 추가 */
.selected-item-content {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
flex: 1 !important;
}
.selected-item-name {
font-weight: 500 !important;
margin-bottom: 2px !important;
}
.selected-item-price {
font-size: 0.85em !important;
}
.selected-price {
color: #b23c3c !important;
font-weight: bold !important;
}
.selected-price-discount {
color: #b23c3c !important;
font-weight: bold !important;
font-size: 0.9em !important;
}
.selected-price-original {
color: #aaa !important;
font-size: 0.85em !important;
text-decoration: line-through !important;
margin-left: 4px !important;
}
/* 선택된 항목들 스타일 수정 */
.choices__list--multiple .choices__item {
background-color: #f8f9fa !important;
border: 1px solid #dee2e6 !important;
border-radius: 16px !important;
padding: 8px 12px !important;
margin: 2px !important;
font-size: 0.9em !important;
color: #495057 !important;
flex-shrink: 0 !important;
display: flex !important;
align-items: center !important;
/* max-width: 300px !important; */
}
/* 빨간색으로 변경 */
.choices__button {
background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjYjIzYzNjIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==') !important;
background-size: 14px 14px !important;
background-position: center !important;
background-repeat: no-repeat !important;
border-left:0 !important;
margin:0 !important;
padding:0 !important;
width:14px !important;
}
/* 드롭다운 컨테이너 */
.choices__list--dropdown {
background: #fff !important;
border: 1px solid #ddd !important;
border-radius: 6px !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
}
/* 드롭다운 옵션들 스타일 */
.choices__list--dropdown .choices__item {
padding: 8px 12px !important;
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
color: #222 !important;
}
.choices__list--dropdown .choices__item--selectable:hover {
background-color: #f5f5f5 !important;
color: #222 !important;
}
.choices__list--dropdown .choices__item--highlighted {
background-color: #b23c3c !important;
color: #fff !important;
}
/* 포커스 상태 */
.choices.is-focused .choices__inner {
border-color: #b23c3c !important;
}
/* 가격 표시 스타일 */
.procedure-price {
color: #b23c3c !important;
font-weight: bold !important;
font-size: 0.9em !important;
}
.procedure-price-discount {
color: #b23c3c !important;
font-weight: bold !important;
font-size: 0.9em !important;
}
.procedure-price-original {
color: #aaa !important;
font-size: 0.85em !important;
text-decoration: line-through !important;
margin-left: 4px !important;
}
/* 드롭다운이 열렸을 때 하이라이트된 항목의 가격 색상 */
.choices__list--dropdown .choices__item--highlighted .procedure-price,
.choices__list--dropdown .choices__item--highlighted .procedure-price-discount {
color: #fff !important;
}
.choices__list--dropdown .choices__item--highlighted .procedure-price-original {
color: #ddd !important;
}
/* 검색 입력창 스타일 */
.choices[data-type*="select-multiple"] .choices__input {
background-color: transparent !important;
color: #222 !important;
}
/* 비활성화 상태 */
.choices.is-disabled .choices__inner {
background-color: #f8f9fa !important;
color: #6c757d !important;
cursor: not-allowed !important;
}
/* 반응형 대응 */
@media (max-width: 600px) {
.choices {
min-width: 250px !important;
}
.choices__inner {
min-width: 230px !important;
}
.choices__placeholder,
.choices__input,
.choices__input::placeholder {
min-width: 150px !important;
}
.choices__list--multiple .choices__item {
max-width: 250px !important;
padding: 6px 10px !important;
}
.selected-item-name {
font-size: 0.9em !important;
}
.selected-item-price {
font-size: 0.8em !important;
}
.choices__list--multiple .choices__item[data-deletable] .choices__button {
width: 20px !important;
height: 20px !important;
font-size: 16px !important;
text-indent: 0 !important;
}
}
@media (max-width: 900px) {
.main-wrap { margin-top: 16px; }
.top-section { flex-direction: column; gap: 18px; padding: 20px 10px 0 10px; }
.img-box { width: 100%;}
.info-box { min-width: unset; }
.desc-section { padding: 0 10px; }
}
@media (max-width: 600px) {
.main-wrap { margin-top: 0; border-radius: 0; box-shadow: none; }
.top-section { padding: 12px 2vw 0 2vw; }
.desc-section { padding: 0 2vw; }
}
</style>
</th:block>
<th:block layout:fragment="layout_top_script">
<script th:inline="javascript">
let category_div_cd = [[${CATEGORY_DIV_CD}]];
let category_no = [[${CATEGORY_NO}]];
let post_no = [[${POST_NO}]];
const CDN_URL = [[${@environment.getProperty('url.cdn')}]];
</script>
</th:block>
<th:block layout:fragment="layoutContent">
<div id="service-header">
시술안내/가격 &nbsp;&gt;&nbsp; <span id="header-category-nm"></span> &nbsp;&gt;&nbsp; <span id="header-title"></span>
</div>
<div class="main-wrap">
<div class="top-section">
<div class="img-box">
<img id="serviceThumb" th:src="${@environment.getProperty('madeu.logo.size800x450')}" alt="썸네일 이미지">
<pre id="thumbnail-bottom-txt"></pre>
</div>
<div class="info-box">
<div class="info-title" id="title">메쉬다 D/S</div>
<div class="info-desc" id="contents">전신 라인 정리에 특화된 메쉬다 바디주사!</div>
<div class="hashtag-section">
<div class="hashtag-container">
<div class="hashtag-list">
<span class="hashtag">#메쉬다바디주사</span>
<span class="hashtag">#쥬베룩</span>
<span class="hashtag">#바디라인정리</span>
<span class="hashtag">#콜라겐부스터</span>
<span class="hashtag">#전신시술</span>
<span class="hashtag">#자연스러운볼륨</span>
<span class="hashtag">#빠른회복</span>
<span class="hashtag">#합리적가격</span>
</div>
</div>
</div>
<div class="info-price"><span id="price">0</span>원 부터</div>
<div class="select-row">
<label for="procedure-select">시술 선택</label>
<select id="procedure-select" multiple></select>
</div>
<div class="total-row">
<span class="total-label">총 금액</span>
<span class="total-price" id="total">0원</span>
</div>
<button class="reserve-btn" id="reserve-btn" disabled>시술 예약하기</button>
</div>
</div>
<div class="desc-section">
<div class="desc-content">
<img id="contents_path" th:src="${@environment.getProperty('madeu.logo.size800x450')}" alt="컨텐츠 이미지" width="100%" />
</div>
</div>
</div>
</th:block>
<th:block layout:fragment="layoutContentScript">
<!-- Choices.js JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/choices.js/10.2.0/choices.min.js"></script>
<script>
// 전역 변수
let procedureChoices;
let priceList = [];
const totalEl = document.getElementById('total');
const reserveBtn = document.getElementById('reserve-btn');
// 초기화
fn_SelectDetail(category_div_cd, category_no, post_no);
/****************************************************************************
* 카테고리 목록 가져오기
****************************************************************************/
function fn_SelectDetail(category_div_cd, category_no, post_no) {
let formData = new FormData();
formData.append('CATEGORY_DIV_CD', category_div_cd);
formData.append('CATEGORY_NO', category_no);
formData.append('POST_NO', post_no);
$.ajax({
url: encodeURI('/webservice/selectServiceDetail.do'),
data: formData,
dataType: 'json',
processData: false,
contentType: false,
type: 'POST',
async: true,
success: function(data) {
if(data.msgCode == '0') {
// 화면 데이터 변경
$('#title').text(data.rows.TITLE);
$('#serviceThumb').attr('src', CDN_URL + data.rows.THUMBNAIL_PATH);
$('#thumbnail-bottom-txt').text(data.rows.THUMBNAIL_BOTTOM_TXT);
$('#contents').text(data.rows.CONTENT);
if(data.rows.PRICE == null || data.rows.PRICE == undefined) {
$('#price').text('0');
} else {
$('#price').text(data.rows.PRICE.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","));
}
// header 동적 변경
$('#header-category-nm').text(data.rows.CATEGORY_NM);
$('#header-title').text(data.rows.TITLE);
// 해시태그 처리
var hashtagHtml = '';
if (data.rows.HASHTAG) {
var tags = data.rows.HASHTAG.split('#');
tags.forEach(function(tag) {
var trimmed = tag.trim();
if(trimmed) {
hashtagHtml += '<span class="hashtag">#' + trimmed + '</span>';
}
});
}
$('.hashtag-list').html(hashtagHtml);
$('#contents_path').attr('src', CDN_URL + data.rows.CONTENTS_PATH);
// 시술 목록 데이터 처리
updateProcedureOptions(data.price || []);
} else {
modalEvent.danger("조회 오류", data.msgDesc);
}
},
error: function(xhr, status, error) {
modalEvent.danger("조회 오류", "조회 중 오류가 발생하였습니다. 잠시후 다시시도하십시오.");
},
beforeSend: function() {
$(".loading-image-layer").show();
},
complete: function() {
$(".loading-image-layer").hide();
}
});
}
/****************************************************************************
* Choices.js 초기화 및 옵션 업데이트
****************************************************************************/
function updateProcedureOptions(data) {
priceList = data;
// 기존 Choices 인스턴스 제거
if (procedureChoices) {
procedureChoices.destroy();
}
// 선택 옵션 데이터 생성
const choices = data.map(item => {
if (!item.MU_TREATMENT_PROCEDURE_ID || !item.TREATMENT_PROCEDURE_NAME) return null;
const basePrice = (item.PRICE || 0) + (item.VAT || 0);
const discountPrice = item.DISCOUNT_PRICE;
return {
value: item.MU_TREATMENT_PROCEDURE_ID,
label: item.TREATMENT_PROCEDURE_NAME,
customProperties: {
name: item.TREATMENT_PROCEDURE_NAME,
price: basePrice,
discountPrice: discountPrice,
originalData: item
}
};
}).filter(Boolean);
// Choices.js 초기화
procedureChoices = new Choices('#procedure-select', {
removeItemButton: true,
searchEnabled: true,
searchPlaceholderValue: '시술명으로 검색...',
placeholder: true,
placeholderValue: '시술을 선택하세요',
maxItemCount: -1,
choices: choices,
shouldSort: false,
searchResultLimit: 10,
searchFields: ['label', 'value'],
itemSelectText: '',
noChoicesText: '선택 가능한 시술이 없습니다',
noResultsText: '검색 결과가 없습니다',
loadingText: '시술 정보를 불러오는 중...',
// 템플릿 커스터마이징 - 선택된 항목에 가격 표시 추가
callbackOnCreateTemplates: function(template) {
return {
// 선택된 항목 템플릿 - 가격 정보 포함
item: ({ classNames }, data) => {
const customProps = data.customProperties || {};
const name = customProps.name || data.label;
const price = customProps.price || 0;
const discountPrice = customProps.discountPrice;
// 가격 표시 HTML 생성
let priceHtml = '';
if (discountPrice && discountPrice < price) {
priceHtml = `
<span class="selected-price-discount">${discountPrice.toLocaleString()}원</span>
<span class="selected-price-original">${price.toLocaleString()}원</span>
`;
} else {
priceHtml = `<span class="selected-price">${price.toLocaleString()}원</span>`;
}
return template(`
<div class="${classNames.item} ${data.highlighted ? classNames.highlightedState : classNames.itemSelectable}" data-item data-id="${data.id}" data-value="${data.value}">
<span class="selected-item-content">
<span class="selected-item-name">${name}</span>
<span class="selected-item-price">${priceHtml}</span>
</span>
<button type="button" class="${classNames.button}" aria-label="Remove item: '${data.value}'" data-button>X</button>
</div>
`);
},
// 드롭다운 선택 옵션 템플릿
choice: ({ classNames }, data) => {
const customProps = data.customProperties || {};
const name = customProps.name || data.label;
const price = customProps.price || 0;
const discountPrice = customProps.discountPrice;
let priceHtml = '';
if (discountPrice && discountPrice < price) {
priceHtml = `
<span class="procedure-price-discount">${discountPrice.toLocaleString()}원</span>
<span class="procedure-price-original">${price.toLocaleString()}원</span>
`;
} else {
priceHtml = `<span class="procedure-price">${price.toLocaleString()}원</span>`;
}
return template(`
<div class="${classNames.item} ${classNames.itemChoice} ${data.disabled ? classNames.itemDisabled : classNames.itemSelectable}" data-select-text="" data-choice ${data.disabled ? 'data-choice-disabled aria-disabled="true"' : 'data-choice-selectable'} data-id="${data.id}" data-value="${data.value}">
<div style="display: flex; justify-content: space-between; width: 100%; align-items: center;">
<span>${name}</span>
${priceHtml}
</div>
</div>
`);
}
};
}
});
// 이벤트 리스너 추가
const selectElement = document.getElementById('procedure-select');
selectElement.addEventListener('change', function(event) {
console.log('Selection changed:', event.detail);
updateTotalPrice();
});
selectElement.addEventListener('addItem', function(event) {
console.log('Item added:', event.detail);
updateTotalPrice();
});
selectElement.addEventListener('removeItem', function(event) {
console.log('Item removed:', event.detail);
updateTotalPrice();
});
}
/****************************************************************************
* 총 금액 업데이트 - 개선된 버전
****************************************************************************/
function updateTotalPrice() {
if (!procedureChoices) {
console.log('procedureChoices not initialized');
return;
}
const selectedValues = procedureChoices.getValue(true);
console.log('Selected values:', selectedValues);
let total = 0;
selectedValues.forEach(value => {
const item = priceList.find(p => p.MU_TREATMENT_PROCEDURE_ID == value);
console.log('Found item for value', value, ':', item);
if (item) {
const basePrice = (item.PRICE || 0) + (item.VAT || 0);
const discountPrice = item.DISCOUNT_PRICE;
// 할인가가 있고 더 저렴하면 할인가 사용, 아니면 기본가격 사용
const finalPrice = (discountPrice && discountPrice < basePrice) ? discountPrice : basePrice;
total += finalPrice;
console.log('Added price:', finalPrice);
}
});
console.log('Total calculated:', total);
totalEl.textContent = total.toLocaleString() + '원';
reserveBtn.disabled = selectedValues.length === 0;
}
/****************************************************************************
* 예약 페이지로 이동
****************************************************************************/
function fn_moveReservation(category_div, category_no, post_no) {
if (!procedureChoices) {
alert('시술 선택 기능이 초기화되지 않았습니다.');
return;
}
const selectedValues = procedureChoices.getValue(true);
if (selectedValues.length === 0) {
alert('시술을 선택해주세요.');
return;
}
const form = document.createElement('form');
form.method = 'post';
form.action = '/webservice/selectMakeReservation.do';
// 기본 파라미터 추가
const params = [
{ name: 'CATEGORY_DIV_CD', value: category_div },
{ name: 'CATEGORY_NO', value: category_no },
{ name: 'POST_NO', value: post_no }
];
params.forEach(param => {
const input = document.createElement('input');
input.type = 'hidden';
input.name = param.name;
input.value = param.value;
form.appendChild(input);
});
// 선택된 시술 추가
selectedValues.forEach(value => {
const input = document.createElement('input');
input.type = 'hidden';
input.name = 'PROCEDURE_ID';
input.value = value;
form.appendChild(input);
});
document.body.appendChild(form);
form.submit();
}
// 예약 버튼 이벤트
reserveBtn.addEventListener('click', function() {
fn_moveReservation(category_div_cd, category_no, post_no);
});
</script>
</th:block>
</html>

104
src/main/resources/templates/web/skin/skinPigmentSelect.html Normal file
View File

@@ -0,0 +1,104 @@
<!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}">
<th:block layout:fragment="layoutCss">
</th:block>
<th:block layout:fragment="layoutContent">
<div class="same">
<aside>
<ul>
<li class="first"><a href="#lavieen">프락셀라비앙</a></li>
</ul>
</aside>
<main>
<div id="lavieen">
<section class="main_img">
<img class="pc" src="/image/web/skin_main1.jpg" alt="diet"/>
<img class="mb" src="/image/web/Mskin_main1.jpg" alt="diet"/>
</section>
<section class="content1">
<div class="inner_wrap">
<p class="title">프락셀라비앙</p>
<p class="sub_title">모공 흉터를 개선하는 프리미엄 프락셀 레이저</p>
<p class="sub_text">
프락셀라비앙은 진피층에 콜라겐 합성을 촉진하며 단기간에 적은 횟수로 모공 흉터 및 탄력까지 개선되는 레이저입니다.
1,927nm의 툴리움 레이저 빔을 미세하게 나누어 조사하며 각질층에 미세한 딱지가 탈락되면서 색소가 치료되고 모공 흉터 및 탄력까지 개선됩니다.
</p>
</div>
</section>
<section class="content2">
<div class="inner_wrap">
<h3><span>시술효과 </span>Effect</h3>
<ul>
<li><p>모공축소 및 <br/>피부재생</p></li>
<li><p>여드름 및 <br/>위축성 <br/>흉터</p></li>
<li><p>잔주름 및 <br/>탄력개선</p></li>
</ul>
</div>
</section>
<section class="content3">
<div class="inner_wrap">
<h3><span>특징 </span>Unique</h3>
<ul class="box_list">
<li>
<div><img src="/image/web/check.svg" alt="check"/></div>
<p><span>적은 통증 - </span>미세 빔 방식의 레이저로 시술 중 통증 적음</p>
</li>
<li>
<div><img src="/image/web/check.svg" alt="check"/></div>
<p><span>빠른 회복 - </span>시술 후 적극적인 진정관리로 홍조, 딱지 최소화</p>
</li>
<li>
<div><img src="/image/web/check.svg" alt="check"/></div>
<p><span>다양한 치료 - </span>빔사이즈의 자유로운 조절로 다양한 흉터 치료</p>
</li>
<li>
<div><img src="/image/web/check.svg" alt="check"/></div>
<p><span>복합 치료 - </span>도트, 박리술 등 흉터치료법을 병용하여 효과적</p>
</li>
<li>
<div><img src="/image/web/check.svg" alt="check"/></div>
<p><span>새로운 콜라겐과 엘라스틴 생성으로 피부 노화를 개선</span></p>
</li>
<li>
<div><img src="/image/web/check.svg" alt="check"/></div>
<p><span>피부표면에서 피부 결과 피부톤을 개선</span></p>
</li>
</ul>
</div>
</section>
<section class="content4">
<div class="inner_wrap">
<h3><span>시술횟수 </span>Time</h3>
<ul class="box_list">
<li>
<div><img src="/image/web/time.png" alt="check"/></div>
<p>4~6주간격으로 5~10회 시술</p>
</li>
</ul>
</div>
</section>
<section class="content5">
<div class="inner_wrap">
<h3><span>주의사항 </span>Notice</h3>
<ul class="box_list">
<li>
<div><img src="/image/web/notice.png" alt="check"/></div>
<p>
시술 강도, 피부상태에 따라 시술 직후 일시적 홍반 발생<br/>
시술 후 자가세안이나 화장이 가능<br/>
일상생활에 지장이 없음
</p>
</li>
</ul>
</div>
</section>
</div>
</main>
</div>
</th:block>
<th:block layout:fragment="layoutContentScript">
</th:block>
</html>

97
src/main/resources/templates/web/skin/skinProblemSelect.html Normal file
View File

@@ -0,0 +1,97 @@
<!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}">
<th:block layout:fragment="layoutCss">
</th:block>
<th:block layout:fragment="layoutContent">
<div class="same">
<aside>
<ul>
<li class="first"><a href="#allegro">알레그로</a></li>
</ul>
</aside>
<main>
<div id="allegro">
<section class="main_img">
<img class="pc" src="/image/web/skin_main2.jpg" alt="diet"/>
<img class="mb" src="/image/web/Mskin_main2.jpg" alt="diet"/>
</section>
<section class="content1">
<div class="inner_wrap">
<p class="title">알레그로 레이저</p>
<p class="sub_title">알레그로 레이저의 1450nm 파장은<br class="mb"/> 피부속 물과 기름에 대한 흡수도가 높은 파장입니다.</p>
<p class="sub_text">
1450nm 파장으로 피지선과 반응하여 과도한 피지 분비 감소 및 여드름, 혈관, 홍조, 여드름 붉은 자국 치료 레이저! 피부 진피의 지방성분인 피지선과 반응하여 과도한 피지 분비를 줄여주고,
여드름 붉은 자국을 개선시켜 줍니다. 진피의 물과 반응하여 열에너지로 변환되어 주변 콜라겐 재생을 촉진시켜 모공 수축, 탄력개선, 흉터완화 등에 효과적인 치료입니다.
</p>
</div>
</section>
<section class="content2">
<div class="inner_wrap">
<h3><span>시술효과 </span>Effect</h3>
<ul>
<li><p>피지분비 감소</p></li>
<li><p>피부탄력 및 리프팅</p></li>
<li><p>모공 축소</p></li>
<li><p>여드름균과 <br/>염증성 여드름 개선</p></li>
</ul>
</div>
</section>
<section class="content3">
<div class="inner_wrap">
<h3><span>특징 </span>Unique</h3>
<ul class="box_list">
<li>
<div><img src="/image/web/check.svg" alt="check"/></div>
<p><span> 물과 기름에 잘 흡수 - </span>피지감소, 모공축소, 여드름 개선!</p>
</li>
<li>
<div><img src="/image/web/check.svg" alt="check"/></div>
<p><span> 피지선에 작용, 여드름 개선 - </span>염증성, 화농성 여드름 개선!</p>
</li>
<li>
<div><img src="/image/web/check.svg" alt="check"/></div>
<p><span>간편한 당일 시술, 당일 세안 및 화장 가능 - </span>시술 이후 특별히 관리 및 치료 없이, 바로 일상생활 가능</p>
</li>
<li>
<div><img src="/image/web/check.svg" alt="check"/></div>
<p><span>자극이 적고 타 시술과 병행 가능 - </span>다른 약물치료 병행 가능</p>
</li>
</ul>
</div>
</section>
<section class="content4">
<div class="inner_wrap">
<h3><span>시술횟수 </span>Time</h3>
<ul class="box_list">
<li>
<div><img src="/image/web/time.png" alt="check"/></div>
<p>2주 간격으로 5~10회 시술</p>
</li>
</ul>
</div>
</section>
<section class="content5">
<div class="inner_wrap">
<h3><span>주의사항 </span>Notice</h3>
<ul class="box_list">
<li>
<div><img src="/image/web/notice.png" alt="check"/></div>
<p>
시술 강도, 피부상태에 따라 시술 직후 일시적 홍반 발생<br/>
시술 후 자가세안이나 화장이 가능<br/>
일상생활에 지장이 없음
</p>
</li>
</ul>
</div>
</section>
</div>
</main>
</div>
</th:block>
<th:block layout:fragment="layoutContentScript">
</th:block>
</html>

119
src/main/resources/templates/web/skin/skinTextureSelect.html Normal file
View File

@@ -0,0 +1,119 @@
<!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}">
<th:block layout:fragment="layoutCss">
<link rel="stylesheet" href="/css/web/skin/skinTextureSelect.css?v1.0">
</th:block>
<th:block layout:fragment="layoutContent">
<div class="same">
<aside>
<ul>
<li class="first"><a href="#fraxel">프락셀 레이저</a></li>
<li><a href="#">IPL 레이저</a></li>
<li><a href="#">제네시스 레이저</a></li>
<li><a href="#">Co2 레이저</a></li>
</ul>
</aside>
<main>
<div id="fraxel">
<section class="main_img">
<img class="pc" src="/image/web/skin_main3.jpg" alt="diet"/>
<img class="mb" src="/image/web/Mskin_main3.jpg" alt="diet"/>
<div class="text_box">
<div class="left_text_box">
<p class="sub_title">피부 진피에 열과 물리적 자극을</p>
<p class="title">프락셀제나</p>
<p class="sub_text">
미세한 레이저 빔을 이용하여 피부 깊은 곳까지 <br/>
모공보다 미세한 구멍을 통과한 레이저는 <br/>
피부 진피에 열과 물리적 자극을 줍니다.
</p>
</div>
</div>
</section>
<section class="content1">
<div class="inner_wrap">
<p class="title">프락셀제나</p>
<p class="sub_title">프락셀의 업그레이드 버전으로 미국 FDA 승인을 받은 여드름흉터의 가장 기본이 되는 레이저입니다.</p>
<p class="sub_text">
모공축소나 흉터 치료의 경우 레이저 or 미세침으로 균일하고 미세하게 자극을 주어 피부 재생을 유도하는 형식으로 치료하게 됩니다.
메이드유에서는 다양한 형태의 흉터와 부위별 모공을 가장 적절한 치료로 진행할수 있도록 안내해 드리고 있습니다.
</p>
</div>
</section>
<section class="content2">
<div class="inner_wrap">
<h3><span>시술효과 </span>Effect</h3>
<ul>
<li><p>모공축소 및 <br/>피부재생</p></li>
<li><p>여드름 및 <br/>위축성 <br/>흉터</p></li>
<li><p>잔주름 및 <br/>탄력개선</p></li>
</ul>
</div>
</section>
<section class="content3">
<div class="inner_wrap">
<h3><span>특징 </span>Unique</h3>
<ul class="box_list">
<li>
<div><img src="/image/web/check.svg" alt="check"/></div>
<p><span>적은 통증 - </span>미세 빔 방식의 레이저로 시술 중 통증 적음</p>
</li>
<li>
<div><img src="/image/web/check.svg" alt="check"/></div>
<p><span>빠른 회복 - </span>시술 후 적극적인 진정관리로 홍조, 딱지 최소화</p>
</li>
<li>
<div><img src="/image/web/check.svg" alt="check"/></div>
<p><span>다양한 치료 - </span>빔사이즈의 자유로운 조절로 다양한 흉터 치료</p>
</li>
<li>
<div><img src="/image/web/check.svg" alt="check"/></div>
<p><span>복합 치료 - </span>도트, 박리술 등 흉터치료법을 병용하여 효과적</p>
</li>
<li>
<div><img src="/image/web/check.svg" alt="check"/></div>
<p><span>새로운 콜라겐과 엘라스틴 생성으로 피부 노화를 개선</span></p>
</li>
<li>
<div><img src="/image/web/check.svg" alt="check"/></div>
<p><span>피부표면에서 피부 결과 피부톤을 개선</span></p>
</li>
</ul>
</div>
</section>
<section class="content4">
<div class="inner_wrap">
<h3><span>시술횟수 </span>Time</h3>
<ul class="box_list">
<li>
<div><img src="/image/web/time.png" alt="check"/></div>
<p>4~6주 간격으로 5~10회 시술</p>
</li>
</ul>
</div>
</section>
<section class="content5">
<div class="inner_wrap">
<h3><span>주의사항 </span>Notice</h3>
<ul class="box_list">
<li>
<div><img src="/image/web/notice.png" alt="check"/></div>
<p>
시술 강도, 피부상태에 따라 시술 직후 일시적 홍반 발생<br/>
시술 후 자가세안이나 화장이 가능<br/>
일상생활에 지장이 없음
</p>
</li>
</ul>
</div>
</section>
</div>
</main>
</div>
</th:block>
<th:block layout:fragment="layoutContentScript">
</th:block>
</html>

116
src/main/resources/templates/web/skin/skinWaxingSelect.html Normal file
View File

@@ -0,0 +1,116 @@
<!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}">
<th:block layout:fragment="layoutCss">
<link rel="stylesheet" href="/css/web/skin/skinWaxingSelect.css?v1.0">
</th:block>
<th:block layout:fragment="layoutContent">
<div class="same">
<aside>
<ul>
<li class="first"><a href="#apogee">아포지플러스</a></li>
</ul>
</aside>
<main>
<div id="apogee">
<section class="main_img">
<img class="pc" src="/image/web/skin_main4.jpg" alt="diet"/>
<img class="mb" src="/image/web/Mskin_main4.jpg" alt="diet"/>
<div class="text_box">
<div class="left_text_box">
<p class="sub_title">프리미엄 제모 레이저 <span>아포지엘리트+</span></p>
<p class="title">APOGEE ELITE PLUS</p>
<p class="sub_text">
더욱 강해지 에너지 출력과 최대 2.5배 이상 시술 속도가 빠르고 <br/>
깊은 피부층까지 효율적인 에너지 전달이 가능한 안전한 레이저
</p>
</div>
</div>
</section>
<section class="content1">
<div class="inner_wrap">
<p class="title">아포지플러스제모</p>
<p class="sub_title">효과가 입증된 다양한 프리미엄 제모 전문레이저를 <br class="mb"/>이용한 개인별 부위별 1:1 맞춤제모시술</p>
<p class="sub_text">
효과가 입증된 다양한 프리미엄 제모 전문레이저를 이용한 개인별 부위별 1:1 맞춤제모시술. 제모 전문기기로 확실한 제모 효과를 얻을수 있습니다.
제모 시술 시 의사전담의가 직접 시술합니다. 메이드유는 프리미엄 전문 제모장비를 다량 보유하고 있습니다.
</p>
</div>
</section>
<section class="content2">
<div class="inner_wrap">
<h3><span>시술효과 </span>Effect</h3>
<ul>
<li><p>털의 <br/>굵기에 따라 <br/>맞춤 제모</p></li>
<li><p>흡수가 높은 <br/>레이저 파장으로 <br/>제모 효과</p></li>
<li><p>정상 피부 손상없이 <br/>선택적 모근 <br/>제모 효과</p></li>
</ul>
</div>
</section>
<section class="content3">
<div class="inner_wrap">
<h3><span>특징 </span>Unique</h3>
<ul class="box_list">
<li>
<div><img src="/image/web/check.svg" alt="check"/></div>
<p>강력한 쿨링효과로 시술 시 통증이 거의 없음</p>
</li>
<li>
<div><img src="/image/web/check.svg" alt="check"/></div>
<p>두꺼운털부터 색이 옅은 털까지 확실하게 제모 가능</p>
</li>
<li>
<div><img src="/image/web/check.svg" alt="check"/></div>
<p>시술 속도가 빠르고 부작용이 거의 없는 안전한 시술</p>
</li>
<li>
<div><img src="/image/web/check.svg" alt="check"/></div>
<p>시술 후 모공 수축으로 피부가 부드러움</p>
</li>
<li>
<div><img src="/image/web/check.svg" alt="check"/></div>
<p>미국FDA승인 / 강력한 프리미엄 명품 제모레이저</p>
</li>
</ul>
</div>
</section>
<section class="content4">
<div class="inner_wrap">
<h3><span>시술횟수 </span>Time</h3>
<ul class="box_list">
<li>
<div><img src="/image/web/time.png" alt="check"/></div>
<p>4~6주 간격으로 5~10회 시술</p>
</li>
</ul>
</div>
</section>
<section class="content5">
<div class="inner_wrap">
<h3><span>주의사항 </span>Notice</h3>
<ul class="box_list">
<li>
<div><img src="/image/web/notice.png" alt="check"/></div>
<p>
시술전, 털을 뽑지 마세요. 모공속에 털이 없으므로 레이저 제모 효과가 거의 없습니다.<br/>
제모 시술을 받기 2~3일 전에 면도를 하고 오시는 것이 좋습니다.<br/>
검은피부, 색소침착 피부에는 미백 연고를 처방하게 됩니다.<br/>
피부염증이나 질병이 있을 경우, 시술 전 먼저 치료합니다.<br/>
약물 복용이나 켈로이드 체질이 있으면 시술전에 말씀해 주셔야 합니다.<br/>
시술후에는 뽑거나, 왁싱을 금하며, 면도는 무방합니다.<br/>
건조함 방지를 위해 보습제를 발라주는 것이 좋습니다.<br/>
하루 이틀 정도 피부가 울긋불긋해지거나 조금 부을수 있으나 곧 사라집니다.
</p>
</li>
</ul>
</div>
</section>
</div>
</main>
</div>
</th:block>
<th:block layout:fragment="layoutContentScript">
</th:block>
</html>

87
src/main/resources/templates/web/voc/vocSelect.html Normal file
View File

@@ -0,0 +1,87 @@
<!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}">
<th:block layout:fragment="layoutCss">
<link rel="stylesheet" href="/css/web/voc/webVOC.css?ver=2">
</th:block>
<th:block layout:fragment="layoutContent">
<main>
<div class="inner_wrap">
<h3>
<span>칭찬/불만 접수</span>
</h3>
<hr class="hrtag"/>
<form name="dataform" id="dataform">
<table class="table table-bordered board_write">
<caption>글쓰기</caption>
<colgroup>
<col width="20%">
<col width="30%">
</colgroup>
<tbody>
<tr>
<th>지점선택</th>
<td >
<select name="gubun" class="form-select input_select">
<option value="GN">강남본점</option>
</select>
</td>
</tr>
<tr>
<th>고객명</th>
<td >
<input type="text" name="name" value="" placeholder='고객님의 성함을 입력해 주세요.' class="input_text">
</td>
</tr>
<tr>
<th class="board_txt1">휴대폰번호</th>
<td class="lm teltd" >
<div>
<input type="text" id="phoneNumber" name="phoneNumber" placeholder='고객님의 핸드폰 번호를 입력해 주세요.' class="input_tel">
<input type="button" class="input_button" name="sendAuthNumBtn" id="sendAuthNumBtn" Onclick="javascript:fn_sendAuthNum();" value="인증번호 발송">
</div>
<div class="bd-top">
<input type="text" class="input_auth" id="authNumber" name="authNumber" placeholder='인증번호를 입력해 주세요.'>
<p id="timer" class="input_time">03:00</p>
<input type="button" class="input_button noactive" name="sendAuthNumBtn" id="sendAuthNumBtn" Onclick="javascript:fn_selectPhoneAuthCheck();" value="인증번호 확인">
</div>
</td>
</tr>
<tr>
<th class="board_txt1">의견 분류</th>
<td class="lm" >
<input type='radio' class="input_radio" name='opinion' value='PR' id="a"/> <label class="label_radio" for='a'>칭찬</label>
<input type='radio' class="input_radio" name='opinion' value='DS' id="b"/> <label class="label_radio" for='b'>불만</label>
<input type='radio' class="input_radio" name='opinion' value='ET' id="c"/> <label class="label_radio" for='c'>기타의견</label>
</td>
</tr>
<tr>
<th class="board_txt1">내용입력</th>
<td class="lm" >
<textarea name="content" rows="15" class="input_text_area" id="Contents" placeholder='고객님의 소중한 의견을 입력해 주세요.'></textarea>
</td>
</tr>
</tbody>
</table>
<p>
<input type='checkbox' name="check" id="check" class="input_check"/> [필수] 서비스 이용 및 예약 신청을 위한 개인정보 제공에 동의
</p>
<p>
<a href="/webaccept/acceptPrivacy.do">[자세히 보기]</a>
</p>
<p>
<input type="button" class="input_button" Onclick="javascript:fn_submit();" value="의견 접수하기">
</p>
</form>
</div>
</main>
</th:block>
<th:block layout:fragment="layoutContentScript">
<script src="/js/web/voc/webVOC.js?ver=2"></script>
</th:block>
</html>

1420
src/main/resources/templates/web/webevent/makeReservation.html Normal file
View File

File diff suppressed because it is too large Load Diff

782
src/main/resources/templates/web/webevent/webEventSelect.html Normal file
View File

@@ -0,0 +1,782 @@
<!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}">
<meta name="viewport" content="width=device-width, initial-scale=1">
<th:block layout:fragment="layoutCss">
<!-- Choices.js CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/choices.js/10.2.0/choices.min.css" />
<style>
* { box-sizing: border-box; }
body {
font-family: 'Noto Sans KR', sans-serif;
margin: 0;
background: #f7f7f9;
color: #222;
}
#service-header {
background: #fff;
border-bottom: 1px solid #ececec;
padding: 14px 0 14px 24px;
font-size: 0.98em;
color: #888;
}
.main-wrap {
max-width: 1280px;
margin: 0 auto;
background: #fff;
border-radius: 18px;
box-shadow: 0 2px 12px rgba(0,0,0,0.07);
margin-top: 32px;
padding: 0 0 32px 0;
}
.top-section {
display: flex;
flex-wrap: wrap;
gap: 32px;
padding: 32px 32px 0 32px;
align-items: flex-start;
}
.img-box {
border-radius: 18px;
align-items: center;
justify-content: center;
overflow: hidden;
}
.img-box img {
width: 100%;
object-fit: cover;
border-radius: 18px;
}
.info-box {
flex: 1 1 300px;
min-width: 240px;
}
.info-title {
font-size: 1.7em;
font-weight: 700;
margin-bottom: 6px;
color: #222;
}
.info-desc {
color: #444;
font-size: 1.1em;
margin-bottom: 18px;
}
.info-price {
font-size: 1.2em;
font-weight: 700;
color: #b23c3c;
margin-bottom: 18px;
}
.select-row {
margin-bottom: 18px;
}
.select-row label {
font-weight: 500;
margin-bottom: 8px;
display: block;
}
.total-row {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 1.1em;
margin-bottom: 18px;
}
.total-row .total-label {
color: #888;
}
.total-row .total-price {
font-weight: bold;
color: #b23c3c;
}
.reserve-btn {
width: 100%;
padding: 14px 0;
background: #b23c3c;
color: #fff;
border: none;
border-radius: 8px;
font-size: 1.1em;
font-weight: bold;
cursor: pointer;
transition: background 0.15s;
}
.reserve-btn:disabled {
background: #ddd;
color: #888;
cursor: not-allowed;
}
.desc-section {
margin-top: 36px;
padding: 0 32px;
}
.desc-title {
font-size: 1.25em;
font-weight: 700;
margin-bottom: 12px;
color: #222;
}
.desc-content {
color: #444;
font-size: 1.05em;
line-height: 1.7;
margin-bottom: 20px;
}
.hashtag-section {
margin-top: 30px;
padding: 20px 0;
border-top: 1px solid #eee;
}
.hashtag-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.hashtag-list {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.hashtag {
display: inline-block;
background-color: #f8f9fa;
color: #495057;
padding: 8px 15px;
border-radius: 20px;
font-size: 14px;
text-decoration: none;
border: 1px solid #dee2e6;
transition: all 0.3s ease;
}
.hashtag:hover {
background-color: #007bff;
color: white;
border-color: #007bff;
cursor: pointer;
}
#thumbnail-bottom-txt{
padding: 8px;
margin-top: 10px;
background-color: #fff;
}
/* Choices.js 커스터마이징 - 개선된 버전 */
.choices {
border: 1px solid #ddd !important;
border-radius: 6px !important;
font-size: 1em !important;
background: #fff !important;
min-width: 300px !important;
}
.choices__inner {
background: #fff !important;
padding: 8px 12px !important;
min-height: 40px !important;
color: #222 !important;
min-width: 280px !important;
width: 100% !important;
}
/* 플레이스홀더 텍스트 잘림 방지 - 핵심 수정 */
.choices__placeholder {
color: #888 !important;
opacity: 1 !important;
width: 100% !important;
min-width: 200px !important;
white-space: nowrap !important;
overflow: visible !important;
text-overflow: clip !important;
display: block !important;
}
.choices__input {
color: #222 !important;
background: transparent !important;
min-width: 200px !important;
width: 100% !important;
}
.choices__input::placeholder {
color: #888 !important;
opacity: 1 !important;
width: 100% !important;
min-width: 200px !important;
white-space: nowrap !important;
overflow: visible !important;
}
/* 다중 선택시 입력 필드 너비 확보 */
.choices[data-type*="select-multiple"] .choices__input {
min-width: 200px !important;
width: auto !important;
flex: 1 !important;
}
/* 선택된 항목들과 입력 필드 공간 분배 */
.choices__list--multiple {
/* display: flex !important; */
flex-wrap: wrap !important;
align-items: center !important;
}
.choices__list--multiple:empty + .choices__input {
min-width: 200px !important;
width: 100% !important;
flex: 1 !important;
}
/* 선택된 항목의 가격 표시 스타일 - 새로 추가 */
.selected-item-content {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
flex: 1 !important;
}
.selected-item-name {
font-weight: 500 !important;
margin-bottom: 2px !important;
}
.selected-item-price {
font-size: 0.85em !important;
}
.selected-price {
color: #b23c3c !important;
font-weight: bold !important;
}
.selected-price-discount {
color: #b23c3c !important;
font-weight: bold !important;
font-size: 0.9em !important;
}
.selected-price-original {
color: #aaa !important;
font-size: 0.85em !important;
text-decoration: line-through !important;
margin-left: 4px !important;
}
/* 선택된 항목들 스타일 수정 */
.choices__list--multiple .choices__item {
background-color: #f8f9fa !important;
border: 1px solid #dee2e6 !important;
border-radius: 16px !important;
padding: 8px 12px !important;
margin: 2px !important;
font-size: 0.9em !important;
color: #495057 !important;
flex-shrink: 0 !important;
display: flex !important;
align-items: center !important;
/* max-width: 300px !important; */
}
/* 빨간색으로 변경 */
.choices__button {
background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjYjIzYzNjIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==') !important;
background-size: 14px 14px !important;
background-position: center !important;
background-repeat: no-repeat !important;
border-left:0 !important;
margin:0 !important;
padding:0 !important;
width:14px !important;
}
/* 드롭다운 컨테이너 */
.choices__list--dropdown {
background: #fff !important;
border: 1px solid #ddd !important;
border-radius: 6px !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
}
/* 드롭다운 옵션들 스타일 */
.choices__list--dropdown .choices__item {
padding: 8px 12px !important;
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
color: #222 !important;
}
.choices__list--dropdown .choices__item--selectable:hover {
background-color: #f5f5f5 !important;
color: #222 !important;
}
.choices__list--dropdown .choices__item--highlighted {
background-color: #b23c3c !important;
color: #fff !important;
}
/* 포커스 상태 */
.choices.is-focused .choices__inner {
border-color: #b23c3c !important;
}
/* 가격 표시 스타일 */
.procedure-price {
color: #b23c3c !important;
font-weight: bold !important;
font-size: 0.9em !important;
}
.procedure-price-discount {
color: #b23c3c !important;
font-weight: bold !important;
font-size: 0.9em !important;
}
.procedure-price-original {
color: #aaa !important;
font-size: 0.85em !important;
text-decoration: line-through !important;
margin-left: 4px !important;
}
/* 드롭다운이 열렸을 때 하이라이트된 항목의 가격 색상 */
.choices__list--dropdown .choices__item--highlighted .procedure-price,
.choices__list--dropdown .choices__item--highlighted .procedure-price-discount {
color: #fff !important;
}
.choices__list--dropdown .choices__item--highlighted .procedure-price-original {
color: #ddd !important;
}
/* 검색 입력창 스타일 */
.choices[data-type*="select-multiple"] .choices__input {
background-color: transparent !important;
color: #222 !important;
}
/* 비활성화 상태 */
.choices.is-disabled .choices__inner {
background-color: #f8f9fa !important;
color: #6c757d !important;
cursor: not-allowed !important;
}
/* 반응형 대응 */
@media (max-width: 600px) {
.choices {
min-width: 250px !important;
}
.choices__inner {
min-width: 230px !important;
}
.choices__placeholder,
.choices__input,
.choices__input::placeholder {
min-width: 150px !important;
}
.choices__list--multiple .choices__item {
max-width: 250px !important;
padding: 6px 10px !important;
}
.selected-item-name {
font-size: 0.9em !important;
}
.selected-item-price {
font-size: 0.8em !important;
}
.choices__list--multiple .choices__item[data-deletable] .choices__button {
width: 20px !important;
height: 20px !important;
font-size: 16px !important;
text-indent: 0 !important;
}
}
@media (max-width: 900px) {
.main-wrap { margin-top: 16px; }
.top-section { flex-direction: column; gap: 18px; padding: 20px 10px 0 10px; }
.img-box { width: 100%;}
.info-box { min-width: unset; }
.desc-section { padding: 0 10px; }
}
@media (max-width: 600px) {
.main-wrap { margin-top: 0; border-radius: 0; box-shadow: none; }
.top-section { padding: 12px 2vw 0 2vw; }
.desc-section { padding: 0 2vw; }
}
</style>
</th:block>
<th:block layout:fragment="layout_top_script">
<script th:inline="javascript">
let category_div_cd = [[${CATEGORY_DIV_CD}]];
let category_no = [[${CATEGORY_NO}]];
let post_no = [[${POST_NO}]];
const CDN_URL = [[${@environment.getProperty('url.cdn')}]];
</script>
</th:block>
<th:block layout:fragment="layoutContent">
<div id="service-header">
시술안내/가격 &nbsp;&gt;&nbsp; <span id="header-category-nm"></span> &nbsp;&gt;&nbsp; <span id="header-title"></span>
</div>
<div class="main-wrap">
<div class="top-section">
<div class="img-box">
<img id="serviceThumb" th:src="${@environment.getProperty('madeu.logo.size800x450')}" alt="썸네일 이미지">
<pre id="thumbnail-bottom-txt"></pre>
</div>
<div class="info-box">
<div class="info-title" id="title">메쉬다 D/S</div>
<div class="info-desc" id="contents">전신 라인 정리에 특화된 메쉬다 바디주사!</div>
<div class="hashtag-section">
<div class="hashtag-container">
<div class="hashtag-list">
<span class="hashtag">#메쉬다바디주사</span>
<span class="hashtag">#쥬베룩</span>
<span class="hashtag">#바디라인정리</span>
<span class="hashtag">#콜라겐부스터</span>
<span class="hashtag">#전신시술</span>
<span class="hashtag">#자연스러운볼륨</span>
<span class="hashtag">#빠른회복</span>
<span class="hashtag">#합리적가격</span>
</div>
</div>
</div>
<div class="info-price"><span id="price">0</span>원 부터</div>
<div class="select-row">
<label for="procedure-select">시술 선택</label>
<select id="procedure-select" multiple></select>
</div>
<div class="total-row">
<span class="total-label">총 금액</span>
<span class="total-price" id="total">0원</span>
</div>
<button class="reserve-btn" id="reserve-btn" disabled>시술 예약하기</button>
</div>
</div>
<div class="desc-section">
<!-- <div class="desc-content">
<img id="contents_path" th:src="${@environment.getProperty('madeu.logo.size800x450')}" alt="컨텐츠 이미지" width="100%" />
</div> -->
</div>
</div>
</th:block>
<th:block layout:fragment="layoutContentScript">
<!-- Choices.js JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/choices.js/10.2.0/choices.min.js"></script>
<script>
// 전역 변수
let procedureChoices;
let priceList = [];
const totalEl = document.getElementById('total');
const reserveBtn = document.getElementById('reserve-btn');
// 초기화
fn_SelectDetail(category_div_cd, category_no, post_no);
/****************************************************************************
* 카테고리 목록 가져오기
****************************************************************************/
function fn_SelectDetail(category_div_cd, category_no, post_no) {
let formData = new FormData();
formData.append('CATEGORY_DIV_CD', category_div_cd);
formData.append('CATEGORY_NO', category_no);
formData.append('POST_NO', post_no);
$.ajax({
url: encodeURI('/webevent/selectEventDetail.do'),
data: formData,
dataType: 'json',
processData: false,
contentType: false,
type: 'POST',
async: true,
success: function(data) {
if(data.msgCode == '0') {
// 화면 데이터 변경
$('#title').text(data.rows.TITLE);
$('#serviceThumb').attr('src', CDN_URL + data.rows.THUMBNAIL_PATH);
$('#thumbnail-bottom-txt').text(data.rows.THUMBNAIL_BOTTOM_TXT);
$('#contents').text(data.rows.CONTENT);
if(data.rows.PRICE == null || data.rows.PRICE == undefined) {
$('#price').text('0');
} else {
$('#price').text(data.rows.PRICE.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","));
}
// header 동적 변경
$('#header-category-nm').text(data.rows.CATEGORY_NM);
$('#header-title').text(data.rows.TITLE);
// 해시태그 처리
var hashtagHtml = '';
if (data.rows.HASHTAG) {
var tags = data.rows.HASHTAG.split('#');
tags.forEach(function(tag) {
var trimmed = tag.trim();
if(trimmed) {
hashtagHtml += '<span class="hashtag">#' + trimmed + '</span>';
}
});
}
$('.hashtag-list').html(hashtagHtml);
$('#contents_path').attr('src', CDN_URL + data.rows.CONTENTS_PATH);
// 시술 목록 데이터 처리
updateProcedureOptions(data.price || []);
} else {
modalEvent.danger("조회 오류", data.msgDesc);
}
},
error: function(xhr, status, error) {
modalEvent.danger("조회 오류", "조회 중 오류가 발생하였습니다. 잠시후 다시시도하십시오.");
},
beforeSend: function() {
$(".loading-image-layer").show();
},
complete: function() {
$(".loading-image-layer").hide();
}
});
}
/****************************************************************************
* Choices.js 초기화 및 옵션 업데이트
****************************************************************************/
function updateProcedureOptions(data) {
priceList = data;
// 기존 Choices 인스턴스 제거
if (procedureChoices) {
procedureChoices.destroy();
}
// 선택 옵션 데이터 생성
const choices = data.map(item => {
if (!item.MU_TREATMENT_PROCEDURE_ID || !item.TREATMENT_PROCEDURE_NAME) return null;
const basePrice = (item.PRICE || 0) + (item.VAT || 0);
const discountPrice = item.DISCOUNT_PRICE;
return {
value: item.MU_TREATMENT_PROCEDURE_ID,
label: item.TREATMENT_PROCEDURE_NAME,
customProperties: {
name: item.TREATMENT_PROCEDURE_NAME,
price: basePrice,
discountPrice: discountPrice,
originalData: item
}
};
}).filter(Boolean);
// Choices.js 초기화
procedureChoices = new Choices('#procedure-select', {
removeItemButton: true,
searchEnabled: true,
searchPlaceholderValue: '시술명으로 검색...',
placeholder: true,
placeholderValue: '시술을 선택하세요',
maxItemCount: -1,
choices: choices,
shouldSort: false,
searchResultLimit: 10,
searchFields: ['label', 'value'],
itemSelectText: '',
noChoicesText: '선택 가능한 시술이 없습니다',
noResultsText: '검색 결과가 없습니다',
loadingText: '시술 정보를 불러오는 중...',
// 템플릿 커스터마이징 - 선택된 항목에 가격 표시 추가
callbackOnCreateTemplates: function(template) {
return {
// 선택된 항목 템플릿 - 가격 정보 포함
item: ({ classNames }, data) => {
const customProps = data.customProperties || {};
const name = customProps.name || data.label;
const price = customProps.price || 0;
const discountPrice = customProps.discountPrice;
// 가격 표시 HTML 생성
let priceHtml = '';
if (discountPrice && discountPrice < price) {
priceHtml = `
<span class="selected-price-discount">${discountPrice.toLocaleString()}원</span>
<span class="selected-price-original">${price.toLocaleString()}원</span>
`;
} else {
priceHtml = `<span class="selected-price">${price.toLocaleString()}원</span>`;
}
return template(`
<div class="${classNames.item} ${data.highlighted ? classNames.highlightedState : classNames.itemSelectable}" data-item data-id="${data.id}" data-value="${data.value}">
<span class="selected-item-content">
<span class="selected-item-name">${name}</span>
<span class="selected-item-price">${priceHtml}</span>
</span>
<button type="button" class="${classNames.button}" aria-label="Remove item: '${data.value}'" data-button>X</button>
</div>
`);
},
// 드롭다운 선택 옵션 템플릿
choice: ({ classNames }, data) => {
const customProps = data.customProperties || {};
const name = customProps.name || data.label;
const price = customProps.price || 0;
const discountPrice = customProps.discountPrice;
let priceHtml = '';
if (discountPrice && discountPrice < price) {
priceHtml = `
<span class="procedure-price-discount">${discountPrice.toLocaleString()}원</span>
<span class="procedure-price-original">${price.toLocaleString()}원</span>
`;
} else {
priceHtml = `<span class="procedure-price">${price.toLocaleString()}원</span>`;
}
return template(`
<div class="${classNames.item} ${classNames.itemChoice} ${data.disabled ? classNames.itemDisabled : classNames.itemSelectable}" data-select-text="" data-choice ${data.disabled ? 'data-choice-disabled aria-disabled="true"' : 'data-choice-selectable'} data-id="${data.id}" data-value="${data.value}">
<div style="display: flex; justify-content: space-between; width: 100%; align-items: center;">
<span>${name}</span>
${priceHtml}
</div>
</div>
`);
}
};
}
});
// 이벤트 리스너 추가
const selectElement = document.getElementById('procedure-select');
selectElement.addEventListener('change', function(event) {
console.log('Selection changed:', event.detail);
updateTotalPrice();
});
selectElement.addEventListener('addItem', function(event) {
console.log('Item added:', event.detail);
updateTotalPrice();
});
selectElement.addEventListener('removeItem', function(event) {
console.log('Item removed:', event.detail);
updateTotalPrice();
});
}
/****************************************************************************
* 총 금액 업데이트 - 개선된 버전
****************************************************************************/
function updateTotalPrice() {
if (!procedureChoices) {
console.log('procedureChoices not initialized');
return;
}
const selectedValues = procedureChoices.getValue(true);
console.log('Selected values:', selectedValues);
let total = 0;
selectedValues.forEach(value => {
const item = priceList.find(p => p.MU_TREATMENT_PROCEDURE_ID == value);
console.log('Found item for value', value, ':', item);
if (item) {
const basePrice = (item.PRICE || 0) + (item.VAT || 0);
const discountPrice = item.DISCOUNT_PRICE;
// 할인가가 있고 더 저렴하면 할인가 사용, 아니면 기본가격 사용
const finalPrice = (discountPrice && discountPrice < basePrice) ? discountPrice : basePrice;
total += finalPrice;
console.log('Added price:', finalPrice);
}
});
console.log('Total calculated:', total);
totalEl.textContent = total.toLocaleString() + '원';
reserveBtn.disabled = selectedValues.length === 0;
}
/****************************************************************************
* 예약 페이지로 이동
****************************************************************************/
function fn_moveReservation(category_div, category_no, post_no) {
if (!procedureChoices) {
alert('시술 선택 기능이 초기화되지 않았습니다.');
return;
}
const selectedValues = procedureChoices.getValue(true);
if (selectedValues.length === 0) {
alert('시술을 선택해주세요.');
return;
}
const form = document.createElement('form');
form.method = 'post';
form.action = '/webevent/selectMakeReservation.do';
// 기본 파라미터 추가
const params = [
{ name: 'CATEGORY_DIV_CD', value: category_div },
{ name: 'CATEGORY_NO', value: category_no },
{ name: 'POST_NO', value: post_no }
];
params.forEach(param => {
const input = document.createElement('input');
input.type = 'hidden';
input.name = param.name;
input.value = param.value;
form.appendChild(input);
});
// 선택된 시술 추가
selectedValues.forEach(value => {
const input = document.createElement('input');
input.type = 'hidden';
input.name = 'PROCEDURE_ID';
input.value = value;
form.appendChild(input);
});
document.body.appendChild(form);
form.submit();
}
// 예약 버튼 이벤트
reserveBtn.addEventListener('click', function() {
fn_moveReservation(category_div_cd, category_no, post_no);
});
</script>
</th:block>
</html>

594
src/main/resources/templates/web/webevent/webEventSelectList.html Normal file
View File

@@ -0,0 +1,594 @@
<!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}">
<th:block layout:fragment="layoutCss">
<style>
* {
box-sizing: border-box;
}
/* 전체 기본 스타일 */
html, body {
height: 100vh;
margin: 0;
padding: 0;
font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
background: #f8f9fa;
color: #1a1a1a;
overflow-x: hidden;
font-size: 16px;
line-height: 1.6;
}
/* 메인 컨테이너 */
.container {
max-width: 1280px;
width: 100%;
margin: 0 auto;
min-height: calc(100vh - 300px);
display: flex;
flex-direction: column;
gap: 1.5rem;
}
/* 상단 헤더 영역 */
.header {
background: white;
border-radius: 16px;
box-shadow: 0 2px 16px rgba(0,0,0,0.06);
padding: 1rem 2rem;
border-bottom: 3px solid #C60B24;
flex-shrink: 0;
}
.page-title {
font-size: clamp(1.5rem, 3vw, 1.875rem); /* 24px ~ 30px */
font-weight: 700;
color: #1a1a1a;
margin: 0;
letter-spacing: -0.025em;
}
/* 하단 콘텐츠 영역 (사이드바 + 메인) */
.content-wrapper {
flex: 1;
display: flex;
gap: 1.5rem;
min-height: 0;
}
/* 좌측 사이드바 */
.sidebar {
width: 240px;
min-width: 220px;
flex-shrink: 0;
background: white;
border-radius: 16px;
box-shadow: 0 2px 16px rgba(0,0,0,0.06);
height: fit-content;
max-height: 100%;
overflow-y: auto;
position: sticky;
top: 0;
}
.sidebar-header {
padding: 1.25rem 1.5rem;
font-size: 1.125rem; /* 18px */
font-weight: 700;
color: #C60B24;
border-bottom: 1px solid #e9ecef;
}
.category-list {
list-style: none;
padding: 1rem;
margin: 0;
}
.category-item {
margin-bottom: 0.375rem;
}
.category-link {
display: block;
width: 100%;
padding: 0.75rem 1rem;
font-size: 0.95rem; /* 15.2px */
color: #6b7280;
text-decoration: none;
background: none;
border: none;
border-radius: 10px;
cursor: pointer;
transition: all 0.2s ease;
text-align: left;
}
.category-link:hover {
background: #f9fafb;
color: #C60B24;
transform: translateX(2px);
}
.category-link.active {
background: rgba(198, 11, 36, 0.08);
color: #C60B24;
font-weight: 600;
border-left: 4px solid #C60B24;
}
/* 메인 콘텐츠 영역 */
.main-content {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
}
/* 이벤트 리스트 */
.event-list {
flex: 1;
overflow-y: auto;
padding-right: 0.5rem;
min-height: 0;
}
.event-grid {
display: flex;
flex-direction: column;
gap: 1.25rem;
padding-bottom: 2rem;
}
/* 이벤트 카드 */
.event-card {
display: flex;
background: white;
border-radius: 16px;
box-shadow: 0 2px 16px rgba(0,0,0,0.06);
overflow: hidden;
transition: all 0.3s ease;
border: 1px solid #f1f5f9;
min-height: 160px;
cursor: pointer;
}
.event-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 32px rgba(0,0,0,0.12);
border-color: #C60B24;
}
.event-img {
width: 340px;
min-width: 280px;
background: #f3f4f6;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.event-img img {
width: 100%;
object-fit: cover;
display: block;
}
.event-info {
flex: 1;
padding: 1.5rem;
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
}
.event-title {
font-size: 1.25rem; /* 20px */
font-weight: 700;
margin-bottom: 0.5rem;
color: #1a1a1a;
letter-spacing: -0.025em;
}
.event-desc {
color: #6b7280;
font-size: 0.9375rem; /* 15px */
margin-bottom: 0.75rem;
line-height: 1.5;
}
.event-meta {
font-size: 0.875rem; /* 14px */
color: #9ca3af;
margin-bottom: 1rem;
}
.event-price {
font-size: 1.125rem; /* 18px */
color: #C60B24;
font-weight: 700;
margin-bottom: 0;
}
/* 로딩 및 에러 메시지 */
.loading {
text-align: center;
padding: 2rem;
color: #6b7280;
font-size: 0.9375rem; /* 15px */
}
.error-message {
text-align: center;
padding: 2rem;
color: #dc2626;
font-size: 0.9375rem; /* 15px */
}
/* 스크롤바 커스터마이징 */
.event-list::-webkit-scrollbar,
.sidebar::-webkit-scrollbar {
width: 6px;
}
.event-list::-webkit-scrollbar-track,
.sidebar::-webkit-scrollbar-track {
background: #f8fafc;
border-radius: 3px;
}
.event-list::-webkit-scrollbar-thumb,
.sidebar::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 3px;
}
.event-list::-webkit-scrollbar-thumb:hover,
.sidebar::-webkit-scrollbar-thumb:hover {
background: #C60B24;
}
/* 반응형 디자인 - 태블릿 */
@media (max-width: 1024px) {
.container {
padding: 1rem;
gap: 1rem;
}
.content-wrapper {
gap: 1rem;
}
.sidebar {
width: 220px;
min-width: 200px;
}
.event-img {
width: 220px;
min-width: 220px;
}
.event-img img {
height: 140px;
}
.header {
padding: 1.25rem 1.5rem;
}
.page-title {
font-size: clamp(1.375rem, 2.8vw, 1.75rem); /* 22px ~ 28px */
}
}
/* 반응형 디자인 - 모바일 */
@media (max-width: 768px) {
.container {
flex-direction: column;
padding: 1rem;
gap: 1rem;
}
.content-wrapper {
flex-direction: column;
gap: 1rem;
}
.sidebar {
width: 100%;
position: static;
max-height: none;
order: 1;
}
.category-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 0.5rem;
padding: 1rem;
}
.category-link {
text-align: center;
padding: 0.75rem 0.5rem;
font-size: 0.875rem; /* 14px */
}
.main-content {
order: 2;
}
.event-list {
overflow-y: visible;
height: auto;
}
.event-card {
flex-direction: column;
min-height: auto;
}
.event-img {
width: 100%;
min-width: auto;
}
.event-img img {
height: 200px;
}
.event-info {
padding: 1.25rem;
}
.header {
padding: 1rem 1.5rem;
border-radius: 12px;
}
.page-title {
font-size: clamp(1.25rem, 2.5vw, 1.5rem); /* 20px ~ 24px */
}
.event-title {
font-size: 1.125rem; /* 18px */
}
.event-price {
font-size: 1rem; /* 16px */
}
}
/* 작은 모바일 */
@media (max-width: 480px) {
.container {
padding: 0.75rem;
}
.header {
padding: 0.875rem 1rem;
}
.page-title {
font-size: clamp(1.125rem, 2.2vw, 1.375rem); /* 18px ~ 22px */
}
.event-info {
padding: 1rem;
}
.event-title {
font-size: 1rem; /* 16px */
}
.event-desc {
font-size: 0.875rem; /* 14px */
}
}
</style>
</th:block>
<th:block layout:fragment="layout_top_script">
<script th:inline="javascript">
const CDN_URL = [[${@environment.getProperty('url.cdn')}]];
</script>
</th:block>
<th:block layout:fragment="layoutContent">
<div class="container">
<!-- 상단 헤더 영역 -->
<div class="header">
<h1 class="page-title">이벤트 안내</h1>
</div>
<!-- 하단 콘텐츠 영역 (사이드바 + 메인) -->
<div class="content-wrapper">
<!-- 좌측 사이드바 -->
<aside class="sidebar">
<div class="sidebar-header">이달의 이벤트</div>
<ul class="category-list" id="category-list">
<!-- 카테고리 JS로 렌더링 -->
</ul>
</aside>
<!-- 메인 콘텐츠 -->
<main class="main-content">
<div class="event-list">
<div class="event-grid" id="event-grid">
<!-- 이벤트 카드 JS로 렌더링 -->
</div>
</div>
</main>
</div>
</div>
</th:block>
<th:block layout:fragment="layoutContentScript">
<script>
class EventManager {
constructor() {
this.events = [];
this.categories = [];
this.init();
}
async init() {
await this.loadCategories();
}
async apiRequest(url, data) {
return new Promise((resolve, reject) => {
$.ajax({
url: encodeURI(url),
data: data,
dataType: 'json',
processData: false,
contentType: false,
type: 'POST',
success: resolve,
error: reject,
beforeSend: () => $(".loading-image-layer").show(),
complete: () => $(".loading-image-layer").hide()
});
});
}
async loadCategories() {
try {
const formData = new FormData();
formData.append('bannerType', 'A');
const data = await this.apiRequest('/webevent/selectListWebEvent.do', formData);
if (data.msgCode === '0') {
this.categories = data.rows;
this.renderCategories();
if (this.categories.length > 0) {
this.loadEvents(this.categories[0].CATEGORY_NO);
}
} else {
modalEvent.danger("조회 오류", data.msgDesc);
}
} catch (error) {
modalEvent.danger("조회 오류", "조회 중 오류가 발생하였습니다.");
}
}
async loadEvents(categoryNo) {
try {
const formData = new FormData();
formData.append('category_no', categoryNo);
const data = await this.apiRequest('/webevent/selectListEvent.do', formData);
if (data.msgCode === '0') {
this.events = data.rows.map(row => ({
img: CDN_URL + row.THUMBNAIL_PATH,
title: row.TITLE,
desc: row.CONTENT,
meta: row.THUMBNAIL_BOTTOM_TXT,
price: {
before: Number(row.PRICE) || 0,
after: Number(row.DISCOUNT_PRICE) || 0
},
categoryDiv: row.CATEGORY_DIV_CD,
categoryNo: row.CATEGORY_NO,
postNo: row.POST_NO
}));
this.renderEvents();
} else {
modalEvent.danger("조회 오류", data.msgDesc);
}
} catch (error) {
modalEvent.danger("조회 오류", "조회 중 오류가 발생하였습니다.");
}
}
renderCategories() {
const html = this.categories.map((cat, idx) => `
<li class="category-item">
<a href="#" class="category-link ${idx === 0 ? 'active' : ''}"
data-category="${cat.CATEGORY_NO}">${cat.CATEGORY_NM}</a>
</li>
`).join('');
document.getElementById('category-list').innerHTML = html;
document.querySelectorAll('.category-link').forEach(link => {
link.addEventListener('click', (e) => {
e.preventDefault();
document.querySelectorAll('.category-link').forEach(item =>
item.classList.remove('active'));
link.classList.add('active');
this.loadEvents(link.dataset.category);
document.querySelector('.event-list').scrollTop = 0;
});
});
}
renderEvents() {
const html = this.events.map(event => `
<div class="event-card" data-category-div="${event.categoryDiv}"
data-category-no="${event.categoryNo}" data-post-no="${event.postNo}">
<div class="event-img">
<img src="${event.img}" alt="${event.title}">
</div>
<div class="event-info">
<div class="event-title">${event.title}</div>
<div class="event-desc">${event.desc}</div>
${event.meta ? `<div class="event-meta">${event.meta}</div>` : ''}
<div class="event-price">
<span style="text-decoration:line-through; color:#9ca3af; font-size:0.95em; margin-right:8px;">
${event.price.before.toLocaleString()}원
</span>
${event.price.after.toLocaleString()}원 부터
</div>
</div>
</div>
`).join('');
document.getElementById('event-grid').innerHTML = html;
// 카드 클릭 이벤트 추가
document.querySelectorAll('.event-card').forEach(card => {
card.addEventListener('click', () => {
const categoryDiv = card.dataset.categoryDiv;
const categoryNo = card.dataset.categoryNo;
const postNo = card.dataset.postNo;
this.goToDetail(categoryDiv, categoryNo, postNo);
});
});
}
goToDetail(categoryDiv, categoryNo, postNo) {
const form = document.createElement('form');
form.method = 'post';
form.action = '/webevent/selectEventDetailIntro.do';
const fields = [
{ name: 'CATEGORY_DIV_CD', value: categoryDiv },
{ name: 'CATEGORY_NO', value: categoryNo },
{ name: 'POST_NO', value: postNo }
];
fields.forEach(field => {
const input = document.createElement('input');
input.type = 'hidden';
input.name = field.name;
input.value = field.value;
form.appendChild(input);
});
document.body.appendChild(form);
form.submit();
}
}
const eventManager = new EventManager();
</script>
</th:block>
</html>

579
src/main/resources/templates/web/webphoto/webPhotoSelect.html Normal file
View File

@@ -0,0 +1,579 @@
<!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}">
<th:block layout:fragment="layoutCss">
<style>
:root {
--main-bg: #f6f7fb;
--card-bg: #fff;
--accent: #b23c3c;
--text: #222;
--muted: #888;
--shadow: 0 2px 12px rgba(0,0,0,0.07);
--radius: 18px;
}
.project_wrap section:not(.main_img) {
padding-top: 0px;
}
* { box-sizing: border-box; }
body {
margin: 0;
font-family: 'Noto Sans KR', sans-serif;
background: var(--main-bg);
color: var(--text);
min-height: 100vh;
}
/* 부트스트랩 컨테이너 모든 클래스 강제 덮어쓰기 */
.container,
.container-fluid,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl,
div[class*="container"] {
max-width: 1280px !important;
width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 0 !important;
padding-right: 0 !important;
box-sizing: border-box !important;
}
.detail-card {
background: var(--card-bg);
border-radius: var(--radius);
box-shadow: var(--shadow);
margin: 40px 0;
display: flex;
gap: 40px;
padding: 40px;
align-items: flex-start;
flex-wrap: wrap;
transition: box-shadow 0.17s;
}
.detail-card:hover {
box-shadow: 0 6px 24px rgba(178,60,60,0.14);
}
.photo-section {
flex: 0 0 650px;
width: 650px;
display: flex;
flex-direction: column;
align-items: center;
gap: 22px;
}
.compare-slider {
position: relative;
width: 650px;
height: 650px;
border-radius: 14px;
overflow: hidden;
box-shadow: 0 1px 8px rgba(0,0,0,0.06);
background: #f1f1f4;
margin-bottom: 6px;
user-select: none;
touch-action: none;
}
.compare-slider img {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
object-fit: cover;
transition: filter 0.2s;
}
.compare-slider .after-img {
clip-path: inset(0 0 0 50%);
z-index: 2;
transition: clip-path 0.2s;
}
.compare-slider .before-img {
z-index: 1;
}
.compare-slider .slider-bar {
position: absolute;
top: 0; left: 50%;
width: 3px; height: 100%;
background: var(--accent);
z-index: 3;
cursor: ew-resize;
transition: background 0.2s;
border-radius: 2px;
box-shadow: 0 0 4px rgba(178,60,60,0.15);
}
.compare-slider .slider-dot {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 28px; height: 28px;
background: var(--accent);
border-radius: 50%;
border: 3px solid #fff;
box-shadow: 0 2px 10px rgba(178,60,60,0.10);
z-index: 4;
cursor: ew-resize;
display: flex; align-items: center; justify-content: center;
color: #fff; font-size: 1.2em;
}
/* 트렌디한 Before/After 라벨 스타일 */
.compare-labels {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
margin-top: 12px;
position: relative;
z-index: 5;
}
.compare-labels span {
font-size: 1.1em; /* 크기 확대 */
font-weight: 700;
padding: 8px 24px; /* 패딩 증가 */
border-radius: 25px; /* 더 둥글게 */
letter-spacing: 0.5px;
position: relative;
transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
cursor: pointer;
text-transform: uppercase;
backdrop-filter: blur(10px);
border: 2px solid transparent;
overflow: hidden;
}
/* Before 라벨 기본 상태 */
.compare-labels .before-label {
background: linear-gradient(135deg, rgba(255, 59, 92, 0.9), rgba(255, 94, 121, 0.8));
color: #fff;
box-shadow:
0 4px 15px rgba(255, 59, 92, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
/* After 라벨 기본 상태 */
.compare-labels .after-label {
background: linear-gradient(135deg, rgba(46, 213, 115, 0.9), rgba(0, 184, 148, 0.8));
color: #fff;
box-shadow:
0 4px 15px rgba(46, 213, 115, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
/* Before 강조 상태 */
.compare-labels .before-label.active {
background: linear-gradient(135deg, #ff3b5c, #ff5e79);
transform: scale(1.15) translateY(-3px);
box-shadow:
0 8px 25px rgba(255, 59, 92, 0.6),
0 0 30px rgba(255, 59, 92, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
border-color: rgba(255, 255, 255, 0.3);
text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}
/* After 강조 상태 */
.compare-labels .after-label.active {
background: linear-gradient(135deg, #2ed573, #00b894);
transform: scale(1.15) translateY(-3px);
box-shadow:
0 8px 25px rgba(46, 213, 115, 0.6),
0 0 30px rgba(46, 213, 115, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
border-color: rgba(255, 255, 255, 0.3);
text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}
/* 글로우 효과를 위한 가상 요소 */
.compare-labels span::before {
content: '';
position: absolute;
top: -2px; left: -2px; right: -2px; bottom: -2px;
background: inherit;
border-radius: inherit;
z-index: -1;
filter: blur(8px);
opacity: 0;
transition: opacity 0.4s ease;
}
.compare-labels span.active::before {
opacity: 0.7;
}
/* 애니메이션 키프레임 */
@keyframes pulse {
0%, 100% {
transform: scale(1.15) translateY(-3px);
}
50% {
transform: scale(1.18) translateY(-4px);
}
}
.compare-labels span.active {
animation: pulse 2s ease-in-out infinite;
}
/* 호버 효과 (추가 상호작용) */
.compare-labels span:hover:not(.active) {
transform: scale(1.05) translateY(-1px);
filter: brightness(1.1);
}
.info-section {
flex: 1;
min-width: 400px;
display: flex;
flex-direction: column;
gap: 18px;
}
.detail-title {
font-size: 1.45em;
font-weight: 700;
color: var(--accent);
margin-bottom: 4px;
}
.detail-desc {
color: var(--text);
font-size: 1.05em;
line-height: 1.6;
margin-bottom: 6px;
}
.detail-meta {
color: var(--muted);
font-size: 0.98em;
margin-bottom: 10px;
}
.tag-list {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-bottom: 10px;
}
.tag {
background: #f5eaea;
color: var(--accent);
font-size: 0.97em;
border-radius: 10px;
padding: 4px 14px;
font-weight: 500;
}
.back-link {
display: inline-block;
margin-top: 18px;
color: var(--accent);
font-weight: 600;
text-decoration: none;
border-bottom: 1.5px solid #b23c3c33;
font-size: 1em;
transition: color 0.13s;
}
.back-link:hover { color: #a12f2f; }
/* 태블릿 크기 (1024px 이하) */
@media (max-width: 1024px) {
.container,
.container-fluid,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl,
div[class*="container"] {
max-width: 100% !important;
padding-left: 20px !important;
padding-right: 20px !important;
}
.photo-section {
flex: 0 0 500px;
width: 500px;
}
.compare-slider {
width: 500px;
height: 500px;
}
.info-section {
min-width: 300px;
}
}
/* 모바일 크기 (768px 이하) */
@media (max-width: 768px) {
.container,
.container-fluid,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl,
div[class*="container"] {
padding-left: 15px !important;
padding-right: 15px !important;
}
.detail-card {
flex-direction: column;
gap: 24px;
padding: 30px 20px;
margin: 20px 0;
}
.photo-section {
flex: none;
width: 100%;
align-items: center;
}
.compare-slider {
width: 100%;
height: 400px;
max-width: 400px;
}
.info-section {
min-width: auto;
}
/* 모바일 라벨 크기 조정 */
.compare-labels span {
font-size: 1em;
padding: 6px 18px;
}
.compare-labels span.active {
transform: scale(1.1) translateY(-2px);
}
@keyframes pulse {
0%, 100% {
transform: scale(1.1) translateY(-2px);
}
50% {
transform: scale(1.13) translateY(-3px);
}
}
}
/* 작은 모바일 (480px 이하) */
@media (max-width: 480px) {
.container,
.container-fluid,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl,
div[class*="container"] {
padding-left: 10px !important;
padding-right: 10px !important;
}
.detail-card {
border-radius: 10px;
padding: 20px 15px;
}
.compare-slider {
border-radius: 8px;
height: 350px;
}
.info-section {
padding: 0 5px;
}
.detail-title {
font-size: 1.3em;
}
.compare-labels span {
font-size: 0.9em;
padding: 5px 15px;
}
}
/* 매우 작은 화면 (360px 이하) */
@media (max-width: 360px) {
.compare-slider {
height: 300px;
}
.detail-card {
padding: 15px 10px;
}
}
</style>
</th:block>
<th:block layout:fragment="layout_top_script">
<script th:inline="javascript">
let category_div_cd = [[${CATEGORY_DIV_CD}]];
let category_no = [[${CATEGORY_NO}]];
let post_no = [[${POST_NO}]];
</script>
</th:block>
<th:block layout:fragment="layoutContent">
<div class="container">
<div class="detail-card">
<!-- 이미지 비교 영역 -->
<section class="photo-section">
<div class="compare-slider" id="compare-slider">
<img id="before" src="https://images.unsplash.com/photo-1518717758536-85ae29035b6d?auto=format&fit=facearea&w=600&h=400" alt="여드름 치료 전" class="before-img">
<img id="after" src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=facearea&w=600&h=400" alt="여드름 치료 후" class="after-img">
<div class="slider-bar"></div>
<div class="slider-dot">&#8596;</div>
</div>
<div class="compare-labels">
<span class="before-label">Before</span>
<span class="after-label">After</span>
</div>
</section>
<!-- 상세 정보 영역 -->
<section class="info-section">
<div class="detail-title" id="title">여드름 치료 4주차</div>
<div class="detail-meta" id="info">카테고리: 여드름 &nbsp;|&nbsp; 등록일: 2025-07-12</div>
<div class="tag-list">
<span class="tag">#여드름</span>
<span class="tag">#피부개선</span>
<span class="tag">#4주차</span>
</div>
<div class="detail-desc" id="contents">
붉은 여드름과 염증이 4주간의 치료 후 눈에 띄게 완화되었습니다.<br>
피부결이 매끄러워지고, 자극 없이 자연스럽게 개선된 사례입니다.
</div>
<div class="detail-desc" style="color:#b23c3c; font-weight:500;">
※ 시술 결과는 개인에 따라 다를 수 있습니다.
</div>
<a href="#" class="back-link" onclick="history.back();return false;">목록으로 돌아가기</a>
</section>
</div>
</div>
</th:block>
<th:block layout:fragment="layoutContentScript">
<script>
//CDN_URL 전역 정의
const CDN_URL = "[(${@environment.getProperty('url.cdn')})]";
fn_SelectDetail(category_div_cd, category_no, post_no);
/****************************************************************************
* 카테고리 목록 가져오기
****************************************************************************/
function fn_SelectDetail(category_div_cd, category_no, post_no){
let formData = new FormData();
formData.append('CATEGORY_DIV_CD', category_div_cd);
formData.append('CATEGORY_NO', category_no);
formData.append('POST_NO', post_no);
$.ajax({
url: encodeURI('/webphoto/selectPhotoDetail.do'),
data: formData,
dataType: 'json',
processData: false,
contentType: false,
type: 'POST',
async: true,
success: function(data){
if(data.msgCode=='0'){
//화면 데이터 변경
$('#title').text(data.rows.TITLE);
$('#before').attr('src', CDN_URL + data.rows.BEFORE_PATH);
$('#after').attr('src', CDN_URL + data.rows.AFTER_PATH);
$('#contents').text(data.rows.CONTENT);
// 정보 동적 변경
$('#info').html('카테고리: ' + data.rows.CATEGORY_NM + ' &nbsp;|&nbsp; 등록일: ' + formatDate(data.rows.REG_DATE));
// 해시태그 처리
var hashtagHtml = '';
if (data.rows.HASHTAG) {
var tags = data.rows.HASHTAG.split('#');
tags.forEach(function(tag) {
var trimmed = tag.trim();
if(trimmed) {
hashtagHtml += '<span class="tag">#' + trimmed + '</span>';
}
});
}
$('.tag-list').html(hashtagHtml);
}else{
modalEvent.danger("조회 오류", data.msgDesc);
}
},
error : function(xhr, status, error) {
modalEvent.danger("조회 오류", "조회 중 오류가 발생하였습니다. 잠시후 다시시도하십시오.");
},
beforeSend:function(){
// 로딩열기
$(".loading-image-layer").show();
},
complete:function(){
// 로딩닫기
$(".loading-image-layer").hide();
}
});
}
function formatDate(dateValue) {
const date = new Date(dateValue);
const yyyy = date.getFullYear();
const mm = String(date.getMonth() + 1).padStart(2, '0');
const dd = String(date.getDate()).padStart(2, '0');
return `${yyyy}-${mm}-${dd}`;
}
// Before-After 슬라이더 기능 (모바일/PC 모두 지원)
const slider = document.getElementById('compare-slider');
const afterImg = slider.querySelector('.after-img');
const bar = slider.querySelector('.slider-bar');
const dot = slider.querySelector('.slider-dot');
const beforeLabel = document.querySelector('.before-label');
const afterLabel = document.querySelector('.after-label');
let dragging = false;
function setSlider(x) {
const rect = slider.getBoundingClientRect();
let pos = Math.max(0, Math.min(x - rect.left, rect.width));
let percent = pos / rect.width * 100;
afterImg.style.clipPath = `inset(0 0 0 ${percent}%)`;
bar.style.left = percent + '%';
dot.style.left = percent + '%';
// 라벨 강조 효과 추가
if (percent < 30) {
// Before 영역 (왼쪽 30% 미만)
beforeLabel.classList.add('active');
afterLabel.classList.remove('active');
} else if (percent > 70) {
// After 영역 (오른쪽 70% 초과)
afterLabel.classList.add('active');
beforeLabel.classList.remove('active');
} else {
// 중간 영역 - 둘 다 비활성화
beforeLabel.classList.remove('active');
afterLabel.classList.remove('active');
}
}
function startDrag(e) {
dragging = true;
document.body.style.userSelect = 'none';
}
function stopDrag() {
dragging = false;
document.body.style.userSelect = '';
}
function onDrag(e) {
if (!dragging) return;
let x = e.touches ? e.touches[0].clientX : e.clientX;
setSlider(x);
}
slider.addEventListener('mousedown', startDrag);
slider.addEventListener('touchstart', startDrag);
window.addEventListener('mousemove', onDrag);
window.addEventListener('touchmove', onDrag);
window.addEventListener('mouseup', stopDrag);
window.addEventListener('touchend', stopDrag);
// 초기값 중앙
setSlider(slider.getBoundingClientRect().width / 2 + slider.getBoundingClientRect().left);
</script>
</th:block>
</html>

758
src/main/resources/templates/web/webphoto/webPhotoSelectList.html Normal file
View File

@@ -0,0 +1,758 @@
<!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}">
<th:block layout:fragment="layoutCss">
<style>
:root {
--main-bg: #f8f9fa;
--card-bg: #ffffff;
--accent: #C60B24;
--text: #1a1a1a;
--muted: #6b7280;
--border: #e9ecef;
--shadow: 0 2px 16px rgba(0,0,0,0.06);
--shadow-hover: 0 8px 32px rgba(0,0,0,0.12);
--radius: 16px;
}
* {
box-sizing: border-box;
}
/* 전체 기본 스타일 */
html, body {
height: 100vh;
margin: 0;
padding: 0;
font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
background: var(--main-bg);
color: var(--text);
overflow-x: hidden;
font-size: 16px;
line-height: 1.6;
}
/* 메인 컨테이너 */
.container {
max-width: 1280px;
width: 100%;
margin: 0 auto;
min-height: calc(100vh - 300px);
display: flex;
flex-direction: column;
gap: 1.5rem;
}
/* 상단 헤더 영역 */
.photo-header {
background: var(--card-bg);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 1.0rem 2rem;
border-bottom: 3px solid var(--accent);
flex-shrink: 0;
}
.photo-page-title {
font-size: clamp(1.5rem, 3vw, 1.875rem); /* 24px ~ 30px */
font-weight: 700;
color: var(--text);
margin: 0;
letter-spacing: -0.025em;
}
/* 하단 콘텐츠 영역 (사이드바 + 메인) */
.content-wrapper {
flex: 1;
display: flex;
gap: 1.5rem;
min-height: 0;
}
/* 좌측 사이드바 */
.photo-sidebar {
width: 240px;
min-width: 220px;
flex-shrink: 0;
background: var(--card-bg);
border-radius: var(--radius);
box-shadow: var(--shadow);
height: fit-content;
max-height: 100%;
overflow-y: auto;
position: sticky;
top: 0;
}
.photo-sidebar-title {
padding: 1.25rem 1.5rem;
font-size: 1.125rem; /* 18px */
font-weight: 700;
color: var(--accent);
border-bottom: 1px solid var(--border);
}
.photo-category-list {
list-style: none;
padding: 1rem;
margin: 0;
}
.photo-category-list li {
margin-bottom: 0.375rem;
}
.photo-category-btn {
width: 100%;
background: none;
border: none;
text-align: left;
padding: 0.75rem 1rem;
font-size: 0.95rem; /* 15.2px */
color: var(--muted);
cursor: pointer;
border-radius: 10px;
transition: all 0.2s ease;
}
.photo-category-btn:hover {
background: #f9fafb;
color: var(--accent);
transform: translateX(2px);
}
.photo-category-btn.active {
background: rgba(198, 11, 36, 0.08);
color: var(--accent);
font-weight: 600;
border-left: 4px solid var(--accent);
}
/* 메인 콘텐츠 영역 */
.photo-main-content {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
}
/* 그리드 영역 */
.photo-grid-wrapper {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.photo-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
gap: 1.5rem;
padding-bottom: 2rem;
flex: 1;
}
/* 포토 카드 */
.photo-card {
background: var(--card-bg);
border-radius: var(--radius);
box-shadow: var(--shadow);
overflow: hidden;
transition: all 0.3s ease;
display: flex;
flex-direction: column;
cursor: pointer;
border: 1px solid #f1f5f9;
}
.photo-card:hover {
box-shadow: var(--shadow-hover);
transform: translateY(-4px);
border-color: var(--accent);
}
.photo-images {
display: flex;
gap: 0;
background: #f8f9fa;
border-bottom: 1px solid var(--border);
transition: background 0.2s;
}
.photo-img-box {
flex: 1;
position: relative;
aspect-ratio: 1.2 / 1;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.photo-img-box img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.photo-card:hover .photo-img-box img {
transform: scale(1.03);
}
.photo-label {
position: absolute;
left: 10px;
top: 10px;
background: rgba(0,0,0,0.7);
color: white;
font-size: 0.875rem; /* 14px */
font-weight: 500;
padding: 4px 10px;
border-radius: 6px;
letter-spacing: 0.025em;
z-index: 10;
}
.photo-info {
padding: 1.25rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.photo-title {
font-size: 1.125rem; /* 18px */
font-weight: 600;
margin-bottom: 0.25rem;
color: var(--text);
letter-spacing: -0.025em;
}
.photo-desc {
color: var(--muted);
font-size: 0.9375rem; /* 15px */
line-height: 1.5;
}
/* 페이지네이션 */
.pagination-wrapper {
display: flex;
justify-content: center;
align-items: center;
margin-top: 2rem;
padding: 1.5rem 0;
flex-shrink: 0;
}
.pagination {
display: flex;
gap: 0.5rem;
align-items: center;
}
.pagination-btn {
background: var(--card-bg);
border: 1px solid var(--border);
color: var(--text);
padding: 0.625rem 0.875rem;
border-radius: 8px;
cursor: pointer;
font-size: 0.9375rem; /* 15px */
font-weight: 500;
transition: all 0.2s ease;
min-width: 44px;
text-align: center;
}
.pagination-btn:hover:not(.active):not(.disabled) {
background: #f8f9fa;
border-color: var(--accent);
color: var(--accent);
}
.pagination-btn.active {
background: var(--accent);
border-color: var(--accent);
color: white;
font-weight: 600;
}
.pagination-btn.disabled {
opacity: 0.5;
cursor: not-allowed;
background: #f8f9fa;
}
.pagination-info {
color: var(--muted);
font-size: 0.875rem; /* 14px */
margin: 0 1rem;
}
/* 스크롤바 커스터마이징 */
.photo-grid-wrapper::-webkit-scrollbar,
.photo-sidebar::-webkit-scrollbar {
width: 6px;
}
.photo-grid-wrapper::-webkit-scrollbar-track,
.photo-sidebar::-webkit-scrollbar-track {
background: #f8fafc;
border-radius: 3px;
}
.photo-grid-wrapper::-webkit-scrollbar-thumb,
.photo-sidebar::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 3px;
}
.photo-grid-wrapper::-webkit-scrollbar-thumb:hover,
.photo-sidebar::-webkit-scrollbar-thumb:hover {
background: var(--accent);
}
/* 반응형 디자인 - 태블릿 */
@media (max-width: 1024px) {
.container {
padding: 1rem;
gap: 1rem;
}
.content-wrapper {
gap: 1rem;
}
.photo-sidebar {
width: 220px;
min-width: 200px;
}
.photo-grid {
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 1.25rem;
}
.photo-header {
padding: 1.25rem 1.5rem;
}
.photo-page-title {
font-size: clamp(1.375rem, 2.8vw, 1.75rem); /* 22px ~ 28px */
}
}
/* 반응형 디자인 - 모바일 */
@media (max-width: 768px) {
.container {
flex-direction: column;
padding: 1rem;
gap: 1rem;
}
.content-wrapper {
flex-direction: column;
gap: 1rem;
}
.photo-sidebar {
width: 100%;
position: static;
max-height: none;
order: 1;
}
.photo-category-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 0.5rem;
padding: 1rem;
}
.photo-category-btn {
text-align: center;
padding: 0.75rem 0.5rem;
font-size: 0.875rem; /* 14px */
}
.photo-main-content {
order: 2;
}
.photo-grid {
grid-template-columns: 1fr;
gap: 1rem;
}
/* 모바일에서 이미지는 가로 배치 유지 */
.photo-images {
display: flex;
flex-direction: row;
min-height: 200px;
gap: 2px;
}
.photo-img-box {
flex: 1;
height: 200px;
aspect-ratio: auto;
}
.photo-label {
font-size: 0.75rem; /* 12px */
padding: 3px 6px;
left: 6px;
top: 6px;
}
.photo-header {
padding: 1rem 1.5rem;
border-radius: 12px;
}
.photo-page-title {
font-size: clamp(1.25rem, 2.5vw, 1.5rem); /* 20px ~ 24px */
}
.photo-title {
font-size: 1rem; /* 16px */
}
.photo-desc {
font-size: 0.875rem; /* 14px */
}
.pagination {
flex-wrap: wrap;
gap: 0.375rem;
}
.pagination-btn {
padding: 0.5rem 0.75rem;
font-size: 0.875rem; /* 14px */
min-width: 40px;
}
}
/* 작은 모바일 */
@media (max-width: 480px) {
.container {
padding: 0.75rem;
}
.photo-header {
padding: 0.875rem 1rem;
}
.photo-page-title {
font-size: clamp(1.125rem, 2.2vw, 1.375rem); /* 18px ~ 22px */
}
.photo-images {
min-height: 160px;
}
.photo-img-box {
height: 160px;
}
.photo-info {
padding: 1rem;
}
.photo-title {
font-size: 0.9375rem; /* 15px */
}
.photo-desc {
font-size: 0.8125rem; /* 13px */
}
.pagination-btn {
padding: 0.375rem 0.625rem;
font-size: 0.8125rem; /* 13px */
min-width: 36px;
}
.pagination-info {
font-size: 0.75rem; /* 12px */
}
}
</style>
</th:block>
<th:block layout:fragment="layoutContent">
<div class="container">
<!-- 상단 헤더 영역 -->
<div class="photo-header">
<h1 class="photo-page-title">전후사진 안내</h1>
</div>
<!-- 하단 콘텐츠 영역 (사이드바 + 메인) -->
<div class="content-wrapper">
<!-- 좌측 사이드바 -->
<aside class="photo-sidebar">
<div class="photo-sidebar-title">카테고리</div>
<ul class="photo-category-list" id="category-list">
<li><button class="photo-category-btn active" data-category="전체">전체</button></li>
<li><button class="photo-category-btn" data-category="여드름">여드름</button></li>
<li><button class="photo-category-btn" data-category="잡티/색소">잡티/색소</button></li>
<li><button class="photo-category-btn" data-category="리프팅">리프팅</button></li>
<li><button class="photo-category-btn" data-category="흉터">흉터</button></li>
<li><button class="photo-category-btn" data-category="모공">모공</button></li>
</ul>
</aside>
<!-- 메인 콘텐츠 -->
<main class="photo-main-content">
<div class="photo-grid-wrapper">
<div class="photo-grid" id="photo-grid">
<!-- JS로 게시물 렌더링 -->
</div>
<!-- 페이지네이션 -->
<div class="pagination-wrapper" id="pagination-wrapper">
<div class="pagination" id="pagination">
<!-- JS로 페이지네이션 버튼 렌더링 -->
</div>
</div>
</div>
</main>
</div>
</div>
</th:block>
<th:block layout:fragment="layoutContentScript">
<script th:inline="javascript">
// CDN_URL 전역 정의
const CDN_URL = "[(${@environment.getProperty('url.cdn')})]";
class PhotoGallery {
constructor() {
this.allPosts = [];
this.currentPage = 1;
this.postsPerPage = 6;
this.init();
}
async init() {
await this.loadCategories();
}
async apiRequest(url, data) {
return new Promise((resolve, reject) => {
$.ajax({
url: encodeURI(url),
data: data,
dataType: 'json',
processData: false,
contentType: false,
type: 'POST',
success: resolve,
error: reject,
beforeSend: () => $(".loading-image-layer").show(),
complete: () => $(".loading-image-layer").hide()
});
});
}
async loadCategories() {
try {
const formData = new FormData();
formData.append('bannerType', 'A');
const data = await this.apiRequest('/webphoto/selectListWebPhoto.do', formData);
if (data.msgCode === '0' && data.rows.length > 0) {
this.renderCategories(data.rows);
this.loadPhotos('all');
}
} catch (error) {
modalEvent.danger("조회 오류", "카테고리 조회 중 오류가 발생했습니다.");
}
}
renderCategories(categories) {
const html = [
'<li><button class="photo-category-btn active" id="category_all">전체</button></li>',
...categories.map(cat =>
`<li><button class="photo-category-btn" id="category_${cat.CATEGORY_NO}">${cat.CATEGORY_NM}</button></li>`
)
].join('');
document.getElementById('category-list').innerHTML = html;
document.querySelectorAll('.photo-category-btn').forEach(btn => {
btn.addEventListener('click', () => {
document.querySelectorAll('.photo-category-btn').forEach(b =>
b.classList.remove('active'));
btn.classList.add('active');
this.loadPhotos(btn.id.split('_')[1]);
});
});
}
async loadPhotos(categoryNo) {
try {
const formData = new FormData();
formData.append('category_no', categoryNo);
const data = await this.apiRequest('/webphoto/selectListPhoto.do', formData);
if (data.msgCode === '0') {
this.allPosts = data.rows.map(row => ({
category: row.CATEGORY_NM,
title: row.TITLE,
desc: row.CONTENT,
before: row.BEFORE_PATH ? CDN_URL + row.BEFORE_PATH : '',
after: row.AFTER_PATH ? CDN_URL + row.AFTER_PATH : '',
// 누락된 필드들 추가
categoryDiv: row.CATEGORY_DIV_CD,
categoryNo: row.CATEGORY_NO,
postNo: row.POST_NO
}));
this.currentPage = 1;
this.renderCurrentPage();
}
} catch (error) {
modalEvent.danger("조회 오류", "사진 조회 중 오류가 발생했습니다.");
}
}
renderCurrentPage() {
const totalPages = Math.ceil(this.allPosts.length / this.postsPerPage);
const startIndex = (this.currentPage - 1) * this.postsPerPage;
const endIndex = startIndex + this.postsPerPage;
const currentPosts = this.allPosts.slice(startIndex, endIndex);
this.renderPhotos(currentPosts);
this.renderPagination(totalPages);
}
renderPhotos(posts) {
const grid = document.getElementById('photo-grid');
if (posts.length === 0) {
grid.innerHTML = '<div style="grid-column: 1/-1; text-align: center; color: var(--muted); padding: 3rem;">등록된 전후사진이 없습니다.</div>';
return;
}
const html = posts.map(post => `
<div class="photo-card" onclick="photoGallery.moveToDetail('${post.categoryDiv}', '${post.categoryNo}', '${post.postNo}')">
<div class="photo-images">
<div class="photo-img-box">
<img src="${post.before}" alt="${post.title} - Before">
<div class="photo-label">Before</div>
</div>
<div class="photo-img-box">
<img src="${post.after}" alt="${post.title} - After">
<div class="photo-label">After</div>
</div>
</div>
<div class="photo-info">
<div class="photo-title">${post.title}</div>
<div class="photo-desc">${post.desc}</div>
</div>
</div>
`).join('');
grid.innerHTML = html;
}
renderPagination(totalPages) {
const wrapper = document.getElementById('pagination-wrapper');
const container = document.getElementById('pagination');
if (totalPages <= 1) {
wrapper.style.display = 'none';
return;
}
wrapper.style.display = 'flex';
const buttons = [];
// 이전 버튼
buttons.push(`<button class="pagination-btn ${this.currentPage === 1 ? 'disabled' : ''}"
${this.currentPage > 1 ? `onclick="photoGallery.goToPage(${this.currentPage - 1})"` : ''}>‹</button>`);
// 페이지 번호 버튼들
const maxVisible = 5;
let startPage = Math.max(1, this.currentPage - Math.floor(maxVisible / 2));
let endPage = Math.min(totalPages, startPage + maxVisible - 1);
if (endPage - startPage + 1 < maxVisible) {
startPage = Math.max(1, endPage - maxVisible + 1);
}
if (startPage > 1) {
buttons.push(`<button class="pagination-btn" onclick="photoGallery.goToPage(1)">1</button>`);
if (startPage > 2) {
buttons.push('<span class="pagination-info">...</span>');
}
}
for (let i = startPage; i <= endPage; i++) {
buttons.push(`<button class="pagination-btn ${i === this.currentPage ? 'active' : ''}"
onclick="photoGallery.goToPage(${i})">${i}</button>`);
}
if (endPage < totalPages) {
if (endPage < totalPages - 1) {
buttons.push('<span class="pagination-info">...</span>');
}
buttons.push(`<button class="pagination-btn" onclick="photoGallery.goToPage(${totalPages})">${totalPages}</button>`);
}
// 다음 버튼
buttons.push(`<button class="pagination-btn ${this.currentPage === totalPages ? 'disabled' : ''}"
${this.currentPage < totalPages ? `onclick="photoGallery.goToPage(${this.currentPage + 1})"` : ''}>›</button>`);
// 페이지 정보
const startItem = (this.currentPage - 1) * this.postsPerPage + 1;
const endItem = Math.min(this.currentPage * this.postsPerPage, this.allPosts.length);
buttons.push(`<span class="pagination-info">${startItem}-${endItem} / ${this.allPosts.length}</span>`);
container.innerHTML = buttons.join('');
}
goToPage(page) {
const totalPages = Math.ceil(this.allPosts.length / this.postsPerPage);
if (page < 1 || page > totalPages) return;
this.currentPage = page;
this.renderCurrentPage();
document.querySelector('.photo-grid').scrollIntoView({ behavior: 'smooth', block: 'start' });
}
moveToDetail(categoryDiv, categoryNo, postNo) {
const form = document.createElement('form');
form.method = 'post';
form.action = '/webphoto/selectPhotoDetailIntro.do';
const fields = [
{ name: 'CATEGORY_DIV_CD', value: categoryDiv },
{ name: 'CATEGORY_NO', value: categoryNo },
{ name: 'POST_NO', value: postNo }
];
fields.forEach(field => {
const input = document.createElement('input');
input.type = 'hidden';
input.name = field.name;
input.value = field.value;
form.appendChild(input);
});
document.body.appendChild(form);
form.submit();
}
}
const photoGallery = new PhotoGallery();
</script>
</th:block>
</html>