이미지 업로드 중...
');
+ $editable.append($loading);
+
+ $.ajax({
+ url: options.uploadUrl,
+ method: 'POST',
+ data: formData,
+ processData: false,
+ contentType: false,
+ xhrFields: { withCredentials: true },
+ success: function(response) {
+ $loading.remove();
+
+ if (response.success) {
+ // 이미지 URL 생성 (쿼리 파라미터 방식)
+ var imageUrl = options.imageViewUrl + '?fileId=' + response.fileId + '&fileSn=' + response.fileSn;
+
+ // 이미지 삽입
+ $editor.summernote('insertImage', imageUrl, function($image) {
+ // 플레이스홀더 정보를 data 속성에 저장
+ $image.attr('data-file-id', response.fileId);
+ $image.attr('data-file-sn', response.fileSn);
+ $image.attr('data-placeholder', response.placeholder);
+ $image.css({
+ 'max-width': '100%',
+ 'height': 'auto'
+ });
+ });
+ } else {
+ alert('이미지 업로드 실패: ' + (response.error || '알 수 없는 오류'));
+ }
+ },
+ error: function(xhr, status, error) {
+ $loading.remove();
+ console.error('이미지 업로드 오류:', error);
+ alert('이미지 업로드 중 오류가 발생했습니다.');
+ }
+ });
+}
+
+/**
+ * 에디터 내용에서 이미지 태그를 플레이스홀더로 변환 (저장 시 호출)
+ * @param {string} contents - HTML 내용
+ * @returns {string} 플레이스홀더로 변환된 내용
+ */
+function convertImagesToPlaceholders(contents) {
+ if (!contents) return contents;
+
+ var $temp = $('').html(contents);
+
+ $temp.find('img[data-file-id]').each(function() {
+ var $img = $(this);
+ var fileId = $img.attr('data-file-id');
+ var fileSn = $img.attr('data-file-sn') || '1';
+
+ // 이미지 속성 수집
+ var attrs = [];
+ var width = $img.attr('width');
+ var height = $img.attr('height');
+ var style = $img.attr('style');
+
+ // width/height가 유효한 값일 때만 저장 (0, auto, 빈값 제외)
+ if (width && width !== 'auto' && width !== '0' && parseInt(width) > 0) {
+ attrs.push('width=' + String(width).replace('px', ''));
+ }
+ if (height && height !== 'auto' && height !== '0' && parseInt(height) > 0) {
+ attrs.push('height=' + String(height).replace('px', ''));
+ }
+ if (style && style.indexOf('width') === -1) {
+ // style에 width가 없는 경우만 저장 (중복 방지)
+ attrs.push('style=' + style);
+ }
+
+ // 플레이스홀더 생성
+ var placeholder = '{{IMG:' + fileId + ':' + fileSn;
+ if (attrs.length > 0) {
+ placeholder += '|' + attrs.join('|');
+ }
+ placeholder += '}}';
+
+ // 이미지 태그를 플레이스홀더로 교체
+ $img.replaceWith(placeholder);
+ });
+
+ return $temp.html();
+}
+
+/**
+ * 플레이스홀더를 이미지 태그로 변환 (불러올 때 호출)
+ * @param {string} contents - 플레이스홀더가 포함된 내용
+ * @param {string} baseImageUrl - 이미지 서빙 베이스 URL (예: /onl/apim/editor/image/view/)
+ * @returns {string} 이미지 태그로 변환된 HTML
+ */
+function convertPlaceholdersToImages(contents, baseImageUrl) {
+ if (!contents) return contents;
+
+ // 플레이스홀더 패턴: {{IMG:fileId:fileSn}} 또는 {{IMG:fileId:fileSn|속성}}
+ var pattern = /\{\{IMG:([a-f0-9\-]+):(\d+)(\|[^}]+)?\}\}/gi;
+
+ return contents.replace(pattern, function(match, fileId, fileSn, attrsStr) {
+ var imgTag = '

= 2) {
+ var key = kv[0];
+ var value = kv.slice(1).join('='); // = 가 포함된 값 처리
+ imgTag += ' ' + key + '="' + value + '"';
+ if (key === 'style') hasStyle = true;
+ }
+ }
+ }
+
+ // 기본 스타일 추가
+ if (!hasStyle) {
+ imgTag += ' style="max-width:100%;height:auto;"';
+ }
+
+ imgTag += ' />';
+ return imgTag;
+ });
+}
+
+/**
+ * 서버에서 이미지 파일 삭제
+ * @param {string} fileId - 삭제할 파일 ID
+ * @param {object} options - 옵션 (uploadUrl에서 delete URL 유추)
+ */
+function deleteImageFromServer(fileId, options) {
+ if (!fileId || !options.uploadUrl) return;
+
+ // uploadUrl에서 delete URL 유추: /upload.json -> /delete.json
+ var deleteUrl = options.uploadUrl.replace('/upload.json', '/delete.json');
+
+ $.ajax({
+ url: deleteUrl,
+ method: 'POST',
+ data: {
+ cmd: 'DELETE',
+ fileId: fileId
+ },
+ success: function(response) {
+ if (response.success) {
+ console.log('이미지 삭제 완료: ' + fileId);
+ } else {
+ console.warn('이미지 삭제 실패: ' + (response.error || ''));
+ }
+ },
+ error: function(xhr, status, error) {
+ console.error('이미지 삭제 오류:', error);
+ }
+ });
+}
+
+/**
+ * 내용에서 파일 ID 목록 추출 (cleanup용)
+ * @param {string} contents - HTML 또는 플레이스홀더가 포함된 내용
+ * @returns {Array} 파일 ID 배열
+ */
+function extractFileIdsFromContent(contents) {
+ if (!contents) return [];
+
+ var fileIds = [];
+ var seen = {};
+
+ // 플레이스홀더에서 추출
+ var placeholderPattern = /\{\{IMG:([a-f0-9\-]+):\d+(\|[^}]+)?\}\}/gi;
+ var match;
+ while ((match = placeholderPattern.exec(contents)) !== null) {
+ var fileId = match[1];
+ if (!seen[fileId]) {
+ seen[fileId] = true;
+ fileIds.push(fileId);
+ }
+ }
+
+ // img 태그의 data-file-id에서 추출
+ var $temp = $('
').html(contents);
+ $temp.find('img[data-file-id]').each(function() {
+ var fileId = $(this).attr('data-file-id');
+ if (fileId && !seen[fileId]) {
+ seen[fileId] = true;
+ fileIds.push(fileId);
+ }
+ });
+
+ return fileIds;
+}
diff --git a/WebContent/css/editor-content.css b/WebContent/css/editor-content.css
new file mode 100644
index 0000000..67817f9
--- /dev/null
+++ b/WebContent/css/editor-content.css
@@ -0,0 +1,383 @@
+/**
+ * Editor Content Styles (editor-content.css)
+ *
+ * Summernote 에디터로 작성된 HTML 콘텐츠의 공통 스타일
+ * 관리자포탈/개발자포탈 양쪽에서 동일하게 사용
+ *
+ * 사용법:
+ * - 관리자포탈: Summernote .note-editable에 .editor-content 클래스 추가
+ * - 개발자포탈: 콘텐츠 wrapper에 .editor-content 클래스 추가
+ *
+ * @version 1.0.0
+ * @date 2025-12-30
+ */
+
+/* ==========================================================================
+ CSS Reset + 기본 설정
+ ========================================================================== */
+
+.editor-content {
+ all: revert;
+ font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
+ font-size: 16px !important;
+ font-weight: 400 !important;
+ line-height: 1.8 !important;
+ color: #1A1A2E !important;
+ word-wrap: break-word;
+ text-align: left !important;
+}
+
+/* ==========================================================================
+ 헤딩 (Headings)
+ ========================================================================== */
+
+.editor-content h1 {
+ font-size: 20px !important;
+ font-weight: 700 !important;
+ margin: 32px 0 16px !important;
+ line-height: 1.4 !important;
+ color: #1A1A2E !important;
+}
+
+.editor-content h1:first-child {
+ margin-top: 0 !important;
+}
+
+.editor-content h2 {
+ font-size: 18px !important;
+ font-weight: 700 !important;
+ margin: 24px 0 8px !important;
+ line-height: 1.4 !important;
+ color: #1A1A2E !important;
+}
+
+.editor-content h3 {
+ font-size: 16px !important;
+ font-weight: 600 !important;
+ margin: 16px 0 8px !important;
+ line-height: 1.4 !important;
+ color: #1A1A2E !important;
+}
+
+.editor-content h4,
+.editor-content h5,
+.editor-content h6 {
+ font-size: 16px !important;
+ font-weight: 600 !important;
+ margin: 16px 0 8px !important;
+ line-height: 1.4 !important;
+ color: #1A1A2E !important;
+}
+
+/* ==========================================================================
+ 단락 (Paragraphs)
+ ========================================================================== */
+
+.editor-content p {
+ margin-bottom: 16px !important;
+ line-height: 1.8 !important;
+ font-size: 16px !important;
+}
+
+.editor-content p:last-child {
+ margin-bottom: 0 !important;
+}
+
+/* ==========================================================================
+ 리스트 (Lists) - 글로벌 reset 대응
+ ========================================================================== */
+
+.editor-content ul {
+ list-style-type: disc !important;
+ padding-left: 32px !important;
+ margin: 16px 0 !important;
+}
+
+.editor-content ol {
+ list-style-type: decimal !important;
+ padding-left: 32px !important;
+ margin: 16px 0 !important;
+}
+
+.editor-content li {
+ margin-bottom: 8px !important;
+ line-height: 1.8 !important;
+ font-size: 16px !important;
+}
+
+.editor-content li:last-child {
+ margin-bottom: 0 !important;
+}
+
+/* 중첩 리스트 */
+.editor-content ul ul {
+ list-style-type: circle !important;
+ margin: 8px 0 !important;
+}
+
+.editor-content ul ul ul {
+ list-style-type: square !important;
+}
+
+.editor-content ol ol {
+ list-style-type: lower-alpha !important;
+ margin: 8px 0 !important;
+}
+
+.editor-content ol ol ol {
+ list-style-type: lower-roman !important;
+}
+
+/* ==========================================================================
+ 테이블 (Tables)
+ ========================================================================== */
+
+.editor-content table {
+ width: 100% !important;
+ border-collapse: collapse !important;
+ margin: 24px 0 !important;
+ border: 1px solid #E2E8F0 !important;
+ border-radius: 8px !important;
+ overflow: hidden !important;
+ font-size: 14px !important;
+}
+
+.editor-content th,
+.editor-content td {
+ border: 1px solid #E2E8F0 !important;
+ padding: 8px 16px !important;
+ text-align: left !important;
+ vertical-align: top !important;
+}
+
+.editor-content th {
+ background: #EFF6FF !important;
+ font-weight: 600 !important;
+ color: #1A1A2E !important;
+}
+
+.editor-content tr:hover {
+ background: #F8FAFC !important;
+}
+
+/* ==========================================================================
+ 링크 (Links)
+ ========================================================================== */
+
+.editor-content a {
+ color: #0049b4 !important;
+ text-decoration: underline !important;
+ transition: color 0.3s ease !important;
+}
+
+.editor-content a:hover {
+ color: #003080 !important;
+}
+
+/* ==========================================================================
+ 인용문 (Blockquote)
+ ========================================================================== */
+
+.editor-content blockquote {
+ border-left: 4px solid #0049b4 !important;
+ padding: 16px 24px !important;
+ margin: 24px 0 !important;
+ background: #F8FAFC !important;
+ font-style: italic !important;
+ color: #64748B !important;
+ border-radius: 0 8px 8px 0 !important;
+}
+
+.editor-content blockquote p {
+ margin-bottom: 0 !important;
+}
+
+/* ==========================================================================
+ 이미지 (Images)
+ ========================================================================== */
+
+.editor-content img {
+ max-width: 100% !important;
+ height: auto !important;
+ border-radius: 8px !important;
+ margin-top: 16px !important;
+ margin-bottom: 16px !important;
+ /* margin-left, margin-right는 인라인 스타일로 정렬 제어 */
+}
+
+/* ==========================================================================
+ 코드 (Code)
+ ========================================================================== */
+
+.editor-content code {
+ background: #F8FAFC !important;
+ padding: 2px 6px !important;
+ border-radius: 4px !important;
+ font-family: 'Fira Code', 'Courier New', monospace !important;
+ font-size: 0.9em !important;
+ color: #0049b4 !important;
+}
+
+.editor-content pre {
+ background: #F8FAFC !important;
+ border: 1px solid #E2E8F0 !important;
+ border-radius: 8px !important;
+ padding: 16px !important;
+ overflow-x: auto !important;
+ margin: 16px 0 !important;
+}
+
+.editor-content pre code {
+ background: transparent !important;
+ padding: 0 !important;
+ color: #1A1A2E !important;
+}
+
+/* ==========================================================================
+ 구분선 (Horizontal Rule)
+ ========================================================================== */
+
+.editor-content hr {
+ border: none !important;
+ border-top: 1px solid #E2E8F0 !important;
+ margin: 32px 0 !important;
+}
+
+/* ==========================================================================
+ 텍스트 강조 (Text Emphasis)
+ ========================================================================== */
+
+.editor-content strong,
+.editor-content b {
+ font-weight: 700 !important;
+}
+
+.editor-content em,
+.editor-content i {
+ font-style: italic !important;
+}
+
+.editor-content u {
+ text-decoration: underline !important;
+}
+
+.editor-content s,
+.editor-content strike,
+.editor-content del {
+ text-decoration: line-through !important;
+}
+
+.editor-content mark {
+ background-color: #FEF3C7 !important;
+ padding: 0 2px !important;
+}
+
+.editor-content sub {
+ vertical-align: sub !important;
+ font-size: 0.8em !important;
+}
+
+.editor-content sup {
+ vertical-align: super !important;
+ font-size: 0.8em !important;
+}
+
+/* ==========================================================================
+ 반응형 (Responsive)
+ ========================================================================== */
+
+@media (max-width: 768px) {
+ .editor-content {
+ font-size: 14px !important;
+ }
+
+ .editor-content h1 {
+ font-size: 18px !important;
+ }
+
+ .editor-content h2 {
+ font-size: 16px !important;
+ }
+
+ .editor-content h3,
+ .editor-content h4,
+ .editor-content h5,
+ .editor-content h6 {
+ font-size: 14px !important;
+ }
+
+ .editor-content p,
+ .editor-content li {
+ font-size: 14px !important;
+ }
+
+ .editor-content table {
+ font-size: 12px !important;
+ }
+
+ .editor-content th,
+ .editor-content td {
+ padding: 4px 8px !important;
+ }
+
+ .editor-content ul,
+ .editor-content ol {
+ padding-left: 24px !important;
+ }
+
+ .editor-content blockquote {
+ padding: 8px 16px !important;
+ }
+
+ .editor-content pre {
+ padding: 8px !important;
+ }
+}
+
+/* ==========================================================================
+ Summernote 이미지 업로드 UI
+ ========================================================================== */
+
+/* 이미지 업로드 로딩 인디케이터 */
+.image-upload-loading {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ background: rgba(0, 73, 180, 0.9);
+ color: #fff;
+ padding: 12px 24px;
+ border-radius: 8px;
+ font-size: 14px;
+ z-index: 1000;
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+ animation: pulse 1.5s infinite;
+}
+
+@keyframes pulse {
+ 0%, 100% { opacity: 1; }
+ 50% { opacity: 0.7; }
+}
+
+/* 이미지 다이얼로그 업로드 안내 */
+.image-upload-guide {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ padding: 12px 16px;
+ background: #EFF6FF;
+ border: 1px solid #BFDBFE;
+ border-radius: 8px;
+ margin-bottom: 16px;
+ font-size: 13px;
+ color: #1E40AF;
+}
+
+.image-upload-guide .material-icons {
+ font-size: 18px;
+ color: #3B82F6;
+}
+
+.image-upload-guide strong {
+ font-weight: 600;
+}
diff --git a/WebContent/emergency.jsp b/WebContent/emergency.jsp
index 04bba57..667d56a 100644
--- a/WebContent/emergency.jsp
+++ b/WebContent/emergency.jsp
@@ -6,16 +6,17 @@
">
diff --git a/WebContent/js/common-en.js b/WebContent/js/common-en.js
index 0487b36..6a983ab 100644
--- a/WebContent/js/common-en.js
+++ b/WebContent/js/common-en.js
@@ -37,16 +37,14 @@ function isChromeBrowse() {
}
// find Context
-function getContextName()
-{
- // get context
- var loc = location.href;
- var sPos = loc.indexOf("/", 7)
- var ePos = loc.indexOf("/", sPos+1)
+function getContextName() {
+ // get context path from pathname (works with both http and https)
+ var pathname = location.pathname;
+ var pos = pathname.indexOf("/", 1);
- if (ePos == -1) return "/";
- else return loc.substr(sPos, ePos-sPos + 1);
-}
+ if (pos == -1) return pathname.endsWith("/") ? pathname : pathname + "/";
+ else return pathname.substring(0, pos + 1);
+}
// return today : 20081231
function getToday()
{
diff --git a/WebContent/js/common-ko.js b/WebContent/js/common-ko.js
index 8474645..59f170d 100644
--- a/WebContent/js/common-ko.js
+++ b/WebContent/js/common-ko.js
@@ -37,13 +37,12 @@ function isChromeBrowse() {
// find Context
function getContextName() {
- // get context
- var loc = location.href;
- var sPos = loc.indexOf("/", 7)
- var ePos = loc.indexOf("/", sPos + 1)
+ // get context path from pathname (works with both http and https)
+ var pathname = location.pathname;
+ var pos = pathname.indexOf("/", 1);
- if (ePos == -1) return "/";
- else return loc.substr(sPos, ePos - sPos + 1);
+ if (pos == -1) return pathname.endsWith("/") ? pathname : pathname + "/";
+ else return pathname.substring(0, pos + 1);
}
// return today : 20081231
diff --git a/WebContent/js/custom.js b/WebContent/js/custom.js
index c71c8b0..e6bb511 100644
--- a/WebContent/js/custom.js
+++ b/WebContent/js/custom.js
@@ -149,7 +149,7 @@ jQuery.showModalDialog = function(options) { $().showModalDialog(options); };
var originalError = options.error;
options.error = function(xhr, status, error) {
if(xhr.status === 401) {
- var location = getContextName() + '/';
+ var location = getContextName();
comloadError(xhr, status, error, location);
return;
}
diff --git a/WebContent/jsp/common/include/script.jsp b/WebContent/jsp/common/include/script.jsp
index 873de95..1e96177 100644
--- a/WebContent/jsp/common/include/script.jsp
+++ b/WebContent/jsp/common/include/script.jsp
@@ -56,9 +56,12 @@
">
">
+
">
">
">
+">
+"/>
", Pattern.CASE_INSENSITIVE),
- Pattern.compile("src[\r\n]*=[\r\n]*\\\'(.*?)\\\'",
- Pattern.CASE_INSENSITIVE | Pattern.MULTILINE | Pattern.DOTALL),
- Pattern.compile("src[\r\n]*=[\r\n]*\\\"(.*?)\\\"",
- Pattern.CASE_INSENSITIVE | Pattern.MULTILINE | Pattern.DOTALL),
Pattern.compile("", Pattern.CASE_INSENSITIVE),
Pattern.compile("