refactor: edit페이지 리펙토링

Author: kangsuyeong

src/pages/editprofile/components/CurrentPasswordInput.tsx

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

src/pages/editprofile/components/PasswordEditForm.tsx

@@ -11,21 +11,9 @@ function PasswordEditForm() {
   const navigate = useNavigate();
   const { openModal, closeModal } = useModalStore(); // 모달 관리
 
-  const [validity, setValidity] = useState({
-    currentPassword: false,
-    password: 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 [currentPassword, setCurrentPassword] = useState('');
+  const [password, setPassword] = useState('');
+  const isButtonEnabled = currentPassword !== '' && password !== '';
   // 현재 비밀번호 확인 useMutation
   const {
     mutateAsync: checkCurrentPassword,
@@ -60,9 +48,6 @@ function PasswordEditForm() {
 
   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);
@@ -103,9 +88,9 @@ function PasswordEditForm() {
   return (
     <form className="flex flex-col justify-between h-full p-5" onSubmit={handleSubmit}>
       <div className="flex flex-col">
-        <CurrentPasswordInput setValidity={(value) => updateValidity('currentPassword', value)} />
+        <CurrentPasswordInput onChange={setCurrentPassword} />
         <PasswordGroupSection
-          setValidity={(value) => updateValidity('password', value)}
+          onChange={setPassword}
           passwordLabel="새 비밀번호"
           confirmLabel="새 비밀번호 확인"
           passwordPlaceholder="새 비밀번호를 입력해 주세요"
@@ -116,7 +101,7 @@ function PasswordEditForm() {
         isLoading={isCheckingPassword || isChangingPassword}
         isSuccess={isSuccess}
         isError={isCheckPasswordError || isChangePasswordError}
-        disabled={!buttonEnabled}
+        disabled={!isButtonEnabled}
         type="submit"
         text="저장하기"
       />

src/pages/editprofile/components/ProfileEditForm.tsx

@@ -36,7 +36,7 @@ function ProfileEditForm() {
 
   const [isMusicSelect, setIsMusicSelect] = useState(false);
   const [nickname, setNickname] = useState(''); // 닉네임
-  const [isNicknameValid, setIsNicknameValid] = useState(false); // 닉네임 유효성
+  const [isNicknameValid] = useState(false); // 닉네임 유효성
 
   const prevProfileMusic = useRef<ProfileMusic | null>(null);
   const prevNickname = useRef<string>('');
@@ -51,8 +51,6 @@ function ProfileEditForm() {
     staleTime: 5 * 60 * 1000,
   });
 
-  // // console.log(userData);
-
   const { mutate, isPending, isSuccess, isError } = useMutation({
     mutationFn: patchEditProfile,
     onSuccess: (data) => {
@@ -182,7 +180,7 @@ function ProfileEditForm() {
             rightElement="button" // 오른쪽 요소 타입
           />
         </div>
-        <NicknameInput initialText={nickname} setValidity={(val) => setIsNicknameValid(val)} />
+        <NicknameInput initialText={nickname} onChange={setNickname} />
       </div>
       <Button
         type="submit"