[모듈] 양방향 레인지 슬라이더(Double handle range slider) 만들고 배포하기

코드스쿼드 프로젝트에서 레인지 슬라이더를 만들어야 할 일이 생겼다.

직접 구현하고 싶었지만 react-range 라는 모듈을 사용해서 구현했고,

프로젝트를 끝내고 주말인 오늘! 직접 구현을 해보려고 책상에 앉았더니 유튜브가 2시간을 뺏어가버렸다..

 

하여튼 포스팅과 함께 레인지 슬라이더 만들기를 연습해보려 한다.

현재 시각 2021년 6월 5일 오후 3시 21분 시작!

 

이번 프로젝트에 구현해야 했던 레인지 슬라이더는 곡선이라는 점을 제외하면 아래의 이미지와 비슷한 느낌!

 

단방향이 아닌 양방향으로 구현해야 하며, 이를 어떻게 구현해야 할 지 고민만 하고 끝나버렸다. 

처음부터 목표를 배포로 잡다보니 많은 기능을 고민했고, 때문에 목표가 좌초되지 않았을까..

 

이번에 생각한 기능은 다음과 같다!

 

1. 기획

필수 기능

1. 단방향 슬라이더

모듈로 배포하는 만큼 레인지 슬라이더의 기본 기능인 단방향도 해보기로!

백그라운드로 사용할 그래프만 추가하면 끝나지 않을까? 라는 막연한 생각을 하고 있다.

 

2. 양방향 슬라이더

div를 button 형식으로 사용하며 드래그 이벤트를 x축을 기준으로만 동작하도록 구현할지, input range를 겹쳐서 구현할 지에 대한 고민이 있었다.

결과적으로는 input range를 사용하기로 했고, 이벤트를 다루기 귀찮았던 점이 가장크다. :(

    

3. 최소, 최대 영역 설정

레인지 슬라이더이므로 당연한 기능, 양방향 슬라이더에서 최소 영역과 최대 영역을 교차할 수 없도록 만드는 부분에 대해 고민이 필요한데... 하나의 영역을 이동할 때, 다른 영역의 최댓값과 최솟값을 조절하면 되지않을까?

초록색 레인지의 최댓값은 보라색의 현재값, 보라색의 최솟값은 초록색 레인지의 현재값으로!

이렇게!!

4. 막대 그래프

막대 그래프를 먼저 만들고, 곡선 그래프는 추가 기능으로 생각하고 있다!

 

5. 리액트 모듈

바닐라로 만들 생각도 했었지만... 리액트 기반의 모듈로 결정!

 

정리해본 필수적인 기능은 이렇게 다섯가지였고, 추가적으로 시도할 기능은 뭐가 있을까 하다가... 정말 필요하다 싶은 것들을 넣어보기로 했다.

---

추가 기능

1. 활성화 영역에 대한 평균 값 출력

상단의 이미지에 있는 평균 요금처럼 전체적인 평균을 보여주는 기능보다 활성화된 영역의 평균 값을 보여주는 게 더 낫지 않을까 생각하고 있으나... 그래프 자체의 평균 값을 보여주는 기능도 타당하므로 토글하는 옵션으로 해야할지 아니면 개별적인 옵션으로 구현할지 고민하고 있다.

 

2. 구간별 툴팁 텍스트

각 구간을 호버했을 때, 툴팁으로 해당 영역의 값이 나오면 어떨까?

그리고 조금 더 생각해서 구간을 클릭했을 때, 레인지 슬라이더의 영역을 해당 구간으로 바꿔준다면?

 

3. 곡선 그래프

곡선은 canvas를 사용하거나 div의 border-radius?

전자가 훨씬 수월해 보인다!

가장 고민되는 부분은 곡선 그래프를 구현했을 때, 추가 기능 2번을 어떻게 처리할지에 대한 부분?

canvas에 mouse over event를 사용해서 좌표로 찾아야하나?

곡선...

사실 이 외에도 '커스터마이징이 가능한 버튼 스타일' 이나 '구간별 색상 설정' 도 고민했으나 보류하기로!

 

 

2. 구현

저녁에 진행할 예정

다음 날이 돼버렸다.

변명하자면 시험이나 스터디 회의가 있긴했는데.. 그래도 기본적인 틀은 만들 수 있었으므로 게을렀던 걸로!

현재 시각 2021년 6월 6일 오후 3시 55분 시작!

 

먼저 배포를 위한 환경 구축을 위해 테스트 배포를 실시했다.

저번에 배포했던 방식이 기억나지 않아 전에 참고했던 포스트를 통해 따라가고 있었는데

http://tlog.tammolo.com/blog/npm-react-module/

npm 모듈 배포에서 에러가 발생했다.

무슨 에러일까?

해결 방법은 간단했다..

뭐 간단하게 해결했으니 다음 스텝을 진행!

 

배포 환경을 세팅했으니 이제 실제로 구현해볼 시간!

먼저 어떤 props를 받을지 정리했다.

 

interface ISlider {
  min: number;
  max: number;
  type: 'single' | 'double'; // 단방향, 양방향 여부
  step: number;
}

스타일 관련 설정도 props로 설정할까 했지만 일단 동작하게 만드는게 우선이라 판단해서 보류!

 

그리고 스타일 컴포넌트를 설치하고 적용하는 과정에서 또 에러가 발생했다.

일요일 완성이 목표였는데 쭉 미뤄지는 느낌 :(

 

오후 6시 56분 시험을 위해 보류 상태!

6월 7일 : 주간 프로젝트 및 면접 준비로 인해 21일부터 다시 진행할 예정.