Merge pull request #304 from prgrms-web-devcourse-final-project/refactor/password-edit

[refactor] 비밀번호 변경 리펙토링

Author: kangsuyeong

src/apis/user.ts

@@ -28,9 +28,9 @@ export const getIdAvailability = async (loginId: string) => {
 };
 
 //현재 비밀번호 확인
-export const checkPassword = async (currentPassword: string) => {
+export const checkPassword = async (password: string) => {
   const { data } = await axiosInstance.post(`/user/checkPassword`, {
-    password: currentPassword,
+    password,
   });
   return data;
 };

src/components/button/StatusButton.tsx

@@ -0,0 +1,46 @@
+import { Button } from '@/components/button';
+import { SpinLoading, ErrorShake, Complete } from '@/components/loading';
+import useDelayedLoading from '@/hooks/button/useDelayedLoading';
+import { cn } from '@/utils';
+
+interface StatusButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  isLoading: boolean;
+  isSuccess: boolean;
+  isError: boolean;
+  text: string;
+  disabled?: boolean;
+}
+
+const StatusButton = ({
+  isLoading,
+  isSuccess,
+  isError,
+  text,
+  disabled,
+  className,
+  ...props
+}: StatusButtonProps) => {
+  const showLoading = useDelayedLoading({ isLoading });
+
+  const variant = disabled ? 'disabled' : 'primary';
+
+  const renderContent = () => {
+    if (showLoading) return <SpinLoading />;
+    if (isSuccess) return <Complete />;
+    if (isError) return <ErrorShake />;
+    return <span>{text}</span>;
+  };
+
+  return (
+    <Button
+      variant={variant}
+      disabled={isLoading || disabled}
+      className={cn(className, isError && 'bg-functional-danger')}
+      {...props}
+    >
+      {renderContent()}
+    </Button>
+  );
+};
+
+export default StatusButton;

src/components/button/index.ts

@@ -1,3 +1,3 @@
-import Button from '@/components/button/Button';
-import LoadingSpinnerButton from '@/components/button/LoadingSpinnerButton';
-export { Button, LoadingSpinnerButton };
+export { default as Button } from './Button';
+export { default as LoadingSpinnerButton } from './LoadingSpinnerButton';
+export { default as StatusButton } from './StatusButton';

src/components/loading/index.ts

@@ -0,0 +1,5 @@
+export { default as Complete } from './Complete';
+export { default as ErrorShake } from './ErrorShake';
+export { default as Loading } from './Loading';
+export { default as LoadingMini } from './LoadingMini';
+export { default as SpinLoading } from './SpinLoading';

src/pages/editprofile/EditProfile.tsx

@@ -1,39 +1,19 @@
 import { useState } from 'react';
-import ProfileEditForm from '@/pages/editprofile/components/ProfileEditForm';
-import PasswordEditForm from '@/pages/editprofile/components/PasswordEditForm';
-import { twMerge } from 'tailwind-merge';
 import { AnimatePresence, motion } from 'framer-motion';
