엔지니어링

React용 Sendbird UIKit 둘러보기: 알아야 할 필수 구성 요소 및 모듈

Blog author
Michelle Wong Developer Advocate
Share
React용 Sendbird UIKit 둘러보기: 알아야 할 필수 구성 요소 및 모듈

상담을 요청해보세요

Sendbird의 제품에 대해 더 자세한 정보를 얻고 문의사항에 대한 답변을 받으세요.

상담 요청하기

인앱 채팅 구축 매혹적이지만 복잡한 노력입니다. 다음을 위해 건물을 짓고 있는지 여부 게임 , 소매 , 디지털 건강 또는 주문형 , 간소화된 채팅 UI 가 필요합니다. 웹 또는 모바일 앱용. 센드버드 UIKit 직관적인 채팅 UI를 보다 쉽게 구현할 수 있습니다. 그만큼 React용 Sendbird UIKit Sendbird SDK에서 사전 구축된 UI 구성 요소를 사용하여 기능적이고 매력적인 채팅 경험을 구축할 수 있는 리소스를 제공합니다. React용 UIKit은 기능이 풍부하고 간소화된 채팅을 구상하는 방식으로 구축하는 데 필요한 요소를 개발자가 선택할 수 있는 것이 중요하기 때문에 유용합니다.

이 블로그에서는 Sendbird UIKit for React의 구성 요소와 각 사용 사례에 대해 알아봅니다. 이 블로그를 마치면 이러한 구성 요소를 구현하여 고유한 사용자 지정 통합을 생성하는 방법을 이해하게 될 것입니다.

React용 UIKit: 환경 설정

시작하려면 Sendbird 대시보드 에서 애플리케이션을 생성하세요.. 애플리케이션, 사용자, 메시지 및 채널을 포함하여 채팅 서비스에 필요한 모든 것에 액세스할 수 있는 곳입니다. 애플리케이션을 만든 후에는 Chat SDK를 초기화하기 위해 앱 ID가 필요합니다.

다음으로 create-react-app을 사용하여 새 프로젝트 환경을 만듭니다. 그런 다음 Sendbird 대시보드에서 생성된 앱 ID, 사용자 ID 및 닉네임을 저장할 .env 파일을 추가합니다. 이제 npm 또는 yarn을 통해 Sendbird UIKit을 설치합니다.

UIKit for React가 설치되면 구성 요소를 사용하여 응용 프로그램에 구현하려고 합니다. 우리가 배울 첫 번째 것은 앱 구성 요소입니다.

앱 구성 요소

앱 구성 요소는 기능적인 채팅 인터페이스를 생성하는 UI 구성 요소 모음입니다. 앱 또는 앱 구성 요소는 하나의 구성 요소 내에서 채널 목록, 채널 대화 및 채널 설정이 모두 포함된 보기를 렌더링합니다.

이를 사용하려면 App.js 파일에서 UIKit 구성 요소 SendbirdApp 및 UIKit 스타일시트를 가져옵니다.

 

앱 구성 요소는 애플리케이션 ID와 사용자 ID를 전달해야 합니다. 다음 코드는 앱 구성 요소를 사용하는 방법을 보여줍니다.

그런 다음 스타일시트에서 채팅 인터페이스의 높이와 너비를 지정합니다.

App.js 파일에서 이 스타일시트를 가져와야 합니다.

이제 새 채널을 만들고 메시지를 보낼 수 있는 성공적으로 실행 중인 채팅 응용 프로그램이 있습니다. 다음과 같아야 합니다.

성공적인 채팅 애플리케이션

채팅 경험을 사용자 지정하려면 UIKit에서 제공하는 핵심 구성 요소 및 모듈을 사용하여 이를 수행합니다. 먼저 핵심 구성 요소에 대해 살펴보겠습니다.

React용 UIKit의 핵심 구성 요소

핵심 구성 요소는 UIKit의 주요 빌딩 블록입니다. 핵심 구성 요소에는 SendbirdProvider, sendbirdSelectors, userSendbirdStateContext 및 withSenbird()가 포함됩니다. 이들 각각은 응용 프로그램을 실행하는 데 필요한 모든 데이터를 저장하고 작동합니다.

