블로그 만들기 16. 게시판 구현 : 상세보기

1. detail 폴더 확인하기

• board_tb 테이블과 user_tb 조인해야 함

{{> /layout/header}}

<div class="container p-5"

        <!-- 수정삭제버튼 -->
        <div class="d-flex justify-content-end">
            <button class="btn btn-warning me-1">수정</button>
            <button class="btn btn-danger">삭제</button>
        </div>

    <div class="d-flex justify-content-end mt-2">
        <b>작성자</b> : {{board.username}}
    </div>

    <!-- 게시글내용 -->
    <div>
        <h2><b>제목1</b></h2>
        <hr/>
        <div class="m-4 p-2">

            내용1
        </div>
    </div>

    <!-- 댓글 -->
    <div class="card mt-3">
        <!-- 댓글등록 -->
        <div class="card-body">
            <form action="/reply/save" method="post">
                <textarea class="form-control" rows="2" name="comment"></textarea>
                <div class="d-flex justify-content-end">
                    <button type="submit" class="btn btn-outline-primary mt-1">댓글등록</button>
                </div>
            </form>
        </div>
        <!-- 댓글목록 -->
        <div class="card-footer">
            <b>댓글리스트</b>
        </div>
        <div class="list-group">
            <!-- 댓글아이템 -->
            <div class="list-group-item d-flex justify-content-between align-items-center">
                <div class="d-flex">
                    <div class="px-1 me-1 bg-primary text-white rounded">cos</div>
                    <div>댓글 내용입니다</div>
                </div>
                <form action="/reply/1/delete" method="post">
                    <button class="btn">🗑</button>
                </form>
            </div>
            <!-- 댓글아이템 -->
            <div class="list-group-item d-flex justify-content-between align-items-center">
                <div class="d-flex">
                    <div class="px-1 me-1 bg-primary text-white rounded">ssar</div>
                    <div>댓글 내용입니다</div>
                </div>
                <form action="/reply/1/delete" method="post">
                    <button class="btn">🗑</button>
                </form>
            </div>
        </div>
    </div>
</div>
{{> /layout/footer}}

2. BoardController에서 detail로 들어오게 만들기

• 테이블 URL에 들어오는 값은 PK OR Unique

• 주소에 들어가는 모든 것은 where 절에 들어감 / 쿼리는 같음

package shop.mtcoding.blog.board;

import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpSession;
import lombok.RequiredArgsConstructor;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.ResponseBody;

import java.util.List;

@RequiredArgsConstructor
@Controller
public class BoardController {

    private final HttpSession session;
    private final BoardRepository boardRepository; // DI

    // http://localhost:8080?page=0
    @GetMapping({ "/", "/board" })
    public String index(HttpServletRequest request) {
        List<Board> boardList = boardRepository.findAll();
        request.setAttribute("boardList", boardList);
        return "index";
    }

    @GetMapping("/board/saveForm")
    public String saveForm() {
        return "board/saveForm";
    }

    // 상세보기시 호출
    @GetMapping("/board/{id}") // 1이 프라이머리키 -> 뭐든 넣어도 실행시키려면 변수화시켜서 {}
    public String detail(@PathVariable int id) {
        System.out.println("id : "+id);
				// body 데이터가 없으면 유효성 검사할 필요 없음
        BoardResponse.DetailDTO reponseDTO = boardRepository.findById(id);

				request.setAttribute("board", responseDTO);
        return "board/detail";
    }
}

3. 응답 DTO 만들기

• BoardResponse를 만들어서 DetailDTO() 만들기

package shop.mtcoding.blog.board;

import lombok.Data;

public class BoardResponse {

    @Data
    public static class DetailDTO {
        private int id;
        private String title;
        private String content;
        private int userId;
        private String username;
    }
}

4. findById() 만들어 테스트하기

package shop.mtcoding.blog.board;

import jakarta.persistence.EntityManager;
import jakarta.persistence.Query;
import lombok.RequiredArgsConstructor;
import org.springframework.stereotype.Repository;

@RequiredArgsConstructor
@Repository
public class BoardRepository {

    private final EntityManager em; // jpa가 제공해줌

