From 4833ef92d3c5de27bac0c40c85a973e42e10a933 Mon Sep 17 00:00:00 2001
From: Rinjae <dearmai@dearmai.net>
Date: Tue, 30 Dec 2025 15:32:12 +0900
Subject: [PATCH] =?UTF-8?q?=EA=B4=80=EB=A6=AC=EC=9E=90=20=ED=8F=AC?=
 =?UTF-8?q?=ED=83=88=20summernote=20=EC=98=81=EC=97=AD=20=EC=97=90?=
 =?UTF-8?q?=EB=94=94=ED=84=B0=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=A0=95?=
 =?UTF-8?q?=EA=B7=9C=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../resources/static/css/editor-content.css   | 334 ++++++++++++++++++
 .../views/apps/community/mainFaqList.html     |   2 +-
 .../apps/community/mainNoticeDetail.html      |   2 +-
 .../views/apps/main/newPolicyAgreement.html   |   2 +-
 .../apps/register/userAgreementContent.html   |   4 +-
 .../templates/views/fragment/kjbank/head.html |   1 +
 .../fragment/kjbank/terms_agreements.html     |   2 +-
 7 files changed, 341 insertions(+), 6 deletions(-)
 create mode 100644 src/main/resources/static/css/editor-content.css

diff --git a/src/main/resources/static/css/editor-content.css b/src/main/resources/static/css/editor-content.css
new file mode 100644
index 0000000..c144110
--- /dev/null
+++ b/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;
+    }
+}
diff --git a/src/main/resources/templates/views/apps/community/mainFaqList.html b/src/main/resources/templates/views/apps/community/mainFaqList.html
index 7fb1dda..dd516a4 100644
--- a/src/main/resources/templates/views/apps/community/mainFaqList.html
+++ b/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>
diff --git a/src/main/resources/templates/views/apps/community/mainNoticeDetail.html b/src/main/resources/templates/views/apps/community/mainNoticeDetail.html
index b7dec64..5276a94 100644
--- a/src/main/resources/templates/views/apps/community/mainNoticeDetail.html
+++ b/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>
diff --git a/src/main/resources/templates/views/apps/main/newPolicyAgreement.html b/src/main/resources/templates/views/apps/main/newPolicyAgreement.html
index d95fde0..a2bf9f5 100644
--- a/src/main/resources/templates/views/apps/main/newPolicyAgreement.html
+++ b/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>
diff --git a/src/main/resources/templates/views/apps/register/userAgreementContent.html b/src/main/resources/templates/views/apps/register/userAgreementContent.html
index 8744ce5..dfacf17 100644
--- a/src/main/resources/templates/views/apps/register/userAgreementContent.html
+++ b/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>
diff --git a/src/main/resources/templates/views/fragment/kjbank/head.html b/src/main/resources/templates/views/fragment/kjbank/head.html
index 90fa060..37b82f5 100644
--- a/src/main/resources/templates/views/fragment/kjbank/head.html
+++ b/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}">
 
diff --git a/src/main/resources/templates/views/fragment/kjbank/terms_agreements.html b/src/main/resources/templates/views/fragment/kjbank/terms_agreements.html
index b753940..ad1fdb0 100644
--- a/src/main/resources/templates/views/fragment/kjbank/terms_agreements.html
+++ b/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>