bitforum-frontend/app/(account)/change-password/page.tsx

'use client';

import './style.scss';
import Link from 'next/link';
import { useState, useEffect, useCallback } from 'react';
import { useConfigContext } from '@/contexts/configProvider';
import { useMemberContext } from '@/contexts/memberProvider';
import { ChangePasswordRequest } from '@/dtos/request/account';
import { fetchChangePassword } from '@/lib/api/account';
import { getPasswordPolicyMessage } from '@/lib/utils/client';
import NavTabs from '../navTabs';

export default function ChangePassword()
{
	const config = useConfigContext();
	const { member } = useMemberContext();
	const [error, setError] = useState<string>('');
	const [isComplete, setComplete] = useState<boolean>(false);
	const [formData, setFormData] = useState({
		currentPassword: '',
		newPassword: '',
		confirmPassword: ''
	});

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

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

		if (!member) {
			return;
		}

		if (formData.newPassword !== formData.confirmPassword) {
			setError("새 비밀번호가 일치하지 않습니다.");
			return;
		}

		if (formData.currentPassword === formData.newPassword) {
			setError("새 비밀번호는 현재 비밀번호와 달라야 합니다.");
			return;
		}

		fetchChangePassword({
			ID: member.id,
			CurrentPassword: formData.currentPassword,
			NewPassword: formData.newPassword,
			ConfirmPassword: formData.confirmPassword
		} as ChangePasswordRequest).then((res) => {
			if (!res.ok) {
				throw new Error(res.message!);
			}

			setComplete(true);
		}).catch(err => {
			setError(err.message);
		});
	}

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

	useEffect(() => {
		if (isComplete)
		{
			// 입력 초기화
			setFormData({
				currentPassword: '',
				newPassword: '',
				confirmPassword: ''
			});

			setComplete(false);
			alert("비밀번호가 변경되었습니다.");
		}
	}, [isComplete]);

	const txtPasswordGuide = getPasswordPolicyMessage({
		passwordUppercaseLength: config.account.passwordUppercaseLength,
		passwordNumbersLength: config.account.passwordNumbersLength,
		passwordSpecialcharsLength: config.account.passwordSpecialcharsLength
	});

	return (
		<>
		<NavTabs />

		<div id="changePassword">
			<h1>비밀번호 변경</h1>
			<form id="fChangePassword" method="post" acceptCharset="utf-8" autoComplete="off" onSubmit={handleSubmit}>
				<table className="table-auto max-xl:w-full lg:w-[600px]">
					<caption>
						비밀번호는 { config.account.passwordMinLength }자 이상 20자 이하로 설정 가능합니다.<br />
						{ txtPasswordGuide }
					</caption>
					<colgroup>
						<col width="30%"/>
						<col width="60%"/>
						<col width="10%"/>
					</colgroup>
					<tbody>
						<tr>
							<th>현재 비밀번호</th>
							<td>
								<input type="password" id="currentPassword" value={formData.currentPassword} onChange={handleChange} placeholder="현재 비밀번호" required />
							</td>
							<td>&nbsp;</td>
						</tr>
						<tr>
							<th>새 비밀번호</th>
							<td>
								<input type="password" id="newPassword" value={formData.newPassword} onChange={handleChange} placeholder="새 비밀번호" required />
							</td>
							<td>&nbsp;</td>
						</tr>
						<tr>
							<th>새 비밀번호 확인</th>
							<td>
								<input type="password" id="confirmPassword" value={formData.confirmPassword} onChange={handleChange} placeholder="새 비밀번호 확인" required />
							</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>
		</div>
		</>
	);
}