bitforum-frontend/app/(account)/withdraw/page.tsx

'use client';

import './style.scss';
import Link from 'next/link';
import { useState, useEffect } from 'react';
import { fetchWithdraw } from '@/lib/api/account';
import useAuth from '@/hooks/useAuth';
import Loading from '@/app/component/Loading';
import NavTabs from '../navTabs';

export default function Withdraw()
{
	const { member } = useAuth();
	const [error, setError] = useState<string>('');
	const [loading, setLoading] = useState<boolean>(true);
	const [isComplete, setComplete] = useState<boolean>(false);
	const [agree, setAgree] = useState<boolean>(false);

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

	useEffect(() => {
        if (member) {
            setLoading(false);
        }
    }, [member]);

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

		if (!member) {
			return;
		}

		if (agree === false) {
			alert('탈퇴에 동의해주세요.');
			return;
		}

		if (confirm('정말 탈퇴하시겠습니까?')) {
			setLoading(true);

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

				setComplete(true);
				localStorage.removeItem('member');
			}).catch(err => {
				setError(err.message);
			}).finally(() => {
				setLoading(false);
			});
		}
	}

	const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
		setAgree(e.target.checked);
	};

	useEffect(() => {
		if (isComplete) {
			alert('탈퇴가 완료되었습니다.');
			setComplete(false);
			location.replace('/');
		}
	}, [isComplete]);

	if (!member) {
        return <Loading />;
    }

	return (
		<>
		<NavTabs />

		<div id="withdraw">
			{ loading && <Loading /> }

			<h1>회원탈퇴</h1>
			<form id="fWithdraw" method="post" acceptCharset="utf-8" autoComplete="off" onSubmit={handleSubmit}>
				<table className="table-auto max-xl:w-full lg:w-[600px]">
					<tbody>
						<tr>
							<th>
								<blockquote>
									사용하고 계신 계정({member.email})은 탈퇴할 경우 재사용 및 복구가 불가능합니다.
									<ins>탈퇴한 계정은 본인과 타인 모두 재사용 및 복구가 불가하오니 신중하게 선택하시기 바랍니다.</ins>
									<br/>
									<br/>
									추가 회원가입은 탈퇴일로부터 90일 후에 가능합니다.
									탈퇴 후 회원정보와 주요 서비스 이용기록은 모두 삭제되며, 삭제된 데이터는 복구되지 않습니다.
									<br/>
									<br/>
									삭제되는 내용을 확인하시고 필요한 데이터는 미리 백업을 해주세요.
									탈퇴 후 게시판, 댓글은은 등록한 게시물은 삭제되지 않고 유지됩니다.
									<br/>
									<br/>
									탈퇴하기 전에 이메일 인증이 필요합니다.
								</blockquote>
							</th>
						</tr>
						<tr>
							<td>
								<label>
									<input type="checkbox" name="agree" onChange={handleChange} required />
									위 내용으로 탈퇴에 동의합니다.
								</label>
							</td>
						</tr>
					</tbody>
					<tfoot>
						<tr>
							<td>
								<div className="flex justify-center gap-2">
									<button type="submit" className="btn btn-submit">확인</button>
									<Link href="/profile" className="btn btn-default">취소</Link>
								</div>
							</td>
						</tr>
					</tfoot>
				</table>
			</form>
		</div>
	</>
	);
}