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

'use client';

import './style.scss';
import Link from 'next/link';
import { useState, useEffect, useRef } from 'react';
import { fetchApi } from '@/lib/utils/client';
import useAuth from '@/hooks/useAuth';
import useErrorAlert from '@/hooks/useErrorAlert';
import Loading from '@/app/component/Loading';
import NavTabs from '../navTabs';

export default function Withdraw()
{
	const { member } = useAuth();
	const { setError } = useErrorAlert();
	const [loading, setLoading] = useState<boolean>(false);
	const [isComplete, setComplete] = useState<boolean>(false);
	const [agree, setAgree] = useState<boolean>(false);
	const [password, setPassword] = useState<string|null>('');
	const passwordRef = useRef<HTMLInputElement>(null);

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

		if (!member) {
			return;
		}

		if (!password) {
			alert('비밀번호를 입력해주세요.');
			passwordRef.current?.focus();
			return;
		}

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

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

			fetchApi('/api/mypage/withdraw', {
				method: 'POST',
				body: { password }
			}).then(() => {
				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 null;
	}

	return (
		<>
		<NavTabs />

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

			<h1>회원탈퇴</h1>
			<form 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>
								<div className='flex flex-col sm:flex-row gap-2 justify-self-center items-center'>
									<label htmlFor="password" className='pe-2 shrink-0'>비밀번호</label>
									<input type="password" name="password" id="password" className="form-control w-full" ref={passwordRef} onChange={(e) => setPassword(e.target.value)} autoFocus />
								</div>
							</td>
						</tr>
						<tr>
							<td>
								<label>
									<input type="checkbox" name="agree" onChange={handleChange} />
									위 내용으로 탈퇴에 동의합니다.
								</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>
	</>
	);
}