Merge branch 'fe/liveUX' into 'frontend'

feat: 라이브 페이지 ux 개선

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

frontend/src/Router.jsx

@@ -7,8 +7,8 @@ import { lazy } from 'react';
 import MyPageLayout from './components/Layout/MyPageLayout';
 import LivePage from './pages/LivePage';
 import ErrorPage from './pages/ErrorPage';
+import { LectureLayout } from './components/Layout';
 
-const LectureLayout = lazy(async () => await import('./components/Layout/LectureLayout'));
 const LearningLectureDetailPage = lazy(async () => await import('./pages/LearningLectureDetailPage'));
 const NoticeListPage = lazy(async () => await import('./pages/NoticeListPage'));
 const NoticeDetailPage = lazy(async () => await import('./pages/NoticeDetailPage'));

frontend/src/components/Header/Header.jsx

@@ -33,7 +33,12 @@ export default function Header() {
             <Link to={'/'}>수강중인 강의</Link>
           </li>
           <li>
-            <Link to={'/live/1'}>live</Link>
+            <Link
+              to={'/live/1'}
+              target="_blank"
+            >
+              live
+            </Link>
           </li>
         </ul>
         <ul className={styles.group}>

frontend/src/components/Layout/index.js

@@ -1,3 +1,4 @@
 export { default as PageLayout } from './PageLayout';
 export { default as MaxWidthLayout } from './MaxWidthLayout';
 export { default as LiveLayout } from './LiveLayout';
+export { default as LectureLayout } from './LectureLayout';

frontend/src/components/LectureHeader/LectureHeader.jsx

@@ -1,35 +1,54 @@
+import { Link, useParams } from 'react-router-dom';
 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 UserIcon from '/src/assets/icons/user.svg?react';
 
 export default function LectureHeader({ img, title, tutorImg, tutor, isLive = false }) {
+  const { lectureId } = useParams();
+
   return (
     <div className={styles.wrapper}>
       <header className={styles.header}>
-        <img
-          src={img}
-          alt="강의 이미지"
-          className={styles.thumbnail}
-        />
+        {img ? (
+          <img
+            src={img}
+            alt="강의 이미지"
+            className={styles.thumbnail}
+          />
+        ) : (
+          <div className={styles.thumbnail}>
+            <CompassIcon />
+          </div>
+        )}
         <div className={styles.info}>
           <h1 className={styles.title}>{title}</h1>
           <div className={styles.desc}>
             <div className={styles.tutor}>
-              <img
-                src={tutorImg}
-                alt="강사 사진"
-                className={styles.tutorImg}
-              />
+              {tutorImg ? (
+                <img
+                  src={tutorImg}
+                  alt="강사 사진"
+                  className={styles.tutorImg}
+                />
+              ) : (
+                <div className={styles.tutorImg}>
+                  <UserIcon />
+                </div>
+              )}
               <div>{tutor}</div>
             </div>
             <div>
               {isLive ? (
-                <button
+                <Link
+                  to={`/live/${lectureId}`}
+                  target="_blank"
                   type="button"
                   className={styles.liveButton}
                 >
                   <PlayIcon />
                   <span>실시간 강의 입장하기</span>
-                </button>
+                </Link>
               ) : null}
             </div>
           </div>

frontend/src/components/LectureHeader/LectureHeader.module.css

@@ -20,9 +20,13 @@
 
 .thumbnail {
   flex-shrink: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   width: 120px;
   height: 120px;
   border-radius: 16px;
+  stroke: var(--text-color);
   border: 1px solid var(--border-color);
 }
 
@@ -53,9 +57,13 @@
 }
 
 .tutorImg {
+  display: flex;
+  justify-content: center;
+  align-items: center;
   width: 48px;
   height: 48px;
   border-radius: 50%;
+  stroke: var(--text-color-secondary);
   border: 1px solid var(--border-color);
 }
 

frontend/src/pages/LivePage/LivePage.jsx

@@ -11,9 +11,10 @@ export default function LivePage() {
   const { roomId } = useParams();
   const [liveToken, setLiveToken] = useState(null);
   const generateToken = useCallback(async () => {
-    await instance.post(`${API_URL}/video/makeroom/${roomId}`);
+    await instance.post(`${API_URL}/video/makeroom/${roomId}`).catch(() => {});
     const { data } = await instance.post(`${API_URL}/video/joinroom/${roomId}`).catch(() => {
       alert('방에 입장할 수 없습니다.');
+      window.close();
     });
 
     return data.token;
@@ -33,6 +34,7 @@ export default function LivePage() {
       data-lk-theme="default"
       onDisconnected={() => {
         instance.post(`${API_URL}/video/deleteroom/${roomId}`).catch(() => {});
+        window.close();
       }}
     >
       <LiveRoom />