Merge branch 'fe/liveCloseButton' into 'frontend'
[Front-End] feat: 강의실 닫기 버튼 추가 See merge request s11-webmobile1-sub2/S11P12A701!197
This commit is contained in:
commit
a49a372bed
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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);
|
||||
|
@ -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 />
|
||||
|
Loading…
Reference in New Issue
Block a user