버튼 클릭 후 모달 바깥 쪽은 클릭하여 모달 꺼지게 하기

모달 띄우는 버튼을 클릭 후 그 모달 주위를 클릭하였을 시 모달이 꺼지게 함

  const [listItems, setListItems] = useState(
        patientList.map((el) => ({ ...el, showMenu: false }))
    );

    const handleToggleMenu = (idx) => {
        const newList = listItems.map((item, index) =>
            index === idx
                ? { ...item, showMenu: !item.showMenu }
                : { ...item, showMenu: false }
        );
        setListItems(newList);
    };

    const handleSideMenuClick = (idx, i) => {
        // idx : side menu index
        // i : patient list index
        if (idx === 0) {
            onModal('edit');
        } else if (idx === 2) {
            onShare();
        }
        // TODO: delete, export
        handleToggleMenu(i);
    };

    const modalRef = useRef(null);
    const handleOutsideClick = (event) => {
        console.log(modalRef.current);
        if (modalRef.current && !modalRef.current.contains(event.target)) {
            setListItems(listItems.map((el) => ({ ...el, showMenu: false })));
        }
    };

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

일단 state에 object 형식의 dummyData를 mapping하여 showMenu를 넣어줌
버튼 클릭 시 index가 일치하는 것은 반대 showMenu를 넣어줌으로써 해당 index 정보를 가지고 index가 켜지도록 일단 설정.

useRef를 이용하여 해당 모달을 추적
모달이 켜져있고 모달이 현제 내가 클릭한 마우스 범위를 포함하지 않는다면 listItems를 전부 다시 false로 변경하여 모달을 끔.