@@ -71,7 +90,7 @@ export default function ResultsPage() {
{mockResults.map((row, idx) => (
|
{row.programTitle}
@@ -90,18 +109,26 @@ export default function ResultsPage() {
|
{row.feedbackLink ? (
-
+
+
) : (
"-"
)}
|
{row.certificateLink ? (
-
+
+
) : (
"-"
)}
@@ -113,6 +140,17 @@ export default function ResultsPage() {
+ setIsFeedbackOpen(false)}
+ learnerName="홍길동"
+ instructorName={selected?.instructor}
+ scoreText={selected?.score?.split(" / ")[0] ?? "0"}
+ />
+ setIsCertOpen(false)}
+ />
);
}
diff --git a/src/app/notices/[id]/page.tsx b/src/app/notices/[id]/page.tsx
new file mode 100644
index 0000000..0a28ff6
--- /dev/null
+++ b/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 (
+
+
+
+ {/* 상단 타이틀 */}
+
+
+
+
+
+ 공지사항 상세
+
+
+
+ {/* 카드 */}
+
+
+ {/* 헤더 */}
+
+
+ {item.title}
+
+
+ 작성자
+ {item.writer}
+
+ 게시일
+ {item.date}
+
+ 조회수
+ {item.views.toLocaleString()}
+
+
+
+ {/* 구분선 */}
+
+
+ {/* 본문 */}
+
+
+ {item.content.map((p, idx) => (
+
+ {p}
+
+ ))}
+
+
+
+
+
+
+
+
+ {/* 헤더 영역 */}
+
+
+ 공지사항
+
+
+
+ {/* 본문 영역 */}
+
+ {/* 총 건수 */}
+
+
+ {/* 표 */}
+
+ {/* 헤더 */}
+
+
+ 번호
+
+
+ 제목
+
+
+ 게시일
+
+
+ 조회수
+
+ 작성자
+
+
+ {/* 바디 */}
+
+ {rows.map((r) => (
+ 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(' ')}
+ >
+
+ {r.id}
+
+
+ {r.title}
+ {r.hasAttachment && (
+
+ )}
+
+
+ {r.date}
+
+
+ {r.views.toLocaleString()}
+
+ {r.writer}
+
+ ))}
+
+
+
+
+
+
+
+ {/* 상단 타이틀 */}
+
+
+
+
+
+ 학습 자료 상세
+
+
+
+ {/* 카드 */}
+
+
+ {/* 헤더 */}
+
+
+ {item.title}
+
+
+ 작성자
+ {item.writer}
+
+ 게시일
+ {item.date}
+
+ 조회수
+ {item.views.toLocaleString()}
+
+
+
+ {/* 구분선 */}
+
+
+ {/* 본문 */}
+
+
+ {item.content.map((p, idx) => (
+
+ {p}
+
+ ))}
+
+
+
+ {/* 첨부 파일 */}
+ {item.attachments?.length ? (
+
+
+ 첨부 파일
+
+ {item.attachments.map((f, idx) => (
+
+ ))}
+
+ ) : null}
+
+
+
+
@@ -80,19 +85,19 @@ export default function ResourcesPage() {
{/* 헤더 */}
-
+
번호
-
+
제목
-
+
게시일
-
{/* 바디 */}
@@ -100,9 +105,17 @@ export default function ResourcesPage() {
{rows.map((r) => (
router.push(`/resources/${r.id}`)}
+ onKeyDown={(e) => {
+ if (e.key === 'Enter' || e.key === ' ') {
+ e.preventDefault();
+ router.push(`/resources/${r.id}`);
+ }
+ }}
className={[
- 'grid grid-cols-[57px_1fr_140px_140px_140px] h-[48px] text-[15px] font-medium text-[#1B2027] border-t border-[#DEE1E6]',
- r.id === rows[0].id ? 'bg-[rgba(236,240,255,0.5)]' : '',
+ '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(' ')}
>
@@ -114,22 +127,7 @@ export default function ResourcesPage() {
>
{r.title}
{r.hasAttachment && (
-
+
)}
diff --git a/src/app/svgs/backcirclesvg.tsx b/src/app/svgs/backcirclesvg.tsx
new file mode 100644
index 0000000..ee969f3
--- /dev/null
+++ b/src/app/svgs/backcirclesvg.tsx
@@ -0,0 +1,46 @@
+export default function BackCircleSvg(
+ {
+ width = 32,
+ height = 32,
+ className = '',
+ }: { width?: number | string; height?: number | string; className?: string }
+): JSX.Element {
+ return (
+
+ );
+}
+
+
diff --git a/src/app/svgs/chevrondownsvg.tsx b/src/app/svgs/chevrondownsvg.tsx
index 9bea139..a33c186 100644
--- a/src/app/svgs/chevrondownsvg.tsx
+++ b/src/app/svgs/chevrondownsvg.tsx
@@ -19,7 +19,7 @@ export default function ChevronDownSvg(
fillRule="evenodd"
clipRule="evenodd"
d="M18.7071 8.29277C19.0976 8.6833 19.0976 9.31646 18.7071 9.70698L12.7071 15.707C12.3166 16.0975 11.6834 16.0975 11.2929 15.707L5.29289 9.70699C4.90237 9.31646 4.90237 8.6833 5.29289 8.29277C5.68342 7.90225 6.31658 7.90225 6.70711 8.29277L12 13.5857L17.2929 8.29277C17.6834 7.90225 18.3166 7.90225 18.7071 8.29277Z"
- fill="white"
+ fill="currentColor"
/>
);
diff --git a/src/app/svgs/paperclipsvg.tsx b/src/app/svgs/paperclipsvg.tsx
new file mode 100644
index 0000000..3f2c2af
--- /dev/null
+++ b/src/app/svgs/paperclipsvg.tsx
@@ -0,0 +1,29 @@
+export default function PaperClipSvg(
+ {
+ width = 16,
+ height = 16,
+ className = '',
+ }: { width?: number | string; height?: number | string; className?: string }
+): JSX.Element {
+ return (
+
+ );
+}
+
+
|