핵심 구성 요소는 어떻게 작동합니까? Chat SDK 인스턴스에서 데이터를 가져오고, Sendbird 서버에 연결하고, 보기에서 발생하는 이벤트에 대해 모듈과 통신하고, 기능 및 현지화를 구성합니다. 이러한 구성 요소는 보기를 만들고 실행하는 데 사용됩니다. 그러나 UI를 제공하거나 표시하지 않습니다. 여기에서 모듈이 작동합니다. 모듈은 사용 중인 핵심 구성 요소에 대한 UI 보기를 제공합니다.

SendbirdProvider _ 컨텍스트를 제공하고 Chat SDK 데이터와 현재 상태를 모든 하위 구성 요소에 전달하기 때문에 가장 중요한 핵심 구성 요소입니다. SendbirdProvider는 전체 애플리케이션이 Sendbird 데이터에 액세스할 수 있도록 최상위 수준에 있어야 합니다.

SendbirdProvider를 사용하면 useSendbirdStateContext() 를 사용할 수 있습니다. SendbirdProvider의 하위 구성 요소에서 Javascript용 Sendbird Chat SDK를 구현하는 구성 요소입니다. useSendbirdStateContext 구성 요소를 사용하면 SendbirdProvider 상태에 액세스하고 SDK 작업에 연결할 수 있으며 sendbirdSelector와 함께 사용하여 메시지 전송 또는 업데이트와 같은 기능을 구현할 수 있습니다.

UIKit v4 이전에는 Chat SDK와 모듈 간에 데이터를 전달하는 데 withSendbird() 구성 요소가 사용되었지만 UIKit 업데이트에서는 대신 useSendbirdStateContext()를 사용하는 것이 좋습니다.

마지막으로 sendbirdSelectors 데이터 작업을 수행하고 SDK에 대한 액세스를 제공하는 데 사용됩니다. 그만큼 주요 선택기 기능 에는 getSdk, getCreateOpenChannel 및 getDeleteMessage가 포함됩니다.

핸들러

UIKit은 클라이언트 앱에서 발생하는 활동 및 이벤트를 관리하기 위한 다양한 이벤트 핸들러를 제공합니다. v3에서 v4로 업그레이드한 이후 채팅 SDK , UIKit 구현 채널 이벤트 핸들러 sdkInstance에서 채널 핸들러를 호출하는 대신 가져올 수 있습니다. 채널 이벤트 핸들러에는 ConnectionHandler, GroupChannelHandler, OpenChannelHandler 및 UserEventHandler가 포함됩니다. 다음으로 SDK는 세션 핸들러 세션 토큰을 갱신합니다. 세션 토큰은 Chat SDK가 토큰이 만료되기 전에 데이터 요청을 보낼 수 있는 Sendbird 서버에 사용자를 연결할 때 사용자를 안전하게 인증하는 데 사용됩니다.

React용 UIKit의 모듈

UIKit의 핵심 구성 요소에 대해 배웠으므로 이제 모듈에 대해 배우고 각 모듈이 핵심 구성 요소와 함께 작동하는 방식을 배우는 것이 중요합니다. 모듈 사용자 지정 가능한 UI를 제공하는 스마트 구성 요소로 작동합니다. 이러한 모듈에는 기능적인 채팅 보기를 생성하는 공급자 및 미리 빌드된 UI 구성 요소가 포함되어 있습니다.

UIKit의 8개 모듈은 다음과 같습니다.

  1. 채널 목록
  2. 채널 만들기
  3. 그룹 채널
  4. 그룹 채널 설정
  5. 채널 열기
  6. 채널 설정 열기
  7. 메시지 검색
  8. 사용자 프로필 수정

각 모듈에는 컨텍스트 공급자와 UI 구성 요소 집합이 있습니다. 공급자는 UI 구성 요소가 인터페이스를 렌더링하여 모듈 보기를 표시하는 동안 Chat SDK에서 필요한 데이터를 관리합니다. 공급자와 UI 구성 요소 간에 데이터를 전달하기 위해 useContext 후크를 사용합니다. 모든 UI 구성 요소가 공급자의 데이터에 액세스할 수 있도록 하려면 컨텍스트 후크가 공급자 내부에 있어야 합니다. 각 모듈에 대한 기본 UI 구성 요소 집합이 있지만 모든 UI 구성 요소는 사용자 지정 구성 요소로 입력 소품을 설정하여 사용자 지정할 수 있습니다.

