motaju/xrlms
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

므하

Browse Source
This commit is contained in:
mota
2025-11-18 09:09:09 +09:00
parent 4f7b98dffb
commit 4dc8304a1d
22 changed files with 1497 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/app/menu/results/CertificateModal.tsx Normal file
View File

@@ -0,0 +1,23 @@
"use client";
import React from "react";
import FigmaCertificateContent from "./FigmaCertificateContent";
type Props = {
open: boolean;
onClose: () => void;
};
export default function CertificateModal({ open, onClose }: Props) {
if (!open) return null;
return (
<div className="fixed inset-0 z-50 flex items-center justify-center">
<div className="absolute inset-0 bg-black/40" onClick={onClose} aria-hidden="true" />
<div className="relative z-10 shadow-xl">
<FigmaCertificateContent onClose={onClose} />
</div>
</div>
);
}

44
src/app/menu/results/FeedbackModal.tsx Normal file
View File

@@ -0,0 +1,44 @@
"use client";
import React from "react";
import FigmaFeedbackContent from "./FigmaFeedbackContent";
type Props = {
open: boolean;
onClose: () => void;
learnerName?: string;
instructorName?: string;
scoreText?: string;
};
export default function FeedbackModal({
open,
onClose,
learnerName,
instructorName,
scoreText,
}: Props) {
if (!open) return null;
return (
<div
className="fixed inset-0 z-50 flex items-center justify-center"
aria-hidden={!open}
>
<div
className="absolute inset-0 bg-black/40"
onClick={onClose}
aria-hidden="true"
/>
<div className="relative z-10 shadow-xl">
<FigmaFeedbackContent
onClose={onClose}
learnerName={learnerName}
instructorName={instructorName}
scoreText={scoreText}
/>
</div>
</div>
);
}

346
src/app/menu/results/FigmaCertificateContent.tsx Normal file
View File

