From aad5f41e5a812b74458192e71e35cef534196cb6 Mon Sep 17 00:00:00 2001
From: jhynsoo <jhynsoo@gmail.com>
Date: Wed, 24 Jul 2024 16:39:16 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EA=B3=B5=EC=A7=80=EC=82=AC=ED=95=AD=20?=
 =?UTF-8?q?=EB=AA=A9=EB=A1=9D=20=ED=8E=98=EC=9D=B4=EC=A7=80=20API=20?=
 =?UTF-8?q?=EC=97=B0=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/hooks/api/useNotices.js          | 11 ++++-------
 .../pages/NoticeListPage/NoticeListPage.jsx   | 19 ++++++++-----------
 2 files changed, 12 insertions(+), 18 deletions(-)

diff --git a/frontend/src/hooks/api/useNotices.js b/frontend/src/hooks/api/useNotices.js
index 72c14d8..b6fd154 100644
--- a/frontend/src/hooks/api/useNotices.js
+++ b/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) {
-  // TODO: API url 업데이트
-  const response = useQuery({
-    queryKey: ['noticelist', lectureId],
-    queryFn: instance.get(`${API_URL}/notice/${lectureId}`),
+export function useNotices(lectureId, page = 0) {
+  return useQuery({
+    queryKey: ['noticelist', lectureId, page],
+    queryFn: () => instance.get(`${API_URL}/board?lectureId=${lectureId}&category=announcement&pageNo=${page}`),
   });
-
-  return response;
 }
diff --git a/frontend/src/pages/NoticeListPage/NoticeListPage.jsx b/frontend/src/pages/NoticeListPage/NoticeListPage.jsx
index 6089f93..5542edf 100644
--- a/frontend/src/pages/NoticeListPage/NoticeListPage.jsx
+++ b/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 } = {
-    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 { lectureId } = useParams();
+  const { data } = useNotices(lectureId);
+  const notices = data?.data;
 
   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}`}
         />
       ))}