fix: 버튼 마진값 반응형 처리 및 회원가입 비밀번호 매칭 오류 해결

Moaguide-develop · Sep 21, 2024 · 4a7ee26 · 4a7ee26
1 parent 7ae652d
commit 4a7ee26
Show file tree

Hide file tree

Showing 6 changed files with 25 additions and 13 deletions.
diff --git a/src/components/find/FindEmail.tsx b/src/components/find/FindEmail.tsx
@@ -241,12 +241,12 @@ const FindEmail = () => {
             {isComplete ? (
               <div
                 onClick={handleComplete}
-                className="cursor-pointer flex items-center justify-center px-5 py-3 w-full rounded-[12px] font-bold text-lg bg-gradient2 text-heading4 text-white"
+                className="cursor-pointer flex items-center justify-center px-5 py-3 w-full rounded-[12px] font-bold text-lg bg-gradient2 text-heading4 text-white  mt-0 sm:mt-[40px]"
               >
                 다음으로
               </div>
             ) : (
-              <div className="flex items-center justify-center px-5 py-3 w-full rounded-[12px] font-bold text-lg bg-gray100 text-heading4 text-gray400">
+              <div className="flex items-center justify-center px-5 py-3 w-full rounded-[12px] font-bold text-lg bg-gray100 text-heading4 text-gray400  mt-0 sm:mt-[40px]">
                 다음으로
               </div>
             )}

diff --git a/src/components/find/FindPassword.tsx b/src/components/find/FindPassword.tsx
@@ -229,12 +229,12 @@ const FindPassword = () => {
             {isComplete ? (
               <div
                 onClick={handleComplete}
-                className="cursor-pointer flex items-center justify-center px-5 py-3 w-full rounded-[12px] font-bold text-lg bg-gradient2 text-heading4 text-white"
+                className="cursor-pointer flex items-center justify-center px-5 py-3 w-full rounded-[12px] font-bold text-lg bg-gradient2 text-heading4 text-white mt-0 sm:mt-[40px]"
               >
                 다음으로
               </div>
             ) : (
-              <div className="flex items-center justify-center px-5 py-3 w-full rounded-[12px] font-bold text-lg bg-gray100 text-heading4 text-gray400">
+              <div className="flex items-center justify-center px-5 py-3 w-full rounded-[12px] font-bold text-lg bg-gray100 text-heading4 text-gray400 mt-0 sm:mt-[40px]">
                 다음으로
               </div>
             )}
@@ -310,11 +310,11 @@ const FindPassword = () => {
           className="w-full mx-auto"
         >
         {passwordMatch ? (
-          <div className="flex items-center justify-center px-5 py-3 w-full rounded-[12px] font-bold text-lg bg-gradient2 text-heading4 text-white cursor-pointer" onClick={handlePasswordReset}>
+          <div className="flex items-center justify-center px-5 py-3 w-full rounded-[12px] font-bold text-lg bg-gradient2 text-heading4 text-white cursor-pointer mt-0 sm:mt-[40px]" onClick={handlePasswordReset}>
             비밀번호 재설정
           </div>
         ) : (
-          <div className="flex items-center justify-center px-5 py-3 w-full rounded-[12px] font-bold text-lg bg-gray100 text-heading4 text-gray400">
+          <div className="flex items-center justify-center px-5 py-3 w-full rounded-[12px] font-bold text-lg bg-gray100 text-heading4 text-gray400 mt-0 sm:mt-[40px]">
             비밀번호 재설정
           </div>
         )}

diff --git a/src/components/signup/Step1.tsx b/src/components/signup/Step1.tsx
@@ -128,9 +128,9 @@ const Step1: React.FC<StepProps> = ({ onNext, onUpdate }) => {
 
       <button
         onClick={onNext}
-        className={`w-full max-w-[340px] py-3 rounded-[12px] font-bold text-lg transition duration-300 ${
+        className={`w-full max-w-[340px] py-3 rounded-[12px] font-bold text-lg transition duration-300 mt-0 sm:mt-[40px] ${
           isNextEnabled
-            ? 'bg-purple-600 text-white hover:bg-purple-700'
+            ? 'bg-gradient2  text-white hover:bg-purple-700'
             : 'bg-gray100 text-heading4 text-gray400 cursor-not-allowed'
         }`}
         disabled={!isNextEnabled}

diff --git a/src/components/signup/Step3.tsx b/src/components/signup/Step3.tsx
@@ -16,6 +16,18 @@ const Step3: React.FC<StepProps> = ({ onNext, onUpdate }) => {
 
   const router = useRouter();
 
+  const validateEmail = (email: string) => {
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    return emailRegex.test(email);
+  };
+
+  const handleEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newEmail = e.target.value;
+    setEmail(newEmail);
+    onUpdate({ email: newEmail });
+  };
+
+
   const validatePassword = (password: string) => {
     const isValid = /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[!@#$%^&*])[A-Za-z\d!@#$%^&*]{8,20}$/.test(password);
     setPasswordValid(isValid);
@@ -37,7 +49,7 @@ const Step3: React.FC<StepProps> = ({ onNext, onUpdate }) => {
     setPasswordMatch(newConfirmPassword === password);
   };
 
-  const isFormValid = email && passwordValid && passwordMatch;
+  const isFormValid = email && passwordValid === true && passwordMatch === true;
 
   return (
     <div className="min-h-[calc(100dvh-100px)] flex flex-col items-center justify-between mb-[100px] sm:min-h-[100vh] sm:justify-center sm:mb-0">
@@ -120,7 +132,7 @@ const Step3: React.FC<StepProps> = ({ onNext, onUpdate }) => {
         <button 
           onClick={onNext} 
           disabled={!isFormValid} 
-          className={`w-full max-w-[340px] py-3 rounded-[12px] text-lg font-bold ${isFormValid ? 'bg-gradient2 text-heading4 text-white' : 'bg-gray100 text-heading4 text-gray400'}`}
+          className={`w-full max-w-[340px] py-3 rounded-[12px] text-lg font-bold mt-0 sm:mt-[40px] ${isFormValid ? 'bg-gradient2 text-heading4 text-white' : 'bg-gray100 text-heading4 text-gray400'}`}
         >
           다음으로
         </button>

diff --git a/src/components/signup/Step4.tsx b/src/components/signup/Step4.tsx
@@ -208,7 +208,7 @@ const Step4: React.FC<StepProps> = ({ onNext, onUpdate }) => {
       <button
         onClick={handleComplete}
         disabled={!isFormValid}
-        className={`w-full max-w-[340px] mt-6 py-3 px-4 rounded-lg text-white ${isFormValid ? 'bg-purple-600' : 'bg-gray-300 cursor-not-allowed'}`}
+        className={`w-full max-w-[340px] py-3 rounded-[12px] text-lg font-bold text-white  mt-0 sm:mt-[40px] ${isFormValid ? 'bg-gradient2 text-heading4 text-white' : 'bg-gray100 text-heading4 text-gray400 cursor-not-allowed'}`}
       >
         완료
       </button>

diff --git a/src/components/signup/modal/PhoneVerification.tsx b/src/components/signup/modal/PhoneVerification.tsx
@@ -252,12 +252,12 @@ const PhoneVerification: React.FC<PhoneVerificationProps> = ({ onNext, onPhoneNu
         {isComplete ? (
           <div
             onClick={handleComplete}
-            className="w-full max-w-[340px] cursor-pointer flex items-center justify-center px-5 py-3  w-full rounded-[12px] font-bold text-lg bg-gradient2 text-heading4 text-white"
+            className="w-full max-w-[340px] cursor-pointer flex items-center justify-center px-5 py-3  w-full rounded-[12px] font-bold text-lg bg-gradient2 text-heading4 text-white mt-0 sm:mt-[40px]"
           >
             다음으로
           </div>
         ) : (
-          <div className="w-full max-w-[340px] flex items-center justify-center px-5 py-3   w-full rounded-[12px] font-bold text-lg bg-gray100 text-heading4 text-gray400">
+          <div className="w-full max-w-[340px] flex items-center justify-center px-5 py-3   w-full rounded-[12px] font-bold text-lg bg-gray100 text-heading4 text-gray400 mt-0 sm:mt-[40px]">
             다음으로
           </div>
         )}