사용자 최근 작성 글 조회 기능 추가:
- 최근 3건 조회 서비스/페이사드/리포지토리 구현 - HTML 아코디언 UI 및 스타일 추가
This commit is contained in:
@@ -11,6 +11,23 @@
|
||||
</section>
|
||||
|
||||
<th:block layout:fragment="contentFragment">
|
||||
<style>
|
||||
.recent-apps { margin: 0 0 24px; }
|
||||
.recent-apps-title { font-size: 15px; font-weight: 600; color: #334155; margin: 0 0 10px; }
|
||||
.recent-apps-list { list-style: none; margin: 0; padding: 0; border: 1px solid #E2E8F0; border-radius: 8px; overflow: hidden; }
|
||||
.recent-apps-item + .recent-apps-item { border-top: 1px solid #E2E8F0; }
|
||||
.recent-apps-head { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px;
|
||||
background: #F8FAFC; border: 0; cursor: pointer; text-align: left; font: inherit; }
|
||||
.recent-apps-head:hover { background: #F1F5F9; }
|
||||
.recent-apps-subject { flex: 1; min-width: 0; font-size: 14px; font-weight: 500; color: #1E293B;
|
||||
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.recent-apps-date { flex-shrink: 0; font-size: 12px; color: #94A3B8; }
|
||||
.recent-apps-arrow { flex-shrink: 0; color: #94A3B8; transition: transform .2s ease; }
|
||||
.recent-apps-item.is-open .recent-apps-arrow { transform: rotate(180deg); }
|
||||
.recent-apps-body { display: none; padding: 14px 16px; background: #fff; }
|
||||
.recent-apps-item.is-open .recent-apps-body { display: block; }
|
||||
.recent-apps-detail { margin: 0; font-size: 13px; line-height: 1.6; color: #475569; white-space: pre-wrap; word-break: break-word; }
|
||||
</style>
|
||||
<section class="inquiry-form-container">
|
||||
|
||||
<!-- Title Bar -->
|
||||
@@ -19,6 +36,27 @@
|
||||
<span class="register-subtitle">DJBank은 온라인 비즈니스 혁신을 위한 피드백/개선요청을 환영합니다.</span>
|
||||
</div>
|
||||
|
||||
<!-- 내가 작성한 최근 글(최대 3건) 아코디언 -->
|
||||
<div class="recent-apps" th:if="${recentApplications != null and !recentApplications.isEmpty()}">
|
||||
<p class="recent-apps-title">내가 작성한 최근 글</p>
|
||||
<ul class="recent-apps-list">
|
||||
<li class="recent-apps-item" th:each="item : ${recentApplications}">
|
||||
<button type="button" class="recent-apps-head">
|
||||
<span class="recent-apps-subject" th:text="${item.bizSubject}">제목</span>
|
||||
<span class="recent-apps-date"
|
||||
th:text="${item.createdDate != null ? #temporals.format(item.createdDate, 'yyyy.MM.dd') : ''}">2026.07.13</span>
|
||||
<svg class="recent-apps-arrow" width="18" height="18" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="2" aria-hidden="true">
|
||||
<polyline points="6 9 12 15 18 9"></polyline>
|
||||
</svg>
|
||||
</button>
|
||||
<div class="recent-apps-body">
|
||||
<p class="recent-apps-detail" th:text="${item.bizDetail}">내용</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Form Content -->
|
||||
<div class="register-form-container">
|
||||
<form name="partnershipForm" id="partnershipForm" th:action="@{/partnership}" th:object="${partnership}"
|
||||
@@ -131,6 +169,13 @@
|
||||
</script>
|
||||
<script th:inline="javascript">
|
||||
$(function () {
|
||||
// 최근 글 아코디언 토글
|
||||
document.querySelectorAll('.recent-apps-head').forEach(function (head) {
|
||||
head.addEventListener('click', function () {
|
||||
head.closest('.recent-apps-item').classList.toggle('is-open');
|
||||
});
|
||||
});
|
||||
|
||||
const btnSubmit = document.querySelector('.btn-submit-form');
|
||||
const fileInput = document.getElementById('file');
|
||||
const fileDisplayText = document.getElementById('fileDisplayText');
|
||||
|
||||
Reference in New Issue
Block a user