Feat: Use api in article detail page

src/components/article/ArticleDetail.vue

@@ -4,6 +4,7 @@ import { useRoute } from 'vue-router';
 import BoardHeader from './BoardHeader.vue';
 import { getArticle } from '@/api/article';
 import CommentArea from './CommentArea.vue';
+import { getComment } from '@/api/comment';
 
 const route = useRoute();
 
@@ -14,30 +15,9 @@ const comments = ref([]);
 getArticle(id, ({ data }) => {
   article.value = data;
 });
-
-// FIXME: remove mock data
-setTimeout(() => {
-  article.value = {
-    title: '제목',
-    text: '내용',
-    author: '작성자',
-    date: '2024-04-11 13:12:14',
-  };
-  comments.value = [
-    {
-      id: 1,
-      nickname: '닉네임',
-      date: '2024-04-11 13:12:14',
-      text: '댓글 내용',
-    },
-    {
-      id: 2,
-      nickname: '닉네임',
-      date: '2024-04-11 13:12:14',
-      text: '댓글 내용',
-    },
-  ];
-}, 100);
+getComment(id, ({ data }) => {
+  comments.value = data;
+});
 </script>
 
 <template>
@@ -46,7 +26,7 @@ setTimeout(() => {
       <h1>{{ article.title }}</h1>
     </template>
     <template #info>
-      <div class="author">{{ article.author }}</div>
+      <div class="author">{{ article.name }}</div>
       <div class="date">{{ article.date }}</div>
     </template>
   </BoardHeader>
@@ -56,9 +36,9 @@ setTimeout(() => {
 
 <style scoped>
 p {
-  margin: 20px;
+  margin: 40px 20px 20px;
   line-height: 1.6;
-  padding-bottom: 20px;
+  padding-bottom: 40px;
   border-bottom: 1px solid var(--color-border);
 }
 </style>

src/components/article/ArticleList.vue

@@ -1,43 +1,52 @@
 <script setup>
 import { getArticles } from '@/api/article';
-import { ref , reactive } from 'vue';
+import { ref, reactive, watch } from 'vue';
 import { RouterLink } from 'vue-router';
 import FilledButton from '../common/FilledButton.vue';
-import PageNavigation from "../common/PageNavigation.vue";
 
 const articles = ref([]);
-
 const params = reactive({
   pageNo: 1,
   key: 'all',
-  word: ''
-})
+  word: '',
+});
+const hasNextPage = ref(true);
 
-const currentPage = ref(1)
-const totalpage = ref(1)
+const lastElement = ref(null);
+
+watch(lastElement, (el) => {
+  if (!el) {
+    return;
+  }
+  const observer = new IntersectionObserver(
+    ([entry]) => {
+      if (entry.isIntersecting && hasNextPage.value) {
+        params.pageNo += 1;
+        searchList();
+      }
+    },
+    { threshold: 1 }
+  );
+
+  observer.observe(el);
+});
 
 function searchList() {
   getArticles(
     params,
     ({ data }) => {
-      articles.value = data.articles
-      currentPage.value = data.page.pageNo
-      totalpage.value = data.page.total
-      console.log(articles.value)
-      console.log(currentPage.value)
-      console.log(totalpage.value)
+      if ((data?.articles?.length ?? 0) === 0) {
+        hasNextPage.value = false;
+        return;
+      }
+      articles.value = [...articles.value, ...(data?.articles ?? [])];
     },
     (error) => {
-      console.log(error)
+      console.log(error);
     }
   );
 }
-searchList()
-
-function pageChange(value) {
-  params.pageNo = value
-  searchList()
-}
+searchList();
 </script>
 
 <template>
@@ -61,7 +70,7 @@ function pageChange(value) {
       </RouterLink>
     </li>
   </ul>
-  <PageNavigation :currentPage="currentPage" :totalPage="totalpage" @page-change="pageChange" />
+  <div ref="lastElement"></div>
 </template>
 
 <style scoped>

src/components/article/CommentArea.vue

@@ -1,8 +1,10 @@
 <script setup>
+import { useMemberStore } from '@/stores/memberStore';
 import CommentForm from './CommentForm.vue';
 import CommentList from './CommentList.vue';
 
 const { articleId, comments } = defineProps({ articleId: Number, comments: Array });
+const memberStore = useMemberStore();
 </script>
 
 <template>
@@ -10,7 +12,7 @@ const { articleId, comments } = defineProps({ articleId: Number, comments: Array
     <h2>
       댓글 <span>{{ comments.length }}</span>
     </h2>
-    <CommentForm :article-id="articleId" />
+    <CommentForm :article-id="articleId" v-if="memberStore.isLogin" />
     <CommentList :comments="comments" />
   </div>
 </template>

src/components/article/CommentForm.vue

@@ -2,6 +2,7 @@
 import { ref } from 'vue';
 import FilledButton from '../common/FilledButton.vue';
 import TextButton from '../common/TextButton.vue';
+import { addComment } from '@/api/comment';
 
 const { id } = defineProps({ id: Number });
 const isActive = ref(false);
@@ -20,6 +21,7 @@ function handleCancel() {
 
 function handleSubmit() {
   console.log(id, text.value);
+  addComment({ id, text: text.value });
   // TODO: add api call
   text.value = '';
   isActive.value = false;