교육과정 삭제 팝업 완료, 레슨 틀 작업1

src/app/admin/courses/CourseRegistrationModal.tsx

@@ -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>
   );
 }

src/app/admin/courses/page.tsx

@@ -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>
   );
 }

src/app/admin/lessons/page.tsx

@@ -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>
                 ) : (