XRLMS/app/page.tsx

"use client";

import Link from "next/link";
import { useState } from "react";

// 이미지 상수
const logoImage = "http://localhost:3845/assets/89fda8e949171025b1232bae70fc9d442e4e70c8.png";
const chevronIcon = "/chevron.svg";
const heroImage = "http://localhost:3845/assets/02d8c5116625dec34c335abdf02727a333ee1e42.png";
const lineIcon = "http://localhost:3845/assets/2fbce31172577fb51bb8028f779906af08a2aef0.svg";

// 과목 이미지들
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);

  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>

              {/* 네비게이션 메뉴 */}
              <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>
        </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]">
                전체 과목
              </p>
              <p className="font-normal leading-[1.5] text-[#030774] text-[19px] tracking-[-0.19px]">
                4
              </p>
            </div>
          </div>
          <button
            onClick={() => setIsMoreExpanded(!isMoreExpanded)}
            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 ${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>

        {/* 푸터 */}
        <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>
    </div>
  );
}