[ Spring ] 게시글 목록으로 이동 ⑮

오늘은 '목록으로' 버튼을 클릭 했을때 게시글 목록 조회 화면으로 돌아가는 기능을 구현해보자 

 

📚 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}";

    // 게시판 코드 전역 변수로 선언 (js에 사용을 위해!)
    const boardCode = "${boardCode}";
</script>

📕  boardDetail.jsp

const goToListBtn = document.getElementById("goToListBtn");

goToListBtn.addEventListener("click", ()=>{
    
    // 이동할 주소 저장
    let url = "/board/" + boardCode;

    // URL 내장 객체 : 주소 관련 정보를 나타내는 객체
    // URL.searchParams : 쿼리스트링만 별도 객체로 반환

    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; // url 뒤에 붙이기
    }


    // location.href = "주소"; -> 해당 주소로 이동
    location.href = url;


    
});