[리스렌즈] 리뷰 검색, 이벤트 페이지 (filter, alert) 구현

 

 

검색 기능은 백엔드에서 처리하는 것보다 프론트에서 filter 메소드를 활용해 간단하게 구현하기로 팀원들과 서로 이야기를 나누었고,

 

따라서, 리뷰 목록에서 검색 기능을 구현한 과정을 적어보려 한다.

 

 

검색어를 입력할 수 있는 input 창은 공동 컴포넌트로 독립적으로 구현했으며,

해당 컴포넌트로 필요한 검색어를 props로 전달해 검색이 가능하도록 해주었다.

 

<Search searchOpt={"검색할 제목을 입력하세요."} search={SearchValue} />

 

 

 

사용자가 입력한 검색어에 따라 리뷰 목록을 filter를 이용해 필터링해준 후,

리뷰 제목을 기준으로 검색 기능이 작동하도록 코드를 작성했다.

 

 

• reviewArr.filter: reviewArr 상태에서 제목(rev_title)이 검색어를 포함하는 리뷰만 필터링.
• setFilteredReviews: 필터링된 결과를 filteredReviews 상태에 저장.
• 검색 결과가 없을 경우: '검색 결과가 없습니다'라는 메시지를 filteredReviews 상태에 저장.

 

const SearchValue = (value: string) => {

    const filtered = reviewArr.filter(review =>

      review.rev_title?.toLowerCase().includes(value.toLowerCase())

    );

    if (filtered.length === 0) {

      setFilteredReviews([{

        rev_title: '검색 결과가 없습니다'

      }]);

    } else {

      setFilteredReviews(filtered);

    }

  }

 

 

리뷰 검색

 

 

 

728x90

---

 

 

이벤트 페이지는 추후 웹 서비스가 더 발전한다면, 기업 협약, 포인트 혜택 등을 구현해볼 계획을 담아 개발한 페이지이다.

 

 

기본적으로 이벤트 배너 컴포넌트를 만들어 주었고,

props로 이벤트 제목을 전달해 배너 별로 서로 다른 이벤트를 표시할 수 있게 해주었다.

 

 

또한, 이벤트 페이지를 구현한만큼 아무 동작 없이 남겨두기보다 alert 함수를 작성해 준비중 메세지를 띄워 사용자가 궁금함에 배너를 클릭했을 때 개발자의 의도를 확인할 수 있도록 코드를 작성했다.

 

<Banner bannerTxt={'정수기 6월 한달 10% 할인'} onClick={() => handleBannerClick('이벤트 준비 중 입니다.')} />

<Banner bannerTxt={'에어컨 설치 경쟁의 서막'} onClick={() => handleBannerClick('이벤트 준비 중 입니다.')} />

<Banner bannerTxt={'로봇청소기 파격 할인 대전'} onClick={() => handleBannerClick('이벤트 준비 중 입니다.')} />

<Banner bannerTxt={'출석체크 이벤트'} onClick={() => handleBannerClick('이벤트 준비 중 입니다.')} />

 

 

이벤트 페이지