게시판 사이트에 핵심인 글 삭제 기능을 개발하기로 했다.

삭제 흐름

1. 사용자가 삭제 버튼 클릭(작성자에게만 노출)
2. onclick -> deletePost(id) 실행, fetch로 DELETE /posts/{id}로 http 요청 전송
3. Controller는 요청을 받아 SessionUser. id를 Service 계층으로 전송
4. Service 계층
   1. findByIdWithUser(postId)로 Post + User 를 fetch join으로 로딩
   2. 게시글이 없을 경우 PostNotFoundException
   3. 작성자 검증 실패 시 PostAccessDeniedException
   4. 통과하면 post 객체 삭제
5. Controller에서 ResponseEntity 리턴 ( 2xx 응답 반환(바디 없음))
6. JS가 res.ok를 확인해 window.location.assign('/') 로 홈 이동.

post-detail.html

 <!-- 삭제 버튼 (작성자만 보이게)-->
        <button th:if ="${session.user != null and session.user.id == post.userId}"
                type ="button" class="btn-delete"
                th:onclick="|deletePost(${post.postId})|">삭제</button>

post-detail.js

async function deletePost(id) {
    if (!confirm('정말 삭제하시겠습니까?')) return;

    const token  = document.querySelector('meta[name="_csrf"]')?.content;
    const header = document.querySelector('meta[name="_csrf_header"]')?.content || 'X-CSRF-TOKEN';

    const res = await fetch(`/posts/${id}`, {
        method: 'DELETE',
        headers: token ? { [header]: token, 'X-Requested-With': 'XMLHttpRequest' } : { 'X-Requested-With': 'XMLHttpRequest' }
    });

    if (res.ok) {
        window.location.assign('/');            // ← 여기서 직접 이동
    } else {
        alert('삭제에 실패했습니다.');
    }

1. 사용자 확인 절차

• confirm() 함수를 사용해 "정말 삭제하시겠습니까?"라는 확인창을 띄운다. 사용자가 '취소'를 누르면 함수가 즉시 종료되어 아무 일도 일어나지 않는다.
  1. CSRF 토큰 준비
• 보안을 위해 HTML의 <meta> 태그에 저장된 CSRF(Cross-Site Request Forgery) 토큰 정보를 읽어온다. 이 토큰은 서버로 요청을 보낼 때 HTTP 헤더에 담아 전송하며, 정상적인 경로로 요청이 왔음을 인증하는 역할을 한다.

1. 삭제 요청 전송 (fetch API)

• JavaScript의 fetch API를 사용해 지정된 URL (/posts/{id})로 DELETE 메서드 요청을 비동기적으로 보낸다. 이때, 앞서 준비한 CSRF 토큰과 AJAX 요청임을 알리는 헤더 정보를 함께 전송한다.

1. 서버 응답 처리
   • 성공 시 (res.ok): 서버가 성공적으로 게시글을 삭제하고 정상 응답(HTTP 2xx)을 보내면, window.location.assign('/') 코드를 통해 사용자를 메인 페이지로 이동시킨다.
   • 실패 시: 서버에서 오류 응답이 오면, "삭제에 실패했습니다."라는 알림창을 띄워 사용자에게 실패 사실을 알다.

PostsApiController.java