carousel ui를 변경한다. + 홈페이지의 접근성을 향상한다.

[hwangstar156]

close #657 close #785

캐러셀 변경

기존 캐러셀

데스크탑 ui

모바일 ui

scroll기반 캐러셀

캐러셀을 구현하는것으로 transform으로 이동하기, scroll로 이동하기 크게 2개가 존재하는데 이번엔 scroll로 이동하기를 선택하였습니다.

scroll-snap-type: x madatory, scroll-snap-align: center 옵션을 동시에 설정하여 스크롤이 중간이상 넘어가게 된다면 모두 중앙으로 정렬되도록 하였습니다.

스크롤을 이동시킬때는 scrollTo, scrollBy를 이용하여 이동시켰습니다.

useCarousel

useCarousel로 캐러셀을 움직이는 로직을 담았는데 처리해야되는 로직이 많아져서 밑에 추가 설명 작성하겠습니다!

resize될때마다 변하는 크기 관리

현재 반응형 캐러셀을 이용하고 있기에 resize가 될때마다 다시 이동해야할 스크롤 너비를 계산하는 로직을 담았습니다.

너무 빠르게 resize를 하게될시 현재 resize된 창의 너비가 아니라 지난 창의 너비가 반영되는 문제가 있어 debounce를 걸어서 마지막 resize후 일정시간동안 resize를 하지 않으면 그때 너비를 계산하는 로직을 작성하였습니다.

브라우저에서 blur될때 setState막기

브라우저에서 화면 포커싱을 다른곳으로 가져가면 scroll은 되지않지만 setState는 되는 문제가 있었습니다. 현재 3초에 한번 currentIndex를 setState한후 state가 변하면 그것에 따라 스크롤을 움직이는데 setState는 되지만 스크롤이 움직이지 않아 active가 이상하게 발생하는 문제가 있었습니다.

window에 blue, focus 이벤트를 걸어 blur될시 setState를 막고, focus하면 다시 활성화하는 식으로 구현하였습니다.

스크롤 되는 도중에는 이동 못하도록 막기

현재 스크롤이 smooth 옵션으로 인해 부드럽게 넘어가게 되는데 스크롤이 이동하는 도중에 계속 다음버튼을 누를시 포커싱이 이상해지는 문제가 발생하였습니다.

해결방법으로 isScroll라는 state로 스크롤이 진행중일때는 다음, 이전 버튼을 눌러도 반응하지 않도록 구현하였습니다.

홈페이지 웹접근성 향상

개선전

개선후

개선 방법

키보드로만 이용할 수 있게 하기

• tabIndex = 0을 이용하여 탭으로 컴포넌트들을 이동할 수 있도록 설정하였습니다.
• useEnterToClick을 이용하여 이용한 컴포넌트 내부는 모두 엔터를 하면 클릭처리가 되도록 설정하였습니다.
• keydown 이벤트를 이용하여 esc를 누를시 드롭다운을 닫을수 있도록 설정하였습니다.
• aria role의 tablist와 tab을 사용하였습니다.

aria와 role이 맞도록 하기

• aria-pressed를 이용하는데 해당 요소가 button이 아니여서 role = “button”을 주어 해결하였습니다.

img에 alt 넣기

• 프로필 이미지의 alt에 프로필 이미지를 넣었습니다.

# 를 파운드 기호로 읽는다.

• aria-label = “해시태그” 를 이용하여 해결

링크 및 버튼에는 접근가능한 이름이 존재해야함.

현재 검색 돋보기 버튼, 이전 화살표 버튼, 다음 화살표 버튼등에 접근가능한 이름(텍스트)가 없어서 aria-label로 텍스트 부여

input과 label을 연결

• 검색바의 input에 label 연결

toLocalString으로 숫자를 붙혀서 읽을 수 있도록 설정

• 10011의 숫자같은 경우 스크린리더기가 하나하나 끊어서 읽기 때문에 10,111로 만들어서 똑바로 만단위로 읽을수 있도록 toLocaleString을 설정해주었습니다.

[liswktjs]

충돌 해결해주세요~