TypeScript로 Select 버튼 기능 구현-3

지구·2022년 3월 31일
0
post-thumbnail

지난 번 글에서 recoil state별로 용도를 정리했고, 이번 글에서 select버튼 기능별로 구현한 방법들을 정리하고자 한다.

1. SortingBox에서 map()으로 정렬버튼 렌더링하기


sortingCriteria 이 배열을 가져와서 map으로 돌려서 5개의 버튼을 만든다.

2. 각 버튼의 하위 드랍다운 리스트 렌더링

각각 다른 리스트 아이템을 갖고 있다. '긴 순/ 짧은 순', '높은 순/ 낮은 순'...

SortingBtn 드랍다운 리스트 부분

  • isOpen[criteria] : criteria는 prop으로 받아온 정렬 기준이다.
    isOpen객체의 해당 criteria key(ex. 총 소요시간, 가격, 개설일, ...)에 해당하는 value가 true일 경우 아래 를 보여준다.
  • dropListName의 객체에는 각 정렬버튼 별로 드랍리스트에 들어갈 정렬기준이 배열로 저장되어있다. 해당 부분을 map 반복문으로 돌려서 리스트를 완성한다.
  • onClick 속성 : 드랍리스트에 있는 정렬 기준을 선택했을 때, 새로 정렬된 강의 데이터들을 받아와야하므로 onClickSortingItem함수를 연결했다.
  • tabIndex, onKeyPress:키보드접근성을 위해 tab버튼으로 해당 버튼들과 아래 드랍리스트까지 접근가능하도록 하였고, enter키를 눌렀을 때 마찬가지로 정렬된 데이터들을 받아오도록 하였다.

global 속성인 tabIndex사용하여 키보드 접근성 높이기!

select태그를 사용한다면 키보드로 접근이 가능해서 사실 select태그를 커스텀하는 삽질을 경험했다...^^ 하지만 css커스텀의 한계가있다.

그래서 결국 포기하고 기존의 button + li태그로 가게 되었다.
그러다가 html 문서를 보면서 내가 몰랐던 태그들과 global attribute를 공부하다가 'tabIndex'라는 속성을 알게되었다!!!
어떤 태그든 tabIndex속성을 주어서 tab키로 접근 가능 여부, 순서를 설정할 수 있다!

  • tabIndex에 -1을 줄 경우 : 기존에 tab으로 focus가 가는 요소에 focus가 되지 않도록 설정한다.
  • tabIndex에 0을 줄 경우 : tab으로 focus가 가지 않는 요소에 focus가 되도록 설정한다.
  • tabIndex에 양수 : 숫자가 높은 순으로 포커스 되는 순서를 설정할 수 있다.

정렬기준 선택했을 때 : handleClickSortingItem


파라미터로 받아오는 변수명이 참 헷갈리는 것 같다..ㅎㅎ 수정이 시급하다.

  • value : 정렬 종류, item: 정렬 기준(드랍 다운에 들어가는 친구들)
  • 정렬 기준을 선택했을 때, 현재 선택된 기준을 제외하고는 빈문자열로 초기화한다.
  • isSelected도 선택된 기준을 제외하고는 false로 초기화한다.
  • 사용자가 선택해야하는 대분류, 소분류(category, skill)이 선택된 상태라면, item(선택한 정렬기준)을 가져와서 강의 데이터를 정렬해서 받아오는 api 함수를 호출한다.
  • 이 때, ordering은 enum을 사용하여 실제 렌더링 되는 한글 문자열에서 서버에 요청할 때 필요한 영문자열로 변환하였다.
  • 문제는 "긴 순" "긴 순서" 이런식으로 같은 문자열을 사용할 수 없다는 점이다.
    enum을 사용했을 때처럼 간편하게 다른 문자열로 치환하면서도 중복된 값을 사용할 수 있는 방법은 없을까.... ?


이어서 - isSelected recoilvalue를 사용해로 선택된 정렬버튼에 효과주기 (글자 색상, border 등...), - 선택한 정렬기준을 버튼 안에 쏙! 넣기 (생각보다 번거로웠지만 만들고나니 예뻐서 뿌듯했던) 에 대해서 작성해보겠습니다..🙂 제가 작성한 코드는 정답도 아니고 많이 헤매면서 작성한 것이라 피드백은 언제나 환영입니다!
profile
디자인과 기획이 재미있는 프론트엔드 개발자입니다. 블로그 이사 준비중. . .

0개의 댓글