Feat: 모든 게시물 조회 API 연동

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;

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>

src/lib/constants/queryKeys.ts

@@ -52,6 +52,7 @@ export const QUERY_KEYS = {
   getAdminAllNotice: 'getAdminAllNotice',
 
   // 공지
+  getAllNotices: 'getAllNotices',
   getNoticeCategories: 'getNoticeCategories',
   getNoticeDetail: 'getNoticeDetail',
 };