채널 목록

채널 목록 현재 사용자가 속한 그룹 채널 목록을 보여줍니다. ChannelList의 일부 속성에는 onBeforeCreateChannel, onChannelSelect 및 renderChannelPreview가 포함됩니다.

onBeforeCreateChannel 및 onChannelSelect 속성을 사용하면 사용자가 UIKit의 사용자 인터페이스와 상호 작용할 때 작업을 수행할 수 있습니다. renderChannelPreview 속성을 사용하면 채널 미리보기의 기본 UI를 사용자 지정 구성 요소로 바꿀 수 있습니다. 이것은 단순히 채널 목록에 사용자의 닉네임이 표시되도록 채널 미리보기를 설정하는 데 사용할 수 있습니다.

이 모듈에 사용되는 컨텍스트 제공자는 ChannelListProvider 입니다.. 이 공급자는 채널 목록 보기에서 사용되는 논리 및 데이터를 관리합니다. 따라서 응용 프로그램에서 채널 목록 보기만 필요한 경우 ChannelList 모듈을 사용하여 채널 목록 보기를 표시하고 해당 모듈을 ChannelListProvider 내부에 래핑하여 필요한 데이터를 ChannelList로 전달할 수 있습니다.

useChannelListContext 를 사용할 수도 있습니다. 제공자의 데이터에 액세스하기 위한 후크. useChannelListContext의 속성 중 일부는 초기화, 로드 및 currentChannel입니다.

ChannelList 보기를 구성하는 UI 구성 요소는 ChannelListUI, ChannelListHeader 및 ChannelPreview입니다. 그만큼 ChannelListUI 헤더와 채널 미리보기를 포함한 모듈의 기본 화면을 보여줍니다. 여기에는 renderHeader, renderPlaceHolderError 및 renderPlaceHolderLoading과 같은 사용할 속성 목록이 포함됩니다. 그만큼 채널 목록 헤더 제목과 새 채널을 생성하는 버튼을 표시하는 ChannelListUI의 헤더입니다. 이 UI와 함께 활용할 수 있는 세 가지 속성은 renderHeader, renderIconButton 및 allowProfileEdit입니다. 그만큼 채널 미리보기 UI 구성 요소는 채널 목록에 단일 채널을 표시합니다. ChannelPreview의 속성은 channel, onClick, renderChannelAction 및 isActive입니다.

다음은 ChannelListProvider 및 useChannelListContext를 사용하여 ChannelList를 구현하는 방법입니다.

이것은 ChannelList 구성 요소의 기본 디자인입니다.

ChannelList 구성 요소의 기본 UI

채널 만들기

CreateChannel _ 모듈은 새 그룹 채널을 만드는 데 사용됩니다. CreateChannel에는 channelUrl 속성을 전달해야 합니다. 추가 선택적 속성에는 onBeforeCreateChannel, onCreateChannel 및 onCancel이 포함됩니다. 이 세 가지 속성 모두 UIKit의 사용자 인터페이스 내의 특정 작업에서 실행되므로 고유한 작업 집합을 전달하고 실행할 수 있습니다.

예를 들어 onBeforeCreateChannel을 사용하여 사용자가 그룹 채널을 만들기 위해 클릭할 때와 새 채널을 생성하기 전에 호출할 함수를 트리거할 수 있습니다. 예를 들어 호출된 함수는 생성 중인 채널에 대한 그룹 이미지를 설정할 수 있습니다. onCreateChannel 속성을 사용하면 채널이 생성된 직후에 작업을 구현할 수 있습니다. 채널이 생성되면 이를 사용하여 성공 메시지를 화면에 렌더링할 수 있습니다. ‘취소’ 버튼을 클릭했을 때 이벤트를 발생시키려면 onCancel 속성을 사용하면 됩니다. 여기에서 사용자 지정 UI를 구현하도록 선택하고 채널 생성을 취소할 것인지 묻는 뷰를 렌더링하는 함수를 호출할 수 있습니다.

