26. [개발] Vuetify로 실시간 채팅앱 VSignal UI 만들기 - Vue3 Firebase 프로젝트

Vuetify로 UI 만들기

Vuetify를 사용하여 App Bar(헤더), Drawer(사이드 메뉴), Footer(푸터) 가 포함된 UI를 만들어 봅시다.
더하여 Material Design Icon도 사용합니다.

1. 기본 레이아웃 만들기 (AppLayout.vue)

📌 구성 요소

1. App Bar (헤더)

앱 제목과 네비게이션 메뉴 버튼
우측에는 로그아웃 버튼

2. Drawer (사이드 메뉴)

• 홈 : 이미 만들어진 1:1 채팅방 리스트
  채팅방을 선택하면 채팅방으로 들어갑니다.
• 채팅방 만들기 : 새로운 채팅방을 만듭니다.
• 계정만들기 : 사용자의 계정을 생성합니다.
• 계정 설정 : 계정 정보 외에 사용자 정보를 설정합니다.
• 로그인

3. Main Content (메인 컨텐츠 영역)

현재 선택된 화면이 표시됨

4. Footer (푸터)

간단한 앱 정보 또는 저작권 표시

AppLayout.vue

<!-- src/layouts/AppLayout.vue -->
<script setup>
import { ref } from "vue";

// 사이드 메뉴 열림/닫힘 상태
const drawer = ref(false);

// 동적으로 메뉴 아이템을 반환하는 함수
const GetMenuItems = () => [
  { title: "홈", icon: "mdi-home", route: "/" },
  { title: "채팅방 만들기", icon: "mdi-chat", route: "/chatroom" },
  { title: "계정 만들기", icon: "mdi-account-plus", route: "/account" },
  { title: "계정 설정",  icon: "mdi-cog", route: "/settings" },
  { title: "로그인", icon: "mdi-login", route: "/login" },
];
</script>

<template>
  <v-app>
    <!-- ✅ 헤더 (App Bar) -->
    <v-app-bar color="primary" density="comfortable">
      <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>
      <v-toolbar-title>VSignal - 실시간 채팅</v-toolbar-title>
      <v-spacer></v-spacer>
      <v-btn icon>
        <v-icon>mdi-logout</v-icon>
      </v-btn>
    </v-app-bar>

    <!-- ✅ 사이드 메뉴 (Drawer) -->
    <v-navigation-drawer v-model="drawer" app>
      <v-list>
        <v-list-item
          v-for="item in GetMenuItems()"
          :key="item.title"
          :to="item.route"
          link
        >
          <template v-slot:prepend>
            <v-icon>{{ item.icon }}</v-icon>
          </template>
          <v-list-item-title>{{ item.title }}</v-list-item-title>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>

    <!-- 메인 컨텐츠 -->
    <v-main>
      <v-sheet class="fill-height full-width d-flex align-center justify-center">
        <router-view />
      </v-sheet>
    </v-main>

    <!-- ✅ 푸터 -->
    <v-footer app>
      <v-container class="text-center">
        © 2025 My Chat App - All rights reserved.
      </v-container>
    </v-footer>
  </v-app>
</template>

<style>
/* 전체 화면을 채우기 위한 스타일 */
html, body, #app {
  height: 100%;
  width: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
}
</style>

 

✅ 설명
✔ v-app-bar: 헤더 (앱 이름 + 네비게이션 버튼 + 로그아웃)
✔ v-navigation-drawer: 사이드 메뉴 (홈, 채팅방 만들기, 계정만들기, 계정 설정, 로그인)
✔ <router-view />를 추가하여 각 페이지의 콘텐츠가 표시되도록 함
✔ v-footer: 푸터 (앱 정보 표시)

2. App.vue를 전체 앱에 적용

이제 App.vue에서 기본 레이아웃을 적용하자.

<!-- App.vue -->
<script setup>
// 레이아웃 컴포넌트 가져오기
import AppLayout from "@/layouts/AppLayout.vue"; 
</script>

<template>
  <v-app>
    <AppLayout>
      <router-view />
    </AppLayout>
  </v-app>
</template>

3. 라우터 설정 (router/index.js)

라우터를 설정해서 페이지를 이동할 수 있도록 연결하자.

1. 라우터 설정

// src/router/index.js
import { createRouter, createWebHistory } from "vue-router";
import HomeView from "@/views/HomeView.vue";
import ChatRoomView from "@/views/ChatRoomView.vue";
import AccountView from "@/views/AccountView.vue";
import SettingsView from "@/views/SettingsView.vue";
import LoginView from "@/views/LoginView.vue";

const routes = [
  { path: "/", component: HomeView },
  { path: "/chatroom", component: ChatRoomView },
  { path: "/account", component: AccountView },
  { path: "/settings", component: SettingsView },
  { path: "/login", component: LoginView },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

2. main.js에서 router를 등록

라우터를 main.js에서 use하지 않으면 router-view가 동작하지 않습니다.

// src/main.js
import { createApp } from 'vue';
//import './style.css'
import App from './App.vue';
import router from "./router"; // ✅ 라우터 임포트
import 'vuetify/styles';
import { createVuetify } from 'vuetify';
import { aliases, mdi } from 'vuetify/iconsets/mdi';
import '@mdi/font/css/materialdesignicons.css';

const vuetify = createVuetify({
  icons: {
    defaultSet: 'mdi',
    aliases,
    sets: { mdi },
  },
});

const app = createApp(App);
app.use(router); // ✅ 라우터 등록
app.use(vuetify);
app.mount('#app');

4. 실행하기

앱을 실행해봅시다.

npm run dev