From 4a7ee260c55b39f5f4c4284720c409b58bf305e8 Mon Sep 17 00:00:00 2001
From: jiohjung98 <ckaquz98@naver.com>
Date: Sun, 22 Sep 2024 02:55:21 +0900
Subject: [PATCH 1/2] =?UTF-8?q?fix:=20=EB=B2=84=ED=8A=BC=20=EB=A7=88?=
 =?UTF-8?q?=EC=A7=84=EA=B0=92=20=EB=B0=98=EC=9D=91=ED=98=95=20=EC=B2=98?=
 =?UTF-8?q?=EB=A6=AC=20=EB=B0=8F=20=ED=9A=8C=EC=9B=90=EA=B0=80=EC=9E=85=20?=
 =?UTF-8?q?=EB=B9=84=EB=B0=80=EB=B2=88=ED=98=B8=20=EB=A7=A4=EC=B9=AD=20?=
 =?UTF-8?q?=EC=98=A4=EB=A5=98=20=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/find/FindEmail.tsx                |  4 ++--
 src/components/find/FindPassword.tsx             |  8 ++++----
 src/components/signup/Step1.tsx                  |  4 ++--
 src/components/signup/Step3.tsx                  | 16 ++++++++++++++--
 src/components/signup/Step4.tsx                  |  2 +-
 .../signup/modal/PhoneVerification.tsx           |  4 ++--
 6 files changed, 25 insertions(+), 13 deletions(-)

diff --git a/src/components/find/FindEmail.tsx b/src/components/find/FindEmail.tsx
index e9c558d..ef6f1cd 100644
--- 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
index 949fb88..3a9662a 100644
--- 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
index cbfc9c9..003201b 100644
--- 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
index 3f37fb9..9d50f05 100644
--- 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
index a0f9702..401a928 100644
--- 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
index b7794b9..5370321 100644
--- 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>
         )}

From 5af6bbc59c27af65dacd7a436947b607febf71c0 Mon Sep 17 00:00:00 2001
From: jiohjung98 <ckaquz98@naver.com>
Date: Sun, 22 Sep 2024 03:30:10 +0900
Subject: [PATCH 2/2] =?UTF-8?q?fix:=20=EB=A7=88=EC=9D=B4=ED=8E=98=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=80=20=EB=AA=A8=EB=B0=94=EC=9D=BC=20=EB=B0=98=EC=9D=91?=
 =?UTF-8?q?=ED=98=95=20=EC=9E=91=EC=97=85=20=EB=B0=8F=20=EC=9D=B8=EC=A6=9D?=
 =?UTF-8?q?=20=EB=B2=84=ED=8A=BC=EB=93=A4=20flex-shrink-0=20=EC=86=8D?=
 =?UTF-8?q?=EC=84=B1=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/mypage/edit/changepassword/page.tsx   |  4 ++--
 src/app/mypage/edit/changephone/page.tsx      | 22 +++++++++++--------
 src/components/mypage/CertifyPassword.tsx     |  8 ++++---
 src/components/mypage/NewPassword.tsx         | 10 ++++++---
 src/components/signup/Step4.tsx               |  2 +-
 .../signup/modal/PhoneVerification.tsx        | 10 ++++-----
 6 files changed, 33 insertions(+), 23 deletions(-)

