jhynsoo/edufocus
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: StudentListPage Layout에 맞춰 수정, LectureLayout 강사 / 학생 여부에 따라 사이드바 변화 추가

Browse Source
This commit is contained in:
정기영 2024-07-24 13:32:46 +09:00
parent 19f9a479d1
commit 42761ea97f
3 changed files with 54 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
frontend/src/components/Layout/LectureLayout.jsx
View File

@ -1,16 +1,21 @@
import { Outlet } from 'react-router-dom';
import LectureHeader from '../LectureHeader/LectureHeader';
import { SideBar, SideLink } from '../SideBar';
import { SideBar, SideLink, SideItem } from '../SideBar';
import MaxWidthLayout from './MaxWidthLayout';
import { Suspense } from 'react';
import useBoundStore from '../../store';
export default function LectureLayout() {
const lecture = {
title: '정보처리기사 실기 완전정복',
tutor: '박정민',
isLive: true,
const { data: lecture } = {
data: {
title: '정보처리기사 실기 완전정복',
tutor: '박정민',
isLive: true,
},
};
const userType = useBoundStore((state) => state.userType);
return (
<>
<LectureHeader
@ -32,6 +37,26 @@ export default function LectureLayout() {
<SideLink to={'file'}>수업자료</SideLink>
<SideLink to={'quiz'}>퀴즈</SideLink>
</SideBar>
{userType === 'teacher' && (
<SideBar title="수업 정보">
<SideItem
name="수강생"
sub="총 12명"
/>
</SideBar>
)}
{userType === 'student' && (
<SideBar title="내 학습">
<SideItem
name="진도율"
sub="2 / 12"
/>
<SideItem
name="퀴즈 정답률"
sub="80%"
/>
</SideBar>
)}
</aside>
<main>
<Suspense fallback={<div>loading</div>}>

6
frontend/src/components/SideBar/SideItem.module.css
View File

@ -4,13 +4,13 @@
width: 100%;
text-decoration: none;
color: var(--text-color);
font-size: 20px;
line-height: 1.2;
font-size: 16px;
line-height: 1.4;
font-weight: 400;
}
.sub {
color: var(--text-color-secondary);
font-size: 16px;
font-size: 14px;
line-height: 1.4;
}

72
frontend/src/pages/StudentListPage/StudentListPage.jsx
View File

@ -1,59 +1,29 @@
import LectureHeader from '../../components/LectureHeader/LectureHeader';
import { SideBar, SideLink, SideItem } from '../../components/SideBar';
import { ArticleLink } from '../../components/ArticleLink';
import { MaxWidthLayout } from '../../components/Layout';
import ArticleBoard from '../../components/ArticleBoard/ArticleBoard';
export default function StudentListPage() {
const students = [
{ name: '학생1', quizScore: 40 },
{ name: '학생2', quizScore: 40 },
{ name: '학생3', quizScore: 40 },
{ name: '학생4', quizScore: 40 },
{ name: '이재용', quizScore: 80 },
];
const lecture = {
title: '정보처리기사 실기 완전정복',
tutor: '박정민',
isLive: true,
const { data: students } = {
data: [
{ id: 1, name: '학생1', quizScore: 40 },
{ id: 2, name: '학생2', quizScore: 40 },
{ id: 3, name: '학생3', quizScore: 40 },
{ id: 4, name: '학생4', quizScore: 40 },
{ id: 5, name: '이재용', quizScore: 80 },
],
};
return (
<>
<LectureHeader
title={lecture.title}
tutor={lecture.tutor}
isLive={lecture.isLive}
/>
<MaxWidthLayout hasSideBar>
<aside>
<SideBar title="바로가기">
<SideLink path={'/'}>공지사항</SideLink>
<SideLink path={'/'}>Q&A</SideLink>
<SideLink path={'/'}>수업자료</SideLink>
<SideLink path={'/'}>퀴즈</SideLink>
</SideBar>
<SideBar title="수업 정보">
<SideItem
name="수강생"
sub="총 12명"
/>
</SideBar>
</aside>
<main>
<ArticleBoard title="수강생 관리">
{students.map((student) => {
return (
<ArticleLink
key={`${student.name}${student.sub}`}
title={student.name}
sub={`퀴즈 점수: ${student.quizScore}`}
/>
);
})}
</ArticleBoard>
</main>
</MaxWidthLayout>
</>
<ArticleBoard title="수강생 관리">
{students.map((student) => {
return (
<ArticleLink
key={`${student.name}${student.sub}`}
title={student.name}
sub={`퀴즈 점수: ${student.quizScore}`}
to={`${student.id}`}
/>
);
})}
</ArticleBoard>
);
}