Merge pull request #75 from TeamBNBN/FE/fix-datas

[Front-End] fix: Fe/fix datas
2024-07-22 12:44:20 +09:00 · 2024-07-22 12:44:20 +09:00 · dca2922368
commit dca2922368
parent 59dcf3c303 06c46fbf76
11 changed files with 186 additions and 171 deletions
--- 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>
  );
--- a/frontend/src/hooks/api/useNotices.js
+++ b/frontend/src/hooks/api/useNotices.js
@ -0,0 +1,13 @@
+import { useQuery } from '@tanstack/react-query';
+import instance from '../../utils/axios/instance';
+import { API_URL } from '../../constants';
+
+export function useNotices(lectureId) {
+  // TODO: API url 업데이트
+  const response = useQuery({
+    queryKey: ['noticelist', lectureId],
+    queryFn: instance.get(`${API_URL}/notice/${lectureId}`),
+  });
+
+  return response;
+}
--- 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="커리큘럼" />
    </>
  );
 }
--- a/frontend/src/pages/LectureInfoPage/LectureInfoPage.jsx
+++ b/frontend/src/pages/LectureInfoPage/LectureInfoPage.jsx
@ -4,28 +4,30 @@ import { MaxWidthLayout } from '../../components/Layout';
 import LectureHeader from '../../components/LectureHeader/LectureHeader';

 export default function LectureInfoPage() {
-  const lectureData = {
-    title: '정보처리기사 실기 완전정복',
-    img: '',
-    tutor: '이재용',
-    tutorImg: '',
-    term: '2021.07.01 ~ 2021.12.31',
-    time: '매주 화, 목 19:00 ~ 21:00',
-    description: [
-      {
-        title: '수업소개',
-        content: '이 코스는 정보처리기사 실기에 대한 완전정복을 목표로 합니다.',
-      },
-      {
-        title: '커리큘럼',
-        content:
-          '1. 데이터베이스\n2. 소프트웨어 공학\n3. 운영체제\n4. 네트워크\n5. 데이터통신\n6. 전자계산기\n7. 알고리즘\n8. 프로그래밍 언어\n9. 시스템 소프트웨어\n10. 정보시스템 개발 관리',
-      },
-      {
-        title: '이런 사람이 들으면 좋아요',
-        content: '정보처리기사 실기에 관심이 많은 사람',
-      },
-    ],
+  const { data: lectureData } = {
+    data: {
+      title: '정보처리기사 실기 완전정복',
+      img: '',
+      tutor: '이재용',
+      tutorImg: '',
+      term: '2021.07.01 ~ 2021.12.31',
+      time: '매주 화, 목 19:00 ~ 21:00',
+      description: [
+        {
+          title: '수업소개',
+          content: '이 코스는 정보처리기사 실기에 대한 완전정복을 목표로 합니다.',
+        },
+        {
+          title: '커리큘럼',
+          content:
+            '1. 데이터베이스\n2. 소프트웨어 공학\n3. 운영체제\n4. 네트워크\n5. 데이터통신\n6. 전자계산기\n7. 알고리즘\n8. 프로그래밍 언어\n9. 시스템 소프트웨어\n10. 정보시스템 개발 관리',
+        },
+        {
+          title: '이런 사람이 들으면 좋아요',
+          content: '정보처리기사 실기에 관심이 많은 사람',
+        },
+      ],
+    },
  };

  return (
--- a/frontend/src/pages/NoticeDetailPage/NoticeDetailPage.jsx
+++ b/frontend/src/pages/NoticeDetailPage/NoticeDetailPage.jsx
@ -1,15 +1,21 @@
 import { ArticleDetail } from '../../components/Article';

 export default function NoticeDetailPage() {
-  const title = '2주차 공지사항';
-  const content =
-    '이런저런 꿀팁 공부를 열심히 하는 사람을 떨어지지 않는다.' +
-    '동해 물과 백두산이 마르고 닳도록 하느님이 보우하사 우리 나라 만세. 무궁화 삼천리 화려강산 대한 사람 대한으로 길이 보전하세. 줄이 길어지면 다음 줄로 자동 줄바꿈 된다';
+  const { data } = {
+    data: {
+      title: '2주차 공지사항',
+      content:
+        '이런저런 꿀팁 공부를 열심히 하는 사람을 떨어지지 않는다.' +
+        '동해 물과 백두산이 마르고 닳도록 하느님이 보우하사 우리 나라 만세. 무궁화 삼천리 화려강산 대한 사람 대한으로 길이 보전하세. 줄이 길어지면 다음 줄로 자동 줄바꿈 된다',
+    },
+  };
+  console.log(data);
+
  return (
    <ArticleDetail
      topic="공지사항"
-      title={title}
-      content={content}
+      title={data.title}
+      content={data.content}
    />
  );
 }
--- a/frontend/src/pages/NoticeListPage/NoticeListPage.jsx
+++ b/frontend/src/pages/NoticeListPage/NoticeListPage.jsx
@ -2,17 +2,19 @@ import { ArticleLink } from '../../components/ArticleLink';
 import ArticleBoard from '../../components/ArticleBoard/ArticleBoard';

 export default function NoticeListPage() {
-  const notices = [
-    { 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: 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: '제목만 있는 경우' },
+    ],
+  };

  return (
    <ArticleBoard
      title="공지사항"
-      canCreate={true}
+      canCreate={false}
    >
      {notices.map((notice) => (
        <ArticleLink
--- a/frontend/src/pages/QuestionDetailPage/QuestionDetailPage.jsx
+++ b/frontend/src/pages/QuestionDetailPage/QuestionDetailPage.jsx
@ -1,18 +1,22 @@
 import { ArticleDetail } from '../../components/Article';

 export default function QuestionDetailPage() {
-  const title = '헷갈리는게 있어요';
-  const author = '이재용';
-  const content = 'Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perferendis sed dolorem vitae?';
-  const answer = { answerId: '144632619Ux15326', content: '우리 재용이는 참 예의가 없구나' };
+  const { data } = {
+    data: {
+      title: '헷갈리는게 있어요',
+      author: '이재용',
+      content: 'Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perferendis sed dolorem vitae?',
+      answer: { answerId: '144632619Ux15326', content: '우리 재용이는 참 예의가 없구나' },
+    },
+  };

  return (
    <ArticleDetail
      topic="Q&A"
-      title={title}
-      author={author}
-      content={content}
-      answer={answer.content}
+      title={data.title}
+      author={data.author}
+      content={data.content}
+      answer={data.answer.content}
    />
  );
 }
--- a/frontend/src/pages/QuestionListPage/QuestionListPage.jsx
+++ b/frontend/src/pages/QuestionListPage/QuestionListPage.jsx
@ -2,12 +2,14 @@ import { ArticleLink } from '../../components/ArticleLink';
 import ArticleBoard from '../../components/ArticleBoard/ArticleBoard';

 export default function QuestionListPage() {
-  const questions = [
-    { 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' },
-  ];
+  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 (
    <ArticleBoard
--- a/frontend/src/pages/StudentHomePage/StudentHomePage.jsx
+++ b/frontend/src/pages/StudentHomePage/StudentHomePage.jsx
@ -3,20 +3,25 @@ import { ClassGrid } from '../../components/ClassGrid';
 import { MaxWidthLayout } from '../../components/Layout';

 export default function StudentHomePage() {
-  const onGoingClasses = [
-    { lecture_id: 1, title: '한국어' },
-    { lecture_id: 2, title: '영어' },
-    { lecture_id: 3, title: '일본어' },
-  ];
+  const { data: onGoingClasses } = {
+    data: [
+      { lecture_id: 1, title: '한국어' },
+      { lecture_id: 2, title: '영어' },
+      { lecture_id: 3, title: '일본어' },
+    ],
+  };
+
+  const { data: allClasses } = {
+    data: [
+      { lecture_id: 1, title: '한국어' },
+      { lecture_id: 2, title: '영어' },
+      { lecture_id: 3, title: '일본어' },
+      { lecture_id: 4, title: '중국어' },
+      { lecture_id: 5, title: '프랑스어' },
+      { lecture_id: 6, title: '스페인어' },
+    ],
+  };

-  const allClasses = [
-    { lecture_id: 1, title: '한국어' },
-    { lecture_id: 2, title: '영어' },
-    { lecture_id: 3, title: '일본어' },
-    { lecture_id: 4, title: '중국어' },
-    { lecture_id: 5, title: '프랑스어' },
-    { lecture_id: 6, title: '스페인어' },
-  ];
  return (
    <MaxWidthLayout>
      <ClassGrid title="수강중인 강의">
--- a/frontend/src/pages/TeacherLectureDetailPage/TeacherLectureDetailPage.jsx
+++ b/frontend/src/pages/TeacherLectureDetailPage/TeacherLectureDetailPage.jsx
@ -1,49 +1,37 @@
-import LectureHeader from '../../components/LectureHeader/LectureHeader';
-import { SideBar, SideLink, SideItem } from '../../components/SideBar';
-import { MaxWidthLayout } from '../../components/Layout';
 import ArticlePreview from '../../components/Article/ArticlePreview/ArticlePreview';
 import styles from './TeacherLectureDetailPage.module.css';

 export default function TeacherLectureDetailPage() {
-  const lecture = {
-    title: '정보처리기사 실기 완전정복',
-    tutor: '박정민',
-    isLive: true,
+  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: '제목만 있는 경우' },
+    ],
  };
-  return (
-    <>
-      <LectureHeader
-        title={lecture.title}
-        tutor={lecture.tutor}
-        isLive={lecture.isLive}
-      />
-      <MaxWidthLayout hasSideBar>
-        <aside>
-          <SideBar title="바로가기">
-            <SideLink to={'/'}>공지사항</SideLink>
-            <SideLink to={'/'}>Q&A</SideLink>
-            <SideLink to={'/'}>수업자료</SideLink>
-            <SideLink to={'/'}>퀴즈</SideLink>
-          </SideBar>

-          <SideBar title="내 강의">
-            <SideItem
-              name={'강의 진도'}
-              sub={'2 / 12'}
-            />
-            <SideItem
-              name={'퀴즈 정답률'}
-              sub={'80%'}
-            />
-          </SideBar>
-        </aside>
-        {/* FIXME: 밑에 ArticlePreview 바꿔야함. 공지사항 Q&A 커리큘럼 으로 나눠서 작성할 수 있게 바꾸고 링크 상위 3개만 받고 링크 줄 수 있게 할지 말지. 이거 바꾸면 LearningLectureDetailPage도 똑같이 바꾸면 될듯*/}
-        <main className={styles.previews}>
-          <ArticlePreview />
-          <ArticlePreview />
-          <ArticlePreview />
-        </main>
-      </MaxWidthLayout>
-    </>
+  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
+        title="공지사항"
+        contents={notices}
+      />
+      <ArticlePreview
+        title="Q&A"
+        contents={questions}
+      />
+      <ArticlePreview title="커리큘럼" />
+    </main>
  );
 }
--- a/frontend/src/pages/TeacherNoticeListPage/TeacherNoticeListPage.jsx
+++ b/frontend/src/pages/TeacherNoticeListPage/TeacherNoticeListPage.jsx
@ -1,69 +1,32 @@
-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 TeacherNoticeListPage() {
-  const notices = [
-    {},
-    { title: '공지사항1', sub: '7-12 오전 11:40:57' },
-    { title: '공지사하앙2', sub: '7-12 오전 11:40:57' },
-    { title: '공지사하앙33', sub: '7-15 오전 11:40:57' },
-    { title: '제목만 있는 경우' },
-    { sub: '날짜만 있는 경우' },
-  ];
-
-  const lecture = {
-    title: '정보처리기사 실기 완전정복',
-    tutor: '박정민',
-    isLive: true,
+  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: '제목만 있는 경우' },
+    ],
  };
+
  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"
+    <ArticleBoard
+      title="공지사항"
+      canCreate={true}
+    >
+      {notices.map((notice) => {
+        if (notice.sub && notice.title) {
+          return (
+            <ArticleLink
+              key={`${notice.title}${notice.sub}`}
+              title={notice.title}
+              sub={notice.sub}
            />
-            <SideItem
-              name="퀴즈 정답률"
-              sub="80%"
-            />
-          </SideBar>
-        </aside>
-        <main>
-          <ArticleBoard
-            title="공지사항"
-            canCreate={true}
-          >
-            {notices.map((notice) => {
-              if (notice.sub && notice.title) {
-                return (
-                  <ArticleLink
-                    key={`${notice.title}${notice.sub}`}
-                    title={notice.title}
-                    sub={notice.sub}
-                  />
-                );
-              }
-            })}
-          </ArticleBoard>
-        </main>
-      </MaxWidthLayout>
-    </>
+          );
+        }
+      })}
+    </ArticleBoard>
  );
 }