45 lines
1.6 KiB
TypeScript
45 lines
1.6 KiB
TypeScript
/**
|
|
* 📄 Modal Component
|
|
* 모달 컴포넌트
|
|
*
|
|
* - 모달 열기/닫기 상태 관리
|
|
* - 제목 및 내용 표시
|
|
* - 저장 및 닫기 버튼 지원
|
|
* - 반응형 크기 조정 (최대/최소 너비 및 높이)
|
|
* - 오버레이 및 z-index를 통한 최상위 레이어 배치
|
|
* - 접근성 지원 (aria-describedby)
|
|
*/
|
|
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogOverlay } from '@common/components/ui'
|
|
import React from 'react'
|
|
|
|
interface ModalProps {
|
|
isModalOpen: boolean;
|
|
setIsModalOpen: (open: boolean) => void;
|
|
title?: string;
|
|
children: React.ReactNode;
|
|
closeModal: () => void;
|
|
saveModal?: () => void;
|
|
description?: string;
|
|
}
|
|
|
|
const Modal: React.FC<ModalProps> = ({ isModalOpen, setIsModalOpen, title, children, closeModal, saveModal }) => {
|
|
return (
|
|
<Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
|
|
<DialogOverlay className='z-[200]' />
|
|
<DialogContent className="w-auto max-w-[1200px] min-w-[400px] min-h-[150px] h-auto max-h-[450px] overflow-auto z-[1000]" aria-describedby={undefined}>
|
|
{title ? <DialogHeader>
|
|
<DialogTitle>{title}</DialogTitle>
|
|
</DialogHeader> : null}
|
|
{children}
|
|
<DialogFooter>
|
|
<div className='flex justify-end gap-2'>
|
|
{saveModal ? <button className="px-4 py-2 bg-primary text-white rounded" onClick={saveModal}>저장</button> : null}
|
|
<button className="px-4 py-2 bg-gray-600 text-white rounded" onClick={closeModal}>닫기</button>
|
|
</div>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
)
|
|
}
|
|
|
|
export default Modal |