From 79f2b9b71344b62323720f56bfcdebc2c36ac928 Mon Sep 17 00:00:00 2001 From: hided62 Date: Wed, 12 Aug 2026 15:40:24 +0000 Subject: [PATCH 1/2] fix: keep yearbook stable during month navigation --- app/game-frontend/src/views/YearbookView.vue | 25 ++++- .../fixtures/canonical.ts | 20 +++- .../visual-parity.spec.ts | 102 ++++++++++++++++++ 3 files changed, 140 insertions(+), 7 deletions(-) diff --git a/app/game-frontend/src/views/YearbookView.vue b/app/game-frontend/src/views/YearbookView.vue index e61d97df..f2db0e68 100644 --- a/app/game-frontend/src/views/YearbookView.vue +++ b/app/game-frontend/src/views/YearbookView.vue @@ -35,6 +35,7 @@ const history = ref(null); const selectedYearMonth = ref(null); const settingsOpen = ref(false); const rankingBottom = ref(localStorage.getItem('yearbook-ranking-bottom') === 'true'); +let historyRequestId = 0; const serverID = computed(() => { const value = route.query.serverID; const raw = Array.isArray(value) ? value[0] : value; @@ -71,19 +72,27 @@ const loadHistory = async (): Promise => { if (selectedYearMonth.value === null) { return; } + const requestId = ++historyRequestId; loading.value = true; errorMessage.value = ''; try { const { year, month } = parseYearMonth(selectedYearMonth.value); const result = await trpc.yearbook.getHistory.query({ year, month, serverID: serverID.value }); + if (requestId !== historyRequestId) { + return; + } if ('data' in result) { history.value = result.data; } } catch (error) { - history.value = null; + if (requestId !== historyRequestId) { + return; + } errorMessage.value = error instanceof Error ? error.message : '연감 데이터를 불러오지 못했습니다.'; } finally { - loading.value = false; + if (requestId === historyRequestId) { + loading.value = false; + } } }; @@ -129,7 +138,13 @@ onMounted(async () => { 연 감 - + @@ -164,9 +179,9 @@ onMounted(async () => {
불러오는 중...
-
+
- +