From e7760e9ddc9d149d1c9df113975a755e26ac7263 Mon Sep 17 00:00:00 2001
From: ttipo <kysung114y@gmail.com>
Date: Mon, 22 Jun 2026 23:51:45 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20=EB=8D=94=EB=B3=B4=EA=B8=B0=20?=
 =?UTF-8?q?=EB=B2=84=ED=8A=BC=20LoadMore=20=EC=BB=B4=ED=8F=AC=EB=84=8C?=
 =?UTF-8?q?=ED=8A=B8=EB=A1=9C=20=ED=86=B5=EC=9D=BC=20(Phase=203-2)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

목록 페이지네이션 '더보기' 버튼 마크업/문구를 LoadMore 로 추출(전역 .load-more 사용).
- 프로젝트 목록/상세, 내 업무, 프로젝트 활동 4곳 적용
- 활동 화면의 비표준 .more-row/.more-btn 제거하고 표준 .load-more 로 통일
  ('더 보기' → '더보기' 문구도 통일)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 frontend/src/components/common/LoadMore.vue   | 17 ++++++++
 frontend/src/pages/relay/MyTasksPage.vue      | 13 +++---
 .../src/pages/relay/ProjectActivityPage.vue   | 43 +++----------------
 .../src/pages/relay/ProjectDetailPage.vue     | 13 +++---
 frontend/src/pages/relay/ProjectListPage.vue  | 13 +++---
 5 files changed, 38 insertions(+), 61 deletions(-)
 create mode 100644 frontend/src/components/common/LoadMore.vue

diff --git a/frontend/src/components/common/LoadMore.vue b/frontend/src/components/common/LoadMore.vue
new file mode 100644
index 0000000..1e8b25f
--- /dev/null
+++ b/frontend/src/components/common/LoadMore.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+// 목록 페이지네이션 '더보기' 버튼 공용 컴포넌트 — 전역 .load-more 스타일 사용.
+// 부모는 보통 v-if="hasMore" 로 노출하고, @load 에서 다음 페이지를 불러온다.
+defineProps<{ loading?: boolean }>()
+const emit = defineEmits<{ (e: 'load'): void }>()
+</script>
+
+<template>
+  <button
+    class="load-more"
+    type="button"
+    :disabled="loading"
+    @click="emit('load')"
+  >
+    {{ loading ? '불러오는 중…' : '더보기' }}
+  </button>
+</template>
diff --git a/frontend/src/pages/relay/MyTasksPage.vue b/frontend/src/pages/relay/MyTasksPage.vue
index 4be4bb8..ef0a472 100644
--- a/frontend/src/pages/relay/MyTasksPage.vue
+++ b/frontend/src/pages/relay/MyTasksPage.vue
@@ -7,6 +7,7 @@ import { RouterLink } from 'vue-router'
 import AppShell from '@/layouts/AppShell.vue'
 import UserAvatar from '@/components/UserAvatar.vue'
 import DropdownSelect from '@/components/DropdownSelect.vue'
+import LoadMore from '@/components/common/LoadMore.vue'
 import { useMyTaskStore } from '@/stores/my-task.store'
 import { useProjectStore } from '@/stores/project.store'
 import { countActive, type MyTaskRow } from '@/mock/relay.mock'
