From 7bd22dfd60f2a89f40737914e2b47589cfa7e447 Mon Sep 17 00:00:00 2001
From: Haemin Kim <haemin1230@gmail.com>
Date: Wed, 24 Sep 2025 11:04:46 +0900
Subject: [PATCH 1/9] =?UTF-8?q?=E2=9C=A8=20(#319)=20=EA=B0=95=EC=9D=98?=
 =?UTF-8?q?=EC=9E=90=EB=A3=8C=20API=20=EC=97=B0=EA=B2=B0,=20=EC=84=A0?=
 =?UTF-8?q?=ED=83=9D=ED=95=9C=20=EB=AC=B8=EC=84=9C=EA=B0=80=20=EC=97=86?=
 =?UTF-8?q?=EC=9D=84=20=EA=B2=BD=EC=9A=B0=20=ED=99=94=EB=A9=B4=EC=97=90=20?=
 =?UTF-8?q?=EC=95=88=EB=82=B4=EA=B8=80=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../LectureLiveHeader/LectureLiveHeader.tsx   | 27 +-----
 .../_components/LectureLiveProvider.tsx       |  6 +-
 .../LectureMainGrid.module.scss               | 23 +++++
 .../LectureMainGrid/LectureMainGrid.tsx       | 61 ++++++++----
 .../LectureNoteButton.module.scss             |  0
 .../LectureNoteButton/LectureNoteButton.tsx   | 92 +++++++++++++++++++
 .../LectureNotePopover/LectureNotePopover.tsx | 91 ++++++++----------
 .../PageThumbsSidebar/PageThumbsSidebar.tsx   |  8 ++
 8 files changed, 210 insertions(+), 98 deletions(-)
 create mode 100644 frontend/app/teacher/lecture-live/[lectureId]/_components/LectureNote/LectureNoteButton/LectureNoteButton.module.scss
 create mode 100644 frontend/app/teacher/lecture-live/[lectureId]/_components/LectureNote/LectureNoteButton/LectureNoteButton.tsx

diff --git a/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureLiveHeader/LectureLiveHeader.tsx b/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureLiveHeader/LectureLiveHeader.tsx
index bb6519f7..84376c12 100644
--- a/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureLiveHeader/LectureLiveHeader.tsx
+++ b/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureLiveHeader/LectureLiveHeader.tsx
@@ -1,22 +1,19 @@
 "use client";
 
-import { useState, useRef, useMemo, useEffect } from "react";
+import { useState, useMemo, useEffect } from "react";
 import { useRouter, useParams } from "next/navigation";
 import styles from "./LectureLiveHeader.module.scss";
 import FitContentButton from "@/components/Button/FitContentButton/FitContentButton";
-import IconButton from "@/components/Button/IconButton/IconButton";
 import { DocumentSideButtonConnected } from "../DocumentSideButton/DocumentSideButton";
 import PenToolButtons from "../PenTool/PenToolButtons/PenToolButtons";
 import { useLive } from "../LectureLiveProvider";
-import { FileText } from "lucide-react";
-import ToolPopover from "../ToolPopover/ToolPopover";
-import LectureNotePopover from "../LectureNote/LectureNotePopover/LectureNotePopover";
 import ChatingButton from "../Chating/ChatingButton/ChatingButton";
 import RecordingButton from "../Recording/RecordingButton/RecordingButton";
 import ConfirmModal from "@/components/Modal/ConfirmModal/ConfirmModal";
 import { getRecordingEngine, type RecState } from "../Recording/recordingEngine";
 import { ROUTES } from "@/constants/routes";
 import { Tool } from "../LectureLiveProvider";
+import LectureNoteButton from "../LectureNote/LectureNoteButton/LectureNoteButton";
 
 export default function LectureLiveHeader({
   onToggleChat,
@@ -28,8 +25,6 @@ export default function LectureLiveHeader({
   onEndLecture?: () => void;
 }) {
   const { tool, setTool } = useLive();
-  const docBtnRef = useRef<HTMLSpanElement>(null);
-  const [openDoc, setOpenDoc] = useState(false);
 
   const [endOpen, setEndOpen] = useState(false);
 
@@ -75,23 +70,7 @@ export default function LectureLiveHeader({
         <div className={styles.left}>
           <DocumentSideButtonConnected />
 
-          <span ref={docBtnRef} className={styles.docBtnZ}>
-            <IconButton
-              ariaLabel="문서 불러오기"
-              onClick={() => setOpenDoc((v) => !v)}
-              icon={<FileText />}
-            />
-          </span>
-
-          <ToolPopover
-            open={openDoc}
-            anchorRef={docBtnRef}
-            onClose={() => setOpenDoc(false)}
-            align="start"
-            side="bottom"
-          >
-            <LectureNotePopover onPicked={() => setOpenDoc(false)} />
-          </ToolPopover>
+          <LectureNoteButton />
 
           <span className={styles.divider} />
           <PenToolButtons value={tool} onChange={selectTool} />
diff --git a/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureLiveProvider.tsx b/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureLiveProvider.tsx
index 0c0d9150..eaad3029 100644
--- a/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureLiveProvider.tsx
+++ b/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureLiveProvider.tsx
@@ -61,9 +61,9 @@ export function LectureLiveProvider({ children }: { children: React.ReactNode })
   });
 
   const [doc, setDocState] = useState<DocState>({
-    url: "/file/기말보고서_졸업을하자.pdf",
-    type: "pdf",
-    name: "기말보고서_졸업을하자.pdf",
+    url: "",
+    type: "unknown",
+    name: "",
   });
 
   const drawStoreRef = useRef<Map<number, HTMLCanvasElement>>(new Map());
diff --git a/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureMainGrid/LectureMainGrid.module.scss b/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureMainGrid/LectureMainGrid.module.scss
index 44ccb2dd..7ca330f0 100644
--- a/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureMainGrid/LectureMainGrid.module.scss
+++ b/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureMainGrid/LectureMainGrid.module.scss
@@ -51,4 +51,27 @@
     --right-col: 0px;
     grid-template-columns: 1fr;
   }
+}
+
+.empty {
+  height: 100%;
+  display:flex; align-items:center; justify-content:center;
+}
+.emptyCard {
+  padding: 20px 24px; border:1px dashed #d6d6d6; border-radius:12px;
+  background:#fafafa; text-align:center;
+}
+.emptyTitle { font-weight:700; margin-bottom:6px; }
+.emptyDesc { color:#666; }
+.leftEmpty {
+  height:100%; display:flex; align-items:center; justify-content:center;
+  color:#777; font-size: 0.92rem; padding: 0 12px; text-align:center;
+}
+
+.inlineIcon {
+  width: 1.2em;
+  height: 1.2em;
+  vertical-align: middle;
+  margin-bottom: 0.3em;
+  margin-right: 0.1em;
 }
\ No newline at end of file
diff --git a/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureMainGrid/LectureMainGrid.tsx b/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureMainGrid/LectureMainGrid.tsx
index e0aaa8c0..d738174b 100644
--- a/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureMainGrid/LectureMainGrid.tsx
+++ b/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureMainGrid/LectureMainGrid.tsx
@@ -5,6 +5,7 @@ import styles from "./LectureMainGrid.module.scss";
 import { useLive } from "../LectureLiveProvider";
 import ChatPanel from "../Chating/ChatingPanel/ChatingPanel";
 import dynamic from "next/dynamic";
+import { FileText } from "lucide-react";
 
 const PageThumbsSidebar = dynamic(
   () => import("../LectureNote/PageThumbsSidebar/PageThumbsSidebar"),
@@ -27,7 +28,7 @@ export default function LectureMainGrid() {
   const [currentPage, setCurrentPage] = useState(0);
 
   const resolvedType: "pdf" | "pptx" | undefined =
-  doc.type === "pdf" || doc.type === "pptx" ? doc.type : undefined;
+    doc.type === "pdf" || doc.type === "pptx" ? doc.type : undefined;
 
   useEffect(() => {
     const resetOnDocChange = () => setCurrentPage(0);
@@ -44,6 +45,7 @@ export default function LectureMainGrid() {
 
     const onKey = (e: KeyboardEvent) => {
       if (isTypingTarget(e.target)) return;
+      if (!doc.url) return;
 
       if (e.key === " " || e.key === "Enter" || e.key === "ArrowRight" || e.key === "ArrowDown") {
         e.preventDefault();
@@ -58,6 +60,21 @@ export default function LectureMainGrid() {
     return () => window.removeEventListener("keydown", onKey);
   }, [count, doc.url]);
 
+  const EmptyState = (
+    <div className={styles.empty}>
+      <div className={styles.emptyCard} role="note" aria-live="polite">
+        <div className={styles.emptyTitle}>강의자료가 선택되지 않았어요</div>
+        <div className={styles.emptyDesc}>
+          상단의 {" "}
+          <span className={styles.inlineIconWrap} aria-label=" 강의자료 버튼 아이콘">
+            <FileText aria-hidden="true" className={styles.inlineIcon} />
+          </span>
+          버튼을 눌러 자료를 선택해 주세요.
+        </div>
+      </div>
+    </div>
+  );
+
   return (
     <main
       className={styles.grid}
@@ -69,24 +86,36 @@ export default function LectureMainGrid() {
       }
     >
       <aside className={styles.left}>
-        <PageThumbsSidebar
-          fileUrl={doc.url}
-          typeOverride={resolvedType}
-          currentPage={currentPage}
-          onSelect={setCurrentPage}
-          onCountChange={setCount}
-        />
+        {doc.url ? (
+          <PageThumbsSidebar
+            fileUrl={doc.url}
+            typeOverride={resolvedType}
+            currentPage={currentPage}
+            onSelect={setCurrentPage}
+            onCountChange={setCount}
+          />
+        ) : (
+          <div className={styles.leftEmpty}>
+            <span>강의자료 선택 후 썸네일이 표시됩니다.</span>
+          </div>
+        )}
       </aside>
 
       <section className={styles.center} data-live-center>
-        <DocumentViewer
-          fileUrl={doc.url}
-          typeOverride={resolvedType}
-          currentPage={currentPage}
-          onChangePage={setCurrentPage}
-          onLoad={setCount}
-        />
-        <DrawingCanvasOverlay currentPage={currentPage} />
+        {doc.url ? (
+          <>
+            <DocumentViewer
+              fileUrl={doc.url}
+              typeOverride={resolvedType}
+              currentPage={currentPage}
+              onChangePage={setCurrentPage}
+              onLoad={setCount}
+            />
+            <DrawingCanvasOverlay currentPage={currentPage} />
+          </>
+        ) : (
+          EmptyState
+        )}
       </section>
 
       <aside className={styles.right}>
diff --git a/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureNote/LectureNoteButton/LectureNoteButton.module.scss b/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureNote/LectureNoteButton/LectureNoteButton.module.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureNote/LectureNoteButton/LectureNoteButton.tsx b/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureNote/LectureNoteButton/LectureNoteButton.tsx
new file mode 100644
index 00000000..a920027f
--- /dev/null
+++ b/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureNote/LectureNoteButton/LectureNoteButton.tsx
@@ -0,0 +1,92 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { useParams } from "next/navigation";
+import IconButton from "@/components/Button/IconButton/IconButton";
+import ToolPopover from "../../ToolPopover/ToolPopover";
+import LectureNotePopover from "../LectureNotePopover/LectureNotePopover";
+import FileSelectModal from "@/components/Modal/FileSelectModal/FileSelectModal";
+import { FileText } from "lucide-react";
+import { fetchLectureNoteByLectureId } from "@/api/lectures/fetchLectureNoteByLectureId";
+import { FetchLectureNoteByLectureIdResult } from "@/types/lectures/fetchLectureNoteByLectureIdTypes";
+import styles from "./LectureNoteButton.module.scss";
+
+export default function LectureNoteButton() {
+  const { lectureId } = useParams<{ lectureId: string }>();
+  const docBtnRef = useRef<HTMLSpanElement>(null);
+
+  const [openDoc, setOpenDoc] = useState(false);
+  const [uploadOpen, setUploadOpen] = useState(false);
+  const [classId, setClassId] = useState<string | null>(null);
+  const [lectureNotes, setLectureNotes] = useState<FetchLectureNoteByLectureIdResult[]>([]);
+
+  useEffect(() => {
+    const raw = localStorage.getItem("class-storage");
+    if (raw) {
+      try {
+        const parsed = JSON.parse(raw);
+        setClassId(parsed.state?.selectedClassId ?? null);
+      } catch (err) {
+        console.error("class-storage 파싱 실패:", err);
+      }
+    }
+  }, []);
+
+  const fetchLectureNotes = async () => {
+    try {
+      const response = await fetchLectureNoteByLectureId(lectureId);
+      if (response.isSuccess && response.result) {
+        setLectureNotes(response.result);
+      } else {
+        setLectureNotes([]);
+        console.error("강의자료 조회 실패:", response.message);
+      }
+    } catch (err) {
+      console.error("강의자료 조회 오류:", err);
+      setLectureNotes([]);
+    }
+  };
+
+  useEffect(() => {
+    if (lectureId) fetchLectureNotes();
+  }, [lectureId]);
+
+  return (
+    <>
+      <span ref={docBtnRef} className={styles.docBtnZ}>
+        <IconButton
+          ariaLabel="문서 불러오기"
+          onClick={() => setOpenDoc((v) => !v)}
+          icon={<FileText />}
+        />
+      </span>
+
+      <ToolPopover
+        open={openDoc}
+        anchorRef={docBtnRef}
+        onClose={() => setOpenDoc(false)}
+        align="start"
+        side="bottom"
+      >
+        <LectureNotePopover
+            notes={lectureNotes} 
+            onPicked={() => setOpenDoc(false)}
+            onUploadRequest={() => setUploadOpen(true)}
+        />
+      </ToolPopover>
+
+      {uploadOpen && classId && (
+        <FileSelectModal
+          classId={classId}
+          lectureId={lectureId}
+          onClose={() => setUploadOpen(false)}
+          registeredFiles={lectureNotes.map((n) => n.lectureNoteName)}
+          onComplete={() => {
+            fetchLectureNotes();
+            setUploadOpen(false);
+          }}
+        />
+      )}
+    </>
+  );
+}
\ No newline at end of file
diff --git a/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureNote/LectureNotePopover/LectureNotePopover.tsx b/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureNote/LectureNotePopover/LectureNotePopover.tsx
index 3d41613b..a4f8077a 100644
--- a/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureNote/LectureNotePopover/LectureNotePopover.tsx
+++ b/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureNote/LectureNotePopover/LectureNotePopover.tsx
@@ -1,84 +1,65 @@
 "use client";
 
-import { useEffect, useMemo, useRef, useState } from "react";
 import styles from "./LectureNotePopover.module.scss";
 import FileDisplay from "@/components/FileDisplay/FileDisplay";
 import { useLive } from "../../LectureLiveProvider";
 
 type Item = { name: string; url: string; type: "pdf" | "pptx" };
 
-export default function LectureNotePopover({
-  onPicked,
-}: {
+interface Props {
+  notes: {
+    lectureNoteId: string;
+    lectureNoteName: string;
+    lectureNoteUrl: string;
+    fileSize: string;
+  }[];
   onPicked?: () => void;
-}) {
-  const { setDoc, doc } = useLive();
-
-  const initialItems = useMemo<Item[]>(
-    () => [
-      { name: "2024-DA-2-2-Probability.pdf", url: "/file/2024-DA-2-2-Probability.pdf", type: "pdf" },
-      { name: "기말보고서_졸업을하자.pdf", url: "/file/기말보고서_졸업을하자.pdf", type: "pdf" },
-    ],
-    []
-  );
+  onUploadRequest?: () => void;
+}
 
-  const [items, setItems] = useState<Item[]>(initialItems);
+export default function LectureNotePopover({ notes, onPicked, onUploadRequest }: Props) {
+  const { setDoc, doc } = useLive();
 
   const pick = (it: Item) => {
     setDoc({ url: it.url, type: it.type, name: it.name });
-    window.dispatchEvent(new Event("live:doc-changed"));
     onPicked?.();
   };
 
-  const inputRef = useRef<HTMLInputElement>(null);
-  const objUrlsRef = useRef<string[]>([]);
-
-  const onUploadClick = () => inputRef.current?.click();
-  const onUploadChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
-    const f = e.target.files?.[0];
-    if (!f) return;
-    const ext = f.name.toLowerCase().endsWith(".pptx") ? "pptx" : "pdf";
-    const url = URL.createObjectURL(f);
-    objUrlsRef.current.push(url);
-    const it: Item = { name: f.name, url, type: ext as "pdf" | "pptx" };
-    setItems((prev) => [it, ...prev]);
-    pick(it);
-    e.currentTarget.value = "";
+  const handleAddMaterials = () => {
+    onUploadRequest?.();
+    onPicked?.();
   };
 
-  useEffect(() => {
-    return () => objUrlsRef.current.forEach((u) => URL.revokeObjectURL(u));
-  }, []);
-
   return (
     <div className={styles.pop}>
       <div className={styles.list}>
-        {items.map((it) => (
-          <div key={it.url}>
-            <button
-              type="button"
-              onClick={() => pick(it)}
-              className={`${styles.row} ${doc?.url === it.url ? styles.active : ""}`}
-              aria-label={`${it.name} 열기`}
-            >
-                
-              <FileDisplay fileName={it.name} />
-            </button>
-          </div>
-        ))}
+        {notes.map((note) => {
+          const ext = note.lectureNoteName.toLowerCase().endsWith(".pptx") ? "pptx" : "pdf";
+          return (
+            <div key={note.lectureNoteId}>
+              <button
+                type="button"
+                onClick={() =>
+                  pick({
+                    name: note.lectureNoteName,
+                    url: note.lectureNoteUrl,
+                    type: ext,
+                  })
+                }
+                className={`${styles.row} ${doc?.name === note.lectureNoteName ? styles.active : ""}`}
+              >
+                <FileDisplay fileName={note.lectureNoteName} />
+              </button>
+            </div>
+          );
+        })}
       </div>
 
       <div className={styles.divider} />
-      <button type="button" className={styles.uploadBtn} onClick={onUploadClick}>
+
+      <button type="button" className={styles.uploadBtn} onClick={handleAddMaterials}>
         강의자료 업로드
       </button>
-      <input
-        ref={inputRef}
-        type="file"
-        accept=".pdf,.pptx"
-        hidden
-        onChange={onUploadChange}
-      />
     </div>
   );
 }
\ No newline at end of file
diff --git a/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureNote/PageThumbsSidebar/PageThumbsSidebar.tsx b/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureNote/PageThumbsSidebar/PageThumbsSidebar.tsx
index 3465207f..91db04c3 100644
--- a/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureNote/PageThumbsSidebar/PageThumbsSidebar.tsx
+++ b/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureNote/PageThumbsSidebar/PageThumbsSidebar.tsx
@@ -29,6 +29,14 @@ export default function PageThumbsSidebar({
   const [pdfCount, setPdfCount] = useState<number>(0);
   const [pptxCount, setPptxCount] = useState<number>(0);
 
+  if (!fileUrl) {
+    return (
+      <div className={styles.wrap}>
+        <div className={styles.placeholder}>썸네일을 표시할 문서가 없습니다.</div>
+      </div>
+    );
+  }
+
   useEffect(() => {
     if (type !== "pptx") return;
     (async () => {

From c4170afb0e6a791400d77de425e1b31bc9603f57 Mon Sep 17 00:00:00 2001
From: Haemin Kim <haemin1230@gmail.com>
Date: Wed, 24 Sep 2025 11:23:31 +0900
Subject: [PATCH 2/9] =?UTF-8?q?=F0=9F=92=84=20(#319)=20=EA=B0=95=EC=9D=98?=
 =?UTF-8?q?=EC=9E=90=EB=A3=8C=20=EB=B2=84=ED=8A=BC=20css=20=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../LectureLiveHeader/LectureLiveHeader.module.scss        | 7 +------
 .../LectureNoteButton/LectureNoteButton.module.scss        | 5 +++++
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureLiveHeader/LectureLiveHeader.module.scss b/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureLiveHeader/LectureLiveHeader.module.scss
index 620aa3b2..ce0bb264 100644
--- a/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureLiveHeader/LectureLiveHeader.module.scss
+++ b/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureLiveHeader/LectureLiveHeader.module.scss
@@ -40,9 +40,4 @@
     min-height: 0 !important;
     line-height: 2;               
     padding-block: 3px !important; 
-}
-
-.docBtnZ {
-    position: relative;
-    z-index: 2000;
-  }
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureNote/LectureNoteButton/LectureNoteButton.module.scss b/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureNote/LectureNoteButton/LectureNoteButton.module.scss
index e69de29b..f5d2eff6 100644
--- a/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureNote/LectureNoteButton/LectureNoteButton.module.scss
+++ b/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureNote/LectureNoteButton/LectureNoteButton.module.scss
@@ -0,0 +1,5 @@
+
+.docBtnZ {
+    position: relative;
+    z-index: 2000;
+  }
\ No newline at end of file

From d1642a520ee09e56caea9a972ea9bf5a08923cc9 Mon Sep 17 00:00:00 2001
From: Haemin Kim <haemin1230@gmail.com>
Date: Wed, 24 Sep 2025 14:22:43 +0900
Subject: [PATCH 3/9] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20(#319)=20pptx=20?=
 =?UTF-8?q?=EA=B4=80=EB=A0=A8=20=EC=BD=94=EB=93=9C=20=EC=A0=9C=EA=B1=B0,?=
 =?UTF-8?q?=20pdf=20=ED=8C=8C=EC=9D=BC=20=EC=99=B8=EC=97=90=20=EB=8B=A4?=
 =?UTF-8?q?=EB=A5=B8=20=ED=8C=8C=EC=9D=BC=20=EC=84=A0=ED=83=9D=ED=96=88?=
 =?UTF-8?q?=EC=9D=84=20=EB=96=84=20popover=EC=97=90=20=EC=95=88=EB=82=B4?=
 =?UTF-8?q?=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../_components/LectureLiveProvider.tsx       |  2 +-
 .../LectureMainGrid/LectureMainGrid.tsx       |  4 +-
 .../DocumentViewer/DocumentViewer.module.scss |  8 ----
 .../DocumentViewer/DocumentViewer.tsx         | 25 ++---------
 .../LectureNotePopover.module.scss            |  8 ++++
 .../LectureNotePopover/LectureNotePopover.tsx | 20 +++++++--
 .../PageThumbsSidebar/PageThumbsSidebar.tsx   | 44 ++-----------------
 7 files changed, 34 insertions(+), 77 deletions(-)

diff --git a/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureLiveProvider.tsx b/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureLiveProvider.tsx
index eaad3029..f9f05fc3 100644
--- a/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureLiveProvider.tsx
+++ b/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureLiveProvider.tsx
@@ -2,7 +2,7 @@
 
 import React, { createContext, useContext, useMemo, useState, useRef, useCallback } from "react";
 
-export type DocType = "pdf" | "pptx" | "unknown";
+export type DocType = "pdf" | "unknown";
 type DocState = { url: string; type: DocType; name: string };
 
 export type Tool = "pencilOff" | "pen" | "eraser" | "highlighter";
diff --git a/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureMainGrid/LectureMainGrid.tsx b/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureMainGrid/LectureMainGrid.tsx
index d738174b..9f552e11 100644
--- a/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureMainGrid/LectureMainGrid.tsx
+++ b/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureMainGrid/LectureMainGrid.tsx
@@ -27,8 +27,8 @@ export default function LectureMainGrid() {
   const [count, setCount] = useState(1);
   const [currentPage, setCurrentPage] = useState(0);
 
-  const resolvedType: "pdf" | "pptx" | undefined =
-    doc.type === "pdf" || doc.type === "pptx" ? doc.type : undefined;
+  const resolvedType: "pdf" | undefined =
+    doc.type === "pdf" ? doc.type : undefined;
 
   useEffect(() => {
     const resetOnDocChange = () => setCurrentPage(0);
diff --git a/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureNote/DocumentViewer/DocumentViewer.module.scss b/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureNote/DocumentViewer/DocumentViewer.module.scss
index 5a033a93..273c9815 100644
--- a/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureNote/DocumentViewer/DocumentViewer.module.scss
+++ b/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureNote/DocumentViewer/DocumentViewer.module.scss
@@ -23,12 +23,4 @@
   display: grid;
   place-items: center;
   z-index: 0;
-}
-
-.pptxFrame {
-  width: 100%;
-  height: 100%;
-  border: 0;
-  position: relative;
-  z-index: 0;
 }
\ No newline at end of file
diff --git a/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureNote/DocumentViewer/DocumentViewer.tsx b/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureNote/DocumentViewer/DocumentViewer.tsx
index b8b79903..45eb98c7 100644
--- a/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureNote/DocumentViewer/DocumentViewer.tsx
+++ b/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureNote/DocumentViewer/DocumentViewer.tsx
@@ -6,23 +6,15 @@ import dynamic from "next/dynamic";
 import { DocType } from "../../LectureLiveProvider";
 import type { PageProps } from "react-pdf";
 
-
 const PDFDocument = dynamic(() => import("react-pdf").then(m => m.Document), { ssr: false });
-const PDFPage = dynamic(() => import("react-pdf").then(m => m.Page),     { ssr: false });
+const PDFPage = dynamic(() => import("react-pdf").then(m => m.Page), { ssr: false });
 
 export function getDocType(url: string): DocType {
   const m = url.split("?")[0].toLowerCase();
   if (m.endsWith(".pdf")) return "pdf";
-  if (m.endsWith(".pptx")) return "pptx";
   return "unknown";
 }
 
-export function toAbsoluteUrl(pathOrUrl: string) {
-  if (/^https?:\/\//i.test(pathOrUrl)) return pathOrUrl;
-  if (typeof window === "undefined") return pathOrUrl;
-  return new URL(pathOrUrl, window.location.origin).toString();
-}
-
 export default function DocumentViewer({
   fileUrl,
   currentPage,
@@ -66,6 +58,7 @@ export default function DocumentViewer({
       setStageW(el.clientWidth - padX);
       setStageH(el.clientHeight - padY);
     };
+    
     measure();
     const ro = new ResizeObserver(measure);
     ro.observe(el);
@@ -84,7 +77,7 @@ export default function DocumentViewer({
     if (currentPage > numPages - 1) onChangePage(numPages - 1);
   };
 
-const handlePageLoad: NonNullable<PageProps["onLoadSuccess"]> = (page) => {
+  const handlePageLoad: NonNullable<PageProps["onLoadSuccess"]> = (page) => {
     if (type !== "pdf") return;
     const vp = page.getViewport({ scale: 1 });
     setNaturalW(vp.width);
@@ -100,7 +93,6 @@ const handlePageLoad: NonNullable<PageProps["onLoadSuccess"]> = (page) => {
     <div className={styles.viewer}>
       <div ref={stageRef} className={styles.stage}>
         <div className={styles.docBox} data-doc-box style={docBoxStyle}>
-          {type === "pdf" && (
             <PDFDocument file={fileUrl} onLoadSuccess={handleDocLoad} loading="로딩 중…">
               <PDFPage
                 pageNumber={currentPage + 1}
@@ -110,17 +102,6 @@ const handlePageLoad: NonNullable<PageProps["onLoadSuccess"]> = (page) => {
                 onLoadSuccess={handlePageLoad}
               />
             </PDFDocument>
-          )}
-
-          {type === "pptx" && (
-            <iframe
-              title="PPTX Viewer"
-              className={styles.pptxFrame}
-              src={`https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(
-                toAbsoluteUrl(fileUrl)
-              )}`}
-            />
-          )}
         </div>
       </div>
     </div>
diff --git a/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureNote/LectureNotePopover/LectureNotePopover.module.scss b/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureNote/LectureNotePopover/LectureNotePopover.module.scss
index 179c3f21..42a89206 100644
--- a/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureNote/LectureNotePopover/LectureNotePopover.module.scss
+++ b/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureNote/LectureNotePopover/LectureNotePopover.module.scss
@@ -82,4 +82,12 @@
   font: inherit;
   font-size: 15px;
   font-weight: 600;
+}
+
+
+.unsupported {
+  color: #404040;
+  font-size: 0.9rem;
+  padding: 1rem;
+  text-align: center;
 }
\ No newline at end of file
diff --git a/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureNote/LectureNotePopover/LectureNotePopover.tsx b/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureNote/LectureNotePopover/LectureNotePopover.tsx
index a4f8077a..3133bd87 100644
--- a/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureNote/LectureNotePopover/LectureNotePopover.tsx
+++ b/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureNote/LectureNotePopover/LectureNotePopover.tsx
@@ -2,9 +2,10 @@
 
 import styles from "./LectureNotePopover.module.scss";
 import FileDisplay from "@/components/FileDisplay/FileDisplay";
-import { useLive } from "../../LectureLiveProvider";
+import { DocType, useLive } from "../../LectureLiveProvider";
+import { useState } from "react";
 
-type Item = { name: string; url: string; type: "pdf" | "pptx" };
+type Item = { name: string; url: string; type: DocType };
 
 interface Props {
   notes: {
@@ -19,8 +20,14 @@ interface Props {
 
 export default function LectureNotePopover({ notes, onPicked, onUploadRequest }: Props) {
   const { setDoc, doc } = useLive();
+  const [unsupportedFile, setUnsupportedFile] = useState<string | null>(null);
 
   const pick = (it: Item) => {
+    if (it.type !== "pdf") {
+      setUnsupportedFile(it.name);
+      return;
+    }
+    setUnsupportedFile(null);
     setDoc({ url: it.url, type: it.type, name: it.name });
     onPicked?.();
   };
@@ -34,7 +41,7 @@ export default function LectureNotePopover({ notes, onPicked, onUploadRequest }:
     <div className={styles.pop}>
       <div className={styles.list}>
         {notes.map((note) => {
-          const ext = note.lectureNoteName.toLowerCase().endsWith(".pptx") ? "pptx" : "pdf";
+          const ext = note.lectureNoteName.toLowerCase().endsWith(".pdf") ? "pdf" : "unknown";
           return (
             <div key={note.lectureNoteId}>
               <button
@@ -55,6 +62,13 @@ export default function LectureNotePopover({ notes, onPicked, onUploadRequest }:
         })}
       </div>
 
+      {unsupportedFile && (
+        <div className={styles.unsupported}>
+          <strong>{unsupportedFile}</strong> 은(는) 지원하지 않습니다.<br />
+          PDF 파일만 선택할 수 있습니다.
+        </div>
+      )}
+
       <div className={styles.divider} />
 
       <button type="button" className={styles.uploadBtn} onClick={handleAddMaterials}>
diff --git a/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureNote/PageThumbsSidebar/PageThumbsSidebar.tsx b/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureNote/PageThumbsSidebar/PageThumbsSidebar.tsx
index 91db04c3..5f84f05f 100644
--- a/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureNote/PageThumbsSidebar/PageThumbsSidebar.tsx
+++ b/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureNote/PageThumbsSidebar/PageThumbsSidebar.tsx
@@ -2,9 +2,9 @@
 
 import styles from "./PageThumbsSidebar.module.scss";
 import { Document, Page, pdfjs } from "react-pdf";
-import JSZip from "jszip";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { getDocType } from "../DocumentViewer/DocumentViewer";
+import { DocType } from "../../LectureLiveProvider";
 
 pdfjs.GlobalWorkerOptions.workerSrc =
   `https://unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.mjs`;
@@ -22,12 +22,10 @@ export default function PageThumbsSidebar({
   onSelect: (index: number) => void;
   thumbWidth?: number;
   onCountChange?: (count: number) => void;
-  typeOverride?: "pdf" | "pptx";
+  typeOverride?: DocType;
 }) {
   const type = typeOverride ?? getDocType(fileUrl);
-
   const [pdfCount, setPdfCount] = useState<number>(0);
-  const [pptxCount, setPptxCount] = useState<number>(0);
 
   if (!fileUrl) {
     return (
@@ -37,20 +35,6 @@ export default function PageThumbsSidebar({
     );
   }
 
-  useEffect(() => {
-    if (type !== "pptx") return;
-    (async () => {
-      const res = await fetch(fileUrl);
-      const blob = await res.blob();
-      const zip = await JSZip.loadAsync(blob);
-      const count = Object.keys(zip.files).filter((k) =>
-        /^ppt\/slides\/slide\d+\.xml$/.test(k)
-      ).length;
-      setPptxCount(count);
-      onCountChange?.(count);
-    })().catch(console.error);
-  }, [fileUrl, type, onCountChange]);
-
   if (type === "pdf") {
     return (
       <div className={styles.wrap}>
@@ -85,26 +69,4 @@ export default function PageThumbsSidebar({
       </div>
     );
   }
-
-  if (type === "pptx") {
-    return (
-      <div className={styles.wrap}>
-        <div className={styles.list}>
-          {Array.from({ length: pptxCount }, (_, i) => (
-            <button
-              key={i}
-              className={`${styles.thumb} ${i === currentPage ? styles.active : ""}`}
-              onClick={() => onSelect(i)}
-              aria-label={`슬라이드 ${i + 1}`}
-            >
-              <div className={styles.pagePreview} />
-              <div className={styles.pageIndex}>p.{i + 1}</div>
-            </button>
-          ))}
-        </div>
-      </div>
-    );
-  }
-
-  return null;
 }
\ No newline at end of file

From b7d88297cb627acd688feb617280246a84b9213b Mon Sep 17 00:00:00 2001
From: Haemin Kim <haemin1230@gmail.com>
Date: Wed, 24 Sep 2025 15:09:21 +0900
Subject: [PATCH 4/9] =?UTF-8?q?=E2=9E=95=20(#319)=20=EC=B1=84=ED=8C=85=20?=
 =?UTF-8?q?=EA=B4=80=EB=A0=A8=20=EC=9D=98=EC=A1=B4=EC=84=B1=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/package-lock.json | 116 +++++++++++++++++++++++++++++++++++++
 frontend/package.json      |   3 +
 2 files changed, 119 insertions(+)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 96bae6e9..b3b6a352 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -8,6 +8,7 @@
       "name": "frontend",
       "version": "0.1.0",
       "dependencies": {
+        "@stomp/stompjs": "^7.0.0",
         "@types/flatpickr": "^3.0.2",
         "@types/react-datepicker": "^6.2.0",
         "axios": "^1.9.0",
@@ -31,6 +32,7 @@
         "react-masonry-css": "^1.0.16",
         "react-pdf": "^10.1.0",
         "recharts": "^2.15.3",
+        "sockjs-client": "^1.6.1",
         "zustand": "^5.0.3"
       },
       "devDependencies": {
@@ -51,6 +53,7 @@
         "@types/react": "^19.1.0",
         "@types/react-dom": "^19.1.1",
         "@types/resolve": "^1.20.6",
+        "@types/sockjs-client": "^1.5.4",
         "@types/trusted-types": "^2.0.7",
         "eslint": "^9",
         "eslint-config-next": "15.2.4",
@@ -3059,6 +3062,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@stomp/stompjs": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/@stomp/stompjs/-/stompjs-7.2.0.tgz",
+      "integrity": "sha512-+Waf/wdSxgRmXHWg7HXUt51YNK/Cp2pMhW+OELwX5fzbO6pd+O2bLrWqGmyFNC/RyeUQIMGESP7oE3L1dXXm0Q==",
+      "license": "Apache-2.0"
+    },
     "node_modules/@surma/rollup-plugin-off-main-thread": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/@surma/rollup-plugin-off-main-thread/-/rollup-plugin-off-main-thread-2.2.3.tgz",
@@ -3333,6 +3342,13 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/sockjs-client": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/@types/sockjs-client/-/sockjs-client-1.5.4.tgz",
+      "integrity": "sha512-zk+uFZeWyvJ5ZFkLIwoGA/DfJ+pYzcZ8eH4H/EILCm2OBZyHH6Hkdna1/UWL/CFruh5wj6ES7g75SvUB0VsH5w==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/trusted-types": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
@@ -5973,6 +5989,15 @@
         "node": ">=0.8.x"
       }
     },
+    "node_modules/eventsource": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/eventsource/-/eventsource-2.0.2.tgz",
+      "integrity": "sha512-IzUmBGPR3+oUG9dUeXynyNmf91/3zUSJg1lCktzKw47OXuhco54U3r9B7O4XX+Rb1Itm9OZ2b0RkTs10bICOxA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -6054,6 +6079,18 @@
         "reusify": "^1.0.4"
       }
     },
+    "node_modules/faye-websocket": {
+      "version": "0.11.4",
+      "resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.11.4.tgz",
+      "integrity": "sha512-CzbClwlXAuiRQAlUyfqPgvPoNKTckTPGfwZV4ZdAhVcP2lh9KUxJg2b5GkE7XbjKQ3YJnQ9z6D9ntLAlB+tP8g==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "websocket-driver": ">=0.5.1"
+      },
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
     "node_modules/file-entry-cache": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz",
@@ -6577,6 +6614,12 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/http-parser-js": {
+      "version": "0.5.10",
+      "resolved": "https://registry.npmjs.org/http-parser-js/-/http-parser-js-0.5.10.tgz",
+      "integrity": "sha512-Pysuw9XpUq5dVc/2SMHpuTY01RFl8fttgcyunjL7eEMhGM3cI4eOmiCycJDVCo/7O7ClfQD3SaI6ftDzqOXYMA==",
+      "license": "MIT"
+    },
     "node_modules/iconv-lite": {
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
@@ -8635,6 +8678,12 @@
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
     },
+    "node_modules/querystringify": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz",
+      "integrity": "sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==",
+      "license": "MIT"
+    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -9012,6 +9061,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/requires-port": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
+      "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
+      "license": "MIT"
+    },
     "node_modules/reserved-words": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/reserved-words/-/reserved-words-0.1.2.tgz",
@@ -9563,6 +9618,34 @@
         "node": ">=8"
       }
     },
+    "node_modules/sockjs-client": {
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/sockjs-client/-/sockjs-client-1.6.1.tgz",
+      "integrity": "sha512-2g0tjOR+fRs0amxENLi/q5TiJTqY+WXFOzb5UwXndlK6TO3U/mirZznpx6w34HVMoc3g7cY24yC/ZMIYnDlfkw==",
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^3.2.7",
+        "eventsource": "^2.0.2",
+        "faye-websocket": "^0.11.4",
+        "inherits": "^2.0.4",
+        "url-parse": "^1.5.10"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://tidelift.com/funding/github/npm/sockjs-client"
+      }
+    },
+    "node_modules/sockjs-client/node_modules/debug": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.1"
+      }
+    },
     "node_modules/source-list-map": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz",
@@ -10467,6 +10550,16 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/url-parse": {
+      "version": "1.5.10",
+      "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.10.tgz",
+      "integrity": "sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==",
+      "license": "MIT",
+      "dependencies": {
+        "querystringify": "^2.1.1",
+        "requires-port": "^1.0.0"
+      }
+    },
     "node_modules/use-strict": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/use-strict/-/use-strict-1.0.1.tgz",
@@ -10682,6 +10775,29 @@
         "npm": ">=3.10.0"
       }
     },
+    "node_modules/websocket-driver": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.7.4.tgz",
+      "integrity": "sha512-b17KeDIQVjvb0ssuSDF2cYXSg2iztliJ4B9WdsuB6J952qCPKmnVq4DyW5motImXHDC1cBT/1UezrJVsKw5zjg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "http-parser-js": ">=0.5.1",
+        "safe-buffer": ">=5.1.0",
+        "websocket-extensions": ">=0.1.1"
+      },
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/websocket-extensions": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/websocket-extensions/-/websocket-extensions-0.1.4.tgz",
+      "integrity": "sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
     "node_modules/whatwg-url": {
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-7.1.0.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index ff9077ee..0c769a7c 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@stomp/stompjs": "^7.0.0",
     "@types/flatpickr": "^3.0.2",
     "@types/react-datepicker": "^6.2.0",
     "axios": "^1.9.0",
@@ -32,6 +33,7 @@
     "react-masonry-css": "^1.0.16",
     "react-pdf": "^10.1.0",
     "recharts": "^2.15.3",
+    "sockjs-client": "^1.6.1",
     "zustand": "^5.0.3"
   },
   "devDependencies": {
@@ -52,6 +54,7 @@
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.1",
     "@types/resolve": "^1.20.6",
+    "@types/sockjs-client": "^1.5.4",
     "@types/trusted-types": "^2.0.7",
     "eslint": "^9",
     "eslint-config-next": "15.2.4",

From 8af3e10486b05c4028f006a2b41c5237e1232c87 Mon Sep 17 00:00:00 2001
From: Haemin Kim <haemin1230@gmail.com>
Date: Wed, 24 Sep 2025 16:59:45 +0900
Subject: [PATCH 5/9] =?UTF-8?q?=E2=9C=A8=20(#319)=20=EB=85=B9=EC=9D=8C=20?=
 =?UTF-8?q?=EC=A0=80=EC=9E=A5=20API=20=EC=97=B0=EB=8F=99=20=EB=B0=8F=20?=
 =?UTF-8?q?=EC=A0=80=EC=9E=A5=EC=8B=9C=20=EB=A1=9C=EB=94=A9=20=ED=99=94?=
 =?UTF-8?q?=EB=A9=B4=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/api/lectures/saveAudioFile.ts        | 22 +++++++++++
 .../LectureLiveHeader/LectureLiveHeader.tsx   | 37 ++++++++++++++++---
 .../RecordingButton/RecordingButton.tsx       | 25 +++++++++----
 frontend/types/lectures/saveAudioFileTypes.ts |  5 +++
 4 files changed, 76 insertions(+), 13 deletions(-)
 create mode 100644 frontend/api/lectures/saveAudioFile.ts
 create mode 100644 frontend/types/lectures/saveAudioFileTypes.ts

diff --git a/frontend/api/lectures/saveAudioFile.ts b/frontend/api/lectures/saveAudioFile.ts
new file mode 100644
index 00000000..c930cabd
--- /dev/null
+++ b/frontend/api/lectures/saveAudioFile.ts
@@ -0,0 +1,22 @@
+import { axiosInstance } from "@/api/axiosInstance";
+import { ENDPOINTS } from "@/constants/endpoints";
+import { ApiResponse } from "@/types/apiResponseTypes";
+import { SaveAudioFileResult } from "@/types/lectures/saveAudioFileTypes";
+
+export async function saveAudioFile( lectureId: string, blob: Blob) {
+  
+  const file = new File([blob], `${lectureId}.mp3`, { type: "audio/mpeg" });
+
+  const formData = new FormData();
+  formData.append("file", file);
+
+  const response = await axiosInstance.post<ApiResponse<SaveAudioFileResult | null>>(
+    ENDPOINTS.LECTURES.SAVE_RECORDING(lectureId),
+    formData,
+    {
+      headers: { "Content-Type": "multipart/form-data" },
+    }
+  );
+
+  return response.data;
+}
\ No newline at end of file
diff --git a/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureLiveHeader/LectureLiveHeader.tsx b/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureLiveHeader/LectureLiveHeader.tsx
index 84376c12..adac7efb 100644
--- a/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureLiveHeader/LectureLiveHeader.tsx
+++ b/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureLiveHeader/LectureLiveHeader.tsx
@@ -14,6 +14,7 @@ import { getRecordingEngine, type RecState } from "../Recording/recordingEngine"
 import { ROUTES } from "@/constants/routes";
 import { Tool } from "../LectureLiveProvider";
 import LectureNoteButton from "../LectureNote/LectureNoteButton/LectureNoteButton";
+import { saveAudioFile } from "@/api/lectures/saveAudioFile";
 
 export default function LectureLiveHeader({
   onToggleChat,
@@ -27,6 +28,8 @@ export default function LectureLiveHeader({
   const { tool, setTool } = useLive();
 
   const [endOpen, setEndOpen] = useState(false);
+  const [saving, setSaving] = useState(false);
+
 
   const engine = useMemo(() => getRecordingEngine(), []);
   const [recState, setRecState] = useState<RecState>(engine.getSnapshot().state);
@@ -51,14 +54,33 @@ export default function LectureLiveHeader({
   const handleConfirmEnd = async () => {
     if (isRecording) {
       try {
-        await engine.stop();
+        setSaving(true); // 저장 중 표시
+        await new Promise<void>((resolve, reject) => {
+          const off = engine.subscribe("done", async (blob, url) => {
+            try {
+              if (lectureId) {
+                await saveAudioFile(lectureId, blob);
+                console.log("🎤 녹음 파일 저장 완료");
+              }
+              off();
+              resolve();
+            } catch (e) {
+              console.error("❌ 녹음 파일 저장 실패:", e);
+              reject(e);
+            }
+          });
+
+          engine.stop().catch(reject);
+        });
       } catch (e) {
-        console.error(e);
+        console.error("녹음 종료 중 오류:", e);
+      } finally {
+        setSaving(false);
       }
     }
+
     setEndOpen(false);
     onEndLecture?.();
-
     router.push(ROUTES.teacherLectureDetail(lectureId));
   };
 
@@ -92,8 +114,13 @@ export default function LectureLiveHeader({
       </div>
 
       {endOpen && (
-        <ConfirmModal onConfirm={handleConfirmEnd} onClose={handleCancelEnd}>
-          {isRecording ? (
+        <ConfirmModal
+          onConfirm={handleConfirmEnd}
+          onClose={handleCancelEnd}
+        >
+          {saving ? (
+            <>녹음 파일 저장 중입니다... ⏳</>
+          ) : isRecording ? (
             <>
               지금 녹음이 진행 중입니다.
               <br />
diff --git a/frontend/app/teacher/lecture-live/[lectureId]/_components/Recording/RecordingButton/RecordingButton.tsx b/frontend/app/teacher/lecture-live/[lectureId]/_components/Recording/RecordingButton/RecordingButton.tsx
index dfaea1e8..e43f368a 100644
--- a/frontend/app/teacher/lecture-live/[lectureId]/_components/Recording/RecordingButton/RecordingButton.tsx
+++ b/frontend/app/teacher/lecture-live/[lectureId]/_components/Recording/RecordingButton/RecordingButton.tsx
@@ -8,15 +8,17 @@ import ConfirmModal from "@/components/Modal/ConfirmModal/ConfirmModal";
 import { AudioLines } from "lucide-react";
 import styles from "./RecordingButton.module.scss";
 import { getRecordingEngine } from "../recordingEngine";
+import { saveAudioFile } from "@/api/lectures/saveAudioFile";
+import { useParams } from "next/navigation";
 
 export default function RecordingButton() {
   const engine = useMemo(() => getRecordingEngine(), []);
   const anchorRef = useRef<HTMLSpanElement>(null);
+  const { lectureId } = useParams<{ lectureId: string }>();
 
   const [open, setOpen] = useState(false);
   const [confirmOpen, setConfirmOpen] = useState(false);
 
-
   const [isRecording, setIsRecording] = useState(
     engine.getSnapshot().state === "recording"
   );
@@ -26,6 +28,18 @@ export default function RecordingButton() {
     return () => off();
   }, [engine]);
 
+  useEffect(() => {
+    const off = engine.subscribe("done", async (blob) => {
+      if (!lectureId) return;
+  
+      try {
+        await saveAudioFile(lectureId, blob);
+      } catch (err) {
+      }
+    });
+    return () => off();
+  }, [engine, lectureId]);
+
   const handleRequestConfirmStop = () => {
     setOpen(false);
     setConfirmOpen(true);
@@ -57,16 +71,11 @@ export default function RecordingButton() {
         align="start"
         side="bottom"
       >
-        <RecordingPopover
-          onRequestConfirmStop={handleRequestConfirmStop}
-        />
+        <RecordingPopover onRequestConfirmStop={handleRequestConfirmStop} />
       </ToolPopover>
 
       {confirmOpen && (
-        <ConfirmModal
-          onConfirm={confirmStopAndSave}
-          onClose={cancelConfirm}
-        >
+        <ConfirmModal onConfirm={confirmStopAndSave} onClose={cancelConfirm}>
           확인 버튼을 누르면
           <br />
           이 강의의 녹음은 저장됩니다.
diff --git a/frontend/types/lectures/saveAudioFileTypes.ts b/frontend/types/lectures/saveAudioFileTypes.ts
new file mode 100644
index 00000000..8e176556
--- /dev/null
+++ b/frontend/types/lectures/saveAudioFileTypes.ts
@@ -0,0 +1,5 @@
+export interface SaveAudioFileResult {
+    lectureId: string;
+    recordingUrl: string;
+  }
+  
\ No newline at end of file

From bb1be686ba3327e6f8d522be472647312e530a80 Mon Sep 17 00:00:00 2001
From: Haemin Kim <haemin1230@gmail.com>
Date: Wed, 24 Sep 2025 17:12:01 +0900
Subject: [PATCH 6/9] =?UTF-8?q?=E2=9C=A8=20(#319)=20=EC=B1=84=ED=8C=85=20?=
 =?UTF-8?q?=EC=86=8C=EC=BC=93=20=EC=97=B0=EB=8F=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Chating/ChatingPanel/ChatingPanel.tsx     | 87 ++++++++---------
 frontend/hooks/useLectureChat.ts              | 97 +++++++++++++++++++
 2 files changed, 138 insertions(+), 46 deletions(-)
 create mode 100644 frontend/hooks/useLectureChat.ts

diff --git a/frontend/app/teacher/lecture-live/[lectureId]/_components/Chating/ChatingPanel/ChatingPanel.tsx b/frontend/app/teacher/lecture-live/[lectureId]/_components/Chating/ChatingPanel/ChatingPanel.tsx
index 26c09040..9beefc2e 100644
--- a/frontend/app/teacher/lecture-live/[lectureId]/_components/Chating/ChatingPanel/ChatingPanel.tsx
+++ b/frontend/app/teacher/lecture-live/[lectureId]/_components/Chating/ChatingPanel/ChatingPanel.tsx
@@ -7,57 +7,53 @@ import { X, SendHorizontal } from "lucide-react";
 import { useLive } from "../../LectureLiveProvider";
 import ChatBox from "@/components/ChatBox/ChatBox";
 import BasicInput from "@/components/Input/BasicInput/BasicInput";
-
-type Msg = {
-  id: string;
-  text: string;
-  role: "teacher" | "student";
-  ts?: number;
-};
+import { useParams } from "next/navigation";
+import { useLectureChat } from "@/hooks/useLectureChat";
 
 export default function ChatPanel() {
   const { togglePanel } = useLive();
+  const { lectureId } = useParams<{ lectureId: string }>();
 
-  const [msgs, setMsgs] = useState<Msg[]>([
-    { id: "seed1", text: "질문이요~", role: "student", ts: Date.now()},
-  ]);
-  const [text, setText] = useState("");
+  // 소켓 연결
+  const { messages, connected, sendMessage } = useLectureChat(lectureId);
 
+  const [text, setText] = useState("");
   const bodyRef = useRef<HTMLDivElement>(null);
 
   const closeChat = () => togglePanel("chat");
 
+  // 메시지 전송
   const send = () => {
     const t = text.trim();
     if (!t) return;
-    setMsgs((m) => [
-      ...m,
-      { id: String(Date.now()), text: t, role: "teacher", ts: Date.now() },
-    ]);
+    sendMessage(t);
     setText("");
   };
 
+  // Enter로 전송
   const onSubmit: React.FormEventHandler = (e) => {
     e.preventDefault();
     send();
   };
 
+  // 새로운 메시지 오면 스크롤 맨 아래로 이동
   useEffect(() => {
     const el = bodyRef.current;
     if (!el) return;
     el.scrollTop = el.scrollHeight;
-  }, [msgs]);
+  }, [messages]);
 
-  const pad = (n: number) => n.toString().padStart(2, "0");
-  const fmt = (ts: number) => {
+
+  const fmt = (ts: string) => {
     const d = new Date(ts);
-    const yy = pad(d.getFullYear() % 100);
-    const MM = pad(d.getMonth() + 1);
-    const dd = pad(d.getDate());
-    const hh = pad(d.getHours());
-    const mm = pad(d.getMinutes());
-    const ss = pad(d.getSeconds());
-    return `${yy}.${MM}.${dd} ${hh}:${mm}:${ss}`;
+    return d.toLocaleString("ko-KR", {
+      year: "2-digit",
+      month: "2-digit",
+      day: "2-digit",
+      hour: "2-digit",
+      minute: "2-digit",
+      second: "2-digit",
+    });
   };
 
   return (
@@ -70,38 +66,37 @@ export default function ChatPanel() {
       </div>
 
       <div ref={bodyRef} className={styles.body}>
-        {msgs.map((m) => {
-          const tsText = m.ts ? fmt(m.ts) : "";
-          return (
-            <div
-              key={m.id}
-              className={`${styles.row} ${
-                m.role === "teacher" ? styles.teacher : styles.student
-              }`}
-            >
-              <ChatBox
-                isAnonymous={true}
-                nickname=""
-                profilePicture=""
-                message={m.text}
-                timestamp={tsText}
-                variant={m.role === "teacher" ? "teacher" : "student"}
-              />
-            </div>
-          );
-        })}
+        {messages.map((m, i) => (
+          <div
+            key={i}
+            className={`${styles.row} ${
+              m.role === "TEACHER" ? styles.teacher : styles.student
+            }`}
+          >
+            <ChatBox
+              isAnonymous={true}
+              nickname={m.senderName ?? ""}
+              profilePicture=""
+              message={m.content}
+              timestamp={fmt(m.timestamp)}
+              variant={m.role === "TEACHER" ? "teacher" : "student"}
+            />
+          </div>
+        ))}
       </div>
 
       <form className={styles.inputRow} onSubmit={onSubmit}>
         <BasicInput
           value={text}
           onChange={(e) => setText(e.target.value)}
-          placeholder="답변 입력하기"
+          placeholder={connected ? "답변 입력하기" : "연결 중..."}
+          disabled={!connected}
           iconRight={
             <IconButton
               ariaLabel="전송"
               onClick={send}
               icon={<SendHorizontal size={18} color="#9AA4B2" />}
+              disabled={!connected}
             />
           }
         />
diff --git a/frontend/hooks/useLectureChat.ts b/frontend/hooks/useLectureChat.ts
new file mode 100644
index 00000000..a991ece1
--- /dev/null
+++ b/frontend/hooks/useLectureChat.ts
@@ -0,0 +1,97 @@
+"use client";
+
+import { Client, IMessage, StompSubscription, IFrame } from "@stomp/stompjs";
+import { useEffect, useRef, useState } from "react";
+import SockJS from "sockjs-client";
+
+export type ChatMessage = {
+  senderId: string | null;   // 보낸 사람 ID
+  senderName: string | null; // 보낸 사람 닉네임
+  content: string;           // 메시지 내용
+  role: string;              // "TEACHER" | "STUDENT"
+  timestamp: string;         // 시간
+};
+
+export function useLectureChat(lectureId: string | undefined) {
+  
+  const token = typeof window !== "undefined" ? localStorage.getItem("accessToken") : null;
+
+  const clientRef = useRef<Client | null>(null);
+  const subscriptionRef = useRef<StompSubscription | null>(null);
+
+  const [messages, setMessages] = useState<ChatMessage[]>([]);
+  const [connected, setConnected] = useState(false);
+
+  useEffect(() => {
+    if (!lectureId) return;
+
+    const wsUrl = process.env.NEXT_PUBLIC_WS_URL!;
+
+    // STOMP 클라이언트 생성
+    const client = new Client({
+      webSocketFactory: () => new SockJS(wsUrl),
+      reconnectDelay: 5000,
+      connectHeaders: {
+        Authorization: `Bearer ${token}`,
+      },
+
+      // 소켓 연결 성공 시 실행
+      onConnect: () => {
+        console.log("✅ Connected!");
+        setConnected(true);
+
+        // lectureId 채팅방 구독
+        const destination = `/sub/lecture/${lectureId}`;
+        console.log(`구독 요청: ${destination}`);
+
+        const subscription = client.subscribe(destination, (message: IMessage) => {
+          try {
+            const parsed: ChatMessage = JSON.parse(message.body);
+            setMessages((prev) => [...prev, parsed]);
+          } catch (e) {
+            console.error("❌ 메시지 파싱 실패:", e);
+          }
+        });
+
+        subscriptionRef.current = subscription;
+      },
+
+      // 연결 해제
+      onDisconnect: () => {
+        console.log("❌ Disconnected");
+        setConnected(false);
+      },
+
+      // STOMP 프로토콜 에러
+      onStompError: (frame: IFrame) => {
+        console.error("STOMP Error:", frame);
+      },
+
+      // WebSocket 에러
+      onWebSocketError: (event: Event) => {
+        console.error("WS Error:", event);
+      },
+    });
+
+    // 소켓 연결
+    client.activate();
+    clientRef.current = client;
+
+    // 언마운트 시 구독 해제 및 연결 종료
+    return () => {
+      subscriptionRef.current?.unsubscribe();
+      client.deactivate();
+    };
+  }, [lectureId]);
+
+  // 메시지 전송
+  const sendMessage = (content: string) => {
+    if (!clientRef.current || !clientRef.current.connected) return;
+    clientRef.current.publish({
+      destination: `/pub/lecture/${lectureId}`,
+      body: JSON.stringify({ content }),
+    });
+  };
+
+  return { messages, connected, sendMessage };
+}
\ No newline at end of file

From 384e7f257b9fe3fcc9321aa60328e84e320f5d9b Mon Sep 17 00:00:00 2001
From: Haemin Kim <haemin1230@gmail.com>
Date: Thu, 25 Sep 2025 11:25:23 +0900
Subject: [PATCH 7/9] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20(#319)=20url=20?=
 =?UTF-8?q?=EC=A0=9C=EA=B1=B0,=20=EC=97=90=EB=9F=AC=20=EC=BD=98=EC=86=94?=
 =?UTF-8?q?=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../_components/LectureLiveHeader/LectureLiveHeader.tsx       | 4 ++--
 .../_components/Recording/RecordingButton/RecordingButton.tsx | 3 ++-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureLiveHeader/LectureLiveHeader.tsx b/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureLiveHeader/LectureLiveHeader.tsx
index adac7efb..6fc830c7 100644
--- a/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureLiveHeader/LectureLiveHeader.tsx
+++ b/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureLiveHeader/LectureLiveHeader.tsx
@@ -54,9 +54,9 @@ export default function LectureLiveHeader({
   const handleConfirmEnd = async () => {
     if (isRecording) {
       try {
-        setSaving(true); // 저장 중 표시
+        setSaving(true);
         await new Promise<void>((resolve, reject) => {
-          const off = engine.subscribe("done", async (blob, url) => {
+          const off = engine.subscribe("done", async (blob) => {
             try {
               if (lectureId) {
                 await saveAudioFile(lectureId, blob);
diff --git a/frontend/app/teacher/lecture-live/[lectureId]/_components/Recording/RecordingButton/RecordingButton.tsx b/frontend/app/teacher/lecture-live/[lectureId]/_components/Recording/RecordingButton/RecordingButton.tsx
index e43f368a..4abe2387 100644
--- a/frontend/app/teacher/lecture-live/[lectureId]/_components/Recording/RecordingButton/RecordingButton.tsx
+++ b/frontend/app/teacher/lecture-live/[lectureId]/_components/Recording/RecordingButton/RecordingButton.tsx
@@ -34,7 +34,8 @@ export default function RecordingButton() {
   
       try {
         await saveAudioFile(lectureId, blob);
-      } catch (err) {
+      } catch(e) {
+        console.error(e);
       }
     });
     return () => off();

From 4f2feea58a890291e6e2a25945c6eb18d90809d7 Mon Sep 17 00:00:00 2001
From: Haemin Kim <haemin1230@gmail.com>
Date: Sun, 28 Sep 2025 14:22:59 +0900
Subject: [PATCH 8/9] =?UTF-8?q?=E2=9C=A8=20(#319)=20ConfirmModal=20?=
 =?UTF-8?q?=ED=99=95=EC=9D=B8,=20=EC=B7=A8=EC=86=8C=20=EB=B2=84=ED=8A=BC?=
 =?UTF-8?q?=20=EB=B9=84=ED=99=9C=EC=84=B1=ED=98=B8=20props=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/components/Modal/ConfirmModal/ConfirmModal.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/frontend/components/Modal/ConfirmModal/ConfirmModal.tsx b/frontend/components/Modal/ConfirmModal/ConfirmModal.tsx
index 2fcbb095..2001c54a 100644
--- a/frontend/components/Modal/ConfirmModal/ConfirmModal.tsx
+++ b/frontend/components/Modal/ConfirmModal/ConfirmModal.tsx
@@ -7,12 +7,14 @@ import FullWidthButton from "@/components/Button/FullWidthButton/FullWidthButton
 type ConfirmModalProps = {
   onConfirm: () => void; // 확인 버튼을 클릭했을 때 실행할 함수
   onClose: () => void; // 모달을 닫을 함수 (취소 버튼 클릭 시)
+  disableActions?: boolean; // 확인, 취소 버튼 비활성화
   children: React.ReactNode; // children을 받아올 수 있게 설정
 };
 
 const ConfirmModal: React.FC<ConfirmModalProps> = ({
   children,
   onClose,
+  disableActions,
   onConfirm,
 }) => {
   const handleOverlayClick = (e: React.MouseEvent) => {
@@ -27,8 +29,8 @@ const ConfirmModal: React.FC<ConfirmModalProps> = ({
       <div className={styles.modal}>
         <div className={styles.message}>{children}</div>
         <div className="mixed-layout-1">
-          <FullWidthButton onClick={onClose}>취소</FullWidthButton>
-          <FullWidthButton onClick={onConfirm}>확인</FullWidthButton>
+          <FullWidthButton onClick={onClose} disabled={disableActions}>취소</FullWidthButton>
+          <FullWidthButton onClick={onConfirm} disabled={disableActions}>확인</FullWidthButton>
         </div>
       </div>
     </div>,

From 6bc8e2538545f5035b98c3237186cc7943b9da29 Mon Sep 17 00:00:00 2001
From: Haemin Kim <haemin1230@gmail.com>
Date: Sun, 28 Sep 2025 14:23:23 +0900
Subject: [PATCH 9/9] =?UTF-8?q?=E2=9C=A8=20(#319)=20=EB=85=B9=EC=9D=8C=20?=
 =?UTF-8?q?=EC=A0=80=EC=9E=A5=EC=A4=91=20=EC=9D=BC=20=EB=95=8C=20=EB=B2=84?=
 =?UTF-8?q?=ED=8A=BC=20=EB=B9=84=ED=99=9C=EC=84=B1=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../LectureLiveHeader/LectureLiveHeader.tsx   |  1 +
 .../RecordingButton/RecordingButton.tsx       | 47 ++++++++++++++-----
 2 files changed, 35 insertions(+), 13 deletions(-)

diff --git a/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureLiveHeader/LectureLiveHeader.tsx b/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureLiveHeader/LectureLiveHeader.tsx
index 6fc830c7..380f22d5 100644
--- a/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureLiveHeader/LectureLiveHeader.tsx
+++ b/frontend/app/teacher/lecture-live/[lectureId]/_components/LectureLiveHeader/LectureLiveHeader.tsx
@@ -117,6 +117,7 @@ export default function LectureLiveHeader({
         <ConfirmModal
           onConfirm={handleConfirmEnd}
           onClose={handleCancelEnd}
+          disableActions={saving}
         >
           {saving ? (
             <>녹음 파일 저장 중입니다... ⏳</>
diff --git a/frontend/app/teacher/lecture-live/[lectureId]/_components/Recording/RecordingButton/RecordingButton.tsx b/frontend/app/teacher/lecture-live/[lectureId]/_components/Recording/RecordingButton/RecordingButton.tsx
index 4abe2387..c6bbc9b5 100644
--- a/frontend/app/teacher/lecture-live/[lectureId]/_components/Recording/RecordingButton/RecordingButton.tsx
+++ b/frontend/app/teacher/lecture-live/[lectureId]/_components/Recording/RecordingButton/RecordingButton.tsx
@@ -18,6 +18,7 @@ export default function RecordingButton() {
 
   const [open, setOpen] = useState(false);
   const [confirmOpen, setConfirmOpen] = useState(false);
+  const [saving, setSaving] = useState(false);
 
   const [isRecording, setIsRecording] = useState(
     engine.getSnapshot().state === "recording"
@@ -31,11 +32,14 @@ export default function RecordingButton() {
   useEffect(() => {
     const off = engine.subscribe("done", async (blob) => {
       if (!lectureId) return;
-  
       try {
+        setSaving(true);
         await saveAudioFile(lectureId, blob);
-      } catch(e) {
-        console.error(e);
+        console.log("🎤 녹음 파일 저장 완료");
+      } catch (e) {
+        console.error("❌ 녹음 저장 실패:", e);
+      } finally {
+        setSaving(false);
       }
     });
     return () => off();
@@ -47,12 +51,19 @@ export default function RecordingButton() {
   };
 
   const confirmStopAndSave = async () => {
-    await engine.stop();
-    setConfirmOpen(false);
-    setOpen(true);
+    try {
+      setSaving(true);
+      await engine.stop();
+    } catch (e) {
+      console.error(e);
+    } finally {
+      setConfirmOpen(false);
+      setOpen(true);
+    }
   };
 
   const cancelConfirm = () => {
+    if (saving) return;
     setConfirmOpen(false);
   };
 
@@ -76,13 +87,23 @@ export default function RecordingButton() {
       </ToolPopover>
 
       {confirmOpen && (
-        <ConfirmModal onConfirm={confirmStopAndSave} onClose={cancelConfirm}>
-          확인 버튼을 누르면
-          <br />
-          이 강의의 녹음은 저장됩니다.
-          <br />
-          <br />
-          종료하시겠습니까?
+        <ConfirmModal
+          onConfirm={confirmStopAndSave}
+          onClose={cancelConfirm}
+          disableActions={saving}
+        >
+          {saving ? (
+            <>녹음 파일 저장 중입니다... ⏳</>
+          ) : (
+            <>
+              확인 버튼을 누르면
+              <br />
+              이 강의의 녹음은 저장됩니다.
+              <br />
+              <br />
+              종료하시겠습니까?
+            </>
+          )}
         </ConfirmModal>
       )}
     </span>