Q&A 리스트 퍼블리싱
This commit is contained in:
hong
@@ -1,112 +1,135 @@
|
|||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
|
<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/djbank_title_layout}">
|
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout/djbank_title_layout}">
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<section layout:fragment="title">
|
<th:block layout:fragment="contentFragment">
|
||||||
<div class="page-title-banner">
|
<div class="signup-guide-v2">
|
||||||
<img th:src="@{/img/img_title_bg.png}" class="title-image" alt="타이틀 배경">
|
<!-- Hero Section -->
|
||||||
<h1>Q&A</h1>
|
<section class="service-hero">
|
||||||
</div>
|
<div class="service-hero__inner">
|
||||||
</section>
|
<div class="service-hero__icon-wrapper">
|
||||||
|
<!-- Used notice icon as a placeholder, can be updated if inquiry icon exists -->
|
||||||
<th:block layout:fragment="contentFragment">
|
<img th:src="@{/img/keyimage/notice_img.svg}" alt="Q&A 아이콘"
|
||||||
<section class="user-management-container inquiry-list-container">
|
style="width: 100%; height: 100%; object-fit: contain;" />
|
||||||
|
|
||||||
<!-- Search and Filter Controls -->
|
|
||||||
<form name="inquiryForm" th:action="@{/inquiry}" method="get" onsubmit="return false;">
|
|
||||||
<input type="hidden" name="page" value="1">
|
|
||||||
<input name="searchCnd" type="hidden" value="0">
|
|
||||||
|
|
||||||
<div class="table-controls">
|
|
||||||
<h2 class="total-count">
|
|
||||||
총 <strong th:text="${page.totalElements}">0</strong>건
|
|
||||||
</h2>
|
|
||||||
|
|
||||||
<div class="search-field">
|
|
||||||
<input type="text"
|
|
||||||
name="searchWrd"
|
|
||||||
th:value="${search.searchWrd}"
|
|
||||||
placeholder="제목 또는 내용으로 검색"
|
|
||||||
onkeypress="if(event.keyCode === 13) { fn_search_inquiry(); return false; }">
|
|
||||||
<button type="button" class="search-field-btn" onclick="fn_search_inquiry()">
|
|
||||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M17.5 17.5L13.875 13.875M15.8333 9.16667C15.8333 12.8486 12.8486 15.8333 9.16667 15.8333C5.48477 15.8333 2.5 12.8486 2.5 9.16667C2.5 5.48477 5.48477 2.5 9.16667 2.5C12.8486 2.5 15.8333 5.48477 15.8333 9.16667Z" stroke="currentColor" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
|
|
||||||
</svg>
|
|
||||||
<span class="blind">검색</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<!-- Inquiry Table -->
|
|
||||||
<div class="list-table" th:if="${!inquiries.isEmpty()}">
|
|
||||||
<!-- Table Header -->
|
|
||||||
<div class="list-table-header">
|
|
||||||
<div class="header-cell" style="width: 80px;">NO</div>
|
|
||||||
<div class="header-cell" style="flex: 1; min-width: 200px;">제목</div>
|
|
||||||
<div class="header-cell" style="width: 100px;">작성자</div>
|
|
||||||
<div class="header-cell" style="width: 120px;">처리상태</div>
|
|
||||||
<div class="header-cell" style="width: 120px;">등록일</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Table Body -->
|
|
||||||
<div class="list-table-body">
|
|
||||||
<div class="list-table-row"
|
|
||||||
th:each="inquiry, status : ${inquiries}"
|
|
||||||
th:onclick="'location.href=\'' + @{/inquiry/detail(id=${inquiry.id})} + '\''"
|
|
||||||
style="cursor: pointer;">
|
|
||||||
<div class="row-cell row-cell--number" style="width: 80px;" data-label="NO"
|
|
||||||
th:text="${page.totalElements - (page.number * page.size) - status.index}">1</div>
|
|
||||||
<div class="row-cell row-cell--title" style="flex: 1; min-width: 200px;" data-label="제목">
|
|
||||||
<a th:href="@{/inquiry/detail(id=${inquiry.id})}" class="notice-title-link">
|
|
||||||
<span class="notice-number" th:text="|[${page.totalElements - (page.number * page.size) - status.index}]|">[1]</span>
|
|
||||||
<span th:text="${inquiry.inquirySubject}">질문 제목</span>
|
|
||||||
<span class="inquiry-comment-count"
|
|
||||||
th:if="${commentCounts != null and commentCounts.get(inquiry.id) != null and commentCounts.get(inquiry.id) > 0}"
|
|
||||||
th:text="|[${commentCounts.get(inquiry.id)}]|">[3]</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="row-cell" style="width: 100px;" data-label="작성자" th:text="${inquiry.maskedInquirerName}">홍**</div>
|
<div class="service-hero__content">
|
||||||
<div class="row-cell" style="width: 120px;" data-label="처리상태">
|
<div class="service-hero__badge">
|
||||||
<span class="inquiry-status-badge"
|
<span class="service-hero__badge-dot"></span>
|
||||||
th:classappend="${inquiry.inquiryStatus == 'RESPONDED' ? 'inquiry-status-badge--completed' : (inquiry.inquiryStatus == 'CLOSED' ? 'inquiry-status-badge--closed' : 'inquiry-status-badge--pending')}"
|
<span class="service-hero__badge-text">공지사항 목록</span>
|
||||||
th:text="${inquiry.inquiryStatus == 'RESPONDED' ? '답변완료' : (inquiry.inquiryStatus == 'CLOSED' ? '종료' : '답변대기')}">
|
</div>
|
||||||
답변대기
|
<h1 class="service-hero__title">Q&A</h1>
|
||||||
</span>
|
<p class="service-hero__desc">DJBank 오픈 API 이용 중 발생한 의문점이나 불편 사항을 보내주세요<br>접수해주신 문의 사항은 담당자 확인 후 빠르게 안내해
|
||||||
|
드리겠습니다.</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="row-cell" style="width: 120px;" data-label="등록일"
|
|
||||||
th:text="${#temporals.format(inquiry.createdDate, 'yyyy.MM.dd')}">2025.01.01</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Main Content -->
|
||||||
|
<div class="service-main">
|
||||||
|
<!-- Sidebar -->
|
||||||
|
<th:block th:replace="~{fragment/djbank/service_sidebar :: sidebar('qna')}"></th:block>
|
||||||
|
|
||||||
|
<!-- Content -->
|
||||||
|
<section class="service-content">
|
||||||
|
<section class="user-management-container inquiry-list-container"
|
||||||
|
style="padding: 0; min-height: auto; margin: 0; background: transparent; box-shadow: none;">
|
||||||
|
|
||||||
|
<!-- Search and Filter Controls -->
|
||||||
|
<form name="inquiryForm" th:action="@{/inquiry}" method="get" onsubmit="return false;">
|
||||||
|
<input type="hidden" name="page" value="1">
|
||||||
|
<input name="searchCnd" type="hidden" value="0">
|
||||||
|
|
||||||
|
<div class="table-controls">
|
||||||
|
<h2 class="total-count">
|
||||||
|
총 <strong th:text="${page.totalElements}">0</strong>건
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<div class="search-field">
|
||||||
|
<input type="text" name="searchWrd" th:value="${search.searchWrd}" placeholder="제목/내용 검색"
|
||||||
|
onkeypress="if(event.keyCode === 13) { fn_search_inquiry(); return false; }">
|
||||||
|
<button type="button" class="search-field-btn" onclick="fn_search_inquiry()">
|
||||||
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path
|
||||||
|
d="M17.5 17.5L13.875 13.875M15.8333 9.16667C15.8333 12.8486 12.8486 15.8333 9.16667 15.8333C5.48477 15.8333 2.5 12.8486 2.5 9.16667C2.5 5.48477 5.48477 2.5 9.16667 2.5C12.8486 2.5 15.8333 5.48477 15.8333 9.16667Z"
|
||||||
|
stroke="currentColor" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round" />
|
||||||
|
</svg>
|
||||||
|
<span class="blind">검색</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<!-- Inquiry Table -->
|
||||||
|
<div class="board-table" th:if="${!inquiries.isEmpty()}">
|
||||||
|
<!-- Table Header -->
|
||||||
|
<div class="board-table-header">
|
||||||
|
<div class="header-cell" style="width: 80px;">NO</div>
|
||||||
|
<div class="header-cell" style="flex: 1; min-width: 200px;">제목</div>
|
||||||
|
<div class="header-cell" style="width: 120px;">등록일</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Table Body -->
|
||||||
|
<div class="board-table-body">
|
||||||
|
<div class="board-table-row" th:each="inquiry, status : ${inquiries}"
|
||||||
|
th:onclick="'location.href=\'' + @{/inquiry/detail(id=${inquiry.id})} + '\''"
|
||||||
|
style="cursor: pointer;">
|
||||||
|
<div class="row-cell row-cell--number" style="width: 80px;" data-label="NO"
|
||||||
|
th:text="${page.totalElements - (page.number * page.size) - status.index}">1</div>
|
||||||
|
<div class="row-cell row-cell--title" style="flex: 1; min-width: 200px;" data-label="제목">
|
||||||
|
<a th:href="@{/inquiry/detail(id=${inquiry.id})}" class="notice-title-link">
|
||||||
|
<span class="notice-number"
|
||||||
|
th:text="|[${page.totalElements - (page.number * page.size) - status.index}]|">[1]</span>
|
||||||
|
|
||||||
|
<span class="notice-type-badge notice-type-badge--maintenance"
|
||||||
|
th:if="${inquiry.inquiryStatus == 'PENDING'}">답변대기</span>
|
||||||
|
<span class="notice-type-badge notice-type-badge--fix"
|
||||||
|
th:if="${inquiry.inquiryStatus == 'RESPONDED'}">답변완료</span>
|
||||||
|
<span class="notice-type-badge notice-type-badge--incident"
|
||||||
|
th:if="${inquiry.inquiryStatus == 'CLOSED'}">종료</span>
|
||||||
|
|
||||||
|
<span th:text="${inquiry.inquirySubject}">질문 제목</span>
|
||||||
|
<span class="inquiry-comment-count"
|
||||||
|
th:if="${commentCounts != null and commentCounts.get(inquiry.id) != null and commentCounts.get(inquiry.id) > 0}"
|
||||||
|
th:text="|[${commentCounts.get(inquiry.id)}]|">[3]</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="row-cell" style="width: 120px;" data-label="등록일"
|
||||||
|
th:text="${#temporals.format(inquiry.createdDate, 'yyyy.MM.dd')}">2025.01.01</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Empty State -->
|
||||||
|
<div class="user-empty-state" th:if="${inquiries.isEmpty()}">
|
||||||
|
<h3>조회된 Q&A가 없습니다</h3>
|
||||||
|
<p style="color: #64748b; margin-top: 8px;">검색 조건을 변경하거나 새로운 질문을 등록해주세요.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Pagination -->
|
||||||
|
<div class="pagination" th:replace="~{fragment/pagination :: pagination(jsFunction='fn_select_page')}">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- New Inquiry Button -->
|
||||||
|
<div style="display: flex; justify-content: center; margin-top: 40px;">
|
||||||
|
<a th:href="@{/inquiry/new}" class="btn btn-primary"
|
||||||
|
style="width: 247px; height: 60px; font-size: 20px; font-weight: 700; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: #2a69de; color: #fff; text-decoration: none;">
|
||||||
|
문의하기
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</th:block>
|
||||||
<!-- Empty State -->
|
|
||||||
<div class="user-empty-state" th:if="${inquiries.isEmpty()}">
|
|
||||||
<h3>조회된 Q&A가 없습니다</h3>
|
|
||||||
<p>검색 조건을 변경하거나 새로운 질문을 등록해주세요.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Pagination -->
|
|
||||||
<div class="pagination" th:replace="~{fragment/pagination :: pagination(jsFunction='fn_select_page')}">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- New Inquiry Button -->
|
|
||||||
<div class="inquiry-actions">
|
|
||||||
<a th:href="@{/inquiry/new}" class="btn btn-primary btn-lg">
|
|
||||||
<span>질문하기</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</section>
|
|
||||||
</th:block>
|
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
<th:block layout:fragment="contentScript">
|
<th:block layout:fragment="contentScript">
|
||||||
<script th:inline="javascript">
|
<script th:inline="javascript">
|
||||||
$(document).ready(function () {
|
$(document).ready(function () {
|
||||||
var successMsg = [[${success}]];
|
var successMsg = [[${ success }]];
|
||||||
if (successMsg) {
|
if (successMsg) {
|
||||||
customPopups.showAlert(successMsg);
|
customPopups.showAlert(successMsg);
|
||||||
}
|
}
|
||||||
@@ -133,4 +156,4 @@
|
|||||||
</script>
|
</script>
|
||||||
</th:block>
|
</th:block>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
Reference in New Issue
Block a user