공지사항 작업, 등록폼 디자인 수정1

src/app/notices/page.tsx

@@ -2,36 +2,13 @@
 
 import { useRouter } from 'next/navigation';
 import PaperClipSvg from '../svgs/paperclipsvg';
-
-type NoticeRow = {
-  id: number;
-  title: string;
-  date: string;
-  views: number;
-  writer: string;
-  hasAttachment?: boolean;
-};
-
-const rows: NoticeRow[] = [
-  {
-    id: 2,
-    title: '공지사항 제목이 노출돼요',
-    date: '2025-09-10',
-    views: 1230,
-    writer: '문지호',
-  },
-  {
-    id: 1,
-    title: '📢 방사선학 온라인 강의 수강 안내 및 필수 공지',
-    date: '2025-06-28',
-    views: 594,
-    writer: '문지호',
-    hasAttachment: true,
-  },
-];
+import { MOCK_NOTICES } from '../admin/notices/mockData';
 
 export default function NoticesPage() {
   const router = useRouter();
+  
+  // 날짜 내림차순 정렬 (최신 날짜가 먼저)
+  const rows = [...MOCK_NOTICES].sort((a, b) => b.date.localeCompare(a.date));
 
   return (
     <div className="w-full bg-white">
@@ -74,25 +51,28 @@ export default function NoticesPage() {
 
               {/* 바디 */}
               <div>
-                {rows.map((r) => (
-                  <div
-                    key={r.id}
-                    role="button"
-                    tabIndex={0}
-                    onClick={() => router.push(`/notices/${r.id}`)}
-                    onKeyDown={(e) => {
-                      if (e.key === 'Enter' || e.key === ' ') {
-                        e.preventDefault();
-                        router.push(`/notices/${r.id}`);
-                      }
-                    }}
-                    className={[
-                      'grid grid-cols-[57px_1fr_140px_140px_140px] h-[48px] text-[15px] font-medium text-[#1B2027] border-t border-[#DEE1E6] hover:bg-[rgba(236,240,255,0.5)] cursor-pointer',
-                    ].join(' ')}
-                  >
-                    <div className="flex items-center justify-center px-2 whitespace-nowrap border-r border-[#DEE1E6]">
-                      {r.id}
-                    </div>
+                {rows.map((r, index) => {
+                  // 번호는 정렬된 목록에서의 순서
+                  const noticeNumber = rows.length - index;
+                  return (
+                    <div
+                      key={r.id}
+                      role="button"
+                      tabIndex={0}
+                      onClick={() => router.push(`/notices/${r.id}`)}
+                      onKeyDown={(e) => {
+                        if (e.key === 'Enter' || e.key === ' ') {
+                          e.preventDefault();
+                          router.push(`/notices/${r.id}`);
+                        }
+                      }}
+                      className={[
+                        'grid grid-cols-[57px_1fr_140px_140px_140px] h-[48px] text-[15px] font-medium text-[#1B2027] border-t border-[#DEE1E6] hover:bg-[rgba(236,240,255,0.5)] cursor-pointer',
+                      ].join(' ')}
+                    >
+                      <div className="flex items-center justify-center px-2 whitespace-nowrap border-r border-[#DEE1E6]">
+                        {noticeNumber}
+                      </div>
                     <div
                       className="flex items-center gap-1.5 px-4 border-r border-[#DEE1E6] whitespace-nowrap overflow-hidden text-ellipsis"
                       title={r.title}
@@ -109,8 +89,9 @@ export default function NoticesPage() {
                       {r.views.toLocaleString()}
                     </div>
                     <div className="flex items-center px-4">{r.writer}</div>
-                  </div>
-                ))}
+                    </div>
+                  );
+                })}
               </div>
             </div>
           </section>