Merge pull request #28 from TeamBNBN/fe/NoticeListPage

[Front-End] feat: Fe/NoticeListPage 추가

frontend/src/components/ArticleBoard/ArticleBoard.jsx

@@ -1,19 +1,28 @@
-import { ArticleLink } from '../ArticleLink';
+import { useNavigate } from 'react-router-dom';
 import styles from './ArticleBoard.module.css';
 
-export default function ArticleBoard() {
+export default function ArticleBoard({ title, canCreate, createArticlePath, children }) {
+  const navigate = useNavigate();
+  const createArticle = () => {
+    navigate(createArticlePath);
+  };
+  // TODO : ㅁ 을 글쓰기 아이콘으로 변경
   return (
     <div className={styles.articleBoard}>
-      <div className={styles.title}>공지사항</div>
+      <div className={styles.header}>
-      <div className={styles.article}>
+        <div className={styles.title}>{title}</div>
-        <ArticleLink />
+        {canCreate && (
-        <ArticleLink />
+          <button
-        <ArticleLink />
+            type="button"
-        <ArticleLink />
+            className={styles.button}
-        <ArticleLink />
+            onClick={createArticle}
-        <ArticleLink />
+          >
-        <ArticleLink />
+            <div>ㅁ</div>
+            <div className={styles.buttonText}>글쓰기</div>
+          </button>
+        )}
       </div>
+      <div className={styles.article}>{children}</div>
     </div>
   );
 }

frontend/src/components/ArticleBoard/ArticleBoard.module.css

@@ -1,20 +1,44 @@
 .articleBoard {
-  width: 920px;
+  width: 100%;
   display: flex;
   flex-direction: column;
   gap: 24px;
   align-items: flex-start;
+  background-color: var(--background);
+}
+
+.header {
+  width: 100%;
+  box-sizing: border-box;
+  padding-left: 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }
 
 .title {
-  width: 820px;
-  box-sizing: border-box;
-  padding: 0 20px;
   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;
+}
+
 .article {
   display: flex;
   flex-direction: column;

frontend/src/pages/NoticeListPage/NoticeListPage.jsx

@@ -0,0 +1,69 @@
+import LectureHeader from '../../components/LectureHeader/LectureHeader';
+import { SideBar, SideLink, SideItem } from '../../components/SideBar';
+import { ArticleLink } from '../../components/ArticleLink';
+import { MaxWidthLayout } from '../../components/Layout';
+import ArticleBoard from '../../components/ArticleBoard/ArticleBoard';
+
+export default function NoticeListPage() {
+  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>
+          <ArticleBoard
+            title="공지사항"
+            canCreate={true}
+          >
+            {notices.map((notice) => {
+              if (notice.noticeDate && notice.title) {
+                return (
+                  <ArticleLink
+                    key={`${notice.title}${notice.noticeDate}`}
+                    title={notice.title}
+                    noticeDate={notice.noticeDate}
+                  />
+                );
+              }
+            })}
+          </ArticleBoard>
+        </main>
+      </MaxWidthLayout>
+    </>
+  );
+}

frontend/src/pages/QuestionListPage/QuestionListPage.jsx

@@ -1,16 +1,16 @@
-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';
+import ArticleBoard from '../../components/ArticleBoard/ArticleBoard';
 
 export default function QuestionListPage() {
   const notices = [
     {},
-    { title: '공지사항1', noticeDate: '7-12 오전 11:40:57' },
+    { title: 'Question1', noticeDate: '7-12 오전 11:40:57' },
-    { title: '공지사하앙2', noticeDate: '7-12 오전 11:40:57' },
+    { title: 'Question2', noticeDate: '7-12 오전 11:40:57' },
-    { title: '공지사하앙33', noticeDate: '7-15 오전 11:40:57' },
+    { title: '헷갈리는게 있어요', noticeDate: '7-15 오전 11:40:57' },
-    { title: '제목만 있는 경우' },
+    { title: '궁금궁금', noticeDate: '7-15 오전 11:40:57' },
     { noticeDate: '날짜만 있는 경우' },
   ];
 
@@ -46,17 +46,11 @@ export default function QuestionListPage() {
           </SideBar>
         </aside>
         <main>
-          <div className={styles.title}>
+          <ArticleBoard
-            <div className={styles.titleText}>Q&A</div>
+            title="Q&A"
-            <button
+            canCreate={true}
-              type="button"
+            createPath="/"
-              className={styles.button}
+          >
-            >
-              <div>ㅁ</div>
-              <div className={styles.buttonText}>글쓰기</div>
-            </button>
-          </div>
-          <div>
             {notices.map((notice) => {
               if (notice.noticeDate && notice.title) {
                 return (
@@ -68,7 +62,7 @@ export default function QuestionListPage() {
                 );
               }
             })}
-          </div>
+          </ArticleBoard>
         </main>
       </MaxWidthLayout>
     </>

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

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