Add attachment support to agreements and enhance image handling

src/main/resources/application.yml

@@ -211,6 +211,13 @@ page:
           corp:
             name: "법인회원가입"
             path: "/signup/portalOrg"
+      agreements:
+        name: 약관
+        path: "#"
+        children:
+          terms:
+            name: "이용약관 및 개인정보처리방침"
+            path: "/agreements/terms"
       about:
         name: 안내
         path: "#"
@@ -311,3 +318,8 @@ page:
           api_statistics:
             name: "이용 통계"
             path: "/statistics/api"
+
+# 에디터 이미지 설정 (약관 이미지 표시용)
+editor:
+  image:
+    base-url: /file/view

src/main/resources/static/css/main.css

@@ -17506,6 +17506,32 @@ body.commission-print-page .btn-primary:hover {
 
 .terms-content {
   padding: 0 32px;
+}
+.terms-content .terms-attachment {
+  margin-bottom: 16px;
+}
+.terms-content .terms-attachment .attachment-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 20px;
+  background: #FFFFFF;
+  border: 1px solid #0049b4;
+  border-radius: 6px;
+  color: #0049b4;
+  font-size: 14px;
+  font-weight: 500;
+  text-decoration: none;
+  transition: all 0.3s ease;
+}
+.terms-content .terms-attachment .attachment-link:hover {
+  background: #0049b4;
+  color: #FFFFFF;
+}
+.terms-content .terms-attachment .attachment-link svg {
+  flex-shrink: 0;
+}
+.terms-content {
   min-height: 400px;
   background-color: #F6F9FB;
 }
@@ -17516,6 +17542,8 @@ body.commission-print-page .btn-primary:hover {
   }
 }
 .terms-content .content-body {
+  padding-top: 24px;
+  padding-bottom: 24px;
   font-size: 16px;
   color: #1A1A2E;
   line-height: 1.8;
@@ -17523,6 +17551,8 @@ body.commission-print-page .btn-primary:hover {
 }
 @media (max-width: 768px) {
   .terms-content .content-body {
+    padding-top: 16px;
+    padding-bottom: 16px;
     font-size: 14px;
   }
 }

src/main/resources/static/sass/pages/_terms-agreements.scss

@@ -190,6 +190,35 @@
 // Terms Content (Figma: 컨텐츠 영역)
 .terms-content {
   padding: 0 $spacing-xl;
+
+  // Attachment Download (본문 영역 내)
+  .terms-attachment {
+    margin-bottom: $spacing-md;
+
+    .attachment-link {
+      display: inline-flex;
+      align-items: center;
+      gap: $spacing-sm;
+      padding: 10px 20px;
+      background: $white;
+      border: 1px solid $primary-blue;
+      border-radius: $border-radius-sm;
+      color: $primary-blue;
+      font-size: $font-size-sm;
+      font-weight: $font-weight-medium;
+      text-decoration: none;
+      transition: $transition-base;
+
+      &:hover {
+        background: $primary-blue;
+        color: $white;
+      }
+
+      svg {
+        flex-shrink: 0;
+      }
+    }
+  }
   min-height: 400px;
   background-color: #F6F9FB;
 
@@ -199,12 +228,16 @@
   }
 
   .content-body {
+    padding-top: $spacing-lg;
+    padding-bottom: $spacing-lg;
     font-size: 16px;
     color: $text-dark;
     line-height: 1.8;
     word-wrap: break-word;
 
     @media (max-width: $breakpoint-sm) {
+      padding-top: $spacing-md;
+      padding-bottom: $spacing-md;
       font-size: $font-size-sm;
     }
 

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

@@ -45,6 +45,18 @@
 
     <!-- Terms Content -->
     <div class="terms-content">
+      <!-- Attachment Download -->
+      <div class="terms-attachment" th:if="${selectedAgreement.attachedFileId != null}">
+        <a th:href="@{/file/download(fileId=${selectedAgreement.attachedFileId}, fileSn=1)}"
+           class="attachment-link">
+          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
+            <polyline points="7 10 12 15 17 10"></polyline>
+            <line x1="12" y1="15" x2="12" y2="3"></line>
+          </svg>
+          <span th:text="${selectedAgreement.attachedFileName} ?: '첨부파일 다운로드'">첨부파일 다운로드</span>
+        </a>
+      </div>
       <div class="content-body editor-content" th:utext="${selectedAgreement.contents}"></div>
     </div>
   </div>