Notice 페이지 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/notices/NoticeList.tsx → 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/app/notices/[noticeId]/NoticeDetail.css.ts → src/app/notice/[noticeId]/NoticeDetail.css.ts

@@ -19,6 +19,18 @@ export const category = style({
   borderRadius: '16px',
 });
 
+export const header = style({
+  padding: '10px 16px 0',
+
+  backgroundColor: vars.color.blue,
+});
+
+export const back = style({
+  fontSize: '1.4rem',
+  color: vars.color.lightgray,
+  cursor: 'pointer',
+});
+
 export const title = style({
   marginTop: '14px',
   marginBottom: '11px',

src/app/notice/[noticeId]/NoticeDetail.tsx

@@ -0,0 +1,70 @@
+'use client';
+
+import Link from 'next/link';
+import { useQuery } from '@tanstack/react-query';
+import { usePathname } from 'next/navigation';
+import { useRouter } from 'next/navigation';
+
+import getNoticeDetail from '@/app/_api/notice/getNoticeDetail';
+import { QUERY_KEYS } from '@/lib/constants/queryKeys';
+import { NoticeDetailType } from '@/lib/types/noticeType';
+
+import * as styles from './NoticeDetail.css';
+import NoticeDetailInfo from '@/components/NoticeDetail/NoticeDetailInfo';
+
+function NoticeDetailComponent() {
+  const pathname = usePathname();
+  const noticeId = pathname?.split('/').pop();
+  const noticeIdNumber = noticeId ? Number(noticeId) : null;
+  const router = useRouter();
+
+  const {
+    data: notice,
+    isLoading,
+    isError,
+  } = useQuery<NoticeDetailType>({
+    queryKey: [QUERY_KEYS.getNoticeDetail, noticeIdNumber],
+    queryFn: () => getNoticeDetail(noticeIdNumber as number),
+    enabled: noticeIdNumber !== null, // noticeIdNumber가 유효한 경우에만 실행
+  });
+
+  if (!notice) {
+    return null;
+  }
+
+  return (
+    <>
+      <div className={styles.header}>
+        <span className={styles.back} onClick={() => router.back()}>
+          뒤로가기
+        </span>
+      </div>
+      <NoticeDetailInfo noticeData={notice} />
+      <section className={styles.signPostWrapper}>
+        {notice?.prevNotice && (
+          <Link href={`/notice/${notice?.prevNotice.id}`}>
+            <div className={styles.listItemWrapper}>
+              <div className={styles.sign}>이전글</div>
+              <div className={styles.noticeTitle}>{notice?.prevNotice?.title}</div>
+              <p className={styles.noticeDescription}>{notice?.prevNotice?.description}</p>
+            </div>
+          </Link>
+        )}
+        {notice?.nextNotice && (
+          <Link href={`/notice/${notice?.nextNotice.id}`}>
+            <div className={styles.listItemWrapper}>
+              <div className={styles.sign}>다음글</div>
+              <div className={styles.noticeTitle}>{notice?.nextNotice?.title}</div>
+              <p className={styles.noticeDescription}>{notice?.nextNotice?.description}</p>
+            </div>
+          </Link>
+        )}
+        <Link href={'/notice'}>
+          <button className={styles.link}>목록보기</button>
+        </Link>
+      </section>
+    </>
+  );
+}
+
+export default NoticeDetailComponent;

src/app/notices/page.tsx → src/app/notice/page.tsx

@@ -1,8 +1,10 @@
 import NoticeList from './NoticeList';
+import Header from '@/components/Header/Header';
 
 function NoticePage() {
   return (
     <section>
+      <Header title={'게시판'} left={'back'} />
       <NoticeList />
     </section>
   );

src/components/NoticeDetail/NoticeDetailInfo.css.ts

@@ -48,7 +48,7 @@ export const created = style({
 });
 
 export const contents = style({
-  paddingTop: '2rem',
+  padding: '2rem 1.6rem 0 1.6rem',
 
   display: 'flex',
   flexDirection: 'column',

src/lib/constants/queryKeys.ts

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