🔎 推奨クエリー機能

🛫 バックエンド

backend - prisma

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

🛬 フロント

1.ジッタの適用

disbounceとは、同じリクエストを連続的に受信すると、最後のリクエストのみが有効になることを意味します.
商品検索では、検索語を入力したときのイベントに推奨検索語が表示されます.このオプションを適用しないと、ユーザーがアルファベットを押すたびにリクエストを発行し、サーバに大きな負担をかけます.
この問題を解決するために,連続入力クエリ時にサーバに送信されない要求を処理する装置を適用した.

2.合焦

推奨検索語が受信された後にレンダリングされた場合、ユーザーが検索ペインにフォーカスしている場合にのみ、推奨検索語が表示されます.
初期には,onFocusとonBlurを用いて,フォーカスが離れたときに推奨検索語が消え,そうすると推奨検索語をクリックしたり,推奨検索語のフォーカスに移動したりすると,検索ウィンドウonBlurが実行され,推奨検索語が消えてしまうという問題があった.
問題を解決するために、以前使用したモード領域の外クリック時に閉じる機能をインポートし、適用しました.

// 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
);

領域外クリックモード参照サイトを閉じる