그룹 채널을 만들고 공급자에서 UI 구성 요소로 데이터를 전달하는 데 사용할 수 있는 두 개의 컨텍스트 개체는 CreateChannelProvider useCreateChannel입니다. 훅. CreateChannelProvider를 사용하려면 channelUrl 속성을 전달해야 합니다. 추가 선택적 속성은 children, onCreateChannel, onBeforeCreateChannel 및 query.applicationUserListQuery입니다.

CreateChannel 보기를 구성하는 UI 구성 요소는 CreateChannelUI, InviteMembers 및 SelectChannelType입니다. CreateChannelUI와 SelectChannelType을 함께 사용하여 CreateChannel 모듈의 첫 번째 단계를 보여줍니다. InviteMembers는 채널이 생성된 후 두 번째 단계를 표시합니다. CreateChannelUI 에는 onCancel 및 renderStepOne 속성이 있습니다. SelectChannelType 은 현재 사용자가 생성할 채널 유형을 선택할 수 있는 보기를 렌더링합니다. 사용자 초대 현재 사용자가 다른 사용자를 채널에 초대할 수 있는 보기를 표시합니다. SelectChannelType과 InviteMembers에는 모두 onCancel 속성이 있습니다.

다음 코드는 CreateChannelProvider 및 useCreateChannel 후크와 함께 CreateChannel 모듈을 사용하는 방법을 보여줍니다.

다음은 CreateChannel 모듈의 기본 레이아웃입니다.

새 채널 만들기

새 채널에 사용자 추가

채널

채널 _ 모듈은 그룹 채널 대화를 표시합니다. 사용자는 채널의 구성원으로 초대된 경우에만 그룹 채널에 액세스할 수 있습니다. 이 모듈에는 channelUrl 속성을 설정해야 합니다. 다른 선택적 속성에는 isReactionEnabled, showSearchIcon 및 onBeforeSendUserMessage가 포함됩니다.

isReactionEnabled 및 showSearchIcon 속성은 기능이 사용되고 표시되는지 여부를 제어합니다. onBeforeSendUserMessage 속성은 사용자가 메시지를 보내기 위해 클릭할 때 백그라운드에서 사용자 지정 논리를 실행하는 데 사용할 수 있지만 메시지가 채널로 전송되기 전에 작업을 완료합니다. 따라서 메시지 보내기를 클릭하면 전달한 기능을 트리거하여 작업을 완료한 다음 메시지를 보냅니다. 이는 전송되는 메시지의 텍스트를 확인하고 특정 단어가 포함된 경우 메시지가 전송될 때 애니메이션을 트리거하는 경우에 유용할 수 있습니다.

그룹 채널을 구축하는 데 사용되는 데이터를 저장하고 관리하는 데 사용되는 두 개의 컨텍스트 개체는 ChannelProvider useChannelContext입니다. 훅. ChannelProvider에는 channelUrl 속성이 필요하며 isMessageGroupingEnabled, isReactionEnabled 및 highlightMessage와 같은 추가 속성이 포함됩니다. useChannelContext 컨텍스트 후크의 선택적 속성에는 channelUrl, startingPoint 및 onBeforeSendFileMessage가 포함됩니다.

Channel 모듈의 UI 구성 요소는 ChannelUI, ChannelHeader, MessageInput, MessageList, FileViewer, FrozenNotification, Message, RemoveMessageModal, TypingIndicator 및 UnreadCount입니다. ChannelUI 모듈의 기본 화면을 표시하며 renderPlaceholderLoader, renderMessageInput, renderTypingIndicator 등의 여러 속성을 가지고 있습니다. 채널헤더 채널 제목, 메시지 검색 아이콘, 채널 정보 아이콘을 나타내는 ChannelUI 컴포넌트의 헤더입니다. 메시지 입력 사용자가 메시지를 입력하거나 파일 메시지를 보낼 수 있는 구성 요소입니다.