diff --git a/src/app/mypage/edit/changepassword/page.tsx b/src/app/mypage/edit/changepassword/page.tsx
index ca41492..a4b16e2 100644
--- a/src/app/mypage/edit/changepassword/page.tsx
+++ b/src/app/mypage/edit/changepassword/page.tsx
@@ -10,7 +10,7 @@ const ChangePasswordPage = () => {
   const [step, setStep] = useState(0);
   return (
     <div>
-      <div className="px-5 mt-5 w-full mx-auto sm:max-w-[640px] sm:mt-10 sm:px-0">
+      <div className="w-[90%] mt-5 w-full mx-auto sm:max-w-[640px] sm:mt-10 sm:px-0">
         {step === 2 ? null : (
           <div onClick={() => router.back()} className="py-[14px]">
             <img
@@ -21,7 +21,7 @@ const ChangePasswordPage = () => {
           </div>
         )}
       </div>
-      <section className="max-w-[340px] w-full mx-auto mt-[76px]">
+      <section className="w-[90%] max-w-[340px] w-full mx-auto mt-0 sm:mt-[76px]">
         {step === 0 ? <CertifyPassword setStep={setStep} /> : null}
         {step === 1 ? <NewPassword setStep={setStep} /> : null}
         {step === 2 ? <PasswordChangeSuccess /> : null}
diff --git a/src/app/mypage/edit/changephone/page.tsx b/src/app/mypage/edit/changephone/page.tsx
index ac1d90c..6ad6666 100644
--- a/src/app/mypage/edit/changephone/page.tsx
+++ b/src/app/mypage/edit/changephone/page.tsx
@@ -132,12 +132,14 @@ const ChangePhonePage = () => {
 
   return (
     <div>
-      <div className="px-5 mt-5 w-full mx-auto sm:max-w-[640px] sm:mt-10 sm:px-0">
+      <div className="w-[90%] mt-5 w-full mx-auto sm:max-w-[640px] sm:mt-10 sm:px-0">
         <div onClick={() => router.back()} className="py-[14px]">
           <img src="/images/mypage/left_password.svg" alt="" className="cursor-pointer" />
         </div>
       </div>
-      <section className="max-w-[340px] w-full mx-auto mt-[76px]">
+      <section className="w-[90%] max-w-[340px] w-full mx-auto mt-0 sm:mt-[76px]">
+      <div className='flex flex-col min-h-[calc(100dvh-220px)] justify-between sm:justify-center sm:min-h-0'>
+        <div>
         <div className="text-heading3">
           <span className="text-normal">휴대폰 번호</span>를 인증해주세요
         </div>
@@ -157,7 +159,7 @@ const ChangePhonePage = () => {
               isRequest ? (
                 <div
                   onClick={handleResending}
-                  className={`ml-[6px] px-4 py-[14px] bg-black rounded-[12px] text-white text-title2
+                  className={`ml-[6px] px-4 py-[14px] bg-black rounded-[12px] text-white text-title2 flex-shrink-0
                   ${isComplete ? 'cursor-default' : 'cursor-pointer'}
                   `}>
                   재전송
@@ -165,12 +167,12 @@ const ChangePhonePage = () => {
               ) : (
                 <div
                   onClick={handleRequest}
-                  className="ml-[6px] cursor-pointer px-4 py-[14px] bg-black rounded-[12px] text-white text-title2">
+                  className="ml-[6px] cursor-pointer px-4 py-[14px] bg-black rounded-[12px] text-white text-title2 flex-shrink-0">
                   인증 요청
                 </div>
               )
             ) : (
-              <div className="ml-[6px] px-4 py-[14px] bg-gray100 rounded-[12px] text-gray400 text-title2">
+              <div className="ml-[6px] px-4 py-[14px] bg-gray100 rounded-[12px] text-gray400 text-title2 flex-shrink-0">
                 인증 요청
               </div>
             )}
@@ -196,13 +198,13 @@ const ChangePhonePage = () => {
             {isRequest && validNumberOk ? (
               <div
                 onClick={handleCertify}
-                className={` ml-[8px] px-4 py-[14px] bg-black rounded-[12px] text-white text-title2
+                className={` ml-[8px] px-4 py-[14px] bg-black rounded-[12px] text-white text-title2 flex-shrink-0 
                 ${isComplete ? 'cursor-default' : 'cursor-pointer'}
                 `}>
                 인증 완료
               </div>
             ) : (
-              <div className="ml-[8px] px-4 py-[14px] bg-gray100 rounded-[12px] text-gray400 text-title2">
+              <div className="ml-[8px] px-4 py-[14px] bg-gray100 rounded-[12px] text-gray400 text-title2 flex-shrink-0">
                 인증 완료
               </div>
             )}
@@ -227,17 +229,19 @@ const ChangePhonePage = () => {
             </div>
           )}
         </div>
+        </div>
         {isComplete ? (
           <div
             onClick={handleComplete}
-            className="cursor-pointer flex items-center justify-center px-5 py-[14px] w-full rounded-[12px] bg-gradient2 text-heading4 text-white">
+            className="cursor-pointer flex items-center justify-center px-5 py-[14px] w-full rounded-[12px] bg-gradient2 text-heading4 text-white mt-0 sm:mt-[40px]">
             변경 완료
           </div>
         ) : (
-          <div className="flex items-center justify-center px-5 py-[14px] w-full rounded-[12px] bg-gray100 text-heading4 text-gray400">
+          <div className="flex items-center justify-center px-5 py-[14px] w-full rounded-[12px] bg-gray100 text-heading4 text-gray400 mt-0 sm:mt-[40px]">
             변경 완료
           </div>
         )}
+        </div>
       </section>
     </div>
   );
diff --git a/src/components/mypage/CertifyPassword.tsx b/src/components/mypage/CertifyPassword.tsx
index ef5c1bb..66e148e 100644
--- a/src/components/mypage/CertifyPassword.tsx
+++ b/src/components/mypage/CertifyPassword.tsx
@@ -47,7 +47,8 @@ const CertifyPassword = ({ setStep }: CertifyPasswordType) => {
   };
 
   return (
-    <div>
+    <div className='flex flex-col min-h-[calc(100dvh-220px)] justify-between sm:justify-center sm:min-h-0'>
+      <div>
       <div className="text-heading3">
         <div>현재 사용하고 계신</div>
         <div>
@@ -64,10 +65,11 @@ const CertifyPassword = ({ setStep }: CertifyPasswordType) => {
           className="px-4 py-[14px] bg-bg text-body2 rounded-[12px] w-full outline-none"
         />
       </div>
+      </div>
       {isValid ? (
         <button
           onClick={handleCheckPassword} 
-          className={`cursor-pointer bg-gradient2 flex justify-center items-center text-white rounded-[12px] text-title2 px-5 py-[14px] w-full ${
+          className={`cursor-pointer bg-gradient2 flex justify-center items-center text-white rounded-[12px] text-title2 px-5 py-[14px] w-full mt-0 sm:mt-[50px] ${
             isSubmitting ? 'opacity-50 cursor-not-allowed' : ''
           }`}
           disabled={isSubmitting}
@@ -75,7 +77,7 @@ const CertifyPassword = ({ setStep }: CertifyPasswordType) => {
           다음으로
         </button>
       ) : (
-        <button className="flex justify-center items-center bg-gray100 text-gray400 rounded-[12px] text-title2 px-5 py-[14px] w-full">
+        <button className="flex justify-center items-center bg-gray100 text-gray400 rounded-[12px] text-title2 px-5 py-[14px] w-full mt-0 sm:mt-[50px] ">
           다음으로
         </button>
       )}
diff --git a/src/components/mypage/NewPassword.tsx b/src/components/mypage/NewPassword.tsx
index 67ef2f2..67ebfe4 100644
--- a/src/components/mypage/NewPassword.tsx
+++ b/src/components/mypage/NewPassword.tsx
@@ -56,7 +56,8 @@ const NewPassword = ({ setStep }: NewPasswordType) => {
   };
 
   return (
-    <div>
+    <div className='flex flex-col min-h-[calc(100dvh-220px)] justify-between sm:justify-center sm:min-h-0'>
+      <div>
       <div className="text-heading3">
         <div>비밀번호를</div>
         <div>
@@ -95,15 +96,18 @@ const NewPassword = ({ setStep }: NewPasswordType) => {
           ${isSame && 'outline-success'}
           `}
         />
+        <div className='h-[14.5px]'>
         {isSame ? (
           <div className="text-caption3 text-success ml-2">비밀번호가 일치합니다.</div>
         ) : null}
+        </div>
+      </div>
       </div>
       {/* Todo : 완료 버튼 누르면, 비밀번호 변경 요청 Api 실행, 성공 시 onSuccess setStep(2) 후 로그아웃, 실패할시 그냥 메인페이지로 이동 */}
       {isSame ? (
         <div
           onClick={handleChangePassword}
-          className={`cursor-pointer bg-gradient2 flex justify-center items-center text-white rounded-[12px] text-title2 px-5 py-[14px] w-full ${
+          className={`cursor-pointer bg-gradient2 flex justify-center items-center text-white rounded-[12px] text-title2 px-5 py-[14px] w-full mt-0 sm:mt-[40px] ${
             isSubmitting ? 'opacity-50 cursor-not-allowed' : ''
           }`}
           // API 호출 중일 때 클릭 비활성화
@@ -111,7 +115,7 @@ const NewPassword = ({ setStep }: NewPasswordType) => {
           변경 완료
         </div>
       ) : (
-        <div className="flex justify-center items-center bg-gray100 text-gray400 rounded-[12px] text-title2 px-5 py-[14px] w-full">
+        <div className="flex justify-center items-center bg-gray100 text-gray400 rounded-[12px] text-title2 px-5 py-[14px] w-full mt-0 sm:mt-[40px]">
           변경 완료
         </div>
       )}
diff --git a/src/components/signup/Step4.tsx b/src/components/signup/Step4.tsx
index 401a928..991114a 100644
--- a/src/components/signup/Step4.tsx
+++ b/src/components/signup/Step4.tsx
@@ -135,7 +135,7 @@ const Step4: React.FC<StepProps> = ({ onNext, onUpdate }) => {
             />
             <div
               onClick={checkNickname}
-              className={`ml-[6px] flex-shrink-0 px-4 py-[14px] bg-black rounded-[12px] text-white text-title2 cursor-pointer`}
+              className={`ml-[6px] flex-shrink-0 px-4 py-[14px] bg-black rounded-[12px] text-white text-title2 cursor-pointer flex-shrink-0`}
             >
               중복확인
             </div>
diff --git a/src/components/signup/modal/PhoneVerification.tsx b/src/components/signup/modal/PhoneVerification.tsx
index 5370321..be0e787 100644
--- a/src/components/signup/modal/PhoneVerification.tsx
+++ b/src/components/signup/modal/PhoneVerification.tsx
@@ -172,7 +172,7 @@ const PhoneVerification: React.FC<PhoneVerificationProps> = ({ onNext, onPhoneNu
               isRequest ? (
                 <div
                   onClick={handleResending}
-                  className={`ml-[6px] flex-shrink-0 px-4 py-[14px] bg-black rounded-[12px] text-white text-title2
+                  className={`ml-[6px] flex-shrink-0 px-4 py-[14px] bg-black rounded-[12px] text-white text-title2 flex-shrink-0 
                   ${isComplete ? 'cursor-default' : 'cursor-pointer'}
                   `}
                 >
@@ -181,13 +181,13 @@ const PhoneVerification: React.FC<PhoneVerificationProps> = ({ onNext, onPhoneNu
               ) : (
                 <div
                   onClick={handleRequest}
-                  className="ml-[6px] flex-shrink-0 cursor-pointer px-4 py-[14px] bg-black rounded-[12px] text-white text-title2"
+                  className="ml-[6px] flex-shrink-0 cursor-pointer px-4 py-[14px] bg-black rounded-[12px] text-white text-title2 flex-shrink-0"
                 >
                   인증 요청
                 </div>
               )
             ) : (
-              <div className="ml-[6px] flex-shrink-0 px-4 py-[14px] bg-gray100 rounded-[12px] text-gray400 text-title2">
+              <div className="ml-[6px] flex-shrink-0 px-4 py-[14px] bg-gray100 rounded-[12px] text-gray400 text-title2 flex-shrink-0">
                 인증 요청
               </div>
             )}
@@ -214,14 +214,14 @@ const PhoneVerification: React.FC<PhoneVerificationProps> = ({ onNext, onPhoneNu
             {isRequest && validNumberOk ? (
               <div
                 onClick={handleCertify}
-                className={`ml-[8px] flex-shrink-0 px-4 py-[14px] bg-black rounded-[12px] text-white text-title2
+                className={`ml-[8px] flex-shrink-0 px-4 py-[14px] bg-black rounded-[12px] text-white text-title2 flex-shrink-0 
                 ${isComplete ? 'cursor-default' : 'cursor-pointer'}
                 `}
               >
                 인증 완료
               </div>
             ) : (
-              <div className="ml-[8px] flex-shrink-0 px-4 py-[14px] bg-gray100 rounded-[12px] text-gray400 text-title2">
+              <div className="ml-[8px] flex-shrink-0 px-4 py-[14px] bg-gray100 rounded-[12px] text-gray400 text-title2 flex-shrink-0">
                 인증 완료
               </div>
             )}