@@ -0,0 +1,346 @@
/* eslint-disable @next/next/no-img-element */
"use client";
import React from "react";
type Props = {
onClose: () => void;
};
const imgImage1 = "http://localhost:3845/assets/89fda8e949171025b1232bae70fc9d442e4e70c8.png";
const imgContainer = "http://localhost:3845/assets/d04df6bb7fe1bd29946d04be9442029bca1503b0.png";
const img = "http://localhost:3845/assets/7adf9a5e43b6c9e5f9bee6adfee64e85eabac44a.svg";
const img1 = "http://localhost:3845/assets/9e3b52939dbaa99088659a82db437772ef1ad40e.svg";
export default function FigmaCertificateContent({ onClose }: Props) {
return (
<div
className="bg-white border border-[#dee1e6] border-solid box-border content-stretch flex flex-col items-center relative rounded-[12px] w-[720px] max-w-[95vw]"
data-name="Frame"
data-node-id="388:21934"
role="dialog"
aria-modal="true"
>
<div
className="box-border content-stretch flex gap-[10px] items-center overflow-clip p-[24px] relative shrink-0 w-full"
data-name="header"
data-node-id="388:21935"
>
<div
className="basis-0 flex flex-col font-['Pretendard:Bold',sans-serif] grow h-[32px] justify-center leading-[0] min-h-px min-w-px not-italic relative shrink-0 text-[#333c47] text-[20px]"
data-node-id="388:21937"
>
<p className="leading-[1.5]">수료증</p>
</div>
<button
type="button"
aria-label="닫기"
onClick={onClose}
className="overflow-clip relative shrink-0 size-[24px]"
data-name="x-close-lg"
data-node-id="388:21938"
>
<div
className="absolute left-[calc(50%-0.02px)] size-[15.167px] top-[calc(50%-0.02px)] translate-x-[-50%] translate-y-[-50%]"
data-name="Icon (Stroke)"
data-node-id="I388:21938;1422:243"
>
<div
className="absolute inset-0"
style={{ "--fill-0": "rgba(51, 60, 71, 1)" } as React.CSSProperties}
>
<img alt="" className="block max-w-none size-full" src={img} />
</div>
</div>
</button>
</div>
<div
className="bg-white border-[#1f2b91] border-[6px] border-solid h-[714px] relative rounded-[12px] shrink-0 w-[506px]"
data-name="Container"
data-node-id="388:22388"
>
<div
className="absolute content-stretch flex flex-col gap-[8px] items-center justify-center left-[46px] not-italic text-center text-nowrap top-[92px] w-[418px] whitespace-pre"
data-node-id="388:22389"
>
<p
className="font-['Pretendard:Regular',sans-serif] leading-[1.4] relative shrink-0 text-[#6c7682] text-[13px]"
data-node-id="388:22390"
>
제 2025-N0055L3
</p>
<p
className="font-['Pretendard:SemiBold',sans-serif] leading-[1.5] relative shrink-0 text-[#333c47] text-[40px]"
data-node-id="388:22391"
>{`수 료 증`}</p>
</div>
<div
className="absolute content-stretch flex flex-col gap-[4px] items-start left-[46px] top-[216px] w-[418px]"
data-node-id="388:22392"
>
<div
className="content-stretch flex h-[24px] items-start relative shrink-0 w-full"
data-name="Container"
data-node-id="388:22393"
>
<p className="font-['Pretendard:Medium',sans-serif] leading-[1.5] not-italic relative shrink-0 text-[#333c47] text-[15px] w-[100px] whitespace-pre-wrap">
{`소 속 :`}
</p>
<div className="h-[24px] relative shrink-0 w-[170.297px]" data-name="Paragraph">
<div className="bg-clip-padding border-0 border-[transparent] border-solid box-border h-[24px] relative w-[170.297px]">
<p className="absolute font-['Pretendard:Medium',sans-serif] leading-[1.5] left-0 not-italic text-[#333c47] text-[15px] text-nowrap top-[-1px] whitespace-pre">
XR LMS
</p>
</div>
</div>
</div>
<div className="content-stretch flex h-[24px] items-start relative shrink-0 w-full" data-name="Container">
<p className="font-['Pretendard:Medium',sans-serif] leading-[1.5] not-italic relative shrink-0 text-[#333c47] text-[15px] w-[100px] whitespace-pre-wrap">
{`성 명 :`}
</p>
<div className="h-[24px] relative shrink-0 w-[41.531px]" data-name="Paragraph">
<div className="bg-clip-padding border-0 border-[transparent] border-solid box-border h-[24px] relative w-[41.531px]">
<p className="absolute font-['Pretendard:Medium',sans-serif] leading-[1.5] left-0 not-italic text-[#333c47] text-[15px] text-nowrap top-[-1px] whitespace-pre">
김하늘
</p>
</div>
</div>
</div>
<div className="content-stretch flex h-[24px] items-start relative shrink-0 w-full" data-name="Container">
<p className="font-['Pretendard:Medium',sans-serif] leading-[1.5] not-italic relative shrink-0 text-[#333c47] text-[15px] w-[100px]">
생 년 월 일 :
</p>
<div className="h-[24px] relative shrink-0 w-[78.281px]" data-name="Paragraph">
<div className="bg-clip-padding border-0 border-[transparent] border-solid box-border h-[24px] relative w-[78.281px]">
<p className="absolute font-['Pretendard:Medium',sans-serif] leading-[1.5] left-0 not-italic text-[#333c47] text-[15px] text-nowrap top-[-1px] whitespace-pre">
1994-10-17
</p>
</div>
</div>
</div>
<div className="content-stretch flex h-[24px] items-start relative shrink-0 w-full" data-name="Container">
<p className="font-['Pretendard:Medium',sans-serif] leading-[1.5] not-italic relative shrink-0 text-[#333c47] text-[15px] w-[100px]">
교 육 과 정 :
</p>
<div className="basis-0 grow h-[24px] min-h-px min-w-px relative shrink-0" data-name="Paragraph">
<div className="bg-clip-padding border-0 border-[transparent] border-solid box-border h-[24px] relative w-full">
<p className="absolute font-['Pretendard:Medium',sans-serif] leading-[1.5] left-0 not-italic text-[#333c47] text-[15px] text-nowrap top-[-1px] whitespace-pre">
(2025년) 방사선작업종사자 직장교육(신규) 9월
</p>
</div>
</div>
</div>
<div className="content-stretch flex h-[24px] items-start relative shrink-0 w-full" data-name="Container">
<p className="font-['Pretendard:Medium',sans-serif] leading-[1.5] not-italic relative shrink-0 text-[#333c47] text-[15px] w-[100px]">
교 육 기 간 :
</p>
<div className="h-[24px] relative shrink-0 w-[229.328px]" data-name="Paragraph">
<div className="bg-clip-padding border-0 border-[transparent] border-solid box-border h-[24px] relative w-[229.328px]">
<p className="absolute font-['Pretendard:Medium',sans-serif] leading-[1.5] left-0 not-italic text-[#333c47] text-[15px] text-nowrap top-[-1px] whitespace-pre">
2025-09-01 ~ 2025-09-30, 4시간
</p>
</div>
</div>
</div>
<div className="content-stretch flex h-[24px] items-start relative shrink-0 w-full" data-name="Container">
<p className="font-['Pretendard:Medium',sans-serif] leading-[1.5] not-italic relative shrink-0 text-[#333c47] text-[15px] w-[100px]">
수 료 일 자 :
</p>
<div className="h-[24px] relative shrink-0 w-[84.219px]" data-name="Paragraph">
<div className="bg-clip-padding border-0 border-[transparent] border-solid box-border h-[24px] relative w-[84.219px]">
<p className="absolute font-['Pretendard:Medium',sans-serif] leading-[1.5] left-0 not-italic text-[#333c47] text-[15px] text-nowrap top-[-1px] whitespace-pre">
2025-09-26
</p>
</div>
</div>
</div>
</div>
<div
className="absolute content-stretch flex flex-col gap-[24px] items-center left-[94.5px] top-[428px]"
data-node-id="388:22423"
>
<div className="font-['Pretendard:Medium',sans-serif] leading-[1.5] not-italic relative shrink-0 text-[#333c47] text-[16px] text-center text-nowrap whitespace-pre">
<p className="mb-0">위 사람은 우리 협회가 진행한</p>
<p>
『(2025년) 방사선작업종사자 직장교육(신규)_9월』
<br aria-hidden="true" />
과정을 수료하였으므로 이 수료증을 수여함.
</p>
</div>
<p className="font-['Pretendard:Medium',sans-serif] leading-[1.5] not-italic relative shrink-0 text-[#4c5561] text-[16px] text-center text-nowrap whitespace-pre">
2025년 10월 21일
</p>
<div className="content-stretch flex gap-[8px] items-center relative shrink-0" data-name="logo">
<div className="h-[36px] relative shrink-0 w-[46.703px]" data-name="image 1">
<div className="absolute inset-0 overflow-hidden pointer-events-none">
<img alt="" className="absolute h-[390.71%] left-[-100%] max-w-none top-[-132.02%] w-[301.18%]" src={imgImage1} />
</div>
</div>
<div className="flex flex-col font-['Pretendard:ExtraBold',sans-serif] justify-center leading-[0] not-italic relative shrink-0 text-[#333c47] text-[24px] text-nowrap">
<p className="leading-[1.45] whitespace-pre">XR LMS</p>
</div>
</div>
</div>
<div className="absolute contents left-[26px] top-[662px]">
<div className="absolute flex h-[28px] items-center justify-center left-[26px] top-[662px] w-[40px]">
<div className="flex-none scale-y-[-100%]">
<div className="content-stretch flex flex-col gap-[4px] h-[28px] items-start relative w-[40px]">
<div className="h-[12px] relative shrink-0 w-[40px]">
<div className="content-stretch flex gap-[4px] h-[12px] items-start relative w-[40px]">
<div
className="relative shrink-0 size-[12px]"
style={{ backgroundImage: "linear-gradient(rgb(31, 43, 145) 0%, rgb(56, 79, 191) 100%), linear-gradient(90deg, rgb(56, 79, 191) 0%, rgb(56, 79, 191) 100%)" }}
>
<div className="bg-clip-padding border-0 border-[transparent] border-solid box-border size-[12px]" />
</div>
<div
className="relative shrink-0 size-[12px]"
style={{ backgroundImage: "linear-gradient(rgb(31, 43, 145) 0%, rgb(56, 79, 191) 100%), linear-gradient(90deg, rgb(56, 79, 191) 0%, rgb(56, 79, 191) 100%)" }}
>
<div className="bg-clip-padding border-0 border-[transparent] border-solid box-border size-[12px]" />
</div>
</div>
</div>
<div
className="basis-0 grow min-h-px min-w-px relative shrink-0 w-[12px]"
style={{ backgroundImage: "linear-gradient(rgb(31, 43, 145) 0%, rgb(56, 79, 191) 100%), linear-gradient(90deg, rgb(56, 79, 191) 0%, rgb(56, 79, 191) 100%)" }}
>
<div className="bg-clip-padding border-0 border-[transparent] border-solid box-border h-full w-[12px]" />
</div>
</div>
</div>
</div>
<div className="absolute flex h-[28px] items-center justify-center left-[444px] top-[662px] w-[40px]">
<div className="flex-none scale-y-[-100%]">
<div className="content-stretch flex flex-col gap-[4px] h-[28px] items-end relative w-[40px]">
<div className="h-[12px] relative shrink-0 w-[28px]">
<div className="content-stretch flex gap-[4px] h-[12px] items-start relative w-[28px]">
<div
className="relative shrink-0 size-[12px]"
style={{ backgroundImage: "linear-gradient(rgb(31, 43, 145) 0%, rgb(56, 79, 191) 100%), linear-gradient(90deg, rgb(56, 79, 191) 0%, rgb(56, 79, 191) 100%)" }}
>
<div className="bg-clip-padding border-0 border-[transparent] border-solid box-border size-[12px]" />
</div>
<div
className="basis-0 grow h-[12px] min-h-px min-w-px relative shrink-0"
style={{ backgroundImage: "linear-gradient(rgb(31, 43, 145) 0%, rgb(56, 79, 191) 100%), linear-gradient(90deg, rgb(56, 79, 191) 0%, rgb(56, 79, 191) 100%)" }}
>
<div className="bg-clip-padding border-0 border-[transparent] border-solid box-border h-[12px] w-full" />
</div>
</div>
</div>
<div
className="basis-0 grow min-h-px min-w-px relative shrink-0 w-[12px]"
style={{ backgroundImage: "linear-gradient(rgb(31, 43, 145) 0%, rgb(56, 79, 191) 100%), linear-gradient(90deg, rgb(56, 79, 191) 0%, rgb(56, 79, 191) 100%)" }}
>
<div className="bg-clip-padding border-0 border-[transparent] border-solid box-border h-full w-[12px]" />
</div>
</div>
</div>
</div>
<div className="absolute h-[2px] left-[86px] top-[690px] w-[338px]">
<img alt="" className="absolute inset-0 max-w-none object-50%-50% object-cover pointer-events-none size-full" src={imgContainer} />
</div>
</div>
<div className="absolute contents left-[24px] top-[22px]">
<div className="absolute content-stretch flex flex-col gap-[4px] h-[28px] items-start left-[24px] top-[24px] w-[40px]">
<div className="h-[12px] relative shrink-0 w-[40px]">
<div className="content-stretch flex gap-[4px] h-[12px] items-start relative w-[40px]">
<div
className="relative shrink-0 size-[12px]"
style={{ backgroundImage: "linear-gradient(rgb(31, 43, 145) 0%, rgb(56, 79, 191) 100%), linear-gradient(90deg, rgb(56, 79, 191) 0%, rgb(56, 79, 191) 100%)" }}
>
<div className="bg-clip-padding border-0 border-[transparent] border-solid box-border size-[12px]" />
</div>
<div
className="relative shrink-0 size-[12px]"
style={{ backgroundImage: "linear-gradient(rgb(31, 43, 145) 0%, rgb(56, 79, 191) 100%), linear-gradient(90deg, rgb(56, 79, 191) 0%, rgb(56, 79, 191) 100%)" }}
>
<div className="bg-clip-padding border-0 border-[transparent] border-solid box-border size-[12px]" />
</div>
</div>
</div>
<div
className="basis-0 grow min-h-px min-w-px relative shrink-0 w-[12px]"
style={{ backgroundImage: "linear-gradient(rgb(31, 43, 145) 0%, rgb(56, 79, 191) 100%), linear-gradient(90deg, rgb(56, 79, 191) 0%, rgb(56, 79, 191) 100%)" }}
>
<div className="bg-clip-padding border-0 border-[transparent] border-solid box-border h-full w-[12px]" />
</div>
</div>
<div className="absolute content-stretch flex flex-col gap-[4px] h-[28px] items-end left-[442px] top-[24px] w-[40px]">
<div className="h-[12px] relative shrink-0 w-[28px]">
<div className="content-stretch flex gap-[4px] h-[12px] items-start relative w-[28px]">
<div
className="relative shrink-0 size-[12px]"
style={{ backgroundImage: "linear-gradient(rgb(31, 43, 145) 0%, rgb(56, 79, 191) 100%), linear-gradient(90deg, rgb(56, 79, 191) 0%, rgb(56, 79, 191) 100%)" }}
>
<div className="bg-clip-padding border-0 border-[transparent] border-solid box-border size-[12px]" />
</div>
<div
className="basis-0 grow h-[12px] min-h-px min-w-px relative shrink-0"
style={{ backgroundImage: "linear-gradient(rgb(31, 43, 145) 0%, rgb(56, 79, 191) 100%), linear-gradient(90deg, rgb(56, 79, 191) 0%, rgb(56, 79, 191) 100%)" }}
>
<div className="bg-clip-padding border-0 border-[transparent] border-solid box-border h-[12px] w-full" />
</div>
</div>
</div>
<div
className="basis-0 grow min-h-px min-w-px relative shrink-0 w-[12px]"
style={{ backgroundImage: "linear-gradient(rgb(31, 43, 145) 0%, rgb(56, 79, 191) 100%), linear-gradient(90deg, rgb(56, 79, 191) 0%, rgb(56, 79, 191) 100%)" }}
>
<div className="bg-clip-padding border-0 border-[transparent] border-solid box-border h-full w-[12px]" />
</div>
</div>
<div className="absolute h-[2px] left-[84px] top-[22px] w-[338px]">
<img alt="" className="absolute inset-0 max-w-none object-50%-50% object-cover pointer-events-none size-full" src={imgContainer} />
</div>
</div>
</div>
<div
className="box-border content-stretch flex flex-col gap-[32px] h-[96px] items-center p-[24px] relative shrink-0 w-full"
data-node-id="388:22061"
>
<div
className="basis-0 content-stretch flex gap-[12px] grow items-start justify-center min-h-px min-w-px overflow-clip relative shrink-0 w-full"
data-name="Actions"
data-node-id="388:22062"
>
<button
type="button"
className="bg-white border border-[#8c95a1] border-solid box-border content-stretch flex gap-[4px] h-[48px] items-center justify-center px-[16px] py-[3px] relative rounded-[10px] shrink-0 w-[136px]"
>
<div className="relative shrink-0 size-[20px]" data-name="Interface, Essential/download-arrow">
<div className="absolute inset-[-0.02%]">
<img alt="" className="block max-w-none size-full" src={img1} />
</div>
</div>
<p className="font-['Pretendard:SemiBold',sans-serif] leading-[1.5] not-italic relative shrink-0 text-[#4c5561] text-[16px] text-center text-nowrap whitespace-pre">
다운로드
</p>
</button>
<button
type="button"
className="bg-[#ecf0ff] box-border content-stretch flex gap-[4px] h-[48px] items-center justify-center px-[16px] py-[8px] relative rounded-[10px] shrink-0 w-[136px]"
>
<p className="font-['Pretendard:SemiBold',sans-serif] leading-[1.5] not-italic relative shrink-0 text-[#384fbf] text-[16px] text-center text-nowrap whitespace-pre">
출력
</p>
</button>
</div>
</div>
</div>
);
}

