로그인페이지 리뉴얼얼
This commit is contained in:
wallace
560
app/page.tsx
560
app/page.tsx
@@ -1,452 +1,164 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { useState } from "react";
|
||||
|
||||
// 이미지 상수
|
||||
const logoImage = "/logo.png";
|
||||
const chevronIcon = "/chevron.svg";
|
||||
const heroImage = "http://localhost:3845/assets/02d8c5116625dec34c335abdf02727a333ee1e42.png";
|
||||
const lineIcon = "http://localhost:3845/assets/2fbce31172577fb51bb8028f779906af08a2aef0.svg";
|
||||
const imgLogo = "http://localhost:3845/assets/89fda8e949171025b1232bae70fc9d442e4e70c8.png";
|
||||
|
||||
// 과목 이미지들
|
||||
const courseImages = [
|
||||
"http://localhost:3845/assets/dbcdb3a62893cc1bbf618aaa03d3991209730907.png",
|
||||
"http://localhost:3845/assets/926321498bba6094d98b0306e038328654b5e72c.png",
|
||||
"http://localhost:3845/assets/27a46837f82b972822bc9dc0c568d32bf2ff368a.png",
|
||||
"http://localhost:3845/assets/603bee236c3ff989d503608d3ebe12eea354fefb.png",
|
||||
"http://localhost:3845/assets/b7e4617653e0115d927ad34a0c2e4e7be0cbb3df.png",
|
||||
];
|
||||
|
||||
const courses = [
|
||||
{ title: "원자로 운전 및 계통", image: courseImages[0], hasNew: true },
|
||||
{ title: "방사선 안전", image: courseImages[1], hasNew: true },
|
||||
{ title: "핵 연료", image: courseImages[2], hasNew: true },
|
||||
{ title: "방사선 안전", image: courseImages[3], hasNew: false },
|
||||
{ title: "방사성 폐기물", image: courseImages[4], hasNew: false },
|
||||
];
|
||||
|
||||
export default function Home() {
|
||||
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
|
||||
const [isUserMenuOpen, setIsUserMenuOpen] = useState(false);
|
||||
const [isCourseExpanded, setIsCourseExpanded] = useState(false);
|
||||
const [isMoreExpanded, setIsMoreExpanded] = useState(false);
|
||||
const [isNoticeExpanded, setIsNoticeExpanded] = useState(false);
|
||||
type CheckboxProps = {
|
||||
className?: string;
|
||||
status?: "Inactive" | "Focused" | "Disabled";
|
||||
};
|
||||
|
||||
function Checkbox({ className, status = "Inactive" }: CheckboxProps) {
|
||||
return (
|
||||
<div className="flex flex-col flex-1 bg-white items-center">
|
||||
{/* 헤더 */}
|
||||
<header className="border-b border-black/10 w-full">
|
||||
<div className="max-w-full mx-auto px-16">
|
||||
<div className="flex items-center justify-between h-[95px] py-6 gap-4">
|
||||
{/* 로고/메뉴 그룹 */}
|
||||
<div className="flex items-center gap-9 flex-1">
|
||||
{/* Company 로고 */}
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="h-9 relative w-[46.703px]">
|
||||
<img
|
||||
alt="XR LMS Logo"
|
||||
className="h-full w-full object-contain"
|
||||
src={logoImage}
|
||||
/>
|
||||
</div>
|
||||
<h1 className="text-2xl font-bold text-black leading-[1.45] whitespace-pre">XR LMS</h1>
|
||||
</div>
|
||||
<div className={className}>
|
||||
<div className="absolute border border-[#b9b9b9] border-solid left-0 rounded-[4px] size-[18px] top-0" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
{/* 네비게이션 메뉴 */}
|
||||
<nav className="hidden md:flex items-center">
|
||||
<div className="flex gap-0.5">
|
||||
<Link href="#" className="px-4 py-2 text-[#111111] font-bold text-base hover:text-blue-600 transition">
|
||||
과목 목록
|
||||
</Link>
|
||||
<Link href="#" className="px-4 py-2 text-[#111111] font-bold text-base hover:text-blue-600 transition">
|
||||
학습 자료실
|
||||
</Link>
|
||||
<Link href="#" className="px-4 py-2 text-[#111111] font-bold text-base hover:text-blue-600 transition">
|
||||
공지사항
|
||||
</Link>
|
||||
<Link href="#" className="px-4 py-2 text-[#111111] font-bold text-base hover:text-blue-600 transition">
|
||||
기관소개
|
||||
</Link>
|
||||
<Link href="#" className="px-4 py-2 text-[#111111] font-bold text-base hover:text-blue-600 transition">
|
||||
교육소개
|
||||
</Link>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
{/* 사용자 메뉴 그룹 */}
|
||||
<nav className="flex items-center gap-6 shrink-0">
|
||||
<div className="hidden md:flex items-center gap-6">
|
||||
<Link
|
||||
href="#"
|
||||
className="px-4 py-2 text-[#5f5f5f] font-bold text-base hover:text-blue-600 transition h-9 flex items-center"
|
||||
>
|
||||
내 강의실
|
||||
</Link>
|
||||
<div className="relative">
|
||||
<button
|
||||
onClick={() => setIsUserMenuOpen(!isUserMenuOpen)}
|
||||
className="flex items-center gap-1 px-4 py-2 text-[#5f5f5f] font-bold text-base hover:text-blue-600 transition h-9"
|
||||
>
|
||||
<span>조유주</span>
|
||||
<div className={`transition-transform duration-200 ${isUserMenuOpen ? 'rotate-180' : ''}`}>
|
||||
<img
|
||||
src={chevronIcon}
|
||||
alt="chevron"
|
||||
className="w-6 h-6"
|
||||
/>
|
||||
</div>
|
||||
</button>
|
||||
{/* 사용자 메뉴 드롭다운 */}
|
||||
{isUserMenuOpen && (
|
||||
<div className="absolute right-0 mt-2 bg-white border border-gray-200 rounded-lg shadow-lg py-0 min-w-[160px] overflow-hidden">
|
||||
<Link href="#" className="block px-2 py-2.5 text-[#333c47] font-semibold text-base hover:bg-gray-100 transition">
|
||||
내 정보 수정
|
||||
</Link>
|
||||
<Link href="#" className="block px-2 py-2.5 text-[#333c47] font-semibold text-base hover:bg-gray-100 transition">
|
||||
로그아웃
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 모바일 햄버거 메뉴 아이콘 */}
|
||||
<button
|
||||
className="md:hidden p-2 text-gray-700 hover:text-blue-600 transition"
|
||||
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
|
||||
aria-label="메뉴"
|
||||
>
|
||||
<svg
|
||||
className="w-6 h-6"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
{isMobileMenuOpen ? (
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M6 18L18 6M6 6l12 12"
|
||||
/>
|
||||
) : (
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M4 6h16M4 12h16M4 18h16"
|
||||
/>
|
||||
)}
|
||||
</svg>
|
||||
</button>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
{/* 모바일 메뉴 */}
|
||||
{isMobileMenuOpen && (
|
||||
<div className="md:hidden border-t border-gray-200 py-4">
|
||||
<nav className="flex flex-col space-y-4">
|
||||
<Link href="#" className="text-gray-700 hover:text-blue-600 transition px-2 font-bold">과목 목록</Link>
|
||||
<Link href="#" className="text-gray-700 hover:text-blue-600 transition px-2 font-bold">학습 자료실</Link>
|
||||
<Link href="#" className="text-gray-700 hover:text-blue-600 transition px-2 font-bold">공지사항</Link>
|
||||
<Link href="#" className="text-gray-700 hover:text-blue-600 transition px-2 font-bold">기관소개</Link>
|
||||
<Link href="#" className="text-gray-700 hover:text-blue-600 transition px-2 font-bold">교육소개</Link>
|
||||
<div className="pt-4 border-t border-gray-200 flex flex-col space-y-2">
|
||||
<Link
|
||||
href="#"
|
||||
className="px-4 py-2 text-gray-700 hover:text-blue-600 transition font-bold"
|
||||
>
|
||||
내 강의실
|
||||
</Link>
|
||||
<Link
|
||||
href="#"
|
||||
className="px-4 py-2 text-gray-700 hover:text-blue-600 transition font-bold"
|
||||
>
|
||||
조유주
|
||||
</Link>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* 메인 콘텐츠 영역 - Hero 배너 + 사이드바 */}
|
||||
<div className="flex gap-8 items-start justify-center pt-8 pb-0 px-16 w-full">
|
||||
{/* Hero 배너 */}
|
||||
<div className="flex-1 min-h-0 overflow-hidden relative rounded-xl self-stretch">
|
||||
<div className="absolute inset-0">
|
||||
<img
|
||||
alt="Hero Banner"
|
||||
className="absolute inset-0 max-w-none object-cover w-full h-full"
|
||||
src={heroImage}
|
||||
/>
|
||||
</div>
|
||||
<div className="absolute bottom-[60px] left-1/2 -translate-x-1/2 flex flex-col gap-2 items-start text-white text-center w-[496px]">
|
||||
<p className="relative text-[32px] font-bold text-nowrap tracking-[-0.32px] whitespace-pre">
|
||||
미래 에너지, 안전의 길을 열다
|
||||
</p>
|
||||
<p className="min-w-full relative text-2xl tracking-[-0.24px] w-min">
|
||||
지속 가능한 내일을 만들어가는 여정, 지금 시작하세요.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 사이드바 */}
|
||||
<div className="flex flex-col gap-3 items-start shrink-0 w-[460px]">
|
||||
{/* 나의 수강현황 */}
|
||||
<div className="bg-white border border-black/10 rounded-xl w-full">
|
||||
<div className="flex flex-col items-start overflow-hidden rounded-inherit w-full">
|
||||
<div className="flex flex-col gap-6 items-start justify-center pb-8 pt-6 px-6 w-full">
|
||||
<div className="flex flex-col gap-5 items-start w-full">
|
||||
<div className="flex gap-2 items-center">
|
||||
<p className="font-bold leading-[1.5] text-[#333c47] text-base tracking-[-0.16px] whitespace-pre">
|
||||
나의 수강현황
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex gap-3 items-center justify-center w-full">
|
||||
{[
|
||||
{ value: "4", label: "수강중" },
|
||||
{ value: "12", label: "수강 완료" },
|
||||
{ value: "8", label: "학습 제출" },
|
||||
{ value: "4", label: "수료증" },
|
||||
].map((stat, idx) => (
|
||||
<div key={idx} className="flex-1 flex flex-col gap-1 items-center justify-center">
|
||||
<div className="bg-[rgba(222,225,230,0.2)] flex flex-col gap-6 h-20 items-center justify-center px-4 py-2 rounded-xl w-[92px]">
|
||||
<p className="font-extrabold leading-[1.5] text-[#3230e2] text-[28px] text-nowrap">
|
||||
{stat.value}
|
||||
</p>
|
||||
</div>
|
||||
<p className="font-semibold leading-[1.5] text-[#333c47] text-[15px] text-nowrap">
|
||||
{stat.label}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 최근 수강 과목 */}
|
||||
<div className="bg-white border border-black/10 rounded-xl w-full">
|
||||
<div className="flex flex-col items-start overflow-hidden rounded-inherit w-full">
|
||||
<div className="flex flex-col gap-6 items-start justify-center pb-8 pt-6 px-6 w-full">
|
||||
<div className="flex flex-col gap-5 items-start w-full">
|
||||
<div className="flex gap-2 items-center">
|
||||
<p className="font-bold leading-[1.5] text-[#333c47] text-base tracking-[-0.16px] whitespace-pre">
|
||||
최근 수강 과목
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-col gap-3 items-start w-full">
|
||||
<div className="bg-[#f8f9fa] flex items-start justify-between p-3 rounded-lg w-full">
|
||||
<div className="flex-1 flex gap-1 items-center">
|
||||
<div className="flex flex-col gap-1 items-start justify-center text-black text-[15px]">
|
||||
<h5 className="block font-semibold leading-[1.2] text-nowrap whitespace-pre">
|
||||
원자로 운전 및 계통
|
||||
</h5>
|
||||
<h5 className="block font-normal leading-[1.2] text-nowrap whitespace-pre">
|
||||
2. 원자로 냉각재 계통 (RCS) 및 열수력
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setIsCourseExpanded(!isCourseExpanded)}
|
||||
className="flex items-center justify-center shrink-0"
|
||||
>
|
||||
<div className={`transition-transform duration-200 ${isCourseExpanded ? 'rotate-180' : ''}`}>
|
||||
<img src={chevronIcon} alt="chevron" className="w-6 h-6" />
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex items-center justify-between w-full">
|
||||
<div className="flex gap-10 items-start">
|
||||
<p className="font-medium leading-[18px] text-[15px]">
|
||||
<span className="text-black/50">진도율: </span>40%
|
||||
</p>
|
||||
</div>
|
||||
<button className="bg-[#3230e2] flex gap-2 h-10 items-center justify-center px-4 py-3 rounded-lg">
|
||||
<div className="flex gap-1 items-center justify-center">
|
||||
<p className="font-medium leading-[1.5] text-base text-white tracking-[-0.16px] whitespace-pre">
|
||||
이어서 수강하기
|
||||
</p>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
export default function LoginPage() {
|
||||
return (
|
||||
<div className="bg-white min-h-screen flex flex-col items-center justify-center py-8">
|
||||
{/* 로고 */}
|
||||
<div className="mb-16 w-[179px] h-[185px] flex items-center justify-center">
|
||||
<div className="relative w-full h-full overflow-hidden pointer-events-none">
|
||||
<img
|
||||
alt="Logo"
|
||||
className="absolute h-[291.74%] left-[-100%] max-w-none top-[-95.73%] w-[301.18%]"
|
||||
src={imgLogo}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 전체 과목 리스트 */}
|
||||
<div className="flex flex-col items-start px-0 py-16 w-full max-w-[1792px]">
|
||||
<div className="flex h-[60px] items-center justify-between w-full">
|
||||
<div className="flex flex-col h-[44px] items-center">
|
||||
<div className="flex gap-2.5 h-[42px] items-center justify-center px-0.5 py-0 text-center text-nowrap w-full whitespace-pre">
|
||||
<p className="font-bold leading-[1.7] text-[20px] text-[#1f1f1f] tracking-[-0.2px]">
|
||||
전체 과목
|
||||
{/* 콘텐츠 영역 */}
|
||||
<div className="flex flex-col gap-[54px] items-center w-full max-w-[480px] px-4">
|
||||
{/* 입력 폼 영역 */}
|
||||
<div className="flex flex-col gap-[20px] items-start w-full">
|
||||
{/* 아이디 입력 필드 */}
|
||||
<div className="flex flex-col gap-[8px] items-center w-full">
|
||||
<div className="flex flex-col gap-[4px] items-center w-full">
|
||||
<div className="bg-white border border-[#b9b9b9] border-solid relative rounded-[8px] w-full">
|
||||
<div className="box-border flex gap-[10px] items-center px-[16px] py-[10px] rounded-[inherit] w-full">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="아이디(이메일)"
|
||||
className="basis-0 font-['Pretendard_Variable',sans-serif] grow leading-[1.6] min-h-px min-w-px not-italic overflow-ellipsis overflow-hidden relative shrink-0 text-[16px] text-[#b9b9b9] w-full outline-none bg-transparent"
|
||||
style={{ fontVariationSettings: "'wght' 500" }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 비밀번호 입력 필드 */}
|
||||
<div className="flex flex-col gap-[8px] items-center w-full">
|
||||
<div className="flex flex-col gap-[4px] items-center rounded-[8px] w-full">
|
||||
<div className="bg-white border border-[#b9b9b9] border-solid relative rounded-[8px] w-full">
|
||||
<div className="box-border flex gap-[10px] items-center px-[16px] py-[10px] rounded-[inherit] w-full">
|
||||
<input
|
||||
type="password"
|
||||
placeholder="비밀번호"
|
||||
className="basis-0 font-['Pretendard_Variable',sans-serif] grow leading-[1.6] min-h-px min-w-px not-italic overflow-ellipsis overflow-hidden relative shrink-0 text-[16px] text-[#b9b9b9] w-full outline-none bg-transparent"
|
||||
style={{ fontVariationSettings: "'wght' 500" }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 체크박스 영역 */}
|
||||
<div className="flex gap-[46px] items-center justify-start w-full">
|
||||
<div className="flex gap-[10px] items-center">
|
||||
<Checkbox className="relative shrink-0 size-[18px]" />
|
||||
<p
|
||||
className="font-['Pretendard_Variable',sans-serif] leading-[1.6] not-italic relative shrink-0 text-[14px] text-[#515151] whitespace-pre"
|
||||
style={{ fontVariationSettings: "'wght' 500" }}
|
||||
>
|
||||
아이디 기억하기
|
||||
</p>
|
||||
<p className="font-normal leading-[1.5] text-[#030774] text-[19px] tracking-[-0.19px]">
|
||||
4
|
||||
</div>
|
||||
<div className="flex gap-[10px] items-center">
|
||||
<Checkbox className="relative shrink-0 size-[18px]" />
|
||||
<p
|
||||
className="font-['Pretendard_Variable',sans-serif] leading-[1.6] not-italic relative shrink-0 text-[14px] text-[#515151] whitespace-pre"
|
||||
style={{ fontVariationSettings: "'wght' 500" }}
|
||||
>
|
||||
자동 로그인
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 로그인 버튼 */}
|
||||
<div className="flex flex-col gap-[16px] items-center w-full">
|
||||
<button
|
||||
onClick={() => setIsMoreExpanded(!isMoreExpanded)}
|
||||
className="flex gap-0.5 items-center"
|
||||
type="submit"
|
||||
className="bg-[#2b82e8] box-border flex gap-[10px] items-center justify-center px-[120px] py-[13px] rounded-[8px] w-full hover:bg-[#1e6bc7] transition-colors"
|
||||
>
|
||||
<p className="font-semibold leading-[1.6] text-[14px] text-[#6e6e6e] text-nowrap tracking-[-0.14px]">
|
||||
더보기
|
||||
<p
|
||||
className="font-['Pretendard_Variable',sans-serif] leading-[1.6] not-italic relative shrink-0 text-[16px] text-white text-center whitespace-pre"
|
||||
style={{ fontVariationSettings: "'wght' 700" }}
|
||||
>
|
||||
로그인
|
||||
</p>
|
||||
<div className={`overflow-hidden shrink-0 w-4 h-4 transition-transform duration-200 ${isMoreExpanded ? 'rotate-180' : ''}`}>
|
||||
<img src={chevronIcon} alt="chevron" className="block max-w-none w-full h-full" />
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex gap-8 items-center justify-center w-full">
|
||||
{courses.map((course, idx) => (
|
||||
<div key={idx} className="flex-1 flex flex-col gap-4 items-start rounded-lg">
|
||||
<div className="h-[230px] overflow-hidden relative rounded-xl w-full">
|
||||
<div className="absolute inset-0">
|
||||
<img
|
||||
alt={course.title}
|
||||
className="absolute inset-0 max-w-none object-cover w-full h-full"
|
||||
src={course.image}
|
||||
/>
|
||||
</div>
|
||||
{course.hasNew && (
|
||||
<div className="absolute bg-[#fd0a0a] flex flex-col gap-2.5 items-center justify-center p-2.5 right-[-166.2px] rounded-full w-8 h-8 top-2.5">
|
||||
<p className="font-extrabold leading-[1.45] text-base text-white w-full">
|
||||
N
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex flex-col gap-1 items-start text-black w-full">
|
||||
<h5 className="block font-semibold text-[17px] w-full leading-[1.2]">
|
||||
{course.title}
|
||||
</h5>
|
||||
<p className="font-medium text-[#7a7c85] text-sm tracking-[-0.07px] w-full leading-[1.45]">
|
||||
영상 44개 · 총 12시간 56분
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 공지사항 */}
|
||||
<div className="flex flex-col items-start w-full">
|
||||
<div className="bg-[#f2f3f7] flex items-center justify-center px-16 py-12 rounded-xl w-full">
|
||||
<div className="flex-1 flex gap-8 items-start">
|
||||
<div className="flex flex-col items-start shrink-0">
|
||||
<div className="flex flex-col h-[44px] justify-center text-[#333c47] text-[19px] text-center tracking-[-0.19px] w-[66px]">
|
||||
<p className="font-bold leading-[1.5]">공지사항</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setIsNoticeExpanded(!isNoticeExpanded)}
|
||||
className="flex gap-0.5 items-center"
|
||||
>
|
||||
<p className="font-semibold leading-[1.6] text-[14px] text-[#6e6e6e] text-nowrap tracking-[-0.14px]">
|
||||
목록보기
|
||||
</p>
|
||||
<div className={`overflow-hidden shrink-0 w-4 h-4 transition-transform duration-200 ${isNoticeExpanded ? 'rotate-180' : ''}`}>
|
||||
<img src={chevronIcon} alt="chevron" className="block max-w-none w-full h-full" />
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex-1 flex flex-col items-start">
|
||||
{[
|
||||
{ category: "점검", title: "방사선 폐기 VR 실습 서버 정기점검 안내", date: "2025. 12. 12. (화)" },
|
||||
{ category: "점검", title: "방사선 폐기 VR 실습 서버 정기점검 안내", date: "2025. 12. 12. (화)" },
|
||||
{ category: "점검", title: "방사선 폐기 VR 실습 서버 정기점검 안내", date: "2025. 12. 12. (화)" },
|
||||
].map((notice, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className={`flex gap-2 h-11 items-center px-2 py-3 w-full ${idx < 2 ? 'border-b border-black/10' : ''}`}
|
||||
>
|
||||
<div className="bg-[#030774] flex gap-2.5 items-center justify-center px-2 py-1 rounded-lg shrink-0">
|
||||
<p className="font-semibold leading-normal text-[13px] text-white text-nowrap whitespace-pre">
|
||||
{notice.category}
|
||||
</p>
|
||||
</div>
|
||||
<p className="flex-1 font-medium leading-normal min-w-0 text-[#515151] text-base">
|
||||
{notice.title}
|
||||
</p>
|
||||
<p className="font-medium leading-normal text-[#515151] text-base text-nowrap text-right whitespace-pre">
|
||||
{notice.date}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
{/* 하단 링크 영역 */}
|
||||
<div className="mt-8 flex gap-[6px] items-center justify-center flex-wrap">
|
||||
<Link
|
||||
href="/registeragreement"
|
||||
className="box-border flex gap-[10px] h-[46px] items-center justify-center py-[13px] hover:opacity-80 transition-opacity"
|
||||
>
|
||||
<p
|
||||
className="font-['Pretendard_Variable',sans-serif] leading-[normal] not-italic relative shrink-0 text-[#515151] text-[12px] text-center whitespace-pre"
|
||||
style={{ fontVariationSettings: "'wght' 500" }}
|
||||
>
|
||||
회원가입
|
||||
</p>
|
||||
</Link>
|
||||
<div className="box-border flex gap-[10px] h-[46px] items-center justify-center px-0 py-[13px] shrink-0">
|
||||
<p
|
||||
className="font-['Pretendard_Variable',sans-serif] leading-[normal] not-italic relative shrink-0 text-[#515151] text-[12px] text-center whitespace-pre"
|
||||
style={{ fontVariationSettings: "'wght' 500" }}
|
||||
>
|
||||
|
|
||||
</p>
|
||||
</div>
|
||||
<button className="box-border flex gap-[10px] h-[46px] items-center justify-center py-[13px] shrink-0 hover:opacity-80 transition-opacity cursor-pointer">
|
||||
<p
|
||||
className="font-['Pretendard_Variable',sans-serif] leading-[normal] not-italic relative shrink-0 text-[#515151] text-[12px] text-center whitespace-pre"
|
||||
style={{ fontVariationSettings: "'wght' 500" }}
|
||||
>
|
||||
아이디 찾기
|
||||
</p>
|
||||
</button>
|
||||
<div className="box-border flex gap-[10px] h-[46px] items-center justify-center px-0 py-[13px] shrink-0">
|
||||
<p
|
||||
className="font-['Pretendard_Variable',sans-serif] leading-[normal] not-italic relative shrink-0 text-[#515151] text-[12px] text-center whitespace-pre"
|
||||
style={{ fontVariationSettings: "'wght' 500" }}
|
||||
>
|
||||
|
|
||||
</p>
|
||||
</div>
|
||||
<button className="box-border flex gap-[10px] h-[46px] items-center justify-center py-[13px] shrink-0 hover:opacity-80 transition-opacity cursor-pointer">
|
||||
<p
|
||||
className="font-['Pretendard_Variable',sans-serif] leading-[normal] not-italic relative shrink-0 text-[#515151] text-[12px] text-center whitespace-pre"
|
||||
style={{ fontVariationSettings: "'wght' 500" }}
|
||||
>
|
||||
비밀번호 재설정
|
||||
</p>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* 푸터 */}
|
||||
<footer className="bg-[#030774] border-t border-black/10 w-full">
|
||||
<div className="flex gap-24 items-center justify-center overflow-hidden px-16 py-0 rounded-inherit w-full">
|
||||
<div className="flex-1 flex gap-8 items-start px-0 py-20">
|
||||
<nav className="flex-1 flex gap-8 items-start">
|
||||
<div className="flex flex-col gap-2 items-center shrink-0">
|
||||
<div className="h-[54px] relative shrink-0 w-[72px]">
|
||||
<img alt="Logo" className="absolute inset-0 max-w-none w-full h-full" src={logoImage} />
|
||||
</div>
|
||||
<div className="flex flex-col font-extrabold justify-center text-base text-white text-nowrap tracking-[-0.08px]">
|
||||
<p className="leading-[1.45] whitespace-pre">XL LMS</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1 flex flex-col gap-6 items-start justify-end">
|
||||
<div className="flex gap-6 items-center">
|
||||
<p className="font-semibold leading-[1.45] text-base text-white text-nowrap tracking-[-0.08px]">
|
||||
이용 약관
|
||||
</p>
|
||||
<div className="flex items-center justify-center w-[18px] h-0">
|
||||
<div className="rotate-90">
|
||||
<div className="h-0 relative w-[18px]">
|
||||
<img alt="line" className="block max-w-none w-full h-full" src={lineIcon} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p className="font-semibold leading-[1.45] text-base text-white text-nowrap tracking-[-0.08px]">
|
||||
개인정보처리방침
|
||||
</p>
|
||||
<div className="flex items-center justify-center w-[18px] h-0">
|
||||
<div className="rotate-90">
|
||||
<div className="h-0 relative w-[18px]">
|
||||
<img alt="line" className="block max-w-none w-full h-full" src={lineIcon} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p className="font-semibold leading-[1.45] text-base text-white text-nowrap tracking-[-0.08px]">
|
||||
고객센터
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex gap-6 items-end justify-end text-base text-white/80 text-nowrap tracking-[-0.08px] w-full">
|
||||
<div className="flex-1 flex flex-col gap-2 items-start">
|
||||
<p className="leading-[1.45] text-nowrap whitespace-pre font-medium">
|
||||
(12345) 서울특별시 광진구 구의동 123-12(구의타워1)
|
||||
</p>
|
||||
<p className="leading-[1.45] text-nowrap whitespace-pre font-medium">
|
||||
문의: 1234-1234 (평일 09:00 ~ 18:00)
|
||||
</p>
|
||||
<p className="leading-[1.45] text-nowrap whitespace-pre font-medium">
|
||||
이메일: qwer1234@go.or.kr
|
||||
</p>
|
||||
</div>
|
||||
<p className="font-medium leading-[1.45] text-nowrap whitespace-pre">
|
||||
Copyright ⓒ 2025 XL LMS. All rights reserved
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
{/* 카피라이트 */}
|
||||
<div className="mt-8 flex flex-col font-['Pretendard','Noto_Sans',sans-serif] justify-center text-[16px] text-[rgba(0,0,0,0.55)] text-center tracking-[-0.08px]">
|
||||
<p className="leading-[1.45] whitespace-pre" style={{ fontVariationSettings: "'CTGR' 0, 'wdth' 100, 'wght' 500" }}>
|
||||
Copyright ⓒ 2025 XL LMS. All rights reserved
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user