"use client";

import { useEffect, useState } from 'react';
import { useRouter } from 'next/navigation';
import Image from 'next/image';
import { isAdminLoggedIn } from '../lib/auth';
import LoginPage from './login/page';
import Header from './components/Header';
import Logout from '../public/svg/logout';

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 [isAdmin, setIsAdmin] = useState(false);
  const [isLoading, setIsLoading] = useState(true);
  const [currentHeroSlide, setCurrentHeroSlide] = useState(0);
  const [selectedTab, setSelectedTab] = useState<'전체' | '학습자' | '강사' | '운영자'>('전체');

  // 임시 데이터 - 실제로는 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';
    const adminStatus = isAdminLoggedIn();
    setIsLoggedIn(loginStatus);
    setIsAdmin(adminStatus);
    setIsLoading(false);
  }, []);

  if (isLoading) {
    return null; // 로딩 중
  }

  // 로그인되지 않았으면 로그인 페이지 표시
  if (!isLoggedIn) {
    return <LoginPage />;
  }

  // 관리자일 경우 권한 설정 페이지 표시
  if (isAdmin) {
    return (
      <div className="bg-white relative size-full min-h-screen">
        {/* 사이드바 */}
        <div className="absolute bg-white border-r border-[#eeeeee] border-solid box-border content-stretch flex flex-col gap-[45px] items-center left-0 min-h-[1080px] pb-8 pt-[30px] px-0 top-0 w-[250px]">
          {/* 로고 */}
          <button
            onClick={() => router.push('/')}
            className="h-[102px] relative shrink-0 w-[99px] cursor-pointer hover:opacity-80 transition-opacity"
          >
            <div className="absolute inset-0 flex items-center justify-center overflow-hidden pointer-events-none">
              <img alt="로고" className="h-full w-full object-contain" src="/logo.svg" />
            </div>
          </button>
          {/* 메뉴 */}
          <div className="box-border content-stretch flex flex-col items-center pb-0 pt-4 px-0 relative shrink-0 w-[250px]">
            <div className="box-border content-stretch flex flex-col gap-2 items-start p-3 relative shrink-0 w-full">
              <button className="bg-[#f7f7f7] box-border content-stretch flex gap-2 h-[34px] items-center pl-2 pr-2 py-1 relative rounded-lg shrink-0 w-[226px] cursor-pointer">
                <div className="basis-0 content-stretch flex gap-2 grow items-center min-h-px min-w-px relative shrink-0 pl-2">
                  <p className="[white-space-collapse:collapse] basis-0 font-medium grow leading-[1.6] min-h-px min-w-px not-italic overflow-ellipsis overflow-hidden relative shrink-0 text-[14px] text-[#404040] text-left text-nowrap">
                    권한 설정
                  </p>
                </div>
              </button>
              <button
                onClick={() => router.push('/admin_lecture1')}
                className="box-border content-stretch flex gap-2 h-[34px] items-center pl-2 pr-2 py-1 relative rounded-lg shrink-0 w-[226px] cursor-pointer hover:bg-gray-50 transition-colors"
              >
                <div className="basis-0 content-stretch flex gap-2 grow items-center min-h-px min-w-px relative shrink-0 pl-2">
                  <p className="[white-space-collapse:collapse] basis-0 font-medium grow leading-[1.6] min-h-px min-w-px not-italic overflow-ellipsis overflow-hidden relative shrink-0 text-[14px] text-[#404040] text-left text-nowrap">
                    교육 과정 관리
                  </p>
                </div>
              </button>
              <button
                onClick={() => router.push('/admin_lecture2')}
                className="box-border content-stretch flex gap-2 h-[34px] items-center pl-2 pr-2 py-1 relative rounded-lg shrink-0 w-[226px] cursor-pointer hover:bg-gray-50 transition-colors"
              >
                <div className="basis-0 content-stretch flex gap-2 grow items-center min-h-px min-w-px relative shrink-0 pl-2">
                  <p className="[white-space-collapse:collapse] basis-0 font-medium grow leading-[1.6] min-h-px min-w-px not-italic overflow-ellipsis overflow-hidden relative shrink-0 text-[14px] text-[#404040] text-left text-nowrap">
                    강좌 관리
                  </p>
                </div>
              </button>
              <button className="box-border content-stretch flex gap-2 h-[34px] items-center pl-2 pr-2 py-1 relative rounded-lg shrink-0 w-[226px] cursor-pointer hover:bg-gray-50 transition-colors">
                <div className="basis-0 content-stretch flex gap-2 grow items-center min-h-px min-w-px relative shrink-0 pl-2">
                  <p className="[white-space-collapse:collapse] basis-0 font-medium grow leading-[1.6] min-h-px min-w-px not-italic overflow-ellipsis overflow-hidden relative shrink-0 text-[14px] text-[#404040] text-left text-nowrap">
                    문제 은행 관리
                  </p>
                </div>
              </button>
              <button className="box-border content-stretch flex gap-2 h-[34px] items-center pl-2 pr-2 py-1 relative rounded-lg shrink-0 w-[226px] cursor-pointer hover:bg-gray-50 transition-colors">
                <div className="basis-0 content-stretch flex gap-2 grow items-center min-h-px min-w-px relative shrink-0 pl-2">
                  <p className="[white-space-collapse:collapse] basis-0 font-medium grow leading-[1.6] min-h-px min-w-px not-italic overflow-ellipsis overflow-hidden relative shrink-0 text-[14px] text-[#404040] text-left text-nowrap">
                    수료증 발급
                  </p>
                </div>
              </button>
              <button className="box-border content-stretch flex gap-2 h-[34px] items-center pl-2 pr-2 py-1 relative rounded-lg shrink-0 w-[226px] cursor-pointer hover:bg-gray-50 transition-colors">
                <div className="basis-0 content-stretch flex gap-2 grow items-center min-h-px min-w-px relative shrink-0 pl-2">
                  <p className="[white-space-collapse:collapse] basis-0 font-medium grow leading-[1.6] min-h-px min-w-px not-italic overflow-ellipsis overflow-hidden relative shrink-0 text-[14px] text-[#404040] text-left text-nowrap">
                    공지사항
                  </p>
                </div>
              </button>
              <button className="box-border content-stretch flex gap-2 h-[34px] items-center pl-2 pr-2 py-1 relative rounded-lg shrink-0 w-[226px] cursor-pointer hover:bg-gray-50 transition-colors">
                <div className="basis-0 content-stretch flex gap-2 grow items-center min-h-px min-w-px relative shrink-0 pl-2">
                  <p className="[white-space-collapse:collapse] basis-0 font-medium grow leading-[1.6] min-h-px min-w-px not-italic overflow-ellipsis overflow-hidden relative shrink-0 text-[14px] text-[#404040] text-left text-nowrap">
                    학습 자료실
                  </p>
                </div>
              </button>
              <button className="box-border content-stretch flex gap-2 h-[34px] items-center pl-2 pr-2 py-1 relative rounded-lg shrink-0 w-[226px] cursor-pointer hover:bg-gray-50 transition-colors">
                <div className="basis-0 content-stretch flex gap-2 grow items-center min-h-px min-w-px relative shrink-0 pl-2">
                  <p className="[white-space-collapse:collapse] basis-0 font-medium grow leading-[1.6] min-h-px min-w-px not-italic overflow-ellipsis overflow-hidden relative shrink-0 text-[14px] text-[#404040] text-left text-nowrap">
                    로그/접속 기록
                  </p>
                </div>
              </button>
              <button className="box-border content-stretch flex gap-2 h-[34px] items-center pl-2 pr-2 py-1 relative rounded-lg shrink-0 w-[226px] cursor-pointer hover:bg-gray-50 transition-colors">
                <div className="basis-0 content-stretch flex gap-2 grow items-center min-h-px min-w-px relative shrink-0 pl-2">
                  <p className="[white-space-collapse:collapse] basis-0 font-medium grow leading-[1.6] min-h-px min-w-px not-italic overflow-ellipsis overflow-hidden relative shrink-0 text-[14px] text-[#404040] text-left text-nowrap">
                    배너 관리
                  </p>
                </div>
              </button>
            </div>
          </div>
          {/* 로그아웃 */}
          <div className="content-stretch flex gap-[9px] items-center relative shrink-0">
            <div className="flex items-center justify-center relative shrink-0">
              <div className="flex-none rotate-[180deg] scale-y-[-100%]">
                <div className="h-[23.12px] relative w-[22px]">
                  <Logout />
                </div>
              </div>
            </div>
            <button
              onClick={() => {
                localStorage.removeItem('isLoggedIn');
                localStorage.removeItem('isAdminLoggedIn');
                router.push('/');
              }}
              className="content-stretch flex h-[36px] items-center justify-between relative shrink-0 w-[76px] cursor-pointer hover:opacity-80 transition-opacity"
            >
              <div className="box-border content-stretch flex gap-[10px] items-center justify-center px-[10px] py-[5px] relative shrink-0">
                <p className="font-medium leading-[1.6] not-italic relative shrink-0 text-[16px] text-[#404040] text-nowrap whitespace-pre">
                  로그아웃
                </p>
              </div>
            </button>
          </div>
        </div>

        {/* 메인 콘텐츠 */}
        <div className="absolute left-[250px] top-0 right-0 min-h-screen">
          {/* 페이지 타이틀 탭 */}
          <div className="absolute content-stretch flex gap-[24px] items-center left-[48px] top-[45px]">
            <button
              onClick={() => setSelectedTab('전체')}
              className={`border-b-[2px] border-solid box-border content-stretch flex gap-[150px] items-center relative shrink-0 ${selectedTab === '전체' ? 'border-[#2b82e8]' : 'border-transparent'}`}
            >
              <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-[18px] text-nowrap whitespace-pre ${selectedTab === '전체' ? 'text-[#515151]' : 'text-[#515151]'}`}>
                  전체
                </p>
              </div>
            </button>
            <button
              onClick={() => setSelectedTab('학습자')}
              className={`border-b-[2px] border-solid box-border content-stretch flex gap-[150px] items-center relative shrink-0 ${selectedTab === '학습자' ? 'border-[#2b82e8]' : 'border-transparent'}`}
            >
              <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-[18px] text-nowrap whitespace-pre">
                  학습자
                </p>
              </div>
            </button>
            <button
              onClick={() => setSelectedTab('강사')}
              className={`border-b-[2px] border-solid box-border content-stretch flex gap-[150px] items-center relative shrink-0 ${selectedTab === '강사' ? 'border-[#2b82e8]' : 'border-transparent'}`}
            >
              <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-[18px] text-nowrap whitespace-pre">
                  강사
                </p>
              </div>
            </button>
            <button
              onClick={() => setSelectedTab('운영자')}
              className={`border-b-[2px] border-solid box-border content-stretch flex gap-[150px] items-center relative shrink-0 ${selectedTab === '운영자' ? 'border-[#2b82e8]' : 'border-transparent'}`}
            >
              <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-[18px] text-nowrap whitespace-pre">
                  운영자
                </p>
              </div>
            </button>
          </div>

          {/* 사용자 목록 테이블 */}
          <div className="absolute content-stretch flex flex-col items-start left-[48px] right-[101px] top-[135px]">
            {/* 테이블 헤더 */}
            <div className="bg-[rgba(235,247,255,0.5)] content-stretch flex h-[41px] items-center relative shrink-0 w-full">
              <div className="content-stretch flex items-center relative shrink-0 w-full">
                <div className="basis-0 border-[0.5px_0px_0.5px_0.5px] border-[#b9b9b9] border-solid box-border content-stretch flex gap-[10px] grow items-center min-h-px min-w-px p-[10px] relative shrink-0">
                  <div className="basis-0 flex flex-col font-bold grow justify-center leading-[0] min-h-px min-w-px not-italic relative shrink-0 text-[18px] text-[#515151]">
                    <p className="leading-[normal]">가입일</p>
                  </div>
                </div>
                <div className="basis-0 border-[0.5px_0px_0.5px_0.5px] border-[#b9b9b9] border-solid box-border content-stretch flex gap-[10px] grow items-center min-h-px min-w-px p-[10px] relative shrink-0">
                  <div className="basis-0 flex flex-col font-bold grow justify-center leading-[0] min-h-px min-w-px not-italic relative shrink-0 text-[18px] text-[#515151]">
                    <p className="leading-[normal]">사용자명</p>
                  </div>
                </div>
                <div className="basis-0 border-[0.5px_0px_0.5px_0.5px] border-[#b9b9b9] border-solid box-border content-stretch flex gap-[10px] grow items-center min-h-px min-w-px p-[10px] relative shrink-0">
                  <div className="basis-0 flex flex-col font-bold grow justify-center leading-[0] min-h-px min-w-px not-italic relative shrink-0 text-[18px] text-[#515151]">
                    <p className="leading-[normal]">아이디(이메일)</p>
                  </div>
                </div>
                <div className="basis-0 border-[0.5px_0px_0.5px_0.5px] border-[#b9b9b9] border-solid box-border content-stretch flex gap-[10px] grow items-center min-h-px min-w-px p-[10px] relative shrink-0">
                  <div className="basis-0 flex flex-col font-bold grow justify-center leading-[0] min-h-px min-w-px not-italic relative shrink-0 text-[18px] text-[#515151]">
                    <p className="leading-[normal]">권한</p>
                  </div>
                </div>
                <div className="basis-0 border-[0.5px_0px_0.5px_0.5px] border-[#b9b9b9] border-solid box-border content-stretch flex gap-[10px] grow items-center min-h-px min-w-px p-[10px] relative shrink-0">
                  <div className="basis-0 flex flex-col font-bold grow justify-center leading-[0] min-h-px min-w-px not-italic relative shrink-0 text-[18px] text-[#515151]">
                    <p className="leading-[normal]">계정 상태</p>
                  </div>
                </div>
                <div className="basis-0 border-[0.5px_0px_0.5px_0.5px] border-[#b9b9b9] border-solid box-border content-stretch flex gap-[10px] grow items-center min-h-px min-w-px p-[10px] relative shrink-0">
                  <div className="basis-0 flex flex-col font-bold grow justify-center leading-[0] min-h-px min-w-px not-italic relative shrink-0 text-[18px] text-[#515151]">
                    <p className="leading-[normal]">계정 관리</p>
                  </div>
                </div>
              </div>
            </div>

            {/* 빈 상태 메시지 */}
            <div className="relative w-full flex items-center justify-center" style={{ minHeight: '400px' }}>
              <div className="content-stretch flex flex-col gap-[16px] items-center relative shrink-0">
                <div className="content-stretch flex flex-col gap-[2px] items-center relative shrink-0">
                  <p className="font-medium leading-[1.6] not-italic relative shrink-0 text-[16px] text-[#969696] text-nowrap whitespace-pre">
                    존재하는 계정이 없어요.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }

  // 일반 사용자일 경우 기존 메인 페이지 표시
  return (
    <div className="bg-white relative min-h-screen w-full pb-[199px]">
      {/* 헤더 */}
      <Header activePage="home" />

      {/* 구분선 */}
      <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>
  );
}
