Feat: Add comment list

src/api/comment.js

@@ -0,0 +1,22 @@
+import { localAxios } from '@/utils/http-commons';
+
+const local = localAxios;
+
+function getComment(articleId, success, fail) {
+  //list
+  local.get(`/comment/${articleId}`).then(success).catch(fail);
+}
+
+function addComment(comment, success, fail) {
+  local.post('/comment', JSON.stringify(comment)).then(success).catch(fail);
+}
+
+function updateComment(text, id, success, fail) {
+  local.put(`/comment/${id}`, text).then(success).catch(fail);
+}
+
+function deleteComment(id, success, fail) {
+  local.delete(`/comment/${id}`).then(success).catch(fail);
+}
+
+export { getComment, addComment, updateComment, deleteComment };

src/components/article/ArticleDetail.vue

@@ -3,10 +3,11 @@ import { ref } from 'vue';
 import { useRoute } from 'vue-router';
 import BoardHeader from './BoardHeader.vue';
 import { getArticle } from '@/api/article';
+import CommentList from '@/components/article/CommentList.vue';
 
 const route = useRoute();
 
-const id = route.params.id;
+const id = Number(route.params.id);
 const article = ref({});
 
 // function mockAPI() {
@@ -42,6 +43,8 @@ getArticle(id, ({ data }) => {
     </template>
   </BoardHeader>
   <p>{{ article.text }}</p>
+
+  <CommentList :id="id"></CommentList>
 </template>
 
 <style scoped>

src/components/article/CommentList.vue

@@ -0,0 +1,41 @@
+<script setup>
+import { ref } from 'vue';
+import { getComment } from '@/api/comment';
+
+const props = defineProps({ id: Number });
+const id = props.id;
+
+const comments = ref([]);
+const text = ref('');
+
+getComment(id, ({ data }) => {
+  comments.value = data;
+});
+</script>
+
+<template>
+  <div>
+    <h2>댓글</h2>
+    <input type="text" ref="textDiv" v-model="text" />
+  </div>
+  <ul>
+    <li v-for="comment in comments" :key="comment.id">
+      <div class="info">
+        <div class="nickname">{{ comment.nickname }}</div>
+        <div class="date">{{ comment.date }}</div>
+      </div>
+      <div class="info">
+        <div class="text">{{ comment.text }}</div>
+      </div>
+    </li>
+  </ul>
+</template>
+
+<style scoped>
+.info {
+  display: flex;
+  gap: 20px;
+  font-size: 0.8rem;
+  color: var(--color-text-secondary);
+}
+</style>