useOnClickOutside: 모달과 드롭다운을 닫는 이벤트 위임의 미학

// ❌ 크리스의 하드코딩 (모든 컴포넌트에 복사 붙여넣기 중)
function Dropdown({ onClose }) {
  const dropdownRef = useRef(null);

  useEffect(() => {
    const handleClick = (e) => {
      // 내 영역(dropdownRef) 바깥을 클릭했는지 확인
      if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
        onClose();
      }
    };

    document.addEventListener('mousedown', handleClick);
    return () => {
      document.removeEventListener('mousedown', handleClick);
    };
  }, [onClose]);

  return <div ref={dropdownRef}>메뉴 내용</div>;
}

// useOnClickOutside.ts
import { useEffect, RefObject } from 'react';

type Handler = (event: MouseEvent | TouchEvent) => void;

export function useOnClickOutside<T extends HTMLElement = HTMLElement>(
  ref: RefObject<T>,
  handler: Handler
) {
  useEffect(() => {
    const listener = (event: MouseEvent | TouchEvent) => {
      const el = ref.current;

      // 1. 요소가 없거나, 클릭한 타겟이 내 요소 안쪽(contains)이라면 무시
      if (!el || el.contains(event.target as Node)) {
        return;
      }

      // 2. 바깥쪽이라면 핸들러 실행
      handler(event);
    };

    // 마우스 클릭(mousedown)과 모바일 터치(touchstart) 모두 대응
    document.addEventListener('mousedown', listener);
    document.addEventListener('touchstart', listener);

    return () => {
      document.removeEventListener('mousedown', listener);
      document.removeEventListener('touchstart', listener);
    };
  }, [ref, handler]); // ref나 handler가 바뀌면 리스너 재등록
}

// Dropdown.tsx
import { useRef } from 'react';
import { useOnClickOutside } from './useOnClickOutside';

function Dropdown({ onClose }: { onClose: () => void }) {
  const ref = useRef<HTMLDivElement>(null);

  // ✅ ref 영역 바깥을 클릭하면 onClose가 실행된다.
  useOnClickOutside(ref, () => {
    onClose();
  });

  return (
    <div ref={ref} className="dropdown-menu">
      <ul>
        <li>내 정보</li>
        <li>설정</li>
        <li>로그아웃</li>
      </ul>
    </div>
  );
}