Merge branch 'style' into 'main'

feat: disable 로직 추가, 스타일 추가

See merge request !20

src/Components/Auth/Signin/EmailButton.js

 import React, { useState } from "react";
 
-function EmailButton({onClick,text,email,setWarningMessage,setViewable,disableValue,})
-{
+function EmailButton({
+    onClick,
+    text,
+    email,
+    setWarningMessage,
+    setViewable,
+    disableValue,
+    setDisableValue,
+}) {
     const [verifyNum, setVerifyNum] = useState("");
     const [verificationComplete, setVerificationComplete] = useState(false);
-  const [verifyText, setVerifyText] = useState("확인");
+    const [verifyText, setVerifyText] = useState("인증");
 
     const onValueChange = (e) => {
         setWarningMessage(``);
@@ -31,6 +38,7 @@ function EmailButton({onClick,text,email,setWarningMessage,setViewable,disableVa
 
             if (response.ok) {
                 setVerificationComplete(true);
+                setDisableValue(true);
                 setVerifyText("인증 완료");
                 setViewable("");
             } else {
@@ -43,28 +51,25 @@ function EmailButton({onClick,text,email,setWarningMessage,setViewable,disableVa
     };
 
     return (
-    
-    <div className="email-verification-container">
-     
+        <div className="email-verification-div">
             <button
                 type="button"
-        className="email-button"
+                className={disableValue ? "email-button disabled-button" : "email-button"}
                 onClick={onClick}
                 disabled={disableValue}
             >
                 {text}
             </button>
-      
             <input
                 type="text"
                 value={verifyNum}
                 onChange={onValueChange}
-        placeholder="인증번호"
+                placeholder="Verification Number"
                 className="email-verification-input"
             />
             <input
                 type="button"
-        className="email-check-button"
+                className={verificationComplete ? "email-check-button disabled-button" : "email-check-button"}
                 onClick={handleCheckboxClick}
                 value={verifyText}
                 disabled={verificationComplete}

src/Components/Common/CommonForm.js

@@ -13,6 +13,7 @@ function CommonForm({ onSubmit, buttonText, fields, showVerificationButton, setW
   const emailVerificationSend = async () => {
     setWarningMessage(``);
     setEmailMessage("전송 중");
+    setDisableValue(true);
     try {
       const response = await fetch("http://localhost:8080/api/auth/mail", {
         method: "POST",
@@ -26,14 +27,17 @@ function CommonForm({ onSubmit, buttonText, fields, showVerificationButton, setW
 
       if (response.ok) {
         setEmailMessage("재전송");
+        setDisableValue(false);
       } else {
         const errorResponse = await response.json();
         setWarningMessage(errorResponse.error);
         setEmailMessage("전송");
+        setDisableValue(false);
       }
     } catch (error) {
       setWarningMessage(`${error.response.data.error}`);
       setEmailMessage("전송");
+      setDisableValue(false);
     }
   }
 
@@ -64,6 +68,7 @@ function CommonForm({ onSubmit, buttonText, fields, showVerificationButton, setW
               viewable={viewable}
               setViewable={setViewable}
               disableValue={disableValue}
+              setDisableValue={setDisableValue}
             />
           )}
         </div>

src/Pages/FindAccount/FindForm.js

@@ -54,6 +54,7 @@ function FindForm({ onSubmit, buttonText, fields, showVerificationButton, setWar
 
             if (response.ok) {
                 setEmailMessage("재전송");
+                setDisableValue(false);
             } else {
                 const errorResponse = await response.json();
                 setWarningMessage(errorResponse.error);
@@ -100,6 +101,7 @@ function FindForm({ onSubmit, buttonText, fields, showVerificationButton, setWar
                             viewable={viewable}
                             setViewable={setViewable}
                             disableValue={disableValue}
+                            setDisableValue={setDisableValue}
                         />
                     )}
                 </div>

src/css/components/loginPage.css

@@ -164,3 +164,8 @@
 .text-separator {
   margin: 0 5px;
 }
+
+.disabled-button:hover {
+  background-color: initial;
+  cursor: default;
+}
\ No newline at end of file