+import { TabMenu, ProfileEditForm, PasswordEditForm } from '@/pages/editprofile/components';
 
 function EditProfile() {
-  const [activeTab, setActiveTab] = useState('profile');
+  const [activeTab, setActiveTab] = useState<'profile' | 'password'>('profile');
 
   return (
-    <div className="flex flex-col w-full pt-5 pb-10">
+    <div className="flex flex-col w-full h-full pt-5 pb-10">
       {/* 탭 메뉴 */}
-      <div className="relative flex">
-        <button
-          className={`p-3 flex-1 ${activeTab === 'profile' ? 'font-bold' : ''}`}
-          onClick={() => setActiveTab('profile')}
-        >
-          프로필 수정
-        </button>
-        <button
-          className={`p-3 flex-1 ${activeTab === 'password' ? 'font-bold' : ''}`}
-          onClick={() => setActiveTab('password')}
-        >
-          비밀번호 변경
-        </button>
-        <div
-          className={twMerge(
-            'absolute bottom-0 h-[2px] w-1/2 bg-primary-active transition-all duration-300',
-            activeTab === 'profile' ? 'left-0' : 'left-1/2',
-          )}
-        />
-      </div>
+      <TabMenu activeTab={activeTab} onChange={setActiveTab} />
 
       {/* 폼 */}
       <AnimatePresence mode="wait">
         <motion.div
+          className="h-full w-full"
           key={activeTab} // 핵심! key를 다르게 주면 된다
           initial={{ opacity: 0 }}
           animate={{ opacity: 1 }}

src/pages/editprofile/components/CurrentPasswordInput.tsx

@@ -1,26 +1,21 @@
-import InputField from '@/components/input/InputField';
-import { useState } from 'react';
+import { InputField } from '@/components/input';
 
 interface CurrentPasswordInputPros {
-  setCurrentPassword: (val: string) => void;
+  setValidity: (val: boolean) => void;
 }
 
-function CurrentPasswordInput({ setCurrentPassword }: CurrentPasswordInputPros) {
-  const [text, setText] = useState('');
-
-  const handleonBlur = () => {
-    setCurrentPassword(text);
+function CurrentPasswordInput({ setValidity }: CurrentPasswordInputPros) {
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setValidity(e.target.value.length > 0);
   };
-
   return (
     <InputField
       type="password"
       id="current-password"
+      name="current-password"
+      onChange={handleChange}
       label="현재 비밀번호"
-      placeholder="현재 비밀번호"
-      value={text}
-      onChange={(e) => setText(e.target.value)}
-      onBlur={handleonBlur}
+      placeholder="현재 비밀번호을 입력해 주세요"
     />
   );
 }

src/pages/editprofile/components/PasswordEditForm.tsx

@@ -1,90 +1,94 @@
 import { checkPassword, patchEditProfile } from '@/apis/user';
-import Button from '@/components/button/Button';
-import Complete from '@/components/loading/Complete';
-import ErrorShake from '@/components/loading/ErrorShake';
-import SpinLoading from '@/components/loading/SpinLoading';
-import CurrentPasswordInput from '@/pages/editprofile/components/CurrentPasswordInput';
-import PasswordConfirmInput from '@/pages/signup/components/PasswordConfirmInput';
-import PasswordInput from '@/pages/signup/components/PasswordInput';
+import { StatusButton } from '@/components/button';
+import { CurrentPasswordInput } from '@/pages/editprofile/components';
+import { PasswordGroupSection } from '@/pages/signup/components';
 import { useModalStore } from '@/store/modalStore';
+import { useMutation } from '@tanstack/react-query';
 import { useState } from 'react';
 import { useNavigate } from 'react-router';
-import { twMerge } from 'tailwind-merge';
-
-type ProfileFormType = {
-  password: string;
-  nickName: string;
-  spotifyId: string;
-  title: string;
-  artist: string;
-  albumImage: string;
-};
 
 function PasswordEditForm() {
   const navigate = useNavigate();
   const { openModal, closeModal } = useModalStore(); // 모달 관리
 
-  const [isLoading, setIsLoading] = useState(false);
-  const [isComplete, setIsComplete] = useState(false);
-  const [isError, setIsError] = useState(false);
-  const [currentPassword, setCurrentPassword] = useState<string>('');
-  const [newPassword, setNewPassword] = useState('');
   const [validity, setValidity] = useState({
+    currentPassword: false,
     password: false,
-    passwordConfirm: false,
   });
 
-  const validateCurrentPassword = async () => {
-    //현재 비밀번호 확인 api
-    try {
-      const data = await checkPassword(currentPassword);
-      if (data.code === 200) {
-        return true;
-      } else if (data.code === 400) {
-        return false;
-      }
-    } catch {
-      console.error('비밀번호 확인도중 에러가 발생했습니다.');
-      return false;
-    }
+  const buttonEnabled = Object.values(validity).every(Boolean);
+
+  // validity 업데이트 함수
+  const updateValidity = (key: 'currentPassword' | 'password', value: boolean) => {
+    setValidity((prev) => {
+      if (prev[key] === value) return prev; // 값이 동일하면 변경 X
+      return { ...prev, [key]: value };
+    });
   };
 
-  const handlePasswordSubmit = async () => {
-    try {
-      setIsLoading(true);
+  // 현재 비밀번호 확인 useMutation
+  const {
+    mutateAsync: checkCurrentPassword,
+    isPending: isCheckingPassword,
+    isError: isCheckPasswordError,
+    reset,
+  } = useMutation({
+    mutationFn: async (password: string) => {
+      const res = await checkPassword(password);
+      if (res.code !== 200) {
+        throw new Error('비밀번호 틀림');
+      }
+      return res;
+    },
+  });
 
-      // 현재 비밀번호 확인
-      const isCurrentPasswordValid = await validateCurrentPassword();
-      if (!isCurrentPasswordValid) {
-        openModal({
-          title: '현재 비밀번호를 다시 확인해주세요',
-          onConfirm: () => {
-            closeModal();
-          },
-        });
-        return;
+  // 비밀번호 변경 useMutation
+  const {
+    mutateAsync: changePassword,
+    isPending: isChangingPassword,
+    isError: isChangePasswordError,
+    isSuccess,
+  } = useMutation({
+    mutationFn: async (password: string) => {
+      const res = await patchEditProfile({ password });
+      if (res.code !== 200) {
+        throw new Error('비밀번호 변경 실패');
       }
+      return res;
+    },
+  });
 
-      const updatedData: Partial<ProfileFormType> = {
-        password: newPassword,
-      };
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    const formData = new FormData(e.currentTarget);
+    const currentPassword = formData.get('current-password') as string;
+    const password = formData.get('password') as string;
+    // 현재 비밀번호 확인
+    try {
+      await checkCurrentPassword(currentPassword);
+    } catch {
+      openModal({
+        title: '현재 비밀번호를 다시 확인해주세요',
+        onConfirm: () => {
+          reset();
+          closeModal();
+        },
+      });
+      return;
+    }
 
-      // API 호출
-      const data = await patchEditProfile(updatedData);
+    // 비밀 번호 변경
+    try {
+      await changePassword(password);
 
-      if (data.code === 200) {
-        setIsComplete(true);
-        openModal({
-          title: '비밀번호 변경이 완료되었습니다',
-          onConfirm: () => {
-            navigate('/mypage');
-            closeModal();
-          },
-        });
-      }
-    } catch (error) {
-      setIsError(true);
-      console.error('비밀번호 변경 오류:', error);
+      openModal({
+        title: '비밀번호 변경이 완료되었습니다',
+        onConfirm: () => {
+          navigate('/mypage');
+          closeModal();
+        },
+      });
+    } catch {
       openModal({
         title: '비밀번호 변경 실패',
         message: '잠시 후 다시 시도해주세요.',
@@ -93,46 +97,29 @@ function PasswordEditForm() {
           navigate(-1);
         },
       });
-    } finally {
-      setIsLoading(false);
     }
   };
 
-  const isPasswordEditable = currentPassword && validity.password && validity.password;
-  const renderButtonContent = () => {
-    if (isLoading) {
-      return <SpinLoading />;
-    } else if (isComplete) {
-      return <Complete />;
-    } else if (isError) {
-      return <ErrorShake />;
-    } else return <span>저장하기</span>;
-  };
-
   return (
-    <form className="flex flex-col justify-between h-full p-5" onSubmit={(e) => e.preventDefault()}>
-      <div className="flex flex-col gap-5">
-        <CurrentPasswordInput setCurrentPassword={setCurrentPassword} />
-        <PasswordInput
-          label="새 비밀번호"
-          placeholder="새 비밀번호를 입력해 주세요"
-          changeFormPassword={(password) => setNewPassword(password)}
-          setValidity={(password) => setValidity((prev) => ({ ...prev, password }))}
-        />
-        <PasswordConfirmInput
-          label="새 비밀번호 확인"
-          placeholder="새 비밀번호를 다시 입력해 주세요"
-          setValidity={(passwordConfirm) => setValidity((prev) => ({ ...prev, passwordConfirm }))}
-          password={newPassword}
+    <form className="flex flex-col justify-between h-full p-5" onSubmit={handleSubmit}>
+      <div className="flex flex-col">
+        <CurrentPasswordInput setValidity={(value) => updateValidity('currentPassword', value)} />
+        <PasswordGroupSection
+          setValidity={(value) => updateValidity('password', value)}
+          passwordLabel="새 비밀번호"
+          confirmLabel="새 비밀번호 확인"
+          passwordPlaceholder="새 비밀번호를 입력해 주세요"
+          confirmPlaceholder="새 비밀번호를 다시 입력해 주세요"
         />
       </div>
-      <Button
-        onClick={handlePasswordSubmit}
-        variant={isPasswordEditable ? 'primary' : 'disabled'}
-        className={twMerge('py-3 body-m mt-5', isError ? 'bg-functional-danger' : '')}
-      >
-        {renderButtonContent()}
-      </Button>
+      <StatusButton
+        isLoading={isCheckingPassword || isChangingPassword}
+        isSuccess={isSuccess}
+        isError={isCheckPasswordError || isChangePasswordError}
+        disabled={!buttonEnabled}
+        type="submit"
+        text="저장하기"
+      />
     </form>
   );
 }

src/pages/editprofile/components/ProfileEditForm.tsx

@@ -182,13 +182,10 @@ function ProfileEditForm() {
             rightElement="button" // 오른쪽 요소 타입
           />
         </div>
-        <NicknameInput
-          initialText={nickname}
-          changeFormNickname={(nickname) => setNickname(nickname)}
-          setValidity={(val) => setIsNicknameValid(val)}
-        />
+        <NicknameInput initialText={nickname} setValidity={(val) => setIsNicknameValid(val)} />
       </div>
       <Button
+        type="submit"
         variant={isProfileEditable ? 'primary' : 'disabled'}
         className={twMerge('py-3 body-m mt-5', isError ? 'bg-functional-danger' : '')}
       >