feat: QuestionListPage 추가

frontend/src/pages/QuestionListPage/QuestionListPage.jsx

@@ -0,0 +1,78 @@
+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}
+      />
+      <div>
+        <MaxWidthLayout hasSideBar>
+          <aside className={styles.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.noticeDate}
+                      title={notice.title}
+                      noticeDate={notice.noticeDate}
+                    />
+                  );
+                }
+              })}
+            </div>
+          </main>
+        </MaxWidthLayout>
+      </div>
+    </>
+  );
+}

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

@@ -0,0 +1,33 @@
+/* .aside {
+  width: 100%;
+} */
+
+.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;
+  background: var(--background);
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  text-align: center;
+  cursor: pointer;
+}
+
+.buttonText {
+  font-size: 16px;
+  line-height: 1;
+  font-weight: 400px;
+}