💡 게시판 - 검색 기능

findBy(컬럼 이름)

• 컬럼에서 키워드를 넣어서 찾겠다.
  • 정확하게 키워드가 일치하는 데이터만 검색

findBy(컬럼 이름)Containing : 오늘 사용할 기능

• 컬럼에서 키워드가 포함된 것을 찾겠다.
  • 키워드가 포함된 모든 데이터 검색

RoardRepository

@Repository
public interface BoardRepository extends JpaRepository<Board, Integer> {

	Page<Board> findByTitleContaining(String searchKeyword, Pageable pageable);
}

우선 JpaRepository의 검색 기능을 사용하기 위해서 BoardRepository에 대소문자를 유의해서 Page<Board> findByTitleContaining(String searchKeyword, Pageable);를 추가해줍니다. 이때 Pageable을 받는 이유는 검색 결과 또한 페이징 처리를 해줘야하기 때문입니다.

또한 기존의 BoardService에는 검색 기능이 없기 때문에 해당 메소드를 만들어줍니다.

BoardService

public Page<Board> boardSearchList(String searchKeyword, Pageable pageable) {
     return boardRepository.findByTitleContaining(searchKeyword, pageable);
    }

위 처럼 boardSearchList 메서드를 만들어주는데 검색하는 내용도 페이징 처리를 해줘야하기 때문에 Pageable도 받아줍니다. 메서드에서 받은 searchKeyword와 pageable은 이전에 생성해둔 boardRepository.findByTitleContaining에 넘겨줍니다.

이제 컨트롤러로 가서 컨트롤러를 수정해주겠습니다.

BoardController - 기존 코드

@GetMapping("/board/list")
public String boardListForm(Model model, @PageableDefault(page = 0, size = 9, sort = "id",
            direction = Sort.Direction.DESC) Pageable pageable) {

    Page<Board> list = boardService.boardList(pageable;

    int nowPage = list.getPageable().getPageNumber() + 1;
    int startPage = Math.max(nowPage - 4, 1); //Math.max를 이용해서 start 페이지가 0이하로 되는 것을 방지
    int endPage = Math.min(nowPage + 5, list.getTotalPages()); //endPage가 총 페이지의 개수를 넘지 않도록

    model.addAttribute("list", list);
    model.addAttribute("nowPage", nowPage);
    model.addAttribute("startPage", startPage);
    model.addAttribute("endPage", endPage);


    return "boardList";
}

기존 코드는 페이징 처리 기능이 추가된 코드로 모든 데이터를 가져왔었습니다. 하지만 검색 기능이 추가된다면 검색 했을 때와 검색하지 않았을 때 데이터를 가져오는 방식의 구별을 둬야합니다.

BoardController - 변경 후 코드

@GetMapping("/board/list")
public String boardListForm(Model model, @PageableDefault(page = 0, size = 9, sort = "id",
            direction = Sort.Direction.DESC) Pageable pageable, String searchKeyword) {

    Page<Board> list = null;

    if (searchKeyword == null) { // 검색X
        // 기존과 동일하게 모든 데이터 불러오기
        list = boardService.boardList(pageable);
    } else { // 검색 O
        // 검색한 데이터만 가져오기
        list = boardService.boardSearchList(searchKeyword, pageable);
    }

    int nowPage = list.getPageable().getPageNumber() + 1;
    int startPage = Math.max(nowPage - 4, 1); //Math.max를 이용해서 start 페이지가 0이하로 되는 것을 방지
    int endPage = Math.min(nowPage + 5, list.getTotalPages()); //endPage가 총 페이지의 개수를 넘지 않도록

    model.addAttribute("list", list);
    model.addAttribute("nowPage", nowPage);
    model.addAttribute("startPage", startPage);
    model.addAttribute("endPage", endPage);


    return "boardList";
}

우선 매개변수로 String searchKeyword를 받아줍니다.

검색을 하지 않은 경우 - searchKeyword==null

• boardService.boardList(pageable) -> BoardRepository의 findAll 메서드 실행

검색을 한 경우 - searchKeyword!=null

• boardService.boardSearchList(searchKeyword, pageable) -> BoardRepository의 findByTitleContaining 메서드 실행

기능 로직은 어느정도 되었으니 이제 html 부분을 수정해서 검색창을 만들어주겠습니다.

boardList.html

<!-- 페이징 부분 -->
    <div class="pagination">
        <th:block th:each="page : ${#numbers.sequence(startPage, endPage)}">
            <a th:if="${page != nowPage}" th:href="@{/board/list(page=${page - 1}, searchKeyword=${param.searchKeyword})}" th:text="${page}" class="page-link"></a>
            <strong th:if="${page == nowPage}" th:text="${page}" class="current-page"></strong>
        </th:block>
    </div>

게시글 리스트 페이지의 페이징 부분 html 코드입니다. 기존 코드에서 searchKeyword=${param.searchKeyword}가 추가되었습니다. 이는 검색 후 페이지를 변경해도 검색 결과가 유지되는 기능을 합니다.
만약 이 코드가 없다면 검색 후 페이지를 변경하면 검색 결과가 없어지는 문제가 발생합니다.

검색 input, button html

<form th:action="@{/board/list}" method="get">
     <div class="search-container">
         <label class="search-label" for="searchKeyword">검색어:</label>
         <input class="search-input" type="text" id="searchKeyword" name="searchKeyword" />
         <button class="search-button" type="submit">검색</button>
     </div>
</form>

완성 후 게시글 리스트 페이지

GPT를 이용해서 디자인을 한 게시글 리스트 페이지입니다. html에 추가한 것처럼 검색창이 추가되었습니다. 이제 기능이 잘 동작하는지 확인해보겠습니다.

---

수정 검색 결과

검색 창에 '수정'을 검색한 결과입니다. '수정'이 들어간 모든 게시글이 정상적으로 검색이 된 것을 알 수 있습니다.

---

다음 글은 파일 업로드에 대해서 작성하겠습니다. 글에서 부족한 부분이 많을 것 같습니다. 모든 지적을 환영합니다!!

더 자세한 코드는 깃허브를 참고해주세요!

깃허브: https://github.com/pp8817/ToyProjectBoard