🌷 목록으로 버튼

게시글 상세 조회 후 '목록으로' 버튼을 클릭했을 때 게시글 목록 조회 화면으로 돌아가는 기능을 구현해 보자.
간단한 것 같지만 생각보다 따져 봐야 하는 조건이 여러 개 있었다.... 🤔

---

👀 코드로 살펴보기

🌼 VS Code

🌱 boardDetail.jsp

...
            <!-- 버튼 영역-->
            <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>
    
...
    

🌱 boardList.jsp

...
                        <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>
...

🌱 boardDetail.js

💭 URL 내장 객체

주소 관련 정보를 나타내는 객체

💭 URL.searchParams

쿼리스트링만 별도 객체로 반환

...
// 목록으로
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;

})