Merge pull request #185 from prgrms-web-devcourse-final-project/feat/184-signup-button-loading

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

Author: yoo-nji

dev-dist/sw.js

@@ -79,7 +79,7 @@ define(['./workbox-54d0af47'], (function (workbox) { 'use strict';
    */
   workbox.precacheAndRoute([{
     "url": "index.html",
-    "revision": "0.08jje88gm9"
+    "revision": "0.mu5kaq0e0jg"
   }], {});
   workbox.cleanupOutdatedCaches();
   workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {

src/pages/signup/components/AuthCodeInput.tsx

@@ -15,6 +15,8 @@ interface AuthCodeInputProps {
 function AuthCodeInput({ email, emailvalidity, validity, setValidity }: AuthCodeInputProps) {
   const [resendCount, setResendCount] = useState(0); // 재전송 횟수
   // 유효성 검사
+  const [showLoading, setShowLoading] = useState(false); // 로딩 UI 표시 여부
+
   const handleValidation = (value: string) => {
     if (value == '') {
       return { success: false, message: '인증번호가 오지 않았나요?' };
@@ -63,8 +65,19 @@ function AuthCodeInput({ email, emailvalidity, validity, setValidity }: AuthCode
     });
   };
 
-  const renderButtonContent = () => {
+  // 0.1초 후 로딩 UI 표시
+  useEffect(() => {
+    let loadingTimeout: NodeJS.Timeout;
     if (isLoading) {
+      loadingTimeout = setTimeout(() => setShowLoading(true), 100);
+    } else {
+      setShowLoading(false);
+    }
+    return () => clearTimeout(loadingTimeout);
+  }, [isLoading]);
+
+  const renderButtonContent = () => {
+    if (showLoading) {
       return <SpinLoading />;
     } else return <span>인증확인</span>;
   };

src/pages/signup/components/EmailInput.tsx

@@ -3,6 +3,7 @@ import SpinLoading from '@/components/loading/SpinLoading';
 import { EMAIL_REGEX } from '@/constants';
 import { useEmailCheck } from '@/hooks/useEmailCheck';
 import { useValidationWithButton } from '@/hooks/useValidationWithButton';
+import { useEffect, useState } from 'react';
 
 interface EmailInputProps {
   setValue: (val: string) => void;
@@ -12,6 +13,7 @@ interface EmailInputProps {
 }
 
 function EmailInput({ setValue, validity, setValidity, authcodeValidity }: EmailInputProps) {
+  const [showLoading, setShowLoading] = useState(false); // 로딩 UI 표시 여부
   // 유효성 검사
   const handleValidation = (value: string) => {
     if (!EMAIL_REGEX.test(value)) {
@@ -44,8 +46,19 @@ function EmailInput({ setValue, validity, setValidity, authcodeValidity }: Email
     setButtonVariant,
   );
 
-  const renderButtonContent = () => {
+  // 0.1초 후 로딩 UI 표시
+  useEffect(() => {
+    let loadingTimeout: NodeJS.Timeout;
     if (isChecking) {
+      loadingTimeout = setTimeout(() => setShowLoading(true), 100);
+    } else {
+      setShowLoading(false);
+    }
+    return () => clearTimeout(loadingTimeout);
+  }, [isChecking]);
+
+  const renderButtonContent = () => {
+    if (showLoading) {
       return <SpinLoading />;
     } else return <span>인증요청</span>;
   };

src/pages/signup/components/IdInput.tsx

@@ -3,6 +3,7 @@ import SpinLoading from '@/components/loading/SpinLoading';
 import { ID_REGEX } from '@/constants';
 import { useIdAvailability } from '@/hooks/useIdAvailability';
 import { useValidationWithButton } from '@/hooks/useValidationWithButton';
+import { useEffect, useState } from 'react';
 
 interface IdInputProps {
   setValue: (val: string) => void;
@@ -11,6 +12,8 @@ interface IdInputProps {
 }
 
 function IdInput({ setValue, validity, setValidity }: IdInputProps) {
+  const [showLoading, setShowLoading] = useState(false); // 로딩 UI 표시 여부
+
   // 유효성 검사
   const handleValidation = (value: string) => {
     if (!ID_REGEX.test(value)) {
@@ -34,8 +37,19 @@ function IdInput({ setValue, validity, setValidity }: IdInputProps) {
     setValidationMessage,
   );
 
-  const renderButtonContent = () => {
+  // 0.1초 후 로딩 UI 표시
+  useEffect(() => {
+    let loadingTimeout: NodeJS.Timeout;
     if (isPending) {
+      loadingTimeout = setTimeout(() => setShowLoading(true), 100);
+    } else {
+      setShowLoading(false);
+    }
+    return () => clearTimeout(loadingTimeout);
+  }, [isPending]);
+
+  const renderButtonContent = () => {
+    if (showLoading) {
       return <SpinLoading />;
     } else return <span>중복확인</span>;
   };

src/pages/signup/components/NicknameInput.tsx

@@ -3,6 +3,7 @@ import SpinLoading from '@/components/loading/SpinLoading';
 import { MAX_NICKNAME_LENGTH, MIN_NICKNAME_LENGTH, NICKNAME_REGEX } from '@/constants';
 import { useNicknameAvailability } from '@/hooks/useNicknameAvailability';
 import { useValidationWithButton } from '@/hooks/useValidationWithButton';
+import { useEffect, useState } from 'react';
 
 interface NicknameInputProps {
   initialValue?: string; // 초기값
@@ -12,6 +13,7 @@ interface NicknameInputProps {
 }
 
 function NicknameInput({ initialValue, setValue, validity, setValidity }: NicknameInputProps) {
+  const [showLoading, setShowLoading] = useState(false); // 로딩 UI 표시 여부
   // 유효성 검사
   const handleValidation = (value: string) => {
     if (value.length < MIN_NICKNAME_LENGTH || value.length > MAX_NICKNAME_LENGTH) {
@@ -43,8 +45,19 @@ function NicknameInput({ initialValue, setValue, validity, setValidity }: Nickna
     setValidationMessage,
   );
 
-  const renderButtonContent = () => {
+  // 0.1초 후 로딩 UI 표시
+  useEffect(() => {
+    let loadingTimeout: NodeJS.Timeout;
     if (isPending) {
+      loadingTimeout = setTimeout(() => setShowLoading(true), 100);
+    } else {
+      setShowLoading(false);
+    }
+    return () => clearTimeout(loadingTimeout);
+  }, [isPending]);
+
+  const renderButtonContent = () => {
+    if (showLoading) {
       return <SpinLoading />;
     } else return <span>중복확인</span>;
   };