feat: 라이브 페이지 ux 개선
This commit is contained in:
parent
16a0c8740d
commit
4448a1114c
@ -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'));
|
||||
|
@ -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}>
|
||||
|
@ -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';
|
||||
|
@ -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>
|
||||
|
@ -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);
|
||||
}
|
||||
|
||||
|
@ -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 />
|
||||
|
Loading…
Reference in New Issue
Block a user