Sendbird UIKit을 사용하여 React에서 WhatsApp 메신저 클론을 빌드하는 방법

20억 명이 넘는 사용자 와 매일 1,000억 개의 메시지 가 교환되는 WhatsApp은 세계에서 가장 인기 있는 메시징 앱 입니다. 사용자 간 메시징의 사용 편의성과 기업과 대화할 수 있는 기능이 인기에 크게 기여했지만 WhatApp은 최근 홍보 메시지로 사용자에게 스팸을 보내는 기업의 수가 증가함에 따라 비난을 받았습니다.

브랜드는 인앱 채팅 을 구축하여 이 문제를 피할 수 있습니다 . 컨텍스트가 풍부한 인앱 채팅은 회사의 중요한 업데이트, 뉴스 및 공지 사항이 스팸으로 넘쳐나는 메시징 받은 편지함에서 손실되지 않음을 의미합니다. 인앱 채팅은 또한 실제와 같은 메시징 경험을 제공하는 동시에 브랜드가 사용자 데이터를 책임 있게 제어할 수 있도록 합니다. 이는 비즈니스를 위한 메시징이 브랜드 구축 기반의 중요한 부분이 될 수 있기 때문에 중요합니다. 실제로 Meta 대변인 은 최근 "메시징은 이메일이나 전화 통화보다 더 나은 비즈니스 수행을 위한 새로운 방법입니다."라고 언급했습니다.

그렇기 때문에 이 블로그에서는 React에서 WhatsApp 메신저 클론을 빌드하는 방법을 알아봅니다. 이 프로젝트에서는 Sendbird UIKit for React를 사용 합니다. Sendbird UIKit을 사용하면 개발자가 고도로 사용자 정의 가능한 UI 구성 요소로 맞춤형 채팅 경험을 구축할 수 있습니다. 이 블로그에서는 UIKit에서 제공하는 구성 요소가 어떻게 맞춤형 통합의 각 측면을 구성하여 우리의 목표인 React에서 WhatsApp 메신저 클론을 구축하는지 이해할 것입니다.

이 블로그를 마치면 다음과 같이 데스크톱용으로 빌드하게 됩니다.

그리고 이것은 모바일용입니다.

WhatsApp 메신저 클론 시작하기

시작하려면 Sendbird 대시보드 에서 애플리케이션을 만드십시오 . 여기에서 채팅 서비스에서 제공하는 모든 것에 액세스할 수 있습니다. 애플리케이션이 생성되면 반응 애플리케이션에서 Chat SDK를 초기화하기 위해 생성된 애플리케이션 ID를 저장해야 합니다.

React 애플리케이션을 생성하고 npm 또는 yarn으로 React용 Sendbird UIKit을 설치합니다.

UIKit이 설치되면 UIKit에서 응용 프로그램에 필요한 구성 요소를 가져올 수 있습니다.

React의 WhatsApp 메신저 복제를 위한 구성 요소 및 모듈

시작하려면 응용 프로그램에 포함할 여러 모듈에 대한 일반 래퍼로 SendbirdProvider를 사용합니다.

이 예에서는 ChannelList, Channel 및 ChannelSettings 모듈을 사용합니다. 이 세 가지 모듈을 사용하여 모바일 보기와 데스크톱 보기를 만듭니다. 모바일 보기는 채널 목록 또는 채널 대화와 설정 메뉴를 함께 렌더링합니다. 데스크톱 보기의 경우 채널 목록과 채널 대화가 나란히 표시됩니다.

먼저 App.js 파일에서 SendbirdProvider 및 UIKit의 스타일시트를 가져옵니다.

참고 : 여기서는 SendbirdProvider를 가져오고 응용 프로그램에서 SBProvider로 참조합니다. 자신의 응용 프로그램에서 참조할 항목을 선택할 수 있습니다.

그런 다음 styles.css 파일에 있는 스타일시트에 다음 CSS를 적용합니다.

이제 애플리케이션이 모바일 보기뿐만 아니라 데스크탑 보기에서도 작동하기를 원합니다. 따라서 공급자 구성 요소 내에서 창의 화면 크기를 확인해야 합니다. 전화 화면 크기인 경우 모바일 뷰를 렌더링합니다. 일반적인 전화기 화면의 픽셀 수보다 크면 데스크톱 보기를 렌더링합니다. 따라서 두 개의 구성 요소를 만들고 이름을 MobileView와 DesktopView로 지정합니다. 이 두 구성 요소에는 모듈이 포함됩니다.

이러한 단계가 완료되면 App.js 파일은 다음과 같이 표시됩니다.

참고 : 대시보드에서 사용자에게 액세스 토큰을 발급하는 경우 위 코드 샘플과 같이 accessToken 변수를 SBProvider에 전달해야 합니다.

데스크톱 보기

데스크톱 보기는 왼쪽에 채널 목록이 있고 오른쪽에 대화가 있는 기본 Sendbird 레이아웃입니다. DesktopView 구성 요소는 "sendbird-app__wrap" className이 있는 div를 반환합니다. 이 className은 대화 창 옆에 채널 목록을 표시하는 Sendbird의 기본 디자인으로 이미 스타일이 지정되어 있습니다.

