From 778d1fcb6b9e182d516195c2660c3addf4c9781b Mon Sep 17 00:00:00 2001
From: yhlee <xxxoxxo002@gmail.com>
Date: Thu, 18 Jul 2024 12:27:09 +0900
Subject: [PATCH] =?UTF-8?q?computed=EB=A5=BC=20watch=20=ED=95=98=EB=8F=84?=
 =?UTF-8?q?=EB=A1=9D=20=EC=9E=AC=EC=8B=9C=EB=8F=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/board/BoardComponent.vue    | 56 +++++++++++-----------
 src/components/sub/PagenationComponent.vue | 10 ++--
 2 files changed, 34 insertions(+), 32 deletions(-)

diff --git a/src/components/board/BoardComponent.vue b/src/components/board/BoardComponent.vue
index 90e46c0..5b7bfbe 100644
--- a/src/components/board/BoardComponent.vue
+++ b/src/components/board/BoardComponent.vue
@@ -22,13 +22,13 @@ const pageNum = computed(() => {
   console.log('반환될 값', isNaN(nanable) ? 1 : nanable);
   return isNaN(nanable) ? 1 : nanable;
 });
-// boardStore.currentPage = pageNum.value;
+boardStore.currentPage = pageNum.value;
 
-if (props.page) {
-  boardStore.currentPage = Number(props.page);
-} else {
-  boardStore.currentPage = 1;
-}
+// if (props.page) {
+//   boardStore.currentPage = Number(props.page);
+// } else {
+//   boardStore.currentPage = 1;
+// }
 
 await boardStore.getBoards(boardStore.currentPage, 10, null, null, orderBy.value);
 await boardStore.getWeeklyRecommendedTopBoards(5);
@@ -45,31 +45,31 @@ watch(orderBy, async (newVal, oldVal) => {
   renderCnt.value += 1;
 });
 
-watch(() => props.page, async (newVal, oldVal) => {
-  console.info('props.page watch 발동', `${oldVal} -> ${newVal}`);
-
-  if (newVal) {
-    boardStore.currentPage = Number(newVal);
-  } else {
-    boardStore.currentPage = 1;
-  }
-  // boardStore.currentPage = pageNum.value;
+// watch(() => props.page, async (newVal, oldVal) => {
+//   console.info('props.page watch 발동', `${oldVal} -> ${newVal}`);
+//
+//   if (newVal) {
+//     boardStore.currentPage = Number(newVal);
+//   } else {
+//     boardStore.currentPage = 1;
+//   }
+//   // boardStore.currentPage = pageNum.value;
+//
+//   await boardStore.getBoards(boardStore.currentPage, 10, null, null, orderBy.value);
+//
+//   renderCnt.value += 1;
+// }, {immediate: true});
 
-  await boardStore.getBoards(boardStore.currentPage, 10, null, null, orderBy.value);
+watch(pageNum, async (newPage) => {
+      console.info('props.page watch 발동');
 
-  renderCnt.value += 1;
-}, {immediate: true});
+      boardStore.currentPage = newPage;
+      await boardStore.getBoards(newPage, 10, null, null, orderBy.value);
 
-// watch(() => page, async (newPage) => {
-//       console.info('props.page watch 발동');
-//
-//       boardStore.currentPage = newPage.value;
-//       await boardStore.getBoards(newPage.value, 10, null, null, orderBy.value);
-//
-//       renderCnt.value += 1;
-//     },
-//     {immediate: true}
-// );
+      // renderCnt.value += 1;
+    },
+    {immediate: true}
+);
 
 function enter() {
   if (window.event.keyCode === 13) {
diff --git a/src/components/sub/PagenationComponent.vue b/src/components/sub/PagenationComponent.vue
index 8167439..a230255 100644
--- a/src/components/sub/PagenationComponent.vue
+++ b/src/components/sub/PagenationComponent.vue
@@ -96,10 +96,12 @@ function goNextPage() {
         <!--        <li v-for="idx in showPages" :key="idx" @click="getPage(idx)"-->
         <!--            :class="idx === page? 'current-page' : ''">{{ idx }}-->
         <!--        </li>-->
-        <router-link v-for="idx in showPages" :key="`page-${idx}`"
-                     :to="{ name: category, query: { page: idx }, force: true }">
-          <li :class="idx === page? 'current-page' : ''">{{ idx }}</li>
-        </router-link>
+        <li v-for="idx in showPages" :key="`page-${idx}`" :class="idx === page? 'current-page' : ''">
+          <router-link :to="{ name: category, query: { page: idx }, force: true }">
+            {{ idx }}
+          </router-link>
+        </li>
+
       </ul>
     </div>
     <div class="next-button">