🔎 推奨クエリー機能

🛫 バックエンド

// /api/keyword/[keyword].ts
// async 함수 내부에 있다고 가정
const keywords = await prisma.keyword.findMany({
  where: {
    keyword: {
      contains: keyword,
    },
  },
  select: {
    keyword: true,
  },
});

🛬 フロント

1.ジッタの適用

2.合焦

// 2022/04/16 - 키워드 값 - by 1-blue ( react-hook-form의 useForm() )
const keyword = watch("keyword");
// 2022/04/16 - 키워드 포커스 여부 및 관련 키워드 보여줄지 결정할 변수 - by 1-blue
const [isFocus, setIsFocus] = useState(false);
// 2022/04/16 - 키워드 검색 시 디바운스 적용할 때 사용하는 변수 - by 1-blue
const [debounce, setDebounce] = useState(false);
// 2022/04/16 - 키워드 검색 시 디바운스 적용할 때 사용하는 함수 - by 1-blue
const debounceKeyword = useCallback(() => setDebounce(true), [setDebounce]);
// 2022/04/16 - 키워드 검색 시 디바운스 적용 - by 1-blue
useEffect(() => {
  const timerId = setTimeout(debounceKeyword, 300);

  return () => {
    clearTimeout(timerId);
    setDebounce(false);
  };
}, [debounceKeyword, keyword, setDebounce]);
// 검색창과 추천 검색어를 자식으로 가지는 element
const wrapperRef = useRef<HTMLDivElement>(null);
// 2022/04/16 - 영역외 클릭 시 추천 키워드 창 닫기 - by 1-blue
const handleCloseModal = useCallback(
  (e: any) => {
    if (
      isFocus &&
      (!wrapperRef.current || !wrapperRef.current.contains(e.target))
    )
      setIsFocus(false);
  },
  [isFocus, setIsFocus, wrapperRef]
);
// 2022/04/16 - 추천 키워드 창 닫기 이벤트 등록 - by 1-blue
useEffect(() => {
  setTimeout(() => window.addEventListener("click", handleCloseModal), 0);
  return () => window.removeEventListener("click", handleCloseModal);
}, [handleCloseModal]);
// 2022/04/16 - 추천 키워드 패치 - by 1-blue
const { data: recommendKeywords } = useSWR<IResponseOfRecommendKeywords>(
  debounce && keyword ? `/api/keyword/${keyword}` : null
);