그런 다음 sendbird-app__wrap div의 높이를 전체 윈도우 화면의 크기인 100vh로 설정해야 합니다. 이 div 내에 채널 목록, 채널 대화 및 채널 설정 구성 요소를 배치합니다.

채널 목록, 채널 및 채널 설정 모듈을 가져옵니다. SBChannelList, SBConversation 및 SBChannelSettings라고 합니다.

각 구성 요소 주위에 div를 추가하고 다음 className을 사용하여 기본 UIKit 스타일을 구성 요소에 적용합니다. 다음은 각 구성 요소의 classNames입니다.

1. 채널 목록 의 경우 div className은 "sendbird-app__channellist-wrap"입니다.
2. 채널 대화의 경우 div className은 "sendbird-app__conversation-wrap"입니다.
3. 채널 설정의 경우 div className은 "sendbird-app__settingspanel-wrap"입니다.

채널 목록 구성 요소에서 onChannelSelect 속성을 사용하여 채널 목록에서 클릭되는 채널을 설정합니다. 채널 대화는 channelUrl을 전달하고 onChatHeaderActionClick을 사용하여 사용자가 설정 표시줄을 열려고 할 때를 들을 수 있도록 합니다. 채널 설정의 경우 channelUrl 속성을 전달하고 onCloseClick을 사용하여 설정 표시줄 보기를 닫습니다. 이것이 어떻게 보이는지 보려면 아래 사용자 정의 섹션의 코드 샘플을 참조하십시오.

모바일 보기

모바일 장치 보기에는 화면에 렌더링된 채널 목록 구성 요소 또는 채널 대화 구성 요소가 있습니다. 사용자가 채널 목록에 있고 대화를 클릭하면 대화 창이 렌더링됩니다. 사용자가 클릭하여 대화에서 채널 목록으로 이동하면 채널 목록이 화면에 렌더링됩니다.

모바일 보기의 경우 className이 "mobile-view__wrap"인 div를 반환하고 그 안에 현재 채널이 설정되지 않은 경우 채널 목록 구성 요소를 반환하는 조건을 배치합니다. 그렇지 않으면 채널 대화 창과 설정 구성 요소를 반환합니다. 설정 구성 요소는 사용자가 대화 창에서 버튼을 클릭하여 설정 메뉴를 여는 경우에만 렌더링됩니다.

스타일시트에서 className "mobile-view__wrap" 및 "sendbird-app__conversation-wrap" 높이의 요소를 전체 창 화면을 차지하도록 100vh로 설정합니다.

이전에 DesktopView에 대해 했던 것처럼 각 구성 요소에 대해 동일한 속성을 활용합니다. 채널 목록의 경우 onChannelSelect 속성과 disableAutoSelect를 사용합니다. disableAutoSelect 속성은 채널 목록이 목록의 첫 번째 채널을 자동으로 렌더링하지 않도록 사용됩니다.

데스크톱 보기에는 채널 목록과 채널 대화가 나란히 표시됩니다. 단, 모바일 보기의 경우 채널 목록이나 채널 대화만 표시되므로 자동 선택을 해제해야 합니다. disableAutoSelect를 포함하지 않으면 보기가 대화 창 내의 첫 번째 채널을 지속적으로 렌더링하고 해당 채널을 지속적으로 렌더링하므로 채널 목록으로 돌아갈 수 없습니다. 따라서 disableAutoSelect 속성을 사용하여 대화창에서 보려는 채널을 선택하고 채널 목록보기에서 대화로 전환합니다.

다음으로 SBConversation 구성 요소 위에 뒤로 버튼을 추가하려고 합니다. 채널 대화에 뒤로 버튼이 표시되고 돌아가서 채널 목록을 봅니다. 대화 구성 요소는 channelUrl을 전달하고 onChatHeaderActionClick을 사용합니다. onChatHeaderActionClick은 설정 막대를 열도록 토글합니다. SBChannelSettings 구성 요소는 channelUrl 속성과 onCloseClick을 사용하여 설정 메뉴를 닫습니다.

사용자화

채팅에 Whatsapp과 같은 스타일을 더 많이 제공하기 위해 사용자 정의를 추가할 수 있습니다. DesktopView와 MobileView 모두에서 설정 표시줄을 숨기는 기능과 설정 표시줄을 렌더링하는 기능을 생성합니다.

설정 표시줄을 숨기려면 함수 내에서 className이 "sendbird-app__conversation-wrap"인 요소를 잡고 오른쪽 여백을 0px로 설정합니다. 이 함수는 onCloseClick 속성을 사용하여 SBChannelSettings에서 트리거됩니다. 설정 표시줄을 열려면 onChatHeaderActionClick 속성 내의 채널 구성 요소에서 renderSettingsBar를 호출하여 className이 "sendbird-app__conversation-wrap"인 요소를 가져오고 오른쪽 여백을 318px로 설정합니다.

