login page 마무리리

app/page.tsx

@@ -1,164 +1,47 @@
 "use client";
 
-import Link from "next/link";
+import { useEffect, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import LoginPage from './login/page';
 
-// 이미지 상수
-const imgLogo = "http://localhost:3845/assets/89fda8e949171025b1232bae70fc9d442e4e70c8.png";
+export default function HomePage() {
+  const router = useRouter();
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
 
-type CheckboxProps = {
-  className?: string;
-  status?: "Inactive" | "Focused" | "Disabled";
-};
+  useEffect(() => {
+    // 로그인 상태 확인
+    const loginStatus = localStorage.getItem('isLoggedIn') === 'true';
+    setIsLoggedIn(loginStatus);
+    setIsLoading(false);
+  }, []);
 
-function Checkbox({ className, status = "Inactive" }: CheckboxProps) {
+  if (isLoading) {
+    return null; // 로딩 중
+  }
+
+  // 로그인되지 않았으면 로그인 페이지 표시
+  if (!isLoggedIn) {
+    return <LoginPage />;
+  }
+
+  // 로그인되었으면 메인 페이지 표시
   return (
-    <div className={className}>
-      <div className="absolute border border-[#b9b9b9] border-solid left-0 rounded-[4px] size-[18px] top-0" />
-    </div>
-  );
-}
+    <div className="min-h-screen bg-gray-50">
+      <div className="container mx-auto px-4 py-8">
+        <h1 className="text-3xl font-bold mb-4">메인 페이지</h1>
+        <p className="text-gray-600">로그인 후 메인 페이지입니다.</p>
 
-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 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>
-            </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
-            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-['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>
-          </button>
-        </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"
+        {/* 로그아웃 버튼 */}
+        <button
+          onClick={() => {
+            localStorage.removeItem('isLoggedIn');
+            router.push('/');
+          }}
+          className="mt-4 px-4 py-2 bg-red-500 text-white rounded-md hover:bg-red-600"
         >
-          <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>
-
-      {/* 카피라이트 */}
-      <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>
   );