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[]>('/notices');
+
+  return result.data;
+};
+
+export default getNotices;

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

@@ -1,15 +1,25 @@
+'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) => (
+      {notices?.map((item: NoticeListItemType) => (
         <li key={item.id}>
           <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,64 @@
+'use client';
+
+import Link from 'next/link';
+import { useQuery } from '@tanstack/react-query';
+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({ params }: { params: { noticeId: string } }) {
+  const noticeId = params.noticeId;
+  const noticeIdNumber = noticeId ? Number(noticeId) : null;
+  const router = useRouter();
+
+  const { data: notice } = 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/notice/[noticeId]/page.tsx

@@ -0,0 +1,17 @@
+import NoticeDetailComponent from './NoticeDetail';
+
+interface NoticeDetailPageProps {
+  params: {
+    noticeId: string; // Next.js에서 params는 기본적으로 string 타입으로 전달됩니다.
+  };
+}
+
+function NoticeDetailPage({ params }: NoticeDetailPageProps) {
+  return (
+    <section>
+      <NoticeDetailComponent params={params} />
+    </section>
+  );
+}
+
+export default NoticeDetailPage;

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>
   );