From 02e8c60bf4441cbf5e7f66529427ada6a0f65444 Mon Sep 17 00:00:00 2001
From: chaeseungyun <101871802+chaeseungyun@users.noreply.github.com>
Date: Wed, 5 Jun 2024 16:23:42 +0900
Subject: [PATCH] =?UTF-8?q?[=EB=B9=84=EC=A6=88=EB=8B=88=EC=8A=A4]=20step?=
 =?UTF-8?q?=20=EC=83=81=ED=83=9C=EC=97=90=20=EB=94=B0=EB=9D=BC=20=EB=B2=84?=
 =?UTF-8?q?=ED=8A=BC=20=EC=83=89=EC=83=81=20=EB=B3=80=EA=B2=BD=20(#345)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat:  step 상태에 따라 button 색상 변경

* refactor: 이전 페이지로 돌아갈 때 isStepComplete 복구

* refactor: className 변경
---
 src/page/Auth/components/Common/index.module.scss | 2 +-
 src/page/Auth/components/Common/index.tsx         | 6 +++---
 src/page/Auth/hook/useStep.ts                     | 6 ++++--
 3 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/page/Auth/components/Common/index.module.scss b/src/page/Auth/components/Common/index.module.scss
index e35cc61c..2e0ee9ab 100644
--- a/src/page/Auth/components/Common/index.module.scss
+++ b/src/page/Auth/components/Common/index.module.scss
@@ -78,7 +78,7 @@
   border-radius: 4px;
   font-weight: 600;
 
-  &__active {
+  &--active {
      width: 100%;
     background-color: #175C8E;
     height: 50px;
diff --git a/src/page/Auth/components/Common/index.tsx b/src/page/Auth/components/Common/index.tsx
index a56de627..074825af 100644
--- a/src/page/Auth/components/Common/index.tsx
+++ b/src/page/Auth/components/Common/index.tsx
@@ -38,7 +38,7 @@ export default function CommonLayout() {
 
   const steps = useStep(isFindPassword ? 'find' : 'register');
   const {
-    nextStep, previousStep, currentStep, index, totalStep, isComplete,
+    nextStep, previousStep, currentStep, index, totalStep, isComplete, isStepComplete,
   } = steps;
 
   // eslint-disable-next-line
@@ -92,10 +92,10 @@ export default function CommonLayout() {
           <button
             type="button"
             onClick={stepCheck}
-            disabled={!!errors.root}
+            disabled={!isStepComplete}
             className={
               cn({
-                [styles.button__active]: !!errors.root,
+                [styles['button--active']]: isStepComplete || isComplete,
                 [styles.button]: true,
               })
             }
diff --git a/src/page/Auth/hook/useStep.ts b/src/page/Auth/hook/useStep.ts
index 83c8fc57..870a081d 100644
--- a/src/page/Auth/hook/useStep.ts
+++ b/src/page/Auth/hook/useStep.ts
@@ -26,8 +26,10 @@ export const useStep = (type: Type) => {
   };
 
   const previousStep = () => {
-    if (index > 0) setIndex((prev) => prev - 1);
-    else navigate(-1);
+    if (index > 0) {
+      setIndex((prev) => prev - 1);
+      setIsStepComplete(true); // step을 통과한 사람만 뒤로 갈 수 있음
+    } else navigate(-1);
   };
 
   const currentStep = target[index];