280 lines
15 KiB
TypeScript
280 lines
15 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from 'react';
|
|
import { useRouter } from 'next/navigation';
|
|
import Image from 'next/image';
|
|
import LoginPage from './login/page';
|
|
import logo from './logo.svg';
|
|
|
|
const imgImage2 = "http://localhost:3845/assets/89fda8e949171025b1232bae70fc9d442e4e70c8.png";
|
|
const imgImage7 = "http://localhost:3845/assets/a4e4d09643b890b56084560cc24d6e532a03487b.png";
|
|
const imgLine2 = "http://localhost:3845/assets/6ee8cf4ebb6bc2adb14aab8c9940b3002c20af35.svg";
|
|
const imgFrame2616314 = "http://localhost:3845/assets/17f021e324ee315bdf2fe96554a2260813957042.svg";
|
|
const imgRectangle1737 = "http://localhost:3845/assets/ae523ea10901c105fdbfda27ed21dd658fc4a7c2.png";
|
|
const imgRectangle1738 = "http://localhost:3845/assets/50e850999bbdd551763a187d402169c28ffecec5.png";
|
|
|
|
export default function HomePage() {
|
|
const router = useRouter();
|
|
const [isLoggedIn, setIsLoggedIn] = useState(false);
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
const [currentHeroSlide, setCurrentHeroSlide] = useState(0);
|
|
|
|
// 임시 데이터 - 실제로는 API에서 가져올 데이터
|
|
const [courses, setCourses] = useState([
|
|
{ id: 1, title: '원자로 운전 및 계통', image: imgRectangle1737 },
|
|
{ id: 2, title: '핵 연료', image: imgRectangle1738 },
|
|
{ id: 3, title: '방사선 안전', image: imgRectangle1737 },
|
|
{ id: 4, title: '방사성 폐기물', image: imgRectangle1737 },
|
|
]);
|
|
|
|
const [myCourses, setMyCourses] = useState([
|
|
{ id: 1, title: '원자로 기본 원리와 주요 계통 이해 - 이론 1', date: '2025-12-12(화)' },
|
|
{ id: 2, title: '원자로 기동 및 정상운전 절차 - 이론2', date: '2025-12-12(화)' },
|
|
{ id: 3, title: '비상 시 운전원 조치와 안전 계통 운용', date: '2025-12-12(화)' },
|
|
{ id: 4, title: '운전 사례 분석 및 시뮬레이션 실습', date: '2025-12-12(화)' },
|
|
{ id: 5, title: '핵분열과 핵연로 주기 이해', date: '2025-12-12(화)' },
|
|
{ id: 6, title: '핵연료 제조 공정 및 특성', date: '2025-12-12(화)' },
|
|
{ id: 7, title: '핵연로 성능 평가와 열수력 해석', date: '2025-12-12(화)' },
|
|
]);
|
|
|
|
const [notices, setNotices] = useState([
|
|
{ id: 1, title: '[점검] 방사선 폐기 VR 실습 서버 정기점검 안내', date: '2025-12-12(화)' },
|
|
{ id: 2, title: '[점검] 방사선 폐기 VR 실습 서버 정기점검 안내', date: '2025-12-12(화)' },
|
|
{ id: 3, title: '[점검] 방사선 폐기 VR 실습 서버 정기점검 안내', date: '2025-12-12(화)' },
|
|
{ id: 4, title: '[점검] 방사선 폐기 VR 실습 서버 정기점검 안내', date: '2025-12-12(화)' },
|
|
{ id: 5, title: '[점검] 방사선 폐기 VR 실습 서버 정기점검 안내', date: '2025-12-12(화)' },
|
|
{ id: 6, title: '[점검] 방사선 폐기 VR 실습 서버 정기점검 안내', date: '2025-12-12(화)' },
|
|
{ id: 7, title: '[점검] 방사선 폐기 VR 실습 서버 정기점검 안내', date: '2025-12-12(화)' },
|
|
{ id: 8, title: '[점검] 방사선 폐기 VR 실습 서버 정기점검 안내', date: '2025-12-12(화)' },
|
|
{ id: 9, title: '[점검] 방사선 폐기 VR 실습 서버 정기점검 안내', date: '2025-12-12(화)' },
|
|
{ id: 10, title: '[점검] 방사선 폐기 VR 실습 서버 정기점검 안내', date: '2025-12-12(화)' },
|
|
]);
|
|
|
|
useEffect(() => {
|
|
// 로그인 상태 확인
|
|
const loginStatus = localStorage.getItem('isLoggedIn') === 'true';
|
|
setIsLoggedIn(loginStatus);
|
|
setIsLoading(false);
|
|
}, []);
|
|
|
|
if (isLoading) {
|
|
return null; // 로딩 중
|
|
}
|
|
|
|
// 로그인되지 않았으면 로그인 페이지 표시
|
|
if (!isLoggedIn) {
|
|
return <LoginPage />;
|
|
}
|
|
|
|
// 로그인되었으면 메인 페이지 표시
|
|
return (
|
|
<div className="bg-white relative min-h-screen w-full pb-[199px]">
|
|
{/* 헤더 */}
|
|
<header className="absolute content-stretch flex items-center justify-between left-[332px] top-[43px] w-[1332px]">
|
|
<div className="content-stretch flex gap-[99px] items-center relative shrink-0">
|
|
{/* 로고 */}
|
|
<button
|
|
onClick={() => router.push('/')}
|
|
className="h-[74px] relative shrink-0 w-[72px] cursor-pointer"
|
|
>
|
|
<Image
|
|
src={logo}
|
|
alt="로고"
|
|
className="w-full h-full object-contain"
|
|
width={72}
|
|
height={74}
|
|
/>
|
|
</button>
|
|
{/* 메뉴 */}
|
|
<div className="content-stretch flex gap-[24px] items-center relative shrink-0">
|
|
<button
|
|
onClick={() => router.push('/lecturelist')}
|
|
className="content-stretch flex gap-[150px] items-center relative shrink-0 cursor-pointer group transition-colors"
|
|
>
|
|
<div className="box-border content-stretch flex gap-[10px] items-center justify-center p-[10px] relative shrink-0">
|
|
<p className="font-bold leading-[normal] not-italic relative shrink-0 text-[#515151] text-[24px] text-nowrap whitespace-pre group-hover:text-blue-500 transition-colors">
|
|
교육 과정 목록
|
|
</p>
|
|
</div>
|
|
</button>
|
|
<button
|
|
onClick={() => router.push('/studydata')}
|
|
className="content-stretch flex gap-[150px] items-center relative shrink-0 cursor-pointer group transition-colors"
|
|
>
|
|
<div className="box-border content-stretch flex gap-[10px] items-center justify-center p-[10px] relative shrink-0">
|
|
<p className="font-bold leading-[normal] not-italic relative shrink-0 text-[#515151] text-[24px] text-nowrap whitespace-pre group-hover:text-blue-500 transition-colors">
|
|
학습 자료실
|
|
</p>
|
|
</div>
|
|
</button>
|
|
<button
|
|
onClick={() => {
|
|
// 공지사항 섹션으로 스크롤
|
|
window.scrollTo({ top: 1213, behavior: 'smooth' });
|
|
}}
|
|
className="content-stretch flex gap-[150px] items-center relative shrink-0 cursor-pointer group transition-colors"
|
|
>
|
|
<div className="box-border content-stretch flex gap-[10px] items-center justify-center p-[10px] relative shrink-0">
|
|
<p className="font-bold leading-[normal] not-italic relative shrink-0 text-[#515151] text-[24px] text-nowrap whitespace-pre group-hover:text-blue-500 transition-colors">
|
|
공지사항
|
|
</p>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
{/* 사용자 메뉴 */}
|
|
<div className="content-stretch flex gap-[20px] items-center relative shrink-0">
|
|
<button
|
|
onClick={() => router.push('/myinfo')}
|
|
className="box-border content-stretch flex gap-[10px] items-center justify-center p-[10px] relative shrink-0 cursor-pointer group transition-colors"
|
|
>
|
|
<p className="font-medium leading-[normal] not-italic relative shrink-0 text-[#515151] text-[18px] text-nowrap whitespace-pre group-hover:text-blue-500 transition-colors">
|
|
내 강좌실
|
|
</p>
|
|
</button>
|
|
<button
|
|
onClick={() => {
|
|
localStorage.removeItem('isLoggedIn');
|
|
setIsLoggedIn(false);
|
|
router.push('/');
|
|
}}
|
|
className="box-border content-stretch flex gap-[10px] items-center justify-center p-[10px] relative shrink-0 cursor-pointer group transition-colors"
|
|
>
|
|
<p className="font-medium leading-[normal] not-italic relative shrink-0 text-[#515151] text-[18px] text-nowrap whitespace-pre group-hover:text-blue-500 transition-colors">
|
|
로그아웃
|
|
</p>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
{/* 구분선 */}
|
|
<div className="absolute h-0 left-1/2 top-[150px] translate-x-[-50%] w-[1920px]">
|
|
<div className="absolute bottom-0 left-0 right-0 top-[-1px]">
|
|
<img alt="" className="block max-w-none size-full" src={imgLine2} />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Hero 배너 */}
|
|
<div className="absolute h-[402px] left-[-1px] top-[272px] w-full bg-[#b9b9b9]">
|
|
{/* TODO: DB에서 이미지를 가져와서 표시 */}
|
|
</div>
|
|
|
|
{/* 전체 교육 과정 (4개) */}
|
|
<div className="absolute content-stretch flex flex-col gap-[7px] items-start justify-end left-[43px] top-[748px] w-[1435px]">
|
|
<div className="content-stretch flex gap-[150px] items-center relative shrink-0">
|
|
<div className="box-border content-stretch flex gap-[10px] items-center justify-center p-[10px] relative shrink-0">
|
|
<p className="font-bold leading-[normal] not-italic relative shrink-0 text-[#515151] text-[28px] text-nowrap whitespace-pre">
|
|
전체 교육 과정 ({courses.length}개)
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Hero 배너 인디케이터 버튼 */}
|
|
<div className="absolute h-[17px] left-[calc(43.75%+28.313px)] top-[692px] w-[128px] flex gap-[20px] items-center justify-center">
|
|
{[0, 1, 2, 3].map((index) => (
|
|
<button
|
|
key={index}
|
|
onClick={() => setCurrentHeroSlide(index)}
|
|
className={`h-[17px] w-[17px] rounded-full transition-colors ${currentHeroSlide === index ? 'bg-[#050404]' : 'bg-[#D9D9D9]'
|
|
}`}
|
|
aria-label={`Hero 배너 ${index + 1}번 슬라이드로 이동`}
|
|
/>
|
|
))}
|
|
</div>
|
|
|
|
{/* 교육 과정 카드들 - 데이터가 있을 때 */}
|
|
{courses.length > 0 ? (
|
|
<div className="absolute content-stretch flex gap-[23px] items-center left-[43px] top-[817px]">
|
|
{courses.map((course) => (
|
|
<div key={course.id} className="content-stretch flex flex-col gap-[18px] h-[326px] items-start relative shrink-0 w-[437px]">
|
|
<div className="h-[253px] relative shrink-0 w-full bg-[#b9b9b9]">
|
|
{course.image ? (
|
|
<div aria-hidden="true" className="absolute inset-0 pointer-events-none">
|
|
<img alt="" className="absolute max-w-none object-50%-50% object-cover size-full" src={course.image} />
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
<div className="content-stretch flex flex-col gap-[10px] items-start relative shrink-0 w-[392px]">
|
|
<p className="font-bold leading-[normal] not-italic relative shrink-0 text-[#515151] text-[20px] w-full">
|
|
{course.title}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : (
|
|
/* 등록된 교육 과정이 없습니다 메시지 - 데이터가 없을 때 */
|
|
<p className="absolute font-medium leading-[normal] left-[calc(43.75%+122.563px)] not-italic text-[#b9b9b9] text-[18px] text-center top-[964px] translate-x-[-50%] w-[268.5px]">
|
|
등록된 교육 과정이 없습니다.
|
|
</p>
|
|
)}
|
|
|
|
{/* 나의 수강 강좌 목록 */}
|
|
<div className="absolute content-stretch flex flex-col gap-[7px] items-start justify-end left-[43px] top-[1213px] w-[866px]">
|
|
<div className="content-stretch flex gap-[150px] items-center relative shrink-0">
|
|
<div className="box-border content-stretch flex gap-[10px] items-center justify-center p-[10px] relative shrink-0">
|
|
<p className="font-bold leading-[normal] not-italic relative shrink-0 text-[#515151] text-[28px] text-nowrap whitespace-pre">
|
|
나의 수강 강좌 목록 ({myCourses.length}개)
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="border border-[#b9b9b9] border-solid box-border content-stretch flex flex-col items-start p-[20px] relative rounded-[10px] shrink-0 w-full">
|
|
{myCourses.length > 0 ? (
|
|
myCourses.map((course) => (
|
|
<div key={course.id} className="box-border content-stretch flex font-medium gap-[269px] items-center justify-center leading-[normal] not-italic p-[10px] relative shrink-0 text-[#515151] text-[18px] w-full">
|
|
<p className="relative shrink-0 w-[342px]">
|
|
{course.title}
|
|
</p>
|
|
<p className="basis-0 grow min-h-px min-w-px relative shrink-0 text-right">
|
|
{course.date}
|
|
</p>
|
|
</div>
|
|
))
|
|
) : (
|
|
<div className="box-border content-stretch flex gap-[269px] items-center justify-center p-[10px] relative shrink-0 w-full">
|
|
<p className="basis-0 font-medium grow leading-[normal] min-h-px min-w-px not-italic relative shrink-0 text-[#b9b9b9] text-[18px]">
|
|
수강 중인 강좌가 없습니다.
|
|
</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* 공지사항 */}
|
|
<div className="absolute content-stretch flex flex-col gap-[7px] items-start justify-end left-[calc(50%-9.5px)] top-[1213px] w-[914px]">
|
|
<div className="content-stretch flex gap-[150px] items-center relative shrink-0">
|
|
<div className="box-border content-stretch flex gap-[10px] items-center justify-center p-[10px] relative shrink-0">
|
|
<p className="font-bold leading-[normal] not-italic relative shrink-0 text-[#515151] text-[28px] text-nowrap whitespace-pre">
|
|
공지사항
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="border border-[#b9b9b9] border-solid box-border content-stretch flex flex-col h-[498px] items-start p-[20px] relative rounded-[10px] shrink-0 w-full">
|
|
{notices.length > 0 ? (
|
|
notices.map((notice) => (
|
|
<div key={notice.id} className="box-border content-stretch flex font-medium items-center justify-between leading-[normal] not-italic p-[10px] relative shrink-0 text-[#515151] text-[18px] w-full">
|
|
<p className="basis-0 grow min-h-px min-w-px relative shrink-0">
|
|
{notice.title}
|
|
</p>
|
|
<p className="basis-0 grow min-h-px min-w-px relative shrink-0 text-right">
|
|
{notice.date}
|
|
</p>
|
|
</div>
|
|
))
|
|
) : (
|
|
<div className="box-border content-stretch flex gap-[269px] items-center justify-center p-[10px] relative shrink-0 w-full">
|
|
<p className="basis-0 font-medium grow leading-[normal] min-h-px min-w-px not-italic relative shrink-0 text-[#b9b9b9] text-[18px]">
|
|
등록된 공지사항이 없습니다.
|
|
</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* 공지사항 하단 여백 (공지사항 최하단: 1213 + 제목영역 + gap + 박스높이 + 199px) */}
|
|
<div className="absolute left-0 top-[1967px] w-full h-[199px]" />
|
|
</div>
|
|
);
|
|
}
|