55 lines
1.4 KiB
TypeScript
55 lines
1.4 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
|
|
type NoticeValidationModalProps = {
|
|
open: boolean;
|
|
onClose: () => void;
|
|
};
|
|
|
|
/**
|
|
* 공지사항 작성 시 제목 또는 내용이 비어있을 때 표시되는 검증 모달
|
|
*/
|
|
export default function NoticeValidationModal({
|
|
open,
|
|
onClose,
|
|
}: NoticeValidationModalProps) {
|
|
if (!open) return null;
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center">
|
|
<button
|
|
type="button"
|
|
aria-label="닫기"
|
|
className="absolute inset-0 bg-black/40 cursor-default"
|
|
onClick={onClose}
|
|
/>
|
|
<div
|
|
role="dialog"
|
|
aria-modal="true"
|
|
aria-labelledby="notice-validation-title"
|
|
className="relative bg-white box-border flex flex-col items-stretch justify-end gap-[32px] p-6 rounded-[8px] w-[320px] shadow-[0px_8px_20px_0px_rgba(0,0,0,0.06),0px_24px_60px_0px_rgba(0,0,0,0.12)]"
|
|
>
|
|
<div className="flex flex-col gap-4 items-center w-full">
|
|
<p
|
|
className="text-[15px] font-normal leading-[1.5] text-[#333c47] w-full"
|
|
id="notice-validation-title"
|
|
>
|
|
내용 또는 제목을 입력해 주세요.
|
|
</p>
|
|
</div>
|
|
<div className="flex gap-2 items-center justify-end w-full">
|
|
<button
|
|
type="button"
|
|
onClick={onClose}
|
|
className="h-[37px] min-w-[82px] px-2 rounded-[8px] bg-[#1f2b91] text-white text-[16px] font-semibold leading-[1.5] cursor-pointer whitespace-nowrap"
|
|
>
|
|
확인
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|