From dd578da90a27a53350b29d49416eb2db684a1072 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A0=95=EA=B8=B0=EC=98=81?= <wjdrldud98@gmail.com>
Date: Mon, 22 Jul 2024 10:51:28 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20ArticlePreview=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=A0=9C=EB=AA=A9=20/=20=EB=82=B4?=
 =?UTF-8?q?=EC=9A=A9=EB=AC=BC=20=EB=82=B4=EB=A0=A4=EB=B0=9B=EB=8F=84?=
 =?UTF-8?q?=EB=A1=9D=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Article/ArticlePreview/ArticlePreview.jsx | 17 ++++++---
 .../LearningLectureDetailPage.jsx             | 29 +++++++++++++--
 .../TeacherLectureDetailPage.jsx              | 35 ++++++++++++++-----
 3 files changed, 65 insertions(+), 16 deletions(-)

diff --git a/frontend/src/components/Article/ArticlePreview/ArticlePreview.jsx b/frontend/src/components/Article/ArticlePreview/ArticlePreview.jsx
index 42e843b..cb23844 100644
--- a/frontend/src/components/Article/ArticlePreview/ArticlePreview.jsx
+++ b/frontend/src/components/Article/ArticlePreview/ArticlePreview.jsx
@@ -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>
   );
diff --git a/frontend/src/pages/LearningLectureDetailPage/LearningLectureDetailPage.jsx b/frontend/src/pages/LearningLectureDetailPage/LearningLectureDetailPage.jsx
index 04825a0..c34dbc9 100644
--- a/frontend/src/pages/LearningLectureDetailPage/LearningLectureDetailPage.jsx
+++ b/frontend/src/pages/LearningLectureDetailPage/LearningLectureDetailPage.jsx
@@ -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="커리큘럼" />
     </>
   );
 }
diff --git a/frontend/src/pages/TeacherLectureDetailPage/TeacherLectureDetailPage.jsx b/frontend/src/pages/TeacherLectureDetailPage/TeacherLectureDetailPage.jsx
index 5cf6568..ed050d3 100644
--- a/frontend/src/pages/TeacherLectureDetailPage/TeacherLectureDetailPage.jsx
+++ b/frontend/src/pages/TeacherLectureDetailPage/TeacherLectureDetailPage.jsx
@@ -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>
   );
 }