Merge pull request #27 from TeamBNBN/fe/QuestionListPage

[Front-End] Fe/QuestionListPage 추가

frontend/src/components/ArticleLink/ArticleLink.jsx

@@ -1,10 +1,14 @@
+import { Link } from 'react-router-dom';
 import styles from './ArticleLink.module.css';
 
-export default function ArticleLink() {
+export default function ArticleLink({ path, title, noticeDate }) {
   return (
-    <div className={styles.articleLink}>
+    <Link
-      <span className={styles.note}>공지사항</span>
+      to={path}
-      <span className={styles.date}>07-12 14:34</span>
+      className={styles.articleLink}
-    </div>
+    >
+      <span className={styles.note}>{title}</span>
+      <span className={styles.date}>{noticeDate}</span>
+    </Link>
   );
 }

frontend/src/pages/QuestionListPage/QuestionListPage.jsx

@@ -0,0 +1,76 @@
+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';
+
+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: '제목만 있는 경우' },
+    { 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>
+          <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>
+            {notices.map((notice) => {
+              if (notice.noticeDate && notice.title) {
+                return (
+                  <ArticleLink
+                    key={`${notice.title}${notice.noticeDate}`}
+                    title={notice.title}
+                    noticeDate={notice.noticeDate}
+                  />
+                );
+              }
+            })}
+          </div>
+        </main>
+      </MaxWidthLayout>
+    </>
+  );
+}

frontend/src/pages/QuestionListPage/QuestionListPage.module.css

@@ -0,0 +1,29 @@
+.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;
+}