🐛 회원가입 검증 오류 수정, 활성화 조건 개선

components/Input.tsx

@@ -1,4 +1,5 @@
 import { useValidation } from 'hooks/useValidation';
+import Image from 'next/image';
 import React, { useState } from 'react';
 import { format } from 'date-fns';
 
@@ -15,6 +16,7 @@ interface InputFieldProps {
   width?: string;
   onValidation?: (isValid: boolean) => void;
   ref?: React.Ref<HTMLInputElement>;
+  disabled?: boolean;
 }
 
 function InputField({
@@ -28,6 +30,7 @@ function InputField({
   width,
   onValidation,
   ref,
+  disabled,
   ...props
 }: InputFieldProps) {
   const { errorMessage, validate } = useValidation({
@@ -36,6 +39,7 @@ function InputField({
   });
 
   const [showDayPicker, setShowDayPicker] = useState(false);
+  const [showPassword, setShowPassword] = useState(false);
 
   const handleFocus = () => {
     if (
@@ -53,39 +57,34 @@ function InputField({
   };
 
   const handleBlur = () => {
-    if (typeof layout === 'string' && layout === 'vertical') {
+    if (value) {
       const error = validate(value);
-      const isValid = !error && typeof value === 'string' && value.length > 0;
+      const isValid = !error && value.length > (type === 'name' ? 1 : 0);
       onValidation?.(isValid);
     }
   };
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = e.target.value.trim();
     onChange(e);
-    if (
-      typeof layout === 'string' &&
-      layout === 'vertical' &&
-      typeof errorMessage === 'string' &&
-      errorMessage.length > 0
-    ) {
-      const error = validate(e.target.value);
-      const isValid =
-        !error &&
-        typeof e.target.value === 'string' &&
-        e.target.value.length > 0;
-      onValidation?.(isValid);
-    }
+    const error = validate(newValue);
+    const isValid = !error && newValue.length > (type === 'name' ? 1 : 0);
+    onValidation?.(isValid);
   };
 
   const getInputType = () => {
     if (type === 'name') {
       return 'text';
-    } else if (type === 'passwordConfirm') {
-      return 'password';
+    } else if (type === 'passwordConfirm' || type === 'password') {
+      return showPassword ? 'text' : 'password';
     }
     return type;
   };
 
+  const togglePasswordVisibility = () => {
+    setShowPassword(!showPassword);
+  };
+
   //스타일에 따른 클래스
   const variantClass = {
     containerVertical: 'flex flex-col gap-[10px]',
@@ -111,7 +110,7 @@ function InputField({
     errorMessage.length > 0
       ? variantClass.error
       : variantClass.normal
-  }`;
+  } ${disabled ? 'opacity-50 pointer-events-none' : ''}`;
 
   return (
     <div
@@ -127,23 +126,39 @@ function InputField({
       {typeof label === 'string' && label.length > 0 && (
         <label className={labelClass}>{label}</label>
       )}
-      <input
-        type={getInputType()}
-        value={value}
-        onChange={handleChange}
-        placeholder={placeholder}
-        onBlur={handleBlur}
-        onFocus={handleFocus}
-        className={inputClass}
-        ref={ref}
-        {...props}
-      />
-      {typeof layout === 'string' &&
-        layout === 'vertical' &&
-        typeof errorMessage === 'string' &&
-        errorMessage.length > 0 && (
-          <span className={variantClass.errorText}>{errorMessage}</span>
+      <div className="relative">
+        <input
+          type={getInputType()}
+          value={value}
+          onChange={handleChange}
+          placeholder={placeholder}
+          onBlur={handleBlur}
+          onFocus={handleFocus}
+          className={inputClass}
+          ref={ref}
+          disabled={disabled}
+          {...props}
+        />
+        {(type === 'password' || type === 'passwordConfirm') && (
+          <button
+            type="button"
+            onClick={togglePasswordVisibility}
+            className="absolute right-3 top-1/2 -translate-y-1/2 cursor-pointer"
+          >
+            <Image
+              src={
+                showPassword ? '/icon/icon-eye.svg' : '/icon/icon-eye-off.svg'
+              }
+              alt={showPassword ? '비밀번호 숨기기' : '비밀번호 보기'}
+              width={20}
+              height={20}
+            />
+          </button>
         )}
+      </div>
+      {errorMessage && (
+        <span className={variantClass.errorText}>{errorMessage}</span>
+      )}
       {typeof showDayPicker === 'boolean' && showDayPicker && (
         <div className="absolute left-0 top-full z-50 mt-2 rounded bg-white p-4 shadow-md">
           <div>

hooks/useValidation.tsx

@@ -35,7 +35,7 @@ export function useValidation({ type, compareValue }: UseValidationProps) {
         }
         break;
       case 'name':
-        if (value.length < 1 || value.length > 10) {
+        if (value.length <= 1 || value.length > 10) {
           return '1자 이상 10자 이하로 작성해주세요.';
         }
         break;

pages/signup/index.tsx

@@ -12,17 +12,18 @@ function SignUp() {
   const [password, setPassword] = useState('');
   const [passwordConfirm, setPasswordConfirm] = useState('');
   const [isSubmitting, setIsSubmitting] = useState(false);
+  const [isCompleted, setIsCompleted] = useState(false);
   const [name, setName] = useState('');
   const [snackbarOpen, setSnackbarOpen] = useState(false);
   const [snackbarMessage, setSnackbarMessage] = useState('');
   const [snackbarSeverity, setSnackbarSeverity] = useState<'success' | 'fail'>(
     'success'
   );
   const [validFields, setValidFields] = useState({
-    name: '',
-    email: '',
-    password: '',
-    passwordConfirm: '',
+    name: false,
+    email: false,
+    password: false,
+    passwordConfirm: false,
   });
   const router = useRouter();
 
@@ -53,7 +54,7 @@ function SignUp() {
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
-    if (isSubmitting || !isFormValid) return;
+    if (isSubmitting || !isFormValid || isCompleted) return;
 
     setIsSubmitting(true);
 
@@ -65,6 +66,7 @@ function SignUp() {
         name,
       });
 
+      setIsCompleted(true);
       // 회원가입 성공 시 스낵바 표시
       setSnackbarMessage('회원가입이 완료되었습니다');
       setSnackbarSeverity('success');
@@ -106,6 +108,7 @@ function SignUp() {
             onChange={handleNameChange}
             placeholder="이름을 입력해 주세요"
             onValidation={(isValid) => handleValidation('name', isValid)}
+            disabled={isCompleted}
           />
           <InputField
             label="이메일"
@@ -115,6 +118,7 @@ function SignUp() {
             onChange={handleEmailChange}
             placeholder="이메일을 입력해 주세요"
             onValidation={(isValid) => handleValidation('email', isValid)}
+            disabled={isCompleted}
           />
           <InputField
             label="비밀번호"
@@ -124,6 +128,7 @@ function SignUp() {
             onChange={handlePasswordChange}
             placeholder="비밀번호를 입력해 주세요"
             onValidation={(isValid) => handleValidation('password', isValid)}
+            disabled={isCompleted}
           />
           <InputField
             label="비밀번호 확인"
@@ -136,9 +141,10 @@ function SignUp() {
             onValidation={(isValid) =>
               handleValidation('passwordConfirm', isValid)
             }
+            disabled={isCompleted}
           />
           <Button
-            disabled={!isFormValid}
+            disabled={!isFormValid || isSubmitting || isCompleted}
             isLoading={isSubmitting}
             variant="primary"
             className="mt-[6px] h-[45px] w-full"

services/api/auth.ts

@@ -44,13 +44,11 @@ export const AuthAPI = {
       if (error instanceof AxiosError) {
         // 400 에러 (이미 존재하는 이메일)
         if (error.response?.status === 400) {
-          throw new Error('이미 존재하는 이메일입니다.');
+          throw new Error('이미 가입된 이메일 주소입니다.');
         }
         // 500 에러 (서버 내부 오류)
         if (error.response?.status === 500) {
-          throw new Error(
-            '서버 오류가 발생했습니다. 잠시 후 다시 시도해주세요.'
-          );
+          throw new Error('서버 오류가 발생했습니다. 잠시 후 다시 시도해주세요.');
         }
       }
       // 기타 예상치 못한 에러