PageHelper

implementation 'com.github.pagehelper:pagehelper-spring-boot-starter:2.1.0'

<dependency> <groupId>com.github.pagehelper</groupId> <artifactId>pagehelper-spring-boot-starter</artifactId> <version>2.1.0</version> </dependency>

# PageHelper 설정 pagehelper.helperDialect=mysql pagehelper.reasonable=true pagehelper.supportMethodsArguments=true pagehelper.params=count=countSql

DROP TABLE IF EXISTS `board`; CREATE TABLE `board` ( `no` int NOT NULL AUTO_INCREMENT, `id` varchar(255) NOT NULL, `title` varchar(100) NOT NULL, `writer` varchar(100) NOT NULL, `content` text, `created_at` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP, `updated_at` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY (`no`) ) COMMENT='게시판';

/** * Board * - 게시글 정보 */ @Data public class Board { private int no; private String id; private String title; private String writer; private String content; private Date createdAt; private Date updatedAt; }

<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd"> <!-- namespace="매퍼 인터페이스 경로" --> <mapper namespace="com.aloha.pagehelper.mapper.BoardMapper"> <!-- 게시글 목록 --> <!-- <태그 id="메소드명"></태그> --> <!-- <select id="메소드명" resultType="패키지명.객체명" ></select> resultType : 조회 결과를 매핑할 객체 정보 --> <!-- <select id="list" resultType="com.aloha.pagehelper.domain.Board"> --> <select id="list" resultType="Board"> SELECT * FROM board ORDER BY created_at DESC </select> <!-- 게시글 조회 --> <!-- SQL 에 지정할 파라미터 : #{변수명} * 넘어오는 매개변수가 1개이면, 변수명이 일치하지 않아도 매핑 * 객체 ➡ 객체의 변수명과 일치하는 파라미터 명으로 작성 --> <select id="select" resultType="Board"> SELECT * FROM board WHERE no = #{no} </select> <!-- 게시글 등록 --> <insert id="insert"> INSERT INTO board( title, writer, content ) VALUES ( #{title}, #{writer}, #{content} ) </insert> <!-- 게시글 수정 --> <update id="update"> UPDATE board SET title = #{title} ,writer = #{writer} ,content = #{content} WHERE no = #{no} </update> <!-- 게시글 삭제 --> <delete id="delete"> DELETE FROM board WHERE no = #{no} </delete> </mapper>

