Thymeleaf 조건·반복·조각

package board.composition;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class CompositionApplication {
    public static void main(String[] args) {
        SpringApplication.run(CompositionApplication.class, args);
    }
}

package board.composition;

import java.util.List;
import java.util.Objects;

public interface PostListQuery {
    PageSnapshot page(int pageNumber, int pageSize);

    record PostSnapshot(
            long id,
            String title,
            String content,
            boolean canEdit
    ) {
        public PostSnapshot {
            if (id <= 0) {
                throw new IllegalArgumentException("id must be positive");
            }
            Objects.requireNonNull(title, "title");
            Objects.requireNonNull(content, "content");
        }
    }

    record PageSnapshot(
            List<PostSnapshot> items,
            int pageNumber,
            boolean hasPrevious,
            boolean hasNext
    ) {
        public PageSnapshot {
            items = List.copyOf(items);
            if (pageNumber < 0) {
                throw new IllegalArgumentException(
                        "pageNumber must not be negative");
            }
        }
    }
}

package board.composition;

import java.util.List;
import java.util.Objects;

public record PostListPage(
        List<PostRow> rows,
        int number,
        boolean hasPrevious,
        boolean hasNext
) {
    public PostListPage {
        rows = List.copyOf(rows);
        if (number < 0) {
            throw new IllegalArgumentException(
                    "page number must not be negative");
        }
        if (rows.isEmpty() && hasNext) {
            throw new IllegalArgumentException(
                    "an empty page cannot have a next page");
        }
    }

    public record PostRow(
            long id,
            String title,
            int characterCount,
            boolean longPost,
            boolean canEdit
    ) {
        public PostRow {
            if (id <= 0 || characterCount < 0) {
                throw new IllegalArgumentException("invalid post row");
            }
            Objects.requireNonNull(title, "title");
        }
    }
}

package board.composition;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;

@Controller
public final class PostListController {
    private static final int PAGE_SIZE = 20;
    private static final int LONG_POST_THRESHOLD = 60;

    private final PostListQuery query;

    public PostListController(PostListQuery query) {
        this.query = query;
    }

    @GetMapping("/composition/posts")
    String list(
            @RequestParam(name = "page", defaultValue = "0") int page,
            Model model
    ) {
        var result = query.page(page, PAGE_SIZE);
        var rows = result.items().stream()
                .map(post -> {
                    var content = post.content();
                    var characterCount = content.codePointCount(
                            0, content.length());
                    return new PostListPage.PostRow(
                            post.id(),
                            post.title(),
                            characterCount,
                            characterCount >= LONG_POST_THRESHOLD,
                            post.canEdit());
                })
                .toList();

        model.addAttribute("memberName", "동민");
        model.addAttribute("page", new PostListPage(
                rows,
                result.pageNumber(),
                result.hasPrevious(),
                result.hasNext()));
        return "composition/posts/list";
    }
}

<nav xmlns:th="http://www.thymeleaf.org"
     th:fragment="navigation(activeSection, memberName)"
     aria-label="주요 메뉴">
  <a th:href="@{/composition/posts}"
     th:attr="aria-current=${activeSection == 'posts' ? 'page' : null}"
     th:text="|${memberName}의 기록|">게시글</a>
  <a th:href="@{/composition/reports}"
     th:attr="aria-current=${activeSection == 'reports' ? 'page' : null}">
    리포트
  </a>
</nav>

<!doctype html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>게시글 목록</title>
</head>
<body>
  <a class="skip-link" href="#main">본문 바로가기</a>
  <header id="page-header"
          th:insert="~{composition/fragments/navigation
              :: navigation('posts', ${memberName})}">
    주요 메뉴
  </header>

  <main id="main">
    <h1>게시글 목록</h1>

    <section id="post-list"
             aria-labelledby="post-list-heading"
             th:unless="${#lists.isEmpty(page.rows)}">
      <h2 id="post-list-heading">기록</h2>
      <table>
        <caption>현재 페이지 게시글</caption>
        <thead>
          <tr>
            <th scope="col">순번</th>
            <th scope="col">제목</th>
            <th scope="col">길이</th>
            <th scope="col">행동</th>
          </tr>
        </thead>
        <tbody>
          <tr th:each="row, state : ${page.rows}"
              th:classappend="${row.longPost ? 'long-post' : null}">
            <td th:text="${state.count}">1</td>
            <td>
              <a class="post-link"
                 th:href="@{/composition/posts/{id}(id=${row.id})}"
                 th:text="${row.title}">Spring</a>
            </td>
            <td th:text="|${row.characterCount}자|">45자</td>
            <td>
              <a class="edit-link"
                 th:if="${row.canEdit}"
                 th:href="@{/composition/posts/{id}/edit(id=${row.id})}">
                수정
              </a>
            </td>
          </tr>
        </tbody>
      </table>
    </section>

    <section id="empty-state"
             aria-labelledby="empty-state-heading"
             th:if="${#lists.isEmpty(page.rows)}">
      <h2 id="empty-state-heading">아직 기록이 없습니다</h2>
      <a th:href="@{/composition/posts/new}">첫 게시글 기록하기</a>
    </section>

    <nav class="pagination"
         aria-label="목록 페이지"
         th:if="${page.hasPrevious or page.hasNext}">
      <a rel="prev"
         th:if="${page.hasPrevious}"
         th:href="@{/composition/posts(page=${page.number - 1})}">
        이전
      </a>
      <span th:text="|${page.number + 1}페이지|">1페이지</span>
      <a rel="next"
         th:if="${page.hasNext}"
         th:href="@{/composition/posts(page=${page.number + 1})}">
        다음
      </a>
    </nav>
  </main>

  <footer id="page-footer">게시판 예제</footer>
