듀얼 셀럭터

ButtonTab에서 클릭된 버튼에 따라 초기화, 모든 아이템 이동, 선택된 아이템만 이동하도록 구현했다.

• 초기화 클릭 시 availableOptions에 emojiMenus를 넣어주고 selectedOptions에 빈 배열을 넣어 초기화시켜줬다.
• 모든 아이템 이동을 클릭 시 spread 연산자를 통해 availableOptions와 selectedOptions 배열을 병합해 줬다.

 moveAll(state, action) {
      if (action.payload === 'left') { // 모든 아이템 왼쪽으로 이동
        state.availableOptions = [
          ...state.availableOptions,
          ...state.selectedOptions,
        ];
        state.selectedOptions = [];
      } else if (action.payload === 'right') { // 모든 아이템 오른쪽으로 이동
        state.selectedOptions = [
          ...state.selectedOptions,
          ...state.availableOptions,
        ];
        state.availableOptions = [];
      } else if (action.payload === 'reset') { // 초기화
        state.availableOptions = emojiMenus;
        state.selectedOptions = [];
      }
    },

 

• 선택된 아이템을 클릭 시 availableSelection 또는 selectedSelection에 선택된 아이템들의 index값이 저장된다. 이 index값을 통해 선택된 아이템들의 배열을 만들고 이동하고자 하는 위치의 배열과 병합해 줬다. 기존의 데이터에서는 선택된 아이템들을 제거해 줘야 하기 때문에 아래와 같이 구현했다.

 moveSelected(state, action) {
      if (action.payload === 'left') {
        const newData = state.selectedSelection.map(
          (el) => state.selectedOptions.slice(el, el + 1)[0]
        );
        state.availableOptions = [...state.availableOptions, ...newData];

        const filteredData = Object.keys(state.selectedOptions)
          .filter((key) => !state.selectedSelection.includes(Number(key)))
          .reduce((obj, key) => {
            obj[key] = state.selectedOptions[key];
            return obj;
          }, [])
          .filter((el) => {
            return el != null;
          });

        state.selectedOptions = filteredData;
        state.selectedSelection = [];
      } else if (action.payload === 'right') {
        ...
      }
    },