검색 목록 구현하기 (with 위, 아래 방향키 선택)

🎉 구현 결과

 

🚩 구현 목표

1. 사용자의 검색 키워드와 일치하는 검색 목록 보여주기

2. 위, 아래 방향키로 검색 목록 이동하기

 

📝 컴포넌트의 전체 구조

 

export default function SearchFormWithList({
  monsters,
  responsive,
  visuallyHidden = false,
}: Props) {
  const {
    text,
    searchRef,
    listRef,
    filterdMonsters,
    selected,
    cursor,
    listOpen,
    handleTextChange,
    handleTextClear,
    handleOpenList,
    handleCloseList,
    handleLinkClick,
  } = useSearch(monsters);
  const pathname = usePathname();

  return (
    <div
      className={`${responsive === 'sm-hidden' ? 'sm-hidden' : undefined} ${
        visuallyHidden && pathname === '/' && 'visually-hidden'
      } ${styles.search}`}
      ref={searchRef}
    >
      <SearchForm
        text={text}
        selected={selected}
        onChange={handleTextChange}
        onTextClear={handleTextClear}
        onClick={handleOpenList}
        onCloseList={handleCloseList}
      />
      {listOpen && (
        <SearchList
          ref={listRef}
          monsters={filterdMonsters}
          cursor={cursor}
          onLinkClick={handleLinkClick}
          onCloseList={handleCloseList}
        />
      )}
    </div>
  );
}

• Props
  • monsters: 서버에서 받아온 전체 검색 목록
  • responsive, visuallyHidden: css 스타일 관련 속성
• useSearch() hook
  
  • 검색 관련 로직을 담고있는 훅
• ref
  • searchRef: 최상위 element(div)에 연결 (keydown 이벤트를 등록하기 위함)
  • listRef: <SearchList /> 컴포넌트의 <ol> 태그에 연결 (key 이벤트 발생 시, list가 스크롤되기 위함)

 

📝 SearchForm, SearchList 컴포넌트

<SearchFrom />

export default function SearchForm({
  text,
  selected,
  onChange,
  onTextClear,
  onClick,
  onCloseList,
  onCloseSearchBar,
}: Props) {
  const router = useRouter();
  const searchParams = useSearchParams();
  const handleSumbit = (e: React.FormEvent) => {
    e.preventDefault();

    if (text.trim().length === 0 || !selected) {
      toast.dismiss();
      toast.warn('몬스터를 선택해주세요');
      return;
    }

    onCloseList && onCloseList();
    onCloseSearchBar && onCloseSearchBar();
    router.push(`/category/${selected.path}?search=${selected.name}`, {
      scroll: text !== searchParams.get('search'),
    });
  };

  return (
    <form className={styles.form} onSubmit={handleSumbit}>
      <input
        className={styles.search}
        type='text'
        placeholder='몬스터 검색'
        spellCheck={false}
        value={text}
        onChange={onChange}
        onClick={onClick}
      />

      {text.length > 0 && (
        <button
          className={styles['reset-button']}
          type='button'
          onClick={onTextClear}
        >
          <CloseIcon size='small' />
        </button>
      )}

      <button className={styles['submit-button']} type='submit'>
        <SearchIcon color='white' />
      </button>
    </form>
  );
}

 

<SearchList />

const SearchList = forwardRef(
  (
    {
      monsters,
      cursor,
      display,
      onLinkClick,
      onCloseList,
      onCloseSearchBar,
    }: Props,
    ref: ForwardedRef<HTMLOListElement>
  ) => {
    const searchParams = useSearchParams();
    const handleClick = (name: string) => {
      onLinkClick(name);
      onCloseList && onCloseList();
      onCloseSearchBar && onCloseSearchBar();
    };

    return (
      <div
        className={`${styles['list-container']} ${
          display === 'mobileSearchBar' && styles['mobile-search-bar']
        }`}
      >
        <ol className={`${styles.list}`} ref={ref}>
          {monsters.length === 0 && (
            <p className={styles['not-match']}>일치하는 몬스터가 없습니다.</p>
          )}
          {monsters.map(({ name, path }, index) => (
            <li
              key={name}
              className={`${styles.item} ${cursor === index && styles.select}`}
            >
              <Link
                className={`${styles.link}`}
                href={{
                  pathname: `/category/${path}`,
                  query: { search: name },
                }}
                prefetch={false}
                scroll={name !== searchParams.get('search')}
                onClick={() => handleClick(name)}
              >
                {name}
              </Link>
            </li>
          ))}
        </ol>
      </div>
    );
  }
);

 