</body>
</html>

package board.composition;

import static org.assertj.core.api.Assertions.assertThat;
import static org.assertj.core.api.Assertions.assertThatThrownBy;
import static org.springframework.test.web.servlet.request.MockMvcRequestBuilders.get;
import static org.springframework.test.web.servlet.result.MockMvcResultMatchers.status;
import static org.springframework.test.web.servlet.result.MockMvcResultMatchers.view;

import java.nio.charset.StandardCharsets;
import java.util.ArrayList;
import java.util.HashSet;
import java.util.List;

import org.jsoup.Jsoup;
import org.jsoup.nodes.Document;
import org.junit.jupiter.api.BeforeEach;
import org.junit.jupiter.api.Test;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.test.context.SpringBootTest;
import org.springframework.boot.test.context.TestConfiguration;
import org.springframework.boot.webmvc.test.autoconfigure.AutoConfigureMockMvc;
import org.springframework.context.annotation.Bean;
import org.springframework.test.web.servlet.MockMvc;

@SpringBootTest(classes = {
        CompositionApplication.class,
        PostListRenderingTest.FixtureConfiguration.class
})
@AutoConfigureMockMvc
class PostListRenderingTest {
    @Autowired
    MockMvc mvc;

    @Autowired
    MutablePostListQuery query;

    @BeforeEach
    void resetPage() {
        query.respondWith(new PostListQuery.PageSnapshot(
                List.of(
                        new PostListQuery.PostSnapshot(
                                11, "짧은 글", "본문 😀", true),
                        new PostListQuery.PostSnapshot(
                                12, "긴 글", "가".repeat(60), false)),
                0,
                false,
                true));
    }

    @Test
    void 반복_상태와_서버가_결정한_표시값을_렌더링한다()
            throws Exception {
        var document = render();
        var rows = document.select("#post-list tbody tr");

        assertThat(rows).hasSize(2);
        assertThat(rows.get(0).selectFirst("td").text()).isEqualTo("1");
        assertThat(rows.get(1).selectFirst("td").text()).isEqualTo("2");
        assertThat(rows.get(1).hasClass("long-post")).isTrue();
        assertThat(document.select(".edit-link")).hasSize(1);
        assertThat(document.select("a[rel=next]").attr("href"))
                .isEqualTo("/composition/posts?page=1");
    }

    @Test
    void 빈_결과는_table과_pagination_대신_빈_상태를_보인다()
            throws Exception {
        query.respondWith(new PostListQuery.PageSnapshot(
                List.of(), 0, false, false));

        var document = render();

        assertThat(document.select("#post-list")).isEmpty();
        assertThat(document.select("#empty-state")).hasSize(1);
        assertThat(document.select(".pagination")).isEmpty();
    }

    @Test
    void 화면_model은_rows를_복사하고_빈_next_모순을_거부한다() {
        var mutableRows = new ArrayList<PostListPage.PostRow>();
        mutableRows.add(new PostListPage.PostRow(
                21, "복사할 행", 5, false, false));
        var page = new PostListPage(
                mutableRows, 0, false, false);

        mutableRows.clear();

        assertThat(page.rows()).hasSize(1);
        assertThatThrownBy(() -> new PostListPage(
                List.of(), 0, false, true))
                .isInstanceOf(IllegalArgumentException.class)
                .hasMessageContaining("empty page");
    }

    @Test
    void 현재_메뉴는_정확히_하나다() throws Exception {
        var document = render();
        var current = document.select(
                "nav[aria-label='주요 메뉴'] [aria-current=page]");

        assertThat(current).hasSize(1);
        assertThat(current.attr("href"))
                .isEqualTo("/composition/posts");
        assertThat(document.select("a[href='/composition/reports']"
                + "[aria-current]"))
                .isEmpty();
    }

    @Test
    void 조립된_DOM은_유일한_id와_landmark를_가진다()
            throws Exception {
        var document = render();
        var observed = new HashSet<String>();
        var duplicateIds = document.select("[id]").stream()
                .map(element -> element.id())
                .filter(id -> id.isBlank() || !observed.add(id))
                .toList();

        assertThat(duplicateIds).isEmpty();
        assertThat(document.select("main#main")).hasSize(1);
        assertThat(document.select("header#page-header")).hasSize(1);
        assertThat(document.select("footer#page-footer")).hasSize(1);
        assertThat(document.select("a.skip-link[href='#main']"))
                .hasSize(1);
    }

    private Document render() throws Exception {
        var result = mvc.perform(get("/composition/posts"))
                .andExpect(status().isOk())
                .andExpect(view().name("composition/posts/list"))
                .andReturn();
        return Jsoup.parse(result.getResponse()
                .getContentAsString(StandardCharsets.UTF_8));
    }

    static final class MutablePostListQuery implements PostListQuery {
        private PageSnapshot response;

        void respondWith(PageSnapshot response) {
            this.response = response;
        }

        @Override
        public PageSnapshot page(int pageNumber, int pageSize) {
            assertThat(pageSize).isEqualTo(20);
            return response;
        }
    }

    @TestConfiguration(proxyBeanMethods = false)
    static class FixtureConfiguration {
        @Bean
        MutablePostListQuery postListQuery() {
            return new MutablePostListQuery();
        }
    }
}