From 49119011180dff056bf375a7677de412afa0a1c3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=B3=91=ED=98=84?=
 <gimbyeonghyeon@gimbyeonghyeon-ui-MacBookAir.local>
Date: Wed, 6 Sep 2023 13:05:23 +0900
Subject: [PATCH] =?UTF-8?q?[Feat]=20=EC=95=BD=EA=B4=80=20=EB=8F=99?=
 =?UTF-8?q?=EC=9D=98=20=EC=B2=B4=ED=81=AC=EB=A6=AC=EC=8A=A4=ED=8A=B8=20?=
 =?UTF-8?q?=EA=B5=AC=ED=98=84=20=EC=B2=B4=ED=81=AC=ED=95=98=EC=A7=80=20?=
 =?UTF-8?q?=EC=95=8A=EC=9D=84=20=EC=8B=9C=20=EB=A9=94=EC=8B=9C=EC=A7=80=20?=
 =?UTF-8?q?=EC=B6=9C=EB=A0=A5=20=EC=B2=B4=ED=81=AC=ED=95=98=EC=A7=80=20?=
 =?UTF-8?q?=EC=95=8A=EC=9D=84=20=EC=8B=9C=20=EB=B0=B1=EC=97=94=EB=93=9C?=
 =?UTF-8?q?=EB=A1=9C=20api=EC=9A=94=EC=B2=AD=EB=B6=88=EA=B0=80=20Issues=20?=
 =?UTF-8?q?#15?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/Signups/EmailCertify.tsx   | 36 ++++++++++++++++---
 1 file changed, 31 insertions(+), 5 deletions(-)

diff --git a/client/src/components/Signups/EmailCertify.tsx b/client/src/components/Signups/EmailCertify.tsx
index 887f5ee4..2dde0ef6 100644
--- a/client/src/components/Signups/EmailCertify.tsx
+++ b/client/src/components/Signups/EmailCertify.tsx
@@ -15,10 +15,14 @@ const strings = {
 
 // 이메일 인증 모달 컴포넌트
 const EmailVerificationModal: React.FC<EmailVerificationModalProps> = ({ onClose, onNextStep, initialEmail }) => {
-  // 이메일 및 인증코드에 대한 상태를 선언합니다.
+    // 이메일 및 인증코드에 대한 상태를 선언합니다.
     const [email, setEmail] = useState(initialEmail);
     const [verificationCode, setVerificationCode] = useState('');
 
+    // 동의 상태와 알림 상태를 선언합니다.
+    const [hasAgreed, setHasAgreed] = useState(false);
+    const [showAgreementError, setShowAgreementError] = useState(false);
+
     // 이메일 입력값을 처리하는 함수
     const handleEmailChange = (event: React.ChangeEvent<HTMLInputElement>) => {
         setEmail(event.target.value);
@@ -29,8 +33,20 @@ const EmailVerificationModal: React.FC<EmailVerificationModalProps> = ({ onClose
         setVerificationCode(event.target.value);
     };
 
+    // 체크박스의 변경을 감지하는 핸들러
+    const handleAgreementChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        setHasAgreed(event.target.checked);
+        setShowAgreementError(false); // 알림을 숨깁니다.
+    };
+
     // 다음 단계 버튼 클릭시 이메일 인증을 처리하는 함수
     const handleNextStepClick = async () => {
+        // 동의 확인
+        if (!hasAgreed) {
+            setShowAgreementError(true); // 알림을 표시합니다.
+            return;
+        }
+
         try {
             const response = await axios.post('http://ec2-13-125-246-160.ap-northeast-2.compute.amazonaws.com:8080/email/confirm', { email, code: verificationCode });
             if (response.status === 200) {
@@ -54,9 +70,11 @@ const EmailVerificationModal: React.FC<EmailVerificationModalProps> = ({ onClose
                 <Input type="text" placeholder={strings.codeHintText} value={verificationCode} onChange={handleVerificationCodeChange} />
                 <HintText>{strings.codeHintText}</HintText>
                 <TermsCheckbox>
-                    <input type="checkbox" id="terms" />
+                    <input type="checkbox" id="terms" onChange={handleAgreementChange} />
                     <label htmlFor="terms">{strings.termsText}</label>
                 </TermsCheckbox>
+
+                {showAgreementError && <ErrorMessage>동의하지 않으면 진행할 수 없습니다</ErrorMessage>}
                 <SignupButton onClick={handleNextStepClick}>
                     {strings.nextStepText}
                 </SignupButton>
@@ -69,9 +87,9 @@ export default EmailVerificationModal;
 
 // 이메일 인증 모달의 Props 타입
 type EmailVerificationModalProps = {
-  onClose: () => void;
-  onNextStep: () => void;
-  initialEmail: string;  // 추가된 부분
+    onClose: () => void;
+    onNextStep: () => void;
+    initialEmail: string;  // 추가된 부분
 };
 
 // 모달의 배경 스타일
@@ -164,3 +182,11 @@ const TermsCheckbox = styled.div`
     font-size: 0.9rem;
   }
 `;
+
+// 오류 메시지 스타일을 추가합니다.
+const ErrorMessage = styled.p`
+  color: red;
+  margin-top: 5px;
+  margin-bottom: 10px;
+  font-size: 0.8rem;
+`;
\ No newline at end of file