📝 useSearch()

// 값 변경 시, SearchList 컴포넌트의 .list 클래스 max-height 변경해주세요.
const SEARCH_LIST_SHOW_MAX_ITEM_COUNT = 7;

export default function useSearch(monsters: SearchMonster[]) {
  const [text, setText] = useState(''); //사용자가 입력한 search form text 상태
  const [keyword, setKeyword] = useState(''); // search list 방향키 이벤트 발생 전, 사용자가 입력한 keyword 상태
  const [selected, setSelected] = useState<SearchMonster | null>(null); // search list에서 선택된 item
  const [cursor, setCursor] = useState<number | null>(null); // search list에서 현재 선택된 item의 cursor
  const [listOpen, setListOpen] = useState(false);
  const searchRef = useRef<HTMLDivElement>(null); // search 최상위 element
  const listRef = useRef<HTMLOListElement>(null); // search list element
  const searchParams = useSearchParams();

  /** search list 방향키 이벤트 발생 전, 사용자가 입력한 keyword에 따라 목록 필터 */
  const filterdMonsters = useMemo(
    () =>
      monsters.filter(({ name }) =>
        name
          .replace(/ /g, '')
          .toUpperCase()
          .includes(keyword.replace(/ /g, '').toUpperCase())
      ),
    [keyword, monsters]
  );

  const handleTextClear = useCallback(() => {
    setText('');
    setKeyword('');
    setCursor(null);
  }, []);

  const handleOpenList = useCallback(() => setListOpen(true), []);
  const handleCloseList = useCallback(() => setListOpen(false), []);

  const handleLinkClick = useCallback((name: string) => {
    setText(name);
    setCursor(0);
    setKeyword(name);
  }, []);

  const handleTextChange = useCallback(
    (e: React.ChangeEvent<HTMLInputElement>) => {
      setListOpen(true);
      setText(e.target.value);
      setKeyword(e.target.value);
      setCursor(null);
      setSelected(null);
    },
    []
  );

  /** 방향키에 따른 검색 목록 스크롤 함수 */
  const scrollSearchList = useCallback(
    (cursor: number, direction: keyDirection) => {
      const listElement = listRef.current;
      const itemHeight = listElement?.children[0].clientHeight || 32;

      // 아래 방향키
      if (direction === ARROW_DOWN) {
        cursor >= SEARCH_LIST_SHOW_MAX_ITEM_COUNT
          ? listElement?.scrollBy({ top: itemHeight })
          : listElement?.scrollTo({ top: 0 });

        return;
      }

      // 위 방향키
      if (direction === ARROW_UP) {
        cursor <= filterdMonsters.length - 1 - SEARCH_LIST_SHOW_MAX_ITEM_COUNT
          ? listElement?.scrollBy({ top: -itemHeight })
          : listElement?.scrollTo({
              top: listElement.childElementCount * itemHeight,
            });

        return;
      }
    },
    [filterdMonsters.length]
  );

  /** 검색 목록 위, 아래 방향키 이벤트 */
  useEffect(() => {
    if (!listOpen) return;

    // 일치하는 몬스터가 없으면 이벤트가 발생하지 않음
    if (filterdMonsters.length === 0) {
      setSelected(null);
      return;
    }

    const searchElement = searchRef.current;

    const KeyHandler = (e: KeyboardEvent) => {
      // 아래 방향키
      if (e.key === ARROW_DOWN) {
        let nextCursor;

        if (cursor === null) nextCursor = 0;
        else nextCursor = cursor < filterdMonsters.length - 1 ? cursor + 1 : 0;

        setCursor(nextCursor);
        setText(filterdMonsters[nextCursor].name);
        setSelected({
          name: filterdMonsters[nextCursor].name,
          path: filterdMonsters[nextCursor].path,
        });
        scrollSearchList(nextCursor, ARROW_DOWN);
        return;
      }

      // 위 방향키
      if (e.key === ARROW_UP) {
        let nextCursor;

        if (cursor === null) nextCursor = filterdMonsters.length - 1;
        else nextCursor = cursor > 0 ? cursor - 1 : filterdMonsters.length - 1;

        setCursor(nextCursor);
        setText(filterdMonsters[nextCursor].name);
        setSelected({
          name: filterdMonsters[nextCursor].name,
          path: filterdMonsters[nextCursor].path,
        });
        scrollSearchList(nextCursor, ARROW_UP);
        return;
      }
    };

    searchElement?.addEventListener('keydown', KeyHandler);

    return () => {
      searchElement?.removeEventListener('keydown', KeyHandler);
    };
  }, [listOpen, cursor, filterdMonsters, scrollSearchList]);

  /** 검색 목록 바깥 영역 클릭 시, 목록 닫기 */
  useEffect(() => {
    if (!listOpen) return;

    const closeSearchList = (e: MouseEvent) => {
      if (searchRef.current && !searchRef.current.contains(e.target as Node)) {
        setCursor(null);
        setListOpen(false);
      }
    };

    document.addEventListener('click', closeSearchList);
    return () => document.removeEventListener('click', closeSearchList);
  }, [listOpen]);

  /** URL's query string 'search'값으로 text, keyword, selected 상태 설정  */
  useEffect(() => {
    const searchParam = searchParams.get('search');
    if (searchParam) {
      const selectedMonster =
        monsters.find((monster) => monster.name === searchParam) || null;

      setText(searchParam);
      setKeyword(searchParam);
      setSelected(selectedMonster);
    }
  }, [searchParams]);

  return {
    text,
    searchRef,
    listRef,
    filterdMonsters,
    selected,
    cursor,
    listOpen,
    handleTextChange,
    handleTextClear,
    handleOpenList,
    handleCloseList,
    handleLinkClick,
  };
}

 

