[SpringBoot] 익명게시판 만들기 테스트 (6h)

6시간 안에 spring boot 프로젝트로 익명 게시판을 구현하는 테스트를 진행했습니다.

요구사항

• 게시판을 구현하시오
• 익명 게시판 사이트입니다. 로그인이 없습니다.
• 제목과 내용은 20자를 넘어갈 수 없습니다.
• 글쓰기, 글목록보기, 글수정하기, 글삭제하기
• JSP,Mustache 선택 가능
• JPA, 마이바티스 선택 가능

선택 요구사항

• 글목록보기를 5개씩 페이징하세요. prev, next 버튼 구현
• 전체 글 개수가 21개라면, prev [0][1][2][3][4] next
• 예시) 3번을 클릭하면 ?page=3 페이지로 이동되면 됩니다.
• 예시) 글 개수가 21개이기 때문에 0~4 까지 번호가 만들어집니다.

❌ 챗GPT 금지입니다. (google 서치 가능)

 

thymeleaf

1. 반복 기능 (th:each)

💡 thymeleaf 상태 변수를 사용하여 index 구현

<tr class="h-[50px]" th:each="post , iterStat :${posts}">
    <td class="text-center " th:text="${page * 5 + iterStat.index + 1}">1</td>
    <td class="text-center text-overflow" >
        <span th:text="${post.title}"></span>
    </td>
    <td class="text-center " >
        <span class="text-overflow" th:text="${post.content}"></span>
    </td>
    <td class="text-center">
        <a th:href="@{/modify(id=${post.id})}" class="border border-gray-600 rounded px-2 py-0.5">
            Edit</a>
        <a th:href="@{/delete(id=${post.id})}" id="del" class="border border-red-500 text-red-500 rounded px-2 py-0.5">
            Delete
        </a>
    </td>
</tr>

2. 조건부 기능 (th:if)

 <li th:if="${page>=1}" class="px-2 h-[30px] flex justify-center items-center text-gray-500">
    <a th:href="@{/list(page=${page - 1})}" th:text="${page}"></a>
</li>

 

페이징 처리

public Page<BoardDTO> readPosts(int page) {
    Pageable pageable = PageRequest.of(page, 5, Sort.Direction.DESC, "id");
    Page<Board> posts = boardRepository.findAll(pageable);
    log.info("게시글 목록 서비스 "+posts);
    Page<BoardDTO> dtos = posts.map(board -> {
        BoardDTO dto = BoardDTO
                .builder()
                .title(board.getTitle())
                .content(board.getContent())
                .id(board.getId())
                .build();
        log.info(dto.toString());
        return dto;
    });
    return dtos;
}

<ul class="flex justify-center mt-10">
    <li class="px-2 h-[30px] flex justify-center items-center">
        <a th:href="@{/list?page=0}">
            <img class="w-[20px]" th:src="@{/images/ArrowLeft.png}">
        </a>
    </li>
    <li th:if="${page>=1}" class="px-2 h-[30px] flex justify-center items-center text-gray-500">
        <a th:href="@{/list(page=${page - 1})}" th:text="${page}"></a>
    </li>
    <li class="px-2 h-[30px] flex justify-center items-center text-gray-500 font-bold">
        <a th:href="@{/list(page=${page})}" th:text="${page + 1}">2</a>
    </li>
    <li th:if="${(totalPages - page)>=2}" class="px-2 h-[30px] flex justify-center items-center text-gray-500 ">
        <a th:href="@{/list(page=${page + 1})}" th:text="${page + 2}" ></a>
    </li>
    <li class="px-2 h-[30px] flex justify-center items-center">
        <a th:href="@{/list(page=${totalPages - 1})}">
            <img class="w-[20px]"  th:src="@{/images/ArrowRight.png}">
        </a>
    </li>
</ul>

 

builder 패턴

public void createPost(BoardDTO boardDTO) {
    Board board = Board.builder()
                    .title(boardDTO.getTitle())
                    .content(boardDTO.getContent())
                    .regIp(boardDTO.getRegIp())
                    .build();

    boardRepository.save(board);
}

 

최종 화면

 

테스트 프로젝트는 아래 GitHub 저장소에 공개되어 있으며,
이번 경험에서 배운 점과 개선해야 할 점들을 지속적으로 기록하고 정리할 예정입니다.

GitHub - ywha0206/springBoard_test: This is a CRUD test to demonstrate my capabilities using Spring Boot.

 

지피티 없이 스스로 해낼 수 있는 것이 정말 적다는 것을 알게 된 테스트였습니다...
다음에 또 테스트를 진행한다면 완성에 급급하기보다 사용자 친화적인 시스템으로 설계하고 싶습니다.
rest api 사용으로 게시글 삭제 동적 처리를 하거나 어떤 처리가 끝난 후 해당 기능의 처리가 완료되었다는 안내를 띄우는 등의 편의성을 고려한 프로젝트로 구현하고 싶다는 생각을 했습니다.