✨ [YW-63] 최근 검색어 & 유사 태그 검색

[SeieunYoo]

📮 관련 이슈

• resolved: ✨ 검색 페이지 최근 검색어 #29

⛳️ 작업 내용

• 최근 검색어 구현(로컬스토리지)
• useQuery 를 이용해 유사 태그 검색 api fetch

🌱 PR 포인트

1. 유사 태그에도 SEO를 적용할 필요가 있을까?
   -> 유사 태그에는 적용할 필요가 없다고 생각되긴 하는데 여러분 의견이 궁금합니다
2. useRecentSearch 라는 커스텀 훅에서 로컬스토리지를 통해 최근 검색어를 전반적으로 관리를 하고 있기에 SearchPage 내에서 props 로 내려주고 있음
   -> 맞는 방식일까 고민되네욥
3. PR 내기 전에 보려니까 api fetch 시간이 30초~ 걸림(??)
   -> 다른 API fetch 했을 땐 괜찮았음
4. 같은 text-semi-bold 일 때 line-height 나 font-size가 다름
   -> 통일 하거나 다른 text-light-bold 같은 다른 type 도 필요해보임

📸 스크린샷

최근 검색어 & 검색어가 없는 경우 -> 인기검색어만	최근 검색어 O & 검색어가 없는 경우 -> 최근 검색어 & 인기검색어

2. 검색어 입력 시 api fetch -> 뭏 나 ㅁ 의 경우에는 유사 태그 가 없기에(빈배열) 전 검색 결과 유지

	스크린샷

📎 레퍼런스

✔️ 변경 사항

• useLocalStoarge 로 로컬스토리지 관리
• useDebounce , useDeferedValue 로 api 지연 렌더링 지연

✔️ 고려 사항

• 현재는 로컬에서 msw가 작동할 수 있게 수정하여 vercel preview에서도 확인할 수 있게 추후 리팩토링 예정 (환경변수 설계)
• API request, response가공할 수 있는 layer 작업 @elbica
• 빈 문자열 에러 처리 -> .trim() 처리해주면 됨
• useDeferredValue 말고 그냥 keepPreviousData 옵션으로 data fetching하기 전에 이전 데이터 유지 (By @elbica)

// src/application/hooks/api/search/index.ts
// # AS-IS
export const useSearchResult = (value: string) => {
  const debouncedQuery = useDebounce(value);
  const deferredQuery = useDeferredValue(debouncedQuery);

  const { data, ...rest } = useQuery<{ tags: SearchResult[] }>({
    queryKey: ["search", deferredQuery],
    queryFn: async () => await getRecentSearch(deferredQuery),
    // keepPreviousData: true,
  });
  return { searchResults: data?.tags };
};

// # TO-BE
export const useSearchResult = (value: string) => {
  const debouncedQuery = useDebounce(value);

  const { data, ...rest } = useQuery<{ tags: SearchResult[] }>({
    queryKey: ["search", debouncedQuery],
    queryFn: async () => await getRecentSearch(debouncedQuery),
    keepPreviousData: true, // *
  });
  return { searchResults: data?.tags };
};

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
21st-web-team-1-fe	✅ Ready (Inspect)	Visit Preview	Dec 25, 2022 at 6:29AM (UTC)

[elbica]

api를 직접 호출 하지 말고 msw를 활용해 보는 것도 좋은 방법 같아!

[elbica]

추가 리뷰 달았습니다~!😊

[ojj1123]

어프뤂 ~ ~