File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
'use client';
import { useActionState } from 'react';
import { login, type LoginFormState } from '../_actions';
const initialState: LoginFormState = {};
export function LoginForm() {
const [state, formAction, isPending] = useActionState(login, initialState);
return (
<form action={formAction} className="flex w-full flex-col gap-4">
<h1 className="text-xl font-semibold text-foreground">
에듀페이 관리자 로그인
</h1>
<div className="flex flex-col gap-1">
<label htmlFor="loginId" className="text-sm text-foreground/70">
아이디
</label>
<input
id="loginId"
name="loginId"
type="text"
autoComplete="username"
required
className="border border-foreground/25 bg-background px-3 py-2 text-foreground"
/>
</div>
<div className="flex flex-col gap-1">
<label htmlFor="password" className="text-sm text-foreground/70">
비밀번호
</label>
<input
id="password"
name="password"
type="password"
autoComplete="current-password"
required
className="border border-foreground/25 bg-background px-3 py-2 text-foreground"
/>
</div>
{state.error && <p className="text-sm text-danger">{state.error}</p>}
<button
type="submit"
disabled={isPending}
className="bg-foreground px-4 py-2 text-background disabled:opacity-50"
>
{isPending ? '로그인 중...' : '로그인'}
</button>
</form>
);
}