관리자 포탈 summernote 영역 에디터 스타일 정규화

src/main/resources/static/css/editor-content.css

@@ -0,0 +1,334 @@
+/**
+ * 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: 16px 0 !important;
+    display: block !important;
+}
+
+/* ==========================================================================
+   코드 (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;
+    }
+}

src/main/resources/templates/views/apps/community/mainFaqList.html

@@ -50,7 +50,7 @@
           </span>
         </div>
         <div class="faq-answer">
-          <div class="faq-answer-content" th:utext="${faq.faqAnswer}">
+          <div class="faq-answer-content editor-content" th:utext="${faq.faqAnswer}">
             답변 내용이 여기에 표시됩니다.
           </div>
         </div>

src/main/resources/templates/views/apps/community/mainNoticeDetail.html

@@ -36,7 +36,7 @@
 
     <!-- Content Section -->
     <div class="notice-detail-content">
-      <div id="noticeDetail" class="notice-content-body" th:utext="${portalNotice.noticeDetail}">
+      <div id="noticeDetail" class="notice-content-body editor-content" th:utext="${portalNotice.noticeDetail}">
         공지사항 내용이 여기에 표시됩니다.
       </div>
     </div>

src/main/resources/templates/views/apps/main/newPolicyAgreement.html

@@ -22,7 +22,7 @@
                     <div class="total_wrap">
                         <div class="suv_ck active">
                             <div class="txt_wrap scrollbar"  style="display:block; min-height: 314px;" role="region" aria-label="개인정보처리방침 내용" tabindex="0">
-                                <div th:utext="${agreement?.contents ?: '개인정보처리방침 내용을 불러올 수 없습니다.'}"></div>
+                                <div class="editor-content" th:utext="${agreement?.contents ?: '개인정보처리방침 내용을 불러올 수 없습니다.'}"></div>
                                 <p style="margin-top: 10px;">
                                     <small>
                                         개정일: <span th:text="${#temporals.format(agreement?.publishedOn, 'yyyy년 MM월 dd일')}"></span>

src/main/resources/templates/views/apps/register/userAgreementContent.html

@@ -42,7 +42,7 @@
             </div>
             <div id="termsOfUseContent" class="agreement-content" style="display:none;">
                 <div class="agreement-scroll">
-                    <div th:utext="${termsOfUse?.contents ?: '이용약관 내용을 불러올 수 없습니다.'}"></div>
+                    <div class="editor-content" th:utext="${termsOfUse?.contents ?: '이용약관 내용을 불러올 수 없습니다.'}"></div>
                 </div>
             </div>
 
@@ -68,7 +68,7 @@
             </div>
             <div id="privacyCollectContent" class="agreement-content" style="display:none;">
                 <div class="agreement-scroll">
-                    <div th:utext="${privacyCollect?.contents ?: '개인정보수집동의서 내용을 불러올 수 없습니다.'}"></div>
+                    <div class="editor-content" th:utext="${privacyCollect?.contents ?: '개인정보수집동의서 내용을 불러올 수 없습니다.'}"></div>
                 </div>
             </div>
         </div>

src/main/resources/templates/views/fragment/kjbank/head.html

@@ -17,6 +17,7 @@
     <meta http-equiv="Expires" content="0">
     <link rel="stylesheet" type="text/css" th:href="@{/css/all.min.css}">
     <link rel="stylesheet" type="text/css" th:href="@{/css/main.css}">
+    <link rel="stylesheet" type="text/css" th:href="@{/css/editor-content.css}">
     <link rel="stylesheet" type="text/css" th:href="@{/css/slick.css}">
     <link rel="stylesheet" type="text/css" th:href="@{/css/daterangepicker.css}">
 

src/main/resources/templates/views/fragment/kjbank/terms_agreements.html

@@ -45,7 +45,7 @@
 
     <!-- Terms Content -->
     <div class="terms-content">
-      <div class="content-body" th:utext="${selectedAgreement.contents}"></div>
+      <div class="content-body editor-content" th:utext="${selectedAgreement.contents}"></div>
     </div>
   </div>
 </section>