122
src/app/menu/results/FigmaFeedbackContent.tsx Normal file
View File

@@ -0,0 +1,122 @@
/* eslint-disable @next/next/no-img-element */
"use client";
import React from "react";
type Props = {
onClose: () => void;
learnerName?: string;
instructorName?: string;
scoreText?: string;
};
const img = "http://localhost:3845/assets/7adf9a5e43b6c9e5f9bee6adfee64e85eabac44a.svg";
const img1 = "http://localhost:3845/assets/498f1d9877c6da3dadf581f98114a7f15bfc6769.svg";
export default function FigmaFeedbackContent({
onClose,
learnerName = "{학습자명}",
instructorName = "이공필",
scoreText = "{점수}",
}: Props) {
return (
<div
className="bg-white border border-[#dee1e6] border-solid box-border content-stretch flex flex-col items-center relative rounded-[12px] w-[640px] max-w-[90vw]"
data-name="Frame"
data-node-id="270:9120"
role="dialog"
aria-modal="true"
>
<div
className="box-border content-stretch flex gap-[10px] items-center overflow-clip p-[24px] relative shrink-0 w-full"
data-name="header"
data-node-id="270:9121"
>
<div
className="basis-0 flex flex-col font-['Pretendard:Bold',sans-serif] grow h-[32px] justify-center leading-[0] min-h-px min-w-px not-italic relative shrink-0 text-[#333c47] text-[20px]"
data-node-id="270:9123"
>
<p className="leading-[1.5]">{`${learnerName}님의 피드백`}</p>
</div>
<button
type="button"
aria-label="닫기"
onClick={onClose}
className="overflow-clip relative shrink-0 size-[24px]"
data-name="x-close-lg"
data-node-id="270:9124"
>
<div
className="absolute left-[calc(50%-0.02px)] size-[15.167px] top-[calc(50%-0.02px)] translate-x-[-50%] translate-y-[-50%]"
data-name="Icon (Stroke)"
data-node-id="I270:9124;1422:243"
>
<div
className="absolute inset-0"
style={{ "--fill-0": "rgba(51, 60, 71, 1)" } as React.CSSProperties}
>
<img alt="" className="block max-w-none size-full" src={img} />
</div>
</div>
</button>
</div>
<div
className="box-border content-stretch flex flex-col gap-[16px] items-center px-[24px] py-0 relative shrink-0 w-full"
data-node-id="270:9126"
>
<div
className="bg-gray-50 border border-[#dee1e6] border-solid box-border content-stretch flex flex-col gap-[8px] items-start justify-center p-[24px] relative rounded-[16px] shrink-0 w-full"
data-node-id="270:9127"
>
<div
className="content-stretch flex gap-[10px] items-center justify-center relative shrink-0"
data-node-id="270:9128"
>
<p
className="font-['Pretendard:Bold',sans-serif] h-[23px] leading-[1.5] not-italic relative shrink-0 text-[#4c5561] text-[15px] w-full"
data-node-id="270:9129"
>
평가 강사: {instructorName}
</p>
</div>
<p
className="font-['Pretendard:Regular',sans-serif] leading-[1.5] not-italic relative shrink-0 text-[#4c5561] text-[15px] whitespace-pre-wrap"
data-node-id="270:9130"
>
{`- ${learnerName}님, 총점 ${scoreText}점으로 합격하셨습니다. 학습 흐름이 안정적이며 이해도가 좋습니다.`}
</p>
</div>
</div>
<div
className="box-border content-stretch flex flex-col gap-[32px] h-[96px] items-center p-[24px] relative shrink-0 w-full"
data-node-id="270:9131"
>
<div
className="basis-0 content-stretch flex gap-[12px] grow items-start justify-center min-h-px min-w-px overflow-clip relative shrink-0 w-full"
data-name="Actions"
data-node-id="270:9132"
>
<button
type="button"
onClick={onClose}
className="bg-[#1f2b91] box-border content-stretch flex flex-col h-[48px] items-center justify-center px-[16px] py-0 relative rounded-[10px] shrink-0 w-[284px] cursor-pointer"
data-name="Primary"
data-node-id="270:9134"
>
<div className="h-0 relative shrink-0 w-[82px]" data-name="Min Width" data-node-id="I270:9134;4356:4636">
<img alt="" className="block max-w-none size-full" src={img1} />
</div>
<p
className="font-['Pretendard:SemiBold',sans-serif] leading-[1.5] not-italic relative shrink-0 text-[16px] text-center text-nowrap text-white whitespace-pre"
data-node-id="I270:9134;4356:4637"
>
확인
</p>
</button>
</div>
</div>
</div>
);
}

