From 4a65a80b4019c09534703e45ce182b8167e5056a Mon Sep 17 00:00:00 2001
From: jhynsoo <jhynsoo@gmail.com>
Date: Thu, 23 May 2024 15:21:39 +0900
Subject: [PATCH] Feat: Add comment write

---
 src/components/article/ArticleList.vue | 23 +++++++++++++----------
 src/components/article/CommentArea.vue | 11 +++++++++--
 src/components/article/CommentForm.vue |  8 ++++----
 3 files changed, 26 insertions(+), 16 deletions(-)

diff --git a/src/components/article/ArticleList.vue b/src/components/article/ArticleList.vue
index 6fe17ed..6f3fd85 100644
--- a/src/components/article/ArticleList.vue
+++ b/src/components/article/ArticleList.vue
@@ -1,18 +1,20 @@
 <script setup>
 import { getArticles } from '@/api/article';
-import { ref, reactive, watch } from 'vue';
+import { ref, watch, computed } from 'vue';
 import { RouterLink } from 'vue-router';
 import FilledButton from '../common/FilledButton.vue';
+import { useMemberStore } from '@/stores/memberStore';
 
 const articles = ref([]);
-const params = reactive({
-  pageNo: 1,
-  key: 'all',
-  word: '',
+const param = computed(() => {
+  return {
+    pageNo: currentPage.value,
+  };
 });
+const currentPage = ref(1);
 const hasNextPage = ref(true);
-
 const lastElement = ref(null);
+const memberStore = useMemberStore();
 
 watch(lastElement, (el) => {
   if (!el) {
@@ -21,7 +23,8 @@ watch(lastElement, (el) => {
   const observer = new IntersectionObserver(
     ([entry]) => {
       if (entry.isIntersecting && hasNextPage.value) {
-        params.pageNo += 1;
+        // params.pageNo += 1;
+        currentPage.value += 1;
         searchList();
       }
     },
@@ -32,8 +35,8 @@ watch(lastElement, (el) => {
 });
 
 function searchList() {
-  getArticles(params).then(({ data }) => {
-    if ((data?.articles?.length ?? 0) === 0) {
+  getArticles(param.value).then(({ data }) => {
+    if (data?.page?.total === currentPage.value || (data?.articles?.length ?? 0) === 0) {
       hasNextPage.value = false;
       return;
     }
@@ -46,7 +49,7 @@ searchList();
 <template>
   <header>
     <h1>게시판</h1>
-    <RouterLink :to="{ name: 'article-create' }">
+    <RouterLink v-if="memberStore.isLogin" :to="{ name: 'article-create' }">
       <FilledButton primary class="write">글쓰기</FilledButton>
     </RouterLink>
   </header>
diff --git a/src/components/article/CommentArea.vue b/src/components/article/CommentArea.vue
index 443bc15..76f49dc 100644
--- a/src/components/article/CommentArea.vue
+++ b/src/components/article/CommentArea.vue
@@ -2,9 +2,16 @@
 import { useMemberStore } from '@/stores/memberStore';
 import CommentForm from './CommentForm.vue';
 import CommentList from './CommentList.vue';
+import { toRefs } from 'vue';
 
-const { articleId, comments } = defineProps({ articleId: Number, comments: Array });
+const props = defineProps({ articleId: Number, comments: Array });
+const { articleId } = props;
+const { comments } = toRefs(props);
 const memberStore = useMemberStore();
+
+function updateList(comment) {
+  comments.value.push(comment);
+}
 </script>
 
 <template>
@@ -12,7 +19,7 @@ const memberStore = useMemberStore();
     <h2>
       댓글 <span>{{ comments.length }}</span>
     </h2>
-    <CommentForm :article-id="articleId" v-if="memberStore.isLogin" />
+    <CommentForm @updateList="updateList" :article-id="articleId" v-if="memberStore.isLogin" />
     <CommentList :comments="comments" />
   </div>
 </template>
diff --git a/src/components/article/CommentForm.vue b/src/components/article/CommentForm.vue
index daebeb7..2462d4a 100644
--- a/src/components/article/CommentForm.vue
+++ b/src/components/article/CommentForm.vue
@@ -4,7 +4,8 @@ import FilledButton from '../common/FilledButton.vue';
 import TextButton from '../common/TextButton.vue';
 import { addComment } from '@/api/comment';
 
-const { id } = defineProps({ id: Number });
+const emit = defineEmits(['updateList']);
+const { articleId } = defineProps({ articleId: Number });
 const isActive = ref(false);
 const textDiv = ref(null);
 const text = ref('');
@@ -19,9 +20,8 @@ function handleCancel() {
 }
 
 function handleSubmit() {
-  addComment({ id, text: text.value }).then(({ data }) => {
-    console.log(data);
-    // TODO: 댓글 추가 후 처리
+  addComment({ articleId, text: text.value }).then(({ data }) => {
+    emit('updateList', data);
   });
   text.value = '';
   isActive.value = false;