@@ -412,15 +413,11 @@ function loadMore() {
       </div>
 
       <!-- 더보기 -->
-      <button
+      <LoadMore
         v-if="hasMore"
-        class="load-more"
-        type="button"
-        :disabled="loadingMore"
-        @click="loadMore"
-      >
-        {{ loadingMore ? '불러오는 중…' : '더보기' }}
-      </button>
+        :loading="loadingMore"
+        @load="loadMore"
+      />
     </div>
   </AppShell>
 </template>
diff --git a/frontend/src/pages/relay/ProjectActivityPage.vue b/frontend/src/pages/relay/ProjectActivityPage.vue
index 4133c9a..db98b15 100644
--- a/frontend/src/pages/relay/ProjectActivityPage.vue
+++ b/frontend/src/pages/relay/ProjectActivityPage.vue
@@ -8,6 +8,7 @@ import ProjectTabs from '@/components/ProjectTabs.vue'
 import UserAvatar from '@/components/UserAvatar.vue'
 import DropdownSelect from '@/components/DropdownSelect.vue'
 import SegmentedTabs from '@/components/common/SegmentedTabs.vue'
+import LoadMore from '@/components/common/LoadMore.vue'
 import { useProjectStore } from '@/stores/project.store'
 import { useActivityStore } from '@/stores/activity.store'
 import type { Project, ActivityIcon } from '@/mock/relay.mock'
@@ -228,20 +229,12 @@ const ActIcon = defineComponent({
         </div>
       </div>
 
-      <!-- 더 보기 — 서버 페이지네이션(누적). 필터와 무관하게 다음 페이지를 불러온다 -->
-      <div
+      <!-- 더보기 — 서버 페이지네이션(누적). 필터와 무관하게 다음 페이지를 불러온다 -->
+      <LoadMore
         v-if="!loading && activityStore.hasMore"
-        class="more-row"
-      >
-        <button
-          type="button"
-          class="more-btn"
-          :disabled="activityStore.loadingMore"
-          @click="activityStore.loadMore()"
-        >
-          {{ activityStore.loadingMore ? '불러오는 중…' : '더 보기' }}
-        </button>
-      </div>
+        :loading="activityStore.loadingMore"
+        @load="activityStore.loadMore()"
+      />
     </div>
   </AppShell>
 </template>
@@ -373,30 +366,6 @@ const ActIcon = defineComponent({
   margin-left: 0.75rem;
 }
 
-/* 더 보기 */
-.more-row {
-  display: flex;
-  justify-content: center;
-  margin-top: 0.875rem;
-}
-.more-btn {
-  border: 1px solid var(--border);
-  background: var(--panel);
-  border-radius: 0.5rem;
-  padding: 0.5rem 1.25rem;
-  font-size: 0.813rem;
-  font-weight: 600;
-  color: var(--text-2);
-  cursor: pointer;
-}
-.more-btn:hover:not(:disabled) {
-  background: #f4f5f7;
-}
-.more-btn:disabled {
-  opacity: 0.6;
-  cursor: default;
-}
-
 /* 로딩/빈 상태 */
 .feed-state {
   background: var(--panel);
diff --git a/frontend/src/pages/relay/ProjectDetailPage.vue b/frontend/src/pages/relay/ProjectDetailPage.vue
index e2f1652..a0a6bbb 100644
--- a/frontend/src/pages/relay/ProjectDetailPage.vue
+++ b/frontend/src/pages/relay/ProjectDetailPage.vue
@@ -10,6 +10,7 @@ import ProjectTabs from '@/components/ProjectTabs.vue'
 import UserAvatar from '@/components/UserAvatar.vue'
 import DropdownSelect from '@/components/DropdownSelect.vue'
 import SegmentedTabs from '@/components/common/SegmentedTabs.vue'
+import LoadMore from '@/components/common/LoadMore.vue'
 import { useProjectStore } from '@/stores/project.store'
 import { useTaskStore } from '@/stores/task.store'
 import type { TaskListQuery, TaskSegment, TaskSort } from '@/types/task'
@@ -405,15 +406,11 @@ const STATUS_LABEL: Record<TaskStatus, string> = {
       </div>
 
       <!-- 더보기 -->
-      <button
+      <LoadMore
         v-if="hasMore"
-        class="load-more"
-        type="button"
-        :disabled="loadingMore"
-        @click="loadMoreTasks()"
-      >
-        {{ loadingMore ? '불러오는 중…' : '더보기' }}
-      </button>
+        :loading="loadingMore"
+        @load="loadMoreTasks"
+      />
     </div>
 
     <!-- 프로젝트를 찾지 못한 경우 -->
diff --git a/frontend/src/pages/relay/ProjectListPage.vue b/frontend/src/pages/relay/ProjectListPage.vue
index cfd4cbc..1089f25 100644
--- a/frontend/src/pages/relay/ProjectListPage.vue
+++ b/frontend/src/pages/relay/ProjectListPage.vue
@@ -6,6 +6,7 @@ import { RouterLink } from 'vue-router'
 import AppShell from '@/layouts/AppShell.vue'
 import UserAvatar from '@/components/UserAvatar.vue'
 import DropdownSelect from '@/components/DropdownSelect.vue'
+import LoadMore from '@/components/common/LoadMore.vue'
 import { useProjectStore } from '@/stores/project.store'
 import type { ProjectListQuery, ProjectSort } from '@/types/project'
 
@@ -218,15 +219,11 @@ const isFiltered = computed(() => keyword.value.trim() !== '')
       </div>
 
       <!-- 더보기 -->
-      <button
+      <LoadMore
         v-if="hasMore"
-        class="load-more"
-        type="button"
-        :disabled="loadingMore"
-        @click="projectStore.loadMore()"
-      >
-        {{ loadingMore ? '불러오는 중…' : '더보기' }}
-      </button>
+        :loading="loadingMore"
+        @load="projectStore.loadMore()"
+      />
     </div>
   </AppShell>
 </template>