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

Merge pull request #28 from TeamBNBN/fe/NoticeListPage

Browse Source 
[Front-End] feat: Fe/NoticeListPage 추가
This commit is contained in:
Jo Hyeonsoo 2024-07-17 16:34:01 +09:00 committed by GitHub
commit 4d878a6dc7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 128 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
frontend/src/components/ArticleBoard/ArticleBoard.jsx
View File

@ -1,19 +1,28 @@
import { ArticleLink } from '../ArticleLink';
import { useNavigate } from 'react-router-dom';
import styles from './ArticleBoard.module.css';
export default function ArticleBoard() {
export default function ArticleBoard({ title, canCreate, createArticlePath, children }) {
const navigate = useNavigate();
const createArticle = () => {
navigate(createArticlePath);
};
// TODO : ㅁ 을 글쓰기 아이콘으로 변경
return (
<div className={styles.articleBoard}>
<div className={styles.title}>공지사항</div>
<div className={styles.article}>
<ArticleLink />
<ArticleLink />
<ArticleLink />
<ArticleLink />
<ArticleLink />
<ArticleLink />
<ArticleLink />
<div className={styles.header}>
<div className={styles.title}>{title}</div>
{canCreate && (
<button
type="button"
className={styles.button}
onClick={createArticle}
>
<div>ㅁ</div>
<div className={styles.buttonText}>글쓰기</div>
</button>
)}
</div>
<div className={styles.article}>{children}</div>
</div>
);
}

32
frontend/src/components/ArticleBoard/ArticleBoard.module.css
View File

@ -1,20 +1,44 @@
.articleBoard {
width: 920px;
width: 100%;
display: flex;
flex-direction: column;
gap: 24px;
align-items: flex-start;
background-color: var(--background);
}
.header {
width: 100%;
box-sizing: border-box;
padding-left: 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.title {
width: 820px;
box-sizing: border-box;
padding: 0 20px;
font-size: 32px;
line-height: 1.2;
font-weight: 900;
}
.button {
display: flex;
gap: 8px;
padding: 12px 16px;
background: var(--background);
border: 1px solid var(--border-color);
border-radius: 8px;
cursor: pointer;
}
.buttonText {
font-family: inherit;
font-size: 16px;
line-height: 1.4;
font-weight: 700;
}
.article {
display: flex;
flex-direction: column;

69
frontend/src/pages/NoticeListPage/NoticeListPage.jsx Normal file
View File

@ -0,0 +1,69 @@
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 NoticeListPage() {
const notices = [
{},
{ title: '공지사항1', noticeDate: '7-12 오전 11:40:57' },
{ title: '공지사하앙2', noticeDate: '7-12 오전 11:40:57' },
{ title: '공지사하앙33', noticeDate: '7-15 오전 11:40:57' },
{ title: '제목만 있는 경우' },
{ noticeDate: '날짜만 있는 경우' },
];
const lecture = {
title: '정보처리기사 실기 완전정복',
tutor: '박정민',
isLive: true,
};
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="2 / 12"
/>
<SideItem
name="퀴즈 정답률"
sub="80%"
/>
</SideBar>
</aside>
<main>
<ArticleBoard
title="공지사항"
canCreate={true}
>
{notices.map((notice) => {
if (notice.noticeDate && notice.title) {
return (
<ArticleLink
key={`${notice.title}${notice.noticeDate}`}
title={notice.title}
noticeDate={notice.noticeDate}
/>
);
}
})}
</ArticleBoard>
</main>
</MaxWidthLayout>
</>
);
}

28
frontend/src/pages/QuestionListPage/QuestionListPage.jsx
View File

@ -1,16 +1,16 @@
import styles from './QuestionListPage.module.css';
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 QuestionListPage() {
const notices = [
{},
{ title: '공지사항1', noticeDate: '7-12 오전 11:40:57' },
{ title: '공지사하앙2', noticeDate: '7-12 오전 11:40:57' },
{ title: '공지사하앙33', noticeDate: '7-15 오전 11:40:57' },
{ title: '제목만 있는 경우' },
{ title: 'Question1', noticeDate: '7-12 오전 11:40:57' },
{ title: 'Question2', noticeDate: '7-12 오전 11:40:57' },
{ title: '헷갈리는게 있어요', noticeDate: '7-15 오전 11:40:57' },
{ title: '궁금궁금', noticeDate: '7-15 오전 11:40:57' },
{ noticeDate: '날짜만 있는 경우' },
];
@ -46,17 +46,11 @@ export default function QuestionListPage() {
</SideBar>
</aside>
<main>
<div className={styles.title}>
<div className={styles.titleText}>Q&A</div>
<button
type="button"
className={styles.button}
>
<div>ㅁ</div>
<div className={styles.buttonText}>글쓰기</div>
</button>
</div>
<div>
<ArticleBoard
title="Q&A"
canCreate={true}
createPath="/"
>
{notices.map((notice) => {
if (notice.noticeDate && notice.title) {
return (
@ -68,7 +62,7 @@ export default function QuestionListPage() {
);
}
})}
</div>
</ArticleBoard>
</main>
</MaxWidthLayout>
</>

29
frontend/src/pages/QuestionListPage/QuestionListPage.module.css
View File

@ -1,29 +0,0 @@
.title {
display: flex;
padding-left: 20px;
justify-content: space-between;
margin-bottom: 24px;
}
.titleText {
font-size: 32px;
line-height: 1.2;
font-weight: 900;
}
.button {
display: flex;
gap: 8px;
padding: 12px 16px;
background: var(--background);
border: 1px solid var(--border-color);
border-radius: 8px;
cursor: pointer;
}
.buttonText {
font-family: inherit;
font-size: 16px;
line-height: 1.4;
font-weight: 700;
}