useStep

multi-step process의 step을 관리하고 추적해주는 커스텀 훅입니다.

배열의 인덱스와 호환될 수 있게 0번 step부터 시작합니다.

Code

🔗 실제 구현 코드 확인

Interface

typescript

interface UseStepProps {
  maxStep: number;
  initialStep?: number; // default: 0
  infinite?: boolean; // default: false
}

type StepAction = ({ prev, next }: {
  prev: number;
  next: number;
}) => void;

typescript

const useStep: ({ maxStep, initialStep, infinite }: UseStepProps) => {
  currentStep: number; // 현재 Step
  hasNextStep: boolean; // 다음 Step 이동 가능 여부
  hasPrevStep: boolean; // 이전 Step 이동 가능 여부
  setStep: (
    step: SetStateAction<number>,
    action?: StepAction
  ) => void; // 특정 Step 이동 함수
  goToNextStep: (action?: StepAction) => void; // 다음 Step 이동 함수
  goToPrevStep: (action?: StepAction) => void; // 이전 Step 이동 함수
  resetStep: (action?: StepAction) => void; // initialValue 이동 함수
};

Usage

typescript

import { useStep } from '@modern-kit/react';

export const Example = () => {
  const [infinite, setInfinite] = useState(true);
  const {
    currentStep,
    hasNextStep,
    hasPrevStep,
    setStep,
    goToNextStep,
    goToPrevStep,
    resetStep,
  } = useStep({ maxStep: 3, infinite: infinite });

  const handleGoToNextStep = () => {
    goToNextStep(({ prev, next }) => {
      console.log(`${prev}에서 ${next}로 이동`);
    });
  };

  const handleGoToPrevStep = () => {
    goToPrevStep(({ prev, next }) => {
      console.log(`${prev}에서 ${next}로 이동`);
    });
  };

  const handleSetStep = () => {
    setStep(2, ({ prev, next }) => {
      console.log(`${prev}에서 ${next}로 이동`);
    });
  };

  const handleResetStep = () => {
    resetStep(({ prev, next }) => {
      console.log(`${prev}에서 ${next}로 이동`);
    });
  };

  const boxStyle = {
    width: '300px',
    height: '120px',
    fontSize: '21px',
  };

  return (
    <div>
      <div>
        <button onClick={handleGoToPrevStep}>이전 스탭</button>
        <button onClick={handleGoToNextStep}>다음 스탭</button>
        <button onClick={handleSetStep}>2스탭으로 이동</button>
        <button onClick={handleResetStep}>초기화 스탭</button>
        <button onClick={() => setInfinite(!infinite)}>infinite 토글</button>
      </div>
      <div>
        <p>currentStep: {currentStep}</p>
        <p>hasNextStep: {`${hasNextStep}`}</p>
        <p>hasPrevStep: {`${hasPrevStep}`}</p>
        <p>infinite: {`${infinite}`}</p>
      </div>
      <div>
        {currentStep === 0 && (
          <div style={{ ...boxStyle, backgroundColor: 'red' }}>
            0번 Step Box
          </div>
        )}
        {currentStep === 1 && (
          <div style={{ ...boxStyle, backgroundColor: 'green' }}>
            1번 Step Box
          </div>
        )}
        {currentStep === 2 && (
          <div style={{ ...boxStyle, backgroundColor: 'blue' }}>
            2번 Step Box
          </div>
        )}
        {currentStep === 3 && (
          <div style={{ ...boxStyle, backgroundColor: 'yellow' }}>
            3번 Step Box
          </div>
        )}
      </div>
    </div>
  );
};

Example

currentStep: 0

hasNextStep: true

hasPrevStep: false

infinite: true

0번 Step Box