dpot-frontend/app/(auth)/login/page.tsx

'use client';

import './style.scss';
import Link from 'next/link';
import { Checkbox } from '@/components/ui/checkbox';
import { useState, useEffect, useRef } from 'react';
import { GoogleLogin } from '@react-oauth/google';
import { fetchApi } from '@/lib/utils/client';
import { LoginRequest } from '@/types/request/auth';
import { LoginResponse } from '@/types/response/auth';
import useAuth from '@/hooks/useAuth';

export default function Page()
{
    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);
    const googleBtnRef = useRef<HTMLDivElement>(null);
    const [googleBtnWidth, setGoogleBtnWidth] = useState<number>(0);

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

    useEffect(() => {
        if (googleBtnRef.current) {
            const observer = new ResizeObserver(entries => {
                for (const entry of entries) {
                    setGoogleBtnWidth(Math.floor(entry.contentRect.width));
                }
            });
            observer.observe(googleBtnRef.current);
            return () => observer.disconnect();
        }
    }, []);

    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 fetchApi<LoginResponse>('/api/auth/login', {
                method: 'POST',
                body: { Email: email, Password: password } as LoginRequest
            });

            login(rememberMe);

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

    // 구글 로그인
    const handleGoogleLogin = async (credentialResponse: { credential?: string }) => {
        try {
            const res = await fetchApi<LoginResponse>('/api/auth/google-login', {
                method: 'POST',
                body: { credential: credentialResponse.credential }
            });

            login(rememberMe);

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

    const handleGoogleLoginFailed = () => {
        setError('Google 로그인에 실패했습니다.');
    };

    return (
		<>
			<div id="loginForm" className="row-start-2 flex flex-row flex-wrap gap-2">
				<fieldset className="grow">
					<legend>로그인</legend>
					<form 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" autoFocus />

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

                        <div ref={googleBtnRef} className='w-full mt-2'>
                            {googleBtnWidth > 0 && (
                                <GoogleLogin
                                    onSuccess={handleGoogleLogin}
                                    onError={handleGoogleLoginFailed}
                                    width={googleBtnWidth}
                                    size="large"
                                    shape="rectangular"
                                    context="signin"
                                    ux_mode="redirect"
                                    login_uri={`${window.location.origin}/login/google/callback`}
                                    logo_alignment="center"
                                />
                            )}
                        </div>
					</form>
                    <hr hidden/>
				</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>

                    <section className="mt-3">
                        <Checkbox name="remember_me" id="rememberMe" checked={rememberMe} onCheckedChange={(checked) => setRememberMe(checked === true)} />
                        <label htmlFor="rememberMe">로그인 상태 유지</label>
                    </section>
				</fieldset>
			</div>
		</>
    );
}