refactor: 프로필 변경 페이지 내 로직 훅으로 분리

woowacourse-teams · Oct 4, 2023 · 7bb0169 · 7bb0169
1 parent 2f33079
commit 7bb0169
Show file tree

Hide file tree

Showing 3 changed files with 111 additions and 76 deletions.
diff --git a/frontend/src/features/member/hooks/useNickname.ts 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
@@ -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
@@ -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};
+`;