What's New

버튼이 있는 말풍선 구현하기

메시지 객체의 data필드를 활용해 다음과 같이 버튼이 있는 말풍선을 구현할 수 있습니다.

1. 메시지 발송 시, 말풍선을 화면에 그리기 위해 필요한 정보를 메시지 data 필드에 다음과 같이 채워놓습니다.

const chatViewData = {
    'type': 'msg_with_button',
    'title': '안녕하세요?',
    'body': '버튼이 있는 말풍선입니다.',
    'button_text': '더 자세히 보기',
    'button_action': 'SayHello'
};

await client.sendMessage({
    channelId: 'myChannel',
    type: 'text',
    data: chatViewData,
});

data의 경우, 최대 10개의 Key-value 형식의 데이터를 넣을 수 있습니다. key, value 둘 다 문자열이어야 합니다. key값의 최대 길이는 128자이고 value값의 최대 길이는 1024자입니다.

2. 메시지를 처리할 때, 메시지 객체의 data 필드에 있는 정보를 가지고 말풍선을 그려봅니다.

// Vue.js example
<div v-if="message.data.type == 'msg_with_button'" class="chat-bubble">
    <div class="chat-title">{{ message.data.title }}</div>
    <div class="chat-body">{{ message.data.body }}</div>
    <button class="chat-button" @click="handleButtonClicked(message.data.button_action)>{{ message.data.button_text }}</button>
</div>

/*
CSS
*/
.chat-bubble {
     max-width: 200px;
     padding: 15px;
     background: #f1f1f1;
     border-radius: 10px;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
     margin: 10px;
     position: relative;
}
 .chat-bubble::after {
     content: "";
     position: absolute;
     top: 10px;
     left: -10px;
     border-width: 10px;
     border-style: solid;
     border-color: transparent #f1f1f1 transparent transparent;
}
 .chat-title {
     font-weight: bold;
     margin-bottom: 10px;
}
 .chat-body {
     margin-bottom: 10px;
}
 .chat-button {
     display: inline-block;
     padding: 10px 20px;
     background: #007bff;
     color: #fff;
     border: none;
     border-radius: 5px;
     cursor: pointer;
     text-align: center;
     text-decoration: none;
}
 .chat-button:hover {
     background: #0056b3;
}