feat: 플레이 감사 장수 로그를 기수별로 조회

app/game-frontend/src/components/main/GeneralRecordPanels.vue

@@ -8,13 +8,18 @@ const props = withDefaults(
         loading?: boolean;
         trustedHtml?: boolean;
         unavailable?: GeneralRecordType[];
+        types?: GeneralRecordType[];
+        errors?: Partial<Record<GeneralRecordType, string>>;
     }>(),
     {
         loading: false,
         trustedHtml: false,
         unavailable: () => [],
+        types: () => [...GENERAL_RECORD_TYPES],
+        errors: () => ({}),
     }
 );
+defineEmits<{ retry: [type: GeneralRecordType] }>();
 
 const labels: Record<GeneralRecordType, string> = {
     generalHistory: '장수 열전',
@@ -33,9 +38,12 @@ const unavailableText: Record<GeneralRecordType, string> = {
 
 <template>
     <div class="log-grid" data-general-record-panels>
-        <div v-for="type in GENERAL_RECORD_TYPES" :key="type" class="log-block" :data-log-type="type">
+        <div v-for="type in props.types" :key="type" class="log-block" :data-log-type="type">
             <div class="log-title">{{ labels[type] }}</div>
             <SkeletonLines v-if="loading" :lines="3" />
+            <div v-else-if="props.errors[type]" class="empty" role="alert">
+                {{ props.errors[type] }} <button class="legacy-button" @click="$emit('retry', type)">다시 조회</button>
+            </div>
             <template v-else-if="props.unavailable.includes(type)">
                 <div class="empty unavailable">{{ unavailableText[type] }}</div>
             </template>

app/game-frontend/src/components/playAudit/AuditCityDetail.vue

@@ -26,7 +26,7 @@ const load = async () => {
 };
 const format = (value: number) => value.toLocaleString('ko-KR', { maximumFractionDigits: 2 });
 watch(
-    () => [props.cityId, props.at] as const,
+    [() => props.cityId, () => props.at?.year, () => props.at?.month, () => props.at?.kind],
     () => {
         void load();
     },

app/game-frontend/src/components/playAudit/AuditGeneralDetail.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref, watch } from 'vue';
 import PanelCard from '../ui/PanelCard.vue';
+import AuditGeneralLogs from './AuditGeneralLogs.vue';
 import { trpc } from '../../utils/trpc';
 const props = defineProps<{ generalId: number; at?: { year: number; month: number; kind: 'MONTH_END' | 'FINAL' } }>();
 defineEmits<{ close: [] }>();
@@ -12,6 +13,7 @@ const loading = ref(false);
 const turnsLoading = ref(false);
 const error = ref('');
 const turnsError = ref('');
+const showLogs = ref(false);
 let generation = 0;
 const format = (value: number) => value.toLocaleString('ko-KR', { maximumFractionDigits: 2 });
 const load = async () => {
@@ -56,7 +58,7 @@ const loadTurns = async (more = false) => {
     }
 };
 watch(
-    () => [props.generalId, props.at] as const,
+    [() => props.generalId, () => props.at?.year, () => props.at?.month, () => props.at?.kind],
     () => {
         void load();
     },
@@ -117,6 +119,14 @@ watch(
                 </template>
             </template>
         </template>
+        <button class="legacy-button" @click="showLogs = !showLogs">
+            {{ showLogs ? '장수 기록 닫기' : '장수 기록 조회' }}
+        </button>
+        <AuditGeneralLogs
+            v-if="showLogs"
+            :general-id="generalId"
+            :month="at ? { year: at.year, month: at.month } : undefined"
+        />
     </PanelCard>
 </template>
 

app/game-frontend/src/components/playAudit/AuditGeneralLogs.vue

@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+import GeneralRecordPanels from '../main/GeneralRecordPanels.vue';
+import type { GeneralRecordType } from '../generalRecords';
+import { formatLog } from '../../utils/formatLog';
+import { trpc } from '../../utils/trpc';
+const props = defineProps<{ generalId: number; month?: { year: number; month: number } }>();
+type LogPage = Awaited<ReturnType<typeof trpc.playAudit.generalLogs.query>>;
+const type = ref<GeneralRecordType>('generalHistory');
+const pages = ref<Partial<Record<GeneralRecordType, LogPage>>>({});
+const errors = ref<Partial<Record<GeneralRecordType, string>>>({});
+const loading = ref<Partial<Record<GeneralRecordType, boolean>>>({});
+let generation = 0;
+const records = computed(() =>
+    Object.fromEntries(
+        Object.entries(pages.value).map(([key, page]) => [
+            key,
+            page.items.map((item) => ({ id: item.id, content: formatLog(item.text) })),
+        ])
+    )
+);
+const load = async (target: GeneralRecordType, more = false) => {
+    if (loading.value[target]) return;
+    const request = generation;
+    loading.value[target] = true;
+    errors.value[target] = '';
+    try {
+        const response = await trpc.playAudit.generalLogs.query({
+            generalId: props.generalId,
+            type: target,
+            month: props.month,
+            limit: 50,
+            cursor: more ? (pages.value[target]?.nextCursor ?? undefined) : undefined,
+        });
+        if (request === generation)
+            pages.value[target] = {
+                ...response,
+                items: more ? [...(pages.value[target]?.items ?? []), ...response.items] : response.items,
+            };
+    } catch (cause) {
+        if (request === generation)
+            errors.value[target] = cause instanceof Error ? cause.message : '기록을 조회하지 못했습니다.';
+    } finally {
+        if (request === generation) loading.value[target] = false;
+    }
+};
+watch(
+    [() => props.generalId, () => props.month?.year, () => props.month?.month],
+    () => {
+        generation++;
+        pages.value = {};
+        errors.value = {};
+        loading.value = {};
+        void load(type.value);
+    },
+    { immediate: true }
+);
+watch(type, (target) => {
+    if (!pages.value[target]) void load(target);
+});
+</script>
+
+<template>
+    <div class="audit-logs">
+        <label
+            >기록 종류
+            <select v-model="type" class="legacy-sort-select" aria-label="기록 종류">
+                <option value="generalHistory">장수 열전</option>
+                <option value="generalAction">개인 기록</option>
+                <option value="battleResult">전투 결과</option>
+                <option value="battleDetail">전투 기록</option>
+            </select></label
+        >
+        <p>
+            {{ month ? `${month.year}년 ${month.month}월 전체 기록` : '현재 기수 기록' }} · 기수가 확인되는 로그만
+            표시합니다. 도입 이전의 식별자 없는 기록은 포함하지 않습니다.
+        </p>
+        <p v-if="pages[type]?.coverage === 'IDENTITY_MISSING'">게임의 기수 식별자가 없어 기록을 구분할 수 없습니다.</p>
+        <GeneralRecordPanels
+            :types="[type]"
+            :records="records"
+            :loading="loading[type]"
+            :errors="errors"
+            trusted-html
+            @retry="load($event)"
+        />
+        <button
+            v-if="pages[type]?.nextCursor != null"
+            class="legacy-button"
+            :disabled="loading[type]"
+            @click="load(type, true)"
+        >
+            기록 더 불러오기
+        </button>
+    </div>
+</template>
+
+<style scoped>
+.audit-logs {
+    display: grid;
+    gap: 8px;
+    margin-top: 12px;
+    min-width: 0;
+    overflow-wrap: anywhere;
+}
+</style>