motaju/xrlms
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

강좌 삭제 구현1

Browse Source
This commit is contained in:
wallace
2025-11-28 21:37:05 +09:00
parent 03b4fa108a
commit 5a26d96386
6 changed files with 877 additions and 250 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
src/app/admin/courses/CourseRegistrationModal.tsx
View File

@@ -411,7 +411,8 @@ export default function CourseRegistrationModal({ open, onClose, onSave, onDelet
};
// 삭제 버튼 클릭 핸들러
const handleDeleteClick = () => {
const handleDeleteClick = (e: React.MouseEvent) => {
e.stopPropagation();
setIsDeleteConfirmOpen(true);
};
@@ -559,24 +560,27 @@ export default function CourseRegistrationModal({ open, onClose, onSave, onDelet
});
};
if (!open) return null;
if (!open && !isDeleteConfirmOpen) return null;
return (
<div
className="fixed inset-0 z-50 flex items-center justify-center"
aria-hidden={!open}
onClick={onClose}
>
<div
className="absolute inset-0 bg-black/40"
aria-hidden="true"
/>
<div
ref={modalRef}
className="relative z-10 shadow-xl"
onClick={handleModalClick}
>
<div className="bg-white border border-[var(--color-neutral-40)] rounded-[12px] w-full min-w-[480px] max-h-[90vh] overflow-y-auto">
<>
{/* 메인 모달 */}
{open && (
<div
className="fixed inset-0 z-50 flex items-center justify-center"
aria-hidden={!open}
onClick={onClose}
>
<div
className="absolute inset-0 bg-black/40"
aria-hidden="true"
/>
<div
ref={modalRef}
className="relative z-10 shadow-xl"
onClick={handleModalClick}
>
<div className="bg-white border border-[var(--color-neutral-40)] rounded-[12px] w-full min-w-[480px] max-h-[90vh] overflow-y-auto">
{/* Header */}
<div className="flex items-center justify-between gap-[10px] p-6">
<h2 className="text-[20px] font-bold leading-normal text-[var(--color-neutral-700)]">
@@ -837,7 +841,9 @@ export default function CourseRegistrationModal({ open, onClose, onSave, onDelet
</div>
</div>
</div>
</div>
</div>
</div>
)}
{/* 삭제 확인 모달 */}
{isDeleteConfirmOpen && (
@@ -847,41 +853,48 @@ export default function CourseRegistrationModal({ open, onClose, onSave, onDelet
onClick={handleDeleteCancel}
aria-hidden="true"
/>
<div className="relative z-10 bg-white rounded-[8px] p-[24px] shadow-[0px_8px_20px_0px_rgba(0,0,0,0.06),0px_24px_60px_0px_rgba(0,0,0,0.12)] flex flex-col gap-[32px] items-end justify-end min-w-[500px]">
<div className="relative z-10 bg-white rounded-[8px] p-[24px] shadow-[0px_8px_20px_0px_rgba(0,0,0,0.06),0px_24px_60px_0px_rgba(0,0,0,0.12)] flex flex-col gap-[32px] items-end justify-end">
<div className="flex flex-col gap-[16px] items-start justify-center w-full">
<h2 className="text-[18px] font-semibold leading-normal text-[var(--color-neutral-700)]">
교육과정을 삭제하시겠습니까?
</h2>
<p className="text-[15px] font-normal leading-normal text-[var(--color-basic-text)]">
삭제된 교육과정은 복구할 수 없습니다.
<br />
정말 삭제하시겠습니까?
</p>
<div className="flex gap-[8px] items-start w-full">
<p className="text-[18px] font-semibold leading-[1.5] text-[#333c47]">
강좌를 삭제하시겠습니까?
</p>
</div>
<div className="flex gap-[8px] items-start w-full">
<div className="text-[15px] font-normal leading-[1.5] text-[#4c5561]">
<p className="mb-0">삭제 버튼을 누르면 강좌 정보가 삭제됩니다.</p>
<p>정말 삭제하시겠습니까?</p>
</div>
</div>
{errors.submit && (
<p className="text-[var(--color-error)] text-[13px] leading-tight">{errors.submit}</p>
)}
</div>
<div className="flex gap-2 items-center justify-end">
<div className="flex gap-[8px] items-center justify-end shrink-0">
<button
type="button"
onClick={handleDeleteCancel}
className="h-[40px] px-2 rounded-[8px] bg-[var(--color-bg-gray-light)] text-[16px] font-semibold leading-normal text-[var(--color-basic-text)] w-[80px] hover:bg-[var(--color-bg-gray-hover)] cursor-pointer transition-colors"
className="bg-[#f1f3f5] h-[40px] rounded-[8px] px-[8px] flex items-center justify-center shrink-0 w-[80px] hover:bg-[#e9ecef] cursor-pointer transition-colors"
>
취소
<p className="text-[16px] font-semibold leading-[1.5] text-[#4c5561] text-center whitespace-pre">
취소
</p>
</button>
<button
type="button"
onClick={handleDeleteConfirm}
disabled={isDeleting}
className="h-[40px] px-4 rounded-[8px] bg-[#fef2f2] text-[16px] font-semibold leading-normal text-[var(--color-error)] hover:bg-[#fae6e6] cursor-pointer transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
className="bg-[#f64c4c] h-[40px] rounded-[8px] px-[8px] flex items-center justify-center shrink-0 w-[80px] hover:bg-[#e63939] cursor-pointer transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
>
{isDeleting ? '삭제 중...' : '삭제하기'}
<p className="text-[16px] font-semibold leading-[1.5] text-white text-center whitespace-pre">
{isDeleting ? '삭제 중...' : '삭제'}
</p>
</button>
</div>
</div>
</div>
)}
</div>
</>
);
}