1. UGSM_단계별 페이지 이동

궁금한 게 생겼다.
단계별 페이지 이동을 step-wizard으로 가는 게 좋은가, 그냥 링크로 가는 게 좋은가

step-wizard로 설정

순차적으로 진행되기 때문에 오류를 방지 할 수 있는 점에서 step-wizard를 선택했다.

 

 

  const [step, setStep] = useState(1);

  // 최소, 최대 값
  const updateStep = (newStep: number) => {
    setStep(Math.max(1, Math.min(newStep, 4)));
  };

  const handleNextStepChange = () => {
    updateStep(step + 1);
  };

  const handlePreviousStepChange = () => {
    updateStep(step - 1);
  };

 

최소, 최대 값 고려하여 Math.max/min을 사용했다.

1. 이전 버튼

1) step state - 1

2) 맨 처음 페이지는 이전 버튼을 보여주지 않는다.
    step이 1일 경우 null, 1보다 클 경우 <IoArrowBackOutline />

const PreviousButton: React.FC<PrevioustButtonProps> = ({ onClick, step }) => {
  return <Button onClick={onClick}>{step > 1 ? <IoArrowBackOutline /> : null} </Button>;
};

<PreviousButton onClick={handlePreviousStepChange} step={step} />

2. 변경될 내용

{step === 1 ? (
          <Nickname />
        ) : step === 2 ? (
          <Gender />
        ) : step === 3 ? (
          <PhoneNumber />
        ) : (
          <PhoneNumberAuth />
        )}

3. 다음 버튼

1) step state + 1

2) 맨 마지막 페이지는 다음 버튼이 완료 버튼이 된다.
    step이 4일 경우 텍스트는 완료로 변경

const NextButton: React.FC<NextButtonProps> = ({ onClick, step }) => {
  const MAX_STEP = 4;
  return <Button onClick={onClick}>{step === MAX_STEP ? "완료" : "다음"}</Button>;
};

<NextButton onClick={handleNextStepChange} step={step} />