multi-select 기능

[luckylooky2]

기능

• template variable의 옵션 variable.multi 값에 따라 옵션 다중 선택 기능을 제공

추가한 사항

• multi-select가 적용될 경우, 선택된 값을 Chip 형태로 보여주는 <OptionSelectedChips /> 컴포넌트 추가
  • variable, picker 를 Redux store로부터 가져오는 getVariablesState 함수 재사용
  • 가져온 값은 현재 컴포넌트에서 subscribe이 되어있지 않으므로, 해당 값이 변화할 때 현재 컴포넌트는 리렌더링되지 않음 => useSelector 훅을 이용
  • chip 제거 기능에서, 상태가 불일치하는 문제 #52
• hideOptions : picker 로 선택한 option을 variable에 반영하는 콜백 함수
  • 호출이 되어도 반영하지 않는 조건을 추가
    1. variable 배열에 있는 모든 요소와 picker 배열에 있는 모든 요소가 같을 때(즉, 변경이 없을 때)
    2. picker 배열의 길이가 0일 때
       • <AppNotificationList /> notification pop-up을 이용하여 실패했음을 알린다
       • 함수 컴포넌트 : Hooks를 이용한 dispatch
       • 클래스 컴포넌트 : Redux Thunk를 이용한 dispatch
  • 나머지 경우는 이전 상태와 다르므로 variable로 picker로 선택한 값들을 반영한다
  • (수정) b. 조건을 hideOptions이 아닌 toggleOption에서 처리
    • 더 일찍 처리함으로써 자연스럽게 처리
    • picker 배열의 길이가 1 && 토글한 옵션이 picker 배열의 유일한 값과 같다면, 토글하지 않음
• multi select 대시보드에 처음 접근할 때는, 모든 옵션이 선택되도록 초기 값을 설정

문제 상황

• 옵션 값을 다중으로 선택한 상황에서 <DashboardSelect />를 통해 같은 대시보드로 접근하는 경우
  • url 링크는 초기 설정(옵션이 1개만 선택)으로 고정되어 있기 때문에, 대시보드는 1개의 옵션으로 로딩된다
  • 하지만 Redux store의 상태값은 변하지 않았으므로, 이 상태값에 기반한 <OptionSelectedChips />는 리렌더링 되지 않는다
  • 상태값과 화면의 불일치 발생
  • 고정이었던 <DashboardSelect /> url 링크를 picker.selectedValues의 모든 값을 query string에 추가하는 동적인 방법으로 수정
  • 개선) 대시보드 페이지를 벗어나면 선택했던 값이 초기화가 되는데, 이를 계속 유지할 수 있는 방법이 있는가?
• <MegaMenu />에서도 같은 문제 발생
  1. 위와 같은 방법으로 처리(커스텀 훅 적용 가능?)
  2. 대시보드 정렬 시, 다중 선택 대시보드가 첫번째 대시보드가 되지 않게 하기
  3. 진입 버튼들을 누를 때, 상태값(picker.selectedValues)을 초기화하는 로직 추가
  • 일단 2번으로 진행

CSS

• white-space: nowrap
  • chip 내부적으로 텍스트가 width에 따라 줄바꿈이 되는 현상을 해결
• flex-wrap: wrap
  • flex box가 multi-line이 되도록 하는 속성
  • chip의 개수가 많아져 부모 요소의 width를 초과하는 경우에 대한 해결 -