게시글 상세 조회 후 '목록으로' 버튼을 클릭했을 때 게시글 목록 조회 화면으로 돌아가는 기능을 구현해 보자.
간단한 것 같지만 생각보다 따져 봐야 하는 조건이 여러 개 있었다.... 🤔
...
<!-- 버튼 영역-->
<div class="board-btn-area">
<!-- 로그인한 회원과 게시글 작성자 번호가 같은 경우-->
<c:if test="${loginMember.memberNo == board.memberNo}">
<button id="updateBtn">수정</button>
<button id="deleteBtn">삭제</button>
</c:if>
<button id="goToListBtn">목록으로</button>
</div>
...
<script>
const boardNo = "${board.boardNo}";
const loginMemberNo = "${loginMember.memberNo}";
// 게시판 코드 전역 변수로 선언
const boardCode = "${boardCode}";
</script>
...
...
<c:otherwise>
<!-- 게시글 목록 조회 결과가 있다면 -->
<c:forEach items="${boardList}" var="board">
<tr>
<td>${board.boardNo}</td>
<td>
<%-- 썸네일이 있을 경우 --%>
<c:if test="${!empty board.thumbnail}" >
<img class="list-thumbnail" src="${board.thumbnail}">
</c:if>
<%-- ${boardCode} : @Pathvariable로 request scope에 추가된 값 --%>
<a href="/board/${boardCode}/${board.boardNo}?cp=${pagination.currentPage}${sp}">${board.boardTitle}</a>
[${board.commentCount}]
</td>
<td>${board.memberNickname}</td>
<td>${board.boardCreateDate}</td>
<td>${board.readCount}</td>
<td>${board.likeCount}</td>
</tr>
</c:forEach>
</c:otherwise>
...
주소 관련 정보를 나타내는 객체
쿼리스트링만 별도 객체로 반환
...
// 목록으로
const goToListBtn = document.getElementById("goToListBtn");
goToListBtn.addEventListener("click", ()=>{
// 이동할 주소 저장
let url = "/board/" + boardCode;
const params = new URL(location.href).searchParams;
let cp;
if(params.get("cp") != ""){ // 쿼리스트링에 cp가 있을 경우
cp = "?cp=" + params.get("cp");
} else {
cp = "?cp=1";
}
// 조립
url += cp;
// 검색 key, query가 존재하는 경우 url에 추가
if(params.get("key") != null){
const key = "&key=" + params.get("key");
const query = "&query=" + params.get("query");
url += key + query;
}
// location.href = "주소"; -> 해당 주소로 이동
location.href = url;
})