From 4f3593040c9d190a2258307ade2b6a7e732cd03f Mon Sep 17 00:00:00 2001
From: hojin <devbang5674@gmail.com>
Date: Thu, 13 Jun 2024 15:46:47 +0900
Subject: [PATCH] =?UTF-8?q?fix=20:=20=ED=9A=8C=EC=9B=90=EA=B0=80=EC=9E=85?=
 =?UTF-8?q?=20=EB=94=94=EC=9E=90=EC=9D=B8,=EB=A1=9C=EC=A7=81=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/sign/phase.svg                              |  3 +++
 src/components/sign/signup/EmailVerification.tsx   | 13 ++++++++++---
 .../sign/signup/PasswordVerification.tsx           | 14 ++++++++------
 3 files changed, 21 insertions(+), 9 deletions(-)
 create mode 100644 public/sign/phase.svg

diff --git a/public/sign/phase.svg b/public/sign/phase.svg
new file mode 100644
index 0000000..3b778ae
--- /dev/null
+++ b/public/sign/phase.svg
@@ -0,0 +1,3 @@
+<svg width="8" height="10" viewBox="0 0 8 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector 2374" d="M0.199219 4.99995L7.39922 0.199951V9.79995L0.199219 4.99995Z" fill="#4E32BB"/>
+</svg>
diff --git a/src/components/sign/signup/EmailVerification.tsx b/src/components/sign/signup/EmailVerification.tsx
index 9180142..d2de116 100644
--- a/src/components/sign/signup/EmailVerification.tsx
+++ b/src/components/sign/signup/EmailVerification.tsx
@@ -158,9 +158,16 @@ const EmailVerification = ({ onNext }: EmailVerification) => {
               3 단계
             </span>
           </div>
-          <div className="w-[152.40px] h-[25.20px] bg-indigo-700 flex justify-center items-center">
-            <div className="text-center text-white text-sm font-medium font-pretendard">
-              한번 더 확인이 필요해요.
+          <div className="flex items-center relative">
+            <img
+              src="/sign/phase.svg"
+              alt="image"
+              className="absolute -left-[7px] z-50"
+            />
+            <div className=" w-[152.40px] h-[25.20px] bg-space-purple flex justify-center items-center">
+              <div className="text-center text-white text-sm font-medium font-pretendard">
+                한번 더 확인이 필요해요.
+              </div>
             </div>
           </div>
         </div>
diff --git a/src/components/sign/signup/PasswordVerification.tsx b/src/components/sign/signup/PasswordVerification.tsx
index adad434..4bb6bf4 100644
--- a/src/components/sign/signup/PasswordVerification.tsx
+++ b/src/components/sign/signup/PasswordVerification.tsx
@@ -55,12 +55,12 @@ const PasswordVerification = ({ onNext, applyValues }: PasswordVerificationProps
   }, [selectedJob]);
 
   const handlePasswordChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setPasswordError(false);
     const newPassword = e.target.value;
     setPassword(newPassword);
+    checkValidPassword(newPassword);
   };
 
-  const checkValidPassword = () => {
+  const checkValidPassword = (password: string) => {
     const passwordRegex = /^(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[@#$%^&+=!])(?=\S+$).{8,16}$/;
     if (!passwordRegex.test(password)) {
       setPasswordError(true);
@@ -99,9 +99,12 @@ const PasswordVerification = ({ onNext, applyValues }: PasswordVerificationProps
             3 단계
           </span>
         </div>
-        <div className="w-[152.40px] h-[25.20px] bg-indigo-700 flex justify-center items-center">
-          <div className="text-center text-white text-sm font-medium font-pretendard">
-            거의 다 완료되었어요!
+        <div className="flex items-center relative">
+          <img src="/sign/phase.svg" alt="image" className="absolute -left-[7px] z-50" />
+          <div className=" w-[152.40px] h-[25.20px] bg-space-purple flex justify-center items-center">
+            <div className="text-center text-white text-sm font-medium font-pretendard">
+              거의 다 완료되었어요!
+            </div>
           </div>
         </div>
       </div>
@@ -199,7 +202,6 @@ const PasswordVerification = ({ onNext, applyValues }: PasswordVerificationProps
               placeholder="비밀번호를 입력해주세요."
               value={password}
               onChange={handlePasswordChange}
-              onBlur={checkValidPassword}
             />
           </div>
         </div>