🏃‍♂️ 구현 1: 사용자의 검색 키워드와 일치하는 검색 목록 보여주기

  const [text, setText] = useState(''); //사용자가 입력한 search form text 상태
  const [keyword, setKeyword] = useState(''); // search list 방향키 이벤트 발생 전, 사용자가 입력한 keyword 상태

  /** search list 방향키 이벤트 발생 전, 사용자가 입력한 keyword에 따라 목록 필터 */
  const filterdMonsters = useMemo(
    () =>
      monsters.filter(({ name }) =>
        name
          .replace(/ /g, '')
          .toUpperCase()
          .includes(keyword.replace(/ /g, '').toUpperCase())
      ),
    [keyword, monsters]
  );
  
  
  const handleTextChange = useCallback(
    (e: React.ChangeEvent<HTMLInputElement>) => {
      setListOpen(true);
      setText(e.target.value);
      setKeyword(e.target.value);
      setCursor(null);
      setSelected(null);
    },
    []
  );

 

• filterdMonsters
  • keyword 값이 전체 검색 목록(monsters)에 포함되어 있는것만 filter
  • filter된 배열은 <SearchList />에 전달되어 검색 목록을 구성

 

• text와 keyword 두 개의 상태로 나눈 이유
  • 위, 아래 방향키 이벤트 발생 시, 해당 몬스터 이름으로 input text가 변경됩니다. 이때 text 상태 값으로 검색 목록을 필터한다면 input text에 있는 몬스터만 목록에 나타나게 됩니다.
  • 그래서, 사용자가 입력한 값을 기억하고 있는 상태(keyword)로 검색 목록을 filter해야, 다른 목록 item을 선택할 수 있습니다.

text 하나의 상태만 가지고 있을 때

🏃‍♂️ 구현 2: 위, 아래 방향키로 검색 목록 이동하기

1. 위, 아래 방향키 keydown 이벤트 등록

cursor는 위, 아래키 이벤트로 선택된 목록의 index를 가르키고 있습니다.

