덧글 조회 추가

pages/headlines/_slug.vue

@@ -35,6 +35,23 @@
         </md-button>
       </form>
 
+      <!-- Comments -->
+      <md-list class="md-triple-line" style="margin-top: 1em">
+        <md-list-item v-for="comment in headline.comments" :key="comment.id">
+          <md-avatar><img :src="comment.user.avatar" :alt="comment.user.username"></md-avatar>
+          <div class="md-list-item-text">
+            <span>{{ comment.user.username }}</span>
+            <span>{{ comment.publishedAt }}</span>
+            <p>{{ comment.text }}</p>
+          </div>
+
+          <md-badge :md-content="comment.likes" class="md-primary" md-postion="bottom" />
+          <md-button :disabled="loading || !user" class="md-icon-button">
+            <md-icon>thumb_up</md-icon>
+          </md-button>
+        </md-list-item>
+      </md-list>
+
       <!-- Back Button -->
       <md-button @click="$router.go(-1)" class="md-fixed md-fab-bottom-right md-fab md-primary">
         <md-icon>arrow_back</md-icon>

store/index.js

@@ -95,11 +95,27 @@ const createStore = () => {
       },
       async loadHeadline ({ commit }, headlineSlug) {
         const headlineRef = db.collection('headlines').doc(headlineSlug)
+        const commentsRef = db.collection(`headlines/${headlineSlug}/comments`)
 
-        await headlineRef.get().then((doc) => {
+        let loadedHeadline = {}
+        await headlineRef.get().then(async (doc) => {
           if (doc.exists) {
-            const headline = doc.data()
-            this.commit('setHeadline', headline)
+            loadedHeadline = doc.data()
+
+            await commentsRef.get().then((querySnapshot) => {
+              if (querySnapshot.empty) {
+                commit('setHeadline', loadedHeadline)
+              }
+              // eslint-disable-next-line prefer-const
+              let loadedComments = []
+              querySnapshot.forEach((doc) => {
+                loadedComments.push(doc.data())
+                loadedHeadline.comments = loadedComments
+                commit('setHeadline', loadedHeadline)
+              })
+            })
+            // const headline = doc.data()
+            // this.commit('setHeadline', headline)
           }
         })
       },