ManageView.vue

<!-- src/views/ManageView.vue -->
<template>
  <v-container>
    <v-row>
      <v-col cols="12">
        <v-card class="pa-2">
          <v-card-title style="font-size:1.1em">마이로그 카테고리 관리</v-card-title>

          <!-- 새로운 카테고리 추가 -->
          <v-text-field label="새 카테고리 추가" v-model="newCategory" @keyup.enter="doAddCategory"></v-text-field>
          <v-card-actions>
            <v-spacer></v-spacer><v-btn color="primary" @click="doAddCategory">추가</v-btn>
          </v-card-actions>

          <v-list>
            <v-card-title style="font-size:1.1em">전체 카테고리</v-card-title>
            <!-- Firestore에서 불러온 카테고리 -->
            <v-list-item v-for="category in categories" :key="category.id">
              <v-list-item-title style="font-size:1em">{{ category.name }}</v-list-item-title>
              <v-btn icon @click="doRemoveCategory(category.id)">
                <v-icon text>mdi-delete</v-icon>
              </v-btn>
            </v-list-item>
          </v-list>

        </v-card>
      </v-col>
    </v-row>

  </v-container>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex';

export default {
  data() {
    return {
      newCategory: "", // 새로운 카테고리 입력 값
    };
  },
  
  computed: {
    ...mapState('mylogs', ['categories']),
  },

  methods: {
    ...mapActions('mylogs', ['fetchCategories', 'addCategory', 'removeCategory']),

    async doAddCategory() {
      if (!this.newCategory.trim()) return;

      const userId = this.$store.state.auth.user.id;
      this.addCategory({ newCategory: this.newCategory.trim(), userId: userId });
      this.newCategory = ""; // 입력 필드 초기화        
    },

    async doRemoveCategory(id) {
      this.removeCategory(id);
    },
  },

  async mounted() {
    const userId = this.$store.state.auth.user.id;
    await this.fetchCategories(userId); // Firestore에서 카테고리 데이터 가져오기
  },
};
</script>