휴가 css 수정

public/css/custom.css

@@ -113,18 +113,17 @@ opacity: 0.6; /* 흐려 보이게 */
   background: none !important;
   box-shadow: none !important;
   display: flex;
-  align-items: center;
+  align-items: flex-end;
   justify-content: center;
   width: 100%;
   height: 100%;
+  padding-bottom: 20px;
   }
-  
   /* 모달 본문 스타일 */
   .vac-modal-content {
   background: #fff;
   border-radius: 8px;
   box-shadow: 0px -4px 10px rgba(0, 0, 0, 0.1); /* 위쪽 그림자만 적용 */
-  padding: 20px;
   max-width: 500px;
   width: 100%;
   position: relative;

src/layouts/NormalLayout.vue

@@ -14,6 +14,7 @@
                     <div class="content-backdrop fade"></div>
                 </div>
             </div>
+            <TheChat />
         </div>
 
         <!-- Overlay -->
@@ -27,6 +28,7 @@
     import TheTop from './TheTop.vue';
     import TheFooter from './TheFooter.vue';
     import TheMenu from './TheMenu.vue';
+    import TheChat from './TheChat.vue';
     import { nextTick } from 'vue';
     import { wait } from '@/common/utils';
 
@@ -45,4 +47,13 @@
         loadScript('/js/main.js');
     });
 </script>
-<style></style>
+<style>
+
+/* ✅ 중앙 콘텐츠 자동 조정 */
+.layout-page {
+    flex-grow: 1;
+    min-width: 0; /* flexbox 내에서 올바른 크기 계산 */
+    margin-right: 350px; /* 채팅 사이드바의 너비만큼 밀리도록 설정 */
+}
+
+</style>

src/layouts/TheChat.vue

@@ -0,0 +1,43 @@
+<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: 350px;
+    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>

src/layouts/TheTop.vue

@@ -265,4 +265,5 @@
         router.push('/login');
     };
 </script>
-<style></style>
+<style scoped>
+</style>