merge: complete ranking menu parity

2026-07-26 05:27:24 +00:00
parent 55d60a842c 02bc7f7864
commit 4bd44c1641
8 changed files with 1096 additions and 124 deletions
@@ -2,8 +2,11 @@ import { z } from 'zod';

 import { asRecord, HALL_OF_FAME_TYPES, type HallOfFameType } from '@sammo-ts/common';
 import { ITEM_KEYS, ItemLoader, loadItemModules } from '@sammo-ts/logic/items/index.js';
+import type { ItemModule } from '@sammo-ts/logic/items/types.js';
+import { buildLegacyDefaultUniqueItemPool } from '@sammo-ts/logic/rewards/legacyUniqueItemPool.js';
+import { resolveUniqueConfig } from '@sammo-ts/logic/rewards/uniqueLottery.js';

-import { procedure, router } from '../../trpc.js';
+import { authedProcedure, procedure, router } from '../../trpc.js';

 const DEFAULT_BG_COLOR = '#2b2b2b';
 const DEFAULT_FG_COLOR = '#ffffff';
@@ -23,31 +26,31 @@ const readMetaNumber = (value: unknown): number => {

 const percentText = (value: number): string => `${(value * 100).toFixed(2)}%`;

+const readOwnerDisplayName = (value: unknown): string | null => {
+    const meta = asRecord(value);
+    if (typeof meta.ownerName === 'string' && meta.ownerName.length > 0) {
+        return meta.ownerName;
+    }
+    if (typeof meta.owner_name === 'string' && meta.owner_name.length > 0) {
+        return meta.owner_name;
+    }
+    return null;
+};
+
 const itemLoader = new ItemLoader();
-let cachedUniqueItems: Promise<
-    Array<{ key: string; name: string; slot: string; unique: boolean; buyable: boolean; info: string }>
-> | null = null;
+let cachedUniqueItems: Promise<ItemModule[]> | null = null;

 const loadUniqueItems = () => {
    if (!cachedUniqueItems) {
        cachedUniqueItems = loadItemModules([...ITEM_KEYS], itemLoader).then((modules) =>
-            modules
-                .filter((module) => module.unique && !module.buyable)
-                .map((module) => ({
-                    key: module.key,
-                    name: module.name,
-                    slot: module.slot,
-                    unique: module.unique,
-                    buyable: module.buyable,
-                    info: module.info,
-                }))
+            modules.filter((module) => module.unique && !module.buyable)
        );
    }
    return cachedUniqueItems;
 };

 export const rankingRouter = router({
-    getBestGeneral: procedure
+    getBestGeneral: authedProcedure
        .input(
            z
                .object({
@@ -57,7 +60,7 @@ export const rankingRouter = router({
        )
        .query(async ({ ctx, input }) => {
            const worldState = await ctx.db.worldState.findFirst({
-                select: { meta: true },
+                select: { meta: true, config: true },
            });
            const meta = asRecord(worldState?.meta);
            const isUnited = typeof meta.isUnited === 'number' && meta.isUnited !== 0;
@@ -76,6 +79,7 @@ export const rankingRouter = router({
                        userId: true,
                        picture: true,
                        imageServer: true,
+                        meta: true,
                        experience: true,
                        dedication: true,
                        horseCode: true,
@@ -185,7 +189,7 @@ export const rankingRouter = router({
                        let display = {
                            id: general.id,
                            name: general.name,
-                            ownerName: general.userId ?? null,
+                            ownerName: isUnited ? readOwnerDisplayName(general.meta) : null,
                            nationName: nation?.name ?? '재야',
                            bgColor: nation?.color ?? DEFAULT_BG_COLOR,
                            fgColor: DEFAULT_FG_COLOR,
@@ -217,46 +221,91 @@ export const rankingRouter = router({
            });

            const uniqueItems = await loadUniqueItems();
-            const itemEntries = uniqueItems.map((item) => {
-                const owners = generals.filter((general) => {
-                    if (item.slot === 'horse') {
-                        return general.horseCode === item.key;
+            const itemRegistry = new Map(uniqueItems.map((item) => [item.key, item]));
+            const uniqueConfig = resolveUniqueConfig(asRecord(asRecord(worldState?.config).const));
+            if (Object.keys(uniqueConfig.allItems).length === 0) {
+                uniqueConfig.allItems = buildLegacyDefaultUniqueItemPool(itemRegistry);
+            }
+            const activeAuctions = await ctx.db.auction.findMany({
+                where: {
+                    type: 'UNIQUE_ITEM',
+                    status: { in: ['OPEN', 'FINALIZING'] },
+                    targetCode: { not: null },
+                },
+                select: { targetCode: true },
+            });
+            const auctionCounts = new Map<string, number>();
+            for (const auction of activeAuctions) {
+                if (auction.targetCode) {
+                    auctionCounts.set(auction.targetCode, (auctionCounts.get(auction.targetCode) ?? 0) + 1);
+                }
+            }
+            const slotTitles = {
+                horse: '명 마',
+                weapon: '명 검',
+                book: '명 서',
+                item: '도 구',
+            } as const;
+            const itemEntries = (['horse', 'weapon', 'book', 'item'] as const).map((slot) => {
+                const configuredItems = Object.entries(uniqueConfig.allItems[slot] ?? {}).reverse();
+                const entries = configuredItems.flatMap(([itemKey, rawCount]) => {
+                    const item = itemRegistry.get(itemKey);
+                    if (!item || item.buyable) {
+                        return [];
                    }
-                    if (item.slot === 'weapon') {
-                        return general.weaponCode === item.key;
+                    const owners = generals
+                        .filter((general) => {
+                            if (slot === 'horse') {
+                                return general.horseCode === itemKey;
+                            }
+                            if (slot === 'weapon') {
+                                return general.weaponCode === itemKey;
+                            }
+                            if (slot === 'book') {
+                                return general.bookCode === itemKey;
+                            }
+                            return general.itemCode === itemKey;
+                        })
+                        .map((general) => {
+                            const nation = nationMap.get(general.nationId) ?? null;
+                            return {
+                                id: general.id,
+                                name: general.name,
+                                nationName: nation?.name ?? '재야',
+                                bgColor: nation?.color ?? DEFAULT_BG_COLOR,
+                                fgColor: DEFAULT_FG_COLOR,
+                                picture: general.picture ?? null,
+                                imageServer: general.imageServer ?? 0,
+                            };
+                        });
+                    for (let index = 0; index < (auctionCounts.get(itemKey) ?? 0); index += 1) {
+                        owners.push({
+                            id: 0,
+                            name: '경매중',
+                            nationName: '-',
+                            bgColor: '#00582c',
+                            fgColor: '#ffffff',
+                            picture: null,
+                            imageServer: 0,
+                        });
                    }
-                    if (item.slot === 'book') {
-                        return general.bookCode === item.key;
-                    }
-                    return general.itemCode === item.key;
+                    const count = Math.max(0, Math.floor(rawCount));
+                    return Array.from({ length: count }, (_, index) => ({
+                        itemKey,
+                        itemName: item.name,
+                        itemInfo: item.info,
+                        owner: owners[index] ?? {
+                            id: 0,
+                            name: '미발견',
+                            nationName: '-',
+                            bgColor: DEFAULT_BG_COLOR,
+                            fgColor: DEFAULT_FG_COLOR,
+                            picture: null,
+                            imageServer: 0,
+                        },
+                    }));
                });
-
-                const displayOwners = owners.length
-                    ? owners.map((general) => {
-                          const nation = nationMap.get(general.nationId) ?? null;
-                          return {
-                              id: general.id,
-                              name: general.name,
-                              nationName: nation?.name ?? '재야',
-                              bgColor: nation?.color ?? DEFAULT_BG_COLOR,
-                              fgColor: DEFAULT_FG_COLOR,
-                          };
-                      })
-                    : [
-                          {
-                              id: 0,
-                              name: '미발견',
-                              nationName: '-',
-                              bgColor: DEFAULT_BG_COLOR,
-                              fgColor: DEFAULT_FG_COLOR,
-                          },
-                      ];
-
-                return {
-                    title: item.name,
-                    slot: item.slot,
-                    owners: displayOwners,
-                };
+                return { title: slotTitles[slot], slot, entries };
            });

            return {
@@ -339,6 +388,10 @@ export const rankingRouter = router({
                        return {
                            generalId: row.generalNo,
                            name: String(aux.name ?? ''),
+                            ownerName:
+                                typeof aux.ownerDisplayName === 'string' && aux.ownerDisplayName.length > 0
+                                    ? aux.ownerDisplayName
+                                    : null,
                            nationName: String(aux.nationName ?? ''),
                            bgColor: String(aux.bgColor ?? DEFAULT_BG_COLOR),
                            fgColor: String(aux.fgColor ?? DEFAULT_FG_COLOR),
@@ -0,0 +1,248 @@
+import { describe, expect, it } from 'vitest';
+
+import type { GameSessionTokenPayload } from '@sammo-ts/common/auth/gameToken';
+import type { RedisConnector } from '@sammo-ts/infra';
+
+import { RedisAccessTokenStore } from '../src/auth/accessTokenStore.js';
+import { InMemoryFlushStore } from '../src/auth/flushStore.js';
+import { InMemoryBattleSimTransport } from '../src/battleSim/inMemoryTransport.js';
+import type { DatabaseClient, GameApiContext, GameProfile } from '../src/context.js';
+import { InMemoryTurnDaemonTransport } from '../src/daemon/inMemoryTransport.js';
+import { appRouter } from '../src/router.js';
+
+const profile: GameProfile = {
+    id: 'che',
+    scenario: 'default',
+    name: 'che:default',
+};
+
+const auth: GameSessionTokenPayload = {
+    version: 1,
+    profile: 'che',
+    issuedAt: '2026-07-26T00:00:00.000Z',
+    expiresAt: '2026-07-27T00:00:00.000Z',
+    sessionId: 'ranking-session',
+    user: {
+        id: 'request-user-id',
+        username: 'ranking-user',
+        displayName: '조회자',
+        roles: [],
+    },
+    sanctions: {},
+};
+
+const generalRows = [
+    {
+        id: 1,
+        name: '유비',
+        nationId: 1,
+        userId: 'private-user-id-1',
+        npcState: 0,
+        picture: '1.jpg',
+        imageServer: 0,
+        meta: { ownerName: '공개소유자' },
+        experience: 1200,
+        dedication: 900,
+        horseCode: 'che_명마_15_적토마',
+        weaponCode: 'None',
+        bookCode: 'None',
+        itemCode: 'None',
+    },
+    {
+        id: 2,
+        name: '빙의관우',
+        nationId: 1,
+        userId: 'private-user-id-2',
+        npcState: 1,
+        picture: null,
+        imageServer: 0,
+        meta: { owner_name: '빙의소유자' },
+        experience: 1100,
+        dedication: 800,
+        horseCode: 'None',
+        weaponCode: 'None',
+        bookCode: 'None',
+        itemCode: 'None',
+    },
+    {
+        id: 3,
+        name: 'NPC조조',
+        nationId: 2,
+        userId: null,
+        npcState: 2,
+        picture: null,
+        imageServer: 0,
+        meta: {},
+        experience: 1300,
+        dedication: 1000,
+        horseCode: 'None',
+        weaponCode: 'None',
+        bookCode: 'None',
+        itemCode: 'None',
+    },
+] as const;
+
+const buildContext = (options?: {
+    authenticated?: boolean;
+    isUnited?: boolean;
+    includeOwnerDisplayName?: boolean;
+}): GameApiContext => {
+    const db = {
+        worldState: {
+            findFirst: async () => ({
+                meta: { isUnited: options?.isUnited ? 1 : 0 },
+                config: {
+                    const: {
+                        allItems: {
+                            horse: { che_명마_15_적토마: 2 },
+                            weapon: {},
+                            book: {},
+                            item: {},
+                        },
+                    },
+                },
+            }),
+        },
+        nation: {
+            findMany: async () => [
+                { id: 1, name: '촉', color: '#006400' },
+                { id: 2, name: '위', color: '#8b0000' },
+            ],
+        },
+        general: {
+            findMany: async (args: { where: { npcState: { lt?: number; gte?: number } } }) =>
+                generalRows.filter((general) =>
+                    args.where.npcState.gte !== undefined
+                        ? general.npcState >= args.where.npcState.gte
+                        : general.npcState < (args.where.npcState.lt ?? Number.POSITIVE_INFINITY)
+                ),
+        },
+        rankData: {
+            findMany: async () => [
+                { generalId: 1, type: 'firenum', value: 10 },
+                { generalId: 2, type: 'firenum', value: 20 },
+                { generalId: 3, type: 'firenum', value: 30 },
+            ],
+        },
+        auction: {
+            findMany: async () => [{ targetCode: 'che_명마_15_적토마' }],
+        },
+        gameHistory: {
+            findMany: async () => [
+                { season: 3, scenario: 22, scenarioName: '가상모드22' },
+                { season: 3, scenario: 22, scenarioName: '가상모드22' },
+            ],
+        },
+        hallOfFame: {
+            findMany: async (args: { where: { type: string } }) =>
+                args.where.type === 'experience'
+                    ? [
+                          {
+                              generalNo: 1,
+                              value: 1200,
+                              aux: {
+                                  name: '유비',
+                                  ownerName: 'private-hall-user-id',
+                                  ...(options?.includeOwnerDisplayName ? { ownerDisplayName: '공개소유자' } : {}),
+                                  nationName: '촉',
+                                  bgColor: '#006400',
+                                  fgColor: '#ffffff',
+                              },
+                          },
+                      ]
+                    : [],
+        },
+    };
+    const redis = {
+        get: async () => null,
+        set: async () => null,
+    } as unknown as RedisConnector['client'];
+
+    return {
+        db: db as unknown as DatabaseClient,
+        turnDaemon: new InMemoryTurnDaemonTransport(),
+        battleSim: new InMemoryBattleSimTransport(),
+        profile,
+        auth: options?.authenticated === false ? null : auth,
+        uploadDir: 'uploads',
+        uploadPath: '/uploads',
+        uploadPublicUrl: null,
+        redis,
+        accessTokenStore: new RedisAccessTokenStore(redis, profile.name),
+        flushStore: new InMemoryFlushStore(),
+        gameTokenSecret: 'test-secret',
+    };
+};
+
+describe('ranking.getBestGeneral', () => {
+    it('requires a game login even though the ranking is the same for every authenticated user', async () => {
+        await expect(
+            appRouter.createCaller(buildContext({ authenticated: false })).ranking.getBestGeneral({ view: 'user' })
+        ).rejects.toMatchObject({ code: 'UNAUTHORIZED' });
+    });
+
+    it('keeps possessed generals in the user view and redacts account identifiers before unification', async () => {
+        const result = await appRouter.createCaller(buildContext({ isUnited: false })).ranking.getBestGeneral({
+            view: 'user',
+        });
+
+        expect(result.sections[0]?.entries.map((entry) => entry.id)).toEqual([1, 2]);
+        expect(result.sections[0]?.entries.map((entry) => entry.ownerName)).toEqual([null, null]);
+        expect(result.sections.find((section) => section.title === '계 략 성 공')?.entries).toEqual([
+            expect.objectContaining({ id: 2, name: '???', nationName: '???', ownerName: null }),
+            expect.objectContaining({ id: 1, name: '???', nationName: '???', ownerName: null }),
+        ]);
+        expect(JSON.stringify(result)).not.toContain('private-user-id');
+    });
+
+    it('uses display names only after unification and preserves configured item copies plus auctions', async () => {
+        const result = await appRouter.createCaller(buildContext({ isUnited: true })).ranking.getBestGeneral({
+            view: 'user',
+        });
+
+        expect(result.sections[0]?.entries.map((entry) => entry.ownerName)).toEqual(['공개소유자', '빙의소유자']);
+        expect(result.uniqueItems.find((section) => section.slot === 'horse')?.entries).toEqual([
+            expect.objectContaining({
+                itemKey: 'che_명마_15_적토마',
+                owner: expect.objectContaining({ id: 1, name: '유비' }),
+            }),
+            expect.objectContaining({
+                itemKey: 'che_명마_15_적토마',
+                owner: expect.objectContaining({ id: 0, name: '경매중' }),
+            }),
+        ]);
+        expect(JSON.stringify(result)).not.toContain('private-user-id');
+    });
+
+    it('separates autonomous NPCs from users and possessed generals', async () => {
+        const result = await appRouter.createCaller(buildContext()).ranking.getBestGeneral({ view: 'npc' });
+        expect(result.sections[0]?.entries.map((entry) => entry.id)).toEqual([3]);
+    });
+});
+
+describe('ranking hall of fame', () => {
+    it('remains public and groups scenario counts', async () => {
+        const options = await appRouter
+            .createCaller(buildContext({ authenticated: false }))
+            .ranking.getHallOfFameOptions();
+        expect(options).toEqual([
+            {
+                season: 3,
+                scenarios: [{ id: 22, name: '가상모드22', count: 2 }],
+            },
+        ]);
+    });
+
+    it('returns an explicit display name but never exposes the stored account identifier', async () => {
+        const result = await appRouter
+            .createCaller(buildContext({ authenticated: false, includeOwnerDisplayName: true }))
+            .ranking.getHallOfFame({ season: 3 });
+        expect(result.sections[0]?.entries[0]?.ownerName).toBe('공개소유자');
+        expect(JSON.stringify(result)).not.toContain('private-hall-user-id');
+
+        const redacted = await appRouter
+            .createCaller(buildContext({ authenticated: false }))
+            .ranking.getHallOfFame({ season: 3 });
+        expect(redacted.sections[0]?.entries[0]?.ownerName).toBeNull();
+    });
+});
@@ -1,5 +1,7 @@
 <script setup lang="ts">
-import { computed, onMounted, ref, watch } from 'vue';
+import { onMounted, ref, watch } from 'vue';
+import { useRouter } from 'vue-router';
+
 import { trpc } from '../utils/trpc';

 type RankEntry = {
@@ -11,7 +13,6 @@ type RankEntry = {
    fgColor: string;
    picture: string | null;
    imageServer: number;
-    value: number;
    printValue: string;
 };

@@ -21,18 +22,17 @@ type RankSection = {
    entries: RankEntry[];
 };

-type UniqueOwner = {
-    id: number;
-    name: string;
-    nationName: string;
-    bgColor: string;
-    fgColor: string;
+type UniqueItemEntry = {
+    itemKey: string;
+    itemName: string;
+    itemInfo: string;
+    owner: Omit<RankEntry, 'ownerName' | 'printValue'>;
 };

 type UniqueItemSection = {
    title: string;
    slot: string;
-    owners: UniqueOwner[];
+    entries: UniqueItemEntry[];
 };

 type BestGeneralPayload = {
@@ -41,12 +41,26 @@ type BestGeneralPayload = {
    uniqueItems: UniqueItemSection[];
 };

+const router = useRouter();
 const viewMode = ref<'user' | 'npc'>('user');
 const loading = ref(false);
 const errorMessage = ref('');
 const data = ref<BestGeneralPayload | null>(null);

-const refresh = async () => {
+const imageUrl = (entry: { picture: string | null; imageServer: number }): string => {
+    const picture = entry.picture?.trim() || 'default.jpg';
+    return entry.imageServer ? `${import.meta.env.BASE_URL}d_pic/${picture}` : `/image/icons/${picture}`;
+};
+
+const closePage = async (): Promise<void> => {
+    if (window.opener) {
+        window.close();
+        return;
+    }
+    await router.push('/');
+};
+
+const refresh = async (): Promise<void> => {
    loading.value = true;
    errorMessage.value = '';
    try {
@@ -58,8 +72,6 @@ const refresh = async () => {
    }
 };

-const emptyLabel = computed(() => (loading.value ? '불러오는 중...' : '표시할 데이터가 없습니다.'));
-
 onMounted(() => {
    void refresh();
 });
@@ -70,61 +82,280 @@ watch(viewMode, () => {
 </script>

 <template>
-    <main class="main-page">
-        <header class="page-header">
-            <div>
-                <h1 class="page-title">명장일람</h1>
-                <p class="page-subtitle">전장 기록을 기준으로 장수 순위를 확인합니다.</p>
-            </div>
-            <div class="header-actions">
-                <button class="ghost" :class="{ active: viewMode === 'user' }" @click="viewMode = 'user'">
-                    유저 보기
-                </button>
-                <button class="ghost" :class="{ active: viewMode === 'npc' }" @click="viewMode = 'npc'">
-                    NPC 보기
-                </button>
-                <button class="ghost" @click="refresh">새로고침</button>
-            </div>
-        </header>
+    <main id="best-general-container" class="legacy-ranking-page legacy-bg0">
+        <div class="legacy-ranking-title">
+            명 장 일 람<br />
+            <button class="legacy-button" type="button" @click="closePage">창 닫기</button>
+        </div>

-        <div v-if="errorMessage" class="error">{{ errorMessage }}</div>
-        <div v-else-if="!data" class="placeholder">{{ emptyLabel }}</div>
+        <div class="view-selector" role="group" aria-label="장수 유형">
+            <button
+                class="legacy-button"
+                type="button"
+                :aria-pressed="viewMode === 'user'"
+                @click="viewMode = 'user'"
+            >
+                유저 보기
+            </button>
+            <button
+                class="legacy-button"
+                type="button"
+                :aria-pressed="viewMode === 'npc'"
+                @click="viewMode = 'npc'"
+            >
+                NPC 보기
+            </button>
+        </div>

-        <section v-if="data" class="grid gap-4">
-            <div v-for="section in data.sections" :key="section.title" class="bg-zinc-900 border border-zinc-800 rounded p-4">
-                <h2 class="text-base font-semibold mb-3">{{ section.title }}</h2>
-                <div v-if="section.entries.length === 0" class="text-xs text-zinc-500">{{ emptyLabel }}</div>
-                <ul v-else class="space-y-2">
-                    <li
-                        v-for="entry in section.entries"
-                        :key="entry.id"
-                        class="flex items-center justify-between bg-zinc-950 border border-zinc-800 rounded px-3 py-2 text-sm"
-                    >
-                        <div class="flex items-center gap-2">
-                            <span class="w-2 h-2 rounded-full" :style="{ backgroundColor: entry.bgColor }" />
-                            <span class="font-semibold">{{ entry.name }}</span>
-                            <span class="text-xs text-zinc-400">{{ entry.nationName }}</span>
+        <div v-if="errorMessage" class="legacy-message error" role="alert">{{ errorMessage }}</div>
+        <div v-else-if="loading && !data" class="legacy-message">불러오는 중...</div>
+
+        <section v-if="data" class="ranking-sections" :aria-busy="loading">
+            <article v-for="section in data.sections" :key="section.title" class="rankView legacy-bg0">
+                <h2 class="rankType legacy-bg1">{{ section.title }}</h2>
+                <ul>
+                    <li v-for="(entry, rank) in section.entries" :key="`${section.title}:${entry.id}:${rank}`">
+                        <div class="hall-rank legacy-bg2">{{ rank + 1 }}위</div>
+                        <div class="hall-img">
+                            <img class="generalIcon" :src="imageUrl(entry)" width="64" height="64" :alt="entry.name" />
                        </div>
-                        <div class="text-xs text-zinc-200">{{ entry.printValue }}</div>
+                        <div class="hall-nation" :style="{ backgroundColor: entry.bgColor, color: entry.fgColor }">
+                            {{ entry.nationName || '-' }}
+                        </div>
+                        <div class="hall-name" :style="{ backgroundColor: entry.bgColor, color: entry.fgColor }">
+                            <span>{{ entry.name || '-' }}</span>
+                            <small v-if="entry.ownerName">({{ entry.ownerName }})</small>
+                        </div>
+                        <div class="hall-value">{{ entry.printValue }}</div>
                    </li>
                </ul>
-            </div>
+            </article>
+
+            <article v-for="section in data.uniqueItems" :key="section.slot" class="rankView legacy-bg0">
+                <h2 class="rankType legacy-bg1">{{ section.title }}</h2>
+                <ul>
+                    <li
+                        v-for="(entry, index) in section.entries"
+                        :key="`${entry.itemKey}:${index}`"
+                        class="no-value"
+                    >
+                        <div class="hall-rank legacy-bg2 item-name" :title="entry.itemInfo">{{ entry.itemName }}</div>
+                        <div class="hall-img">
+                            <img
+                                class="generalIcon"
+                                :src="imageUrl(entry.owner)"
+                                width="64"
+                                height="64"
+                                :alt="entry.owner.name"
+                            />
+                        </div>
+                        <div
+                            class="hall-nation"
+                            :style="{ backgroundColor: entry.owner.bgColor, color: entry.owner.fgColor }"
+                        >
+                            {{ entry.owner.nationName || '-' }}
+                        </div>
+                        <div
+                            class="hall-name"
+                            :style="{ backgroundColor: entry.owner.bgColor, color: entry.owner.fgColor }"
+                        >
+                            <span>{{ entry.owner.name || '-' }}</span>
+                        </div>
+                    </li>
+                </ul>
+            </article>
        </section>

-        <section v-if="data" class="mt-6 bg-zinc-900 border border-zinc-800 rounded p-4">
-            <h2 class="text-base font-semibold mb-3">유니크 아이템 소유자</h2>
-            <div class="grid md:grid-cols-2 gap-4">
-                <div v-for="item in data.uniqueItems" :key="item.title" class="bg-zinc-950 border border-zinc-800 rounded p-3">
-                    <h3 class="text-sm font-semibold mb-2">{{ item.title }}</h3>
-                    <ul class="space-y-1 text-xs">
-                        <li v-for="owner in item.owners" :key="owner.id" class="flex items-center gap-2">
-                            <span class="w-2 h-2 rounded-full" :style="{ backgroundColor: owner.bgColor }" />
-                            <span>{{ owner.name }}</span>
-                            <span class="text-zinc-500">{{ owner.nationName }}</span>
-                        </li>
-                    </ul>
-                </div>
-            </div>
-        </section>
+        <div class="legacy-ranking-bottom">
+            <button class="legacy-button" type="button" @click="closePage">창 닫기</button>
+        </div>
+        <footer class="legacy-banner">
+            삼국지 모의전투 HiDCHe core2026 / KOEI의 이미지를 사용, 응용하였습니다 / 제작 : HideD /
+            <a href="https://sam.hided.net/wiki/hidche/credit" target="_blank" rel="noreferrer">Credit</a>
+        </footer>
    </main>
 </template>
+
+<style scoped>
+:global(body) {
+    min-width: 500px;
+    overflow-x: hidden;
+}
+
+.legacy-ranking-page {
+    width: 500px;
+    min-height: 100vh;
+    margin: 0 auto 100px;
+    color: #fff;
+    font-family: Pretendard, 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
+    font-size: 14px;
+}
+
+.legacy-ranking-title,
+.legacy-ranking-bottom {
+    text-align: left;
+}
+
+.view-selector {
+    text-align: center;
+}
+
+.legacy-ranking-title {
+    padding-top: 2px;
+}
+
+.view-selector {
+    padding: 2px 0;
+}
+
+.view-selector .legacy-button + .legacy-button {
+    margin-left: 4px;
+}
+
+.view-selector .legacy-button[aria-pressed='true'] {
+    border-style: inset;
+}
+
+.legacy-button {
+    border: 0;
+    border-radius: 5.25px;
+    background: #375a7f;
+    padding: 5.25px 10.5px;
+    font-weight: 700;
+    line-height: 21px;
+}
+
+.legacy-button:hover,
+.legacy-button:focus,
+.legacy-button:active {
+    background: #6b6b6b;
+}
+
+.legacy-button:focus-visible {
+    outline: revert;
+    outline-offset: 0;
+}
+
+.legacy-message {
+    border: 1px solid gray;
+    padding: 12px;
+    text-align: center;
+}
+
+.legacy-message.error {
+    color: #ff6b6b;
+}
+
+.legacy-banner {
+    font-size: 13px;
+}
+
+.legacy-banner a {
+    color: #fff;
+    text-decoration: underline;
+}
+
+.ranking-sections {
+    display: block;
+}
+
+.rankView {
+    position: relative;
+    margin: auto;
+    outline: 1px solid gray;
+}
+
+.rankType {
+    margin: 0;
+    border-bottom: 1px solid gray;
+    padding: 2px;
+    font-size: calc(19px + 0.784615vw);
+    font-weight: 500;
+    line-height: 1.2;
+    text-align: center;
+}
+
+.rankView ul {
+    display: flex;
+    flex-wrap: wrap;
+    box-sizing: border-box;
+    margin: -1px 0;
+    padding: 0;
+    list-style: none;
+}
+
+.rankView li {
+    box-sizing: border-box;
+    flex: 0 0 100px;
+    width: 100px;
+    min-height: 149px;
+    margin: 0;
+    border-top: 1px solid gray;
+    border-right: 1px solid gray;
+    text-align: center;
+    vertical-align: top;
+}
+
+.rankView li.no-value {
+    min-height: 128px;
+}
+
+.hall-rank,
+.hall-nation,
+.hall-value {
+    border-bottom: 1px solid gray;
+}
+
+.hall-rank.item-name {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.hall-img {
+    height: 64px;
+}
+
+.generalIcon {
+    display: inline-block;
+    width: 64px;
+    height: 64px;
+    object-fit: fill;
+}
+
+.hall-nation,
+.hall-name {
+    font-size: 11px;
+}
+
+.hall-name {
+    display: flex;
+    height: 28px;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.hall-name small {
+    font-size: 95%;
+}
+
+.hall-value {
+    box-sizing: border-box;
+    padding: 3px 0;
+    line-height: 13px;
+}
+
+@media (min-width: 1000px) {
+    :global(body) {
+        min-width: 1000px;
+    }
+
+    .legacy-ranking-page {
+        width: 1000px;
+    }
+
+    .rankType {
+        font-size: 28px;
+    }
+}
+</style>
@@ -135,7 +135,7 @@ onMounted(async () => {
            </select>
        </label>

-        <div v-if="errorMessage" class="legacy-message error">{{ errorMessage }}</div>
+        <div v-if="errorMessage" class="legacy-message error" role="alert">{{ errorMessage }}</div>
        <div v-else-if="loading" class="legacy-message">불러오는 중...</div>
        <div v-else-if="!data" class="legacy-message">표시할 데이터가 없습니다.</div>

@@ -171,6 +171,10 @@ onMounted(async () => {
        <div class="legacy-hall-bottom">
            <button class="legacy-button" type="button" @click="closePage">창 닫기</button>
        </div>
+        <footer class="legacy-banner">
+            삼국지 모의전투 HiDCHe core2026 / KOEI의 이미지를 사용, 응용하였습니다 / 제작 : HideD /
+            <a href="https://sam.hided.net/wiki/hidche/credit" target="_blank" rel="noreferrer">Credit</a>
+        </footer>
    </main>
 </template>

@@ -191,7 +195,7 @@ onMounted(async () => {

 .legacy-hall-title,
 .legacy-hall-bottom {
-    text-align: center;
+    text-align: left;
 }

 .legacy-hall-title {
@@ -205,12 +209,33 @@ onMounted(async () => {
 }

 .scenario-search select {
-    min-width: 220px;
+    width: 189px;
+    height: 20px;
    border: 1px solid #555;
    background: #ddd;
    color: #303030;
 }

+.legacy-button {
+    border: 0;
+    border-radius: 5.25px;
+    background: #375a7f;
+    padding: 5.25px 10.5px;
+    font-weight: 700;
+    line-height: 21px;
+}
+
+.legacy-button:hover,
+.legacy-button:focus,
+.legacy-button:active {
+    background: #6b6b6b;
+}
+
+.legacy-button:focus-visible {
+    outline: revert;
+    outline-offset: 0;
+}
+
 .legacy-message {
    border: 1px solid gray;
    padding: 12px;
@@ -221,6 +246,15 @@ onMounted(async () => {
    color: #ff6b6b;
 }

+.legacy-banner {
+    font-size: 13px;
+}
+
+.legacy-banner a {
+    color: #fff;
+    text-decoration: underline;
+}
+
 .hall-sections {
    display: block;
 }
@@ -235,7 +269,9 @@ onMounted(async () => {
    margin: 0;
    border-bottom: 1px solid gray;
    padding: 2px;
-    font-size: 1.17em;
+    font-size: calc(19px + 0.784615vw);
+    font-weight: 500;
+    line-height: 1.2;
    text-align: center;
 }

@@ -275,7 +311,7 @@ onMounted(async () => {
    display: inline-block;
    width: 64px;
    height: 64px;
-    object-fit: cover;
+    object-fit: fill;
 }

 .hall-server,
@@ -309,5 +345,9 @@ onMounted(async () => {
    .legacy-hall-page {
        width: 1000px;
    }
+
+    .rankType {
+        font-size: 28px;
+    }
 }
 </style>