메시지 목록 그룹 채널의 모든 메시지 목록을 표시하며 renderMessage, renderPlaceholderEmpty 및 renderCustomSeperator의 세 가지 속성이 있습니다. 파일 뷰어 이미지 또는 비디오 파일이 포함된 모든 메시지를 표시하며 onCancel 및 메시지라는 두 가지 선택적 속성이 있습니다. FrozenNotification 현재 채널이 정지되었음을 사용자에게 알리는 배너를 표시하는 구성 요소입니다. 메시지 채널의 단일 메시지를 표시하는 MessageList 내의 구성 요소입니다. 메시지 속성이 필요하며 hasSeperator, chainTop 및 renderEditInput과 같은 추가 선택적 속성이 있습니다. RemoveMessageModal 은 선택한 메시지가 채널에서 삭제될 것임을 확인하는 모달을 표시하며 onCancel 및 메시지라는 두 가지 선택적 속성이 있습니다. 타이핑 인디케이터 메시지를 적극적으로 입력하고 있는 채널 멤버를 표시합니다. 그리고 마지막으로, 읽지 않은 수 채널에 읽지 않은 메시지 수를 표시합니다. UnreadCount의 속성은 count, time 및 onClick입니다.

다음 코드는 ChannelProvider 및 useChannelContext를 사용하여 Channel 모듈을 구현하는 방법입니다.

이것은 채널 구성 요소의 기본 레이아웃입니다.

채널 구성 요소의 레이아웃

채널 설정

채널 설정 모듈은 그룹 채널 정보 및 설정 옵션 메뉴를 표시합니다. 회원은 회원 목록을 확인하고 사용자를 채널에 초대하고 채널에서 나갈 수 있습니다. 사용자가 채널 운영자인 경우 운영자 추가 또는 제거, 구성원 음소거 또는 금지, 음소거 및 금지된 사용자 목록 보기, 나가기 등의 추가 옵션을 사용할 수 있습니다(설정에서). 또는 채널을 고정합니다.

ChannelSettings에는 channelUrl 속성이 필요하며 onCloseClick, onChannelModified 및 renderLeaveChannel과 같은 선택적 속성이 있습니다. onCloseClick 및 onChannelModified 속성은 UI 자체에서 발생하는 이벤트에 의해 트리거되고 전달한 사용자 지정 논리를 실행합니다. 사용자가 버튼을 클릭하여 설정 표시줄을 닫는 이벤트에 onCloseClick을 활용할 수 있습니다. 설정 구성 요소를 표시하지 않도록 UI를 수정하려는 함수를 전달할 수 있습니다. 설정이 변경된 후 이벤트를 발생시키려면 onChannelModified 속성을 활용하여 성공 메시지를 화면에 렌더링할 수 있습니다. ChannelSettings를 사용할 때 ‘채널 나가기’ 버튼 디자인을 변경할 수 있습니다. 사용자 지정 UI를 설정 모듈에 전달할 수 있는 renderLeaveChannel 속성을 사용하여 그렇게 할 수 있습니다.

이 모듈에 대한 채널 설정 메뉴를 빌드하는 두 개의 컨텍스트 개체는 ChannelSettingsProvider 및 useChannelSettingsContext입니다. 그만큼 ChannelSettingsProvider channelUrl을 전달해야 합니다. 이 공급자의 다른 옵션으로는 onCloseClick, onBeforeUpdateChannel 및 invalidChannel이 있습니다. 그만큼 useChannelSettingsContext 후크에는 onCloseClick, onChannelModified 및 onBeforeUpdateChannel과 같이 사용할 수 있는 여러 속성이 있습니다.

그룹 채널 설정 보기를 구성하는 UI 구성요소의 ChannelSettings 세트는 ChannelSettingsUI, ModerationPanel, UserPanel, ChannelProfile, EditDetailsModal, LeaveChannel 및 UserListItem입니다. 채널 설정 UI 채널 프로필 보기, 조정 메뉴 보기 및 채널 나가기 버튼이 포함된 보기를 표시합니다. 구성 요소에는 renderPlaceHolderError, renderChannelProfile, renderModerationPanel 및 renderLeaveChannel의 네 가지 선택적 속성이 있습니다. 그만큼 조정 패널 채널 운영자를 위한 설정 메뉴 보기를 생성합니다. 여기에는 운영자, 회원, 음소거 및 금지된 사용자 목록, 채널 동결 토글 버튼, 채널에서 나갈 수 있는 옵션이 포함됩니다. 그만큼 사용자 패널 구성요소는 회원 목록, 다른 사용자를 채널에 초대하는 옵션, 채널에서 나갈 수 있는 옵션을 포함하는 채널 회원용 설정 메뉴 보기를 생성합니다. 그만큼 ChannelProfile 컴포넌트는 사용자가 채널 정보를 변경할 수 있도록 채널 제목, 이미지 및 편집 버튼을 포함하는 채널 프로필 보기를 생성합니다. EditDetailsModal 사용자가 채널 이름과 프로필 이미지를 편집할 수 있는 모달을 표시합니다. 사용할 수 있는 두 가지 선택적 속성인 onSubmit 및 onCancel이 있습니다. 그만큼 LeaveChannel 모달은 사용자가 설정 메뉴에서 채널을 떠나기 위해 클릭하고 사용자에게 이 작업을 확인하도록 요청할 때 렌더링됩니다. LeaveChannel에는 함께 사용할 수 있는 onSubmit 및 onCancel 속성이 있습니다. 그만큼 사용자 목록 항목 사용자 목록 내의 개별 사용자를 표시합니다. 이 구성 요소는 사용자 속성을 설정해야 하며 세 가지 선택적 속성(currentUser, className 및 action)이 있습니다.

