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

machine.js

 const INACTIVE = '비활성화';
 const ACTIVE = '활성화';
 const DELETE_PENDING = '삭제로딩';
 const DELETE_SUCCESS = '삭제성공';
 const DELETE_FAILURE = '삭제실패';

// Events
const TYPE = '입력';
const DELETE = '삭제';

const isEqualToProductName = () => {}
const deleteProduct = () => {}
  
const deleteProductMachine = Machine(
  {
    id: 'deleteProductMachine',
    initial: INACTIVE,
    context: {
      canDelete: false,
      product: null,
    },
    states: {
      [INACTIVE]: {
        on: {
          [TYPE]: [
            {
              cond: isEqualToProductName,
              target: ACTIVE,
            },
          ],
        },
      },
      [ACTIVE]: {
        on: {
          [DELETE]: DELETE_PENDING,
          [TYPE]: INACTIVE,
        },
      },
      [DELETE_PENDING]: {
        invoke: {
          id: 'deleteProduct',
          src: 'deleteProduct',
          onDone: DELETE_SUCCESS,
          onError: DELETE_FAILURE,
        },
      },
      [DELETE_SUCCESS]: {},
      [DELETE_FAILURE]: {
        after: {
          1500: ACTIVE,
        },
      },
    },
  },
  {
    guards: {
      isEqualToProductName,
    },
  },
);