7bdd10207a
- sonner 기반 토스트 래퍼(lib/toast): error/info/success/warning, 프로젝트 디자인 토큰으로 스타일 통일. Toaster 를 provider 에 마운트 - 공통 Modal 컴포넌트: 반투명 배경 + 배경 클릭/ESC 닫기 - core/Provider import 케이싱 정리(provider) Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
31 lines
827 B
TypeScript
31 lines
827 B
TypeScript
import { type ReactNode, useEffect } from 'react'
|
|
|
|
export interface ModalProps {
|
|
children?: ReactNode
|
|
onClose: () => void
|
|
}
|
|
|
|
// 공통 모달: 반투명 배경 + 배경 클릭/ESC 로 닫기.
|
|
export function Modal({ children, onClose }: ModalProps) {
|
|
const handleBackdropClick = (e: React.MouseEvent<HTMLDivElement>) => {
|
|
if (e.target === e.currentTarget) onClose()
|
|
}
|
|
|
|
useEffect(() => {
|
|
const handleEscKey = (e: KeyboardEvent) => {
|
|
if (e.key === 'Escape') onClose()
|
|
}
|
|
document.addEventListener('keydown', handleEscKey)
|
|
return () => document.removeEventListener('keydown', handleEscKey)
|
|
}, [onClose])
|
|
|
|
return (
|
|
<div
|
|
className="fixed inset-0 z-50 flex items-center justify-center bg-[rgba(0,0,0,0.40)]"
|
|
onClick={handleBackdropClick}
|
|
>
|
|
{children}
|
|
</div>
|
|
)
|
|
}
|