다음은 ChannelSettingsProvider 및 useChannelSettingsContext를 사용하여 ChannelSettings 모듈을 구현하는 방법입니다.

비연산자를 위한 ChannelSetting의 기본 UI는 다음과 같습니다.

기본 채널 설정 UI

다음은 채널 운영자에게 표시되는 채널 설정입니다.

채널 운영자를 위한 채널 설정 UI

오픈채널

개방형 채널은 채팅 내에서 상호 작용하는 많은 수의 사용자를 처리할 수 있는 공개 채널입니다. 그만큼 OpenChannel 모듈에는 channelUrl 속성이 필요하며 children, isMessageGroupingEnabled, messageLimit 및 renderUserProfile과 같은 다양한 선택적 속성이 있습니다.

children 속성은 OpenChannelProvider에서 제공하는 데이터인 OpenChannel의 하위 구성 요소를 보여줍니다. isMessageGroupingEnabled 속성은 UI 표시 방법을 알 수 있도록 기능이 활성화되었는지 확인합니다. 메시지 그룹화가 활성화되면 1분 이내에 전송된 각 메시지가 하나의 메시지로 그룹화됩니다. messageLimit 속성은 채널의 OpenChannelMessageList 구성 요소에 저장될 최대 메시지 수를 제공합니다. 사용자의 아바타를 클릭할 때 프로필 미리보기를 사용자 지정하려면 renderUserProfile 속성을 사용하여 기본 디자인을 재정의하여 자신의 UI 구성 요소를 전달할 수 있습니다.

데이터를 저장하고 처리하기 위해 OpenChannel 모듈에 사용할 수 있는 컨텍스트 개체는 OpenChannelProvider 및 useOpenChannel 후크입니다. 그만큼 OpenChannelProvider channelUrl 속성을 설정해야 합니다. 일부 선택적 속성에는 isMessageGroupingEnabled, messageLimit 및 onChatHeaderActionClick이 포함됩니다. 그만큼 useOpenChannelContext 컨텍스트 후크에는 renderUserProfile, currentOpenChannel 및 allMessages와 같이 활용할 수 있는 여러 속성이 있습니다.

OpenChannel 모듈을 구성하는 UI 구성 요소 집합은 OpenChannelUI, OpenChannelHeader, OpenChannelInput, OpenChannelMessageList 및 OpenChannelMessage입니다. OpenChannelUI 모듈의 기본 화면과 열린 채널의 헤더, 메시지, 메시지 목록 보기를 표시합니다. OpenChannelUI에는 renderMessage, renderHeader 및 renderInput과 같은 선택적 속성 목록이 있습니다. OpenChannelHeader 는 채널 제목과 정보 아이콘을 렌더링합니다. 오픈채널입력 사용자가 메시지를 보내거나 이미지, 비디오 또는 문서와 같은 파일 메시지를 보낼 수 있는 곳입니다. 그만큼 OpenChannelMessageList 열린 채널의 모든 메시지 목록을 표시합니다. 여기에는 renderMessage 및 renderPlaceHolderEmptyList라는 두 가지 선택적 속성이 있습니다. OpenChannelMessage 채널의 개별 메시지를 보여줍니다. 이 구성 요소에는 메시지 속성이 필요하며 hasSeperator, chainTop 및 editDisabled와 같은 여러 선택적 속성이 있습니다.

