feat : 검색창 Ui 및 서비스 로직 구현

[chaduhwan]

설명

메인 페이지와 헤더에 위치할 검색창 구현 검색 api 와 연결

변경 내역

1. 검색창을 처음 클릭하였을 때 최근 변경한 문서가 하위 위치의 모달로 나타남.
2. 검색창에 키워드를 입력할 시 자동으로 api와 통신하여 키워드와 맞는 검색 결과가 나타남.
3. 검색 결과를 누를 시 해당 문서로 이동함.
4. 검색 결과를 누르지 않고 엔터를 입력할 시 가장 가까운 검색결과의 문서로 이동하게 됨.

논의할 점

서비스 로직과 UI의 분리를 어떻게 가져가면 좋을까요?

추후 예정사항

• [x] dim 영역의 블러처리 효과 추가 예정
• [x] 모달 영역 스크롤 디자인 구현
• [x] 모바일 반응형 적용시 bottom sheet로 모달이 대체되야함
• [ ] 서비스 로직과 UI 분리 작업

스크린샷

• 검색 초기

• 검색 동작

https://github.com/dev-wiki-kr/dev-wiki/assets/137901354/fb2f8ce7-482b-4db6-a185-0a5f19da26f5

• 검색 결과가 존재하지 않을 때