sendbird-uikit-react

@sendbird/uikit-react

Sendbird JavaScript SDK 기반의 React UI 키트

Sendbird Chat UIKit의 새로운 버전을 소개합니다. 버전 3은 더 세분화된 컴포넌트를 갖춘 새로운 모듈형 아키텍처를 특징으로 하여 웹 및 모바일 앱을 커스터마이즈할 수 있는 향상된 유연성을 제공합니다. 마이그레이션 가이드를 확인하세요.

설치
yarn add @sendbird/uikit-react
또는 npm을 사용하는 경우
npm i @sendbird/uikit-react

시작하기
Sendbird UI Kit React에서는 다음 컴포넌트를 내보냅니다:
(src/index.jsx 참조)

SendBirdProvider - SDK 컴포넌트용 컨텍스트 프로바이더

useSendbirdStateContext - SendBirdProvider 컨텍스트에 접근하기 위한 훅

sendBirdSelectors - useSendbirdStateContext와 함께 사용할 수 있는 유용한 셀렉터 모음

Channel - 대화가 이루어지는 UI 컴포넌트

ChannelList - ChannelList UI 컴포넌트

ChannelSettings - 주어진 채널의 설정을 처리하는 컴포넌트

MessageSearch - Channel에서 메시지를 검색하기 위한 컴포넌트

OpenChannel - 오픈 채널 대화가 이루어지는 UI 컴포넌트

OpenChannelSettings - 주어진 채널의 설정을 처리하는 컴포넌트
그 외 다수...

App - 위 컴포넌트들을 조합하여 만든 완전한 앱(그룹 채널) 컴포넌트로, 위의 모든 컴포넌트를 직접 조합할 필요가 없습니다. 또한 채팅 UI를 구축하기 위해 컴포넌트를 구성하는 예시로도 사용할 수 있습니다

참고 1: 저장소에서 스타일시트를 가져오는 것도 잊지 마세요
참고 2: 일부 컴포넌트의 이름은 해당 컴포넌트가 위치한 디렉터리와 다릅니다(예: Channel 컴포넌트는 Conversation 컴포넌트에서 옵니다). 이 점을 유의하세요

사전 요구사항
다음을 설치해야 합니다:

nodejs 18>=
npm 9>= 또는 yarn 3>=

개발
개발에는 vite 앱을 사용하고 npm 배포(번들 JS 파일) 빌드에는 rollup을 사용합니다.
nodejs와 yarn이 설치되어 있는지 확인하고 다음을 실행하세요

apps/testing/.env.example을 복사하여 apps/testing/.env로 저장하세요
appId를 VITE_APP_ID로 설정하세요

yarn install
yarn dev

기본적으로 vite 앱은 http://localhost:5173/ 에서 열립니다.
자세한 내용은 다음 링크를 참조하세요: Link

Storybook
컴포넌트를 쉽게 보고 이해할 수 있도록 Storybook을 제공합니다.

https://sendbird.github.io/sendbird-uikit-react/

yarn storybook
빌드
애플리케이션 내에서 사용할 프로덕션 번들 스크립트를 빌드하기 위해 RollupJS를 사용합니다.

ESM과 CJS 출력을 모두 제공합니다

yarn build

번들된 JS 코드는 ./dist 에서 확인할 수 있습니다
CSS는 ./dist/dist/index.css 에 있습니다

주의사항

Mac OS / Linux 시스템에서 개발을 시도했습니다. Windows 머신에서 yarn build를 실행할 때 문제가 발생할 수 있습니다

테스트
dumb UI 컴포넌트에 대해서만 테스트를 구현했습니다. 사용 기술: Vitest 및 testing-library

yarn test

Lint
yarn lint

새 컴포넌트 생성/내보내기

./src 안에 컴포넌트를 정의하세요.
./rollup.module-exports.js 에 다음 줄을 추가하세요:
'NewComponent/SubComponent': 'location/of/NewComponent/SubComponent',

이 컴포넌트는 소비자가 다음과 같이 가져올 수 있습니다: import SubComponent from '@sendbird/uikit-react/NewComponent/SubComponent';

새 컴포넌트 스캐폴딩

yarn run generate-component를 사용하여 src/ui 에 UI 컴포넌트를 생성하세요. 컴포넌트 생성에는 Plop.js를 사용합니다.
reducer 생성에도 사용할 수 있습니다.
Plop 템플릿은 여기에서 확인할 수 있습니다.

감사의 말
LameJS
오디오 형식 변환에 lamejs를 사용합니다
JavaScript로 작성된 빠른 mp3 인코더입니다. 원본 저장소:

https://lame.sourceforge.net 또는
https://github.com/zhuker/lamejs