Fetch blog by slug > UserTile 컴포넌트생성 + v-html(컨텐츠읽기)

components/shared/UserTile.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="user-tile">
+    <div class="user-tile-image">
+      <figure class="image is-64x64">
+        <img class="is-rounded" :src="avatar">
+      </figure>
+    </div>
+    <div class="user-tile-author center">
+      <h3 class="user-tile-author-name">by {{name}}</h3>
+      <div v-if="date" class="date">{{date}}</div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    name: {type: String, default: ''},
+    avatar: {type: String, default: ''},
+    date: {type: String, default: ''}
+  }
+}
+</script>
+
+<style scoped lang="scss">
+  .user-tile {
+    display: flex;
+    &-author {
+      align-self: center;
+      margin-left: 10px;
+      &-name {
+        font-size: 17px;
+      }
+    }
+    .date {
+      font-size: 14px;
+    }
+  }
+</style>

pages/blogs/_slug.vue

@@ -1,3 +1,38 @@
 <template>
-  <h1>I AM DETAIL PAGE</h1>
-</template>
+  <div class="blog-editor-container">
+    <div class="container">
+      <div class="blog-section-user">
+        <user-tile
+          :name="blog.author.name"
+          :avatar="blog.author.avatar"
+          :date="blog.createdAt | formatDate"
+         />
+      </div>
+      <div class="blog-content" v-html="blog.content">
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import UserTile from '~/components/shared/UserTile'
+export default {
+  components: {
+    UserTile
+  },
+  computed: {
+    blog() {
+      return this.$store.state.blog.item
+    }
+  },
+  async fetch({store, params}) {
+    await store.dispatch('blog/fetchBlogBySlug', params.slug)
+  }
+}
+</script>
+<style scoped lang="scss">
+  .blog-content, .blog-section-user {
+    max-width: 800px;
+    margin: 10px auto;
+  }
+</style>

store/blog.js

@@ -1,4 +1,5 @@
 export const state = () => ({
+  item: {},
   items: {
     all: [],
     featured: []
@@ -12,15 +13,27 @@ export const actions = {
       console.log(data.data)
       return Error('')
     }
-    debugger
     const { blogs } = data
     commit('setBlogs', {resource: 'all', blogs})
     return state.items.all
+  },
+  async fetchBlogBySlug({commit, state}, slug) {
+    const blog = await this.$axios.$get(`/api/v1/blogs/s/${slug}`)
+    if(blog.isAxiosError === true){
+      console.log(blog.data)
+      return Error('')
+    }
+    debugger;
+    commit('setBlog', blog)
+    return state.item
   }
 }
 
 export const mutations = {
   setBlogs(state, {resource, blogs}) {
     state.items[resource] = blogs
+  },
+  setBlog(state, blog) {
+    state.item = blog
   }
 }