380 lines
16 KiB
TypeScript
380 lines
16 KiB
TypeScript
/* eslint-disable @next/next/no-img-element */
|
||
'use client';
|
||
|
||
import { useEffect, useMemo, useRef, useState } from 'react';
|
||
import MainLogoSvg from './svgs/mainlogosvg';
|
||
|
||
export default function Home() {
|
||
const containerRef = useRef<HTMLDivElement | null>(null);
|
||
const [currentIndex, setCurrentIndex] = useState(0);
|
||
|
||
// 코스, 공지사항 더미 데이터
|
||
const courseCards = useMemo(
|
||
() =>
|
||
[
|
||
{
|
||
id: 'c1',
|
||
title: '원자력 운영 기초',
|
||
meta: 'VOD • 초급 • 4시간 20분',
|
||
image:
|
||
'https://images.unsplash.com/photo-1555949963-ff9fe0c870eb?q=80&w=1200&auto=format&fit=crop',
|
||
},
|
||
{
|
||
id: 'c2',
|
||
title: '반도체',
|
||
meta: 'VOD • 중급 • 3시간 10분',
|
||
image:
|
||
'https://images.unsplash.com/photo-1581092921461-eab62e97a780?q=80&w=1200&auto=format&fit=crop',
|
||
},
|
||
{
|
||
id: 'c3',
|
||
title: '방사선 안전',
|
||
meta: 'VOD • 중급 • 4시간 20분',
|
||
image:
|
||
'https://images.unsplash.com/photo-1581090464777-f3220bbe1b8b?q=80&w=1200&auto=format&fit=crop',
|
||
},
|
||
{
|
||
id: 'c4',
|
||
title: '방사선 폐기물',
|
||
meta: 'VOD • 중급 • 4시간 20분',
|
||
image:
|
||
'https://images.unsplash.com/photo-1581091220351-5a6a4e6f22c1?q=80&w=1200&auto=format&fit=crop',
|
||
},
|
||
{
|
||
id: 'c5',
|
||
title: '원자력 운전 개론',
|
||
meta: 'VOD • 초급 • 3시간 00분',
|
||
image:
|
||
'https://images.unsplash.com/photo-1581090463520-5d09f3c456d2?q=80&w=1200&auto=format&fit=crop',
|
||
},
|
||
{
|
||
id: 'c6',
|
||
title: '안전 표지와 표준',
|
||
meta: 'VOD • 초급 • 2시간 40분',
|
||
image:
|
||
'https://images.unsplash.com/photo-1470167290877-7d5d3446de4c?q=80&w=1200&auto=format&fit=crop',
|
||
},
|
||
{
|
||
id: 'c7',
|
||
title: '발전소 운영',
|
||
meta: 'VOD • 중급 • 4시간 20분',
|
||
image:
|
||
'https://images.unsplash.com/photo-1581092160562-40aa08e78837?q=80&w=1200&auto=format&fit=crop',
|
||
},
|
||
{
|
||
id: 'c8',
|
||
title: '방사선 안전 실습',
|
||
meta: 'VOD • 중급 • 3시간 30분',
|
||
image:
|
||
'https://images.unsplash.com/photo-1581093458791-9d181f5842fd?q=80&w=1200&auto=format&fit=crop',
|
||
},
|
||
{
|
||
id: 'c9',
|
||
title: '실험실 안전',
|
||
meta: 'VOD • 초급 • 2시간 10분',
|
||
image:
|
||
'https://images.unsplash.com/photo-1559757175-08c6d5b3f4b4?q=80&w=1200&auto=format&fit=crop',
|
||
},
|
||
{
|
||
id: 'c10',
|
||
title: '기초 장비 운용',
|
||
meta: 'VOD • 초급 • 2시간 50분',
|
||
image:
|
||
'https://images.unsplash.com/photo-1581092338398-16e5b28a2b13?q=80&w=1200&auto=format&fit=crop',
|
||
},
|
||
] as Array<{ id: string; title: string; meta: string; image: string }>,
|
||
[]
|
||
);
|
||
const noticeRows = useMemo(
|
||
() =>
|
||
[
|
||
{ id: 5, title: '(공지)시스템 개선이 완료되었...', date: '2025-09-10', views: 1320, writer: '운영팀' },
|
||
{ id: 4, title: '(공지)서버 점검 안내(9/10 새벽)', date: '2025-09-10', views: 1210, writer: '운영팀' },
|
||
{ id: 3, title: '(공지)서비스 개선 안내', date: '2025-09-10', views: 1230, writer: '운영팀' },
|
||
{ id: 2, title: '(공지)시장점검 공지', date: '2025-09-10', views: 1320, writer: '관리자' },
|
||
{ id: 1, title: '뉴: 봉사시간 안내 및 한눈에 보는 현황 정리', date: '2025-08-28', views: 594, writer: '운영팀' },
|
||
],
|
||
[]
|
||
);
|
||
|
||
// NOTE: 실제 이미지 자산 연결 시 해당 src를 교체하세요.
|
||
const slides = useMemo(
|
||
() => [
|
||
{
|
||
id: 1,
|
||
title: '시스템 점검 안내',
|
||
description: '11월 10일 새벽 2시~4시 시스템 점검이 진행됩니다.',
|
||
imageSrc:
|
||
'https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?q=80&w=1600&auto=format&fit=crop',
|
||
},
|
||
{
|
||
id: 2,
|
||
title: '신규 과정 오픈',
|
||
description: '최신 커리큘럼으로 업스킬링하세요.',
|
||
imageSrc:
|
||
'https://images.unsplash.com/photo-1550602921-a0d9a4d5b1a9?q=80&w=1600&auto=format&fit=crop',
|
||
},
|
||
{
|
||
id: 3,
|
||
title: '수강 이벤트',
|
||
description: '이번 달 수강 혜택을 확인해보세요.',
|
||
imageSrc:
|
||
'https://images.unsplash.com/photo-1545235617-9465d2a55698?q=80&w=1600&auto=format&fit=crop',
|
||
},
|
||
],
|
||
[]
|
||
);
|
||
|
||
useEffect(() => {
|
||
const containerEl = containerRef.current;
|
||
if (!containerEl) return;
|
||
|
||
const handleScroll = () => {
|
||
const width = containerEl.clientWidth;
|
||
const index = Math.round(containerEl.scrollLeft / Math.max(width, 1));
|
||
setCurrentIndex(index);
|
||
};
|
||
|
||
containerEl.addEventListener('scroll', handleScroll, { passive: true });
|
||
return () => {
|
||
containerEl.removeEventListener('scroll', handleScroll);
|
||
};
|
||
}, []);
|
||
|
||
const scrollToIndex = (index: number) => {
|
||
const containerEl = containerRef.current;
|
||
if (!containerEl) return;
|
||
const clamped = Math.max(0, Math.min(index, slides.length - 1));
|
||
const width = containerEl.clientWidth;
|
||
containerEl.scrollTo({ left: clamped * width, behavior: 'smooth' });
|
||
};
|
||
|
||
const handlePrev = () => scrollToIndex(currentIndex - 1);
|
||
const handleNext = () => scrollToIndex(currentIndex + 1);
|
||
|
||
return (
|
||
<div className="w-full min-h-screen flex flex-col bg-white">
|
||
<main className="flex-1">
|
||
{/* 메인 컨테이너 */}
|
||
<div className="w-full flex justify-center">
|
||
<div className="w-full max-w-[1180px] px-3 py-6">
|
||
{/* 배너 + 사이드 */}
|
||
<div className="flex gap-6">
|
||
{/* 배너 */}
|
||
<section className="flex-1" aria-label="홈 상단 배너">
|
||
<div className="relative">
|
||
<div
|
||
ref={containerRef}
|
||
className="flex overflow-x-auto snap-x snap-mandatory scroll-smooth rounded-xl bg-[#F1F3F5]"
|
||
>
|
||
|
||
{slides.map((slide) => (
|
||
<div key={slide.id} className="flex-none w-full h-[360px] relative snap-start overflow-hidden">
|
||
<img alt={slide.title} src={slide.imageSrc} className="w-full h-full object-cover block" />
|
||
<div className="absolute left-0 right-0 bottom-0 h-1/2 bg-linear-to-b from-transparent via-black/55 to-black/75" />
|
||
<div className="absolute left-6 bottom-6 text-white">
|
||
<div className="font-bold text-[20px] leading-normal mb-1.5">{slide.title}</div>
|
||
<div className="font-medium text-[14px] leading-normal opacity-95">
|
||
{slide.description}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
{/* 좌/우 내비게이션 버튼 */}
|
||
<button
|
||
type="button"
|
||
onClick={handlePrev}
|
||
aria-label="이전 배너"
|
||
disabled={currentIndex <= 0}
|
||
className="absolute left-2 top-1/2 -translate-y-1/2 w-9 h-9 rounded-full bg-white/90 text-[#1B2027] border border-[#DEE1E6] flex items-center justify-center cursor-pointer shadow disabled:opacity-60"
|
||
>
|
||
‹
|
||
</button>
|
||
<button
|
||
type="button"
|
||
onClick={handleNext}
|
||
aria-label="다음 배너"
|
||
disabled={currentIndex >= slides.length - 1}
|
||
className="absolute right-2 top-1/2 -translate-y-1/2 w-9 h-9 rounded-full bg-white/90 text-[#1B2027] border border-[#DEE1E6] flex items-center justify-center cursor-pointer shadow disabled:opacity-60"
|
||
>
|
||
›
|
||
</button>
|
||
|
||
{/* 인디케이터 */}
|
||
<div className="absolute left-1/2 bottom-3 -translate-x-1/2 flex gap-1.5" aria-hidden>
|
||
{slides.map((_, idx) => (
|
||
<span
|
||
key={idx}
|
||
className={'w-1.5 h-1.5 rounded-full ' + (idx === currentIndex ? 'bg-white' : 'bg-white/50')}
|
||
/>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* 사이드 패널 (피그마 디자인 적용) */}
|
||
<aside className="flex-none w-[400px]">
|
||
<div className="bg-[#F1F3F5] rounded-[12px] overflow-hidden h-[510px]">
|
||
{/* 상단 환영 및 통계 */}
|
||
<div className="px-8 py-8">
|
||
<div className="mb-6">
|
||
<div className="text-[18px] leading-normal">
|
||
<span className="font-bold text-[#333C47]">김하늘</span>
|
||
<span className="font-normal text-[#333C47]">님 환영합니다.</span>
|
||
</div>
|
||
</div>
|
||
<div className="flex items-center justify-center gap-6">
|
||
{[
|
||
{ label: '수강중', value: 0 },
|
||
{ label: '수강 완료', value: 0 },
|
||
{ label: '문제 제출', value: 0 },
|
||
{ label: '수료증 발급', value: 0 },
|
||
].map((s) => (
|
||
<div key={s.label} className="w-[64px] flex flex-col items-center justify-center gap-2">
|
||
<div className="size-16 rounded-full bg-white flex items-center justify-center">
|
||
<div className="text-[20px] font-bold text-[#333C47] leading-none">{s.value}</div>
|
||
</div>
|
||
<div className="text-[15px] font-semibold text-[#333C47] leading-none">{s.label}</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
{/* 구분선 */}
|
||
<div className="h-px bg-[#DEE1E6] mx-8" />
|
||
{/* 최근 수강 내역 */}
|
||
<div className="px-8 pt-3 pb-6">
|
||
<div className="h-[60px] w-full flex items-center justify-between">
|
||
<div className="text-[18px] font-bold text-[#1B2027]">최근 수강 내역</div>
|
||
<a href="#" className="flex items-center gap-0.5 text-[14px] font-medium text-[#6C7682] no-underline">
|
||
전체보기
|
||
<svg width="16" height="16" viewBox="0 0 24 24" aria-hidden>
|
||
<path d="M8 5l8 7-8 7" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
||
</svg>
|
||
</a>
|
||
</div>
|
||
<div className="flex flex-col gap-2">
|
||
{[
|
||
{ cat: '원자로 운전 및 계통', title: '6. 원자로 시동, 운전 및 정지 절차' },
|
||
{ cat: '원자로 운전 및 계통', title: '6. 원자로 시동, 운전 및 정지 절차' },
|
||
{ cat: '원자로 운전 및 계통', title: '6. 원자로 시동, 운전 및 정지 절차' },
|
||
].map((r, i) => (
|
||
<div key={i} className="w-full rounded-[8px] bg-white px-5 py-3">
|
||
<div className="text-[14px] font-semibold leading-normal">
|
||
<p className="text-[#6C7682]">{r.cat}</p>
|
||
<p className="text-[#333C47] whitespace-pre">{r.title}</p>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</aside>
|
||
</div>
|
||
|
||
{/* 교육 과정 */}
|
||
<section className="mt-8">
|
||
<div className="flex items-center justify-between mb-3">
|
||
<div className="flex items-baseline gap-2">
|
||
<h2 className="m-0 text-[18px] font-bold text-[#333C47]">
|
||
교육 과정
|
||
</h2>
|
||
<span className="text-[#8C95A1] text-[13px]">총 28건</span>
|
||
</div>
|
||
<a href="#" className="text-[#8C95A1] text-[13px] no-underline">
|
||
전체보기 ›
|
||
</a>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-5 gap-4">
|
||
{courseCards.map((c) => (
|
||
<article key={c.id} className="bg-white border border-[#DEE1E6] rounded-[10px] overflow-hidden">
|
||
<div className="w-full h-[120px] overflow-hidden">
|
||
<img alt={c.title} src={c.image} className="w-full h-full object-cover" />
|
||
</div>
|
||
<div className="p-2.5">
|
||
<div className="text-[#333C47] font-semibold text-[14px] leading-[1.35] mb-1.5" title={c.title}>
|
||
{c.title}
|
||
</div>
|
||
<div className="text-[#8C95A1] text-[12px]">{c.meta}</div>
|
||
</div>
|
||
</article>
|
||
))}
|
||
</div>
|
||
</section>
|
||
|
||
{/* 공지사항 */}
|
||
<section className="mt-9">
|
||
<div className="flex items-center justify-between mb-3">
|
||
<div className="flex items-baseline gap-2">
|
||
<h2 className="m-0 text-[16px] font-bold text-[#333C47]">
|
||
공지사항
|
||
</h2>
|
||
<span className="text-[#8C95A1] text-[13px]">총 102건</span>
|
||
</div>
|
||
<a href="#" className="text-[#8C95A1] text-[13px] no-underline">
|
||
전체보기 ›
|
||
</a>
|
||
</div>
|
||
|
||
<div className="bg-white border border-[#DEE1E6] rounded-[10px] overflow-hidden">
|
||
<div className="grid grid-cols-[80px_1fr_140px_100px_90px] gap-0 bg-[#F9FAFB] text-[#6C7682] text-[13px] border-b border-[#DEE1E6]">
|
||
{['번호', '제목', '작성일', '조회수', '작성자'].map((h) => (
|
||
<div key={h} className="py-2.5 px-3">
|
||
{h}
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
<div>
|
||
{noticeRows.map((r, idx) => (
|
||
<div
|
||
key={r.id}
|
||
className={
|
||
'grid grid-cols-[80px_1fr_140px_100px_90px] gap-0 text-[14px] text-[#4C5561] ' +
|
||
(idx === noticeRows.length - 1 ? '' : 'border-b border-[#F1F3F5]')
|
||
}
|
||
>
|
||
<div className="py-3 px-3">{r.id}</div>
|
||
<div className="py-3 px-3 whitespace-nowrap overflow-hidden text-ellipsis" title={r.title}>
|
||
{r.title}
|
||
</div>
|
||
<div className="py-3 px-3">{r.date}</div>
|
||
<div className="py-3 px-3">{r.views}</div>
|
||
<div className="py-3 px-3">{r.writer}</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
|
||
{/* 푸터 */}
|
||
<footer className="mt-10 bg-[#F1F3F5] border-t border-[#DEE1E6]">
|
||
<div className="max-w-[1180px] mx-auto px-3 pt-6 pb-10 text-[#4C5561]">
|
||
<a href="/" aria-label="XR LMS 홈" className="flex items-center gap-3 no-underline">
|
||
<MainLogoSvg width={46.703} height={36} />
|
||
<strong className="text-[#333C47]">XL LMS</strong>
|
||
</a>
|
||
|
||
<div className="flex flex-wrap gap-4 mt-3 text-[13px]">
|
||
<a href="#" className="text-[#4C5561] no-underline">이용 약관</a>
|
||
<a href="#" className="text-[#4C5561] no-underline">개인정보처리방침</a>
|
||
<a href="#" className="text-[#4C5561] no-underline">고객센터</a>
|
||
</div>
|
||
|
||
<div className="mt-3 text-[12px] text-[#8C95A1]">
|
||
(12345) 서울시 관악구 만덕로 123-12(가우하치) | 전화: 1234-1234 (평일 09:00 ~ 18:00) | 이메일: xper1234@xpl.co.kr
|
||
</div>
|
||
<div className="mt-2 text-[12px] text-[#8C95A1]">
|
||
Copyright © 2025 XL LMS. All rights reserved
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
</div>
|
||
);
|
||
}
|