diff --git a/src/Components/Auth/Signin/EmailButton.js b/src/Components/Auth/Signin/EmailButton.js index 12cc6948f33d5ec549b0b689d22f0f74aaeb914e..5e0a32b58eaa577c24e112906183d1812e6763fb 100644 --- a/src/Components/Auth/Signin/EmailButton.js +++ b/src/Components/Auth/Signin/EmailButton.js @@ -1,76 +1,81 @@ import React, { useState } from "react"; -function EmailButton({onClick,text,email,setWarningMessage,setViewable,disableValue,}) -{ - const [verifyNum, setVerifyNum] = useState(""); - const [verificationComplete, setVerificationComplete] = useState(false); - const [verifyText, setVerifyText] = useState("확인"); +function EmailButton({ + onClick, + text, + email, + setWarningMessage, + setViewable, + disableValue, + setDisableValue, +}) { + const [verifyNum, setVerifyNum] = useState(""); + const [verificationComplete, setVerificationComplete] = useState(false); + const [verifyText, setVerifyText] = useState("인증"); - const onValueChange = (e) => { - setWarningMessage(``); - setVerifyNum(e.target.value); - }; + const onValueChange = (e) => { + setWarningMessage(``); + setVerifyNum(e.target.value); + }; - const handleCheckboxClick = async () => { - setWarningMessage(``); + const handleCheckboxClick = async () => { + setWarningMessage(``); - try { - const response = await fetch( - "http://localhost:8080/api/auth/mail/verify", - { - method: "POST", - headers: { - "Content-Type": "application/json", - }, - body: JSON.stringify({ - email: email, - authCode: verifyNum, - }), - } - ); + try { + const response = await fetch( + "http://localhost:8080/api/auth/mail/verify", + { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ + email: email, + authCode: verifyNum, + }), + } + ); - if (response.ok) { - setVerificationComplete(true); - setVerifyText("인증 완료"); - setViewable(""); - } else { - const errorResponse = await response.json(); - setWarningMessage(errorResponse.error); - } - } catch (error) { - setWarningMessage(`${error.response.data.error}`); - } - }; + if (response.ok) { + setVerificationComplete(true); + setDisableValue(true); + setVerifyText("인증 완료"); + setViewable(""); + } else { + const errorResponse = await response.json(); + setWarningMessage(errorResponse.error); + } + } catch (error) { + setWarningMessage(`${error.response.data.error}`); + } + }; - return ( - - <div className="email-verification-container"> - - <button - type="button" - className="email-button" - onClick={onClick} - disabled={disableValue} - > - {text} - </button> - - <input - type="text" - value={verifyNum} - onChange={onValueChange} - placeholder="인증번호" - className="email-verification-input" - /> - <input - type="button" - className="email-check-button" - onClick={handleCheckboxClick} - value={verifyText} - disabled={verificationComplete} - /> - </div> - ); + return ( + <div className="email-verification-div"> + <button + type="button" + className={disableValue ? "email-button disabled-button" : "email-button"} + onClick={onClick} + disabled={disableValue} + > + {text} + </button> + <input + type="text" + value={verifyNum} + onChange={onValueChange} + placeholder="Verification Number" + className="email-verification-input" + /> + <input + type="button" + className={verificationComplete ? "email-check-button disabled-button" : "email-check-button"} + onClick={handleCheckboxClick} + value={verifyText} + disabled={verificationComplete} + /> + </div> + ); } export { EmailButton }; diff --git a/src/Components/Common/CommonForm.js b/src/Components/Common/CommonForm.js index 13bde0a4efc09c8b9118e3f7bdb45f4d709bd044..7e9a3b66705f7a6143271d9d119ccdbfc23b7207 100644 --- a/src/Components/Common/CommonForm.js +++ b/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> diff --git a/src/Pages/FindAccount/FindForm.js b/src/Pages/FindAccount/FindForm.js index 2af0bf5b2808bac8beaa0d3fc8955558a4c74252..0517f0d2b8ffc51985ab1763372832f969645734 100644 --- a/src/Pages/FindAccount/FindForm.js +++ b/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> diff --git a/src/css/components/loginPage.css b/src/css/components/loginPage.css index c00ac9118412cd720d5818dbc99191b6d744664c..df9dc4b86a0408a06ff062a42c5b6d1878079401 100644 --- a/src/css/components/loginPage.css +++ b/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