479 lines
16 KiB
HTML
479 lines
16 KiB
HTML
|
<!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/homeLayout}">
|
||
|
|
<th:block layout:fragment="layout_css">
|
||
|
|
<link href="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.snow.css" rel="stylesheet">
|
||
|
|
<link rel="stylesheet" href="/css/web/ContentsBbsUpd.css">
|
||
|
|
<link rel="stylesheet" href="/css/web/grid.css?v1.1">
|
||
|
|
<style>
|
||
|
|
/* Quill 에디터 스타일 보정 */
|
||
|
|
.ql-toolbar.ql-snow {
|
||
|
|
border: 1px solid #E9ECF0;
|
||
|
|
border-radius: 5px 5px 0 0;
|
||
|
|
background: #F9FAFB;
|
||
|
|
}
|
||
|
|
|
||
|
|
.ql-container.ql-snow {
|
||
|
|
border: 1px solid #E9ECF0;
|
||
|
|
border-top: none;
|
||
|
|
border-radius: 0 0 5px 5px;
|
||
|
|
min-height: 350px;
|
||
|
|
max-height: 600px;
|
||
|
|
overflow-y: auto;
|
||
|
|
font-size: 14px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.ql-editor {
|
||
|
|
min-height: 340px;
|
||
|
|
line-height: 1.7;
|
||
|
|
}
|
||
|
|
|
||
|
|
.ql-editor.ql-blank::before {
|
||
|
|
color: #B5BDC4;
|
||
|
|
font-style: normal;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 페이지 스크롤 활성화 오버라이드 */
|
||
|
|
.center_box {
|
||
|
|
overflow-y: auto !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.project_wrap .content_section .hospital_wrap .center_box .content_box {
|
||
|
|
background: none !important;
|
||
|
|
border: none !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 단일 폼 레이아웃 */
|
||
|
|
.pr-single-form {
|
||
|
|
width: 100%;
|
||
|
|
background: #fff;
|
||
|
|
border: 1px solid #E9ECF0;
|
||
|
|
border-radius: 5px;
|
||
|
|
padding: 24px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.pr-single-form .form-grid-row {
|
||
|
|
display: flex;
|
||
|
|
gap: 16px;
|
||
|
|
margin-bottom: 16px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.pr-single-form .form-group {
|
||
|
|
flex: 1;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
}
|
||
|
|
|
||
|
|
.pr-single-form .form-group label {
|
||
|
|
font-size: 13px;
|
||
|
|
font-weight: 600;
|
||
|
|
color: #374151;
|
||
|
|
margin-bottom: 6px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.pr-single-form .form-group input[type="text"] {
|
||
|
|
height: 38px;
|
||
|
|
padding: 0 12px;
|
||
|
|
border: 1px solid #E9ECF0;
|
||
|
|
border-radius: 5px;
|
||
|
|
font-size: 14px;
|
||
|
|
outline: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.pr-single-form .form-group input[type="text"]:focus {
|
||
|
|
border-color: #3985EA;
|
||
|
|
box-shadow: 0 0 0 2px rgba(57, 133, 234, 0.1);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 내용 헤더 (라벨 + 도움말 버튼) */
|
||
|
|
.content-header {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
margin-bottom: 6px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.content-header label {
|
||
|
|
font-size: 13px;
|
||
|
|
font-weight: 600;
|
||
|
|
color: #374151;
|
||
|
|
margin-bottom: 0 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-help {
|
||
|
|
display: inline-flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 4px;
|
||
|
|
padding: 4px 12px;
|
||
|
|
font-size: 12px;
|
||
|
|
font-weight: 600;
|
||
|
|
color: #3985EA;
|
||
|
|
background: #EFF6FF;
|
||
|
|
border: 1px solid #BFDBFE;
|
||
|
|
border-radius: 4px;
|
||
|
|
cursor: pointer;
|
||
|
|
transition: all 0.15s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-help:hover {
|
||
|
|
background: #DBEAFE;
|
||
|
|
border-color: #93C5FD;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 액션 버튼 */
|
||
|
|
.pr-actions {
|
||
|
|
display: flex;
|
||
|
|
gap: 10px;
|
||
|
|
margin-top: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Quill 에디터 및 미리보기 이미지 크기 제한 */
|
||
|
|
.ql-editor img,
|
||
|
|
#previewContent img {
|
||
|
|
max-width: 100%;
|
||
|
|
height: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 도움말 모달 */
|
||
|
|
.help-modal-overlay {
|
||
|
|
display: none;
|
||
|
|
position: fixed;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
bottom: 0;
|
||
|
|
background: rgba(0, 0, 0, 0.5);
|
||
|
|
z-index: 9999;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.help-modal-overlay.active {
|
||
|
|
display: flex;
|
||
|
|
}
|
||
|
|
|
||
|
|
.help-modal {
|
||
|
|
background: #fff;
|
||
|
|
border-radius: 10px;
|
||
|
|
width: 640px;
|
||
|
|
max-height: 80vh;
|
||
|
|
overflow-y: auto;
|
||
|
|
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
|
||
|
|
}
|
||
|
|
|
||
|
|
.help-modal-header {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
padding: 20px 24px;
|
||
|
|
border-bottom: 1px solid #E5E7EB;
|
||
|
|
}
|
||
|
|
|
||
|
|
.help-modal-header h3 {
|
||
|
|
font-size: 16px;
|
||
|
|
font-weight: 700;
|
||
|
|
color: #1F2937;
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.help-modal-close {
|
||
|
|
width: 32px;
|
||
|
|
height: 32px;
|
||
|
|
border: none;
|
||
|
|
background: #F3F4F6;
|
||
|
|
border-radius: 6px;
|
||
|
|
cursor: pointer;
|
||
|
|
font-size: 16px;
|
||
|
|
color: #6B7280;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
transition: all 0.15s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.help-modal-close:hover {
|
||
|
|
background: #E5E7EB;
|
||
|
|
color: #374151;
|
||
|
|
}
|
||
|
|
|
||
|
|
.help-modal-body {
|
||
|
|
padding: 24px;
|
||
|
|
font-size: 13px;
|
||
|
|
color: #4B5563;
|
||
|
|
line-height: 1.8;
|
||
|
|
}
|
||
|
|
|
||
|
|
.help-modal-body h4 {
|
||
|
|
font-size: 14px;
|
||
|
|
font-weight: 700;
|
||
|
|
color: #1F2937;
|
||
|
|
margin: 20px 0 8px 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.help-modal-body h4:first-child {
|
||
|
|
margin-top: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.help-modal-body table {
|
||
|
|
width: 100%;
|
||
|
|
border-collapse: collapse;
|
||
|
|
margin: 8px 0 16px 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.help-modal-body table th {
|
||
|
|
background: #F9FAFB;
|
||
|
|
padding: 8px 12px;
|
||
|
|
text-align: left;
|
||
|
|
font-weight: 600;
|
||
|
|
border: 1px solid #E5E7EB;
|
||
|
|
font-size: 12px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.help-modal-body table td {
|
||
|
|
padding: 8px 12px;
|
||
|
|
border: 1px solid #E5E7EB;
|
||
|
|
font-size: 12px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.help-modal-body .tip-box {
|
||
|
|
background: #F0F9FF;
|
||
|
|
border: 1px solid #BAE6FD;
|
||
|
|
border-radius: 6px;
|
||
|
|
padding: 12px 16px;
|
||
|
|
margin-top: 16px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.help-modal-body .tip-box strong {
|
||
|
|
color: #0284C7;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</th:block>
|
||
|
|
<th:block layout:fragment="layout_top_script">
|
||
|
|
<script>
|
||
|
|
let menuClass = "[[${param.menuClass}]]" == "" ? "" : "[[${param.menuClass}]]";
|
||
|
|
let selectUseYn = "[[${selectUseYn}]]" == "" ? "N" : "[[${selectUseYn}]]";
|
||
|
|
let updateUseYn = "[[${updateUseYn}]]" == "" ? "N" : "[[${updateUseYn}]]";
|
||
|
|
let muProcedureReviewId = "[[${param.muProcedureReviewId}]]";
|
||
|
|
const CDN_URL = "[[${@environment.getProperty('url.cdn')}]]";
|
||
|
|
</script>
|
||
|
|
</th:block>
|
||
|
|
<th:block layout:fragment="layout_content">
|
||
|
|
<div class="center_box">
|
||
|
|
<p class="page_title" style="float:none; display:block; width:100%;">시술후기 수정</p>
|
||
|
|
|
||
|
|
<div class="pr-single-form">
|
||
|
|
<!-- 제목 -->
|
||
|
|
<div class="form-grid-row">
|
||
|
|
<div class="form-group">
|
||
|
|
<label>제목</label>
|
||
|
|
<input type="text" id="title" placeholder="제목을 입력해주세요." />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 내용 (Quill 에디터) -->
|
||
|
|
<div class="form-group" style="margin-bottom: 16px;">
|
||
|
|
<div class="content-header">
|
||
|
|
<label>내용</label>
|
||
|
|
<button type="button" class="btn-help" id="btnHelp">? 도움말</button>
|
||
|
|
</div>
|
||
|
|
<div id="quillEditor"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 해시태그 -->
|
||
|
|
<div class="form-grid-row">
|
||
|
|
<div class="form-group">
|
||
|
|
<label>해시태그</label>
|
||
|
|
<input type="text" id="hashtag" placeholder="#해시태그를 입력해주세요." />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 버튼 -->
|
||
|
|
<div class="pr-actions">
|
||
|
|
<button class="preview_btn btnPreview"
|
||
|
|
style="width: 90px; height: 36px; border-radius: 4px; background: #fff; color: #3985EA; border: 1px solid #3985EA; font-weight: 600; cursor: pointer;">미리보기</button>
|
||
|
|
<button class="registration_btn btnSave"
|
||
|
|
style="width: 80px; height: 36px; border-radius: 4px;">수정</button>
|
||
|
|
<button class="cancel_btn btnCancle"
|
||
|
|
style="width: 80px; height: 36px; border-radius: 4px; margin-left: 10px;">취소</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 미리보기 모달 -->
|
||
|
|
<div class="help-modal-overlay" id="previewModal">
|
||
|
|
<div class="help-modal" style="width: 800px; max-height: 90vh;">
|
||
|
|
<div class="help-modal-header">
|
||
|
|
<h3>👁 미리보기</h3>
|
||
|
|
<button class="help-modal-close" id="previewModalClose">✕</button>
|
||
|
|
</div>
|
||
|
|
<div class="help-modal-body" style="padding: 0;">
|
||
|
|
<!-- 제목 영역 -->
|
||
|
|
<div style="padding: 20px 24px; border-bottom: 1px solid #E5E7EB;">
|
||
|
|
<p style="font-size: 11px; color: #9CA3AF; margin-bottom: 4px;">제목</p>
|
||
|
|
<h2 id="previewTitle" style="font-size: 20px; font-weight: 700; color: #1F2937; margin: 0;"></h2>
|
||
|
|
</div>
|
||
|
|
<!-- 내용 영역 -->
|
||
|
|
<div style="padding: 24px;">
|
||
|
|
<div id="previewContent" class="ql-editor"
|
||
|
|
style="min-height: 200px; max-height: 500px; overflow-y: auto; padding: 0;"></div>
|
||
|
|
</div>
|
||
|
|
<!-- 해시태그 영역 -->
|
||
|
|
<div id="previewHashtagArea" style="padding: 12px 24px 20px; border-top: 1px solid #E5E7EB;">
|
||
|
|
<span id="previewHashtag"
|
||
|
|
style="display: inline-block; padding: 4px 12px; background: #EFF6FF; color: #3985EA; border-radius: 20px; font-size: 13px; font-weight: 500;"></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 도움말 모달 -->
|
||
|
|
<div class="help-modal-overlay" id="helpModal">
|
||
|
|
<div class="help-modal">
|
||
|
|
<div class="help-modal-header">
|
||
|
|
<h3>📝 에디터 사용 가이드</h3>
|
||
|
|
<button class="help-modal-close" id="helpModalClose">✕</button>
|
||
|
|
</div>
|
||
|
|
<div class="help-modal-body">
|
||
|
|
<h4>📌 텍스트 서식</h4>
|
||
|
|
<table>
|
||
|
|
<tr>
|
||
|
|
<th>기능</th>
|
||
|
|
<th>설명</th>
|
||
|
|
<th>단축키</th>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td><strong>B</strong> 굵게</td>
|
||
|
|
<td>선택한 텍스트를 굵게 표시</td>
|
||
|
|
<td>Ctrl+B</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td><em>I</em> 기울임</td>
|
||
|
|
<td>선택한 텍스트를 기울임꼴로 표시</td>
|
||
|
|
<td>Ctrl+I</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td><u>U</u> 밑줄</td>
|
||
|
|
<td>선택한 텍스트에 밑줄 적용</td>
|
||
|
|
<td>Ctrl+U</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td><s>S</s> 취소선</td>
|
||
|
|
<td>선택한 텍스트에 취소선 적용</td>
|
||
|
|
<td>-</td>
|
||
|
|
</tr>
|
||
|
|
</table>
|
||
|
|
|
||
|
|
<h4>🎨 글자 스타일</h4>
|
||
|
|
<table>
|
||
|
|
<tr>
|
||
|
|
<th>기능</th>
|
||
|
|
<th>설명</th>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>헤더 (H1~H6)</td>
|
||
|
|
<td>제목 크기를 설정합니다. 숫자가 작을수록 큰 제목</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>폰트</td>
|
||
|
|
<td>글꼴을 변경합니다</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>글자 크기</td>
|
||
|
|
<td>Small, Normal, Large, Huge 중 선택</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>글자색 / 배경색</td>
|
||
|
|
<td>텍스트 색상 또는 배경 하이라이트 색상 선택</td>
|
||
|
|
</tr>
|
||
|
|
</table>
|
||
|
|
|
||
|
|
<h4>📋 문단 서식</h4>
|
||
|
|
<table>
|
||
|
|
<tr>
|
||
|
|
<th>기능</th>
|
||
|
|
<th>설명</th>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>순서 목록</td>
|
||
|
|
<td>1. 2. 3. 형태의 번호 목록</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>비순서 목록</td>
|
||
|
|
<td>• 형태의 글머리 기호 목록</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>체크 목록</td>
|
||
|
|
<td>☐ 형태의 체크박스 목록</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>들여쓰기</td>
|
||
|
|
<td>텍스트를 안쪽/바깥쪽으로 이동</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>정렬</td>
|
||
|
|
<td>좌측, 중앙, 우측, 양쪽 정렬</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>인용문</td>
|
||
|
|
<td>인용 블록으로 표시</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>코드 블록</td>
|
||
|
|
<td>코드 형태로 표시</td>
|
||
|
|
</tr>
|
||
|
|
</table>
|
||
|
|
|
||
|
|
<h4>🔗 멀티미디어</h4>
|
||
|
|
<table>
|
||
|
|
<tr>
|
||
|
|
<th>기능</th>
|
||
|
|
<th>설명</th>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>링크</td>
|
||
|
|
<td>선택한 텍스트에 URL 링크 삽입</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>이미지</td>
|
||
|
|
<td>이미지 파일을 선택하여 삽입 (서버에 자동 업로드)</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>동영상</td>
|
||
|
|
<td>YouTube 등 동영상 URL을 삽입</td>
|
||
|
|
</tr>
|
||
|
|
</table>
|
||
|
|
|
||
|
|
<h4>🧹 기타</h4>
|
||
|
|
<table>
|
||
|
|
<tr>
|
||
|
|
<th>기능</th>
|
||
|
|
<th>설명</th>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>서식 지우기</td>
|
||
|
|
<td>선택한 텍스트의 모든 서식을 초기화</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>위첨자 / 아래첨자</td>
|
||
|
|
<td>X² 또는 H₂O 같은 수식 표현</td>
|
||
|
|
</tr>
|
||
|
|
</table>
|
||
|
|
|
||
|
|
<div class="tip-box">
|
||
|
|
<strong>💡 TIP</strong><br>
|
||
|
|
• 텍스트를 드래그한 후 툴바 버튼을 클릭하면 선택 영역에만 서식이 적용됩니다.<br>
|
||
|
|
• 이미지는 클립보드에서 Ctrl+V로 붙여넣기도 가능합니다.<br>
|
||
|
|
• 실행 취소는 Ctrl+Z, 다시 실행은 Ctrl+Y 입니다.
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</th:block>
|
||
|
|
<th:block layout:fragment="layout_popup">
|
||
|
|
</th:block>
|
||
|
|
<th:block layout:fragment="layout_script">
|
||
|
|
<script src="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.js"></script>
|
||
|
|
<script src="/js/crm/procedureReview/procedureReviewUpdate.js"></script>
|
||
|
|
</th:block>
|
||
|
|
|
||
|
|
</html>
|