From 70d84a322d4f30e5c28d93b6eb0e3ee1ebf2fde4 Mon Sep 17 00:00:00 2001
From: TtiPo <kysung114y@gmail.com>
Date: Fri, 12 Jun 2026 10:11:47 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EB=A7=A4=EC=B9=98=20=EA=B8=B0=EB=A1=9D?=
 =?UTF-8?q?=20=EB=8D=94=EB=B3=B4=EA=B8=B0=20=ED=8E=98=EC=9D=B4=EC=A7=80?=
 =?UTF-8?q?=EB=84=A4=EC=9D=B4=EC=85=98=20=EC=B6=94=EA=B0=80=20(=EA=B0=9C?=
 =?UTF-8?q?=EB=B0=9C=204=20/=20=EC=9A=B4=EC=98=81=2020)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 frontend/src/pages/profile/MatchHistory.vue | 47 +++++++++++++++++++--
 1 file changed, 44 insertions(+), 3 deletions(-)

diff --git a/frontend/src/pages/profile/MatchHistory.vue b/frontend/src/pages/profile/MatchHistory.vue
index 53ebc87..584ff84 100644
--- a/frontend/src/pages/profile/MatchHistory.vue
+++ b/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>