HomeView.vue

HomeView.vue

<!-- src/views/HomeView.vue -->
<template>
  <v-container>
    
    <div class="mt-4 text-center">
      <v-progress-circular v-if="loading" indeterminate></v-progress-circular>
    </div>  

    <v-row>
      <v-col v-for="mylog in mylogs" :key="mylog.id" @click="viewMylog(mylog.id)" cols="12">
        <v-card>
          <v-card-title style="font-size:1em">{{ mylog.title }}</v-card-title>
          <!-- eslint-disable -->
          <v-card-text style="font-size:1em" class="mt-n2 mb-n6" v-html="sanitizeContent(mylog.content)"></v-card-text>
          <!-- eslint-enable -->
          <v-card-subtitle>
            <b>댓글</b> <span v-if="mylog.commentCount > 0"> {{mylog.commentCount }} </span> &nbsp;
            {{ mylog.userName }} . {{ formatDate(mylog.createdAt) }} 
            <span v-if="mylog.views > 0" > ({{ mylog.views }})</span>
          </v-card-subtitle>
        </v-card>
      </v-col>
    </v-row>

    <div class="mt-4">
      <v-alert v-if="!loading && !mylogs.length" type="info">마이로그가 없습니다.</v-alert>
      <v-alert v-if="error" type="error" dismissible @input="resetErrorMsg">{{ error.message }}</v-alert>
    </div> 
      
  </v-container>
</template>

<script>
import { mapActions, mapGetters } from "vuex";
import sanitizeHtml from 'sanitize-html';

export default {
  name:'HomeView',
  data() {
    return {
      //mylogs: [],
    };
  },
  computed: {
    ...mapGetters('mylogs',['mylogs', 'error', 'loading'])
  },
  async created() {
    
  },
  methods: {
    ...mapActions('mylogs', ['resetError']),
    viewMylog(mylogId) {
      this.$router.push({ name: "MyLogView", params: { id: mylogId } });
    },
    resetErrorMsg() {
      this.resetError();
    },
    truncateText(text, maxLength) {
      if (text.length > maxLength) {
        const truncated = text.substring(0, maxLength) + "...";
        return truncated;
      } else {
        return text;
      }
    },
    formatDate(date) {
      if (date && date.toDate) {
        return date.toDate().toISOString().replace('T', ' ').substring(0, 16);
      }
      return '';
    },
    // content를 안전한 html로 바꿔준다.
    sanitizeContent(content) {
      return sanitizeHtml(content.replace(/\n/g, '<br>'), {
        allowedTags: ['b', 'i', 'em', 'strong', 'p', 'br'],
        allowedAttributes: {}
      });
    },
  },
};
</script>