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

'use client';

import './style.scss';
import Link from 'next/link';
import { useState, useCallback, useRef } from 'react';
import { useMemberContext } from '@/contexts/memberProvider';
import useErrorAlert from '@/hooks/useErrorAlert';
import { useConfigContext } from '@/contexts/configProvider';
import { ChangeEmailRequest } from '@/types/request/account';
import { fetchApi } from '@/lib/utils/client';
import Loading from '@/app/component/Loading';

export default function ChangeEmail()
{
	const config = useConfigContext();
	const { member } = useMemberContext();
	const { setError } = useErrorAlert();
	const [isComplete, setComplete] = useState<boolean>(false);
	const [loading, setLoading] = useState<boolean>(false);
	const [newEmail, setNewEmail] = useState<string>('');
	const newEmailRef = useRef<HTMLInputElement>(null);

	// 이메일 변경 요청
	const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
		e.preventDefault();

		if (!member) {
			return;
		}

		if (!newEmail) {
			newEmailRef.current?.focus();
			return setError('변경하실 이메일을 입력하세요.');
		}

		setLoading(true);

		fetchApi('/api/mypage/email', {
			method: 'POST',
			body: { NewEmail: newEmail } as ChangeEmailRequest
		}).then(() => {
			setComplete(true);
		}).catch(err => {
			setError(err.message);
		}).finally(() => {
			setLoading(false);
		});
	}

	const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
		setNewEmail(e.target.value.trim());
	}, []);

	const refresh = () => location.reload();

	return (
		<>
		<div id="changeEmail">
			{ loading && <Loading /> }

			{!isComplete ?
			<>
				<h1>이메일 변경</h1>
				<form method="post" acceptCharset="utf-8" autoComplete="off" onSubmit={handleSubmit}>
					<table className="table-auto max-xl:w-full lg:w-[600px]">
						<caption>
							새 이메일 주소를 입력하고 &quot;확인&quot; 버튼을 누릅니다.<br />
							인증 메일이 도착하시면 내용을 확인하신 후 본문에 있는 링크를 클릭해주세요.
						</caption>
						<colgroup>
							<col width="30%"/>
							<col width="60%"/>
							<col width="10%"/>
						</colgroup>
						<tbody>
							<tr>
								<th>현재 이메일</th>
								<td>{member?.email}</td>
								<td>&nbsp;</td>
							</tr>
							<tr>
								<th>새 이메일</th>
								<td>
									<input type="email" name="new_email" id="newEmail" ref={newEmailRef} value={newEmail} placeholder="변경할 이메일 주소" maxLength={60} autoFocus autoComplete="off" onChange={handleChange} />
								</td>
								<td>&nbsp;</td>
							</tr>
						</tbody>
						<tfoot>
							<tr>
								<td colSpan={3}>
									<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>
				<br />
				<dl className="max-xl:w-full lg:w-[600px]">
					<dt>등록할 수 없는 이메일 주소</dt>
					<dd>
						<ol>
							<li>전 세계 인터넷 통신 표준 RFC(Request for Comments)를 준수하지 않는 전자 메일 주소</li>
							<li>회사에서 지정한 사용할 수 없는 문자(공백 및 더블바이트 문자)</li>
							<li>전자 메일 계정 부분에서 반자 영숫자, 반자 기호 _(밑줄), . (점) 및 -(하이픈) 이외의 문자가 사용됩니다.</li>
							{(config.account.changeEmailDay ?? 0) > 0 && <li>이메일 변경 주기는 {config.account.changeEmailDay}일입니다.</li>}
						</ol>
					</dd>
				</dl>
			</>
			:
			<>
				<h1>인증 이메일 발송</h1>
				<blockquote>
					<strong>{newEmail} 으로 인증 이메일이 발송되었습니다.</strong><br />
					메일이 도착하면 내용을 확인하신 후 본문에 있는 링크를 클릭해 주세요.<br />
					몇 분 이내에 메일이 도착하지 않는 경우 등록 된 메일 주소 및 수신 거부 설정을 확인한 후
					처음부터 다시 시도해 주십시오.
				</blockquote>
				<br />
				<button type="button" className="btn btn-default" onClick={refresh}>다시 시도하기</button>
			</>
			}
		</div>
		</>
	);
}