feat: 회원 가입 폼에서 버튼 로딩 0.1 초 이하면 로딩 컴포넌트 보여주지 않도록 수정

Author: denshou

src/pages/signup/components/AuthCodeInput.tsx

@@ -22,6 +22,7 @@ interface AuthCodeInputProps {
 }
 function AuthCodeInput({ emailSent, email, setValidation }: AuthCodeInputProps) {
   const [isLoading, setIsLoading] = useState(false);
+  const [showLoading, setShowLoading] = useState(false); // 로딩 UI 표시 여부
 
   const [authCode, setAuthCode] = useState(''); // 인증코드
   const [resendCount, setResendCount] = useState(0); // 재전송 횟수
@@ -45,7 +46,18 @@ function AuthCodeInput({ emailSent, email, setValidation }: AuthCodeInputProps)
   const handleEmailVerificationCheck = async () => {
     try {
       setIsLoading(true);
+
+      // 0.1초 뒤에 showLoading 활성화
+      const loadingTimeout = setTimeout(() => {
+        setShowLoading(true);
+      }, 100);
+
       const { code } = await postEmailVerificationCheck(email, authCode);
+
+      clearTimeout(loadingTimeout); // 불필요한 타이머 제거
+      setIsLoading(false);
+      setShowLoading(false); // 로딩 UI 숨기기
+
       if (code === 200) {
         setMessage({ type: 'success', message: '이메일 인증이 완료되었습니다' });
         setButtonVariant('disabled');
@@ -86,7 +98,7 @@ function AuthCodeInput({ emailSent, email, setValidation }: AuthCodeInputProps)
   };
 
   const renderButtonContent = () => {
-    if (isLoading) {
+    if (showLoading) {
       return <SpinLoading />;
     } else return <span>인증확인</span>;
   };
@@ -107,6 +119,7 @@ function AuthCodeInput({ emailSent, email, setValidation }: AuthCodeInputProps)
       onTimeout={onTimeout}
       onResendEmail={handlePostEmailVerificationRequest} // 재전송 요청
       resendCount={resendCount}
+      disabled={isLoading ? true : false}
     />
   );
 }

src/pages/signup/components/EmailInput.tsx

@@ -19,6 +19,7 @@ interface EmailInputProps {
 
 function EmailInput({ value, setValue, validation, setValidation, onSendEmail }: EmailInputProps) {
   const [isLoading, setIsLoading] = useState(false);
+  const [showLoading, setShowLoading] = useState(false); // 로딩 UI 표시 여부
   // 버튼 상태를 관리하는 state 추가
   const [buttonVariant, setButtonVariant] = useState<'primary' | 'secondary' | 'disabled'>(
     'primary',
@@ -47,7 +48,18 @@ function EmailInput({ value, setValue, validation, setValidation, onSendEmail }:
   const handleEmailCheck = async () => {
     try {
       setIsLoading(true);
+
+      // 0.1초 뒤에 showLoading 활성화
+      const loadingTimeout = setTimeout(() => {
+        setShowLoading(true);
+      }, 100);
+
       const { code } = await getEmailAvailability(value);
+
+      clearTimeout(loadingTimeout); // 불필요한 타이머 제거
+      setIsLoading(false);
+      setShowLoading(false); // 로딩 UI 숨기기
+
       if (code === 200) {
         handlePostEmailVerificationRequest(); // 사용 가능한 이메일 경우에만 이메일 인증 요청 보내기
       } else if (code === 409) {
@@ -83,7 +95,7 @@ function EmailInput({ value, setValue, validation, setValidation, onSendEmail }:
   };
 
   const renderButtonContent = () => {
-    if (isLoading) {
+    if (showLoading) {
       return <SpinLoading />;
     } else return <span>인증요청</span>;
   };
@@ -111,6 +123,7 @@ function EmailInput({ value, setValue, validation, setValidation, onSendEmail }:
       onChange={handleChange}
       validationMessages={validation}
       onClick={handleEmailCheck}
+      disabled={isLoading ? true : false}
     />
   );
 }

src/pages/signup/components/IdInput.tsx

@@ -19,6 +19,7 @@ interface IdInputProps {
 
 function IdInput({ value, setValue, validation, setValidation }: IdInputProps) {
   const [isLoading, setIsLoading] = useState(false);
+  const [showLoading, setShowLoading] = useState(false); // 로딩 UI 표시 여부
 
   const [buttonVariant, setButtonVariant] = useState<ButtonType>('disabled'); // 버튼 상태를 관리하는 state 추가
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -51,7 +52,18 @@ function IdInput({ value, setValue, validation, setValidation }: IdInputProps) {
   const handleIdCheck = async () => {
     try {
       setIsLoading(true);
+
+      // 0.1초 뒤에 showLoading 활성화
+      const loadingTimeout = setTimeout(() => {
+        setShowLoading(true);
+      }, 100);
+
       const { code } = await getIdAvailability(value);
+
+      clearTimeout(loadingTimeout); // 불필요한 타이머 제거
+      setIsLoading(false);
+      setShowLoading(false); // 로딩 UI 숨기기
+
       if (code === 200) {
         setValidation({ type: 'success', message: '사용 가능한 아이디입니다' });
       } else if (code === 409) {
@@ -65,7 +77,7 @@ function IdInput({ value, setValue, validation, setValidation }: IdInputProps) {
   };
 
   const renderButtonContent = () => {
-    if (isLoading) {
+    if (showLoading) {
       return <SpinLoading />;
     } else return <span>중복확인</span>;
   };
@@ -82,6 +94,7 @@ function IdInput({ value, setValue, validation, setValidation }: IdInputProps) {
       onChange={handleChange}
       validationMessages={validation}
       onClick={handleIdCheck}
+      disabled={isLoading ? true : false}
     />
   );
 }

src/pages/signup/components/NicknameInput.tsx

@@ -18,6 +18,7 @@ interface NicknameInputProps {
 
 function NicknameInput({ value, setValue, validation, setValidation }: NicknameInputProps) {
   const [isLoading, setIsLoading] = useState(false);
+  const [showLoading, setShowLoading] = useState(false); // 로딩 UI 표시 여부
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const newValue = e.target.value;
@@ -50,7 +51,18 @@ function NicknameInput({ value, setValue, validation, setValidation }: NicknameI
   const handleNicknameCheck = async () => {
     try {
       setIsLoading(true);
+
+      // 0.1초 뒤에 showLoading 활성화
+      const loadingTimeout = setTimeout(() => {
+        setShowLoading(true);
+      }, 100);
+
       const { code } = await getNicknameAvailability(value);
+
+      clearTimeout(loadingTimeout); // 불필요한 타이머 제거
+      setIsLoading(false);
+      setShowLoading(false); // 로딩 UI 숨기기
+
       if (code === 200) {
         setValidation({ type: 'success', message: '사용 가능한 닉네임입니다' });
       } else if (code === 409) {
@@ -64,7 +76,7 @@ function NicknameInput({ value, setValue, validation, setValidation }: NicknameI
   };
 
   const renderButtonContent = () => {
-    if (isLoading) {
+    if (showLoading) {
       return <SpinLoading />;
     } else return <span>중복확인</span>;
   };
@@ -81,6 +93,7 @@ function NicknameInput({ value, setValue, validation, setValidation }: NicknameI
       onChange={handleChange}
       validationMessages={validation}
       onClick={handleNicknameCheck}
+      disabled={isLoading ? true : false}
     />
   );
 }