From fa48187e0b1b96cfd63224edfc9cc6cfa529f39b Mon Sep 17 00:00:00 2001
From: ukkodeveloper <ukkodeveloper@gmail.com>
Date: Sat, 30 Sep 2023 09:05:09 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20=ED=95=A8=EC=88=98=EB=AA=85=20?=
 =?UTF-8?q?=EB=B0=8F=20=EC=9D=B4=EB=B2=A4=ED=8A=B8=20=ED=95=B8=EB=93=A4?=
 =?UTF-8?q?=EB=9F=AC=20=EB=A1=9C=EC=A7=81=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/NicknameChangingModal.tsx      |  6 +-
 frontend/src/pages/EditProfilePage.tsx        | 55 +++++++++++--------
 2 files changed, 34 insertions(+), 27 deletions(-)

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 = ({
           <CancelButton onClick={closeModal} type="button">
             취소
           </CancelButton>
-          <ConfirmButton type="button" onClick={onChangeNickname}>
+          <ConfirmButton type="button" onClick={onSubmitNickname}>
             변경
           </ConfirmButton>
         </ButtonContainer>
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<HTMLInputElement> = (event) => {
-    setNickname(event.currentTarget.value);
+  const handleChangeNickname: React.ChangeEventHandler<HTMLInputElement> = (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 = () => {
       <Avatar src={shookshook} />
       <Label htmlFor="nickname">닉네임</Label>
       <Spacing direction={'vertical'} size={4} />
-      <Input id="nickname" value={nickname} onChange={changeNicknameInput} />
-      <Spacing direction={'vertical'} size={16} />
-      <Label htmlFor="introduction">소개</Label>
-      <Spacing direction={'vertical'} size={4} />
-      <TextArea id="introduction" value={''} disabled maxLength={100} />
+      <Input id="nickname" value={nicknameEntered} onChange={handleChangeNickname} />
+      <Spacing direction={'vertical'} size={8} />
+      <p>{errorMessage}</p>
       <Spacing direction={'vertical'} size={16} />
       <WithdrawalButton onClick={openWithdrawalModal}>회원 탈퇴</WithdrawalButton>
       <SubmitButton onClick={openNicknameModal} disabled={false}>
-        제출
+        변경 하기
       </SubmitButton>
       <WithdrawalModal
         isOpen={isWithdrawalModalOpen}
@@ -79,8 +91,8 @@ const EditProfilePage = () => {
       <NicknameChangingModal
         isOpen={isNicknameModalOpen}
         closeModal={closeNicknameModal}
-        onChangeNickname={submitNicknameChanged}
-        nickname={nickname}
+        onSubmitNickname={submitNicknameChanged}
+        nickname={nicknameEntered}
       />
     </Container>
   );
@@ -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;