[Feat] 북스냅 책 검색 및 사소한 오류들 해결

[yongaricode]

🔥 Issues

#32

✅ What to do

• 서점 상세 정보 api 경로 오타 수정
• 북스냅 스크롤 오류 해결
• 북스냅 책 리뷰 검색
• 책 검색 기록 저장 및 불러오기
• 닉네임 저장 및 부키에서 사용

📄 Description

• 북스냅에서 스크롤이 인식되지 않아 리뷰가 일부만 보이던 문제 해결
• 북스냅 내 책 리뷰 검색 기능 구현
• 최근 검색어 기록 저장 및 자동 불러오기 기능 구현
• 닉네임을 로컬에 저장하고, 부키 페이지에서 이를 불러와 사용자 맞춤 메시지에 활용

🤔 Considerations

🔍 스크롤 문제

• 리뷰를 계속 불러와야 하는 무한 스크롤 기능이 동작하지 않는 현상이 있었음
• 디버깅 결과, Layout 컴포넌트의 요소가 스크롤의 주체가 되어 BookSnap 내의 스크롤 이벤트가 감지되지 않았음
• 이 문제를 해결하기 위해 useContext를 사용하여, Layout에서 mainRef를 전달하고 BookSnap에서 이를 받아 스크롤 이벤트를 감지하도록 수정함

🔎 책 리뷰 검색 전달 구조

• 북스냅 구조상 검색 페이지 → 북스냅으로 검색 결과를 전달해야 했는데, 컴포넌트 depth가 깊어 props로 전달하기 어려웠음
• 고민 끝에, 검색어를 URL 쿼리 파라미터(?query=...)로 전달하기로 결정함
• 이는 props drilling 없이도 쉽게 접근 가능하고, 검색 결과를 공유할 수 있는 이점도 있음
• BookSnap 컴포넌트에서는 useSearchParams를 통해 query 값을 받아 처리하고, query가 존재하면 기존 전체 리뷰 로딩을 skip하도록 조건 분기하여 검색 결과만 표시되도록 함.

🛠️ Improvements to Make

• 현재 검색했을 때, 결과만 보이고 검색어가 보이지 않는다. 검색했을 때 UI를 수정해야겠다.
• 최근 검색어를 눌렀을 때 아무일도 일어나지 않는다. 최근 검색어를 눌렀을 때 검색이 되든가, 검색창에 띄워주게 해야겠다.

👀 References

스크린샷 또는 참고사항