XRLMS/app/myinfo/page.tsx

"use client";

import { useEffect, useState } from 'react';
import { useRouter } from 'next/navigation';
import LoginPage from '../login/page';

const imgImage2 = "http://localhost:3845/assets/89fda8e949171025b1232bae70fc9d442e4e70c8.png";
const imgLine2 = "http://localhost:3845/assets/6ee8cf4ebb6bc2adb14aab8c9940b3002c20af35.svg";

export default function MyLecturePage() {
  const router = useRouter();
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    // 로그인 상태 확인
    const loginStatus = localStorage.getItem('isLoggedIn') === 'true';
    setIsLoggedIn(loginStatus);
    setIsLoading(false);
  }, []);

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

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

  return (
    <div className="bg-white relative min-h-screen w-full">
      {/* 헤더 */}
      <header className="absolute content-stretch flex items-center justify-between left-[calc(12.5%+91px)] top-[43px] w-[1332px]">
        <div className="content-stretch flex gap-[99px] items-center relative shrink-0">
          {/* 로고 */}
          <button
            onClick={() => router.push('/')}
            className="h-[74px] relative shrink-0 w-[72px] cursor-pointer"
          >
            <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>
          </button>
          {/* 메뉴 */}
          <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">
          <div className="box-border content-stretch flex gap-[10px] items-center justify-center p-[10px] relative shrink-0">
            <p className="font-medium leading-[normal] not-italic relative shrink-0 text-[#1669ca] text-[18px] text-nowrap whitespace-pre">
              내 강좌실
            </p>
          </div>
          <button
            onClick={() => {
              localStorage.removeItem('isLoggedIn');
              setIsLoggedIn(false);
              router.push('/');
            }}
            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-1/2 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>

      {/* 사이드바 */}
      <div className="absolute box-border content-stretch flex flex-col items-center left-[37px] pb-0 pt-4 px-0 top-[192px] w-[250px]">
        <div className="box-border content-stretch flex flex-col gap-2 items-start p-3 relative shrink-0 w-full">
          <button
            onClick={() => router.push('/mylecture')}
            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('/mylecture')}
            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"
          >
            <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">
            <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">
            <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="absolute content-stretch flex flex-col gap-6 items-start left-[calc(31.25%+35px)] top-[243px] w-[784px]">
        <div className="content-stretch flex gap-[10px] items-center relative shrink-0 w-full">
          <div className="flex flex-col font-bold justify-center leading-[0] not-italic relative shrink-0 text-[24px] text-[#1d1d1d] text-nowrap">
            <p className="leading-[1.6] whitespace-pre">내 정보 수정</p>
          </div>
        </div>
        <div className="content-stretch flex flex-col gap-4 items-start relative shrink-0">
          {/* 아이디 */}
          <div className="content-stretch flex flex-col gap-4 items-start relative shrink-0 w-[789px]">
            <div className="bg-white border border-[#b9b9b9] border-solid box-border content-stretch flex gap-[138px] items-center justify-center p-5 relative rounded-2xl shrink-0 w-full">
              <p className="font-medium leading-[normal] not-italic relative shrink-0 text-[14px] text-[#515151] text-nowrap whitespace-pre">
                아이디
              </p>
              <div className="flex flex-row items-center self-stretch">
                <div className="bg-white box-border content-stretch flex gap-[10px] h-full items-center overflow-clip px-2 py-[10px] relative rounded-lg shrink-0 w-[559px]">
                  <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-[#b9b9b9] text-[14px] text-nowrap">
                    qwer1234@naver.com
                  </p>
                </div>
              </div>
            </div>
          </div>
          {/* 비밀번호 변경 */}
          <div className="content-stretch flex flex-col gap-4 items-start relative shrink-0 w-[789px]">
            <div className="bg-white border border-[#b9b9b9] border-solid box-border content-stretch flex gap-[109px] items-center p-5 relative rounded-2xl shrink-0 w-full">
              <p className="font-medium leading-[normal] not-italic relative shrink-0 text-[14px] text-[#515151] text-nowrap whitespace-pre">
                비밀번호 변경
              </p>
              <div className="box-border content-stretch flex gap-2 items-center px-0 py-[9px] relative shrink-0">
                <button className="bg-white border border-[#b9b9b9] border-solid box-border content-stretch flex gap-[10px] items-center justify-center px-2 py-1 relative rounded-md shrink-0 w-[256px] cursor-pointer hover:bg-gray-50 transition-colors">
                  <p className="font-medium leading-[1.6] not-italic relative shrink-0 text-[14px] text-black text-center text-nowrap whitespace-pre">
                    비밀번호 변경
                  </p>
                </button>
              </div>
            </div>
          </div>
          {/* 회원 탈퇴 */}
          <div className="content-stretch flex flex-col gap-4 items-start relative shrink-0 w-[789px]">
            <div className="bg-white border border-[#b9b9b9] border-solid box-border content-stretch flex gap-[109px] items-center p-5 relative rounded-2xl shrink-0 w-full">
              <p className="font-medium leading-[normal] not-italic relative shrink-0 text-[14px] text-[#515151] w-[77px]">
                회원 탈퇴
              </p>
              <div className="box-border content-stretch flex gap-2 items-center px-0 py-[9px] relative shrink-0">
                <button className="bg-white border border-[#b9b9b9] border-solid box-border content-stretch flex gap-[10px] items-center justify-center px-2 py-1 relative rounded-md shrink-0 w-[256px] cursor-pointer hover:bg-gray-50 transition-colors">
                  <p className="font-medium leading-[1.6] not-italic relative shrink-0 text-[14px] text-black text-center text-nowrap whitespace-pre">
                    탈퇴하기
                  </p>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* 푸터 */}
      <footer className="absolute bg-[#f7f7f7] box-border content-stretch flex flex-col gap-[10px] h-[225px] items-start left-0 px-[243px] py-[39px] top-[854px] w-full">
        <div className="content-stretch flex gap-[49px] 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 flex-col gap-[5px] items-start relative shrink-0 w-[479px]">
            <div className="content-stretch flex gap-[27px] items-center relative shrink-0 w-full">
              <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>
              <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>
              <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>
            </div>
            <div className="box-border content-stretch flex flex-col font-medium gap-[10px] items-center justify-center leading-[normal] not-italic p-[10px] relative shrink-0 text-[#515151] text-[16px]">
              <p className="relative shrink-0 w-[400px]">
                (12345) 서울특별시 광진구 구의동 123-12(구의타워1)
              </p>
              <p className="relative shrink-0 w-[400px]">
                문의: 1234-1234 (평일 09:00 ~ 18:00)
              </p>
              <p className="relative shrink-0 w-[400px]">
                이메일: qwer1234@go.or.kr
              </p>
            </div>
          </div>
        </div>
      </footer>
    </div>
  );
}