검색기능

생성일

2024/08/26 01:40

담당자

화면

배경

사용자가 지역, 기간, 보증금, 성별 검색 조건으로 원하는 목록만 조회할 수 있습니다.

구현한 기능

•

BE

Querydsl을 사용해 검색 결과 가져오기 사용자가 설정한 지역, 기간, 보증금, 성별 검색 조건에 해당하는 게시글 목록을 가져옵니다. 지역, 기간, 성별은 일치하고 보증금은 선택한 값 보다 작거나 같은 보증금으로 작성된 게시글들을 가져옵니다. isRecruiting 값을 받아서 모집 상태의 글만 불러오거나 전체 글을 가져옵니다. 페이징 처리를 해서 요청한 page, size 에 해당하는 결과를 응답합니다. 검색 조건 값을 “상관 없음”으로 보내면 해당 검색 조건은 필터링 대상에서 제외됩니다. 검색 조건이 다양하고, 요청으로 들어온 값이 “상관 없음”인 검색 조건은 필터링에서 제외해야 하기 때문에 Querydsl을 사용하여 검색 기능을 구현했습니다.

•

FE

유저가 지역 ,기간 ,보증금 , 성별을 선택하고 검색을 실행하면 handleSearch 함수를 내에 각 값들을 기반으로 searchParams라는 객체를 생성하고 이 객체가 api요청 url을 만듭니다. 그 url이 fetch를 통해 get 요청으로 서버에 보냅니다. 서버로부터 응답을 받으면 post상태를 useState로 저장하고 그 결과값들을 post와 postCard 컴포먼트에 전달되어 화면에 게시글 목록에 표시되게 합니다.

const handleSearch = async (
    query: SearchQuery,
    page = 1,
    size = 9,
    showRecruiting?: boolean,
  ) => {
    setQuery(query)
    const searchParams = {
      page: page.toString(),
      size: size.toString(),
      isRecruiting: showRecruiting?.toString() || "false",
      region: query.area,
      period: query.period,
      price: query.price?.toString() ?? "",
      gender: query.gender.toString(),
    }

    const newQueryString = new URLSearchParams(searchParams).toString()
    setQueryString(newQueryString)

    try {
      const response = await fetch(`/api/articles/filter?${newQueryString}`, {
        method: "GET",
        headers: new Headers(),
      })

      if (!response.ok) {
        throw new Error("서버 연결 실패")
      }

      const data = await response.json()
      if (data.code === "RESPONSE_SUCCESS" && data.status === "OK") {
        handleSearchResults(data.data.articleList)
        setSearchBoxOpen(!searchBoxOpen)
        setCount(data.data.totalCnt)
      } else {
        throw new Error("API Error: " + data.msg)
      }
    } catch (error: unknown) {
      console.error("에러", searchParams)
      setSearchBoxOpen(!searchBoxOpen)
      messageApi.error("검색된 결과가 없습니다.")
    }
  }
TypeScript
복사