Feat ck/lecture fix v1

src/app/(dashboard)/educators/lectures/create/_components/CreatePageHeader.tsx

@@ -4,12 +4,14 @@ import { Button } from "@/components/ui/button";
 
 type CreatePageHeaderProps = {
   isSaved: boolean;
+  isSubmitting: boolean;
   onSave: () => void;
   onCancel: () => void;
 };
 
 export function CreatePageHeader({
   isSaved,
+  isSubmitting,
   onSave,
   onCancel,
 }: CreatePageHeaderProps) {
@@ -27,10 +29,10 @@ export function CreatePageHeader({
         <div className="flex items-center gap-2 sm:gap-3">
           <Button
             onClick={onSave}
-            disabled={isSaved}
+            disabled={isSaved || isSubmitting}
             className="h-12 w-[112px] rounded-[12px] bg-[#3863f6] px-0 text-[14px] font-semibold leading-5 tracking-[-0.14px] text-white shadow-[0_0_14px_rgba(138,138,138,0.08)] sm:h-14 sm:w-[140px] sm:text-[16px] sm:leading-[24px] sm:tracking-[-0.16px]"
           >
-            개설하기
+            {isSubmitting ? "개설 중..." : "개설하기"}
           </Button>
           <Button
             onClick={onCancel}

src/app/(dashboard)/educators/lectures/create/_hooks/useLectureCreateForm.ts

@@ -2,7 +2,7 @@
 
 import { UseFormReturn } from "react-hook-form";
 import { UseMutationResult } from "@tanstack/react-query";
-import { createElement } from "react";
+import { createElement, useRef } from "react";
 
 import {
   LectureCreatePayload,
@@ -36,6 +36,7 @@ export const useLectureCreateForm = ({
   onSuccess,
 }: UseLectureCreateFormParams) => {
   const { openModal } = useModal();
+  const submitLockRef = useRef(false);
 
   const openAlertModal = (title: string, description?: string) => {
     openModal(
@@ -49,57 +50,66 @@ export const useLectureCreateForm = ({
     );
   };
 
-  const handleSave = lectureForm.handleSubmit(
-    (lectureData) => {
-      const hasInvalidSchedule = schedules.some(
-        (id) => !scheduleSchema.safeParse(scheduleData[id]).success
-      );
+  const onValidSubmit = (lectureData: LectureFormInput) => {
+    if (submitLockRef.current || createLecture.isPending) return;
 
-      if (hasInvalidSchedule) {
-        openAlertModal(
-          "시간표 입력 오류",
-          "요일/시작/종료 시간을 모두 입력해주세요."
-        );
-        return;
-      }
-
-      const lectureTimes = schedules.map((id) => ({
-        day: scheduleData[id]?.day || "",
-        startTime: scheduleData[id]?.startTime || "",
-        endTime: scheduleData[id]?.endTime || "",
-      }));
-
-      const enrollments = lectureData.students.map((student) => ({
-        school: student.school,
-        schoolYear: student.studentGrade,
-        studentName: student.name,
-        studentPhone: student.phone,
-        parentPhone: student.parentPhone,
-      }));
-
-      const payload: LectureCreatePayload = {
-        title: lectureData.name,
-        schoolYear: lectureData.schoolYear,
-        subject: lectureData.subject,
-        status: mapLectureStatusToApi(lectureData.status as LectureStatus),
-        startAt: lectureData.startDate
-          ? new Date(lectureData.startDate).toISOString()
-          : null,
-        lectureTimes,
-        enrollments,
-      };
-
-      createLecture.mutate(payload, {
-        onSuccess,
-        onError: () => {
-          openAlertModal("저장 실패", "저장 중 오류가 발생했습니다.");
-        },
-      });
-    },
-    () => {
-      openAlertModal("필수 입력값 확인", "필수 입력값을 확인해주세요.");
+    const hasInvalidSchedule = schedules.some(
+      (id) => !scheduleSchema.safeParse(scheduleData[id]).success
+    );
+
+    if (hasInvalidSchedule) {
+      openAlertModal(
+        "시간표 입력 오류",
+        "요일/시작/종료 시간을 모두 입력해주세요."
+      );
+      return;
     }
-  );
+
+    const lectureTimes = schedules.map((id) => ({
+      day: scheduleData[id]?.day || "",
+      startTime: scheduleData[id]?.startTime || "",
+      endTime: scheduleData[id]?.endTime || "",
+    }));
+
+    const enrollments = lectureData.students.map((student) => ({
+      school: student.school,
+      schoolYear: student.studentGrade,
+      studentName: student.name,
+      studentPhone: student.phone,
+      parentPhone: student.parentPhone,
+    }));
+
+    const payload: LectureCreatePayload = {
+      title: lectureData.name,
+      schoolYear: lectureData.schoolYear,
+      subject: lectureData.subject,
+      status: mapLectureStatusToApi(lectureData.status as LectureStatus),
+      startAt: lectureData.startDate
+        ? new Date(lectureData.startDate).toISOString()
+        : null,
+      lectureTimes,
+      enrollments,
+    };
+
+    submitLockRef.current = true;
+    createLecture.mutate(payload, {
+      onSuccess,
+      onError: () => {
+        openAlertModal("저장 실패", "저장 중 오류가 발생했습니다.");
+      },
+      onSettled: () => {
+        submitLockRef.current = false;
+      },
+    });
+  };
+
+  const onInvalidSubmit = () => {
+    openAlertModal("필수 입력값 확인", "필수 입력값을 확인해주세요.");
+  };
+
+  const handleSave = () => {
+    void lectureForm.handleSubmit(onValidSubmit, onInvalidSubmit)();
+  };
 
   const handleCancel = (isSaved: boolean, onBack: () => void) => {
     if (isSaved) {

src/app/(dashboard)/educators/lectures/create/_hooks/useLectureCreatePage.ts

@@ -68,6 +68,7 @@ export const useLectureCreatePage = () => {
   }, [resetCreateState]);
 
   const createLectureMutation = useCreateLecture();
+  const isSubmitting = createLectureMutation.isPending;
 
   const { handleSave, handleCancel } = useLectureCreateForm({
     lectureForm,
@@ -85,6 +86,7 @@ export const useLectureCreatePage = () => {
   return {
     state: {
       isSaved,
+      isSubmitting,
     },
     form: {
       lectureForm,

src/app/(dashboard)/educators/lectures/create/page.tsx

@@ -14,6 +14,7 @@ export default function LectureCreatePage() {
     <div className="min-h-screen bg-[#f4f6fa]">
       <CreatePageHeader
         isSaved={state.isSaved}
+        isSubmitting={state.isSubmitting}
         onSave={actions.save}
         onCancel={actions.cancel}
       />