keydown 이벤트가 발생하면, 다음 커서의 위치(nextCursor)로 cursor, text, selected 상태를 업데이트하고, scrollSearchList(검색 목록 스크롤) 함수 실행

/** 검색 목록 위, 아래 방향키 이벤트 */
  useEffect(() => {
    if (!listOpen) return;

    // 일치하는 몬스터가 없으면 이벤트가 발생하지 않음
    if (filterdMonsters.length === 0) {
      setSelected(null);
      return;
    }

    const searchElement = searchRef.current;

    const KeyHandler = (e: KeyboardEvent) => {
      // 아래 방향키
      if (e.key === ARROW_DOWN) {
        let nextCursor; // 다음 커서의 위치

        if (cursor === null) nextCursor = 0;
        else nextCursor = cursor < filterdMonsters.length - 1 ? cursor + 1 : 0;

        setCursor(nextCursor);
        setText(filterdMonsters[nextCursor].name);
        setSelected({
          name: filterdMonsters[nextCursor].name,
          path: filterdMonsters[nextCursor].path,
        });
        scrollSearchList(nextCursor, ARROW_DOWN);
        return;
      }

      // 위 방향키
      if (e.key === ARROW_UP) {
        let nextCursor; // 다음 커서의 위치

        if (cursor === null) nextCursor = filterdMonsters.length - 1;
        else nextCursor = cursor > 0 ? cursor - 1 : filterdMonsters.length - 1;

        setCursor(nextCursor);
        setText(filterdMonsters[nextCursor].name);
        setSelected({
          name: filterdMonsters[nextCursor].name,
          path: filterdMonsters[nextCursor].path,
        });
        scrollSearchList(nextCursor, ARROW_UP);
        return;
      }
    };

    searchElement?.addEventListener('keydown', KeyHandler);

    return () => {
      searchElement?.removeEventListener('keydown', KeyHandler);
    };
  }, [listOpen, cursor, filterdMonsters, scrollSearchList]);

 

2. 검색 목록 스크롤(scrollSearchList)

  const scrollSearchList = useCallback(
    (cursor: number, direction: keyDirection) => {
      const listElement = listRef.current; // <ol> 검색 목록 태그
      const itemHeight = listElement?.children[0].clientHeight || 32; // item의 높이

      // 아래 방향키
      if (direction === ARROW_DOWN) {
        cursor >= SEARCH_LIST_SHOW_MAX_ITEM_COUNT
          ? listElement?.scrollBy({ top: itemHeight }) // item의 높이 만큼 스크롤이 내려감
          : listElement?.scrollTo({ top: 0 }); // 제일 위로 스크롤

        return;
      }

      // 위 방향키
      if (direction === ARROW_UP) {
        cursor <= filterdMonsters.length - 1 - SEARCH_LIST_SHOW_MAX_ITEM_COUNT
          ? listElement?.scrollBy({ top: -itemHeight }) // item의 높이 만큼 스크롤이 올라감
          : listElement?.scrollTo({ // 제일 아래로 스크롤
              top: listElement.childElementCount * itemHeight,
            });

        return;
      }
    },
    [filterdMonsters.length]
  );

 

• 아래 방향키
  • cursor >= SEARCH_LIST_SHOW_MAX_ITEM_COUNT
  • 목록 1~7번까지는 스크롤이 최상단에 있고, 8번부터는 item의 높이 만큼 스크롤이 내려갑니다.
• 위 방향키
  • cursor <= filterdMonsters.length - 1 - SEARCH_LIST_SHOW_MAX_ITEM_COUNT
  • 목록 맨 마지막에서 7번까지는 스크롤이 최하단에 있고, 마지막에서 8번부터는 item의 높이 만큼 스크롤이 올라갑니다.

 

• SEARCH_LIST_SHOW_MAX_COUNT = 7
  • 목록 item이 최대 7개까지 화면에 보임
  • css-in-js, inline-style, listRef로 max-height style을 지정하면 css파일에서 7을 수정하지 않아도 됩니다.

.list {
  max-height: calc(var(--item-height) * 7);
  overflow-y: auto;
  overscroll-behavior: contain;
}