feat(graduate): table row 선택시 상세 페이지로 이동

Author: yummjin

apps/graduate/src/pages/client/home/ui/NoticeSection.tsx

@@ -1,4 +1,4 @@
-import { Link } from '@tanstack/react-router';
+import { Link, useNavigate } from '@tanstack/react-router';
 import { FileText } from 'lucide-react';
 
 import { DataTable, Section } from '~/shared/components';
@@ -17,6 +17,7 @@ type NoticeRow = {
 };
 
 export default function NoticeSection() {
+  const navigate = useNavigate();
   const { data, isLoading } = useNoticeList({
     category: 'GRADUATION',
     page: 0,
@@ -46,7 +47,9 @@ export default function NoticeSection() {
             display: 'flex',
             alignItems: 'center',
             gap: '8px',
+            cursor: 'pointer',
           }}
+          onClick={() => navigate({ to: `/notice/${row.noticeId}` })}
         >
           {row.isPinned && (
             <span
@@ -74,7 +77,14 @@ export default function NoticeSection() {
       header: '작성자',
       width: '20%',
       align: 'center' as const,
-      cell: (row: NoticeRow) => row.author,
+      cell: (row: NoticeRow) => (
+        <div
+          style={{ cursor: 'pointer' }}
+          onClick={() => navigate({ to: `/notice/${row.noticeId}` })}
+        >
+          {row.author}
+        </div>
+      ),
     },
     {
       key: 'createdAt',
@@ -83,11 +93,18 @@ export default function NoticeSection() {
       align: 'center' as const,
       cell: (row: NoticeRow) => {
         const dateObj = new Date(row.createdAt);
-        return dateObj.toLocaleDateString('ko-KR', {
-          year: 'numeric',
-          month: '2-digit',
-          day: '2-digit',
-        });
+        return (
+          <div
+            style={{ cursor: 'pointer' }}
+            onClick={() => navigate({ to: `/notice/${row.noticeId}` })}
+          >
+            {dateObj.toLocaleDateString('ko-KR', {
+              year: 'numeric',
+              month: '2-digit',
+              day: '2-digit',
+            })}
+          </div>
+        );
       },
     },
   ];

apps/graduate/src/pages/client/notice/ui/NoticePage.tsx

@@ -1,3 +1,4 @@
+import { useNavigate } from '@tanstack/react-router';
 import { Table, Tag, Spin } from 'antd';
 import type { ColumnsType } from 'antd/es/table';
 import { FileText } from 'lucide-react';
@@ -18,6 +19,7 @@ interface NoticeDataType {
 }
 
 export default function NoticePage() {
+  const navigate = useNavigate();
   const { data, isLoading } = useNoticeList({
     category: 'GRADUATION',
     page: 0,
@@ -129,8 +131,7 @@ export default function NoticePage() {
               scroll={{ x: 'max-content' }}
               onRow={record => ({
                 onClick: () => {
-                  // TODO: 상세 페이지로 이동
-                  console.log('Notice clicked:', record.noticeId);
+                  navigate({ to: `/notice/${record.noticeId}` });
                 },
                 style: { cursor: 'pointer' },
               })}

apps/graduate/src/shared/hooks/notice/useNoticeDetail.ts

@@ -6,7 +6,7 @@ import { transformNoticeDetailResponse } from '~/shared/utils';
 
 export function useNoticeDetail(noticeId: number) {
   return useQuery({
-    queryKey: [KEYS.NOTICE, noticeId],
+    queryKey: [KEYS.NOTICE, 'detail', noticeId],
     queryFn: async () => {
       const response = await getNoticeDetail(noticeId);
       return transformNoticeDetailResponse(response.data);

apps/graduate/src/shared/hooks/notice/useNoticeList.ts

@@ -19,3 +19,5 @@ export function useNoticeList(params?: NoticeListParams) {
     },
   });
 }
+
+export { useNoticeDetail } from './useNoticeDetail';