dpot-frontend/app/(main)/(account)/verify-email/page.tsx

'use client';

import './style.scss';
import Link from 'next/link';
import { useSearchParams } from 'next/navigation';
import { useState, useEffect } from 'react';
import { fetchApi } from '@/lib/utils/client';
import Loading from '@/app/component/Loading';

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

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

	useEffect(() => {

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

		fetchApi(`/api/mypage/email/verify?token=${encodeURIComponent(token)}`).then(() => {
			localStorage.removeItem('member');
			setComplete(true);
		}).catch(err => {
			setError(err.message);
		}).finally(() => {
			setLoading(false);
		});

	}, [token]);

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

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