교육과정 삭제 팝업 완료, 레슨 틀 작업1
This commit is contained in:
@@ -10,14 +10,16 @@ type Props = {
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
onSave?: (courseName: string, instructorName: string) => void;
|
||||
onDelete?: () => void;
|
||||
editingCourse?: Course | null;
|
||||
};
|
||||
|
||||
export default function CourseRegistrationModal({ open, onClose, onSave, editingCourse }: Props) {
|
||||
export default function CourseRegistrationModal({ open, onClose, onSave, onDelete, editingCourse }: Props) {
|
||||
const [courseName, setCourseName] = useState("");
|
||||
const [instructorId, setInstructorId] = useState<string>("");
|
||||
const [isDropdownOpen, setIsDropdownOpen] = useState(false);
|
||||
const [errors, setErrors] = useState<Record<string, string>>({});
|
||||
const [isDeleteConfirmOpen, setIsDeleteConfirmOpen] = useState(false);
|
||||
const dropdownRef = useRef<HTMLDivElement>(null);
|
||||
const modalRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
@@ -46,6 +48,7 @@ export default function CourseRegistrationModal({ open, onClose, onSave, editing
|
||||
setInstructorId("");
|
||||
setIsDropdownOpen(false);
|
||||
setErrors({});
|
||||
setIsDeleteConfirmOpen(false);
|
||||
}
|
||||
}, [open, editingCourse, instructors]);
|
||||
|
||||
@@ -96,6 +99,25 @@ export default function CourseRegistrationModal({ open, onClose, onSave, editing
|
||||
}
|
||||
};
|
||||
|
||||
// 삭제 버튼 클릭 핸들러
|
||||
const handleDeleteClick = () => {
|
||||
setIsDeleteConfirmOpen(true);
|
||||
};
|
||||
|
||||
// 삭제 확인 핸들러
|
||||
const handleDeleteConfirm = () => {
|
||||
if (onDelete) {
|
||||
onDelete();
|
||||
setIsDeleteConfirmOpen(false);
|
||||
onClose();
|
||||
}
|
||||
};
|
||||
|
||||
// 삭제 취소 핸들러
|
||||
const handleDeleteCancel = () => {
|
||||
setIsDeleteConfirmOpen(false);
|
||||
};
|
||||
|
||||
if (!open) return null;
|
||||
|
||||
return (
|
||||
@@ -275,6 +297,15 @@ export default function CourseRegistrationModal({ open, onClose, onSave, editing
|
||||
{/* Actions Container */}
|
||||
<div className="flex flex-col gap-8 h-[96px] items-center p-6">
|
||||
<div className="flex items-center justify-center gap-3 w-full">
|
||||
{editingCourse && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleDeleteClick}
|
||||
className="h-[48px] px-4 rounded-[10px] bg-[#fef2f2] text-[16px] font-semibold leading-[1.5] text-[#f64c4c] w-[136px] hover:bg-[#fae6e6] transition-colors"
|
||||
>
|
||||
삭제
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
@@ -293,6 +324,45 @@ export default function CourseRegistrationModal({ open, onClose, onSave, editing
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 삭제 확인 모달 */}
|
||||
{isDeleteConfirmOpen && (
|
||||
<div className="fixed inset-0 z-[60] flex items-center justify-center">
|
||||
<div
|
||||
className="absolute inset-0 bg-black/40"
|
||||
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="flex flex-col gap-[16px] items-start justify-center w-full">
|
||||
<h2 className="text-[18px] font-semibold leading-[1.5] text-[#333c47]">
|
||||
교육과정을 삭제하시겠습니까?
|
||||
</h2>
|
||||
<p className="text-[15px] font-normal leading-[1.5] text-[#4c5561]">
|
||||
삭제된 교육과정은 복구할 수 없습니다.
|
||||
<br />
|
||||
정말 삭제하시겠습니까?
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex gap-2 items-center justify-end">
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleDeleteCancel}
|
||||
className="h-[40px] px-2 rounded-[8px] bg-[#f1f3f5] text-[16px] font-semibold leading-[1.5] text-[#4c5561] w-[80px] hover:bg-[#e5e7eb] cursor-pointer transition-colors"
|
||||
>
|
||||
취소
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleDeleteConfirm}
|
||||
className="h-[40px] px-4 rounded-[8px] bg-[#fef2f2] text-[16px] font-semibold leading-[1.5] text-[#f64c4c] hover:bg-[#fae6e6] cursor-pointer transition-colors"
|
||||
>
|
||||
삭제하기
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -11,6 +11,7 @@ export default function AdminCoursesPage() {
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
const [editingCourse, setEditingCourse] = useState<Course | null>(null);
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [showToast, setShowToast] = useState(false);
|
||||
|
||||
const totalCount = useMemo(() => courses.length, [courses]);
|
||||
|
||||
@@ -68,6 +69,17 @@ export default function AdminCoursesPage() {
|
||||
setIsModalOpen(true);
|
||||
};
|
||||
|
||||
const handleDeleteCourse = () => {
|
||||
if (editingCourse) {
|
||||
setCourses(prev => prev.filter(course => course.id !== editingCourse.id));
|
||||
setEditingCourse(null);
|
||||
setShowToast(true);
|
||||
setTimeout(() => {
|
||||
setShowToast(false);
|
||||
}, 3000);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen flex flex-col bg-white">
|
||||
{/* 메인 레이아웃 */}
|
||||
@@ -265,8 +277,26 @@ export default function AdminCoursesPage() {
|
||||
open={isModalOpen}
|
||||
onClose={handleModalClose}
|
||||
onSave={handleSaveCourse}
|
||||
onDelete={handleDeleteCourse}
|
||||
editingCourse={editingCourse}
|
||||
/>
|
||||
|
||||
{/* 삭제 완료 토스트 */}
|
||||
{showToast && (
|
||||
<div className="fixed right-[60px] bottom-[60px] z-50">
|
||||
<div className="bg-white border border-[#dee1e6] rounded-[8px] p-4 min-w-[360px] flex gap-[10px] items-center">
|
||||
<div className="relative shrink-0 w-[16.667px] h-[16.667px]">
|
||||
<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="8.5" cy="8.5" r="8.5" fill="#384FBF"/>
|
||||
<path d="M5.5 8.5L7.5 10.5L11.5 6.5" stroke="white" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<p className="text-[15px] font-medium leading-[1.5] text-[#1b2027] text-nowrap">
|
||||
교육과정을 삭제했습니다.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -9,6 +9,8 @@ export default function AdminLessonsPage() {
|
||||
const items: any[] = [];
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
|
||||
const totalCount = useMemo(() => items.length, [items]);
|
||||
|
||||
const ITEMS_PER_PAGE = 10;
|
||||
const totalPages = Math.ceil(items.length / ITEMS_PER_PAGE);
|
||||
const paginatedItems = useMemo(() => {
|
||||
@@ -26,7 +28,6 @@ export default function AdminLessonsPage() {
|
||||
<div className="px-8 flex">
|
||||
<AdminSidebar />
|
||||
</div>
|
||||
|
||||
{/* 메인 콘텐츠 */}
|
||||
<main className="flex-1 min-w-0 bg-white">
|
||||
<div className="h-full flex flex-col">
|
||||
@@ -37,12 +38,27 @@ export default function AdminLessonsPage() {
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
{/* 헤더 영역 (제목과 콘텐츠 사이) */}
|
||||
<div className="pt-2 pb-4 flex items-center justify-between">
|
||||
<p className="text-[15px] font-medium leading-[1.5] text-[#333c47] whitespace-nowrap">
|
||||
총 {totalCount}건
|
||||
</p>
|
||||
<button
|
||||
type="button"
|
||||
className="h-[40px] px-4 rounded-[8px] bg-[#1f2b91] text-[16px] font-semibold leading-[1.5] text-white whitespace-nowrap hover:bg-[#1a2478] transition-colors"
|
||||
>
|
||||
등록하기
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* 콘텐츠 영역 */}
|
||||
<div className="flex-1 pt-8 flex flex-col">
|
||||
<div className="flex-1 pt-2 flex flex-col">
|
||||
{items.length === 0 ? (
|
||||
<div className="rounded-lg border border-[#dee1e6] bg-white min-h-[400px] flex items-center justify-center">
|
||||
<p className="text-[16px] font-medium leading-[1.5] text-[#333c47]">
|
||||
현재 관리할 수 있는 항목이 없습니다.
|
||||
등록된 강좌가 없습니다.
|
||||
<br />
|
||||
강좌를 등록해주세요.
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
|
||||
Reference in New Issue
Block a user