<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>
