feat: complete map and trend frontend flows

app/game-frontend/src/views/MainView.vue

@@ -11,6 +11,7 @@ import CityBasicCard from '../components/main/CityBasicCard.vue';
 import NationBasicCard from '../components/main/NationBasicCard.vue';
 import MessagePanel from '../components/main/MessagePanel.vue';
 import SelectedCityPanel from '../components/main/SelectedCityPanel.vue';
+import RecentLogList from '../components/main/RecentLogList.vue';
 import { useSessionStore } from '../stores/session';
 import { useMainDashboardStore } from '../stores/mainDashboard';
 import { trpc } from '../utils/trpc';
@@ -35,16 +36,17 @@ const tournamentStage = ref(0);
 const {
     loading,
     error,
+    frontRecordsError,
     realtimeEnabled,
     general,
     city,
     nation,
-    lobbyInfo,
     worldMap,
     mapLayout,
     selectedCity,
     commandTable,
     messages,
+    frontRecords,
     boardAccess,
     reservedGeneralTurns,
     reservedNationTurns,
@@ -206,19 +208,18 @@ watch(
             <div v-if="mobileTab === 'world'" class="mobile-panel">
                 <PanelCard title="장수 동향">
                     <SkeletonLines v-if="loading" :lines="4" />
-                    <div v-else class="placeholder">장수 동향은 실시간 스트림으로 연결 예정</div>
+                    <div v-else-if="frontRecordsError" class="record-error" role="alert">{{ frontRecordsError }}</div>
+                    <RecentLogList v-else :logs="frontRecords?.global" />
                 </PanelCard>
                 <PanelCard title="개인 기록">
                     <SkeletonLines v-if="loading" :lines="4" />
-                    <div v-else class="placeholder">개인 기록 영역</div>
+                    <div v-else-if="frontRecordsError" class="record-error" role="alert">{{ frontRecordsError }}</div>
+                    <RecentLogList v-else :logs="frontRecords?.general" />
                 </PanelCard>
                 <PanelCard title="중원 정세">
                     <SkeletonLines v-if="loading" :lines="4" />
-                    <div v-else class="placeholder">
-                        <div>유저 {{ lobbyInfo?.userCnt ?? '-' }} / {{ lobbyInfo?.maxUserCnt ?? '-' }}</div>
-                        <div>NPC {{ lobbyInfo?.npcCnt ?? '-' }}</div>
-                        <div>세력 {{ lobbyInfo?.nationCnt ?? '-' }}</div>
-                    </div>
+                    <div v-else-if="frontRecordsError" class="record-error" role="alert">{{ frontRecordsError }}</div>
+                    <RecentLogList v-else :logs="frontRecords?.history" />
                 </PanelCard>
             </div>
 
@@ -255,12 +256,9 @@ watch(
                     <SelectedCityPanel :city="selectedCity" :loading="loading" />
                 </PanelCard>
                 <PanelCard title="중원 정세">
-                    <SkeletonLines v-if="loading" :lines="3" />
-                    <div v-else class="placeholder">
-                        <div>유저 {{ lobbyInfo?.userCnt ?? '-' }} / {{ lobbyInfo?.maxUserCnt ?? '-' }}</div>
-                        <div>NPC {{ lobbyInfo?.npcCnt ?? '-' }}</div>
-                        <div>세력 {{ lobbyInfo?.nationCnt ?? '-' }}</div>
-                    </div>
+                    <SkeletonLines v-if="loading" :lines="4" />
+                    <div v-else-if="frontRecordsError" class="record-error" role="alert">{{ frontRecordsError }}</div>
+                    <RecentLogList v-else :logs="frontRecords?.history" />
                 </PanelCard>
             </div>
 
@@ -284,7 +282,8 @@ watch(
                 </PanelCard>
                 <PanelCard title="장수 동향">
                     <SkeletonLines v-if="loading" :lines="4" />
-                    <div v-else class="placeholder">장수 동향은 실시간 스트림으로 연결 예정</div>
+                    <div v-else-if="frontRecordsError" class="record-error" role="alert">{{ frontRecordsError }}</div>
+                    <RecentLogList v-else :logs="frontRecords?.global" />
                 </PanelCard>
                 <PanelCard title="도시 정보">
                     <CityBasicCard :city="city" :loading="loading" />
@@ -294,7 +293,8 @@ watch(
                 </PanelCard>
                 <PanelCard title="개인 기록">
                     <SkeletonLines v-if="loading" :lines="4" />
-                    <div v-else class="placeholder">개인 기록 영역</div>
+                    <div v-else-if="frontRecordsError" class="record-error" role="alert">{{ frontRecordsError }}</div>
+                    <RecentLogList v-else :logs="frontRecords?.general" />
                 </PanelCard>
             </div>
             <MessagePanel
@@ -339,6 +339,10 @@ watch(
     padding-bottom: 12px;
 }
 
+.record-error {
+    color: #ff8a80;
+}
+
 .page-title {
     font-size: 1.6rem;
     font-weight: 600;

app/game-frontend/src/views/PublicView.vue

@@ -4,6 +4,7 @@ import { useMediaQuery } from '@vueuse/core';
 import PanelCard from '../components/ui/PanelCard.vue';
 import SkeletonLines from '../components/ui/SkeletonLines.vue';
 import MapViewer from '../components/main/MapViewer.vue';
+import RecentLogList from '../components/main/RecentLogList.vue';
 import { trpc } from '../utils/trpc';
 import { useSessionStore } from '../stores/session';
 
@@ -121,12 +122,7 @@ onMounted(() => {
             </PanelCard>
             <PanelCard title="중원 정세">
                 <SkeletonLines v-if="loading" :lines="3" />
-                <div v-else class="placeholder">
-                    <div>유저 {{ worldTrend?.userCnt ?? '-' }} / {{ worldTrend?.maxUserCnt ?? '-' }}</div>
-                    <div>NPC {{ worldTrend?.npcCnt ?? '-' }}</div>
-                    <div>세력 {{ worldTrend?.nationCnt ?? '-' }}</div>
-                    <div>상성 {{ worldTrend?.fictionMode ?? '-' }}</div>
-                </div>
+                <RecentLogList v-else :logs="mapData?.history" />
             </PanelCard>
             <PanelCard title="세력 일람">
                 <SkeletonLines v-if="loading" :lines="4" />
@@ -193,13 +189,7 @@ onMounted(() => {
                 </PanelCard>
                 <PanelCard title="중원 정세">
                     <SkeletonLines v-if="loading" :lines="3" />
-                    <div v-else class="placeholder">
-                        <div>유저 {{ worldTrend?.userCnt ?? '-' }} / {{ worldTrend?.maxUserCnt ?? '-' }}</div>
-                        <div>NPC {{ worldTrend?.npcCnt ?? '-' }}</div>
-                        <div>세력 {{ worldTrend?.nationCnt ?? '-' }}</div>
-                        <div>상성 {{ worldTrend?.fictionMode ?? '-' }}</div>
-                        <div>기타 {{ worldTrend?.otherTextInfo ?? '-' }}</div>
-                    </div>
+                    <RecentLogList v-else :logs="mapData?.history" />
                 </PanelCard>
             </div>
 

app/game-frontend/src/views/YearbookView.vue

@@ -11,7 +11,7 @@ type MapLayout = Awaited<ReturnType<typeof trpc.public.getMapLayout.query>>;
 type HistoryData = {
     year: number;
     month: number;
-    map: Awaited<ReturnType<typeof trpc.public.getCachedMap.query>>;
+    map: Omit<Awaited<ReturnType<typeof trpc.public.getCachedMap.query>>, 'history'>;
     nations: Array<{
         id: number;
         name: string;