169 lines
11 KiB
TypeScript
169 lines
11 KiB
TypeScript
|
'use client';
|
||
|
|
|
||
|
|
const imgImage2 = "/imgs/image-2.png";
|
||
|
|
const imgLine58 = "/imgs/line-58.svg";
|
||
|
|
const img = "/imgs/asset-base.svg";
|
||
|
|
const imgArrowsDiagramsArrow = "/imgs/arrows-diagrams-arrow.svg";
|
||
|
|
const imgIcon = "/imgs/icon.svg";
|
||
|
|
const imgGroup = "/imgs/group.svg";
|
||
|
|
const imgEllipse2 = "/imgs/ellipse-2.svg";
|
||
|
|
const imgMusicAudioPlay = "/imgs/music-audio-play.svg";
|
||
|
|
const imgIcon1 = "/imgs/icon-1.svg";
|
||
|
|
const imgIcon2 = "/imgs/icon-2.svg";
|
||
|
|
const imgIcon3 = "/imgs/icon-3.svg";
|
||
|
|
const imgIcon4 = "/imgs/icon-4.svg";
|
||
|
|
|
||
|
|
export default function FigmaSelectedLessonPage() {
|
||
|
|
return (
|
||
|
|
<div className="bg-white content-stretch flex flex-col items-center relative size-full">
|
||
|
|
<div className="content-stretch flex flex-col items-start max-w-[1440px] relative shrink-0 w-[1440px]">
|
||
|
|
<div className="box-border content-stretch flex gap-[10px] h-[100px] items-center px-[32px] py-0 relative shrink-0 w-full">
|
||
|
|
<div className="basis-0 content-stretch flex gap-[12px] grow items-center min-h-px min-w-px relative shrink-0">
|
||
|
|
<div className="relative shrink-0 size-[32px]">
|
||
|
|
<img alt="" className="block max-w-none size-full" src={imgArrowsDiagramsArrow} />
|
||
|
|
</div>
|
||
|
|
<div className="basis-0 content-stretch flex flex-col grow items-start justify-center leading-[1.5] min-h-px min-w-px not-italic relative shrink-0">
|
||
|
|
<p className="font-['Pretendard:SemiBold',sans-serif] relative shrink-0 text-[#6c7682] text-[16px] w-full">
|
||
|
|
원자로 운전 및 계통
|
||
|
|
</p>
|
||
|
|
<p className="font-['Pretendard:Bold',sans-serif] relative shrink-0 text-[#1b2027] text-[24px] w-full">
|
||
|
|
6. 원자로 시동, 운전 및 정지 절차
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div className="content-stretch flex gap-[20px] h-[81px] items-center justify-center relative shrink-0">
|
||
|
|
<div className="relative shrink-0 w-[52px]">
|
||
|
|
<div className="bg-clip-padding border-0 border-[transparent] border-solid box-border content-stretch flex flex-col gap-[4px] items-center relative w-[52px]">
|
||
|
|
<div className="bg-[#384fbf] relative rounded-[2.23696e+07px] shrink-0 size-[32px]">
|
||
|
|
<div className="bg-clip-padding border-0 border-[transparent] border-solid box-border content-stretch flex items-center justify-center relative size-[32px]">
|
||
|
|
<p className="font-['Pretendard:Bold',sans-serif] leading-[18px] not-italic relative shrink-0 text-[14px] text-nowrap text-white whitespace-pre">
|
||
|
|
1
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<p className="font-['Pretendard:SemiBold',sans-serif] leading-[1.5] not-italic relative shrink-0 text-[#384fbf] text-[14px] text-nowrap whitespace-pre">
|
||
|
|
강좌 수강
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="relative shrink-0 size-[24px]">
|
||
|
|
<img alt="" className="block max-w-none size-full" src={imgIcon} />
|
||
|
|
</div>
|
||
|
|
<div className="relative shrink-0 w-[52px]">
|
||
|
|
<div className="bg-clip-padding border-0 border-[transparent] border-solid box-border content-stretch flex flex-col gap-[4px] items-center relative w-[52px]">
|
||
|
|
<div className="bg-[#dee1e6] relative rounded-[2.23696e+07px] shrink-0 size-[32px]">
|
||
|
|
<div className="bg-clip-padding border-0 border-[transparent] border-solid box-border content-stretch flex items-center justify-center relative size-[32px]">
|
||
|
|
<p className="font-['Pretendard:Bold',sans-serif] leading-[18px] not-italic relative shrink-0 text-[#6c7682] text-[14px] text-nowrap whitespace-pre">
|
||
|
|
2
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<p className="font-['Pretendard:SemiBold',sans-serif] leading-[1.5] not-italic relative shrink-0 text-[#6c7682] text-[14px] text-nowrap whitespace-pre">
|
||
|
|
XR 실습
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="relative shrink-0 size-[24px]">
|
||
|
|
<img alt="" className="block max-w-none size-full" src={imgIcon} />
|
||
|
|
</div>
|
||
|
|
<div className="relative shrink-0 w-[52px]">
|
||
|
|
<div className="bg-clip-padding border-0 border-[transparent] border-solid box-border content-stretch flex flex-col gap-[4px] items-center relative w-[52px]">
|
||
|
|
<div className="bg-[#dee1e6] relative rounded-[2.23696e+07px] shrink-0 size-[32px]">
|
||
|
|
<div className="bg-clip-padding border-0 border-[transparent] border-solid box-border content-stretch flex items-center justify-center relative size-[32px]">
|
||
|
|
<p className="font-['Pretendard:Bold',sans-serif] leading-[18px] not-italic relative shrink-0 text-[#6c7682] text-[14px] text-nowrap whitespace-pre">
|
||
|
|
3
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<p className="font-['Pretendard:SemiBold',sans-serif] leading-[1.5] not-italic relative shrink-0 text-[#6c7682] text-[14px] text-nowrap whitespace-pre">
|
||
|
|
문제 풀기
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="box-border content-stretch flex flex-col gap-[24px] items-center overflow-clip pb-[80px] pt-[24px] px-8 relative rounded-[8px] shrink-0 w-full">
|
||
|
|
<div className="aspect-[1920/1080] bg-black overflow-clip relative rounded-[8px] shrink-0 w-full">
|
||
|
|
<div className="absolute left-1/2 size-[120px] top-1/2 translate-x-[-50%] translate-y-[-50%]">
|
||
|
|
<div className="absolute contents inset-0">
|
||
|
|
<img alt="" className="block max-w-none size-full" src={imgGroup} />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="absolute bg-gradient-to-t bottom-0 box-border content-stretch flex flex-col from-[rgba(0,0,0,0.8)] gap-[20px] items-center justify-center left-[-0.5px] px-[16px] py-[24px] to-[rgba(0,0,0,0)] w-[1376px]">
|
||
|
|
<div className="bg-[#333c47] h-[4px] relative rounded-[3.35544e+07px] shrink-0 w-full">
|
||
|
|
<div className="absolute left-0 size-[12px] top-1/2 translate-y-[-50%]">
|
||
|
|
<img alt="" className="block max-w-none size-full" src={imgEllipse2} />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="content-stretch flex h-[32px] items-center justify-between relative shrink-0 w-full">
|
||
|
|
<div className="relative shrink-0">
|
||
|
|
<div className="bg-clip-padding border-0 border-[transparent] border-solid box-border content-stretch flex gap-[8px] items-center relative">
|
||
|
|
<div className="content-stretch flex gap-[16px] items-center relative shrink-0">
|
||
|
|
<div className="relative shrink-0 size-[32px]">
|
||
|
|
<img alt="" className="block max-w-none size-full" src={imgMusicAudioPlay} />
|
||
|
|
</div>
|
||
|
|
<div className="content-stretch flex gap-[8px] h-[32px] items-center relative shrink-0 w-[120px]">
|
||
|
|
<div className="relative rounded-[4px] shrink-0 size-[32px]">
|
||
|
|
<div className="bg-clip-padding border-0 border-[transparent] border-solid box-border content-stretch flex items-center justify-center relative size-[32px]">
|
||
|
|
<div className="relative shrink-0 size-[18px]">
|
||
|
|
<img alt="" className="block max-w-none size-full" src={imgIcon1} />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="basis-0 grow h-[4px] min-h-px min-w-px relative rounded-[3.35544e+07px] shrink-0">
|
||
|
|
<div className="bg-clip-padding border-0 border-[transparent] border-solid box-border h-[4px] w-full" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<p className="font-['Pretendard:Medium',sans-serif] leading-[19.5px] not-italic relative shrink-0 text-[13px] text-nowrap text-white whitespace-pre">
|
||
|
|
0:00 / 12:26
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="relative shrink-0">
|
||
|
|
<div className="bg-clip-padding border-0 border-[transparent] border-solid box-border content-stretch flex gap-[12px] items-center relative">
|
||
|
|
<div className="bg-[#333c47] box-border content-stretch flex gap-[4px] h-[32px] items-center justify-center px-[16px] py-[3px] relative rounded-[6px] shrink-0 w-[112px]">
|
||
|
|
<div className="relative shrink-0 size-[16px]">
|
||
|
|
<img alt="" className="block max-w-none size-full" src={imgIcon2} />
|
||
|
|
</div>
|
||
|
|
<p className="font-['Pretendard:Medium',sans-serif] leading-[1.5] not-italic relative shrink-0 text-[14px] text-center text-nowrap text-white whitespace-pre">
|
||
|
|
이전 강의
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div className="bg-[#333c47] box-border content-stretch flex gap-[4px] h-[32px] items-center justify-center px-[16px] py-[3px] relative rounded-[6px] shrink-0 w-[112px]">
|
||
|
|
<p className="font-['Pretendard:Medium',sans-serif] leading-[1.5] not-italic relative shrink-0 text-[14px] text-center text-nowrap text-white whitespace-pre">
|
||
|
|
다음 강의
|
||
|
|
</p>
|
||
|
|
<div className="flex items-center justify-center relative shrink-0">
|
||
|
|
<div className="flex-none rotate-[180deg] scale-y-[-100%]">
|
||
|
|
<div className="relative size-[16px]">
|
||
|
|
<img alt="" className="block max-w-none size-full" src={imgIcon3} />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="content-stretch flex items-center justify-center relative rounded-[4px] shrink-0 size-[32px]">
|
||
|
|
<div className="relative shrink-0 size-[18px]">
|
||
|
|
<img alt="" className="block max-w-none size-full" src={imgIcon4} />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="bg-[#fff9ee] border border-[#ffdd82] border-solid box-border content-stretch flex flex-col h-[55px] items-start pb-px pt-[17px] px-[17px] relative rounded-[8px] shrink-0 w-full">
|
||
|
|
<ul className="[white-space-collapse:collapse] block font-['Pretendard:Medium',sans-serif] leading-[0] not-italic relative shrink-0 text-[#333c47] text-[14px] text-nowrap">
|
||
|
|
<li className="ms-[21px]">
|
||
|
|
<span className="leading-[1.5]">강좌 수강 완료 후 문제를 풀어야 하니 집중해서 강좌 수강해 주세요.</span>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
|