design : Funnel 방식의 단계 이동 버튼 스타일 변경

Author: layout-SY

src/pages/user/apply/ApplyStep.styled.ts

@@ -1,5 +1,4 @@
 import styled from 'styled-components';
-import Button from '../../../components/common/Button/Button';
 
 export const Container = styled.div`
   max-width: 100%;
@@ -46,9 +45,10 @@ export const StepContainer = styled.div`
 
 export const StepButton = styled.div`
   display: flex;
-  justify-content: left;
+  justify-content: center;
   padding-top: 20px;
   gap: 20px;
+  width: 100%;
 `;
 
 export const StepLabel = styled.div`
@@ -66,9 +66,3 @@ export const StepWrapper = styled.div`
   display: flex;
   justify-content: space-between;
 `;
-
-export const SubmitButton = styled(Button)`
-  padding: 15px;
-  margin: 0 auto;
-  cursor: pointer;
-`;

src/pages/user/apply/ApplyStep.tsx

@@ -114,7 +114,13 @@ const Apply = () => {
     next,
   } = useMultiStepForm(stepList);
 
-  const handleNextStep = async () => {
+  const handlePrevStep = (e: React.MouseEvent) => {
+    e.preventDefault();
+    prev();
+  };
+
+  const handleNextStep = async (e: React.MouseEvent) => {
+    e.preventDefault();
     const fieldsToValidate = stepFields[currentStepIndex];
     const isValid = await trigger(fieldsToValidate);
     if (isValid) {
@@ -165,37 +171,24 @@ const Apply = () => {
 
         <S.StepButton>
           <Button
-            size={'small'}
+            size={'primary'}
             schema={'primary'}
             radius={'primary'}
             type='button'
-            onClick={prev}
+            onClick={handlePrevStep}
           >
             이전
           </Button>
-          {currentStepIndex !== stepList.length - 1 && (
-            <Button
-              size={'small'}
-              schema={'primary'}
-              radius={'primary'}
-              type='button'
-              onClick={handleNextStep}
-            >
-              다음
-            </Button>
-          )}
-        </S.StepButton>
-
-        {isLastStep && (
-          <S.SubmitButton
-            size='primary'
-            schema='primary'
-            radius='primary'
-            type='submit'
+          <Button
+            size={'primary'}
+            schema={'primary'}
+            radius={'primary'}
+            type={isLastStep ? 'submit' : 'button'}
+            onClick={isLastStep ? undefined : handleNextStep}
           >
-            지원 완료하기
-          </S.SubmitButton>
-        )}
+            {isLastStep ? '지원하기' : '다음'}
+          </Button>
+        </S.StepButton>
       </form>
 
       <Modal