React로 모달 컴포넌트 구현

const { useState, useEffect } = React;

  function Modal({ isOpen, onClose, title, children }) {
    useEffect(() => {
      const handleEsc = (e) => e.key === 'Escape' && onClose();
      if (isOpen) window.addEventListener('keydown', handleEsc);
      return () => window.removeEventListener('keydown', handleEsc);
    }, [isOpen, onClose]);

    if (!isOpen) return null;
    return (
      <div onClick={onClose} style={{position:'fixed', inset:0, background:'rgba(0,0,0,0.8)', display:'flex', alignItems:'center', justifyContent:'center', zIndex:1000}}>
        <div onClick={e => e.stopPropagation()} style={{background:'#0d1117', border:'1px solid #10b981', padding:'20px', minWidth:'250px'}}>
          <div style={{color:'#10b981', marginBottom:'12px', fontWeight:'bold'}}>{title}</div>
          {children}
          <button onClick={onClose} style={{marginTop:'12px', background:'#10b981', color:'#080808', border:'none', padding:'6px 16px', cursor:'pointer', fontFamily:'monospace', fontSize:'10px'}}>CLOSE</button>
        </div>
      </div>
    );
  }

  function App() {
    const [open, setOpen] = useState(false);
    return (
      <div>
        <button onClick={() => setOpen(true)} style={{background:'#10b981', color:'#080808', border:'none', padding:'8px 16px', cursor:'pointer', fontFamily:'monospace'}}>OPEN MODAL</button>
        <Modal isOpen={open} onClose={() => setOpen(false)} title='MISSION BRIEFING'>
          <div style={{color:'#888', fontSize:'12px'}}>이름: 홍길동<br/>상태: VIP 회원<br/>가입일: 2024-03-15</div>
        </Modal>
      </div>
    );
  }

  ReactDOM.createRoot(document.getElementById('root')).render(<App />);