All files / lib/components/ConfirmDeleteModal index.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { ModalProps } from 'antd';
import Modal from 'antd/es/modal/Modal';
import React from 'react';
 
interface ConfirmDeleteModalProps {
  modalData: ModalProps;
}
 
export default function ConfirmDeleteModal({ modalData }: ConfirmDeleteModalProps) {
  const handleKeyUp = async (e: KeyboardEvent) => {
    if (e.key === 'Enter' && modalData?.onOk) {
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-ignore
      // 상위에서 받아온 modalData에 정의된 onOk 함수를 실행합니다.
      await modalData.onOk();
    }
  };
 
  React.useEffect(() => {
    window.addEventListener('keyup', handleKeyUp);
 
    return () => {
      window.removeEventListener('keyup', handleKeyUp);
    };
  }, [modalData.onOk]);
 
  return (
    <Modal
      okButtonProps={{ danger: true }}
      {...modalData}
      okText="확인"
      cancelText="닫기"
      focusTriggerAfterClose={false}
      afterOpenChange={(open) => {
        if (!open) {
          window.removeEventListener('keyup', handleKeyUp);
 
          console.log('닫힘!');
        }
      }}
    />
  );
}