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 = () => {
-
-
-
-
-
+
+
+ {errorMessage}
회원 탈퇴
- 제출
+ 변경 하기
{
);
@@ -139,11 +151,6 @@ const Input = styled.input`
color: ${({ theme }) => theme.color.black};
`;
-const TextArea = styled.textarea<{ disabled: boolean }>`
- ${disabledStyle};
- resize: none;
-`;
-
const WithdrawalButton = styled.button`
color: ${({ theme }) => theme.color.disabled};
text-decoration: underline;