Implement `ScrollArea` component

[sungik-choi]

Description

• ScrollArea 컴포넌트를 구현합니다.
• Figma - Scrollbar. 디자인은 변경될 수 있습니다 (커뮤니케이션 필요)

Tasks

Preview Give feedback

1. Implement ScrollArea component
2. Apply to bezier-react components
3. Apply to ch-desk Message stream
4. Apply to ch-desk Navigation(Chat Inbox) list

Reasons for suggestion

<ScrollArea>
  {children}
</ScrollArea>

ScrollArea 는 스크롤 영역에 대한 책임을 담당하는 컴포넌트입니다.

• 스크롤바의 동작과 스타일을 커스텀하게 설정하기 위해 사용합니다.
• 디자인 시스템에 정의된 스크롤바 스타일을 가집니다.
  • (스타일 오버라이드에 대한 부분은 초기 구현에선 고려하지 않아도 괜찮을 거 같습니다)
• bezier-react 컴포넌트 중 스크롤이 가능한 영역을 가지는 컴포넌트는 내부적으로 모두 ScrollArea 컴포넌트를 사용해야 합니다.
• 어플리케이션에서 ScrollArea 만 import해서 사용할 수 있어야 합니다.

---

스크롤바의 동작과 스타일은 macOS 네이티브 스크롤바의 동작을 따릅니다.

• 스크롤바 영역을 차지하지 않습니다.
• 스크롤 가능한 영역에 마우스를 호버하거나, 스크롤 진행중인 경우에만 Thumb가 보입니다.
• Thumb를 드래그하여 스크롤을 이동할 수 있습니다.
• 키보드를 입력을 통해 이동할 수 있습니다.
• Show, Hide시 적절한 트랜지션이 있어야 합니다.
• Windows OS에서도 동일하게 동작해야합니다.

---

채널 데스크 어플리케이션의 스크롤 관련 동작이 변경되서는 안됩니다.

• 메세지 스트림에서 특정 스크롤 위치로 이동하는 동작
• 가상 리스트에서의 스크롤 동작
• 가로 스크롤 동작 (고객 연락처 테이블에서의 동작 체크)
• 인피니티 스크롤에서의 동작

Proposed solution

아래 레퍼런스를 참고하여, 위의 요구사항을 모두 충족할 수 있도록 구현합니다.

References

• Radix UI - Scroll Area
• https://github.com/RobPethick/react-custom-scrollbars-2
• https://kingsora.github.io/OverlayScrollbars/
• https://grsmto.github.io/simplebar/
• 커스텀 스크롤바 리서치 문서(Channel internal)