select 태그를 예쁘게 꾸미고 싶을때 커스텀으로 직접 만드시죠 ?
이때 선택 옵션이 펼쳐진 상태에서 여백을 클릭해서 select 박스가 사라지게 하고 싶다면 이렇게 하시면 됩니다.

Example

const dropdownRef = useRef<HTMLDivElement>(null);

const dropdownRef = useClickOutside(() => {
  // 예시 : select 박스 닫기 요청
  setShowContent(false);
});

<div ref={dropdownRef}>

select박스로 사용되는 블럭을 dropdownRef로 설정해주고 select 박스를 닫게 하는 함수를 useClickOutside에 넘깁니다.

Hook

import { useEffect, useRef } from 'react';

export const useClickOutside = (handler: (event: any) => void) => {
  const domNode = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const listener = (event: any) => {
      if (!domNode.current || domNode.current?.contains(event.target as Node)) {
        return;
      }
      handler(event);
    };

    document.addEventListener('mousedown', listener);

    return () => {
      document.removeEventListener('mousedown', listener);
    };
  }, [handler]);

  return domNode;
};

useClickOutside 내부에서는 ref 영역 이외에서 mousedown 이벤트가 있을 경우 넘겨받은 handler를 호출하도록 되어있습니다.

이제 여백을 클릭하면 select 박스 닫을 수 있겠죠 ? :)