Merge branch 'fe/liveCloseButton' into 'frontend'

[Front-End] feat: 강의실 닫기 버튼 추가

See merge request s11-webmobile1-sub2/S11P12A701!197

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>

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>

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

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 />