다음은 OpenChannelProvider 및 useOpenChannelContext와 함께 OpenChannel 모듈을 사용하는 방법입니다.

OpenChannel의 기본 디자인은 다음과 같습니다.

.

OpenChannel의 기본 UI

OpenChannelSettings

OpenChannelSettings _ 모듈은 채널 이름, 채널 이미지, 애플리케이션 URL 및 참가자 목록 제공과 같은 설정 메뉴를 보여줍니다. 현재 사용자가 운영자인 경우 작업 추가 또는 제거, 음소거 및 금지된 사용자 목록 보기, 참가자 음소거 또는 금지, 채널 삭제 옵션과 같은 추가 설정이 있습니다.

OpenChannelSettings에는 channelUrl 속성을 전달해야 합니다. 제공된 몇 가지 다른 속성은 onChannelModified, onDeleteChannel 및 onCloseClick입니다. 이러한 속성은 사용자가 UI의 특정 특성과 상호 작용할 때 일련의 작업을 실행합니다. 열린 채널 설정에서 onCloseClick을 사용하여 설정 표시줄을 닫은 상태로 설정하고 채팅 보기에서 설정 구성 요소를 제거할 수 있습니다. 동일한 아이디어가 onChannelModified 및 onDeleteChannel을 사용할 때도 적용됩니다. 여기서 사용자가 편집한 내용을 저장하기 위해 클릭하거나 버튼을 클릭하여 채널을 삭제하면 응용 프로그램의 UI를 수정하여 맞춤 구성요소가 화면.

기능적 채널 설정 메뉴를 구축하는 데 사용되는 두 개의 컨텍스트 개체는 OpenChannelSettingsProvider 및 useOpenChannelSettingsContext 후크입니다. 그만큼 OpenChannelSettingsProvider channelUrl을 전달해야 하며 onBeforeUpdateChannel, disableUserProfile 및 renderUserProfile과 같은 추가 속성을 포함합니다. 그만큼 useOpenChannelSettingsContext 후크에는 onDeleteChannel, onChanelModified 및 setChannel과 같은 속성 목록이 있습니다.

전체 OpenChannelSetting 모듈을 구성 하는 UI 구성 요소 는 OpenChannelSettingsUI, OperatorUI, ParticipantUI, OpenChannelProfile 및 EditDetailsModal입니다. OpenChannelSettingsUI OperatorUI 및 ParticipantUI가 포함된 모듈의 기본 화면을 표시합니다. OpenChannelSettingsUI에 대한 두 가지 선택적 속성은 renderOperatorUI 및 renderParticipantList입니다. OperatorUI 는 채널 운영자에 대한 설정 메뉴를 표시하고 선택적 속성 renderChannelProfile을 포함합니다. ParticipantUI 는 열린 채널의 참가자 목록을 표시합니다. OpenChannelProfile 은 채널 제목과 이미지를 표시하는 채널 프로필 보기를 생성합니다. EditDetailsModal 사용자가 채널 이름과 프로필 이미지를 수정하고 싶을 때 나타납니다. 취소 버튼을 클릭하면 트리거될 수 있는 onCancel 속성이 있습니다.

다음 코드는 OpenChannelSettingsProvider 및 useOpenChannelSettingsContext와 함께 OpenChannelSettings 모듈을 활용하는 방법입니다.

OpenChannelSettings는 다음과 같이 표시됩니다.

채널 설정의 기본 UI

메시지 검색

메시지 검색 모듈을 사용하면 사용자가 자신이 속한 채널 내에서 메시지를 검색할 수 있습니다. MessageSearch에 대해 channelUrl 속성을 설정해야 합니다. 추가 옵션 onResultLoaded, onResultClick 및 renderPlaceholderEmptyList와 같은 속성 을 사용할 수 있습니다.

MessageSearch 모듈을 사용할 때 채팅 상단에 팝업 레이어로 표시되는 별도의 UI 창에 모든 검색 결과를 표시하고 싶을 수 있습니다. 결과가 수신되면 함수가 호출되는 onResultLoaded 속성을 사용하여 그렇게 할 수 있습니다. onResultClick을 사용하면 사용자가 검색 결과를 선택하면 사용자 지정 논리를 실행할 수 있습니다. renderPlaceholderEmptyList 속성을 사용하면 검색 목록이 결과 없이 반환될 때 자리 표시자에 대한 사용자 지정 UI를 만들 수 있습니다. 따라서 검색 목록에 나열할 항목이 없으면 알림이 표시되도록 할 수 있습니다.

