카드 상세정보 모달창에서 바깥 영역을 누르면 창이 닫히는 기능 추가 about phoca-review HOT 1 CLOSED

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

const useOnClickOutside = (
  ref: React.RefObject<HTMLElement>,
  handler: Function
) => {
  useEffect(() => {
    const listener = (e: Event) => {
      const target = e.target as HTMLElement;
      if (ref.current && !ref.current.contains(target)) {
        handler();
      }
    };

    document.addEventListener('mousedown', listener);
    document.addEventListener('touchstart', listener);

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

export default useOnClickOutside;

// CardDetailPage.tsx 중 일부
const modalRef = useRef<HTMLDivElement>(null);
const navigate = useNavigate();
const goBack = () => {
  navigate('/cards');
};
useOnClickOutside(modalRef, goBack);