Merge pull request #308 from prgrms-web-devcourse-final-project/refactor/sign-up-2

kangsuyeong · web-flow · commit 0d79f1005780 · 2025-07-11T14:54:27.000+09:00
[REFACTOR] 회원가입 페이지 리펙토링
diff --git a/src/pages/editprofile/components/CurrentPasswordInput.tsx b/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="현재 비밀번호을 입력해 주세요"
diff --git a/src/pages/editprofile/components/PasswordEditForm.tsx b/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="저장하기"
       />
diff --git a/src/pages/editprofile/components/ProfileEditForm.tsx b/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"
diff --git a/src/pages/signup/components/AuthCodeInput.tsx b/src/pages/signup/components/AuthCodeInput.tsx
@@ -7,11 +7,11 @@ import { useMutation } from '@tanstack/react-query';
 import { useState } from 'react';
 
 interface AuthCodeInputProps {
+  tempEmail: string;
   email: string;
-  emailValidity: boolean;
-  setValidity: (val: boolean) => void; // 인증코드 유효성 바꾸는 함수
+  onChange: (val: string) => void;
 }
-function AuthCodeInput({ email, emailValidity, setValidity }: AuthCodeInputProps) {
+function AuthCodeInput({ email, tempEmail, onChange }: AuthCodeInputProps) {
   const { openModal, closeModal } = useModalStore(); // 모달
   const [resendCount, setResendCount] = useState(0); // 재전송 횟수
   const [text, setText] = useState('');
@@ -25,9 +25,7 @@ function AuthCodeInput({ email, emailValidity, setValidity }: AuthCodeInputProps
     setText(value);
 
     // 유효성 검사
-    const isValid = AUTHCODE_REGEX.test(value);
-
-    if (isValid) {
+    if (AUTHCODE_REGEX.test(value)) {
       setValidationStatus({ isValid: true, message: '' });
     } else {
       setValidationStatus({ isValid: false, message: '올바른 인증번호를 입력해주세요' });
@@ -36,7 +34,7 @@ function AuthCodeInput({ email, emailValidity, setValidity }: AuthCodeInputProps
 
   // 이메일 재전송
   const { mutate: resendEmailVerification } = useMutation({
-    mutationFn: () => postEmailVerificationRequest(email),
+    mutationFn: () => postEmailVerificationRequest(tempEmail),
     onSuccess: ({ code }) => {
       if (code === 200) {
         setResendCount((count) => count + 1);
@@ -54,11 +52,11 @@ function AuthCodeInput({ email, emailValidity, setValidity }: AuthCodeInputProps
   });
   // 인증번호 확인
   const { mutate: verifyEmail, isPending } = useMutation({
-    mutationFn: () => postEmailVerificationCheck(email, text),
+    mutationFn: () => postEmailVerificationCheck(tempEmail, text),
     onSuccess: ({ code }) => {
       if (code === 200) {
         setValidationStatus({ isValid: true, message: '이메일 인증이 완료되었습니다' });
-        setValidity(true); // 완료 처리
+        onChange(tempEmail); // 완료 처리
       } else {
         setValidationStatus({ isValid: false, message: '인증 코드가 올바르지 않습니다' });
       }
@@ -107,13 +105,13 @@ function AuthCodeInput({ email, emailValidity, setValidity }: AuthCodeInputProps
       onTimeout={onTimeout} // 시간이 만료되었을 때 실행할 함수
       onResendEmail={handleResendEmail} // 재전송 요청
       resendCount={resendCount} // 재전송 횟수
-      isEmailVerified={emailValidity}
+      isEmailVerified={!!email}
       actionButton={
         <LoadingSpinnerButton
           isLoading={isPending}
           className="w-[65px] flex-shrink-0"
-          text={emailValidity ? '인증완료' : '인증확인'}
-          disabled={!validationStatus.isValid || emailValidity}
+          text={!!email ? '인증완료' : '인증확인'}
+          disabled={!validationStatus.isValid || !!email}
           onClick={() => verifyEmail()}
         />
       }
@@ -122,11 +120,3 @@ function AuthCodeInput({ email, emailValidity, setValidity }: AuthCodeInputProps
 }
 
 export default AuthCodeInput;
-
-// setValidationMessage({
-//   success: false,
-//   message:
-//     error.message === '최대 재전송 횟수를 초과'
-//       ? '최대 재전송 횟수를 초과했습니다.'
-//       : '이메일 재전송 중 오류가 발생했습니다. 다시 시도해주세요.',
-// });
diff --git a/src/pages/signup/components/EmailGroupSection.tsx b/src/pages/signup/components/EmailGroupSection.tsx
@@ -2,17 +2,19 @@ import { AuthCodeInput, EmailInput } from '@/pages/signup/components';
 import { useState } from 'react';
 
 interface EmailGroupSectionProps {
-  setValidity: (val: boolean) => void;
-  emailValidity: boolean;
+  onChange: (val: string) => void;
+  email: string;
 }
 
-const EmailGroupSection = ({ setValidity, emailValidity }: EmailGroupSectionProps) => {
-  const [email, setEmail] = useState('');
+const EmailGroupSection = ({ onChange, email }: EmailGroupSectionProps) => {
+  // 인증번호 요청 전 입력된 임시 이메일 값
+  const [tempEmail, setTempEmail] = useState('');
+
   return (
     <>
-      <EmailInput setValidity={setValidity} emailValidity={emailValidity} setEmail={setEmail} />
-      {email !== '' && (
-        <AuthCodeInput email={email} emailValidity={emailValidity} setValidity={setValidity} />
+      <EmailInput onChange={setTempEmail} email={email} />
+      {tempEmail !== '' && (
+        <AuthCodeInput tempEmail={tempEmail} onChange={onChange} email={email} />
       )}
     </>
   );
diff --git a/src/pages/signup/components/EmailInput.tsx b/src/pages/signup/components/EmailInput.tsx
@@ -7,12 +7,11 @@ import { useMutation } from '@tanstack/react-query';
 import { useState } from 'react';
 
 interface EmailInputProps {
-  setValidity: (val: boolean) => void;
-  emailValidity: boolean; // 이메일 유효성
-  setEmail: React.Dispatch<React.SetStateAction<string>>;
+  onChange: (val: string) => void;
+  email: string;
 }
 
-function EmailInput({ setValidity, emailValidity, setEmail }: EmailInputProps) {
+function EmailInput({ onChange, email }: EmailInputProps) {
   const { openModal, closeModal } = useModalStore(); // 모달
   const [text, setText] = useState('');
   const [hasRequested, setHasRequested] = useState(false); // 이미 인증 요청을 했는지
@@ -24,12 +23,9 @@ function EmailInput({ setValidity, emailValidity, setEmail }: EmailInputProps) {
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const value = e.target.value;
     setText(value);
-    setValidity(false); // form validity 초기화
 
     // 유효성 검사
-    const isValid = EMAIL_REGEX.test(value);
-
-    if (isValid) {
+    if (EMAIL_REGEX.test(value)) {
       setValidationStatus({ isValid: true, message: '' });
     } else {
       setValidationStatus({
@@ -75,7 +71,7 @@ function EmailInput({ setValidity, emailValidity, setEmail }: EmailInputProps) {
               '이메일 인증 메일이 발송되었습니다. 메일함에서 인증번호를 확인 후 입력해주세요',
           });
           setHasRequested(true);
-          setEmail(text);
+          onChange(text);
         }
       },
       onError: () => {
@@ -99,13 +95,13 @@ function EmailInput({ setValidity, emailValidity, setEmail }: EmailInputProps) {
       onChange={handleChange}
       isValid={validationStatus.isValid}
       message={validationStatus.message}
-      disabled={emailValidity}
+      disabled={!!email}
       actionButton={
         <LoadingSpinnerButton
           isLoading={isCheckingEmail || isRequestingEmailVerification}
           className="w-[65px]"
-          text={emailValidity ? '인증완료' : '인증요청'}
-          disabled={!validationStatus.isValid || emailValidity || hasRequested}
+          text={!!email ? '인증완료' : '인증요청'}
+          disabled={!validationStatus.isValid || !!email || hasRequested}
           onClick={() => checkEmailAvailability()}
         />
       }
diff --git a/src/pages/signup/components/IdInput.tsx b/src/pages/signup/components/IdInput.tsx
@@ -9,10 +9,10 @@ import { throttle } from 'lodash';
 import { useMemo, useState } from 'react';
 
 interface IdInputProps {
-  setValidity: (val: boolean) => void;
+  onChange: (val: string) => void;
 }
 
-const IdInput = ({ setValidity }: IdInputProps) => {
+const IdInput = ({ onChange }: IdInputProps) => {
   const { openModal, closeModal } = useModalStore(); // 모달
   const [text, setText] = useState('');
   const [validationStatus, setValidationStatus] = useState({
@@ -23,7 +23,7 @@ const IdInput = ({ setValidity }: IdInputProps) => {
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const value = e.target.value;
     setText(value);
-    setValidity(false); // form validity 초기화
+    onChange(''); // 데이터 초기화
 
     if (ID_REGEX.test(value)) {
       setValidationStatus({ isValid: true, message: '' });
@@ -41,7 +41,7 @@ const IdInput = ({ setValidity }: IdInputProps) => {
     onSuccess: (data) => {
       if (data.code === 200) {
         setValidationStatus({ isValid: true, message: '사용 가능한 아이디입니다' });
-        setValidity(true);
+        onChange(text);
       } else if (data.code === 409) {
         setValidationStatus({ isValid: false, message: '이미 사용 중인 아이디입니다' });
       }
@@ -62,7 +62,6 @@ const IdInput = ({ setValidity }: IdInputProps) => {
   return (
     <InputField
       id="id"
-      name="id"
       label="아이디"
       placeholder="아이디를 입력해 주세요"
       onChange={handleChange}
diff --git a/src/pages/signup/components/NicknameInput.tsx b/src/pages/signup/components/NicknameInput.tsx
@@ -8,10 +8,10 @@ import { useEffect, useMemo, useState } from 'react';
 
 interface NicknameInputProps {
   initialText?: string; // 초기값
-  setValidity: (val: boolean) => void;
+  onChange: (val: string) => void;
 }
 
-function NicknameInput({ initialText = '', setValidity }: NicknameInputProps) {
+function NicknameInput({ initialText = '', onChange }: NicknameInputProps) {
   const [text, setText] = useState('');
   const [validationStatus, setValidationStatus] = useState({
     isValid: false, // 유효성 통과여부
@@ -21,7 +21,7 @@ function NicknameInput({ initialText = '', setValidity }: NicknameInputProps) {
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const value = e.target.value;
     setText(value);
-    setValidity(false); // form validity 초기화
+    onChange(''); // form validity 초기화
 
     // 유효성 검사
 
@@ -47,7 +47,7 @@ function NicknameInput({ initialText = '', setValidity }: NicknameInputProps) {
     onSuccess: (data) => {
       if (data.code === 200) {
         setValidationStatus({ isValid: true, message: '사용 가능한 닉네임입니다' });
-        setValidity(true);
+        onChange(text);
       } else if (data.code === 409) {
         setValidationStatus({ isValid: false, message: '이미 사용 중인 닉네임입니다' });
       }
@@ -73,7 +73,6 @@ function NicknameInput({ initialText = '', setValidity }: NicknameInputProps) {
       label="닉네임"
       placeholder="닉네임을 입력해 주세요"
       value={text}
-      name="nickname"
       onChange={handleChange}
       message={validationStatus.message}
       isValid={validationStatus.isValid}
diff --git a/src/pages/signup/components/PasswordConfirmInput.tsx b/src/pages/signup/components/PasswordConfirmInput.tsx
diff --git a/src/pages/signup/components/PasswordGroupSection.tsx b/src/pages/signup/components/PasswordGroupSection.tsx
diff --git a/src/pages/signup/components/PasswordInput.tsx b/src/pages/signup/components/PasswordInput.tsx
diff --git a/src/pages/signup/components/SignUpForm.tsx b/src/pages/signup/components/SignUpForm.tsx
