feat: 매치 기록 더보기 페이지네이션 추가 (개발 4 / 운영 20)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

frontend/src/pages/profile/MatchHistory.vue

@@ -15,10 +15,22 @@ const tab = ref('전체')
 // 다른 유저로 전환 시 탭 초기화
 watch(() => props.p.name, () => (tab.value = '전체'))
 
+// 더보기 페이지 크기 — 개발 4개 / 운영 20개
+const PAGE_SIZE = import.meta.env.DEV ? 4 : 20
+const limit = ref(PAGE_SIZE)
+// 유저/탭 전환 시 노출 개수 초기화
+watch([() => props.p.name, tab], () => (limit.value = PAGE_SIZE))
+
 const ms = computed(() =>
   tab.value === '전체' ? props.p.matches : props.p.matches.filter((m) => m.mode === tab.value),
 )
 const wins = computed(() => ms.value.filter((m) => m.win).length)
+const visible = computed(() => ms.value.slice(0, limit.value))
+const hasMore = computed(() => ms.value.length > limit.value)
+
+function showMore() {
+  limit.value += PAGE_SIZE
+}
 </script>
 
 <template>
@@ -46,10 +58,10 @@ const wins = computed(() => ms.value.filter((m) => m.win).length)
     </div>
 
     <MatchRow
-      v-for="(m, i) in ms"
-      :key="i"
+      v-for="(m, i) in visible"
+      :key="m.matchId || i"
       :m="m"
-      :last="i === ms.length - 1"
+      :last="!hasMore && i === visible.length - 1"
     />
     <div
       v-if="ms.length === 0"
@@ -57,6 +69,13 @@ const wins = computed(() => ms.value.filter((m) => m.win).length)
     >
       해당 모드의 최근 매치가 없어요.
     </div>
+    <button
+      v-if="hasMore"
+      class="mh__more"
+      @click="showMore"
+    >
+      더보기 <span class="mh__more-count num">{{ visible.length }} / {{ ms.length }}</span>
+    </button>
   </UiPanel>
 </template>
 
@@ -97,4 +116,26 @@ const wins = computed(() => ms.value.filter((m) => m.win).length)
   font-size: 0.8125rem;
   color: var(--t3);
 }
+.mh__more {
+  display: block;
+  width: 100%;
+  padding: 11px 0;
+  border: none;
+  border-top: 1px solid var(--line);
+  background: var(--surf);
+  cursor: pointer;
+  font-family: var(--font-body);
+  font-size: 0.78125rem;
+  font-weight: 700;
+  color: var(--t2);
+}
+.mh__more:hover {
+  background: #f7f8f9;
+}
+.mh__more-count {
+  margin-left: 4px;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  color: var(--t3);
+}
 </style>