Vertical Stepper

오픈소스 라이브러리 중 원하는 모양의 Vertical Stepper가 없어서 CSS 스타일을 구현하여 직접 만들어보기로 했다.

화면에 stepper 구역이 렌더될 때 애니메이션을 시작하게끔 해주었다. 단계별로 하나씩 표시가 되고, 현재시간 기준으로 active여부를 계산해 색상이 다르게 표시되도록 구현하였다.

구현방법

각 step의 동그라미 부분은 :before를 활용하고, 라인 부분은 :after를 활용하여 꾸며주었고, step마다 delay를 점점 길게 주어서 자연스럽게 애니메이션이 이어지도록 만들었다. even/odd 번째를 구분하여 스타일을 수정해서 step별로 좌우 교차로 배치 되도록 구현했다.

느낀점

직접적으로 left, right 값을 설정해줌으로써 간격을 배치했더니 even, odd 마다 px 값을 직접 계산해서 중간을 맞춰줘야 했던 점이 번거로웠다. text부분의 width에 따라 간격값도 수정해줘야 했다. 이 과정을 width 대비 간격 px값을 계산해주도록 공식을 만들어 설정해줬으면 더 좋았겠지만 그렇게 유동적인 컴포넌트일 필요는 없었어서 그냥 고정 px값으로 넣어주었다.