officer/nextjs-tutorial
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

next-auth 및 관련 패키지 버전 업데이트, 로그인 폼 UI 개선 및 테스트 계정 정보 추가

Browse Source
This commit is contained in:
officer
2025-08-29 00:18:35 +09:00
parent 840f1e49c8
commit 148d252dba
3 changed files with 105 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

146
app/ui/login-form.tsx
View File

@@ -5,83 +5,93 @@ import {
AtSymbolIcon,
KeyIcon,
} from '@heroicons/react/24/outline';
import {ArrowRightIcon, ExclamationCircleIcon} from '@heroicons/react/20/solid';
import { ArrowRightIcon, ExclamationCircleIcon } from '@heroicons/react/20/solid';
import { Button } from './button';
import {useActionState} from "react";
import {authenticate} from "@/app/lib/actions";
import { useActionState } from "react";
import { authenticate } from "@/app/lib/actions";
export default function LoginForm() {
const [errorMessage, formAction, isPending] = useActionState(
authenticate,
undefined,
authenticate,
undefined,
);
return (
<form action={formAction} className="space-y-3">
<div className="flex-1 rounded-lg bg-gray-50 px-6 pb-4 pt-8">
<form action={formAction} className="space-y-3">
<div className="flex-1 rounded-lg bg-gray-50 px-6 pb-4 pt-8">
<div>
<h1 className={`${lusitana.className} mb-3 text-2xl`}>계속하려면 로그인하세요.</h1>
<div className="w-full">
<div>
<label
className="mb-3 mt-5 block text-xs font-medium text-gray-900"
htmlFor="email"
>
Email
</label>
<div className="relative">
<input
className="peer block w-full rounded-md border border-gray-200 py-[9px] pl-10 text-sm outline-2 placeholder:text-gray-500"
id="email"
type="email"
name="email"
placeholder="Enter your email address"
defaultValue="user@nextmail.com"
required
/>
<AtSymbolIcon
className="pointer-events-none absolute left-3 top-1/2 h-[18px] w-[18px] -translate-y-1/2 text-gray-500 peer-focus:text-gray-900"/>
</div>
</div>
<div className="mt-4">
<label
className="mb-3 mt-5 block text-xs font-medium text-gray-900"
htmlFor="password"
>
Password
</label>
<div className="relative">
<input
className="peer block w-full rounded-md border border-gray-200 py-[9px] pl-10 text-sm outline-2 placeholder:text-gray-500"
id="password"
type="password"
name="password"
placeholder="Enter password"
required
minLength={6}
defaultValue="123456"
/>
<KeyIcon
className="pointer-events-none absolute left-3 top-1/2 h-[18px] w-[18px] -translate-y-1/2 text-gray-500 peer-focus:text-gray-900"/>
</div>
</div>
</div>
<Button className="mt-4 w-full" aria-disabled={isPending}>
로그인 <ArrowRightIcon className="ml-auto h-5 w-5 text-gray-50"/>
</Button>
<div
className="flex h-8 items-end space-x-1"
aria-live="polite"
aria-atomic="true"
>
{errorMessage && (
<>
<ExclamationCircleIcon className="h-5 w-5 text-red-500"/>
<p className="test-sm test-red-500">{errorMessage}</p>
</>
)}
<p className="text-sm text-gray-600 mb-4">
개발용 서버입니다. 아래 계정 정보가 이미 입력되어 있으니 로그인 버튼만 클릭하세요.
</p>
<div className="bg-blue-50 border border-blue-200 rounded-md p-3 text-sm text-blue-800">
<p><strong>테스트 계정:</strong></p>
<p>Email: user@nextmail.com</p>
<p>Password: 123456</p>
</div>
</div>
</form>
<div className="w-full">
<div>
<label
className="mb-3 mt-5 block text-xs font-medium text-gray-900"
htmlFor="email"
>
Email
</label>
<div className="relative">
<input
className="peer block w-full rounded-md border border-gray-200 py-[9px] pl-10 text-sm outline-2 placeholder:text-gray-500"
id="email"
type="email"
name="email"
placeholder="Enter your email address"
defaultValue="user@nextmail.com"
required
/>
<AtSymbolIcon
className="pointer-events-none absolute left-3 top-1/2 h-[18px] w-[18px] -translate-y-1/2 text-gray-500 peer-focus:text-gray-900" />
</div>
</div>
<div className="mt-4">
<label
className="mb-3 mt-5 block text-xs font-medium text-gray-900"
htmlFor="password"
>
Password
</label>
<div className="relative">
<input
className="peer block w-full rounded-md border border-gray-200 py-[9px] pl-10 text-sm outline-2 placeholder:text-gray-500"
id="password"
type="password"
name="password"
placeholder="Enter password"
required
minLength={6}
defaultValue="123456"
/>
<KeyIcon
className="pointer-events-none absolute left-3 top-1/2 h-[18px] w-[18px] -translate-y-1/2 text-gray-500 peer-focus:text-gray-900" />
</div>
</div>
</div>
<Button className="mt-4 w-full" aria-disabled={isPending}>
로그인 <ArrowRightIcon className="ml-auto h-5 w-5 text-gray-50" />
</Button>
<div
className="flex h-8 items-end space-x-1"
aria-live="polite"
aria-atomic="true"
>
{errorMessage && (
<>
<ExclamationCircleIcon className="h-5 w-5 text-red-500" />
<p className="test-sm test-red-500">{errorMessage}</p>
</>
)}
</div>
</div>
</form>
);
}