From 301595a5ce95bcf300581dbaa65b394c7d2e19ed Mon Sep 17 00:00:00 2001
From: ukkodeveloper <ukkodeveloper@gmail.com>
Date: Fri, 29 Sep 2023 21:43:36 +0900
Subject: [PATCH 01/18] =?UTF-8?q?feat:=20useMutation=20promise=20=EA=B0=9D?=
 =?UTF-8?q?=EC=B2=B4=20=EB=B0=98=ED=99=98=ED=95=98=EB=8F=84=EB=A1=9D=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/shared/hooks/useMutation.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/frontend/src/shared/hooks/useMutation.ts b/frontend/src/shared/hooks/useMutation.ts
index a7289a371..d35673ffe 100644
--- a/frontend/src/shared/hooks/useMutation.ts
+++ b/frontend/src/shared/hooks/useMutation.ts
@@ -24,6 +24,9 @@ export const useMutation = <T, P extends any[]>(mutateFn: (...params: P) => Prom
       try {
         const responseBody = await mutateFn(...params);
         setData(responseBody);
+
+        //event handler에서 바로 처리하기 위해서 response를 return한다.
+        return responseBody;
       } catch (error) {
         if (error instanceof AuthError) {
           logout();

From a05b47b7b276e250dff1ffd8b8605027d7707487 Mon Sep 17 00:00:00 2001
From: ukkodeveloper <ukkodeveloper@gmail.com>
Date: Fri, 29 Sep 2023 21:44:16 +0900
Subject: [PATCH 02/18] =?UTF-8?q?feat:=20nickname=20=EB=B3=80=EA=B2=BD=20a?=
 =?UTF-8?q?pi=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/features/member/remotes/nickname.ts | 8 ++++++++
 1 file changed, 8 insertions(+)
 create mode 100644 frontend/src/features/member/remotes/nickname.ts

diff --git a/frontend/src/features/member/remotes/nickname.ts b/frontend/src/features/member/remotes/nickname.ts
new file mode 100644
index 000000000..5a3b2cd51
--- /dev/null
+++ b/frontend/src/features/member/remotes/nickname.ts
@@ -0,0 +1,8 @@
+import fetcher from '@/shared/remotes';
+
+export const updateNickname =
+  (memberId: number | undefined, nickname: string | undefined) => () => {
+    return fetcher(`/members/${memberId}/nickname`, 'PATCH', {
+      nickname,
+    });
+  };

From e0c1a3136033418185d286b435c95d12faf2702e Mon Sep 17 00:00:00 2001
From: ukkodeveloper <ukkodeveloper@gmail.com>
Date: Fri, 29 Sep 2023 21:45:45 +0900
Subject: [PATCH 03/18] =?UTF-8?q?feat:=20=ED=94=84=EB=A1=9C=ED=95=84=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD=20=ED=8E=98=EC=9D=B4=EC=A7=80=EC=97=90?=
 =?UTF-8?q?=EC=84=9C=20nickname=20=EB=B3=80=EA=B2=BD=20=ED=95=B8=EB=93=A4?=
 =?UTF-8?q?=EB=9F=AC=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/pages/EditProfilePage.tsx | 35 ++++++++++++++++++++------
 1 file changed, 28 insertions(+), 7 deletions(-)

diff --git a/frontend/src/pages/EditProfilePage.tsx b/frontend/src/pages/EditProfilePage.tsx
index 1ca633601..00ea0d748 100644
--- a/frontend/src/pages/EditProfilePage.tsx
+++ b/frontend/src/pages/EditProfilePage.tsx
@@ -1,18 +1,27 @@
+import { useMemo, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import styled, { css } from 'styled-components';
 import shookshook from '@/assets/icon/shookshook.svg';
 import { useAuthContext } from '@/features/auth/components/AuthProvider';
 import WithdrawalModal from '@/features/member/components/WithdrawalModal';
 import { deleteMember } from '@/features/member/remotes/member';
+import { updateNickname } from '@/features/member/remotes/nickname';
 import useModal from '@/shared/components/Modal/hooks/useModal';
 import Spacing from '@/shared/components/Spacing';
 import ROUTE_PATH from '@/shared/constants/path';
 import { useMutation } from '@/shared/hooks/useMutation';
 
 const EditProfilePage = () => {
-  const { user, logout } = useAuthContext();
+  const { user, logout, login } = useAuthContext();
+
+  const [nickname, setNickname] = useState(user?.nickname);
   const { isOpen, openModal, closeModal } = useModal();
-  const { mutateData } = useMutation(deleteMember(user?.memberId));
+  const { mutateData: withdrawMember } = useMutation(deleteMember(user?.memberId));
+  const updateNicknameCallback = useMemo(() => {
+    return updateNickname(user?.memberId, nickname);
+  }, [nickname]);
+  const { mutateData: changeNickname } = useMutation(updateNicknameCallback);
+
   const navigate = useNavigate();
 
   if (!user) {
@@ -21,11 +30,21 @@ const EditProfilePage = () => {
   }
 
   const handleWithdrawal = async () => {
-    await mutateData();
+    await withdrawMember();
     logout();
     navigate(ROUTE_PATH.ROOT);
   };
 
+  const changeNicknameInput: React.ChangeEventHandler<HTMLInputElement> = (event) => {
+    setNickname(event.currentTarget.value);
+  };
+
+  const submitNicknameChanged = async () => {
+    const { accessToken } = await changeNickname();
+    login(accessToken);
+    //TODO: 성공 모달
+  };
+
   return (
     <Container>
       <Title>프로필 수정</Title>
@@ -33,14 +52,16 @@ const EditProfilePage = () => {
       <Avatar src={shookshook} />
       <Label htmlFor="nickname">닉네임</Label>
       <Spacing direction={'vertical'} size={4} />
-      <Input id="nickname" value={user.nickname} disabled />
+      <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} />
       <Spacing direction={'vertical'} size={16} />
       <WithdrawalButton onClick={openModal}>회원 탈퇴</WithdrawalButton>
-      <SubmitButton disabled>제출</SubmitButton>
+      <SubmitButton onClick={submitNicknameChanged} disabled={false}>
+        제출
+      </SubmitButton>
       <WithdrawalModal isOpen={isOpen} closeModal={closeModal} onWithdraw={handleWithdrawal} />
     </Container>
   );
@@ -93,10 +114,10 @@ const disabledStyle = css<{ disabled: boolean }>`
     disabled ? theme.color.disabledBackground : theme.color.white};
 `;
 
-const Input = styled.input<{ disabled: boolean }>`
-  ${disabledStyle};
+const Input = styled.input`
   font-size: 16px;
   padding: 0 8px;
+  color: ${({ theme }) => theme.color.black};
 `;
 
 const TextArea = styled.textarea<{ disabled: boolean }>`

From 8bdd8ee659fd2d5e5e1e1e958a37ee158a344baa Mon Sep 17 00:00:00 2001
From: ukkodeveloper <ukkodeveloper@gmail.com>
Date: Fri, 29 Sep 2023 21:49:11 +0900
Subject: [PATCH 04/18] =?UTF-8?q?refactor:=20=ED=9A=8C=EC=9B=90=20?=
 =?UTF-8?q?=ED=83=88=ED=87=B4=20modal=20=EA=B4=80=EB=A0=A8=20=EB=84=A4?=
 =?UTF-8?q?=EC=9D=B4=EB=B0=8D=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/pages/EditProfilePage.tsx | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/frontend/src/pages/EditProfilePage.tsx b/frontend/src/pages/EditProfilePage.tsx
index 00ea0d748..1eaf79236 100644
--- a/frontend/src/pages/EditProfilePage.tsx
+++ b/frontend/src/pages/EditProfilePage.tsx
@@ -15,7 +15,11 @@ const EditProfilePage = () => {
   const { user, logout, login } = useAuthContext();
 
   const [nickname, setNickname] = useState(user?.nickname);
-  const { isOpen, openModal, closeModal } = useModal();
+  const {
+    isOpen: isWithdrawalModalOpen,
+    openModal: openWithdrawalModal,
+    closeModal: closeWithdrawalModal,
+  } = useModal();
   const { mutateData: withdrawMember } = useMutation(deleteMember(user?.memberId));
   const updateNicknameCallback = useMemo(() => {
     return updateNickname(user?.memberId, nickname);
@@ -58,11 +62,15 @@ const EditProfilePage = () => {
       <Spacing direction={'vertical'} size={4} />
       <TextArea id="introduction" value={''} disabled maxLength={100} />
       <Spacing direction={'vertical'} size={16} />
-      <WithdrawalButton onClick={openModal}>회원 탈퇴</WithdrawalButton>
+      <WithdrawalButton onClick={openWithdrawalModal}>회원 탈퇴</WithdrawalButton>
       <SubmitButton onClick={submitNicknameChanged} disabled={false}>
         제출
       </SubmitButton>
-      <WithdrawalModal isOpen={isOpen} closeModal={closeModal} onWithdraw={handleWithdrawal} />
+      <WithdrawalModal
+        isOpen={isWithdrawalModalOpen}
+        closeModal={closeWithdrawalModal}
+        onWithdraw={handleWithdrawal}
+      />
     </Container>
   );
 };

From 364656e96b40d1e34d77245fbdb6a5834227390a Mon Sep 17 00:00:00 2001
From: ukkodeveloper <ukkodeveloper@gmail.com>
Date: Fri, 29 Sep 2023 22:41:51 +0900
Subject: [PATCH 05/18] =?UTF-8?q?feat:=20nickname=20=EB=B3=80=EA=B2=BD=20?=
 =?UTF-8?q?=ED=99=95=EC=9D=B8=20modal=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/NicknameChangingModal.tsx      | 74 +++++++++++++++++++
 frontend/src/pages/EditProfilePage.tsx        | 21 ++++--
 2 files changed, 90 insertions(+), 5 deletions(-)
 create mode 100644 frontend/src/features/member/components/NicknameChangingModal.tsx

diff --git a/frontend/src/features/member/components/NicknameChangingModal.tsx b/frontend/src/features/member/components/NicknameChangingModal.tsx
new file mode 100644
index 000000000..a5fe348b3
--- /dev/null
+++ b/frontend/src/features/member/components/NicknameChangingModal.tsx
@@ -0,0 +1,74 @@
+import styled from 'styled-components';
+import Modal from '@/shared/components/Modal/Modal';
+import Spacing from '@/shared/components/Spacing';
+
+interface NicknameChangingModalProps {
+  isOpen: boolean;
+  nickname: string | undefined;
+  closeModal: () => void;
+  onChangeNickname: () => void;
+}
+
+const NicknameChangingModal = ({
+  isOpen,
+  nickname,
+  closeModal,
+  onChangeNickname,
+}: NicknameChangingModalProps) => {
+  if (!nickname) return;
+
+  return (
+    <Modal isOpen={isOpen} closeModal={closeModal}>
+      <>
+        <ModalContent>{`닉네임을 ${nickname}로 정말 바꾸겠습니까?`}</ModalContent>
+        <Spacing direction={'vertical'} size={16} />
+        <ButtonContainer>
+          <CancelButton onClick={closeModal} type="button">
+            취소
+          </CancelButton>
+          <ConfirmButton type="button" onClick={onChangeNickname}>
+            변경
+          </ConfirmButton>
+        </ButtonContainer>
+      </>
+    </Modal>
+  );
+};
+
+export default NicknameChangingModal;
+
+const ModalContent = styled.div`
+  align-self: start;
+
+  font-size: 16px;
+  line-height: 200%;
+  color: ${({ theme }) => theme.color.subText};
+  white-space: pre-line;
+`;
+
+const Button = styled.button`
+  cursor: pointer;
+
+  height: 36px;
+
+  color: ${({ theme: { color } }) => color.white};
+
+  border: none;
+  border-radius: 10px;
+`;
+
+const ConfirmButton = styled(Button)`
+  flex: 1;
+  background-color: ${({ theme: { color } }) => color.primary};
+`;
+
+const CancelButton = styled(Button)`
+  flex: 1;
+  background-color: ${({ theme: { color } }) => color.secondary};
+`;
+
+const ButtonContainer = styled.div`
+  display: flex;
+  gap: 16px;
+  width: 100%;
+`;
diff --git a/frontend/src/pages/EditProfilePage.tsx b/frontend/src/pages/EditProfilePage.tsx
index 1eaf79236..324aabcf2 100644
--- a/frontend/src/pages/EditProfilePage.tsx
+++ b/frontend/src/pages/EditProfilePage.tsx
@@ -3,6 +3,7 @@ import { useNavigate } from 'react-router-dom';
 import styled, { css } from 'styled-components';
 import shookshook from '@/assets/icon/shookshook.svg';
 import { useAuthContext } from '@/features/auth/components/AuthProvider';
+import NicknameChangingModal from '@/features/member/components/NicknameChangingModal';
 import WithdrawalModal from '@/features/member/components/WithdrawalModal';
 import { deleteMember } from '@/features/member/remotes/member';
 import { updateNickname } from '@/features/member/remotes/nickname';
@@ -13,13 +14,17 @@ import { useMutation } from '@/shared/hooks/useMutation';
 
 const EditProfilePage = () => {
   const { user, logout, login } = useAuthContext();
-
   const [nickname, setNickname] = useState(user?.nickname);
   const {
     isOpen: isWithdrawalModalOpen,
     openModal: openWithdrawalModal,
     closeModal: closeWithdrawalModal,
   } = useModal();
+  const {
+    isOpen: isNicknameModalOpen,
+    openModal: openNicknameModal,
+    closeModal: closeNicknameModal,
+  } = useModal();
   const { mutateData: withdrawMember } = useMutation(deleteMember(user?.memberId));
   const updateNicknameCallback = useMemo(() => {
     return updateNickname(user?.memberId, nickname);
@@ -46,7 +51,7 @@ const EditProfilePage = () => {
   const submitNicknameChanged = async () => {
     const { accessToken } = await changeNickname();
     login(accessToken);
-    //TODO: 성공 모달
+    navigate('/my-page');
   };
 
   return (
@@ -63,7 +68,7 @@ const EditProfilePage = () => {
       <TextArea id="introduction" value={''} disabled maxLength={100} />
       <Spacing direction={'vertical'} size={16} />
       <WithdrawalButton onClick={openWithdrawalModal}>회원 탈퇴</WithdrawalButton>
-      <SubmitButton onClick={submitNicknameChanged} disabled={false}>
+      <SubmitButton onClick={openNicknameModal} disabled={false}>
         제출
       </SubmitButton>
       <WithdrawalModal
@@ -71,6 +76,12 @@ const EditProfilePage = () => {
         closeModal={closeWithdrawalModal}
         onWithdraw={handleWithdrawal}
       />
+      <NicknameChangingModal
+        isOpen={isNicknameModalOpen}
+        closeModal={closeNicknameModal}
+        onChangeNickname={submitNicknameChanged}
+        nickname={nickname}
+      />
     </Container>
   );
 };
@@ -117,9 +128,9 @@ const Label = styled.label`
 `;
 
 const disabledStyle = css<{ disabled: boolean }>`
-  color: ${({ disabled, theme }) => (disabled ? theme.color.black400 : theme.color.black)};
+  color: ${({ disabled, theme }) => (disabled ? theme.color.black400 : theme.color.white)};
   background-color: ${({ disabled, theme }) =>
-    disabled ? theme.color.disabledBackground : theme.color.white};
+    disabled ? theme.color.disabledBackground : theme.color.primary};
 `;
 
 const Input = styled.input`

From 0e540b400ca7267487bed5d14de45b4f20b4cc12 Mon Sep 17 00:00:00 2001
From: ukkodeveloper <ukkodeveloper@gmail.com>
Date: Sat, 30 Sep 2023 09:05:09 +0900
Subject: [PATCH 06/18] =?UTF-8?q?refactor:=20=ED=95=A8=EC=88=98=EB=AA=85?=
 =?UTF-8?q?=20=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 a5fe348b3..dfbb3f5f3 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 324aabcf2..d8145d7c4 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;

From 7ba5a04da7b792e2d38283a4015f704564147e52 Mon Sep 17 00:00:00 2001
From: ukkodeveloper <ukkodeveloper@gmail.com>
Date: Tue, 3 Oct 2023 20:11:48 +0900
Subject: [PATCH 07/18] =?UTF-8?q?design:=20button=20disabled=20=EC=8B=9C?=
 =?UTF-8?q?=EC=97=90=20cursor=20not-allowed?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/shared/styles/GlobalStyles.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/frontend/src/shared/styles/GlobalStyles.ts b/frontend/src/shared/styles/GlobalStyles.ts
index b1f6e3913..fc1e7aef1 100644
--- a/frontend/src/shared/styles/GlobalStyles.ts
+++ b/frontend/src/shared/styles/GlobalStyles.ts
@@ -51,6 +51,10 @@ const GlobalStyles = createGlobalStyle`
     cursor: pointer;
     background: none;
     border: 0;
+    
+    &:disabled {
+      cursor: not-allowed;
+    }
   }
   a {
     text-decoration: none;

From a72d926541e2058271c9dfe1c199241480805ac5 Mon Sep 17 00:00:00 2001
From: ukkodeveloper <ukkodeveloper@gmail.com>
Date: Tue, 3 Oct 2023 20:13:06 +0900
Subject: [PATCH 08/18] =?UTF-8?q?feat:=20=EB=B3=80=EA=B2=BD=ED=95=A0=20?=
 =?UTF-8?q?=EB=8B=89=EB=84=A4=EC=9E=84=20=EC=9C=A0=ED=9A=A8=EC=84=B1=20?=
 =?UTF-8?q?=EA=B2=80=EC=82=AC=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/pages/EditProfilePage.tsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/frontend/src/pages/EditProfilePage.tsx b/frontend/src/pages/EditProfilePage.tsx
index d8145d7c4..fa884e06c 100644
--- a/frontend/src/pages/EditProfilePage.tsx
+++ b/frontend/src/pages/EditProfilePage.tsx
@@ -17,6 +17,9 @@ const EditProfilePage = () => {
   const [nicknameEntered, setNicknameEntered] = useState(user?.nickname);
   const [errorMessage, setErrorMessage] = useState('');
   const navigate = useNavigate();
+  // error Message
+  const hasError = errorMessage.length !== 0;
+
   // modal hooks
   const {
     isOpen: isWithdrawalModalOpen,
@@ -51,7 +54,13 @@ const EditProfilePage = () => {
   };
 
   const handleChangeNickname: React.ChangeEventHandler<HTMLInputElement> = (event) => {
-    setNicknameEntered(event.currentTarget.value);
+    const nickmaneEntered = event.currentTarget.value;
+    setNicknameEntered(nickmaneEntered);
+    if (nickmaneEntered.length < 2 || nickmaneEntered.length > 10) {
+      setErrorMessage('2글자 이상 10글자 이하 문자만 가능합니다.');
+    } else {
+      setErrorMessage('');
+    }
   };
 
   const submitNicknameChanged = async () => {

From b21a2e4b8ef0aff7b7e1314069b646f58095397d Mon Sep 17 00:00:00 2001
From: ukkodeveloper <ukkodeveloper@gmail.com>
Date: Tue, 3 Oct 2023 20:14:02 +0900
Subject: [PATCH 09/18] =?UTF-8?q?design:=20=ED=94=84=EB=A1=9C=ED=95=84=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=94=94?=
 =?UTF-8?q?=EC=9E=90=EC=9D=B8=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/pages/EditProfilePage.tsx | 56 +++++++++++++++++++-------
 1 file changed, 42 insertions(+), 14 deletions(-)

diff --git a/frontend/src/pages/EditProfilePage.tsx b/frontend/src/pages/EditProfilePage.tsx
index fa884e06c..1985d33b2 100644
--- a/frontend/src/pages/EditProfilePage.tsx
+++ b/frontend/src/pages/EditProfilePage.tsx
@@ -80,16 +80,21 @@ const EditProfilePage = () => {
   return (
     <Container>
       <Title>프로필 수정</Title>
-      <Spacing direction={'vertical'} size={16} />
+      <Spacing direction={'vertical'} size={100} />
       <Avatar src={shookshook} />
       <Label htmlFor="nickname">닉네임</Label>
       <Spacing direction={'vertical'} size={4} />
-      <Input id="nickname" value={nicknameEntered} onChange={handleChangeNickname} />
+      <Input
+        id="nickname"
+        value={nicknameEntered}
+        onChange={handleChangeNickname}
+        autoComplete="off"
+      />
       <Spacing direction={'vertical'} size={8} />
-      <p>{errorMessage}</p>
+      {hasError && <BottomError>{errorMessage}</BottomError>}
       <Spacing direction={'vertical'} size={16} />
       <WithdrawalButton onClick={openWithdrawalModal}>회원 탈퇴</WithdrawalButton>
-      <SubmitButton onClick={openNicknameModal} disabled={false}>
+      <SubmitButton onClick={openNicknameModal} disabled={hasError}>
         변경 하기
       </SubmitButton>
       <WithdrawalModal
@@ -116,7 +121,10 @@ const Container = styled.div`
   flex-direction: column;
 
   width: 100%;
+  min-width: 300px;
+  max-width: 800px;
   height: calc(100vh - ${({ theme: { headerHeight } }) => headerHeight.desktop});
+  margin: auto 0;
   padding-top: ${({ theme: { headerHeight } }) => headerHeight.desktop};
 
   @media (max-width: ${({ theme }) => theme.breakPoints.xs}) {
@@ -144,20 +152,33 @@ const Avatar = styled.img`
 `;
 
 const Label = styled.label`
-  font-size: 16px;
+  margin-top: 16px;
+  font-size: 18px;
   font-weight: 700;
 `;
 
-const disabledStyle = css<{ disabled: boolean }>`
-  color: ${({ disabled, theme }) => (disabled ? theme.color.black400 : theme.color.white)};
-  background-color: ${({ disabled, theme }) =>
-    disabled ? theme.color.disabledBackground : theme.color.primary};
-`;
-
 const Input = styled.input`
-  font-size: 16px;
   padding: 0 8px;
+
+  font-size: 18px;
+  line-height: 2.4;
   color: ${({ theme }) => theme.color.black};
+
+  border: none;
+  border-radius: 6px;
+  outline: none;
+  box-shadow: 0 0 0 1px inset ${({ theme }) => theme.color.black200};
+
+  transition: box-shadow 0.3s ease;
+
+  &:focus {
+    box-shadow: 0 0 0 2px inset ${({ theme }) => theme.color.primary};
+  }
+`;
+
+const BottomError = styled.p`
+  font-size: 14px;
+  color: ${({ theme }) => theme.color.error};
 `;
 
 const WithdrawalButton = styled.button`
@@ -174,11 +195,18 @@ const SubmitButton = styled.button<{ disabled: boolean }>`
   align-self: flex-end;
 
   width: 100%;
-  height: 36px;
+  padding: 11px 20px;
 
+  font-size: 18px;
   font-weight: 700;
+  line-height: 1.6;
 
-  ${disabledStyle};
+  background-color: ${({ theme }) => theme.color.primary};
   border: none;
   border-radius: 10px;
+
+  &:disabled {
+    color: ${({ theme }) => theme.color.disabled};
+    background-color: ${({ theme }) => theme.color.disabledBackground};
+  }
 `;

From 6ea7b547e5d93119a5b7626998a97c18945ab8b6 Mon Sep 17 00:00:00 2001
From: ukkodeveloper <ukkodeveloper@gmail.com>
Date: Tue, 3 Oct 2023 22:18:55 +0900
Subject: [PATCH 10/18] =?UTF-8?q?feat:=20=EB=8B=89=EB=84=A4=EC=9E=84=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD=20=EC=8B=9C=20=EB=A1=9C=EA=B7=B8=EC=95=84?=
 =?UTF-8?q?=EC=9B=83=20=ED=9B=84=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=EB=A1=9C=20=EC=9D=B4=EB=8F=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/NicknameChangingModal.tsx      |  2 +-
 frontend/src/pages/EditProfilePage.tsx        | 51 ++++++++-----------
 2 files changed, 22 insertions(+), 31 deletions(-)

diff --git a/frontend/src/features/member/components/NicknameChangingModal.tsx b/frontend/src/features/member/components/NicknameChangingModal.tsx
index dfbb3f5f3..17fcfccc0 100644
--- a/frontend/src/features/member/components/NicknameChangingModal.tsx
+++ b/frontend/src/features/member/components/NicknameChangingModal.tsx
@@ -20,7 +20,7 @@ const NicknameChangingModal = ({
   return (
     <Modal isOpen={isOpen} closeModal={closeModal}>
       <>
-        <ModalContent>{`닉네임을 ${nickname}로 정말 바꾸겠습니까?`}</ModalContent>
+        <ModalContent>{`닉네임 변경 시 다시 로그인을 해야합니다.\n닉네임을 ${nickname}로 바꾸겠습니까?`}</ModalContent>
         <Spacing direction={'vertical'} size={16} />
         <ButtonContainer>
           <CancelButton onClick={closeModal} type="button">
diff --git a/frontend/src/pages/EditProfilePage.tsx b/frontend/src/pages/EditProfilePage.tsx
index 1985d33b2..b49095677 100644
--- a/frontend/src/pages/EditProfilePage.tsx
+++ b/frontend/src/pages/EditProfilePage.tsx
@@ -1,6 +1,6 @@
 import { useMemo, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import styled, { css } from 'styled-components';
+import styled from 'styled-components';
 import shookshook from '@/assets/icon/shookshook.svg';
 import { useAuthContext } from '@/features/auth/components/AuthProvider';
 import NicknameChangingModal from '@/features/member/components/NicknameChangingModal';
@@ -13,14 +13,10 @@ import ROUTE_PATH from '@/shared/constants/path';
 import { useMutation } from '@/shared/hooks/useMutation';
 
 const EditProfilePage = () => {
-  const { user, logout, login } = useAuthContext();
+  const { user, logout } = useAuthContext();
   const [nicknameEntered, setNicknameEntered] = useState(user?.nickname);
-  const [errorMessage, setErrorMessage] = useState('');
+  const [errorMessage, setErrorMessage] = useState('이전과 다른 닉네임으로 변경해주세요.');
   const navigate = useNavigate();
-  // error Message
-  const hasError = errorMessage.length !== 0;
-
-  // modal hooks
   const {
     isOpen: isWithdrawalModalOpen,
     openModal: openWithdrawalModal,
@@ -32,9 +28,17 @@ const EditProfilePage = () => {
     closeModal: closeNicknameModal,
   } = useModal();
 
+  const hasError = errorMessage.length !== 0;
+
   // 회원탈퇴 API
   const { mutateData: withdrawMember } = useMutation(deleteMember(user?.memberId));
 
+  const handleWithdrawal = async () => {
+    await withdrawMember();
+    logout();
+    navigate(ROUTE_PATH.ROOT);
+  };
+
   // 닉네임변경 API
   const mutateNickname = useMemo(
     () => updateNickname(user?.memberId, nicknameEntered),
@@ -46,35 +50,22 @@ const EditProfilePage = () => {
     navigate(ROUTE_PATH.LOGIN);
     return;
   }
-
-  const handleWithdrawal = async () => {
-    await withdrawMember();
-    logout();
-    navigate(ROUTE_PATH.ROOT);
-  };
-
   const handleChangeNickname: React.ChangeEventHandler<HTMLInputElement> = (event) => {
-    const nickmaneEntered = event.currentTarget.value;
-    setNicknameEntered(nickmaneEntered);
-    if (nickmaneEntered.length < 2 || nickmaneEntered.length > 10) {
+    const currentNickname = event.currentTarget.value;
+    setNicknameEntered(currentNickname);
+    if (currentNickname.length < 2 || currentNickname.length > 10) {
       setErrorMessage('2글자 이상 10글자 이하 문자만 가능합니다.');
+    } else if (currentNickname === user.nickname) {
+      setErrorMessage('이전과 다른 닉네임으로 변경해주세요.');
     } else {
       setErrorMessage('');
     }
   };
 
   const submitNicknameChanged = async () => {
-    if (nicknameEntered === user?.nickname) {
-      setErrorMessage('이전과 다른 닉네임을 사용해주세요.');
-      closeNicknameModal();
-      return;
-    }
-
-    const accessToken = (await changeNickname())?.accessToken;
-    if (accessToken) {
-      login(accessToken);
-      navigate('/my-page');
-    }
+    await changeNickname();
+    logout();
+    navigate(ROUTE_PATH.LOGIN);
   };
 
   return (
@@ -186,8 +177,8 @@ const WithdrawalButton = styled.button`
   text-decoration: underline;
 `;
 
-const SubmitButton = styled.button<{ disabled: boolean }>`
-  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
+const SubmitButton = styled.button`
+  cursor: pointer;
 
   position: absolute;
   bottom: 0;

From 2f330792f569e68071e4f24eace77b387b49f3e3 Mon Sep 17 00:00:00 2001
From: ukkodeveloper <ukkodeveloper@gmail.com>
Date: Tue, 3 Oct 2023 23:15:10 +0900
Subject: [PATCH 11/18] =?UTF-8?q?fix:=20mutateData=20response=20=EB=B0=98?=
 =?UTF-8?q?=ED=99=98=ED=95=98=EC=A7=80=20=EC=95=8A=EB=8F=84=EB=A1=9D=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/shared/hooks/useMutation.ts | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/frontend/src/shared/hooks/useMutation.ts b/frontend/src/shared/hooks/useMutation.ts
index d35673ffe..a7289a371 100644
--- a/frontend/src/shared/hooks/useMutation.ts
+++ b/frontend/src/shared/hooks/useMutation.ts
@@ -24,9 +24,6 @@ export const useMutation = <T, P extends any[]>(mutateFn: (...params: P) => Prom
       try {
         const responseBody = await mutateFn(...params);
         setData(responseBody);
-
-        //event handler에서 바로 처리하기 위해서 response를 return한다.
-        return responseBody;
       } catch (error) {
         if (error instanceof AuthError) {
           logout();

From 7bb0169d192f45d747aa5b8886e4d4fe7c16ef37 Mon Sep 17 00:00:00 2001
From: ukkodeveloper <ukkodeveloper@gmail.com>
Date: Tue, 3 Oct 2023 23:15:39 +0900
Subject: [PATCH 12/18] =?UTF-8?q?refactor:=20=ED=94=84=EB=A1=9C=ED=95=84?=
 =?UTF-8?q?=20=EB=B3=80=EA=B2=BD=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=82=B4?=
 =?UTF-8?q?=20=EB=A1=9C=EC=A7=81=20=ED=9B=85=EC=9C=BC=EB=A1=9C=20=EB=B6=84?=
 =?UTF-8?q?=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/features/member/hooks/useNickname.ts  |  50 ++++++++
 .../features/member/hooks/useWithdrawal.ts    |  23 ++++
 frontend/src/pages/EditProfilePage.tsx        | 114 ++++++------------
 3 files changed, 111 insertions(+), 76 deletions(-)
 create mode 100644 frontend/src/features/member/hooks/useNickname.ts
 create mode 100644 frontend/src/features/member/hooks/useWithdrawal.ts

diff --git a/frontend/src/features/member/hooks/useNickname.ts b/frontend/src/features/member/hooks/useNickname.ts
new file mode 100644
index 000000000..84ac44672
--- /dev/null
+++ b/frontend/src/features/member/hooks/useNickname.ts
@@ -0,0 +1,50 @@
+import { useMemo, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useAuthContext } from '@/features/auth/components/AuthProvider';
+import { updateNickname } from '@/features/member/remotes/nickname';
+import ROUTE_PATH from '@/shared/constants/path';
+import { useMutation } from '@/shared/hooks/useMutation';
+
+const useNickname = () => {
+  const { user, logout } = useAuthContext();
+
+  const [nicknameEntered, setNicknameEntered] = useState(user?.nickname);
+  const [nicknameErrorMessage, setNicknameErrorMessage] =
+    useState('이전과 다른 닉네임으로 변경해주세요.');
+  const mutateNickname = useMemo(
+    () => updateNickname(user?.memberId, nicknameEntered),
+    [nicknameEntered, user?.memberId]
+  );
+  const { mutateData: changeNickname } = useMutation(mutateNickname);
+  const navigate = useNavigate();
+
+  const hasError = nicknameErrorMessage.length !== 0;
+  const handleChangeNickname: React.ChangeEventHandler<HTMLInputElement> = (event) => {
+    const currentNickname = event.currentTarget.value;
+    setNicknameEntered(currentNickname);
+    if (currentNickname.length < 2 || currentNickname.length > 10) {
+      setNicknameErrorMessage('2글자 이상 10글자 이하 문자만 가능합니다.');
+    } else if (currentNickname === user?.nickname) {
+      setNicknameErrorMessage('이전과 다른 닉네임으로 변경해주세요.');
+    } else {
+      setNicknameErrorMessage('');
+    }
+  };
+
+  const submitNicknameChanged = async () => {
+    await changeNickname();
+    logout();
+    navigate(ROUTE_PATH.LOGIN);
+  };
+
+  return {
+    nicknameEntered,
+    nicknameErrorMessage,
+    hasError,
+    handleChangeNickname,
+    submitNicknameChanged,
+    setNicknameErrorMessage,
+  };
+};
+
+export default useNickname;
diff --git a/frontend/src/features/member/hooks/useWithdrawal.ts b/frontend/src/features/member/hooks/useWithdrawal.ts
new file mode 100644
index 000000000..f5571da5a
--- /dev/null
+++ b/frontend/src/features/member/hooks/useWithdrawal.ts
@@ -0,0 +1,23 @@
+import { useNavigate } from 'react-router-dom';
+import { useAuthContext } from '@/features/auth/components/AuthProvider';
+import { deleteMember } from '@/features/member/remotes/member';
+import ROUTE_PATH from '@/shared/constants/path';
+import { useMutation } from '@/shared/hooks/useMutation';
+
+const useWithdrawal = () => {
+  const navigate = useNavigate();
+  const { user, logout } = useAuthContext();
+  const { mutateData: withdrawMember } = useMutation(deleteMember(user?.memberId));
+
+  const handleWithdrawal = async () => {
+    await withdrawMember();
+    logout();
+    navigate(ROUTE_PATH.ROOT);
+  };
+
+  return {
+    handleWithdrawal,
+  };
+};
+
+export default useWithdrawal;
diff --git a/frontend/src/pages/EditProfilePage.tsx b/frontend/src/pages/EditProfilePage.tsx
index b49095677..e68b0fcf1 100644
--- a/frontend/src/pages/EditProfilePage.tsx
+++ b/frontend/src/pages/EditProfilePage.tsx
@@ -1,73 +1,35 @@
-import { useMemo, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
 import shookshook from '@/assets/icon/shookshook.svg';
-import { useAuthContext } from '@/features/auth/components/AuthProvider';
 import NicknameChangingModal from '@/features/member/components/NicknameChangingModal';
 import WithdrawalModal from '@/features/member/components/WithdrawalModal';
-import { deleteMember } from '@/features/member/remotes/member';
-import { updateNickname } from '@/features/member/remotes/nickname';
+import useNickname from '@/features/member/hooks/useNickname';
+import useWithdrawal from '@/features/member/hooks/useWithdrawal';
 import useModal from '@/shared/components/Modal/hooks/useModal';
 import Spacing from '@/shared/components/Spacing';
-import ROUTE_PATH from '@/shared/constants/path';
-import { useMutation } from '@/shared/hooks/useMutation';
 
 const EditProfilePage = () => {
-  const { user, logout } = useAuthContext();
-  const [nicknameEntered, setNicknameEntered] = useState(user?.nickname);
-  const [errorMessage, setErrorMessage] = useState('이전과 다른 닉네임으로 변경해주세요.');
-  const navigate = useNavigate();
+  const {
+    nicknameEntered,
+    nicknameErrorMessage,
+    hasError,
+    handleChangeNickname,
+    submitNicknameChanged,
+  } = useNickname();
+
+  const { handleWithdrawal } = useWithdrawal();
+
   const {
     isOpen: isWithdrawalModalOpen,
     openModal: openWithdrawalModal,
     closeModal: closeWithdrawalModal,
   } = useModal();
+
   const {
     isOpen: isNicknameModalOpen,
     openModal: openNicknameModal,
     closeModal: closeNicknameModal,
   } = useModal();
 
-  const hasError = errorMessage.length !== 0;
-
-  // 회원탈퇴 API
-  const { mutateData: withdrawMember } = useMutation(deleteMember(user?.memberId));
-
-  const handleWithdrawal = async () => {
-    await withdrawMember();
-    logout();
-    navigate(ROUTE_PATH.ROOT);
-  };
-
-  // 닉네임변경 API
-  const mutateNickname = useMemo(
-    () => updateNickname(user?.memberId, nicknameEntered),
-    [nicknameEntered, user?.memberId]
-  );
-  const { mutateData: changeNickname } = useMutation(mutateNickname);
-
-  if (!user) {
-    navigate(ROUTE_PATH.LOGIN);
-    return;
-  }
-  const handleChangeNickname: React.ChangeEventHandler<HTMLInputElement> = (event) => {
-    const currentNickname = event.currentTarget.value;
-    setNicknameEntered(currentNickname);
-    if (currentNickname.length < 2 || currentNickname.length > 10) {
-      setErrorMessage('2글자 이상 10글자 이하 문자만 가능합니다.');
-    } else if (currentNickname === user.nickname) {
-      setErrorMessage('이전과 다른 닉네임으로 변경해주세요.');
-    } else {
-      setErrorMessage('');
-    }
-  };
-
-  const submitNicknameChanged = async () => {
-    await changeNickname();
-    logout();
-    navigate(ROUTE_PATH.LOGIN);
-  };
-
   return (
     <Container>
       <Title>프로필 수정</Title>
@@ -82,7 +44,7 @@ const EditProfilePage = () => {
         autoComplete="off"
       />
       <Spacing direction={'vertical'} size={8} />
-      {hasError && <BottomError>{errorMessage}</BottomError>}
+      {hasError && <BottomError>{nicknameErrorMessage}</BottomError>}
       <Spacing direction={'vertical'} size={16} />
       <WithdrawalButton onClick={openWithdrawalModal}>회원 탈퇴</WithdrawalButton>
       <SubmitButton onClick={openNicknameModal} disabled={hasError}>
@@ -148,30 +110,6 @@ const Label = styled.label`
   font-weight: 700;
 `;
 
-const Input = styled.input`
-  padding: 0 8px;
-
-  font-size: 18px;
-  line-height: 2.4;
-  color: ${({ theme }) => theme.color.black};
-
-  border: none;
-  border-radius: 6px;
-  outline: none;
-  box-shadow: 0 0 0 1px inset ${({ theme }) => theme.color.black200};
-
-  transition: box-shadow 0.3s ease;
-
-  &:focus {
-    box-shadow: 0 0 0 2px inset ${({ theme }) => theme.color.primary};
-  }
-`;
-
-const BottomError = styled.p`
-  font-size: 14px;
-  color: ${({ theme }) => theme.color.error};
-`;
-
 const WithdrawalButton = styled.button`
   color: ${({ theme }) => theme.color.disabled};
   text-decoration: underline;
@@ -201,3 +139,27 @@ const SubmitButton = styled.button`
     background-color: ${({ theme }) => theme.color.disabledBackground};
   }
 `;
+
+const Input = styled.input`
+  padding: 0 8px;
+
+  font-size: 18px;
+  line-height: 2.4;
+  color: ${({ theme }) => theme.color.black};
+
+  border: none;
+  border-radius: 6px;
+  outline: none;
+  box-shadow: 0 0 0 1px inset ${({ theme }) => theme.color.black200};
+
+  transition: box-shadow 0.3s ease;
+
+  &:focus {
+    box-shadow: 0 0 0 2px inset ${({ theme }) => theme.color.primary};
+  }
+`;
+
+const BottomError = styled.p`
+  font-size: 14px;
+  color: ${({ theme }) => theme.color.error};
+`;

From 9a88c5bd31bc1cd0d02aacd23480b295b1b17be5 Mon Sep 17 00:00:00 2001
From: ukkodeveloper <ukkodeveloper@gmail.com>
Date: Wed, 4 Oct 2023 00:27:29 +0900
Subject: [PATCH 13/18] =?UTF-8?q?fix:=20=EB=8B=89=EB=84=A4=EC=9E=84=20?=
 =?UTF-8?q?=EC=B5=9C=EB=8C=80=20=EA=B8=80=EC=9E=90=20=EC=88=98=2020?=
 =?UTF-8?q?=EC=9E=90=EB=A1=9C=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/features/member/hooks/useNickname.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/features/member/hooks/useNickname.ts b/frontend/src/features/member/hooks/useNickname.ts
index 84ac44672..83ce1ccc1 100644
--- a/frontend/src/features/member/hooks/useNickname.ts
+++ b/frontend/src/features/member/hooks/useNickname.ts
@@ -22,8 +22,8 @@ const useNickname = () => {
   const handleChangeNickname: React.ChangeEventHandler<HTMLInputElement> = (event) => {
     const currentNickname = event.currentTarget.value;
     setNicknameEntered(currentNickname);
-    if (currentNickname.length < 2 || currentNickname.length > 10) {
-      setNicknameErrorMessage('2글자 이상 10글자 이하 문자만 가능합니다.');
+    if (currentNickname.length < 2 || currentNickname.length > 20) {
+      setNicknameErrorMessage('2글자 이상 20글자 이하 문자만 가능합니다.');
     } else if (currentNickname === user?.nickname) {
       setNicknameErrorMessage('이전과 다른 닉네임으로 변경해주세요.');
     } else {

From c1772fdf43bfdabc2d2b93b5365ca8586c97ca43 Mon Sep 17 00:00:00 2001
From: ukkodeveloper <ukkodeveloper@gmail.com>
Date: Thu, 19 Oct 2023 08:47:37 +0900
Subject: [PATCH 14/18] =?UTF-8?q?feat:=20nickname=2020=EC=9E=90=20?=
 =?UTF-8?q?=EB=84=98=EC=96=B4=EA=B0=88=20=EA=B2=BD=EC=9A=B0=20=EC=9E=85?=
 =?UTF-8?q?=EB=A0=A5=EB=90=98=EC=A7=80=20=EC=95=8A=EB=8F=84=EB=A1=9D=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/features/member/hooks/useNickname.ts | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/frontend/src/features/member/hooks/useNickname.ts b/frontend/src/features/member/hooks/useNickname.ts
index 83ce1ccc1..377fff137 100644
--- a/frontend/src/features/member/hooks/useNickname.ts
+++ b/frontend/src/features/member/hooks/useNickname.ts
@@ -21,14 +21,19 @@ const useNickname = () => {
   const hasError = nicknameErrorMessage.length !== 0;
   const handleChangeNickname: React.ChangeEventHandler<HTMLInputElement> = (event) => {
     const currentNickname = event.currentTarget.value;
-    setNicknameEntered(currentNickname);
-    if (currentNickname.length < 2 || currentNickname.length > 20) {
+
+    if (currentNickname.length > 20) {
+      setNicknameErrorMessage('2글자 이상 20글자 이하 문자만 가능합니다.');
+      return;
+    } else if (currentNickname.length < 2) {
       setNicknameErrorMessage('2글자 이상 20글자 이하 문자만 가능합니다.');
     } else if (currentNickname === user?.nickname) {
       setNicknameErrorMessage('이전과 다른 닉네임으로 변경해주세요.');
     } else {
       setNicknameErrorMessage('');
     }
+
+    setNicknameEntered(currentNickname);
   };
 
   const submitNicknameChanged = async () => {

From eacc7e0f8b7653326d250e4a7256cd7c025cbc73 Mon Sep 17 00:00:00 2001
From: ukkodeveloper <ukkodeveloper@gmail.com>
Date: Thu, 19 Oct 2023 09:10:18 +0900
Subject: [PATCH 15/18] =?UTF-8?q?design:=20=EC=A0=84=EB=B0=98=EC=A0=81?=
 =?UTF-8?q?=EC=9D=B8=20=EB=94=94=EC=9E=90=EC=9D=B8=20=EC=8A=A4=ED=83=80?=
 =?UTF-8?q?=EC=9D=BC=20=ED=94=BC=EB=93=9C=EB=B0=B1=20=EB=B0=98=EC=98=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/NicknameChangingModal.tsx      | 39 +++++++++----------
 frontend/src/pages/EditProfilePage.tsx        |  9 ++---
 2 files changed, 22 insertions(+), 26 deletions(-)

diff --git a/frontend/src/features/member/components/NicknameChangingModal.tsx b/frontend/src/features/member/components/NicknameChangingModal.tsx
index 17fcfccc0..bd543ca4b 100644
--- a/frontend/src/features/member/components/NicknameChangingModal.tsx
+++ b/frontend/src/features/member/components/NicknameChangingModal.tsx
@@ -19,18 +19,20 @@ const NicknameChangingModal = ({
 
   return (
     <Modal isOpen={isOpen} closeModal={closeModal}>
-      <>
-        <ModalContent>{`닉네임 변경 시 다시 로그인을 해야합니다.\n닉네임을 ${nickname}로 바꾸겠습니까?`}</ModalContent>
-        <Spacing direction={'vertical'} size={16} />
-        <ButtonContainer>
-          <CancelButton onClick={closeModal} type="button">
-            취소
-          </CancelButton>
-          <ConfirmButton type="button" onClick={onSubmitNickname}>
-            변경
-          </ConfirmButton>
-        </ButtonContainer>
-      </>
+      <ModalContent>{`닉네임 변경 시 다시 로그인을 해야합니다.\n닉네임을 변경하시겠습니까?`}</ModalContent>
+      <Spacing direction="vertical" size={10} />
+      <NicknameContent>{`변경 후 닉네임: ${nickname}`}</NicknameContent>
+
+      <Spacing direction={'vertical'} size={16} />
+
+      <ButtonContainer>
+        <CancelButton onClick={closeModal} type="button">
+          취소
+        </CancelButton>
+        <ConfirmButton type="button" onClick={onSubmitNickname}>
+          변경
+        </ConfirmButton>
+      </ButtonContainer>
     </Modal>
   );
 };
@@ -38,22 +40,19 @@ const NicknameChangingModal = ({
 export default NicknameChangingModal;
 
 const ModalContent = styled.div`
-  align-self: start;
-
   font-size: 16px;
-  line-height: 200%;
+  line-height: 1.8;
   color: ${({ theme }) => theme.color.subText};
   white-space: pre-line;
 `;
 
-const Button = styled.button`
-  cursor: pointer;
+const NicknameContent = styled.div`
+  color: ${({ theme }) => theme.color.white};
+`;
 
+const Button = styled.button`
   height: 36px;
-
   color: ${({ theme: { color } }) => color.white};
-
-  border: none;
   border-radius: 10px;
 `;
 
diff --git a/frontend/src/pages/EditProfilePage.tsx b/frontend/src/pages/EditProfilePage.tsx
index e68b0fcf1..f6a4d1c77 100644
--- a/frontend/src/pages/EditProfilePage.tsx
+++ b/frontend/src/pages/EditProfilePage.tsx
@@ -37,7 +37,7 @@ const EditProfilePage = () => {
       <Avatar src={shookshook} />
       <Label htmlFor="nickname">닉네임</Label>
       <Spacing direction={'vertical'} size={4} />
-      <Input
+      <NicknameInput
         id="nickname"
         value={nicknameEntered}
         onChange={handleChangeNickname}
@@ -75,7 +75,7 @@ const Container = styled.div`
 
   width: 100%;
   min-width: 300px;
-  max-width: 800px;
+  max-width: 400px;
   height: calc(100vh - ${({ theme: { headerHeight } }) => headerHeight.desktop});
   margin: auto 0;
   padding-top: ${({ theme: { headerHeight } }) => headerHeight.desktop};
@@ -116,8 +116,6 @@ const WithdrawalButton = styled.button`
 `;
 
 const SubmitButton = styled.button`
-  cursor: pointer;
-
   position: absolute;
   bottom: 0;
 
@@ -128,7 +126,6 @@ const SubmitButton = styled.button`
 
   font-size: 18px;
   font-weight: 700;
-  line-height: 1.6;
 
   background-color: ${({ theme }) => theme.color.primary};
   border: none;
@@ -140,7 +137,7 @@ const SubmitButton = styled.button`
   }
 `;
 
-const Input = styled.input`
+const NicknameInput = styled.input`
   padding: 0 8px;
 
   font-size: 18px;

From b51f83f2173767364db6d84d6d60433e55579930 Mon Sep 17 00:00:00 2001
From: ukkodeveloper <ukkodeveloper@gmail.com>
Date: Thu, 19 Oct 2023 09:41:27 +0900
Subject: [PATCH 16/18] =?UTF-8?q?feat:=20nickname=20=EB=B3=80=EA=B2=BD=20a?=
 =?UTF-8?q?pi=20=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/features/member/hooks/useNickname.ts    | 17 +++++++++++------
 .../src/features/member/remotes/nickname.ts     | 11 +++++------
 2 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/frontend/src/features/member/hooks/useNickname.ts b/frontend/src/features/member/hooks/useNickname.ts
index 377fff137..1e7185612 100644
--- a/frontend/src/features/member/hooks/useNickname.ts
+++ b/frontend/src/features/member/hooks/useNickname.ts
@@ -1,4 +1,4 @@
-import { useMemo, useState } from 'react';
+import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useAuthContext } from '@/features/auth/components/AuthProvider';
 import { updateNickname } from '@/features/member/remotes/nickname';
@@ -7,15 +7,20 @@ import { useMutation } from '@/shared/hooks/useMutation';
 
 const useNickname = () => {
   const { user, logout } = useAuthContext();
+  // TODO: 피드백 반영하여 error throw. 그러나 error 핸들링 반드시 필요
+  if (!user) {
+    throw new Error('현재 user 로그인된 정보가 없습니다.');
+  }
+
+  const [nicknameEntered, setNicknameEntered] = useState(user.nickname);
 
-  const [nicknameEntered, setNicknameEntered] = useState(user?.nickname);
   const [nicknameErrorMessage, setNicknameErrorMessage] =
     useState('이전과 다른 닉네임으로 변경해주세요.');
-  const mutateNickname = useMemo(
-    () => updateNickname(user?.memberId, nicknameEntered),
-    [nicknameEntered, user?.memberId]
+
+  const { mutateData: changeNickname } = useMutation(() =>
+    updateNickname(user.memberId, nicknameEntered)
   );
-  const { mutateData: changeNickname } = useMutation(mutateNickname);
+
   const navigate = useNavigate();
 
   const hasError = nicknameErrorMessage.length !== 0;
diff --git a/frontend/src/features/member/remotes/nickname.ts b/frontend/src/features/member/remotes/nickname.ts
index 5a3b2cd51..a900c289c 100644
--- a/frontend/src/features/member/remotes/nickname.ts
+++ b/frontend/src/features/member/remotes/nickname.ts
@@ -1,8 +1,7 @@
 import fetcher from '@/shared/remotes';
 
-export const updateNickname =
-  (memberId: number | undefined, nickname: string | undefined) => () => {
-    return fetcher(`/members/${memberId}/nickname`, 'PATCH', {
-      nickname,
-    });
-  };
+export const updateNickname = (memberId: number, nickname: string) => {
+  return fetcher(`/members/${memberId}/nickname`, 'PATCH', {
+    nickname,
+  });
+};

From ba945b913d692af037232343280c8e70309672a5 Mon Sep 17 00:00:00 2001
From: ukkodeveloper <ukkodeveloper@gmail.com>
Date: Thu, 19 Oct 2023 09:50:45 +0900
Subject: [PATCH 17/18] =?UTF-8?q?feat:=20nickname=20=EC=82=AD=EC=A0=9C=20a?=
 =?UTF-8?q?pi?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/features/member/hooks/useWithdrawal.ts | 7 ++++++-
 frontend/src/features/member/remotes/member.ts      | 2 +-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/frontend/src/features/member/hooks/useWithdrawal.ts b/frontend/src/features/member/hooks/useWithdrawal.ts
index f5571da5a..6b6a89770 100644
--- a/frontend/src/features/member/hooks/useWithdrawal.ts
+++ b/frontend/src/features/member/hooks/useWithdrawal.ts
@@ -7,7 +7,12 @@ import { useMutation } from '@/shared/hooks/useMutation';
 const useWithdrawal = () => {
   const navigate = useNavigate();
   const { user, logout } = useAuthContext();
-  const { mutateData: withdrawMember } = useMutation(deleteMember(user?.memberId));
+  // TODO: 피드백 반영하여 error throw. 그러나 error 핸들링 반드시 필요
+  if (!user) {
+    throw new Error('현재 user 로그인된 정보가 없습니다.');
+  }
+
+  const { mutateData: withdrawMember } = useMutation(() => deleteMember(user.memberId));
 
   const handleWithdrawal = async () => {
     await withdrawMember();
diff --git a/frontend/src/features/member/remotes/member.ts b/frontend/src/features/member/remotes/member.ts
index b9df67e00..a3e4cec0f 100644
--- a/frontend/src/features/member/remotes/member.ts
+++ b/frontend/src/features/member/remotes/member.ts
@@ -1,5 +1,5 @@
 import fetcher from '@/shared/remotes';
 
-export const deleteMember = (memberId: number | undefined) => () => {
+export const deleteMember = (memberId: number) => {
   return fetcher(`/members/${memberId}`, 'DELETE');
 };

From d7384ffa7dcf90327916513cc21094ecf886cb2e Mon Sep 17 00:00:00 2001
From: ukkodeveloper <ukkodeveloper@gmail.com>
Date: Fri, 20 Oct 2023 00:24:51 +0900
Subject: [PATCH 18/18] =?UTF-8?q?refactor:=20=EB=8B=89=EB=84=A4=EC=9E=84?=
 =?UTF-8?q?=20min=20length,=20max=20length=20=EC=83=81=EC=88=98=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/features/member/constants/nickname.ts | 2 ++
 frontend/src/features/member/hooks/useNickname.ts  | 5 +++--
 2 files changed, 5 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/features/member/constants/nickname.ts

diff --git a/frontend/src/features/member/constants/nickname.ts b/frontend/src/features/member/constants/nickname.ts
new file mode 100644
index 000000000..4cd4a5d46
--- /dev/null
+++ b/frontend/src/features/member/constants/nickname.ts
@@ -0,0 +1,2 @@
+export const MIN_LENGTH_NICKNAME = 2;
+export const MAX_LENGTH_NICKNAME = 20;
diff --git a/frontend/src/features/member/hooks/useNickname.ts b/frontend/src/features/member/hooks/useNickname.ts
index 1e7185612..cd0d1ef6d 100644
--- a/frontend/src/features/member/hooks/useNickname.ts
+++ b/frontend/src/features/member/hooks/useNickname.ts
@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useAuthContext } from '@/features/auth/components/AuthProvider';
+import { MAX_LENGTH_NICKNAME, MIN_LENGTH_NICKNAME } from '@/features/member/constants/nickname';
 import { updateNickname } from '@/features/member/remotes/nickname';
 import ROUTE_PATH from '@/shared/constants/path';
 import { useMutation } from '@/shared/hooks/useMutation';
@@ -27,10 +28,10 @@ const useNickname = () => {
   const handleChangeNickname: React.ChangeEventHandler<HTMLInputElement> = (event) => {
     const currentNickname = event.currentTarget.value;
 
-    if (currentNickname.length > 20) {
+    if (currentNickname.length > MAX_LENGTH_NICKNAME) {
       setNicknameErrorMessage('2글자 이상 20글자 이하 문자만 가능합니다.');
       return;
-    } else if (currentNickname.length < 2) {
+    } else if (currentNickname.length < MIN_LENGTH_NICKNAME) {
       setNicknameErrorMessage('2글자 이상 20글자 이하 문자만 가능합니다.');
     } else if (currentNickname === user?.nickname) {
       setNicknameErrorMessage('이전과 다른 닉네임으로 변경해주세요.');