bitforum-frontend/app/(auth)/login/view.tsx

'use client';

import './style.scss';
import Link from 'next/link';
import { Checkbox } from '@/components/ui/checkbox';
import { useState, useEffect, useRef } from 'react';
import { fetchLogin } from '@/lib/api/auth';
import { throwError } from '@/lib/utils/client';
import { LoginRequest } from '@/dtos/request/auth';
import useAuth from '@/hooks/useAuth';

 export default function View()
 {
    const { login } = useAuth();
    const [error, setError] = useState<string>('');
    const [loading, setLoading] = useState<boolean>(false);
    const [email, setEmail] = useState<string>('');
    const [password, setPassword] = useState<string>('');
    const [rememberMe, setRememberMe] = useState<boolean>(false);
    const emailRef = useRef<HTMLInputElement>(null);
    const passwordRef = useRef<HTMLInputElement>(null);

    useEffect(() => {
        if (error) {
            alert(error);
            setError('');
        }
    }, [error]);

    const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
        e.preventDefault();

        try {

            if (email.length < 1) {
                emailRef.current?.focus();
                throw new Error('이메일을 입력하세요.');
            }

            if (password.length < 1) {
                passwordRef.current?.focus();
                throw new Error('비밀번호를 입력하세요.');
            }

            const res = await fetchLogin({
                Email: email,
                Password: password
            } as LoginRequest);

            if (!res.ok) {
                throwError(res);
            }

            login(rememberMe);

        } catch (err) {
            if (err instanceof Error) {
                setError(err.message);
            }
        } finally {
            setLoading(false);
        }
    }

    return (
		<>
			<div id="loginForm" className="row-start-2 flex flex-row flex-wrap gap-2">
				<fieldset className="grow">
					<legend>로그인</legend>
					<form id="fLogin" method="post" acceptCharset="utf-8" autoComplete="off" className="grid p-4" onSubmit={handleSubmit}>
						<label htmlFor="email">이메일</label>
						<input type="email" name="email" id="email" ref={emailRef} maxLength={30} onChange={e => setEmail(e.target.value)} autoComplete="off" />

						<label htmlFor="password">비밀번호</label>
						<input type="password" name="password" id="password" ref={passwordRef} maxLength={20} onChange={e => setPassword(e.target.value)} />

						<button type="submit" className="btn btn-submit" disabled={loading}>
							{loading ? "로그인 중..." : "로그인"}
						</button>

						<section className="mt-3 text-center">
							<Checkbox name="remember_me" id="rememberMe" checked={rememberMe} onCheckedChange={(checked) => setRememberMe(checked === true)} />
							<label htmlFor="rememberMe">로그인 상태 유지</label>
						</section>
					</form>
				</fieldset>
				<fieldset className="grow basis-1/2">
					<dl>
						<dt>아직 회원이 아니신가요?</dt>
						<dd>회원가입 한번으로 커뮤니티에 참여하세요!</dd>
						<dd>
							<Link href="/register">
								<small>＞</small> 회원가입
							</Link>
						</dd>
					</dl>
					<hr />
					<dl>
						<dt>비밀번호를 잊으셨나요?</dt>
						<dd>비밀번호를 깜박했다면 다시 설정할 수 있어요!</dd>
						<dd>
							<Link href="/forgot-password">
								<small>＞</small> 비밀번호 재설정
							</Link>
						</dd>
					</dl>
				</fieldset>
			</div>
		</>
    );
}