메인페이지 작업시작작

app/page.tsx

@@ -2,13 +2,53 @@
 
 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);
 
+  // 임시 데이터 - 실제로는 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';
@@ -27,22 +67,179 @@ export default function HomePage() {
 
   // 로그인되었으면 메인 페이지 표시
   return (
-    <div className="min-h-screen bg-gray-50">
+    <div className="bg-white relative min-h-screen w-full">
-      <div className="container mx-auto px-4 py-8">
+      {/* 헤더 */}
-        <h1 className="text-3xl font-bold mb-4">메인 페이지</h1>
+      <header className="absolute content-stretch flex items-center justify-between left-[calc(12.5%+91.375px)] top-[43px] w-[1332px]">
-        <p className="text-gray-600">로그인 후 메인 페이지입니다.</p>
+        <div className="content-stretch flex gap-[99px] items-center relative shrink-0">
-
+          {/* 로고 */}
-        {/* 로그아웃 버튼 */}
+          <div className="h-[74px] relative shrink-0 w-[72px]">
+            <div className="absolute inset-0 overflow-hidden pointer-events-none">
+              <img alt="" className="absolute h-[291.74%] left-[-100%] max-w-none top-[-95.73%] w-[301.18%]" src={imgImage2} />
+            </div>
+          </div>
+          {/* 메뉴 */}
+          <div className="content-stretch flex gap-[24px] items-center relative shrink-0">
+            <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-[24px] text-nowrap whitespace-pre">
+                  교육 과정 목록
+                </p>
+              </div>
+            </div>
+            <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-[24px] text-nowrap whitespace-pre">
+                  학습 자료실
+                </p>
+              </div>
+            </div>
+            <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-[24px] text-nowrap whitespace-pre">
+                  공지사항
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        {/* 사용자 메뉴 */}
+        <div className="content-stretch flex gap-[20px] items-center relative shrink-0">
+          <button 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="mt-4 px-4 py-2 bg-red-500 text-white rounded-md hover:bg-red-600"
+            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-[calc(50%+0.5px)] top-[150px] translate-x-[-50%] w-full">
+        <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">
+        <div className="absolute inset-0 overflow-hidden pointer-events-none">
+          <img alt="" className="absolute h-[257.2%] left-[-0.04%] max-w-none top-0 w-[100.07%]" src={imgImage7} />
+        </div>
+      </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>
+
+      {/* 지도보기 아이콘 */}
+      <div className="absolute h-[17px] left-[calc(43.75%+28.313px)] top-[692px] w-[128px]">
+        <img alt="" className="block max-w-none size-full" src={imgFrame2616314} />
+      </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">
+                <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>
+              </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>
     </div>
   );
 }

app/registeragreement/page.tsx

