Generated by XState Viz: https://xstate.js.org/viz

machine.js

 const IDLE = '기본';
 const PREVIEW_PENDING = '미리보기 로딩';
 const PREVIEW_SUCCESS = '미리보기 성공';
 const PREVIEW_FAILURE = '미리보기 실패';
 const MIGRATE_PENDING = '품목추가 로딩';
 const MIGRATE_SUCCESS = '품목추가 성공';
 const MIGRATE_FAILURE = '품목추가 실패';
const FOCUS_WITH_RESULT = '결과나오고 포커스';

 const EVENT_TYPE = '시트 아이디 입력';
 const EVENT_BLUR = '입력하고 엔터/블러';
 const EVENT_FOCUS = '입력 포커스';
 const EVENT_PREVIEW_FAIL = '미리보기 요청 실패';
 const EVENT_PREVIEW_REFETCH = '미리보기 재요청';
 const EVENT_MIGRATE = '품목추가 요청';
 const EVENT_MIGRATE_FAIL = '품목추가 요청 실패';

const initialContext = {
  sheetUrl: '',
  previewResult: {
    addedCount: 0,
    skippedCount: 0,
    failedCount: 0,
  },
};

const fetchPreview = () => {};
const migrateProducts = () => {};

const migrateMachine = Machine({
  id: 'migrateMachine',
  initial: IDLE,
  context: initialContext,
  states: {
    [IDLE]: {
      on: {
        [EVENT_BLUR]: PREVIEW_PENDING,
      },
    },
    [PREVIEW_PENDING]: {
      invoke: {
        id: 'fetchPreview',
        src: fetchPreview,
        onDone: PREVIEW_SUCCESS,
        onError: PREVIEW_FAILURE,
      },
    },
    [PREVIEW_SUCCESS]: {
      on: {
        [EVENT_FOCUS]: FOCUS_WITH_RESULT,
        [EVENT_PREVIEW_REFETCH]: PREVIEW_PENDING,
        [EVENT_MIGRATE]: MIGRATE_PENDING,
      },
    },
    [PREVIEW_FAILURE]: {
      on: {
        [EVENT_FOCUS]: IDLE,
        [EVENT_PREVIEW_REFETCH]: PREVIEW_PENDING,
      }
    },
    [MIGRATE_PENDING]: {
      invoke: {
        id: 'migrateProducts',
        src: migrateProducts,
        onDone: MIGRATE_SUCCESS,
        onError: MIGRATE_FAILURE,
      },
    },
    [FOCUS_WITH_RESULT]: {
      on: {
        [EVENT_BLUR]: PREVIEW_PENDING,
      },
    },
    [MIGRATE_SUCCESS]: {},
    [MIGRATE_FAILURE]: {
      on: {
        [EVENT_MIGRATE]: MIGRATE_PENDING
      }
    },
  },
});