므하

src/app/notices/page.tsx

@@ -0,0 +1,124 @@
+'use client';
+
+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,
+  },
+];
+
+export default function NoticesPage() {
+  const router = useRouter();
+
+  return (
+    <div className="w-full bg-white">
+      <div className="flex justify-center">
+        <div className="w-full max-w-[1440px]">
+          {/* 헤더 영역 */}
+          <div className="h-[100px] flex items-center px-8">
+            <h1 className="m-0 text-[24px] font-bold leading-[1.5] text-[#1B2027]">
+              공지사항
+            </h1>
+          </div>
+
+          {/* 본문 영역 */}
+          <section className="px-8 pb-8">
+            {/* 총 건수 */}
+            <div className="h-10 flex items-center">
+              <p className="m-0 text-[15px] font-medium leading-[1.5] text-[#333C47]">
+                총 <span className="text-[#384FBF]">{rows.length}</span>건
+              </p>
+            </div>
+
+            {/* 표 */}
+            <div className="rounded-[8px] border border-[#DEE1E6] overflow-hidden bg-white">
+              {/* 헤더 */}
+              <div className="grid grid-cols-[57px_1fr_140px_140px_140px] bg-[#F9FAFB] h-[48px] text-[14px] font-semibold text-[#4C5561] border-b border-[#DEE1E6]">
+                <div className="flex items-center justify-center px-4 border-r border-[#DEE1E6] whitespace-nowrap">
+                  번호
+                </div>
+                <div className="flex items-center px-4 border-r border-[#DEE1E6] whitespace-nowrap">
+                  제목
+                </div>
+                <div className="flex items-center px-4 border-r border-[#DEE1E6]">
+                  게시일
+                </div>
+                <div className="flex items-center px-4 border-r border-[#DEE1E6]">
+                  조회수
+                </div>
+                <div className="flex items-center px-4">작성자</div>
+              </div>
+
+              {/* 바디 */}
+              <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>
+                    <div
+                      className="flex items-center gap-1.5 px-4 border-r border-[#DEE1E6] whitespace-nowrap overflow-hidden text-ellipsis"
+                      title={r.title}
+                    >
+                      {r.title}
+                      {r.hasAttachment && (
+                        <PaperClipSvg width={16} height={16} className="shrink-0 text-[#8C95A1]" />
+                      )}
+                    </div>
+                    <div className="flex items-center px-4 border-r border-[#DEE1E6]">
+                      {r.date}
+                    </div>
+                    <div className="flex items-center px-4 border-r border-[#DEE1E6]">
+                      {r.views.toLocaleString()}
+                    </div>
+                    <div className="flex items-center px-4">{r.writer}</div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </section>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+
+