diff --git a/src/main/resources/static/sass/components/_forms.scss b/src/main/resources/static/sass/components/_forms.scss index 9e33df8..1fe0e99 100644 --- a/src/main/resources/static/sass/components/_forms.scss +++ b/src/main/resources/static/sass/components/_forms.scss @@ -751,3 +751,92 @@ select.form-control { box-shadow: 0 0 0 2px rgba($primary-blue, 0.1); } } + +// ----------------------------------------------------------------------------- +// Notice Content Box - For notice detail page content display +// ----------------------------------------------------------------------------- +.notice-content-box { + padding: $spacing-lg; + background: $white; + border: 1px solid $border-gray; + border-radius: $border-radius-md; + min-height: 300px; + line-height: $line-height-loose; + font-size: $font-size-base; + color: $text-dark; + + @include respond-to('sm') { + padding: $spacing-md; + min-height: 200px; + } + + // Rich text content styling + p { + margin-bottom: $spacing-md; + } + + img { + max-width: 100%; + height: auto; + } + + a { + color: $primary-blue; + text-decoration: underline; + + &:hover { + color: darken($primary-blue, 10%); + } + } +} + +// Form row modifier for content area +.form-row--content { + .form-label-wrapper { + align-self: flex-start; + } +} + +// ----------------------------------------------------------------------------- +// Attachment Link - For downloadable file links in detail pages +// ----------------------------------------------------------------------------- +.attachment-link { + display: inline-flex; + align-items: center; + gap: $spacing-sm; + padding: $spacing-sm $spacing-md; + background: $light-bg; + border: 1px solid $border-gray; + border-radius: $border-radius-md; + color: $text-dark; + font-size: $font-size-sm; + text-decoration: none; + transition: $transition-base; + + &:hover { + background: rgba($primary-blue, 0.05); + border-color: $primary-blue; + color: $primary-blue; + } + + svg { + flex-shrink: 0; + color: $text-gray; + } + + &:hover svg { + color: $primary-blue; + } +} + +// Attachment list container +.attachment-list { + display: flex; + flex-direction: column; + gap: $spacing-sm; +} + +.attachment-item { + display: flex; + align-items: center; +} diff --git a/src/main/resources/static/sass/pages/_notice.scss b/src/main/resources/static/sass/pages/_notice.scss index ef69687..939133f 100644 --- a/src/main/resources/static/sass/pages/_notice.scss +++ b/src/main/resources/static/sass/pages/_notice.scss @@ -60,20 +60,199 @@ margin-bottom: $spacing-xl; } -// Notice detail page -.notice-detail-page { - min-height: calc(100vh - 140px); - background: $gray-bg; +// ----------------------------------------------------------------------------- +// Notice Detail Page - Figma Design (node 1041:2585) +// ----------------------------------------------------------------------------- +.notice-detail-container { + max-width: 1228px; + margin: 0 auto; padding: $spacing-3xl $spacing-lg; - @media (max-width: $breakpoint-sm) { + @media (max-width: $breakpoint-md) { padding: $spacing-2xl $spacing-md; } } -.notice-detail-container { - max-width: 960px; - margin: 0 auto; +// Notice Detail Header - Title and Date in one row +.notice-detail-header { + display: flex; + justify-content: space-between; + align-items: center; + padding-bottom: $spacing-md; + border-bottom: 1px solid #212529; + margin-bottom: $spacing-xl; + + @media (max-width: $breakpoint-md) { + flex-direction: column; + align-items: flex-start; + gap: $spacing-sm; + } +} + +.notice-detail-title { + font-size: 24px; + font-weight: $font-weight-bold; + color: #212529; + line-height: 1; + margin: 0; + + @media (max-width: $breakpoint-md) { + font-size: 20px; + } +} + +.notice-detail-date { + font-size: 24px; + font-weight: $font-weight-regular; + color: #515151; + + @media (max-width: $breakpoint-md) { + font-size: 16px; + } +} + +// Notice Attachment Section +.notice-detail-attachment { + margin-bottom: $spacing-lg; + + .attachment-list { + display: flex; + flex-direction: column; + gap: $spacing-sm; + } + + .attachment-item { + display: flex; + align-items: center; + } +} + +.notice-attachment-link { + display: inline-flex; + align-items: center; + gap: $spacing-xs; + color: #515151; + font-size: 18px; + text-decoration: none; + transition: $transition-base; + + @media (max-width: $breakpoint-md) { + font-size: 14px; + } + + &:hover { + color: $primary-blue; + } + + svg { + flex-shrink: 0; + color: #515151; + } + + &:hover svg { + color: $primary-blue; + } + + .attachment-label { + margin-right: $spacing-md; + } + + .attachment-filename { + color: #515151; + } +} + +// Notice Content Section +.notice-detail-content { + margin-bottom: $spacing-3xl; +} + +.notice-content-body { + background: #F6F9FB; + border-radius: 20px; + padding: $spacing-2xl; + min-height: 280px; + font-size: $font-size-base; + color: $text-dark; + line-height: $line-height-loose; + + @media (max-width: $breakpoint-md) { + padding: $spacing-lg; + min-height: 200px; + border-radius: 12px; + } + + // Rich text content styling + p { + margin-bottom: $spacing-md; + + &:last-child { + margin-bottom: 0; + } + } + + img { + max-width: 100%; + height: auto; + border-radius: $border-radius-md; + margin: $spacing-lg 0; + } + + a { + color: $primary-blue; + text-decoration: underline; + + &:hover { + color: $secondary-blue; + } + } + + ul, ol { + margin: $spacing-md 0; + padding-left: $spacing-xl; + } + + li { + margin-bottom: $spacing-sm; + } +} + +// Notice Detail Actions +.notice-detail-actions { + display: flex; + justify-content: center; +} + +// List Button - Figma Design +.btn-notice-list { + display: flex; + align-items: center; + justify-content: center; + width: 200px; + height: 60px; + background: #E5E7EB; + border: none; + border-radius: 12px; + font-family: $font-family-primary; + font-size: 18px; + font-weight: $font-weight-bold; + color: #5F666C; + cursor: pointer; + transition: $transition-base; + + @media (max-width: $breakpoint-md) { + width: 160px; + height: 50px; + font-size: 16px; + } + + &:hover { + background: darken(#E5E7EB, 5%); + } + + &:active { + transform: scale(0.98); + } } // Notice detail card diff --git a/src/main/resources/templates/views/apps/community/mainNoticeDetail.html b/src/main/resources/templates/views/apps/community/mainNoticeDetail.html index 0531b89..b7dec64 100644 --- a/src/main/resources/templates/views/apps/community/mainNoticeDetail.html +++ b/src/main/resources/templates/views/apps/community/mainNoticeDetail.html @@ -1,92 +1,75 @@ - + + xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout/kjbank_title_layout}"> +
+
+ 타이틀 배경 +

공지사항

+
+
- - -
-
+
+
- -
-

공지사항

-
- - -
- -
-

공지사항 제목

-
-
- - 등록일 - 2025.01.01 -
-
-
- - -
-
-
- - - [[${fileDetail.originalFileName}]].[[${fileDetail.fileExtension}]] - -
-
-
- - -
-
- 공지사항 내용이 여기에 표시됩니다. -
-
-
- - -
- - - 목록으로 - -
- -
+ +
+

개인정보처리 방침 정정 공지

+ 2025.11.01
- + + +
+
+
+ + + + + 첨부파일 + [[${fileDetail.originalFileName}]].[[${fileDetail.fileExtension}]] + +
+
+
+ + +
+
+ 공지사항 내용이 여기에 표시됩니다. +
+
+ + +
+ +
+ +
+ - + document.addEventListener('DOMContentLoaded', function() { + var element = document.getElementById('noticeDetail'); + if (element) { + element.innerHTML = decodeHTMLEntities(element.innerHTML); + } + }); +