# 시작하기

VChatCloud React UI Kit는 VChatCloud 서비스를 React 프로젝트에 간편하게 통합할 수 있게 해주는 라이브러리입니다.

# 라이브러리 설치

명령어를 입력 해 프로젝트에 @vchatcloud/react-ui-kit를 디펜던시로 추가합니다.

npm install @vchatcloud/react-ui-kit
# or
# yarn add @vchatcloud/react-ui-kit
# or
# pnpm add @vchatcloud/react-ui-kit

1
2
3
4
5

# 사용법

우선 index.html에 아래 내용을 추가합니다. head사이에 script태그를 2개 작성합니다.

<head>
  <!-- ...기존 코드들 -->
  <script src="https://www.vchatcloud.com/lib/e7lib-latest.min.js"></script>
  <script src="https://www.vchatcloud.com/lib/vchatcloud-last.min.js"></script>
</head>

1
2
3
4
5

그 후 프로젝트에서 UI Kit을 사용하려면, 필요한 컴포넌트를 import하여 사용합니다. VChatCloudApp 컴포넌트를 사용하여 VChatCloud를 설정하고 실행할 수 있습니다.

# 코드 예시

import { VChatCloudApp, ChannelUserGrade } from "@vchatcloud/react-ui-kit";
import { FC, useEffect, useRef } from "react";

const App: FC = () => {
  const [roomId, clientKey, nickName, grade, userInfo] = [
    "YOUR_ROOM_ID",
    // clientKey는 원하는 값을 사용하면 되지만, 사용자끼리 중복되지 않도록 주의해주세요.
    // 같은 clientKey로 로그인 시 기존에 로그인 된 사용자는 접속이 종료됩니다.
    // 또는 `setRandomClientKey`함수를 불러와 사용할 수 있습니다.
    "YOUR_CLIENT_KEY",
    "YOUR_NICKNAME",
    "user",
    { profile: 1 },
  ];
  const privateContainer = useRef<HTMLDivElement>(null);

  // private container 사용 시
  useEffect(() => {
    if (!privateContainer.current) return;
    privateContainer.current.style.display = "none";

    const observer = new MutationObserver(() => {
      if (!privateContainer.current) return;

      privateContainer.current.style.display =
        privateContainer.current.children.length === 0 ? "none" : "block";
    });
    observer.observe(privateContainer.current, { childList: true });

    return () => observer.disconnect();
  }, []);

  return (
    <>
      <div className="app" style={{ width: "100%", height: "100vh" }}>
        <VChatCloudApp
          clientKey={clientKey}
          email="YOUR_EMAIL" // VChatCloud CMS계정 ID
          grade={grade}
          nickName={nickName}
          privateContainer=".private-container" // querySelector 파라미터 또는 HTMLElement
          roomId={roomId}
          sessionType="parameter"
          userInfo={userInfo}
          // logoUrl="LOGO_IMG_URL"
          // company="YOUR_COMPANY_NAME"
        />
      </div>
      {/* 비밀채팅용 wrapper */}
      <div
        className="app private-container"
        ref={privateContainer}
        style={{ width: "100%", height: "100vh" }}
      />
    </>
  );
};

export default App;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

# 컴포넌트 설명

# VChatCloudApp

VChatCloudApp 컴포넌트는 VChatCloud 서비스를 설정하고 실행하는 메인 컴포넌트입니다. 주요 props는 다음과 같습니다:

clientKey : 사용자 고유의 클라이언트 키.
email : VChatCloud CMS 계정 ID.
grade : 사용자 등급 (user, userManager 등).
nickName : 사용자 닉네임.
roomId : 채팅방 ID.
privateContainer : 비밀 채팅을 위한 HTML 컨테이너 (querySelector 파라미터 또는 HTMLElement).
sessionType : 세션 타입
- login : 로그인 화면을 사용해 접속자가 원하는 닉네임과 프로필을 설정할 수 있습니다.
- parameter : 파라미터로 사용자의 정보를 불러와 사용합니다. 개발자가 지정한 정보를 사용하게 됩니다.
- private : 파라미터와 동일하게 사용자의 정보를 불러와 사용하지만, 비밀채팅을 이용할 때 설정합니다.
userInfo : 추가 사용자 정보 (객체 형태). userInfo.profile에 숫자를 지정하면 기본 제공하는 프로필 이미지를 사용할 수 있습니다. (1 ~ 48까지 제공)
logoUrl : 로그인 화면에서 표시할 로고 이미지를 변경할 수 있습니다.
company : 로그인 화면에서 표시할 푸터의 회사 정보를 변경할 수 있습니다.

# 주의사항

StrictMode 비활성화 필요 : 개발서버로 실행 시 StrictMode를 비활성화 하여야 오류가 발생하지 않습니다.
중복된 clientKey 주의 : 같은 clientKey로 로그인 시 기존에 로그인 된 사용자가 접속이 종료됩니다. setRandomClientKey 함수를 사용하여 랜덤 clientKey를 생성할 수 있습니다.

← 개요 커스터마이징 →