# 시작하기

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

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

# 설치하기

npm install @vchatcloud/vue-ui-kit
# or
# yarn add @vchatcloud/vue-ui-kit
# or
# pnpm add @vchatcloud/vue-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, VChatCloudAppProps } from "@vchatcloud/vue-ui-kit";
import { onMounted, onUnmounted, ref } from "vue";

const vChatCloudAppProps: VChatCloudAppProps = {
  nickName: "YOUR_NICK_NAME",
  roomId: "YOUR_ROOM_ID",
  clientKey: "YOUR_CLIENT_KEY",
  email: "example@example.com", // CMS의 계정 이메일 설정
  grade: "user", // 유저의 등급 설정
  privateContainer: "PRIVATE_CONTAINER", // 비밀채팅방이 위치될 태그 설정
  sessionType: "parameter", // 접속 방식 설정
  userInfo: { profile: 8 }, // `userInfo`설정
  ...
};

// private container 사용 시
const mutationObserver = ref<MutationObserver>();
const showPrivateWrap = ref(false);

const config = {
  attributes: true,
  childList: true,
  characterData: true,
};

const disconnect = () => {
  showPrivateWrap.value = false;
  mutationObserver.value?.disconnect();
};

onMounted(() => {
  if (privateWrap.value) {
    mutationObserver.value = new MutationObserver(() => {
      showPrivateWrap.value = true;
    });
    mutationObserver.value.observe(privateWrap.value, config);
  }
});

onUnmounted(() => {
  disconnect();
});

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

<template>
  <VChatCloudApp
    :nick-name="vChatCloudAppProps.nickName"
    :room-id="vChatCloudAppProps.roomId"
    :client-key="vChatCloudAppProps.clientKey"
    :email="vChatCloudAppProps.email"
    :grade="vChatCloudAppProps.grade"
    :private-container="vChatCloudAppProps.privateContainer"
    :session-type="vChatCloudAppProps.sessionType"
    :user-info="vChatCloudAppProps.userInfo"
    :url="vChatCloudAppProps.url"
    :logo="vChatCloudAppProps.logo"
    :description="vChatCloudAppProps.description"
    :footer-description="vChatCloudAppProps.footerDescription"
    @exit="disconnect"
  />
  <!-- 비밀 채팅용 wrapper -->
  <div
    ref="privateWrap"
  />
</template>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# 컴포넌트 설명

# VChatCloudApp

VChatCloudApp 컴포넌트에 필요한 props를 전달하여 VChatCloud를 초기화합니다. 주요 props는 다음과 같습니다.

변수명	필수 여부	타입	설명
`nickName`	required	string	사용자 닉네임
`roomId`	required	string	채팅방 ID
`clientKey`	required	string	클라이언트 키
`sessionType`	required	SessionType	접속 방식. `login` : 로그인 페이지가 필요할 때 `parameter` : 로그인 페이지는 필요 없을 때 `private` : 비밀채팅방 입장 할 때
`email`	optional	string	VChatCloud CMS 계정 ID
`grade`	optional	ChannelUserGrade	사용자 등급 (user, userManager 등)
`privateContainer`	optional	string / HTMLElement	비밀채팅방 생성 시 위치시킬 장소
`userInfo`	optional	unknown	추가 사용자 정보 (객체 형태). userInfo.profile에 숫자를 지정하면 기본 제공하는 프로필 이미지를 사용할 수 있습니다. (1 ~ 48까지 제공)
`logo`	optional	string	로그인 화면에서 표시할 로고 이미지를 변경할 수 있습니다.
`description`	optional	string	로그인 화면에서 로고 하단 설명을 바꿀 수 있습니다.
`footerDescription`	optional	string	로그인 화면에서 표시할 footer 내용을 변경할 수 있습니다.

# 주의사항

같은 clientKey로 로그인 시 기존에 로그인된 사용자가 접속이 종료됩니다.
비밀채팅방은 최대 1개까지만 생성됩니다.
비밀채팅방에서 새로운 비밀채팅방 생성하는 기능은 제한됩니다.

← 개요 커스터마이징 →