공지사항 상세 디자인 적용
This commit is contained in:
현성필
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -1,92 +1,75 @@
|
||||
<!doctype html>
|
||||
<!DOCTYPE html>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
|
||||
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout/kjbank_base_layout}">
|
||||
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout/kjbank_title_layout}">
|
||||
|
||||
<body>
|
||||
<section layout:fragment="title">
|
||||
<div class="page-title-banner">
|
||||
<img th:src="@{/img/img_title_bg.png}" class="title-image" alt="타이틀 배경">
|
||||
<h1>공지사항</h1>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<th:block layout:fragment="contentFragment">
|
||||
<!-- Notice Detail Page -->
|
||||
<div class="notice-detail-page">
|
||||
<div class="notice-detail-container">
|
||||
<section layout:fragment="contentFragment">
|
||||
<div class="notice-detail-container">
|
||||
|
||||
<!-- Page Header -->
|
||||
<div class="notice-header">
|
||||
<h1 class="page-title">공지사항</h1>
|
||||
</div>
|
||||
|
||||
<!-- Notice Detail Card -->
|
||||
<div class="notice-detail-card">
|
||||
<!-- Header Section -->
|
||||
<div class="detail-header">
|
||||
<h2 class="notice-title" th:text="${portalNotice.noticeSubject}">공지사항 제목</h2>
|
||||
<div class="notice-meta">
|
||||
<div class="meta-item">
|
||||
<i class="fas fa-calendar-alt"></i>
|
||||
<span>등록일</span>
|
||||
<strong th:text="${#temporals.format(portalNotice.createdDate, 'yyyy.MM.dd')}">2025.01.01</strong>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Attachments Section -->
|
||||
<div class="detail-attachments" th:if="${!#strings.isEmpty(portalNotice.fileId)}">
|
||||
<div class="attachment-list" th:with="fileInfo=${@fileService.findById(portalNotice.fileId)}">
|
||||
<div class="attachment-item" th:each="fileDetail, status : ${fileInfo.getFileDetails()}">
|
||||
<a th:href="'javascript:fn_downloadFile(\'' + ${fileDetail.fileId} + '\',\''+ ${fileDetail.fileSn} +'\')'">
|
||||
<i class="fas fa-paperclip"></i>
|
||||
<span>[[${fileDetail.originalFileName}]].[[${fileDetail.fileExtension}]]</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Content Section -->
|
||||
<div class="detail-content">
|
||||
<div id="noticeDetail" class="content-body" th:utext="${portalNotice.noticeDetail}">
|
||||
공지사항 내용이 여기에 표시됩니다.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Action Buttons -->
|
||||
<div class="notice-actions">
|
||||
<a href="#" class="action-btn btn-list" th:onclick="|window.location.href='@{/portalnotice}';|">
|
||||
<i class="fas fa-list"></i>
|
||||
<span>목록으로</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- Notice Header: Title and Date -->
|
||||
<div class="notice-detail-header">
|
||||
<h2 class="notice-detail-title" th:text="${portalNotice.noticeSubject}">개인정보처리 방침 정정 공지</h2>
|
||||
<span class="notice-detail-date" th:text="${#temporals.format(portalNotice.createdDate, 'yyyy.MM.dd')}">2025.11.01</span>
|
||||
</div>
|
||||
</th:block>
|
||||
|
||||
<!-- Attachment Section -->
|
||||
<div class="notice-detail-attachment" th:if="${!#strings.isEmpty(portalNotice.fileId)}">
|
||||
<div class="attachment-list" th:with="fileInfo=${@fileService.findById(portalNotice.fileId)}">
|
||||
<div class="attachment-item" th:each="fileDetail, status : ${fileInfo.getFileDetails()}">
|
||||
<a th:href="'javascript:fn_downloadFile(\'' + ${fileDetail.fileId} + '\',\''+ ${fileDetail.fileSn} +'\')'" class="notice-attachment-link">
|
||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M18 15.75C18 17.4833 17.3917 18.9583 16.175 20.175C14.9583 21.3917 13.4833 22 11.75 22C10.0167 22 8.54167 21.3917 7.325 20.175C6.10833 18.9583 5.5 17.4833 5.5 15.75V6.5C5.5 5.25 5.9375 4.1875 6.8125 3.3125C7.6875 2.4375 8.75 2 10 2C11.25 2 12.3125 2.4375 13.1875 3.3125C14.0625 4.1875 14.5 5.25 14.5 6.5V15.25C14.5 16.0167 14.2333 16.6667 13.7 17.2C13.1667 17.7333 12.5167 18 11.75 18C10.9833 18 10.3333 17.7333 9.8 17.2C9.26667 16.6667 9 16.0167 9 15.25V6H11V15.25C11 15.4667 11.0708 15.6458 11.2125 15.7875C11.3542 15.9292 11.5333 16 11.75 16C11.9667 16 12.1458 15.9292 12.2875 15.7875C12.4292 15.6458 12.5 15.4667 12.5 15.25V6.5C12.4833 5.8 12.2375 5.20833 11.7625 4.725C11.2875 4.24167 10.7 4 10 4C9.3 4 8.70833 4.24167 8.225 4.725C7.74167 5.20833 7.5 5.8 7.5 6.5V15.75C7.48333 16.9333 7.89167 17.9375 8.725 18.7625C9.55833 19.5875 10.5667 20 11.75 20C12.9167 20 13.9083 19.5875 14.725 18.7625C15.5417 17.9375 15.9667 16.9333 16 15.75V6H18V15.75Z" fill="currentColor"/>
|
||||
</svg>
|
||||
<span class="attachment-label">첨부파일</span>
|
||||
<span class="attachment-filename">[[${fileDetail.originalFileName}]].[[${fileDetail.fileExtension}]]</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Content Section -->
|
||||
<div class="notice-detail-content">
|
||||
<div id="noticeDetail" class="notice-content-body" th:utext="${portalNotice.noticeDetail}">
|
||||
공지사항 내용이 여기에 표시됩니다.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Action Buttons -->
|
||||
<div class="notice-detail-actions">
|
||||
<button type="button" class="btn-notice-list" th:onclick="|location.href='@{/portalnotice}'|">목록</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</body>
|
||||
|
||||
<th:block layout:fragment="contentScript">
|
||||
<script>
|
||||
$(function () {
|
||||
// You can add any necessary JavaScript here
|
||||
})
|
||||
<script>
|
||||
function fn_downloadFile(fileId, fileSn) {
|
||||
window.open('[[@{/file/download}]]' + "?fileId=" + fileId + "&fileSn=" + fileSn);
|
||||
}
|
||||
|
||||
function fn_downloadFile(fileId, fileSn) {
|
||||
window.open('[[@{/file/download}]]' + "?fileId=" + fileId + "&fileSn=" + fileSn);
|
||||
}
|
||||
function decodeHTMLEntities(text) {
|
||||
var textArea = document.createElement('textarea');
|
||||
textArea.innerHTML = text;
|
||||
return textArea.value;
|
||||
}
|
||||
|
||||
function decodeHTMLEntities(text) {
|
||||
var textArea = document.createElement('textarea');
|
||||
textArea.innerHTML = text;
|
||||
return textArea.value;
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
var element = document.getElementById('noticeDetail');
|
||||
if (element) {
|
||||
element.innerHTML = decodeHTMLEntities(element.innerHTML);
|
||||
} else {
|
||||
console.error('Element with id "noticeDetail" not found');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
var element = document.getElementById('noticeDetail');
|
||||
if (element) {
|
||||
element.innerHTML = decodeHTMLEntities(element.innerHTML);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</th:block>
|
||||
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user