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

machine.js

const IDLE = '초기';
const INPUT_FOCUS = '인풋 포커스';
const SEARCH_PENDING = '검색 로딩';
const SEARCH_NOTHING_CAN_CREATE = '검색결과 없음, 생성가능';
const SEARCH_NOTHING_CANNOT_CREATE = '검색결과 없음, 생성불가';
const SEARCH_RESULT_CAN_CREATE = '검색결과 있음, 생성 가능';
const SEARCH_RESULT_CANNOT_CREATE = '검색결과 있음, 생성 가능';
const SEARCH_FAILURE = '검색실패'

// Events
const FOCUS = '포커스';
const SEARCH = '검색';
const BLUR = '블러';
const ENTER = '엔터';
const ESCAPE = 'ESC';
const ARROW_UP = '위쪽 화살표';
const ARROW_DOWN = '아래쪽 화살표';
const SELECT_ITEM = '항목 선택';
const CREATE_ITEM = '항목 생성';

// Guards
const isResultCanCreate = () => {};
const isResultCannotCreate = () => {};
const isNothingCanCreate = () => {};
const isNothingCannotCreate = () => {}

const inputChangeService = () => {}


const searchBoxMachine = Machine(
    {
      id: 'searchBoxMachine',
      initial: IDLE,
      context: {},
      states: {
        [IDLE]: {
          on: {
            [FOCUS]: INPUT_FOCUS,
          },
        },
        [INPUT_FOCUS]: {
          on: {
            [SEARCH]: {
              target: SEARCH_PENDING
            },
          },
        },
        [SEARCH_PENDING]: {
          invoke: {
            id: 'fetchSearchResult',
            src: 'fetchSearchResult',
            onDone: [
              {
                target: SEARCH_RESULT_CAN_CREATE,
                cond: isResultCanCreate
              },
              {
                target: SEARCH_RESULT_CANNOT_CREATE,
                cond: isResultCannotCreate
              },
              {
                target: SEARCH_NOTHING_CAN_CREATE,
                cond: isNothingCanCreate
              },
              {
                target: SEARCH_NOTHING_CANNOT_CREATE,
                cond: isNothingCannotCreate
              },
            ],
          },
          on: {
            [SEARCH]: {
              target: INPUT_FOCUS,
            },
          },
        },
        [SEARCH_RESULT_CAN_CREATE]: {},
        [SEARCH_RESULT_CANNOT_CREATE]: {},
        [SEARCH_NOTHING_CAN_CREATE]: {},
        [SEARCH_NOTHING_CANNOT_CREATE]: {},
      },
    }
  );