XRLMS/app/login/page.tsx

import Link from 'next/link';

export default function LoginPage() {
  return (
    <div className="min-h-screen flex items-center justify-center">
      <div className="w-full max-w-md">
        {/* 상단 로고 */}
        <div className="mb-8 text-center">
          <h1 className="text-2xl font-bold">Logo</h1>
        </div>

        {/* 로그인 폼 */}
        <form className="space-y-4">
          {/* 아이디 입력폼 */}
          <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>

          {/* 비밀번호 입력폼 */}
          <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>

          {/* 체크박스 */}
          <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>

          {/* 로그인 버튼 */}
          <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>
        </form>

        {/* 하단 링크 버튼들 */}
        <div className="mt-4 flex justify-center space-x-4">
          <Link
            href="/registeragreement"
            className="text-sm text-gray-600 hover:text-gray-800"
          >
            회원가입
          </Link>
          <button className="text-sm text-gray-600 hover:text-gray-800">
            아이디찾기
          </button>
          <button className="text-sm text-gray-600 hover:text-gray-800">
            비밀번호 재설정
          </button>
        </div>

        {/* 카피라이트 */}
        <div className="mt-8 text-center text-sm text-gray-500">
          © 2024 XR LMS. All rights reserved.
        </div>
      </div>
    </div>
  );
}