[💌 FEATURE REQUEST] Carousel 컴포넌트를 구현한다

[JengYoung]

멈춰! 🖐🏻 잠시 체크 들어갑니다~

• [X] 다음 페이지에서 중복되지 않음을 확인했어요. 🙆🏻
• [X] 다른 분들께서 허락해주신다면, 제가 구현해보고 싶어요! 🙆🏻‍♀️

배경 및 설명

37 를 구현하기 위해 선행적으로 해당 이슈를 먼저 해결한다.

기대결과

• [ ] 캐러셀은 일정 시간이 지나면 움직이는 autoPlay가 지원되어야 한다.
• [ ] 캐러셀은 계속해서 왼쪽에서 오른쪽으로, 오른쪽에서 왼쪽으로 움직일 수 있어야 한다.
• [ ] 일정 시간이 될 때 게이지를 볼 수 있도록 progressbar을 지원한다.
• [ ]

대안 제시

progressBar은 사실 굉장히 애매하다. 왜냐하면 JS로 컨트롤하기에는 시간을 일일이 세야 한다는 점이 상당히 불만족스럽다.

이는 동기적으로 할 경우 모든 작업을 멈추게 할 것이므로 비동기로 구현해야 하는데, 계속해서 타이머로 체크하거나, 애니메이션 프레임을 적용할 시 태스크 큐를 포화상태로 만들 것이기 때문이다.

따라서 이를 CSS로 애니메이션화시켜서 구현하는 방법을 택할 듯하다. 이는 overflow + transform 조합을 통해 레이아웃 부하를 최소화할 수 있을 것 같다.

참고자료

No response