MessageSearch의 경우 MessageSearchProvider 및 useMessageSearch hook을 사용하여 메시지 검색 UI를 구축하는 데 사용되는 데이터를 저장하고 관리할 수 있습니다. MessageSearchProvider channelUrl을 지정해야 하며 onResultClick, messageSearchQuery 및 onResultLoaded와 같은 추가 선택적 속성이 있습니다. 그만큼 useMessageSearchContext 후크에는 onResultLoaded, requestString 및 selectedMessageId와 같은 여러 선택적 속성이 있습니다.

MessageSearchUI 는 MessageSearch 모듈의 유일한 UI 구성 요소이며 검색 결과 보기를 표시합니다 .

다음은 MessageSearchProvider 및 useMessageSearchContext를 사용하여 MessageSearch를 구현하는 방법입니다.

MessageSearch 모듈의 기본 UI는 다음과 같습니다.

MessageSearch의 기본 UI

편집사용자 프로필

EditUserProfile _ 모듈을 사용하면 현재 사용자가 프로필을 변경할 수 있습니다. 자신의 아바타를 클릭하면 자신의 프로필 정보가 포함된 팝업 창이 나타납니다. 여기에서 사용자는 프로필 이미지, 닉네임을 편집할 수 있으며 테마를 밝거나 어두운 모드로 전환할 수 있습니다.

EditUserProfile에는 4개의 선택적 속성 이 있습니다. 여기에는 자식, onCancel, onThemeChange 및 onEditProfile이 포함됩니다. children 속성은 EditUserProfileProvider가 제공하는 EditUserProfile의 하위 구성 요소를 보는 데 사용됩니다. onCancel은 사용자가 편집한 내용을 취소하기 위해 클릭하여 UI가 트리거될 때 작업을 실행하는 데 사용됩니다. 채팅이 밝은 모드인지 어두운 모드인지에 따라 추가 스타일을 추가하려면 onThemeChange를 사용하여 사용자가 테마를 변경하기 위해 클릭할 때 사용자 지정 CSS를 구현하는 함수를 호출할 수 있습니다. 마지막으로 onEditProfile을 사용하면 사용자가 프로필을 업데이트하면 일련의 작업을 구현할 수 있습니다.

UIKit은 EditUserProfileProvider useEditUserProfileProviderContext 를 제공합니다. EditUserProfile 모듈에 대한 컨텍스트 개체로 연결합니다. 둘 다 EditUserProfile과 동일한 선택적 속성인 children, onCancel, onThemeChange 및 onEditProfile을 사용할 수 있습니다.

EditUserProfile 모듈의 유일한 UI 구성 요소는 사용자 프로필 보기를 렌더링하는 EditUserProfileUI 입니다.

EditUserProfile의 기본 디자인은 다음과 같습니다.

사용자 프로필 편집의 기본 UI

결론 및 다음 단계

Sendbird UIKit for React가 제공하는 핵심 구성 요소와 모듈을 자세히 검토했습니다. 이 강력한 기반 세트를 통해 이제 다양한 사용 사례를 지원하는 데 필요한 구성 요소와 모듈을 결정할 수 있습니다. 예를 들어 다음을 확인하세요. 블로그 Sendbird UIKit for React로 WhatsApp 메신저 클론을 빌드하는 방법에 대해 설명합니다. 이 블로그에서는 이 블로그 게시물 전체에서 논의한 핵심 구성 요소 및 모듈을 사용하여 WhatsApp과 같은 사용자 지정 채팅 환경을 구축하는 방법을 이해하게 됩니다.

자세한 내용은 문서 를 확인하거나 개발자 포털 에서 풍부한 UIKit 자습서 탐색하십시오.엘. 도움이 필요하시면 Sendbird UIKit , 커뮤니티 포럼 을 확인 하거나 문의하기. 우리 전문가들은 항상 도울 준비가 되어 있습니다!

행복한 채팅 구축! ✨

 

Categories: 엔지니어링