bitforum-frontend/app/(account)/valid-email/page.tsx

'use client';

import './style.scss';
import Link from 'next/link';
import { useSearchParams } from 'next/navigation';
import { useState, useEffect } from 'react';
import { useMemberContext } from '@/contexts/memberProvider';
import { fetchValidEmail } from '@/lib/api/account';
import Loading from '@/app/component/Loading';

export default function VerifyEmail()
{
	const searchParams = useSearchParams();
	const { member, setMember } = useMemberContext();
	const [error, setError] = useState<string>('');
	const [loading, setLoading] = useState<boolean>(false);
	const [isComplete, setComplete] = useState<boolean>(false);
	const [newEmail, setNewEmail] = useState<string>('');
	const [token] = useState(searchParams.get('token'));

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

	useEffect(() => {

		if (!member) {
			return;
		}

		setLoading(true);

		if (!token) {
			setError('잘못된 접근입니다.');
			setLoading(false);
			setComplete(false);
			return;
		}

		fetchValidEmail(token).then((res) => {
			if (!res.ok) {
				throw new Error(res.message!);
			}

			member.email = res.data;
			setComplete(true);
			setMember(member);
			setNewEmail(member.email);
			localStorage.setItem('member', JSON.stringify(member));
		}).catch(err => {
			setError(err.message);
		}).finally(() => {
			setLoading(false);
		});

	}, [token, member, setMember]);

	if (loading) {
		return <Loading />;
	}

	return (
		<>
		<div id="verifyEmail">
			{isComplete ?
			<>
				<h1>이메일 변경이 완료되었습니다.</h1>
				<blockquote>
					<strong>{newEmail} 주소의 인증이 확인되었습니다. </strong><br />
					다시 로그인 후 변경된 이메일로 서비스 이용이 가능합니다.<br />
				</blockquote>
				<br />
				<Link href="/profile" className="btn btn-default">확인</Link>
			</>
			:
			<>
				<h1>이메일 변경이 거부되었습니다.</h1>
				<blockquote>
					인증 시간이 만료되었거나, 이미 인증되었을 수 있습니다.<br />
					처음부터 다시 시도해 주십시오.
				</blockquote>
				<br />
				<Link href="/change-email" className="btn btn-default">다시 시도하기</Link>
			</>
			}
		</div>
		</>
	);
}