💻 코딩 일기 : [스프링 게시판 with React] '검색 기능' 편

🔔 '검색 기능'에 대해서 알아보자!

💟 검색 기능

BoardController.java

@GetMapping("list")
public Map<String, Object> list(@RequestParam(defaultValue = "1") Integer page,
                                @RequestParam(value = "type", required = false) String type,
                                @RequestParam(defaultValue = "", value = "keyword", required = false) String keyword) {
    return service.list(page, type, keyword);
}

• type, keyword는 쿼리 매개변수로 전달되지 않을 수 있습니다. 기본적으로는 null일 수 있습니다. keyword 경우에는 null이 아닌 빈 문자열로 설정합니다.

BoardService.java

public Map<String, Object> list(Integer page, String type, String keyword) {

    // 페이지 번호
   	~~~~
    Integer countAll = mapper.countAllWithSearch(searchType, keyword);

    // 검색어
    return Map.of("pageInfo", pageInfo,
            "boardList", mapper.selectAllPaging(offset, type, keyword));
}

• select, input에 맞게 조회되는 글의 최종 페이지 번호를 알기 위해 mapper에서 조회합니다.
• mapper에서 DB에 각 상황에 맞게 게시글을 조회합니다.

BoardMapper.java

@Select("""
        <script>
        SELECT b.id, 
               b.title,
               m.nick_name writer
        FROM board b JOIN member m ON b.member_id = m.id
           <trim prefix="WHERE" prefixOverrides="OR">
               <if test="searchType != null">
                   <bind name="pattern" value="'%' + keyword + '%'" />
                   <if test="searchType == 'all' || searchType == 'text'">
                       OR b.title LIKE #{pattern}
                       OR b.content LIKE #{pattern}
                   </if>
                   <if test="searchType == 'all' || searchType == 'nickName'">
                       OR m.nick_name LIKE #{pattern}
                   </if>
               </if>
           </trim>
        ORDER BY b.id DESC
        LIMIT #{offset}, 10
        </script>
        """)
List<Board> selectAllPaging(Integer offset, String searchType, String keyword);

@Select("""
        <script>
         SELECT COUNT(b.id)
         FROM board b JOIN member m ON b.member_id = m.id
            <trim prefix="WHERE" prefixOverrides="OR">
                <if test="searchType != null">
                    <bind name="pattern" value="'%' + keyword + '%'" />
                    <if test="searchType == 'all' || searchType == 'text'">
                        OR b.title LIKE #{pattern}
                        OR b.content LIKE #{pattern}
                    </if>
                    <if test="searchType == 'all' || searchType == 'nickName'">
                        OR m.nick_name LIKE #{pattern}
                    </if>
                </if>
            </trim>
         </script>
         """)
Integer countAllWithSearch(String searchType, String keyword);

1. selectAllPaging :

• board 테이블과 member 테이블을 조인하여 게시물의 ID, 제목, 작성자 닉네임을 조회합니다.
• <trim> :
  - prefix : WHERE 절을 조건부로 추가합니다.
  - prefixOverrides : 불필요한 OR을 제거합니다.
• <if> : searchType이 null이 아닐 때 keyword를 LIKE 구문에 맞게 변환하고 searchType이 all(전체)이거나 text(글(제목+내용))이면 제목 또는 내용에서 키워드를 조회합니다. searchType이 all(전체)이거나 nickName(닉네임)이면 닉네임에서 키워드를 조회합니다.

2. countAllWithSearch :

• 검색 type과 keyword에 따라 검색된 결과의 총수를 조회합니다.

BoardList.jsx