@@ -1,172 +0,0 @@
-'use client';
-
-import { useState } from 'react';
-import Link from 'next/link';
-
-export default function RegisterAgreementPage() {
-  const [allAgreed, setAllAgreed] = useState(false);
-  const [ageAgreed, setAgeAgreed] = useState(false);
-  const [termsAgreed, setTermsAgreed] = useState(false);
-  const [privacyAgreed, setPrivacyAgreed] = useState(false);
-
-  // 전체 동의 핸들러
-  const handleAllAgreed = (checked: boolean) => {
-    setAllAgreed(checked);
-    setAgeAgreed(checked);
-    setTermsAgreed(checked);
-    setPrivacyAgreed(checked);
-  };
-
-  // 개별 체크박스 변경 시 전체 동의 상태 업데이트
-  const updateAllAgreed = () => {
-    if (ageAgreed && termsAgreed && privacyAgreed) {
-      setAllAgreed(true);
-    } else {
-      setAllAgreed(false);
-    }
-  };
-
-  // 개별 체크박스 핸들러
-  const handleAgeAgreed = (checked: boolean) => {
-    setAgeAgreed(checked);
-    updateAllAgreed();
-  };
-
-  const handleTermsAgreed = (checked: boolean) => {
-    setTermsAgreed(checked);
-    updateAllAgreed();
-  };
-
-  const handlePrivacyAgreed = (checked: boolean) => {
-    setPrivacyAgreed(checked);
-    updateAllAgreed();
-  };
-
-  // 다음 단계 진행 가능 여부
-  const canProceed = ageAgreed && termsAgreed && privacyAgreed;
-
-  return (
-    <div className="min-h-screen flex items-center justify-center bg-white">
-      <div className="w-full max-w-2xl px-4">
-        {/* 회원가입 카드 */}
-        <div className="bg-white rounded-lg shadow-lg p-8">
-          {/* 제목 */}
-          <h1 className="text-2xl font-bold text-center mb-8">회원가입</h1>
-
-          {/* 단계 표시 */}
-          <div className="flex items-center justify-center mb-8 text-sm">
-            <div className="flex items-center">
-              <span className="px-3 py-1 bg-blue-500 text-white rounded-md font-semibold">
-                01 약관 동의
-              </span>
-              <span className="mx-2 text-gray-400">&gt;</span>
-              <span className="px-3 py-1 text-gray-500">02 회원정보입력</span>
-              <span className="mx-2 text-gray-400">&gt;</span>
-              <span className="px-3 py-1 text-gray-500">03 회원가입완료</span>
-            </div>
-          </div>
-
-          {/* 약관 동의 섹션 */}
-          <div className="space-y-4">
-            {/* 전체 동의 */}
-            <div className="pb-4 border-b border-gray-300">
-              <label className="flex items-center cursor-pointer">
-                <input
-                  type="checkbox"
-                  checked={allAgreed}
-                  onChange={(e) => handleAllAgreed(e.target.checked)}
-                  className="w-5 h-5 mr-3 text-blue-500 rounded focus:ring-2 focus:ring-blue-500"
-                />
-                <span className="text-base font-medium">모든 항목에 동의합니다.</span>
-              </label>
-            </div>
-
-            {/* 개별 약관 */}
-            <div className="space-y-4">
-              {/* 만 14세 이상 */}
-              <div className="flex items-center justify-between">
-                <label className="flex items-center cursor-pointer flex-1">
-                  <input
-                    type="checkbox"
-                    checked={ageAgreed}
-                    onChange={(e) => handleAgeAgreed(e.target.checked)}
-                    className="w-5 h-5 mr-3 text-blue-500 rounded focus:ring-2 focus:ring-blue-500"
-                  />
-                  <span className="text-sm">
-                    만 14세 이상입니다. <span className="text-red-500">(필수)</span>
-                  </span>
-                </label>
-                <button className="text-sm text-gray-500 hover:text-gray-700">
-                  전체 &gt;
-                </button>
-              </div>
-
-              {/* 이용 약관 */}
-              <div className="flex items-center justify-between">
-                <label className="flex items-center cursor-pointer flex-1">
-                  <input
-                    type="checkbox"
-                    checked={termsAgreed}
-                    onChange={(e) => handleTermsAgreed(e.target.checked)}
-                    className="w-5 h-5 mr-3 text-blue-500 rounded focus:ring-2 focus:ring-blue-500"
-                  />
-                  <span className="text-sm">
-                    이용 약관 동의 <span className="text-red-500">(필수)</span>
-                  </span>
-                </label>
-                <button className="text-sm text-gray-500 hover:text-gray-700">
-                  전체 &gt;
-                </button>
-              </div>
-
-              {/* 개인정보 수집 및 이용 */}
-              <div className="flex items-center justify-between">
-                <label className="flex items-center cursor-pointer flex-1">
-                  <input
-                    type="checkbox"
-                    checked={privacyAgreed}
-                    onChange={(e) => handlePrivacyAgreed(e.target.checked)}
-                    className="w-5 h-5 mr-3 text-blue-500 rounded focus:ring-2 focus:ring-blue-500"
-                  />
-                  <span className="text-sm">
-                    개인정보 수집 및 이용 동의 <span className="text-red-500">(필수)</span>
-                  </span>
-                </label>
-                <button className="text-sm text-gray-500 hover:text-gray-700">
-                  전체 &gt;
-                </button>
-              </div>
-            </div>
-          </div>
-
-          {/* 버튼 영역 */}
-          <div className="mt-8 flex space-x-4">
-            <Link
-              href="/login"
-              className="flex-1 py-3 bg-gray-200 text-gray-700 rounded-md text-center hover:bg-gray-300 transition font-medium"
-            >
-              돌아가기
-            </Link>
-            <Link
-              href={canProceed ? '/register' : '#'}
-              className={`flex-1 py-3 rounded-md text-center font-medium transition ${
-                canProceed
-                  ? 'bg-blue-500 text-white hover:bg-blue-600'
-                  : 'bg-gray-300 text-gray-500 cursor-not-allowed pointer-events-none'
-              }`}
-              onClick={(e) => !canProceed && e.preventDefault()}
-            >
-              동의 후 가입하기
-            </Link>
-          </div>
-        </div>
-
-        {/* 카피라이트 */}
-        <div className="mt-8 text-center text-sm text-gray-500">
-          Copyright © 2025 XL LMS. All rights reserved
-        </div>
-      </div>
-    </div>
-  );
-}
-