54
src/app/menu/results/page.tsx
View File

@@ -1,3 +1,9 @@
"use client";
import { useState } from "react";
import FeedbackModal from "./FeedbackModal";
import CertificateModal from "./CertificateModal";
type ResultRow = {
programTitle: string;
courseTitle: string;
@@ -11,14 +17,14 @@ type ResultRow = {
const mockResults: ResultRow[] = [
{
programTitle: "XR 안전 기본 과정",
courseTitle: "{강좌명}",
courseTitle: "기본 안전 교육",
completedAt: "2025-09-10",
score: "-",
instructor: "이공필",
},
{
programTitle: "건설 현장 안전 실무",
courseTitle: "{강좌명}",
courseTitle: "비계 설치 점검",
completedAt: "2025-09-10",
score: "70 / 100",
instructor: "이공필",
@@ -27,7 +33,7 @@ const mockResults: ResultRow[] = [
},
{
programTitle: "전기 설비 위험성 평가",
courseTitle: "{강좌명}",
courseTitle: "분전반 작업 안전",
completedAt: "2025-09-10",
score: "70 / 100",
instructor: "이공필",
@@ -37,6 +43,19 @@ const mockResults: ResultRow[] = [
];
export default function ResultsPage() {
const [isFeedbackOpen, setIsFeedbackOpen] = useState(false);
const [selected, setSelected] = useState<ResultRow | null>(null);
const [isCertOpen, setIsCertOpen] = useState(false);
function openFeedback(row: ResultRow) {
setSelected(row);
setIsFeedbackOpen(true);
}
function openCertificate(row: ResultRow) {
setSelected(row);
setIsCertOpen(true);
}
return (
<main className="flex w-full flex-col">
<div className="flex h-[100px] items-center px-8">
@@ -71,7 +90,7 @@ export default function ResultsPage() {
{mockResults.map((row, idx) => (
<tr
key={`${row.programTitle}-${idx}`}
className={idx === 1 ? "h-12 bg-[rgba(236,240,255,0.5)]" : "h-12"}
className="h-12"
>
<td className="border-t border-r border-[#dee1e6] px-4 text-[15px] leading-[1.5] text-[#1b2027]">
{row.programTitle}
@@ -90,18 +109,26 @@ export default function ResultsPage() {
</td>
<td className="border-t border-r border-[#dee1e6] px-4 text-center text-[15px] leading-[1.5] text-[#1b2027]">
{row.feedbackLink ? (
<a href={row.feedbackLink} className="text-[12px] text-blue-500 underline underline-offset-[3px]">
<button
type="button"
onClick={() => openFeedback(row)}
className="text-[12px] text-blue-500 underline underline-offset-[3px] cursor-pointer"
>
확인하기
</a>
</button>
) : (
"-"
)}
</td>
<td className="border-t border-[#dee1e6] px-4 text-center text-[15px] leading-[1.5] text-[#1b2027]">
{row.certificateLink ? (
<a href={row.certificateLink} className="text-[12px] text-blue-500 underline underline-offset-[3px]">
<button
type="button"
onClick={() => openCertificate(row)}
className="text-[12px] text-blue-500 underline underline-offset-[3px] cursor-pointer"
>
확인하기
</a>
</button>
) : (
"-"
)}
@@ -113,6 +140,17 @@ export default function ResultsPage() {
</div>
</div>
</section>
<FeedbackModal
open={isFeedbackOpen}
onClose={() => setIsFeedbackOpen(false)}
learnerName="홍길동"
instructorName={selected?.instructor}
scoreText={selected?.score?.split(" / ")[0] ?? "0"}
/>
<CertificateModal
open={isCertOpen}
onClose={() => setIsCertOpen(false)}
/>
</main>
);
}