Fix: 게시판 헤더 추가

8-Sprinters · Dec 15, 2024 · af6cec8 · af6cec8
1 parent 4f9d06a
commit af6cec8
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 49 deletions.
diff --git a/src/app/notice/[noticeId]/NoticeDetail.tsx b/src/app/notice/[noticeId]/NoticeDetail.tsx
@@ -1,45 +1,75 @@
+'use client';
+
 import Image from 'next/image';
 import Link from 'next/link';
+import { useQuery } from '@tanstack/react-query';
+import { usePathname } from 'next/navigation';
 
-import { NOTICE_DETAIL_MOCKDATA } from '../mockdata';
+import getNoticeDetail from '@/app/_api/notice/getNoticeDetail';
 import { NoticeContentType } from '@/lib/types/noticeType';
+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 data = NOTICE_DETAIL_MOCKDATA;
+  const pathname = usePathname();
+  const noticeId = pathname?.split('/').pop();
+  const noticeIdNumber = noticeId ? Number(noticeId) : null;
+
+  const {
+    data: notice,
+    isLoading,
+    isError,
+  } = useQuery<NoticeDetailType>({
+    queryKey: [QUERY_KEYS.getNoticeDetail, noticeIdNumber],
+    queryFn: () => getNoticeDetail(noticeIdNumber as number),
+    enabled: noticeIdNumber !== null, // noticeIdNumber가 유효한 경우에만 실행
+  });
+
+  console.log(noticeId);
+
+  if (!notice) {
+    return null;
+  }
 
   return (
     <>
-      <section className={styles.titleSection}>
+      {/* <section className={styles.titleSection}>
         <div>
-          <span className={styles.category}>{data.category}</span>
+          <span className={styles.category}>{notice?.category}</span>
         </div>
-        <h3 className={styles.title}>{data.title}</h3>
-        <div className={styles.titleSectionDescription}>{data.description}</div>
-        <p className={styles.titleSectionCreatedDate}>{data.createdDate}</p>
+        <h3 className={styles.title}>{notice?.title}</h3>
+        <div className={styles.titleSectionDescription}>{notice?.description}</div>
+        <p className={styles.titleSectionCreatedDate}>{notice?.createdDate}</p>
       </section>
       <article className={styles.articleWrapper}>
         <ul>
-          {data.contents?.map((item: NoticeContentType, idx) => (
+          {notice?.contents?.map((item: NoticeContentType, idx) => (
             <li key={idx.toString()}>
               <NoticeContent item={item} />
             </li>
           ))}
         </ul>
-      </article>
+      </article> */}
+      <NoticeDetailInfo noticeData={notice} />
       <section className={styles.signPostWrapper}>
-        <div className={styles.listItemWrapper}>
-          <div className={styles.sign}>다음글</div>
-          <div className={styles.noticeTitle}>{data.prevNotice.title}</div>
-          <p className={styles.noticeDescription}>{data.prevNotice.description}</p>
-        </div>
-        <div className={styles.listItemWrapper}>
-          <div className={styles.sign}>이전글</div>
-          <div className={styles.noticeTitle}>{data.nextNotice.title}</div>
-          <p className={styles.noticeDescription}>{data.nextNotice.description}</p>
-        </div>
-        <Link href={'/notices'}>
+        {notice?.prevNotice && (
+          <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>
+        )}
+        {notice?.nextNotice && (
+          <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 href={'/notice'}>
           <button className={styles.link}>목록보기</button>
         </Link>
       </section>

diff --git a/src/app/notice/layout.tsx b/src/app/notice/layout.tsx
diff --git a/src/app/notice/page.tsx b/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>
   );