		// 조회니까 트랜잭션 필요없음
    public List<Board> findAll() { // 보드 테이블의 모든 것 가지고 오기
        Query query = em.createNativeQuery("select * from board_tb order by id desc limit 0,3", Board.class);
        return query.getResultList(); // 여러건
    } // 이 결과를 리퀘스트에 담고 뷰 화면 가서 뿌리기

		public BoardResponse.DetailDTO findById(int idx) {
        Query query = em.createNativeQuery("select b.id, b.title, b.content, b.user_id, u.username from board_tb b inner join user_tb u on b.user_id = u.id where b.id = ?");
        query.setParameter(1, idx);

        Object[] row = (Object[]) query.getSingleResult();

        Integer id = (Integer) row[0];
        String title = (String) row[1];
        String content = (String) row[2];
        int userId = (Integer) row[3];
        String username = (String) row[4];

        System.out.println("id : "+id);
        System.out.println("title : "+title);
        System.out.println("content : "+content);
        System.out.println("userId : "+userId);
        System.out.println("username : "+username);
        return null;
    }
}

5. DTO에 담아서 화면에 전달하기

@RequiredArgsConstructor
@Controller
public class BoardController {

    private final HttpSession session;
    private final BoardRepository boardRepository;

    // http://localhost:8080?page=0
    @GetMapping({ "/", "/board" })
	  public String index(HttpServletRequest request, @RequestParam(defaultValue = "0") int page) {
        System.out.println("페이지 : " +page);
        List<Board> boardList = boardRepository.findAll();
        request.setAttribute("boardList", boardList);
        return "index";
    }

    @GetMapping("/board/saveForm")
    public String saveForm() {
        return "board/saveForm";
    }
    @GetMapping("/board/{{id}}")
    public String detail() {
				System.out.println("id" +id);
				// 바디 데이터가 없으면 유효성 검사할 필요가 없음
				BoardResponse.DetailDTO responseDTO = boardResponseRepository.findById(id);
				request.setAttribute("board", responseDTO);
        return "board/detail";
    }
}

6. 화면에 랜더링하기

• detail 폴더에서 자바 코드 변수 집어넣기

{{> /layout/header}}

<div class="container p-5"

        <!-- 수정삭제버튼 -->
        <div class="d-flex justify-content-end">
            <button class="btn btn-warning me-1">수정</button>
            <button class="btn btn-danger">삭제</button>
        </div>

    <div class="d-flex justify-content-end mt-2">
        <b>작성자</b> : {{board.username}}
    </div>

    <!-- 게시글내용 -->
    <div>
        <h2><b>{{board.title}}</b></h2>
        <hr/>
        <div class="m-4 p-2">
            {{board.content}}
        </div>
    </div>

    <!-- 댓글 -->
    <div class="card mt-3">
        <!-- 댓글등록 -->
        <div class="card-body">
            <form action="/reply/save" method="post">
                <textarea class="form-control" rows="2" name="comment"></textarea>
                <div class="d-flex justify-content-end">
                    <button type="submit" class="btn btn-outline-primary mt-1">댓글등록</button>
                </div>
            </form>
        </div>
        <!-- 댓글목록 -->
        <div class="card-footer">
            <b>댓글리스트</b>
        </div>
        <div class="list-group">
            <!-- 댓글아이템 -->
            <div class="list-group-item d-flex justify-content-between align-items-center">
                <div class="d-flex">
                    <div class="px-1 me-1 bg-primary text-white rounded">cos</div>
                    <div>댓글 내용입니다</div>
                </div>
                <form action="/reply/1/delete" method="post">
                    <button class="btn">🗑</button>
                </form>
            </div>
            <!-- 댓글아이템 -->
            <div class="list-group-item d-flex justify-content-between align-items-center">
                <div class="d-flex">
                    <div class="px-1 me-1 bg-primary text-white rounded">ssar</div>
                    <div>댓글 내용입니다</div>
                </div>
                <form action="/reply/1/delete" method="post">
                    <button class="btn">🗑</button>
                </form>
            </div>
        </div>
    </div>
</div>
{{> /layout/footer}}