motaju/xrlms
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
3ef3990f1dc50ffcb6104e3a150aac551c24bacd
xrlms/src/app/menu/results/FigmaCertificateContent.tsx

347 lines
19 KiB
TypeScript
Raw Normal View History

므하
2025-11-18 09:09:09 +09:00
/* eslint-disable @next/next/no-img-element */
"use client";
import React from "react";
type Props = {
onClose: () => void;
};
오..
2025-11-18 10:42:48 +09:00
const imgImage1 = "/imgs/image-1.png";
const imgContainer = "/imgs/certificate-container.png";
const img = "/imgs/certificate-asset.svg";
const img1 = "/imgs/certificate-asset-1.svg";
므하
2025-11-18 09:09:09 +09:00
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>
);
}
Reference in New Issue Copy Permalink