From 1dafa06781adfd91d43e847c27df86e88a9cab37 Mon Sep 17 00:00:00 2001
From: jhynsoo <jhynsoo@gmail.com>
Date: Tue, 13 Aug 2024 17:52:56 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EA=B0=95=EC=9D=98=EC=8B=A4=20=EB=8B=AB?=
 =?UTF-8?q?=EA=B8=B0=20=EB=B2=84=ED=8A=BC=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/Layout/LectureLayout.jsx   |  3 ++-
 .../LectureHeader/LectureHeader.jsx           | 22 ++++++++++++++--
 .../LectureHeader/LectureHeader.module.css    | 25 +++++++++++++++++++
 frontend/src/pages/LivePage/LivePage.jsx      | 11 ++++++++
 4 files changed, 58 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/Layout/LectureLayout.jsx b/frontend/src/components/Layout/LectureLayout.jsx
index beabfd3..e9eeaa7 100644
--- a/frontend/src/components/Layout/LectureLayout.jsx
+++ b/frontend/src/components/Layout/LectureLayout.jsx
@@ -15,7 +15,7 @@ export default function LectureLayout() {
   const navigate = useNavigate();
 
   const { lectureDelete } = useLectureDelete();
-  const { data } = useLectureInfo(lectureId);
+  const { data, refetch } = useLectureInfo(lectureId);
   const lecture = data?.data;
   const userType = useBoundStore((state) => state.userType);
   const handleDelete = () => {
@@ -46,6 +46,7 @@ export default function LectureLayout() {
         tutor={lecture.teacherName}
         img={lecture.image}
         isLive={lecture.online}
+        refetch={refetch}
       />
       <MaxWidthLayout hasSideBar>
         <aside>
diff --git a/frontend/src/components/LectureHeader/LectureHeader.jsx b/frontend/src/components/LectureHeader/LectureHeader.jsx
index c3c7719..15777a5 100644
--- a/frontend/src/components/LectureHeader/LectureHeader.jsx
+++ b/frontend/src/components/LectureHeader/LectureHeader.jsx
@@ -3,11 +3,21 @@ import styles from './LectureHeader.module.css';
 import PlayIcon from '/src/assets/icons/play.svg?react';
 import CompassIcon from '/src/assets/icons/compass.svg?react';
 import useBoundStore from '../../store';
+import instance from '../../utils/axios/instance';
+import { API_URL } from '../../constants';
 
-export default function LectureHeader({ img, title, tutor, isLive = false }) {
+export default function LectureHeader({ img, title, tutor, isLive = false, refetch }) {
   const { lectureId } = useParams();
   const userType = useBoundStore((state) => state.userType);
   const isTeacher = userType === 'teacher';
+  const closeLiveRoom = () => {
+    instance
+      .post(`${API_URL}/video/deleteroom/${lectureId}`)
+      .catch(() => {})
+      .finally(() => {
+        refetch();
+      });
+  };
 
   return (
     <div className={styles.wrapper}>
@@ -29,7 +39,7 @@ export default function LectureHeader({ img, title, tutor, isLive = false }) {
             <div className={styles.tutor}>
               <div>{tutor}</div>
             </div>
-            <div>
+            <div className={styles.buttonGroup}>
               {isLive || isTeacher ? (
                 <Link
                   to={`/live/${lectureId}`}
@@ -41,6 +51,14 @@ export default function LectureHeader({ img, title, tutor, isLive = false }) {
                   <span>실시간 강의 입장하기</span>
                 </Link>
               ) : null}
+              {isTeacher && isLive && (
+                <button
+                  className={styles.closeButton}
+                  onClick={closeLiveRoom}
+                >
+                  강의실 닫기
+                </button>
+              )}
             </div>
           </div>
         </div>
diff --git a/frontend/src/components/LectureHeader/LectureHeader.module.css b/frontend/src/components/LectureHeader/LectureHeader.module.css
index e11daa2..11def4b 100644
--- a/frontend/src/components/LectureHeader/LectureHeader.module.css
+++ b/frontend/src/components/LectureHeader/LectureHeader.module.css
@@ -59,6 +59,31 @@
   align-items: center;
 }
 
+.buttonGroup {
+  display: flex;
+  gap: 8px;
+}
+
+.closeButton {
+  display: flex;
+  align-items: center;
+  padding: 12px 16px;
+  text-align: center;
+  font-size: 14px;
+  line-height: 1.4;
+  font-family: inherit;
+  font-weight: 700;
+  border-radius: 8px;
+  background-color: var(--background-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  color: var(--text-color-secondary);
+  font-size: 14px;
+  line-height: 1.2;
+  font-weight: 400;
+  cursor: pointer;
+}
+
 @keyframes glow {
   0% {
     box-shadow: 0 0 0 0 var(--error-color);
diff --git a/frontend/src/pages/LivePage/LivePage.jsx b/frontend/src/pages/LivePage/LivePage.jsx
index 52f2284..bda1e23 100644
--- a/frontend/src/pages/LivePage/LivePage.jsx
+++ b/frontend/src/pages/LivePage/LivePage.jsx
@@ -6,9 +6,12 @@ import instance from '../../utils/axios/instance';
 import { API_URL, ROOM_URL } from '../../constants';
 import '@livekit/components-styles';
 import LoadingIndicator from '../../components/LoadingIndicator.jsx/LoadingIndicator';
+import useBoundStore from '../../store';
 
 export default function LivePage() {
   const { roomId } = useParams();
+  const userType = useBoundStore((state) => state.userType);
+  const isTeacher = userType === 'teacher';
   const [liveToken, setLiveToken] = useState(null);
   const generateToken = useCallback(async () => {
     await instance.post(`${API_URL}/video/makeroom/${roomId}`).catch(() => {});
@@ -45,6 +48,14 @@ export default function LivePage() {
             }, 200);
           });
       }}
+      onConnected={() => {
+        if (!isTeacher) {
+          return;
+        }
+        setTimeout(() => {
+          instance.post(`${API_URL}/video/makeroom/${roomId}`).catch(() => {});
+        }, 500);
+      }}
     >
       <Suspense fallback={<LoadingIndicator fill />}>
         <LiveRoom />