221211~1212_데이트 장소 다이어리 제작 6_덧글 기능 구현 + 검색 기능 1차 세팅

창고·2022년 12월 12일

해당 게시글은 개인 프로젝트인 "데이트 장소 다이어리 제작" 중
#22 "덧글 기능 적용" 이슈를 다루고 있습니다.

1. 진행 사항

(1) 요약

덧글 리스트 화면 처리 작업
덧글 리스트 기능 구현
검색 기능 1차 세팅

(2) 상세

덧글 관련 컨트롤러는 @RestController로 제작, Axios를 활용하여 비동기 처리로 덧글 화면 처리 작업 진행
모달을 통해 덧글 생성 / 수정 처리
Thymeleaf의 if문을 사용하여 권한에 따라 버튼을 추가로 출력
다만 이 때 addEventListener가 Element를 찾지 못하는 경우가 생겨 null check를 진행
(예시 : 글의 작성자와 접속한 유저가 다른 경우 삭제 버튼이 미노출될 때 삭제 버튼을 찾지 못할 수 있음)

<!-- 조건이 걸려 있어 조건에 부합할 경우 해당 버튼 표시가 안 됨 -->
<a th:if="${user != null && user.username == dto.uid}">
 <button type="button" th:if="${user != null && user.username == dto.uid}" 
         class="btn btn-danger deleteBtn">게시글 삭제</button>
</a>

// 게시글 삭제
// thymeleaf 조건문으로 인해 deleteBtn이 출력되지 않을 수 있어 null check를 해야 함
// (안 그러면 addEventListener null 처리되어 전체 JS 코드가 실행되지 않는다)
      if (document.querySelector(".deleteBtn") != null) {
          document.querySelector(".deleteBtn").addEventListener("click", function (e) {
              e.preventDefault()
              e.stopPropagation()

              $.post('/diary/delete', {aid: aid})

              alert("게시글이 삭제되었습니다.")

              $.get('/diary/list')

              location.href = "/diary/list"

          }, false)
      }