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

[refactor] 회원가입 리펙토링

Author: kangsuyeong

src/apis/signup.ts

@@ -0,0 +1,21 @@
+import { axiosInstance } from '@/apis/axios';
+
+interface SignUpPayload {
+  nickName: string;
+  loginId: string;
+  password: string;
+  email: string;
+}
+
+// 회원가입
+export const postSignUp = async ({ nickName, loginId, password, email }: SignUpPayload) => {
+  const { data } = await axiosInstance.post('/user/signup', {
+    nickName,
+    socialId: null,
+    socialType: 'NONE',
+    loginId,
+    password,
+    email,
+  });
+  return data;
+};

src/apis/user.ts

@@ -35,24 +35,6 @@ export const checkPassword = async (currentPassword: string) => {
   return data;
 };
 
-// 회원가입
-export const postSignUp = async (
-  nickName: string,
-  loginId: string,
-  password: string,
-  email: string,
-) => {
-  const { data } = await axiosInstance.post('/user/signup', {
-    nickName,
-    socialId: null,
-    socialType: 'NONE',
-    loginId,
-    password,
-    email,
-  });
-  return data;
-};
-
 // 마이페이지 정보 불러오기
 export const getMyProfile = async () => {
   const { data } = await axiosInstance.get('/user/mypage');

src/components/Main.tsx

@@ -1,4 +1,5 @@
-import Input from '@/components/input/Input';
+import { Input } from '@/components/input/';
+import { forwardRef } from 'react';
 import { twMerge } from 'tailwind-merge';
 
 interface InputFieldProps extends React.InputHTMLAttributes<HTMLInputElement> {
@@ -9,37 +10,35 @@ interface InputFieldProps extends React.InputHTMLAttributes<HTMLInputElement> {
   actionButton?: React.ReactNode;
 }
 
-export default function InputField({
-  id,
-  label,
-  isValid,
-  message,
-  actionButton,
-  ...props
-}: InputFieldProps) {
-  return (
-    <div className="flex flex-col w-full gap-0.5">
-      {/* 라벨 */}
-      <label htmlFor={id} className="body-r text-gray-80 pl-[5px]">
-        {label}
-      </label>
+const InputField = forwardRef<HTMLInputElement, InputFieldProps>(
+  ({ id, label, isValid, message, actionButton, ...props }, ref) => {
+    return (
+      <div className="flex flex-col w-full gap-0.5">
+        {/* 라벨 */}
+        <label htmlFor={id} className="body-r text-gray-80 pl-[5px]">
+          {label}
+        </label>
 
-      {/* 입력 필드 + 버튼 */}
-      <div className="flex gap-2">
-        <Input id={id} {...props} />
-        {actionButton && <div className="shrink-0">{actionButton}</div>}
+        {/* 입력 필드 + 버튼 */}
+        <div className="flex gap-2">
+          <Input id={id} ref={ref} {...props} />
+          {actionButton && <div className="shrink-0">{actionButton}</div>}
+        </div>
+
+        {/* 유효성 검사 메시지 */}
+        <p
+          className={twMerge(
+            'text-[9px]/[18px] pl-[5px]',
+            isValid ? 'text-functional-success' : 'text-functional-danger',
+            message === '' && 'invisible',
+          )}
+        >
+          {message || '‎'}
+        </p>
       </div>
+    );
+  },
+);
 
-      {/* 유효성 검사 메시지 */}
-      <p
-        className={twMerge(
-          'text-[9px]/[18px] pl-[5px]',
-          isValid ? 'text-functional-success' : 'text-functional-danger',
-          message === '' && 'invisible',
-        )}
-      >
-        {message || '‎'}
-      </p>
-    </div>
-  );
-}
+InputField.displayName = 'InputField';
+export default InputField;

src/components/input/InputField.tsx

@@ -1,4 +1,2 @@
-import Input from '@/components/input/Input';
-import InputField from '@/components/input/InputField';
-
-export { Input, InputField };
+export { default as Input } from './Input';
+export { default as InputField } from './InputField';

src/components/input/index.ts

@@ -1,6 +1,7 @@
 export * from './emotions';
 export * from './validation';
 export * from './limits';
+export * from './email';
 
 // 사용
 // import { EMOTIONS, MAX_NICKNAME_LENGTH, PASSWORD_REQUIRED_RULES } from "@/constants";

src/constants/index.ts

@@ -1,4 +1,4 @@
-import SignUpForm from '@/pages/signup/components/SignUpForm';
+import { SignUpForm } from '@/pages/signup/components';
 
 function SignUp() {
   return (

src/pages/signup/SignUp.tsx

@@ -1,22 +1,22 @@
 import { postEmailVerificationCheck, postEmailVerificationRequest } from '@/apis/email';
-import InputAuthCode from '@/components/InputAuthCode';
-import { AUTHCODE_REGEX } from '@/constants';
-import { MAX_RESEND_COUNT } from '@/constants/email';
+import { LoadingSpinnerButton } from '@/components/button';
+import { InputAuthCode } from '@/pages/signup/components/';
+import { AUTHCODE_REGEX, MAX_RESEND_COUNT } from '@/constants';
 import { useModalStore } from '@/store/modalStore';
 import { useMutation } from '@tanstack/react-query';
 import { useState } from 'react';
 
 interface AuthCodeInputProps {
   email: string;
-  authcodeValidity: boolean;
+  emailValidity: boolean;
   setValidity: (val: boolean) => void; // 인증코드 유효성 바꾸는 함수
 }
-function AuthCodeInput({ email, authcodeValidity, setValidity }: AuthCodeInputProps) {
+function AuthCodeInput({ email, emailValidity, setValidity }: AuthCodeInputProps) {
   const { openModal, closeModal } = useModalStore(); // 모달
   const [resendCount, setResendCount] = useState(0); // 재전송 횟수
   const [text, setText] = useState('');
-  const [validationMessage, setValidationMessage] = useState({
-    success: false,
+  const [validationStatus, setValidationStatus] = useState({
+    isValid: false, // 유효성 통과여부
     message: '인증번호가 오지 않았나요?',
   });
 
@@ -28,9 +28,9 @@ function AuthCodeInput({ email, authcodeValidity, setValidity }: AuthCodeInputPr
     const isValid = AUTHCODE_REGEX.test(value);
 
     if (isValid) {
-      setValidationMessage({ success: true, message: '' });
+      setValidationStatus({ isValid: true, message: '' });
     } else {
-      setValidationMessage({ success: false, message: '올바른 인증번호를 입력해주세요' });
+      setValidationStatus({ isValid: false, message: '올바른 인증번호를 입력해주세요' });
     }
   };
 
@@ -57,25 +57,25 @@ function AuthCodeInput({ email, authcodeValidity, setValidity }: AuthCodeInputPr
     mutationFn: () => postEmailVerificationCheck(email, text),
     onSuccess: ({ code }) => {
       if (code === 200) {
-        setValidationMessage({ success: true, message: '이메일 인증이 완료되었습니다' });
+        setValidationStatus({ isValid: true, message: '이메일 인증이 완료되었습니다' });
         setValidity(true); // 완료 처리
       } else {
-        setValidationMessage({ success: false, message: '인증 코드가 올바르지 않습니다' });
+        setValidationStatus({ isValid: false, message: '인증 코드가 올바르지 않습니다' });
       }
     },
 
     onError: () => {
-      setValidationMessage({
-        success: false,
+      setValidationStatus({
+        isValid: false,
         message: '오류가 발생했습니다. 잠시 후 다시 시도해 주세요.',
       });
     },
   });
 
   // 시간 초과시 실행할 함수
   const onTimeout = () => {
-    setValidationMessage({
-      success: false,
+    setValidationStatus({
+      isValid: false,
       message: '인증 시간이 만료되었습니다. 다시 요청해주세요.',
     });
   };
@@ -95,27 +95,28 @@ function AuthCodeInput({ email, authcodeValidity, setValidity }: AuthCodeInputPr
     resendEmailVerification();
   };
 
-  const buttonHandler = {
-    disable: validationMessage.success && !authcodeValidity,
-    text: '인증확인',
-    isLoading: isPending,
-    onClick: verifyEmail,
-  };
-
   return (
     <InputAuthCode
       id="emailVerificationConfrim"
       label="인증번호 확인"
       placeholder="인증번호 6자리를 입력해 주세요"
-      isValid={validationMessage.success} // ✅ 유효성 검사 여부 전달
-      validationMessage={validationMessage.message} // ✅ 메시지 전달
+      isValid={validationStatus.isValid} // ✅ 유효성 검사 여부 전달
+      message={validationStatus.message} // ✅ 메시지 전달
       value={text.toUpperCase()}
       onChange={handleChange}
       onTimeout={onTimeout} // 시간이 만료되었을 때 실행할 함수
       onResendEmail={handleResendEmail} // 재전송 요청
       resendCount={resendCount} // 재전송 횟수
-      authcodeValidity={authcodeValidity} // 인증코드 유효성
-      buttonHandler={buttonHandler}
+      isEmailVerified={emailValidity}
+      actionButton={
+        <LoadingSpinnerButton
+          isLoading={isPending}
+          className="w-[65px] flex-shrink-0"
+          text={emailValidity ? '인증완료' : '인증확인'}
+          disabled={!validationStatus.isValid || emailValidity}
+          onClick={() => verifyEmail()}
+        />
+      }
     />
   );
 }

src/pages/signup/components/AuthCodeInput.tsx

@@ -0,0 +1,29 @@
+import { AuthCodeInput, EmailInput } from '@/pages/signup/components';
+import { useState } from 'react';
+
+interface EmailGroupSectionProps {
+  updateValidity: (key: 'email', value: boolean) => void;
+  validity: { email: boolean };
+}
+
+const EmailGroupSection = ({ updateValidity, validity }: EmailGroupSectionProps) => {
+  const [email, setEmail] = useState('');
+  return (
+    <>
+      <EmailInput
+        setValidity={(value) => updateValidity('email', value)}
+        emailValidity={validity.email}
+        setEmail={setEmail}
+      />
+      {email !== '' && (
+        <AuthCodeInput
+          email={email}
+          emailValidity={validity.email}
+          setValidity={(value) => updateValidity('email', value)}
+        />
+      )}
+    </>
+  );
+};
+
+export default EmailGroupSection;