[공감병동 프로젝트] 검색 페이지 만들기

검색 기능의 구현 계획은

1. 검색창에 글을 입력하면 입력되는 글을 이벤트로 받아 바로 서버에 요청을 보내고 응답을 받는다.
2. 받은 응답을 바로 랜더링해서 보여준다.
3. 이벤트 앞 뒤에 b태그를 달아 tailwind로 커스텀 CSS를 입혀 색을 다르게 보여준다.

1. 이벤트를 받아 서버에 요청 보내기

• pages/search/index.tsx
  

  인풋 태그에 onChange이벤트를 달아 변경될때마다 handleQuery가 실행되도록 하였다.

• pages/search/index.tsx
  

  1. handleQuery에서는 이벤트를 받고, 한글,영문,숫자인지 정규표현식을 통해 테스트를 하고, 테스트를 통과하면 getSearchResult가 실행되도록 했다.

2. getSearchResult를 통해 쿼리를 해당 API에 호출한 후 검색 결과를 searchResult 상태에 등록되도록 했다.

• {server}/post/search.js
  

  서버쪽에서는 쿼리를 받아 sequelize의 Op.like를 통해(SQL의 like문) 타이틀에 해당 쿼리가 포함된 postData들을 찾아 보내주었다.

2. 받은 응답 랜더링 하기

• pages/search/index.tsx
  

  간단하게 searchResult의 length를 통해 데이터가 있을때와 없을 때를 분기해줬고, 각 타이틀을 클릭하면 그 포스트의 slug를 통해서 디테일페이지로 넘어갈 수 있도록 구성했다.
  이 중에 특이한 점은.. 타이틀을 표시하는 파트에 dangerouslySetInnerHTML을 사용한 것인데, 그 이유는 밑에서..

3. 검색하는 쿼리에 CSS 주기

• pages/search/index.tsx
  

  타이틀을 랜더링하는 span 태그에 dangerouslySetInnerHTML와 replace 함수를 통해 queryValue를 <b>queryValue<b>로 랜더링 되게 해 주었다.

• tailwind.config.js
  

  tailwindcss는 tailwind.config.js를 통해 커스텀이 가능하다. 여기서 <b>태그의 경우 공감병동 사이트에서 사용하는 메인 블루의 색상으로 커스텀 해 주었다. 이를 통해 검색어가 다른 색으로 랜더링될 수 있게 처리했다.

4. 구현 화면

만족스럽다..!