[비즈니스] step 상태에 따라 버튼 색상 변경 (#345)

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

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

* refactor: className 변경

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;

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,
               })
             }

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];