44 lines
906 B
Vue
44 lines
906 B
Vue
<template>
|
|
<!-- Chat Sidebar -->
|
|
<aside id="chat-sidebar" class="chat-sidebar">
|
|
</aside>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from "vue";
|
|
|
|
// 채팅 메시지 리스트
|
|
const messages = ref([
|
|
{ user: "사용자1", text: "안녕하세요!" },
|
|
{ user: "사용자2", text: "안녕하세요. 반갑습니다." }
|
|
]);
|
|
|
|
const newMessage = ref("");
|
|
|
|
// 메시지 전송
|
|
const sendMessage = () => {
|
|
if (newMessage.value.trim() !== "") {
|
|
messages.value.push({ user: "나", text: newMessage.value });
|
|
newMessage.value = "";
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* 채팅 사이드바 고정 */
|
|
.chat-sidebar {
|
|
width: 20%;
|
|
height: 100vh;
|
|
position: fixed;
|
|
right: 0;
|
|
top: 0;
|
|
background: #fff;
|
|
border-left: 1px solid #ddd;
|
|
box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
|
|
display: flex;
|
|
flex-direction: column;
|
|
z-index: 1000;
|
|
}
|
|
|
|
</style>
|