From 4f9d06acbf91fd89dd83c5454e105e96593e204a Mon Sep 17 00:00:00 2001
From: Nahyun <tarea202001@gmail.com>
Date: Sun, 15 Dec 2024 17:19:50 +0900
Subject: [PATCH] =?UTF-8?q?Feat:=20=EB=AA=A8=EB=93=A0=20=EA=B2=8C=EC=8B=9C?=
 =?UTF-8?q?=EB=AC=BC=20=EC=A1=B0=ED=9A=8C=20API=20=EC=97=B0=EB=8F=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/_api/notice/getNotices.ts | 10 ++++++++++
 src/app/notice/NoticeList.tsx     | 18 ++++++++++++++----
 src/lib/constants/queryKeys.ts    |  1 +
 3 files changed, 25 insertions(+), 4 deletions(-)
 create mode 100644 src/app/_api/notice/getNotices.ts

diff --git a/src/app/_api/notice/getNotices.ts b/src/app/_api/notice/getNotices.ts
new file mode 100644
index 00000000..468d3265
--- /dev/null
+++ b/src/app/_api/notice/getNotices.ts
@@ -0,0 +1,10 @@
+import axiosInstance from '@/lib/axios/axiosInstance';
+import { NoticeListItemType } from '@/lib/types/noticeType';
+
+const getNotices = async () => {
+  const result = await axiosInstance.get<NoticeListItemType[]>('/admin/notices');
+
+  return result.data;
+};
+
+export default getNotices;
diff --git a/src/app/notice/NoticeList.tsx b/src/app/notice/NoticeList.tsx
index f1c8ad0e..074d95d1 100644
--- a/src/app/notice/NoticeList.tsx
+++ b/src/app/notice/NoticeList.tsx
@@ -1,16 +1,26 @@
+'use client';
+
 import Image from 'next/image';
+import { useQuery } from '@tanstack/react-query';
+import { QUERY_KEYS } from '@/lib/constants/queryKeys';
+import getNotices from '../_api/notice/getNotices';
 
 import { NoticeListItemType } from '@/lib/types/noticeType';
-import { NOTICE_LIST_MOCKDATA } from './mockdata';
 
 import * as styles from './NoticeList.css';
 import Link from 'next/link';
 
 function NoticeList() {
+  const { data: notices } = useQuery<NoticeListItemType[]>({
+    queryKey: [QUERY_KEYS.getAllNotices],
+    queryFn: getNotices,
+    staleTime: 1000 * 60 * 30,
+  });
+
   return (
     <ul className={styles.noticeListWrapper}>
-      {NOTICE_LIST_MOCKDATA?.map((item: NoticeListItemType) => (
-        <li key={item.id}>
+      {notices?.map((item: NoticeListItemType, index) => (
+        <li key={index}>
           <NoticeListItem item={item} />
         </li>
       ))}
@@ -26,7 +36,7 @@ interface NoticeListItemProps {
 
 function NoticeListItem({ item }: NoticeListItemProps) {
   return (
-    <Link href={`/notices/${item.id}`} className={styles.listItemWrapper}>
+    <Link href={`/notice/${item.id}`} className={styles.listItemWrapper}>
       <div>
         <h3 className={styles.noticeTitle}>{item.title}</h3>
         <p className={styles.noticeDescription}>{item.description}</p>
diff --git a/src/lib/constants/queryKeys.ts b/src/lib/constants/queryKeys.ts
index 6d8927c7..a46c7a39 100644
--- a/src/lib/constants/queryKeys.ts
+++ b/src/lib/constants/queryKeys.ts
@@ -52,6 +52,7 @@ export const QUERY_KEYS = {
   getAdminAllNotice: 'getAdminAllNotice',
 
   // 공지
+  getAllNotices: 'getAllNotices',
   getNoticeCategories: 'getNoticeCategories',
   getNoticeDetail: 'getNoticeDetail',
 };