@vchatcloud/vue-ui-kit
v1.0.2
Published
VChatCloud UI Kit for vue integration
Downloads
13
Readme
Vue Component UI Kit
Vue Component UI Kit은 다양한 UI 컴포넌트를 제공하여 Vue 애플리케이션 개발을 더욱 쉽게 만듭니다.
목차
설치
npm install @vchatcloud/vue-ui-kit
# or
# yarn add @vchatcloud/vue-ui-kit
# or
# pnpm add @vchatcloud/vue-ui-kit
사용법
우선 사용하려는 프로젝트의 index.html
에 해당 내용을 작성합니다.
<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>
프로젝트에서 UI Kit을 사용하려면, 필요한 컴포넌트를 import하여 사용합니다.
VChatCloudApp
컴포넌트를 사용하여 VChatCloud를 설정하고 실행할 수 있습니다.
코드 예시
const vChatCloudAppProps: VChatCloudAppProps = {
nickName: "YOUR_NICK_NAME",
roomId: "YOUR_ROOM_ID",
clientKey: "YOUR_CLIENT_KEY",
email: "[email protected]", // CMS의 계정 이메일 설정
grade: "user", // 유저의 등급 설정
privateContainer: "PRIVATE_CONTAINER", // 비밀채팅방이 위치될 태그 설정
sessionType: "parameter", // 접속 방식 설정
userInfo: { profile: 8 }, // `userInfo`설정
...
};
<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
: 방 IDsessionType
: 세션 타입 ("parameter"
,"private"
,"login"
중 선택)url
: 이벤트 버스 URLuserInfo
: 사용자 정보 객체
주의사항
- 중복된
clientKey
: 같은 clientKey로 로그인 시 기존에 로그인된 사용자가 접속이 종료됩니다. - 비밀채팅방은 최대 1개까지만 생성됩니다.
- 비밀채팅방에서 새로운 비밀채팅방 생성하는 기능은 제한됩니다.
커스터마이징
컴포넌트 변경
만약, VChatCloudApp
컴포넌트가 마음에 들지 않는 경우 VChatCloudApp
안에 Custom Component
를 사용하여 기존 컴포넌트를 대체할 수 있습니다.
<VChatCloudApp
...
>
<MyComponent></MyComponent>
</VChatCloudApp>
커스텀 컴포넌트에 필요한 내용은 아래와 같이 hook을 통해서 제공됩니다.
const {
add,
apiFileList,
channel,
inviteMessageList,
messageHistoryList,
translateClientKeyMap,
vChatCloud,
vChatCloudAppProps,
} = useInject();
색상 변경
변경가능한 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>
색상을 변경하고 싶다면 아래와 같이 변수를 덮어쓸 수 있습니다.
<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>
추가 정보
더 많은 정보와 자세한 사용법은 공식 문서 링크를 참조하세요.