@Mapper public interface BoardMapper { // 게시글 목록 public List<Board> list() throws Exception; // 게시글 조회 public Board select(int no) throws Exception; // 게시글 등록 public int insert(Board board) throws Exception; // 게시글 수정 public int update(Board board) throws Exception; // 게시글 삭제 public int delete(int no) throws Exception; }

public interface BoardService { // ⭐ 게시글 페이징 목록 public PageInfo<Board> list(int page, int size) throws Exception; // 게시글 목록 public List<Board> list() throws Exception; // 게시글 조회 public Board select(int no) throws Exception; // 게시글 등록 public int insert(Board board) throws Exception; // 게시글 수정 public int update(Board board) throws Exception; // 게시글 삭제 public int delete(int no) throws Exception; }

@Service // 서비스 역할의 스프링 빈 public class BoardServiceImpl implements BoardService { @Autowired private BoardMapper boardMapper; /** * ⭐ 게시글 페이징 목록 조회 */ @Override public PageInfo<Board> list(int page, int size) throws Exception { // ⭐ PageHelper.startPage(현재 페이지, 페이지당 게시글 수); PageHelper.startPage(page, size); List<Board> boardList = boardMapper.list(); // ⭐ PageInfo<Board>( 리스트, 노출 페이지 개수 ); PageInfo<Board> pageInfo = new PageInfo<Board>(boardList, 10); return pageInfo; } /** * 게시글 목록 조회 */ @Override public List<Board> list() throws Exception { // TODO : boardMapper 로 list() 호출 /* * ➡ List<Board> boardList 로 받아옴 * ➡ return boardList */ List<Board> boardList = boardMapper.list(); return boardList; } /** * 게시글 조회 * - no 매개변수로 게시글 번호를 전달받아서 * 데이터베이스에 조회 요청 */ @Override public Board select(int no) throws Exception { // TODO : boardMapper 로 select(no) 호출 /* * ➡ Board board 로 받아옴 * ➡ return board */ Board board = boardMapper.select(no); return board; } /** * 게시글 등록 */ @Override public int insert(Board board) throws Exception { // TODO : boardMapper 로 insert(Board) 호출 /* * ➡ int result 로 데이터 처리 행(개수) 받아옴 * ➡ return result */ int result = boardMapper.insert(board); return result; } /** * 게시글 수정 */ @Override public int update(Board board) throws Exception { // TODO : boardMapper 로 update(Board) 호출 /* * ➡ int result 로 데이터 처리 행(개수) 받아옴 * ➡ return result */ int result = boardMapper.update(board); return result; } /** * 게시글 삭제 */ @Override public int delete(int no) throws Exception { // TODO : boardMapper 로 delete(no) 호출 /* * ➡ int result 로 데이터 처리 행(개수) 받아옴 * ➡ return result */ int result = boardMapper.delete(no); return result; } }

/** * /board 경로로 요청 왔을 때 처리 * [GET] - /board/list : 게시글 목록 화면 * [GET] - /board/read : 게시글 조회 화면 * [GET] - /board/insert : 게시글 등록 화면 * [POST] - /board/insert : 게시글 등록 처리 * [GET] - /board/update : 게시글 수정 화면 * [POST] - /board/update : 게시글 수정 처리 * [POST] - /board/delete : 게시글 삭제 처리 */ @Slf4j // 로그 어노테이션 @Controller // 컨트롤러 스프링 빈으로 등록 @RequestMapping("/board") // 클레스 레벨 요청 경로 매핑 // - /board/~ 경로의 요청은 이 컨트롤러에서 처리 public class BoardController { // ⭐데이터 요청과 화면 출력 // Controller --> Service (데이터 요청) // Controller <-- Service (데이터 전달) // Controller --> Model (모델 등록) // View <-- Model (데이터 출력) @Autowired // 의존성 자동 주입 private BoardService boardService; // @Service를 --Impl 에 등록 /** * 게시글 목록 조회 화면 * @return * @throws Exception */ @GetMapping("/list") public String list(Model model ,@RequestParam(name = "page", required = false, defaultValue = "1") Integer page ,@RequestParam(name = "size", required = false, defaultValue = "10") Integer size) throws Exception { // 데이터 요청 PageInfo<Board> pageInfo = boardService.list(page, size); Pagination pagination = new Pagination(); pagination.setPage(page); pagination.setSize(size); pagination.setTotal( pageInfo.getTotal() ); // 모델 등록 model.addAttribute("pageInfo", pageInfo); model.addAttribute("pagination", pagination); // 뷰 페이지 지정 return "/board/list"; // resources/templates/board/list.html } /** * 게시글 조회 화면 * - /board/read?no=💎 * @param no * @return * @throws Exception */ // @RequestParam("파라미터명") // - 스프링 부트 3.2버전 이하, 생략해도 자동 매핑된다. // - 스프링 부트 3.2버전 이상, 필수로 명시해야 매핑된다. @GetMapping("/read") public String read(@RequestParam("no") int no, Model model) throws Exception { // 데이터 요청 Board board = boardService.select(no); // 모델 등록 model.addAttribute("board", board); // 뷰페이지 지정 return "/board/read"; } /** * 게시글 등록 화면 * @return */ @GetMapping("/insert") public String insert() { return "/board/insert"; } /** * 게시글 등록 처리 * @param board * @return * @throws Exception */ @PostMapping("/insert") public String insertPro(Board board) throws Exception { // 데이터 요청 int result = boardService.insert(board); // 리다이렉트 // ⭕ 데이터 처리 성공 if( result > 0 ) { return "redirect:/board/list"; } // ❌ 데이터 처리 실패 return "redirect:/board/insert?error"; } /** * 게시글 수정 화면 * @param no * @param model * @return * @throws Exception */ @GetMapping("/update") public String update(@RequestParam("no") int no, Model model) throws Exception { Board board = boardService.select(no); model.addAttribute("board", board); return "/board/update"; } /** * 게시글 수정 처리 * @param board * @return * @throws Exception */ @PostMapping("/update") public String updatePro(Board board) throws Exception { int result = boardService.update(board); if( result > 0 ) { return "redirect:/board/list"; } int no = board.getNo(); return "redirect:/board/update?no="+ no + "&error"; } /** * 게시글 삭제 처리 * @param no * @return * @throws Exception */ @PostMapping("/delete") public String delete(@RequestParam("no") int no) throws Exception { int result = boardService.delete(no); if( result > 0 ) { return "redirect:/board/list"; } return "redirect:/board/update?no=" + no + "&error"; } }

<h1>게시글 목록</h1> <a href="/board/insert">글쓰기</a> <table border="1"> <tr> <th width="50">번호</th> <th width="300">제목</th> <th width="100">작성자</th> <th width="200">등록일자</th> <th width="200">수정일자</th> </tr> <th:block th:each="board : ${pageInfo.list}"> <tr> <td align="center" th:text="${board.no}"></td> <td> <!-- th:???="|문자열+${표현식}|" --> <a th:href="|/board/read?no=${board.no}|" th:text="${board.title}"></a> </td> <td align="center" th:text="${board.writer}"></td> <!-- 유틸리티객체.메소드() #dates.format( 날짜객체명, '날짜포맷' ) - #dates.format( board.regDate, 'yyyy-MM-dd HH:mm:ss' ) --> <td align="center"> <span th:text="${ #dates.format( board.createdAt, 'yyyy-MM-dd HH:mm:ss' ) }"></span> </td> <td align="center"> <span th:text="${ #dates.format( board.updatedAt, 'yyyy-MM-dd HH:mm:ss' ) }"></span> </td> </tr> </th:block> </table>

<!-- 페이지네이션 --> <!-- ⚡ 유동적인 페이지 번호 출력 (pagehelper) --> <th:block th:if="${pageInfo.pages > 0}"> <div class="pagination flex justify-content-center"> <ul style="display: flex; list-style-type: none; gap: 10px;"> <li th:if="${pageInfo.pageNum > 1}"> <a th:href="@{/board/list(page=1, size=${pageInfo.pageSize})}"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="16" height="16" fill="currentColor" transform="scale(-1, 1)"> <path d="M224 239L29.66 44.66c-9.37-9.37-24.57-9.37-33.94 0L-26.34 67c-9.37 9.37-9.37 24.57 0 33.94L128.97 256-26.34 410.05c-9.37 9.37-9.37 24.57 0 33.94l22.34 22.34c9.37 9.37 24.57 9.37 33.94 0L224 273c9.37-9.37 9.37-24.57 0-33.94zM448 273L253.66 467.34c-9.37 9.37-24.57 9.37-33.94 0L197.34 445c-9.37-9.37-9.37-24.57 0-33.94L352.97 256 197.34 100.95c-9.37-9.37-9.37-24.57 0-33.94l22.34-22.34c9.37-9.37 24.57-9.37 33.94 0L448 239c9.37 9.37 9.37 24.57 0 33.94z"/> </svg> </a> </li> <li th:if="${pageInfo.hasPreviousPage}"> <a th:href="@{/board/list(page=${pageInfo.prePage}, size=${pageInfo.pageSize})}"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" width="16" height="16" fill="currentColor"><path d="M34.52 239l194.34-194.34c9.37-9.37 24.57-9.37 33.94 0l22.34 22.34c9.37 9.37 9.37 24.57 0 33.94L128.97 256l156.17 156.17c9.37 9.37 9.37 24.57 0 33.94l-22.34 22.34c-9.37 9.37-24.57 9.37-33.94 0L34.52 273c-9.37-9.37-9.37-24.57 0-33.94z"/></svg> </a> </li> <li th:each="i : ${#numbers.sequence(pageInfo.navigateFirstPage, pageInfo.navigateLastPage)}"> <a th:href="@{/board/list(page=${i}, size=${pageInfo.pageSize})}" th:text="${i}" class="page" th:classappend="${pageInfo.pageNum == i} ? 'active' : ''"></a> </li> <li th:if="${pageInfo.hasNextPage}"> <a th:href="@{/board/list(page=${pageInfo.nextPage}, size=${pageInfo.pageSize})}"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" width="16" height="16" fill="currentColor"><path d="M285.48 273l-194.34 194.34c-9.37 9.37-24.57 9.37-33.94 0l-22.34-22.34c-9.37-9.37-9.37-24.57 0-33.94L191.03 256 34.86 99.83c-9.37-9.37-9.37-24.57 0-33.94l22.34-22.34c9.37-9.37 24.57-9.37 33.94 0L285.48 239c9.37 9.37 9.37 24.57 0 33.94z"/></svg> </a> </li> <li th:if="${pageInfo.pageNum < pageInfo.pages}"> <a th:href="@{/board/list(page=${pageInfo.pages}, size=${pageInfo.pageSize})}"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="16" height="16" fill="currentColor"> <path d="M224 239L29.66 44.66c-9.37-9.37-24.57-9.37-33.94 0L-26.34 67c-9.37 9.37-9.37 24.57 0 33.94L128.97 256-26.34 410.05c-9.37 9.37-9.37 24.57 0 33.94l22.34 22.34c9.37 9.37 24.57 9.37 33.94 0L224 273c9.37-9.37 9.37-24.57 0-33.94zM448 273L253.66 467.34c-9.37 9.37-24.57 9.37-33.94 0L197.34 445c-9.37-9.37-9.37-24.57 0-33.94L352.97 256 197.34 100.95c-9.37-9.37-9.37-24.57 0-33.94l22.34-22.34c9.37-9.37 24.57-9.37 33.94 0L448 239c9.37 9.37 9.37 24.57 0 33.94z"/> </svg> </a> </li> </ul> </div> </th:block>

<!-- 페이지네이션 --> <!-- ⚡ 10(count)개씩 끊어서 고정 --> <th:block th:if="${pageInfo.pages > 0}"> <div class="pagination flex justify-content-center"> <ul style="display: flex; list-style-type: none; gap: 10px;"> <li th:if="${pageInfo.pageNum > 1}"> <a th:href="@{/board/list(page=1, size=${pageInfo.pageSize})}"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="16" height="16" fill="currentColor" transform="scale(-1, 1)"> <path d="M224 239L29.66 44.66c-9.37-9.37-24.57-9.37-33.94 0L-26.34 67c-9.37 9.37-9.37 24.57 0 33.94L128.97 256-26.34 410.05c-9.37 9.37-9.37 24.57 0 33.94l22.34 22.34c9.37 9.37 24.57 9.37 33.94 0L224 273c9.37-9.37 9.37-24.57 0-33.94zM448 273L253.66 467.34c-9.37 9.37-24.57 9.37-33.94 0L197.34 445c-9.37-9.37-9.37-24.57 0-33.94L352.97 256 197.34 100.95c-9.37-9.37-9.37-24.57 0-33.94l22.34-22.34c9.37-9.37 24.57-9.37 33.94 0L448 239c9.37 9.37 9.37 24.57 0 33.94z"/> </svg> </a> </li> <li th:if="${pageInfo.hasPreviousPage}"> <a th:href="@{/board/list(page=${pageInfo.prePage}, size=${pageInfo.pageSize})}"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" width="16" height="16" fill="currentColor"><path d="M34.52 239l194.34-194.34c9.37-9.37 24.57-9.37 33.94 0l22.34 22.34c9.37 9.37 9.37 24.57 0 33.94L128.97 256l156.17 156.17c9.37 9.37 9.37 24.57 0 33.94l-22.34 22.34c-9.37 9.37-24.57 9.37-33.94 0L34.52 273c-9.37-9.37-9.37-24.57 0-33.94z"/></svg> </a> </li> <li th:each="i : ${#numbers.sequence(pagination.start, pagination.end)}"> <a th:href="@{/board/list(page=${i}, size=${pageInfo.pageSize})}" th:text="${i}" class="page" th:classappend="${pageInfo.pageNum == i} ? 'active' : ''"></a> </li> <li th:if="${pageInfo.hasNextPage}"> <a th:href="@{/board/list(page=${pageInfo.nextPage}, size=${pageInfo.pageSize})}"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" width="16" height="16" fill="currentColor"><path d="M285.48 273l-194.34 194.34c-9.37 9.37-24.57 9.37-33.94 0l-22.34-22.34c-9.37-9.37-9.37-24.57 0-33.94L191.03 256 34.86 99.83c-9.37-9.37-9.37-24.57 0-33.94l22.34-22.34c9.37-9.37 24.57-9.37 33.94 0L285.48 239c9.37 9.37 9.37 24.57 0 33.94z"/></svg> </a> </li> <li th:if="${pageInfo.pageNum < pageInfo.pages}"> <a th:href="@{/board/list(page=${pageInfo.pages}, size=${pageInfo.pageSize})}"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="16" height="16" fill="currentColor"> <path d="M224 239L29.66 44.66c-9.37-9.37-24.57-9.37-33.94 0L-26.34 67c-9.37 9.37-9.37 24.57 0 33.94L128.97 256-26.34 410.05c-9.37 9.37-9.37 24.57 0 33.94l22.34 22.34c9.37 9.37 24.57 9.37 33.94 0L224 273c9.37-9.37 9.37-24.57 0-33.94zM448 273L253.66 467.34c-9.37 9.37-24.57 9.37-33.94 0L197.34 445c-9.37-9.37-9.37-24.57 0-33.94L352.97 256 197.34 100.95c-9.37-9.37-9.37-24.57 0-33.94l22.34-22.34c9.37-9.37 24.57-9.37 33.94 0L448 239c9.37 9.37 9.37 24.57 0 33.94z"/> </svg> </a> </li> </ul> </div> </th:block>

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>게시글 목록</title> <style> .page { padding: 5px 10px; border: 1px solid #ccc; cursor: pointer; text-decoration: none; } .page.active { font-weight: bold; } </style> </head> <body> <h1>게시글 목록</h1> <a href="/board/insert">글쓰기</a> <table border="1"> <tr> <th width="50">번호</th> <th width="300">제목</th> <th width="100">작성자</th> <th width="200">등록일자</th> <th width="200">수정일자</th> </tr> <th:block th:each="board : ${pageInfo.list}"> <tr> <td align="center" th:text="${board.no}"></td> <td> <!-- th:???="|문자열+${표현식}|" --> <a th:href="|/board/read?no=${board.no}|" th:text="${board.title}"></a> </td> <td align="center" th:text="${board.writer}"></td> <!-- 유틸리티객체.메소드() #dates.format( 날짜객체명, '날짜포맷' ) - #dates.format( board.regDate, 'yyyy-MM-dd HH:mm:ss' ) --> <td align="center"> <span th:text="${ #dates.format( board.createdAt, 'yyyy-MM-dd HH:mm:ss' ) }"></span> </td> <td align="center"> <span th:text="${ #dates.format( board.updatedAt, 'yyyy-MM-dd HH:mm:ss' ) }"></span> </td> </tr> </th:block> </table> <!-- 페이지네이션 --> <!-- ⚡ 유동적인 페이지 번호 출력 (pagehelper) --> <th:block th:if="${pageInfo.pages > 0}"> <div class="pagination flex justify-content-center"> <ul style="display: flex; list-style-type: none; gap: 10px;"> <li th:if="${pageInfo.pageNum > 1}"> <a th:href="@{/board/list(page=1, size=${pageInfo.pageSize})}"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="16" height="16" fill="currentColor" transform="scale(-1, 1)"> <path d="M224 239L29.66 44.66c-9.37-9.37-24.57-9.37-33.94 0L-26.34 67c-9.37 9.37-9.37 24.57 0 33.94L128.97 256-26.34 410.05c-9.37 9.37-9.37 24.57 0 33.94l22.34 22.34c9.37 9.37 24.57 9.37 33.94 0L224 273c9.37-9.37 9.37-24.57 0-33.94zM448 273L253.66 467.34c-9.37 9.37-24.57 9.37-33.94 0L197.34 445c-9.37-9.37-9.37-24.57 0-33.94L352.97 256 197.34 100.95c-9.37-9.37-9.37-24.57 0-33.94l22.34-22.34c9.37-9.37 24.57-9.37 33.94 0L448 239c9.37 9.37 9.37 24.57 0 33.94z"/> </svg> </a> </li> <li th:if="${pageInfo.hasPreviousPage}"> <a th:href="@{/board/list(page=${pageInfo.prePage}, size=${pageInfo.pageSize})}"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" width="16" height="16" fill="currentColor"><path d="M34.52 239l194.34-194.34c9.37-9.37 24.57-9.37 33.94 0l22.34 22.34c9.37 9.37 9.37 24.57 0 33.94L128.97 256l156.17 156.17c9.37 9.37 9.37 24.57 0 33.94l-22.34 22.34c-9.37 9.37-24.57 9.37-33.94 0L34.52 273c-9.37-9.37-9.37-24.57 0-33.94z"/></svg> </a> </li> <li th:each="i : ${#numbers.sequence(pageInfo.navigateFirstPage, pageInfo.navigateLastPage)}"> <a th:href="@{/board/list(page=${i}, size=${pageInfo.pageSize})}" th:text="${i}" class="page" th:classappend="${pageInfo.pageNum == i} ? 'active' : ''"></a> </li> <li th:if="${pageInfo.hasNextPage}"> <a th:href="@{/board/list(page=${pageInfo.nextPage}, size=${pageInfo.pageSize})}"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" width="16" height="16" fill="currentColor"><path d="M285.48 273l-194.34 194.34c-9.37 9.37-24.57 9.37-33.94 0l-22.34-22.34c-9.37-9.37-9.37-24.57 0-33.94L191.03 256 34.86 99.83c-9.37-9.37-9.37-24.57 0-33.94l22.34-22.34c9.37-9.37 24.57-9.37 33.94 0L285.48 239c9.37 9.37 9.37 24.57 0 33.94z"/></svg> </a> </li> <li th:if="${pageInfo.pageNum < pageInfo.pages}"> <a th:href="@{/board/list(page=${pageInfo.pages}, size=${pageInfo.pageSize})}"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="16" height="16" fill="currentColor"> <path d="M224 239L29.66 44.66c-9.37-9.37-24.57-9.37-33.94 0L-26.34 67c-9.37 9.37-9.37 24.57 0 33.94L128.97 256-26.34 410.05c-9.37 9.37-9.37 24.57 0 33.94l22.34 22.34c9.37 9.37 24.57 9.37 33.94 0L224 273c9.37-9.37 9.37-24.57 0-33.94zM448 273L253.66 467.34c-9.37 9.37-24.57 9.37-33.94 0L197.34 445c-9.37-9.37-9.37-24.57 0-33.94L352.97 256 197.34 100.95c-9.37-9.37-9.37-24.57 0-33.94l22.34-22.34c9.37-9.37 24.57-9.37 33.94 0L448 239c9.37 9.37 9.37 24.57 0 33.94z"/> </svg> </a> </li> </ul> </div> </th:block> <!-- 페이지네이션 --> <!-- ⚡ 10(count)개씩 끊어서 고정 --> <th:block th:if="${pageInfo.pages > 0}"> <div class="pagination flex justify-content-center"> <ul style="display: flex; list-style-type: none; gap: 10px;"> <li th:if="${pageInfo.pageNum > 1}"> <a th:href="@{/board/list(page=1, size=${pageInfo.pageSize})}"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="16" height="16" fill="currentColor" transform="scale(-1, 1)"> <path d="M224 239L29.66 44.66c-9.37-9.37-24.57-9.37-33.94 0L-26.34 67c-9.37 9.37-9.37 24.57 0 33.94L128.97 256-26.34 410.05c-9.37 9.37-9.37 24.57 0 33.94l22.34 22.34c9.37 9.37 24.57 9.37 33.94 0L224 273c9.37-9.37 9.37-24.57 0-33.94zM448 273L253.66 467.34c-9.37 9.37-24.57 9.37-33.94 0L197.34 445c-9.37-9.37-9.37-24.57 0-33.94L352.97 256 197.34 100.95c-9.37-9.37-9.37-24.57 0-33.94l22.34-22.34c9.37-9.37 24.57-9.37 33.94 0L448 239c9.37 9.37 9.37 24.57 0 33.94z"/> </svg> </a> </li> <li th:if="${pageInfo.hasPreviousPage}"> <a th:href="@{/board/list(page=${pageInfo.prePage}, size=${pageInfo.pageSize})}"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" width="16" height="16" fill="currentColor"><path d="M34.52 239l194.34-194.34c9.37-9.37 24.57-9.37 33.94 0l22.34 22.34c9.37 9.37 9.37 24.57 0 33.94L128.97 256l156.17 156.17c9.37 9.37 9.37 24.57 0 33.94l-22.34 22.34c-9.37 9.37-24.57 9.37-33.94 0L34.52 273c-9.37-9.37-9.37-24.57 0-33.94z"/></svg> </a> </li> <li th:each="i : ${#numbers.sequence(pagination.start, pagination.end)}"> <a th:href="@{/board/list(page=${i}, size=${pageInfo.pageSize})}" th:text="${i}" class="page" th:classappend="${pageInfo.pageNum == i} ? 'active' : ''"></a> </li> <li th:if="${pageInfo.hasNextPage}"> <a th:href="@{/board/list(page=${pageInfo.nextPage}, size=${pageInfo.pageSize})}"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" width="16" height="16" fill="currentColor"><path d="M285.48 273l-194.34 194.34c-9.37 9.37-24.57 9.37-33.94 0l-22.34-22.34c-9.37-9.37-9.37-24.57 0-33.94L191.03 256 34.86 99.83c-9.37-9.37-9.37-24.57 0-33.94l22.34-22.34c9.37-9.37 24.57-9.37 33.94 0L285.48 239c9.37 9.37 9.37 24.57 0 33.94z"/></svg> </a> </li> <li th:if="${pageInfo.pageNum < pageInfo.pages}"> <a th:href="@{/board/list(page=${pageInfo.pages}, size=${pageInfo.pageSize})}"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="16" height="16" fill="currentColor"> <path d="M224 239L29.66 44.66c-9.37-9.37-24.57-9.37-33.94 0L-26.34 67c-9.37 9.37-9.37 24.57 0 33.94L128.97 256-26.34 410.05c-9.37 9.37-9.37 24.57 0 33.94l22.34 22.34c9.37 9.37 24.57 9.37 33.94 0L224 273c9.37-9.37 9.37-24.57 0-33.94zM448 273L253.66 467.34c-9.37 9.37-24.57 9.37-33.94 0L197.34 445c-9.37-9.37-9.37-24.57 0-33.94L352.97 256 197.34 100.95c-9.37-9.37-9.37-24.57 0-33.94l22.34-22.34c9.37-9.37 24.57-9.37 33.94 0L448 239c9.37 9.37 9.37 24.57 0 33.94z"/> </svg> </a> </li> </ul> </div> </th:block> </body> </html>