export function BoardList() {
  const navigate = useNavigate();
  const [boardList, setBoardList] = useState([]);
  const [pageInfo, setPageInfo] = useState({});
  const [searchParams] = useSearchParams();
  const [searchType, setSearchType] = useState("all");
  const [searchKeyword, setSearchKeyword] = useState("");

  useEffect(() => {
    axios.get(`/api/board/list?${searchParams}`).then((res) => {
      setBoardList(res.data.boardList);
      setPageInfo(res.data.pageInfo);
    });

    setSearchType("all");
    setSearchKeyword("");

    const typeParam = searchParams.get("type");
    const keywordParam = searchParams.get("keyword");
    if (typeParam) {
      setSearchType(typeParam);
    }

    if (keywordParam) {
      setSearchKeyword(keywordParam);
    }
  }, [searchParams]); //의존성(dependency)가 있다면 변경될때마다 함수를 trigger를 합니다.

  // 총 페이지 번호
  const pageNumbers = [];
  for (let i = pageInfo.leftPageNumber; i <= pageInfo.rightPageNumber; i++) {
    pageNumbers.push(i);
  }

  function handleSearchClick() {
    navigate(`/?type=${searchType}&keyword=${searchKeyword}`);
  }

  function handlePageButtonClick(pageNumber) {
    searchParams.set("page", pageNumber);
    navigate(`/?${searchParams}`);
  }

  return (
    <Box mt={"30px"}>
      <Box>게시물 목록</Box>
      <Box>
        {boardList.length === 0 && <Center>조회된 결과가 없습니다.</Center>}
        {boardList.length > 0 && (
          <Table>
            <Thead>
              <Tr>
                <Th>NO</Th>
                <Th>제목</Th>
                <Th>
                  <FontAwesomeIcon icon={faUserPen} />
                </Th>
              </Tr>
            </Thead>
            <Tbody>
              {boardList.map((board) => (
                <Tr
                  cursor={"pointer"}
                  _hover={{ bgColor: "gray.200" }}
                  onClick={() => navigate(`/board/${board.id}`)}
                  key={board.id}
                >
                  <Td>{board.id}</Td>
                  <Td>{board.title}</Td>
                  <Td>{board.writer}</Td>
                </Tr>
              ))}
            </Tbody>
          </Table>
        )}
      </Box>

      {/*검색*/}
      <Center>
        <Box mt={"30px"}>
          <Flex>
            <Box>
              <Select
                value={searchType}
                onChange={(e) => setSearchType(e.target.value)}
              >
                <option value={"all"}>전체</option>
                <option value={"text"}>글(제목+내용)</option>
                <option value={"nickName"}> 작성자</option>
              </Select>
            </Box>
            <Box>
              <Input
                value={searchKeyword}
                onChange={(e) => setSearchKeyword(e.target.value)}
                placeholder={"검색어를 입력하세요."}
              />
            </Box>
            <Box>
              <Button onClick={handleSearchClick}>
                <FontAwesomeIcon icon={faMagnifyingGlass} />
              </Button>
            </Box>
          </Flex>
        </Box>
      </Center>

      {/*페이지네이션*/}
      <Center>
        <Box mt={"30px"}>
          {/*만약 이전 버튼이 보이면 처음 버튼도 보인다. */}
          {pageInfo.prevPageNumber && (
            <>
              <Button onClick={() => handlePageButtonClick(1)}>
                <FontAwesomeIcon icon={faAnglesLeft} />
              </Button>
              <Button
                onClick={() => handlePageButtonClick(pageInfo.prevPageNumber)}
              >
                <FontAwesomeIcon icon={faAngleLeft} />
              </Button>
            </>
          )}

          {/*페이지 번호*/}
          {pageNumbers.map((pageNumber) => (
            <Button
              mr={"10px"}
              onClick={() => handlePageButtonClick(pageNumber)}
              key={pageNumber}
              colorScheme={
                pageNumber == pageInfo.currentPageNumber ? "teal" : "gray"
              }
            >
              {pageNumber}
            </Button>
          ))}

          {/*만약 다음 버튼이 보이면 맨끝 버튼도 보인다. */}
          {pageInfo.nextPageNumber && (
            <>
              <Button
                onClick={() => handlePageButtonClick(pageInfo.nextPageNumber)}
              >
                <FontAwesomeIcon icon={faAngleRight} />
              </Button>
              <Button
                onClick={() => handlePageButtonClick(pageInfo.lastPageNumber)}
              >
                <FontAwesomeIcon icon={faAnglesRight} />
              </Button>
            </>
          )}
        </Box>
      </Center>
    </Box>
  );
}

• 조회 결과 없을 때 안내 메세지 : boardList의 길이가 0보다 크면 테이블에 조회된 목록이 나오고 0 이면 "조회된 결과가 없습니다." 안내 메세지가 나옵니다.

• 검색 후 페이지 이동 : handlePageButtonClick(pageNumber) : searchParams 객체에 있는 page, type, keyword의 값이 쿼리 스트링으로 포함되기 때문에 pageNumber에 따라 조회합니다.

• 주소 복사 후 새 탭에 이동 시 input에 남기기고 home 클릭 시 검색 tyep과 keyword를 초기화합니다.

const [searchType, setSearchType] = useState("all");
const [searchKeyword, setSearchKeyword] = useState("");

useEffect(() => {
    axios.get(`/api/board/list?${searchParams}`).then((res) => {
      setBoardList(res.data.boardList);
      setPageInfo(res.data.pageInfo);
    });
	
    setSearchType("all"); //초기화
    setSearchKeyword(""); //초기화

    const typeParam = searchParams.get("type");
    const keywordParam = searchParams.get("keyword");
    if (typeParam) {
      setSearchType(typeParam);
    }

    if (keywordParam) {
      setSearchKeyword(keywordParam);
    }
  }, [searchParams]);


<Select
                value={searchType}
                onChange={(e) => setSearchType(e.target.value)}
              >
                <option value={"all"}>전체</option>
                <option value={"text"}>글(제목+내용)</option>
                <option value={"nickName"}> 작성자</option>
              </Select>
            </Box>
            <Box>
              <Input
                value={searchKeyword}
                onChange={(e) => setSearchKeyword(e.target.value)}
                placeholder={"검색어를 입력하세요."}
              />
            </Box>

• searchParams를 사용하여 type과 keyword 매개변수를 읽고, 이를 각각 setSearchType과 setSearchKeyword 함수를 사용하여 상태에 저장합니다.
• value 속성은 searchType 상태와 searchKeyword 상태로 설정 되어 있어 사용자 변경하면 상태를 업데이트 합니다.