@vchatcloud/vue-ui-kit
Version:
VChatCloud UI Kit for vue integration
625 lines (516 loc) • 22.3 kB
Markdown
# Vue Component UI Kit
[](https://www.npmjs.com/package/@vchatcloud/vue-ui-kit)
Vue Component UI Kit은 다양한 UI 컴포넌트를 제공하여 Vue 애플리케이션 개발을 더욱 쉽게 만듭니다.
## 목차
- [Vue Component UI Kit](#vue-component-ui-kit)
- [목차](#목차)
- [설치](#설치)
- [사용법](#사용법)
- [코드 예시](#코드-예시)
- [컴포넌트 설명](#컴포넌트-설명)
- [VChatCloudApp](#vchatcloudapp)
- [주의사항](#주의사항)
- [커스터마이징](#커스터마이징)
- [컴포넌트 변경](#컴포넌트-변경)
- [색상 변경](#색상-변경)
- [추가 정보](#추가-정보)
## 설치
```bash
npm install @vchatcloud/vue-ui-kit
# or
# yarn add @vchatcloud/vue-ui-kit
# or
# pnpm add @vchatcloud/vue-ui-kit
```
## 사용법
우선 사용하려는 프로젝트의 `index.html`에 해당 내용을 작성합니다.
```html
<head>
<!-- ... -->
<!-- 아래 내용을 추가합니다. -->
<script src="https://www.vchatcloud.com/lib/e7lib-latest.min.js"></script>
</head>
```
프로젝트에서 UI Kit을 사용하려면, 필요한 컴포넌트를 import하여 사용합니다.
`VChatCloudApp` 컴포넌트를 사용하여 VChatCloud를 설정하고 실행할 수 있습니다.
### 코드 예시
```ts
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`설정
...
};
```
```vue
<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"
...
/>
```
### 컴포넌트 설명
- `nickName`: 사용자 닉네임을 설정합니다.
- `roomId`: VChatCloud 방의 ID를 설정합니다.
- `clientKey`: 클라이언트 키를 로컬 저장소에서 가져오거나, 없을 경우 랜덤으로 생성합니다.
- `email`: 사용자의 CMS 계정의 이메일로 설정합니다.
- `grade`: 사용자 등급을 설정합니다. 예를 들어, `"user"`와 같은 값을 사용할 수 있습니다.
- `privateContainer`: 비밀채팅방 생성 시 위치시킬 태그를 설정합니다. 예를 들어, 태그의 id가 `example`이면 `"#example"`을, class가 `example`이면 `".example"`으로 사용할 수 있습니다.
- `sessionType`: 접속 방식에 대해 설정합니다. 예를 들어, 값이 `"login"`이면 로그인 페이지를 사용하고, `"parameter"`면 로그인 페이지 없이 바로 접속하게 됩니다. `"private"`는 비밀채팅방 입장 시 사용합니다.
- `userInfo`: 사용자 정보를 객체 형태로 설정합니다. 예시에서는 `{ profile: 8 }`로 설정되어 있습니다.
### VChatCloudApp
`VChatCloudApp` 컴포넌트에 필요한 props를 전달하여 VChatCloud를 초기화합니다. 주요 props는 다음과 같습니다.
- `clientKey`: 클라이언트 키
- `email`: 사용자 이메일
- `grade`: 사용자 등급
- `nickName`: 사용자 닉네임
- `roomId`: 방 ID
- `sessionType`: 세션 타입 (`"parameter"`, `"private"`, `"login"` 중 선택)
- `url`: 이벤트 버스 URL
- `userInfo`: 사용자 정보 객체
## 주의사항
- **중복된 `clientKey`** : 같은 clientKey로 로그인 시 기존에 로그인된 사용자가 접속이 종료됩니다.
- 비밀채팅방은 최대 1개까지만 생성됩니다.
- 비밀채팅방에서 새로운 비밀채팅방 생성하는 기능은 제한됩니다.
## 커스터마이징
### 컴포넌트 변경
만약, `VChatCloudApp` 컴포넌트가 마음에 들지 않는 경우 `VChatCloudApp`안에 `Custom Component`를 사용하여 기존 컴포넌트를 대체할 수 있습니다.
```vue
<VChatCloudApp
...
>
<MyComponent></MyComponent>
</VChatCloudApp>
```
커스텀 컴포넌트에 필요한 내용은 아래와 같이 hook을 통해서 제공됩니다.
```ts
const {
add,
apiFileList,
channel,
inviteMessageList,
messageHistoryList,
translateClientKeyMap,
vChatCloud,
vChatCloudAppProps,
} = useInject();
```
### 색상 변경
변경가능한 CSS 변수 목록은 아래와 같습니다.
<details>
<summary>CSS 변수 목록</summary>
```css
<style>
/* 기본모드 색상 */
:root {
--invert-img: none;
--toaster-notify-shadow-color: rgba(168, 168, 168, 0.3);
--toaster-notify-background-color: #363940;
--toaster-notify-color: #fff;
--toaster-span-color: #fff;
--login-wrap-background-color: #c9c9f2;
--login-logo-notice-color: #0a0a6b;
--login-footer-color: #0a0a6b4c;
--profile-wrap-box-shadow-color: rgba(201, 201, 201, 0.3);
--profile-wrap-border-color: #f2f2f2;
--profile-wrap-background-color: #fff;
--profile-button-color: #aaa;
--profile-button-hover-color: #aaa;
--profile-profile-border-color: #eaeaea;
--profile-profile-background-color: #fff;
--profile-nick-name-input-border-color: #dddddd;
--profile-nick-name-input-color: #aaa;
--profile-nick-name-input-bg-color: #fff;
--profile-nick-name-input-focus-border-color: #0033ab;
--profile-login-button-background-color: #0a0a6b;
--profile-login-button-color: #fff;
--file-send-color-background: rgba(0, 0, 0, 0.15);
--file-send-color-border: #fff;
--file-send-color-text: #fff;
--file-send-color-shadow-outer: rgba(39, 39, 39, 0.2);
--file-send-color-shadow-inner: rgba(4, 0, 0, 0.05);
--header-color-background: #f2f2f2;
--header-color-title: #000;
--header-color-count: #999;
--header-color-border: #ddd;
--join-user-list-color-background: #fff;
--join-user-list-color-border: #f2f2f2;
--join-user-list-color-header-border: #ddd;
--join-user-list-color-header-color: #000;
--join-user-list-color-footer-background: #ddd;
--join-user-list-color-footer: #000;
--join-user-list-color-shadow: rgba(168, 168, 168, 0.3);
--join-user-color-background: #f2f2f2;
--join-user-color-profile-border: #f2f2f2;
--join-user-color-title: #333;
--join-user-translate-color: #999;
--language-modal-color-background: #fff;
--language-modal-color-border: #f2f2f2;
--language-modal-color-header-border: #ddd;
--language-modal-color-footer-background: #ddd;
--language-modal-color-footer-text: #000;
--language-modal-color-close-icon: rgba(168, 168, 168, 0.3);
--language-modal-span-color: #000;
--radio-group-color-border: #ddd;
--radio-group-color-checked: #000;
--radio-group-span-color: #000;
--radio-group-radio-icon-bg-color: #fff;
--checkbox-color-border: #ddd;
--checkbox-color-background: #fff;
--toggle-color-bar-background: #ddd;
--toggle-color-bar-background-on: #c9ddff;
--toggle-color-dot-background: #999;
--toggle-color-dot-background-on: #2a61be;
--toggle-color-label: #666;
--invite-modal-color-background: #fff;
--invite-modal-color-border: #f2f2f2;
--invite-modal-color-input-border: #ddd;
--invite-modal-color-input-text: #aaa;
--invite-modal-color-input-background: #fff;
--invite-modal-color-title: #333;
--invite-modal-color-close-button-border: #0a0a6b;
--invite-modal-color-close-button-text: #0a0a6b;
--invite-modal-color-submit-button-border: #0a0a6b;
--invite-modal-color-submit-button-background: #0a0a6b;
--invite-modal-color-submit-button-text: #fff;
--invite-modal-color-shadow: rgba(168, 168, 168, 0.3);
--modal-color-background: #fff;
--modal-color-border: #f2f2f2;
--modal-color-title: #333;
--modal-color-contents: #000;
--modal-color-close-button-border: #0a0a6b;
--modal-color-close-button-text: #0a0a6b;
--modal-color-submit-button-border: #0a0a6b;
--modal-color-submit-button-background: #0a0a6b;
--modal-color-submit-button-text: #fff;
--modal-color-shadow: rgba(168, 168, 168, 0.3);
--file-drawer-wrap-box-shadow-color: rgba(168, 168, 168, 0.3);
--file-drawer-wrap-border-color: #f2f2f2;
--file-drawer-wrap-background-color: #fff;
--file-drawer-header-border-bottom-color: #ddd;
--file-drawer-title-color: #333;
--file-drawer-tab-item-color: #666;
--file-drawer-tab-item-focus-color: #000;
--file-drawer-tab-item-focus-border-color: #000;
--file-drawer-body-padding-color: #ddd;
--file-drawer-footer-border-top-color: #ddd;
--file-drawer-footer-select-count-color: #666;
--file-drawer-footer-save-color: #000;
--file-drawer-footer-image-opacity: 0.3;
--file-drawer-footer-image-opacity-hover: 0.7;
--preview-popup-color-bg-header: rgba(0, 0, 0, 0.5);
--preview-popup-color-text-header: #ffffff;
--preview-popup-color-bg-dim: #000000;
--file-preview-wrap-border-color: #f2f2f2;
--file-preview-wrap-background-color: #fff;
--file-preview-wrap-focus-border-color: #4160b9;
--file-preview-wrap-focus-background-color: #fff;
--file-preview-selected-icon-color: #000;
--file-preview-name-color: #000;
--file-preview-expire-color: #999;
--file-preview-size-color: #999;
--image-preview-wrap-focus-border-color: #4160b9;
--image-preview-selected-icon-color: #000;
--video-preview-wrap-focus-border-color: #4160b9;
--video-preview-wrap-focus-background-color: #fff;
--video-preview-selected-icon-color: #000;
--body-chat-contents-color: #000;
--body-nickname-color: #000;
--body-chat-bg-color: #fff;
--chat-base-profile-border-color: #f2f2f2;
--chat-base-profile-background-color: #aeaae2;
--chat-base-nickname-color: #666;
--chat-base-time-color: #999;
--whisper-modal-input-border-color: #ddd;
--whisper-modal-input-background-color: #fff;
--whisper-modal-input-color: #000;
--whisper-and-report-popup-border-color: #f2f2f2;
--whisper-and-report-popup-background-color: #fff;
--whisper-and-report-popup-box-shadow-color: rgba(168, 168, 168, 0.3);
--whisper-and-report-popup-item-hover-color: #fff;
--whisper-and-report-popup-item-hover-background-color: #0a0a6b;
--whisper-and-report-popup-item-text-color: #000;
--skeleton-loading-background: #ddd;
--skeleton-gradient-start: #e5e5e5;
--skeleton-gradient-middle: #f0f0f0;
--skeleton-gradient-end: #e5e5e5;
--default-message-color: #333;
--open-graph-border-color: #ddd;
--open-graph-shadow-color: rgba(157, 173, 184, 0.3);
--open-graph-background-color: #fff;
--open-graph-title-color: #333;
--open-graph-description-color: #666;
--file-message-wrap-background-color: #fff;
--file-message-wrap-border-color: #ddd;
--file-message-button-border-color: #ddd;
--file-message-wrap-shadow-color: rgba(157, 173, 184, 0.3);
--file-message-name-color: #333;
--file-message-expire-color: #666;
--file-message-size-color: #666;
--file-message-icon-opacity: 0.3;
--file-message-icon-hover-opacity: 0.7;
--join-message-color: #0033ab;
--leave-message-color: #ff5a5a;
--message-notice-bg-color: #333;
--message-notice-text-color: #fff;
--message-notice-content-color: #fff;
--message-notice-shadow-color: rgba(157, 173, 184, 0.3);
--warn-message-color: #ff7800;
--whisper-message-sub-wrap-bg-color: #f2f2f2;
--whisper-message-sub-wrap-shadow-color: rgba(157, 173, 184, 0.3);
--whisper-message-about-title-color: #0a0a6b;
--whisper-message-about-for-me-title-color: #0a0a6b;
--whisper-message-about-sub-title-color: #666;
--whisper-message-content-color: #010000;
--whisper-message-time-color: #999;
--whisper-message-for-me-bg-color: #e1dffc;
--move-end-line-popup-wrap-background-color: #fff;
--move-end-line-popup-wrap-border-color: #ddd;
--move-end-line-popup-wrap-shadow-color: rgba(105, 105, 105, 0.25);
--move-end-line-popup-wrap-text-color: #333;
--message-input-bg-color: #fff;
--message-input-textarea-color: #000;
--message-input-border-color: #ddd;
--message-input-name-color: #0000ac;
--message-input-text-size-color: #999;
--message-input-emoticon-area-border-color: #ddd;
--message-input-emoticon-list-hover-bg-color: rgba(0, 0, 0, 0.1);
--message-input-emoticon-list-emoji-bg-color: #ddd;
--message-input-emoticon-opacity: 0.3;
--message-input-emoticon-hover-opacity: 0.7;
--message-input-category-bg-color: #f2f2f2;
--message-input-category-focus-border-color: #ddd;
--message-input-category-focus-box-shadow-color: rgba(207, 207, 207, 0.3);
--message-input-category-focus-bg-color: #fff;
--message-input-button-bg-color: #0a0a6b;
--message-input-button-text-color: #fff;
--message-input-category-opacity: 1;
}
/* 다크모드 색상 */
:root .Dark {
--invert-img: invert(100%);
--toaster-notify-shadow-color: rgba(0, 0, 0, 0.3);
--toaster-notify-background-color: #333;
--toaster-notify-color: #fff;
--toaster-span-color: #fff;
--login-wrap-background-color: #292929;
--login-logo-notice-color: #ddd;
--login-footer-color: #aaa;
--profile-wrap-box-shadow-color: rgba(0, 0, 0, 0.3);
--profile-wrap-border-color: #444;
--profile-wrap-background-color: #313131;
--profile-button-color: #aaa;
--profile-button-hover-color: #fff;
--profile-profile-border-color: #444;
--profile-profile-background-color: #fff;
--profile-nick-name-input-border-color: #444;
--profile-nick-name-input-color: #fff;
--profile-nick-name-input-bg-color: #313131;
--profile-nick-name-input-focus-border-color: #fff;
--profile-login-button-background-color: #fff;
--profile-login-button-color: #000;
--file-send-color-background: rgba(0, 0, 0, 0.15);
--file-send-color-border: #fff;
--file-send-color-text: #fff;
--file-send-color-shadow-outer: rgba(39, 39, 39, 0.2);
--file-send-color-shadow-inner: rgba(4, 0, 0, 0.05);
--header-color-background: #191919;
--header-color-title: #fff;
--header-color-count: #ddd;
--header-color-border: #ddd;
--join-user-list-color-background: #333;
--join-user-list-color-border: #444;
--join-user-list-color-header-border: #444;
--join-user-list-color-header-color: #fff;
--join-user-list-color-footer-background: #222;
--join-user-list-color-footer: #fff;
--join-user-list-color-shadow: rgba(0, 0, 0, 0.3);
--join-user-color-background: #f2f2f2;
--join-user-color-profile-border: #f2f2f2;
--join-user-color-title: #fff;
--join-user-translate-color: #aaa;
--language-modal-color-background: #313131;
--language-modal-color-border: #444;
--language-modal-color-header-border: #444;
--language-modal-color-footer-background: #222;
--language-modal-color-footer-text: #fff;
--language-modal-color-close-icon: rgba(0, 0, 0, 0.3);
--language-modal-span-color: #fff;
--radio-group-color-border: #ddd;
--radio-group-color-checked: #000;
--radio-group-span-color: #fff;
--radio-group-radio-icon-bg-color: #fff;
--checkbox-color-border: #ddd;
--checkbox-color-background: #fff;
--toggle-color-bar-background: #666;
--toggle-color-bar-background-on: #fff;
--toggle-color-dot-background: #999;
--toggle-color-dot-background-on: #0ed893;
--toggle-color-label: #ddd;
--invite-modal-color-background: #313131;
--invite-modal-color-border: #444;
--invite-modal-color-input-border: #444;
--invite-modal-color-input-text: #fff;
--invite-modal-color-input-background: #191919;
--invite-modal-color-title: #fff;
--invite-modal-color-close-button-border: #fff;
--invite-modal-color-close-button-text: #fff;
--invite-modal-color-submit-button-border: #fff;
--invite-modal-color-submit-button-background: #fff;
--invite-modal-color-submit-button-text: #000;
--invite-modal-color-shadow: rgba(0, 0, 0, 0.3);
--modal-color-background: #313131;
--modal-color-border: #444;
--modal-color-title: #fff;
--modal-color-contents: #fff;
--modal-color-close-button-border: #fff;
--modal-color-close-button-text: #fff;
--modal-color-submit-button-border: #fff;
--modal-color-submit-button-background: #fff;
--modal-color-submit-button-text: #000;
--modal-color-shadow: rgba(0, 0, 0, 0.3);
--file-drawer-wrap-box-shadow-color: rgba(0, 0, 0, 0.3);
--file-drawer-wrap-border-color: #444;
--file-drawer-wrap-background-color: #333;
--file-drawer-header-border-bottom-color: #444;
--file-drawer-title-color: #fff;
--file-drawer-tab-item-color: #fff;
--file-drawer-tab-item-focus-color: #fff;
--file-drawer-tab-item-focus-border-color: #fff;
--file-drawer-body-padding-color: #ddd;
--file-drawer-footer-border-top-color: #444;
--file-drawer-footer-select-count-color: #fff;
--file-drawer-footer-save-color: #fff;
--file-drawer-footer-image-opacity: 0.3;
--file-drawer-footer-image-opacity-hover: 0.7;
--preview-popup-color-bg-header: rgba(0, 0, 0, 0.5);
--preview-popup-color-text-header: #ffffff;
--preview-popup-color-bg-dim: #000000;
--file-preview-wrap-border-color: #f2f2f2;
--file-preview-wrap-background-color: #fff;
--file-preview-wrap-focus-border-color: #0ed893;
--file-preview-wrap-focus-background-color: #fff;
--file-preview-selected-icon-color: #000;
--file-preview-name-color: #000;
--file-preview-expire-color: #999;
--file-preview-size-color: #999;
--image-preview-wrap-focus-border-color: #0ed893;
--image-preview-selected-icon-color: #000;
--video-preview-wrap-focus-border-color: #0ed893;
--video-preview-wrap-focus-background-color: #292929;
--video-preview-selected-icon-color: #000;
--body-chat-contents-color: #fff;
--body-nickname-color: #fff;
--body-chat-bg-color: #292929;
--chat-base-profile-border-color: #444;
--chat-base-profile-background-color: #aeaae2;
--chat-base-nickname-color: #aaa;
--chat-base-time-color: #aaa;
--whisper-modal-input-border-color: #444;
--whisper-modal-input-background-color: #191919;
--whisper-modal-input-color: #fff;
--whisper-and-report-popup-border-color: #444;
--whisper-and-report-popup-background-color: #313131;
--whisper-and-report-popup-box-shadow-color: rgba(0, 0, 0, 0.3);
--whisper-and-report-popup-item-hover-color: #fff;
--whisper-and-report-popup-item-hover-background-color: #313131;
--whisper-and-report-popup-item-text-color: #fff;
--skeleton-loading-background: #ddd;
--skeleton-gradient-start: #e5e5e5;
--skeleton-gradient-middle: #f0f0f0;
--skeleton-gradient-end: #e5e5e5;
--default-message-color: #fff;
--open-graph-border-color: #444;
--open-graph-shadow-color: rgba(0, 0, 0, 0.3);
--open-graph-background-color: #fff;
--open-graph-title-color: #333;
--open-graph-description-color: #666;
--file-message-wrap-background-color: #fff;
--file-message-wrap-border-color: #444;
--file-message-button-border-color: #ddd;
--file-message-wrap-shadow-color: rgba(157, 173, 184, 0.3);
--file-message-name-color: #333;
--file-message-expire-color: #666;
--file-message-size-color: #666;
--file-message-icon-opacity: 0.3;
--file-message-icon-hover-opacity: 0.7;
--join-message-color: #00ffc0;
--leave-message-color: #ff3a54;
--message-notice-bg-color: #111;
--message-notice-text-color: #fff;
--message-notice-content-color: #fff;
--message-notice-shadow-color: rgba(0, 0, 0, 0.3);
--warn-message-color: #fff000;
--whisper-message-sub-wrap-bg-color: #353535;
--whisper-message-sub-wrap-shadow-color: rgba(0, 0, 0, 0.3);
--whisper-message-about-title-color: #00ffc0;
--whisper-message-about-for-me-title-color: #dfb84e;
--whisper-message-about-sub-title-color: #aaa;
--whisper-message-content-color: #fff;
--whisper-message-time-color: #aaa;
--whisper-message-for-me-bg-color: #384150;
--move-end-line-popup-wrap-background-color: #353535;
--move-end-line-popup-wrap-border-color: #353535;
--move-end-line-popup-wrap-shadow-color: rgba(0, 0, 0, 0.25);
--move-end-line-popup-wrap-text-color: #aaa;
--message-input-bg-color: #292929;
--message-input-textarea-color: #fff;
--message-input-border-color: #444;
--message-input-name-color: #aaa;
--message-input-text-size-color: #ddd;
--message-input-emoticon-area-border-color: #444;
--message-input-emoticon-list-hover-bg-color: rgba(255, 255, 255, 0.1);
--message-input-emoticon-list-emoji-bg-color: rgba(255, 255, 255, 0.1);
--message-input-emoticon-opacity: 0.3;
--message-input-emoticon-hover-opacity: 0.7;
--message-input-category-bg-color: #353535;
--message-input-category-focus-border-color: #353535;
--message-input-category-focus-box-shadow-color: rgba(0, 0, 0, 0.3);
--message-input-category-focus-bg-color: #292929;
--message-input-button-bg-color: #fff;
--message-input-button-text-color: #000;
--message-input-category-opacity: 0.5;
}
</style>
```
</details>
<br />
색상을 변경하고 싶다면 아래와 같이 변수를 덮어쓸 수 있습니다.
<details>
<summary>변수 재지정 방법</summary>
```scss
<style>
/* 기본모드 색상 */
:root {
--invert-img: none;
--toaster-notify-shadow-color: rgba(168, 168, 168, 0.3);
--toaster-notify-background-color: #363940;
--toaster-notify-color: #fff;
--toaster-span-color: #fff;
...
}
/* 다크모드 색상 */
:root .Dark {
--invert-img: invert(100%);
--toaster-notify-shadow-color: rgba(0, 0, 0, 0.3);
--toaster-notify-background-color: #333;
--toaster-notify-color: #fff;
--toaster-span-color: #fff;
...
}
</style>
```
</details>
## 추가 정보
더 많은 정보와 자세한 사용법은 [공식 문서 링크](https://www.vchatcloud.com/doc/vue)를 참조하세요.