diff --git a/frontend/src/features/member/components/NicknameChangingModal.tsx b/frontend/src/features/member/components/NicknameChangingModal.tsx index a5fe348b..dfbb3f5f 100644 --- a/frontend/src/features/member/components/NicknameChangingModal.tsx +++ b/frontend/src/features/member/components/NicknameChangingModal.tsx @@ -6,14 +6,14 @@ interface NicknameChangingModalProps { isOpen: boolean; nickname: string | undefined; closeModal: () => void; - onChangeNickname: () => void; + onSubmitNickname: () => void; } const NicknameChangingModal = ({ isOpen, nickname, closeModal, - onChangeNickname, + onSubmitNickname, }: NicknameChangingModalProps) => { if (!nickname) return; @@ -26,7 +26,7 @@ const NicknameChangingModal = ({ 취소 - + 변경 diff --git a/frontend/src/pages/EditProfilePage.tsx b/frontend/src/pages/EditProfilePage.tsx index 324aabcf..d8145d7c 100644 --- a/frontend/src/pages/EditProfilePage.tsx +++ b/frontend/src/pages/EditProfilePage.tsx @@ -14,7 +14,10 @@ import { useMutation } from '@/shared/hooks/useMutation'; const EditProfilePage = () => { const { user, logout, login } = useAuthContext(); - const [nickname, setNickname] = useState(user?.nickname); + const [nicknameEntered, setNicknameEntered] = useState(user?.nickname); + const [errorMessage, setErrorMessage] = useState(''); + const navigate = useNavigate(); + // modal hooks const { isOpen: isWithdrawalModalOpen, openModal: openWithdrawalModal, @@ -25,13 +28,16 @@ const EditProfilePage = () => { openModal: openNicknameModal, closeModal: closeNicknameModal, } = useModal(); + + // 회원탈퇴 API const { mutateData: withdrawMember } = useMutation(deleteMember(user?.memberId)); - const updateNicknameCallback = useMemo(() => { - return updateNickname(user?.memberId, nickname); - }, [nickname]); - const { mutateData: changeNickname } = useMutation(updateNicknameCallback); - const navigate = useNavigate(); + // 닉네임변경 API + const mutateNickname = useMemo( + () => updateNickname(user?.memberId, nicknameEntered), + [nicknameEntered, user?.memberId] + ); + const { mutateData: changeNickname } = useMutation(mutateNickname); if (!user) { navigate(ROUTE_PATH.LOGIN); @@ -44,14 +50,22 @@ const EditProfilePage = () => { navigate(ROUTE_PATH.ROOT); }; - const changeNicknameInput: React.ChangeEventHandler = (event) => { - setNickname(event.currentTarget.value); + const handleChangeNickname: React.ChangeEventHandler = (event) => { + setNicknameEntered(event.currentTarget.value); }; const submitNicknameChanged = async () => { - const { accessToken } = await changeNickname(); - login(accessToken); - navigate('/my-page'); + if (nicknameEntered === user?.nickname) { + setErrorMessage('이전과 다른 닉네임을 사용해주세요.'); + closeNicknameModal(); + return; + } + + const accessToken = (await changeNickname())?.accessToken; + if (accessToken) { + login(accessToken); + navigate('/my-page'); + } }; return ( @@ -61,15 +75,13 @@ const EditProfilePage = () => { - - - - -