const [isModal1Open, setIsModal1Open] = useState(false);
const [isModal2Open, setIsModal2Open] = useState(false);
const [isModal3Open, setIsModal3Open] = useState(false);
const [isModal4Open, setIsModal4Open] = useState(false);

import React, { useEffect, useRef } from 'react';
import { createPortal } from 'react-dom';
 
const TraditionalModal = ({ isOpen, onClose, children }) => {
  const modalRef = useRef(null);
 
  useEffect(() => {
    if (!isOpen) return;
 
    // 1. 스크롤 잠금 (Scroll Lock) 처리
    const originalStyle = window.getComputedStyle(document.body).overflow;
    document.body.style.overflow = 'hidden';
 
    // 2. 웹 접근성(a11y): ESC 키 입력 시 닫기
    const handleKeyDown = (e) => {
      if (e.key === 'Escape') onClose();
    };
    window.addEventListener('keydown', handleKeyDown);
 
    // 3. 포커스 강제 이동
    if (modalRef.current) {
      modalRef.current.focus();
    }
 
    // 클린업(Cleanup)
    return () => {
      document.body.style.overflow = originalStyle;
      window.removeEventListener('keydown', handleKeyDown);
    };
  }, [isOpen, onClose]);
 
  if (!isOpen) return null;
 
  // 4. 모달 바깥(Backdrop) 영역 클릭 시 닫기
  const handleBackdropClick = (e) => {
    if (e.target === e.currentTarget) onClose();
  };
 
  // 5. createPortal을 사용한 렌더링
  return createPortal(
    <div className='fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50' onClick={handleBackdropClick}>
      <div className='bg-white p-6 rounded-lg shadow-xl' role='dialog' aria-modal='true' tabIndex={-1} ref={modalRef}>
        {children}
        <button onClick={onClose} className='absolute top-2 right-2'>
          ✕
        </button>
      </div>
    </div>,
    document.body,
  );
};
 
export default TraditionalModal;

import { useEffect, useRef } from 'react';
 
interface DialogProps {
  isOpen: boolean;
  onClose: () => void;
  children: React.ReactNode;
}
 
const NativeDialog = ({ isOpen, onClose, children }: DialogProps) => {
  const dialogRef = useRef<HTMLDialogElement>(null);
 
  useEffect(() => {
    const dialog = dialogRef.current;
    if (!dialog) return;
 
    if (isOpen) {
      dialog.showModal(); // Top Layer에 렌더링, 포커스 트랩, 백드롭 자동 활성화!
    } else {
      dialog.close();
    }
  }, [isOpen]);
 
  return (
    <dialog
      ref={dialogRef}
      onClose={onClose} // ESC 키를 눌러 브라우저 자체 기능으로 닫힐 때, React 상태(isOpen)를 동기화하기 위해 필수!
      className='p-6 rounded-lg shadow-xl backdrop:bg-black backdrop:bg-opacity-50'
    >
      {children}
      <button onClick={onClose} className='absolute top-2 right-2'>
        ✕
      </button>
    </dialog>
  );
};
 
export default NativeDialog;

/* 1. 모달이 닫혀있을 때의 기본 상태 (목적지) */
dialog {
  opacity: 0;
  transform: translateY(20px);
  /* 최신 CSS: display와 overlay 속성에도 애니메이션을 허용(allow-discrete)합니다 */
  transition:
    opacity 0.3s ease,
    transform 0.3s ease,
    overlay 0.3s allow-discrete,
    display 0.3s allow-discrete;
}
 
/* 2. 모달이 열려있을 때의 상태 */
dialog[open] {
  opacity: 1;
  transform: translateY(0);
}
 
/* 3. 모달이 막 열리기 '시작'할 때의 상태 (@starting-style) */
/* display:none 에서 변할 때 이 상태를 거쳐서 애니메이션이 시작됩니다. */
@starting-style {
  dialog[open] {
    opacity: 0;
    transform: translateY(20px);
  }
}
 
/* -------------------------------------- */
/* 덤: 뒷배경(Backdrop) 페이드인 애니메이션 */
/* -------------------------------------- */
dialog::backdrop {
  background-color: rgba(0, 0, 0, 0);
  transition:
    background-color 0.3s ease,
    overlay 0.3s allow-discrete,
    display 0.3s allow-discrete;
}
 
dialog[open]::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
}
 
@starting-style {
  dialog[open]::backdrop {
    background-color: rgba(0, 0, 0, 0);
  }
}