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

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>
+        {contents.map((content) => {
-        <div className={styles.content}>정보처리기사 어쩌구</div>
+          return (
-        <div className={styles.content}>첫 수업 준비사항</div>
+            <div
+              key={content.id}
+              className={styles.content}
+            >
+              {content.title}
+            </div>
+          );
+        })}
       </div>
     </div>
   );

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 />
+        title="공지사항"
-      <ArticlePreview />
+        contents={notices}
+      />
+      <ArticlePreview
+        title="Q&A"
+        contents={questions}
+      />
+      <ArticlePreview title="커리큘럼" />
     </>
   );
 }

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 } = {
+  const { data: notices } = {
-  //   data : [
+    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 />
+        title="공지사항"
-      <ArticlePreview />
+        contents={notices}
+      />
+      <ArticlePreview
+        title="Q&A"
+        contents={questions}
+      />
+      <ArticlePreview title="커리큘럼" />
     </main>
   );
 }