므하

src/app/notices/[id]/page.tsx

@@ -0,0 +1,109 @@
+import Link from 'next/link';
+import { notFound } from 'next/navigation';
+import BackCircleSvg from '../../svgs/backcirclesvg';
+
+type NoticeItem = {
+  id: number;
+  title: string;
+  date: string;
+  views: number;
+  writer: string;
+  content: string[];
+};
+
+const DATA: NoticeItem[] = [
+  {
+    id: 2,
+    title: '공지사항 제목이 노출돼요',
+    date: '2025-09-10',
+    views: 1230,
+    writer: '문지호',
+    content: [
+      '사이트 이용 관련 주요 변경 사항을 안내드립니다.',
+      '변경되는 내용은 공지일자로부터 즉시 적용됩니다.',
+    ],
+  },
+  {
+    id: 1,
+    title: '📢 방사선학 온라인 강의 수강 안내 및 필수 공지',
+    date: '2025-06-28',
+    views: 594,
+    writer: '문지호',
+    content: [
+      '온라인 강의 수강 방법과 필수 확인 사항을 안내드립니다.',
+      '수강 기간 및 출석, 과제 제출 관련 정책을 반드시 확인해 주세요.',
+    ],
+  },
+];
+
+export default async function NoticeDetailPage({
+  params,
+}: {
+  params: Promise<{ id: string }>;
+}) {
+  const { id } = await params;
+  const numericId = Number(id);
+  const item = DATA.find((r) => r.id === numericId);
+  if (!item) return notFound();
+
+  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 gap-3 px-8">
+            <Link
+              href="/notices"
+              aria-label="뒤로 가기"
+              className="size-8 rounded-full inline-flex items-center justify-center text-[#8C95A1] hover:bg-black/5 no-underline"
+            >
+              <BackCircleSvg width={32} height={32} />
+            </Link>
+            <h1 className="m-0 text-[24px] font-bold leading-normal text-[#1B2027]">
+              공지사항 상세
+            </h1>
+          </div>
+
+          {/* 카드 */}
+          <section className="px-8 pb-8">
+            <div className="rounded-[8px] border border-[#DEE1E6] overflow-hidden bg-white">
+              {/* 헤더 */}
+              <div className="p-8">
+                <h2 className="m-0 text-[20px] font-bold leading-normal text-[#333C47]">
+                  {item.title}
+                </h2>
+                <div className="mt-2 flex items-center gap-4 text-[13px] leading-[1.4]">
+                  <span className="text-[#8C95A1]">작성자</span>
+                  <span className="text-[#333C47]">{item.writer}</span>
+                  <span className="w-px h-4 bg-[#DEE1E6]" />
+                  <span className="text-[#8C95A1]">게시일</span>
+                  <span className="text-[#333C47]">{item.date}</span>
+                  <span className="w-px h-4 bg-[#DEE1E6]" />
+                  <span className="text-[#8C95A1]">조회수</span>
+                  <span className="text-[#333C47]">{item.views.toLocaleString()}</span>
+                </div>
+              </div>
+
+              {/* 구분선 */}
+              <div className="h-px bg-[#DEE1E6] w-full" />
+
+              {/* 본문 */}
+              <div className="p-8">
+                <div className="text-[15px] leading-normal text-[#333C47] space-y-2">
+                  {item.content.map((p, idx) => (
+                    <p key={idx} className="m-0">
+                      {p}
+                    </p>
+                  ))}
+                </div>
+              </div>
+            </div>
+          </section>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+
+