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

feat: ArticlePreview 컴포넌트 제목 / 내용물 내려받도록 변경

Browse Source
This commit is contained in:
정기영 2024-07-22 10:51:28 +09:00
parent d1b2f31fe2
commit dd578da90a
3 changed files with 65 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
frontend/src/components/Article/ArticlePreview/ArticlePreview.jsx
View File

@ -1,18 +1,25 @@
import { Link } from 'react-router-dom';
import styles from './ArticlePreview.module.css';
export default function ArticlePreview() {
export default function ArticlePreview({ title, contents = [] }) {
// TODO: 아이콘 변경
return (
<div className={styles.wrapper}>
<div className={styles.header}>
<div className={styles.title}>공지사항</div>
<div className={styles.title}>{title}</div>
<Link to="/">ICON</Link>
</div>
<div className={styles.main}>
<div className={styles.content}>3주차 수업 휴강 공지</div>
<div className={styles.content}>정보처리기사 어쩌구</div>
<div className={styles.content}>첫 수업 준비사항</div>
{contents.map((content) => {
return (
<div
key={content.id}
className={styles.content}
>
{content.title}
</div>
);
})}
</div>
</div>
);

29
frontend/src/pages/LearningLectureDetailPage/LearningLectureDetailPage.jsx
View File

@ -1,11 +1,34 @@
import ArticlePreview from '../../components/Article/ArticlePreview/ArticlePreview';
export default function LearningLectureDetailPage() {
const { data: notices } = {
data: [
{ id: 1, title: '공지사항1', sub: '7-12 오전 11:40:57' },
{ id: 2, title: '공지사하앙2', sub: '7-12 오전 11:40:57' },
{ id: 3, title: '공지사하앙33', sub: '7-15 오전 11:40:57' },
{ id: 4, title: '제목만 있는 경우' },
],
};
const { data: questions } = {
data: [
{ id: 2, title: 'Question1', sub: '7-12 오전 11:40:57' },
{ id: 3, title: 'Question2', sub: '7-12 오전 11:40:57' },
{ id: 4, title: '헷갈리는게 있어요', sub: '7-15 오전 11:40:57' },
{ id: 5, title: '궁금궁금', sub: '7-15 오전 11:40:57' },
],
};
return (
<>
<ArticlePreview />
<ArticlePreview />
<ArticlePreview />
<ArticlePreview
title="공지사항"
contents={notices}
/>
<ArticlePreview
title="Q&A"
contents={questions}
/>
<ArticlePreview title="커리큘럼" />
</>
);
}

35
frontend/src/pages/TeacherLectureDetailPage/TeacherLectureDetailPage.jsx
View File

@ -2,17 +2,36 @@ import ArticlePreview from '../../components/Article/ArticlePreview/ArticlePrevi
import styles from './TeacherLectureDetailPage.module.css';
export default function TeacherLectureDetailPage() {
// const { data : articleBoards } = {
// data : [
// {}
// ]
// }
const { data: notices } = {
data: [
{ id: 1, title: '공지사항1', sub: '7-12 오전 11:40:57' },
{ id: 2, title: '공지사하앙2', sub: '7-12 오전 11:40:57' },
{ id: 3, title: '공지사하앙33', sub: '7-15 오전 11:40:57' },
{ id: 4, title: '제목만 있는 경우' },
],
};
const { data: questions } = {
data: [
{ id: 2, title: 'Question1', sub: '7-12 오전 11:40:57' },
{ id: 3, title: 'Question2', sub: '7-12 오전 11:40:57' },
{ id: 4, title: '헷갈리는게 있어요', sub: '7-15 오전 11:40:57' },
{ id: 5, title: '궁금궁금', sub: '7-15 오전 11:40:57' },
],
};
return (
<main className={styles.previews}>
{/* FIXME: 밑에 ArticlePreview 바꿔야함. 공지사항 Q&A 커리큘럼 으로 나눠서 작성할 수 있게 바꾸고 링크 상위 3개만 받고 링크 줄 수 있게 할지 말지. 이거 바꾸면 LearningLectureDetailPage도 똑같이 바꾸면 될듯*/}
<ArticlePreview />
<ArticlePreview />
<ArticlePreview />
<ArticlePreview
title="공지사항"
contents={notices}
/>
<ArticlePreview
title="Q&A"
contents={questions}
/>
<ArticlePreview title="커리큘럼" />
</main>
);
}