그래서 설정을 열면 대화창의 레이아웃이 변경되어 페이지 오른쪽에 메뉴가 존재할 수 있는 공간이 생깁니다. 그런 다음 설정 메뉴를 클릭하여 닫으면 대화창이 이전에 설정 표시줄이 있던 위치로 확장됩니다.

설정 메뉴를 표시하려면 창 보기에서 올바르게 배치하기 위해 일부 CSS를 추가해야 합니다.

여기에서 CSS 사용자 정의를 변경하여 설정 메뉴를 배치할 방법을 표시할 수 있습니다.

이러한 구현을 통해 MobileView는 다음을 반환합니다.

그리고 DesktopView는 다음을 반환합니다.

색상 세트

다음으로 SendbirdProvider의 colorSet 속성을 사용하여 UIKit의 테마를 구성하는 색상을 정의합니다. colorSet을 정의한 후에는 SendbirdProvider 구성 요소로 전달해야 합니다.

이 예에서는 –sendbird-light-primary-100 변수를 밝은 녹색으로 설정합니다. 이 색상은 선택한 채널의 배경색, 이모티콘 반응을 위한 컨테이너의 배경색, 현재 사용자가 자신의 메시지를 편집할 때의 배경색으로 채널 목록에 적용됩니다. 예를 들어 발신 메시지와 일치하도록 색상을 더 밝은 녹색 음영으로 변경할 수 있습니다.

다음으로 –sendbird-light-primary-300을 녹색으로 정의하려고 합니다. 이 변수는 발신 메시지 배경색, 채널 목록의 새 채널 만들기 버튼, 채널 대화의 설정 아이콘 및 설정 메뉴의 모든 아이콘과 같은 아이콘에 사용됩니다.

그런 다음 –sendbird-light-primary-400을 약간 더 어두운 녹색 음영으로 설정합니다. –sendbird-light-primary-400을 사용하는 요소에는 발신 메시지의 마우스 오버, 자신의 메시지를 편집하려는 경우 저장 버튼의 마우스 오버, 새 채널을 생성하기 위한 만들기 버튼의 마우스 오버에 대한 배경이 포함됩니다.

주목해야 할 중요한 colorSet 변수는 –sendbird-light-background-50이며 각 구성 요소의 배경색에 대해 호출됩니다. 현재 기본 색상은 흰색입니다. 이 변수를 하나의 균일한 배경색으로 변경하거나 전체 응용 프로그램의 배경색을 흰색으로 유지하는 대신 CSS를 구현하여 대화 창의 배경색을 밝은 베이지색으로 변경합니다. colorSet 변수 의 전체 목록을 확인하시기 바랍니다 .

앱 기능은 이제 다음과 같아야 합니다.

채널 사용자 정의

일부 마무리 작업을 위해 CSS를 추가합니다. 수신 메시지의 경우 사용자 이름 옆에 있는 프로필 이미지 아이콘을 제거하려고 합니다. 사용자의 프로필 이미지를 제거한 후에는 적용된 최소 너비 스타일을 제거하여 이전 아바타가 있던 자리에 빈 공간이 없도록 합니다.

채널 목록 사용자 정의

채널 목록 헤더에서 현재 사용자의 닉네임과 ID를 제거하려고 합니다. 이 목표를 달성하기 위해 CSS를 사용하는 대신 ChannelList의 UI 구성 요소 ChannelListHeader를 사용하여 고유한 특정 디자인을 사용자 지정하여 기본 레이아웃을 재정의할 수 있습니다.

채널 미리보기 구성 요소의 경우 그룹 채널 이름 옆에 표시되는 멤버 수를 표시하지 않음으로 설정합니다. 채널 미리보기를 위한 사용자 지정 UI를 디자인하는 또 다른 옵션은 기본 Sendbird 헤더를 사용자 지정 구성 요소로 대체하는 ChannelList의 renderChannelPreview 속성을 활용하는 것입니다. 코드를 보려면 전체 CSS 스타일시트 를 참조하세요 !

이것은 데스크톱에서 최종 결과입니다.

모바일 장치에서는 다음과 같이 표시됩니다.

결론

축하합니다! 이제 React에서 WhatsApp 메신저 복제본을 만들었습니다. Sendbird UIKit의 핵심 구성 요소와 모듈로 구성된 기능적인 WhatsApp 스타일 메시징 구현이 있습니다. 여기에서 애플리케이션의 요구 사항에 맞는 필수 요소로 채팅 환경을 구축할 수 있습니다.

지금까지 살펴본 내용에 대한 개요는 이 GitHub 리포지토리 를 참조하십시오. 자세한 내용은 문서 를 확인하거나 개발자 포털 에서 풍부한 UIKit 자습서 를 탐색할 수도 있습니다 . Sendbird UIKit에 대한 도움이 필요하면 커뮤니티 포럼을 확인하거나 문의하십시오. 우리 전문가들은 항상 도울 준비가 되어 있습니다!

WhatsApp 메신저 클론을 만들어보세요! 💻