Merge pull request #107 from TeamBNBN/fe/noticesListAPI

[Front-End] feat: 공지사항 목록 페이지 API 연결

frontend/src/hooks/api/useNotices.js

@@ -2,12 +2,9 @@ import { useQuery } from '@tanstack/react-query';
 import instance from '../../utils/axios/instance';
 import { API_URL } from '../../constants';
 
-export function useNotices(lectureId) {
+export function useNotices(lectureId, page = 0) {
-  // TODO: API url 업데이트
+  return useQuery({
-  const response = useQuery({
+    queryKey: ['noticelist', lectureId, page],
-    queryKey: ['noticelist', lectureId],
+    queryFn: () => instance.get(`${API_URL}/board?lectureId=${lectureId}&category=announcement&pageNo=${page}`),
-    queryFn: instance.get(`${API_URL}/notice/${lectureId}`),
   });
-
-  return response;
 }

frontend/src/pages/NoticeListPage/NoticeListPage.jsx

@@ -1,26 +1,23 @@
 import { ArticleLink } from '../../components/ArticleLink';
 import ArticleBoard from '../../components/ArticleBoard/ArticleBoard';
+import { useNotices } from '../../hooks/api/useNotices';
+import { useParams } from 'react-router-dom';
 
 export default function NoticeListPage() {
-  const { data: notices } = {
+  const { lectureId } = useParams();
-    data: [
+  const { data } = useNotices(lectureId);
-      { id: 1, title: '공지사항1', sub: '7-12 오전 11:40:57' },
+  const notices = data?.data;
-      { 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={false}
     >
-      {notices.map((notice) => (
+      {notices?.map((notice) => (
         <ArticleLink
-          key={`${notice.title}${notice.sub}`}
+          key={`${notice.id}`}
           title={notice.title}
-          sub={notice.sub}
+          sub={notice.date}
           to={`${notice.id}`}
         />
       ))}