login page 마무리리

app/login/page.tsx

@@ -1,84 +1,253 @@
+"use client";
+
 import Link from 'next/link';
+import Image from 'next/image';
+import { useState, useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import logo from '../logo.svg';
+
+const checkIcon = "http://localhost:3845/assets/68720b08a673d8b68ae6482d642eeab286c9462b.svg";
+
+type CheckboxProps = {
+  checked: boolean;
+  onChange: () => void;
+  label: string;
+};
+
+function Checkbox({ checked, onChange, label }: CheckboxProps) {
+  return (
+    <div className="flex items-center gap-2.5">
+      <button
+        type="button"
+        onClick={onChange}
+        className="relative w-[18px] h-[18px] rounded-[4px]"
+      >
+        {checked ? (
+          <>
+            <div className="absolute bg-[#515151] left-0 rounded-[4px] w-[18px] h-[18px] top-0" />
+            <div className="absolute left-[3px] w-3 h-3 top-[3px]">
+              <img alt="" className="block max-w-none w-full h-full" src={checkIcon} />
+            </div>
+          </>
+        ) : (
+          <div className="absolute border border-[#b9b9b9] border-solid left-0 rounded-[4px] w-[18px] h-[18px] top-0" />
+        )}
+      </button>
+      <span className="text-sm text-[#515151] leading-[1.6]">{label}</span>
+    </div>
+  );
+}
 
 export default function LoginPage() {
+  const router = useRouter();
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  const [rememberId, setRememberId] = useState(false);
+  const [autoLogin, setAutoLogin] = useState(false);
+  const [usernameError, setUsernameError] = useState('');
+  const [passwordError, setPasswordError] = useState('');
+  const [showErrorPopup, setShowErrorPopup] = useState(false);
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    setUsernameError('');
+    setPasswordError('');
+
+    // 아이디와 비밀번호가 비어있는지 확인
+    const isUsernameEmpty = !username.trim();
+    const isPasswordEmpty = !password.trim();
+
+    if (isUsernameEmpty) {
+      setUsernameError('이메일을 입력해 주세요.');
+    }
+
+    if (isPasswordEmpty) {
+      setPasswordError('비밀번호를 입력해 주세요.');
+    }
+
+    // 둘 중 하나라도 비어있으면 검증 중단
+    if (isUsernameEmpty || isPasswordEmpty) {
+      return;
+    }
+
+    // 아이디와 비밀번호 검증
+    if (username === 'admin' && password === '1234') {
+      // 로그인 성공
+      localStorage.setItem('isLoggedIn', 'true');
+      // 아이디 기억하기 체크 시 아이디 저장
+      if (rememberId) {
+        localStorage.setItem('rememberedUsername', username);
+      } else {
+        localStorage.removeItem('rememberedUsername');
+      }
+      // 루트 경로로 이동 (루트 페이지에서 로그인 상태를 확인하여 메인 페이지 표시)
+      window.location.href = '/';
+    } else {
+      // 로그인 실패 - 팝업 표시
+      setShowErrorPopup(true);
+      setUsernameError('아이디 또는 비밀번호가 올바르지 않습니다.');
+      setPasswordError('아이디 또는 비밀번호가 올바르지 않습니다.');
+    }
+  };
+
+  // 아이디 기억하기 기능 - 컴포넌트 마운트 시 저장된 아이디 불러오기
+  useEffect(() => {
+    const rememberedUsername = localStorage.getItem('rememberedUsername');
+    if (rememberedUsername) {
+      setUsername(rememberedUsername);
+      setRememberId(true);
+    }
+  }, []);
+
   return (
-    <div className="min-h-screen flex items-center justify-center">
+    <div className="min-h-screen flex justify-center relative pt-[178px]">
       <div className="w-full max-w-md">
         {/* 상단 로고 */}
         <div className="mb-8 text-center">
-          <h1 className="text-2xl font-bold">Logo</h1>
+          <Image
+            src={logo}
+            alt="Logo"
+            width={179}
+            height={185}
+            className="mx-auto"
+            priority
+          />
         </div>
 
         {/* 로그인 폼 */}
-        <form className="space-y-4">
+        <form className="space-y-4" onSubmit={handleSubmit}>
           {/* 아이디 입력폼 */}
-          <div>
-            <label htmlFor="username" className="block text-sm font-medium mb-1">
-              아이디
-            </label>
-            <input
-              type="text"
-              id="username"
-              className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
-              placeholder="아이디(이메일)"
-            />
+          <div className="flex flex-col gap-2">
+            <div className="flex flex-col gap-1">
+              <input
+                type="text"
+                id="username"
+                value={username}
+                onChange={(e) => {
+                  setUsername(e.target.value);
+                  setUsernameError('');
+                }}
+                className={`w-full px-4 py-2.5 border rounded-[8px] focus:outline-none ${usernameError
+                  ? 'border-[#e61a1a] border-solid'
+                  : 'border-gray-300 focus:ring-2 focus:ring-blue-500'
+                  }`}
+                placeholder="아이디(이메일)"
+              />
+              {usernameError && (
+                <p className="text-[#e61a1a] text-xs leading-normal whitespace-pre">
+                  {usernameError}
+                </p>
+              )}
+            </div>
           </div>
 
           {/* 비밀번호 입력폼 */}
-          <div>
-            <label htmlFor="password" className="block text-sm font-medium mb-1">
-              비밀번호
-            </label>
-            <input
-              type="password"
-              id="password"
-              className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
-              placeholder="비밀번호를 입력하세요"
-            />
+          <div className="flex flex-col gap-2">
+            <div className="flex flex-col gap-1">
+              <input
+                type="password"
+                id="password"
+                value={password}
+                onChange={(e) => {
+                  setPassword(e.target.value);
+                  setPasswordError('');
+                }}
+                className={`w-full px-4 py-2.5 border rounded-[8px] focus:outline-none ${passwordError
+                  ? 'border-[#e61a1a] border-solid'
+                  : 'border-gray-300 focus:ring-2 focus:ring-blue-500'
+                  }`}
+                placeholder="비밀번호를 입력하세요"
+              />
+              {passwordError && (
+                <p className="text-[#e61a1a] text-xs leading-normal whitespace-pre">
+                  {passwordError}
+                </p>
+              )}
+            </div>
           </div>
 
           {/* 체크박스 */}
-          <div className="flex items-center space-x-4 justify-start">
-            <label className="flex items-center">
-              <input type="checkbox" className="mr-2" />
-              <span className="text-sm">아이디 기억하기</span>
-            </label>
-            <label className="flex items-center">
-              <input type="checkbox" className="mr-2" />
-              <span className="text-sm">자동로그인</span>
-            </label>
+          <div className="flex items-center gap-[46px] justify-start">
+            <Checkbox
+              checked={rememberId}
+              onChange={() => setRememberId(!rememberId)}
+              label="아이디 기억하기"
+            />
+            <Checkbox
+              checked={autoLogin}
+              onChange={() => setAutoLogin(!autoLogin)}
+              label="자동 로그인"
+            />
           </div>
 
           {/* 로그인 버튼 */}
-          <button
-            type="submit"
-            className="w-full py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500"
-          >
-            로그인
-          </button>
+          <div className="mt-[54px]">
+            <button
+              type="submit"
+              className="w-full h-[52px] bg-blue-500 text-white rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 flex items-center justify-center"
+            >
+              로그인
+            </button>
+          </div>
         </form>
 
         {/* 하단 링크 버튼들 */}
-        <div className="mt-4 flex justify-center space-x-4">
+        <div className="mt-4 flex items-center justify-center gap-2.5">
           <Link
             href="/registeragreement"
             className="text-sm text-gray-600 hover:text-gray-800"
           >
             회원가입
           </Link>
+          <Image
+            src="/Divider.svg"
+            alt=""
+            width={1}
+            height={12}
+            className="h-3"
+          />
           <button className="text-sm text-gray-600 hover:text-gray-800">
             아이디찾기
           </button>
+          <Image
+            src="/Divider.svg"
+            alt=""
+            width={1}
+            height={12}
+            className="h-3"
+          />
           <button className="text-sm text-gray-600 hover:text-gray-800">
             비밀번호 재설정
           </button>
         </div>
 
         {/* 카피라이트 */}
-        <div className="mt-8 text-center text-sm text-gray-500">
+        <div className="absolute bottom-[40px] left-0 right-0 text-center text-sm text-gray-500">
           © 2024 XR LMS. All rights reserved.
         </div>
       </div>
+
+      {/* 에러 팝업 */}
+      {showErrorPopup && (
+        <div className="fixed inset-0 flex items-center justify-center z-50">
+          <div className="bg-white rounded-[16px] shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] max-w-md w-full mx-4">
+            <div className="flex flex-col gap-3 p-6">
+              <div className="text-sm text-black text-center leading-[1.6]">
+                <p className="mb-0">아이디 또는 비밀번호가 일치하지 않아요.</p>
+                <p>확인 후 다시 시도해 주세요.</p>
+              </div>
+            </div>
+            <div className="flex items-center w-full border-t border-gray-200">
+              <button
+                onClick={() => setShowErrorPopup(false)}
+                className="w-full h-12 text-sm text-[#404040] hover:bg-gray-50 focus:outline-none rounded-[16px]"
+              >
+                확인
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   );
 }

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>
   );