From f438634b4e066fefe6913a12d6d4b7cf7dfd67b7 Mon Sep 17 00:00:00 2001
From: hided62 <hided62@gmail.com>
Date: Sat, 25 Jul 2026 11:44:35 +0000
Subject: [PATCH] feat(frontend): restore legacy gateway and hall styling

---
 app/game-frontend/src/assets/main.css         |  71 +++-
 .../src/components/ui/PanelCard.vue           |  34 +-
 app/game-frontend/src/env.d.ts                |   1 +
 .../src/views/HallOfFameView.vue              | 302 ++++++++++----
 app/game-frontend/src/views/LoginView.vue     |  42 +-
 .../src/components/MapPreview.vue             |  36 +-
 app/gateway-frontend/src/env.d.ts             |   1 +
 .../src/layouts/DefaultLayout.vue             | 190 +++++++--
 app/gateway-frontend/src/views/HomeView.vue   | 386 +++++++++++++-----
 9 files changed, 832 insertions(+), 231 deletions(-)

diff --git a/app/game-frontend/src/assets/main.css b/app/game-frontend/src/assets/main.css
index ee1697a..6e03e3b 100644
--- a/app/game-frontend/src/assets/main.css
+++ b/app/game-frontend/src/assets/main.css
@@ -1,12 +1,73 @@
 @import 'tailwindcss';
 
 @theme {
-    --color-sammo-ink: #101010;
-    --color-sammo-parchment: #e8ddc4;
-    --color-sammo-gold: #c9a45a;
+    --color-sammo-ink: #000;
+    --color-sammo-parchment: #fff;
+    --color-sammo-gold: #f39c12;
+}
+
+html {
+    color-scheme: dark;
 }
 
 body {
-    @apply bg-sammo-ink text-sammo-parchment;
-    font-family: 'Galmuri11', 'Noto Serif KR', 'Malgun Gothic', serif;
+    min-width: 320px;
+    margin: 0;
+    background: #000;
+    color: #fff;
+    font-family: Pretendard, 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
+    font-size: 14px;
+    line-height: 1.3;
+}
+
+button,
+input,
+select,
+textarea {
+    font: inherit;
+}
+
+.legacy-bg0 {
+    background-color: #302016;
+    background-image: url('/image/game/back_walnut.jpg');
+}
+
+.legacy-bg1 {
+    background-color: #14241b;
+    background-image: url('/image/game/back_green.jpg');
+}
+
+.legacy-bg2 {
+    background-color: #172a52;
+    background-image: url('/image/game/back_blue.jpg');
+}
+
+.legacy-button {
+    display: inline-block;
+    border: 1px solid #12195b;
+    border-radius: 3px;
+    background: #141c65;
+    color: #fff;
+    padding: 5px 10px;
+    font-weight: 700;
+    line-height: 1.5;
+    cursor: pointer;
+}
+
+.legacy-button:hover,
+.legacy-button:focus,
+.legacy-button:active {
+    border-color: #0f154c;
+    background: #101651;
+    color: #fff;
+}
+
+.legacy-button:focus-visible {
+    outline: 2px solid #f39c12;
+    outline-offset: 1px;
+}
+
+.legacy-button:disabled {
+    cursor: default;
+    opacity: 0.65;
 }
diff --git a/app/game-frontend/src/components/ui/PanelCard.vue b/app/game-frontend/src/components/ui/PanelCard.vue
index 4fc4f76..b8891ce 100644
--- a/app/game-frontend/src/components/ui/PanelCard.vue
+++ b/app/game-frontend/src/components/ui/PanelCard.vue
@@ -26,32 +26,33 @@ defineProps<Props>();
 
 <style scoped>
 .panel-card {
-    border: 1px solid rgba(201, 164, 90, 0.4);
-    background: rgba(12, 12, 12, 0.8);
-    padding: 12px;
+    border: 1px solid gray;
+    background-color: #302016;
+    background-image: url('/image/game/back_walnut.jpg');
 }
 
 .panel-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    gap: 12px;
-    border-bottom: 1px solid rgba(201, 164, 90, 0.3);
-    padding-bottom: 8px;
-    margin-bottom: 10px;
+    gap: 8px;
+    border-bottom: 1px solid gray;
+    background-color: #14241b;
+    background-image: url('/image/game/back_green.jpg');
+    padding: 3px 6px;
 }
 
 .panel-title {
-    font-size: 1rem;
-    font-weight: 600;
-    color: #e8ddc4;
-    letter-spacing: 0.02em;
+    margin: 0;
+    color: #fff;
+    font-size: 14px;
+    font-weight: 700;
 }
 
 .panel-subtitle {
-    margin-top: 4px;
-    font-size: 0.75rem;
-    color: rgba(232, 221, 196, 0.7);
+    margin: 1px 0 0;
+    color: #ccc;
+    font-size: 11px;
 }
 
 .panel-actions {
@@ -61,7 +62,8 @@ defineProps<Props>();
 }
 
 .panel-body {
-    font-size: 0.9rem;
-    color: rgba(232, 221, 196, 0.9);
+    padding: 6px;
+    color: #fff;
+    font-size: 14px;
 }
 </style>
diff --git a/app/game-frontend/src/env.d.ts b/app/game-frontend/src/env.d.ts
index 2be9cd0..2818d84 100644
--- a/app/game-frontend/src/env.d.ts
+++ b/app/game-frontend/src/env.d.ts
@@ -13,6 +13,7 @@ interface ImportMetaEnv {
     readonly VITE_GAME_SSE_URL?: string;
     readonly VITE_GAME_ASSET_URL?: string;
     readonly VITE_GAME_PROFILE?: string;
+    readonly VITE_GATEWAY_WEB_URL?: string;
 }
 
 interface ImportMeta {
diff --git a/app/game-frontend/src/views/HallOfFameView.vue b/app/game-frontend/src/views/HallOfFameView.vue
index 49e22e7..3ea0afa 100644
--- a/app/game-frontend/src/views/HallOfFameView.vue
+++ b/app/game-frontend/src/views/HallOfFameView.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import { computed, onMounted, ref, watch } from 'vue';
+import { useRouter } from 'vue-router';
+
 import { trpc } from '../utils/trpc';
 
 type HallOption = {
@@ -10,16 +12,19 @@ type HallOption = {
 type HallEntry = {
     generalId: number;
     name: string;
+    ownerName?: string | null;
     nationName: string;
     bgColor: string;
     fgColor: string;
+    picture?: string | null;
+    imageServer?: number;
     value: number;
     printValue: string;
-    serverName: string;
-    serverIdx: number;
-    scenarioName: string;
-    startTime: string | null;
-    unitedTime: string | null;
+    serverName?: string;
+    serverIdx?: number;
+    scenarioName?: string;
+    startTime?: string | null;
+    unitedTime?: string | null;
 };
 
 type HallSection = {
@@ -32,6 +37,7 @@ type HallPayload = {
     sections: HallSection[];
 };
 
+const router = useRouter();
 const loading = ref(false);
 const errorMessage = ref('');
 const options = ref<HallOption[]>([]);
@@ -39,14 +45,34 @@ const selectedSeason = ref<number | null>(null);
 const selectedScenario = ref<number | null>(null);
 const data = ref<HallPayload | null>(null);
 
-const selectedSeasonOptions = computed(() => {
-    if (selectedSeason.value === null) {
-        return [];
-    }
-    return options.value.find((season) => season.season === selectedSeason.value)?.scenarios ?? [];
+const selection = computed({
+    get: () =>
+        selectedSeason.value === null
+            ? ''
+            : selectedScenario.value === null
+              ? `season:${selectedSeason.value}`
+              : `scenario:${selectedSeason.value}:${selectedScenario.value}`,
+    set: (value: string) => {
+        const [kind, season, scenario] = value.split(':');
+        selectedSeason.value = Number(season);
+        selectedScenario.value = kind === 'scenario' ? Number(scenario) : null;
+    },
 });
 
-const loadOptions = async () => {
+const imageUrl = (entry: HallEntry): 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 loadOptions = async (): Promise<void> => {
     try {
         options.value = await trpc.ranking.getHallOfFameOptions.query();
         if (options.value.length > 0 && selectedSeason.value === null) {
@@ -57,7 +83,7 @@ const loadOptions = async () => {
     }
 };
 
-const loadHall = async () => {
+const loadHall = async (): Promise<void> => {
     if (selectedSeason.value === null) {
         data.value = null;
         return;
@@ -65,11 +91,10 @@ const loadHall = async () => {
     loading.value = true;
     errorMessage.value = '';
     try {
-        const result = await trpc.ranking.getHallOfFame.query({
+        data.value = (await trpc.ranking.getHallOfFame.query({
             season: selectedSeason.value,
             scenario: selectedScenario.value ?? undefined,
-        });
-        data.value = result as HallPayload;
+        })) as HallPayload;
     } catch (error) {
         errorMessage.value = error instanceof Error ? error.message : '명예의 전당 데이터를 불러오지 못했습니다.';
     } finally {
@@ -77,12 +102,7 @@ const loadHall = async () => {
     }
 };
 
-watch(selectedSeason, () => {
-    selectedScenario.value = null;
-    void loadHall();
-});
-
-watch(selectedScenario, () => {
+watch([selectedSeason, selectedScenario], () => {
     void loadHall();
 });
 
@@ -93,63 +113,201 @@ onMounted(async () => {
 </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" @click="loadOptions">목록 새로고침</button>
-                <button class="ghost" @click="loadHall">데이터 새로고침</button>
-            </div>
-        </header>
-
-        <div class="bg-zinc-900 border border-zinc-800 rounded p-4 mb-4">
-            <div class="grid md:grid-cols-2 gap-4">
-                <label class="flex flex-col gap-2 text-sm">
-                    <span class="text-xs text-zinc-400">시즌 선택</span>
-                    <select v-model.number="selectedSeason" class="bg-zinc-950 border border-zinc-700 rounded px-3 py-2">
-                        <option v-for="season in options" :key="season.season" :value="season.season">
-                            시즌 {{ season.season }}
-                        </option>
-                    </select>
-                </label>
-                <label class="flex flex-col gap-2 text-sm">
-                    <span class="text-xs text-zinc-400">시나리오 선택</span>
-                    <select v-model.number="selectedScenario" class="bg-zinc-950 border border-zinc-700 rounded px-3 py-2">
-                        <option :value="null">전체</option>
-                        <option v-for="scenario in selectedSeasonOptions" :key="scenario.id" :value="scenario.id">
-                            {{ scenario.name }} ({{ scenario.count }}회)
-                        </option>
-                    </select>
-                </label>
-            </div>
+    <main id="container" class="legacy-hall-page legacy-bg0">
+        <div class="legacy-hall-title">
+            명 예 의 전 당<br />
+            <button class="legacy-button" type="button" @click="closePage">창 닫기</button>
         </div>
 
-        <div v-if="errorMessage" class="error">{{ errorMessage }}</div>
-        <div v-else-if="loading" class="placeholder">불러오는 중...</div>
-        <div v-else-if="!data" class="placeholder">표시할 데이터가 없습니다.</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">표시할 데이터가 없습니다.</div>
-                <ul v-else class="space-y-2">
-                    <li
-                        v-for="entry in section.entries"
-                        :key="entry.generalId"
-                        class="flex items-center justify-between bg-zinc-950 border border-zinc-800 rounded px-3 py-2 text-sm"
+        <label class="scenario-search">
+            시나리오 검색 :
+            <select v-model="selection" aria-label="시나리오 검색">
+                <template v-for="season in options" :key="season.season">
+                    <option :value="`season:${season.season}`">* 시즌 : {{ season.season }} 종합 *</option>
+                    <option
+                        v-for="scenario in season.scenarios"
+                        :key="`${season.season}:${scenario.id}`"
+                        :value="`scenario:${season.season}:${scenario.id}`"
                     >
-                        <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>
+                        {{ scenario.name }}({{ scenario.count }}회)
+                    </option>
+                </template>
+            </select>
+        </label>
+
+        <div v-if="errorMessage" class="legacy-message error">{{ errorMessage }}</div>
+        <div v-else-if="loading" class="legacy-message">불러오는 중...</div>
+        <div v-else-if="!data" class="legacy-message">표시할 데이터가 없습니다.</div>
+
+        <section v-if="data" class="hall-sections">
+            <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.generalId}:${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
+                            v-if="entry.serverName"
+                            class="hall-server"
+                            :title="`${entry.scenarioName ?? ''} ${entry.startTime ?? ''} ~ ${entry.unitedTime ?? ''}`"
+                        >
+                            {{ entry.serverName }}{{ entry.serverIdx }}기
+                        </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>
         </section>
+
+        <div class="legacy-hall-bottom">
+            <button class="legacy-button" type="button" @click="closePage">창 닫기</button>
+        </div>
     </main>
 </template>
+
+<style scoped>
+:global(body) {
+    min-width: 500px;
+    overflow-x: hidden;
+}
+
+.legacy-hall-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-hall-title,
+.legacy-hall-bottom {
+    text-align: center;
+}
+
+.legacy-hall-title {
+    padding-top: 2px;
+}
+
+.scenario-search {
+    display: block;
+    padding: 2px 0;
+    text-align: center;
+}
+
+.scenario-search select {
+    min-width: 220px;
+    border: 1px solid #555;
+    background: #ddd;
+    color: #303030;
+}
+
+.legacy-message {
+    border: 1px solid gray;
+    padding: 12px;
+    text-align: center;
+}
+
+.legacy-message.error {
+    color: #ff6b6b;
+}
+
+.hall-sections {
+    display: block;
+}
+
+.rankView {
+    position: relative;
+    margin: auto;
+    outline: 1px solid gray;
+}
+
+.rankType {
+    margin: 0;
+    border-bottom: 1px solid gray;
+    padding: 2px;
+    font-size: 1.17em;
+    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;
+}
+
+.hall-rank,
+.hall-server,
+.hall-nation,
+.hall-value {
+    border-bottom: 1px solid gray;
+}
+
+.hall-img {
+    height: 64px;
+}
+
+.generalIcon {
+    display: inline-block;
+    width: 64px;
+    height: 64px;
+    object-fit: cover;
+}
+
+.hall-server,
+.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-hall-page {
+        width: 1000px;
+    }
+}
+</style>
diff --git a/app/game-frontend/src/views/LoginView.vue b/app/game-frontend/src/views/LoginView.vue
index 23937d6..8bd53ff 100644
--- a/app/game-frontend/src/views/LoginView.vue
+++ b/app/game-frontend/src/views/LoginView.vue
@@ -1,8 +1,42 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { onMounted } from 'vue';
+
+const gatewayUrl = import.meta.env.VITE_GATEWAY_WEB_URL || '/gateway/';
+
+onMounted(() => {
+    window.location.replace(gatewayUrl);
+});
+</script>
 
 <template>
-    <main class="min-h-screen px-6 py-8">
-        <h1 class="text-2xl font-semibold">Login</h1>
-        <p class="mt-2 text-sm text-amber-200/80">Authentication entry point.</p>
+    <main class="login-redirect legacy-bg0">
+        <h1>로그인 화면으로 이동합니다.</h1>
+        <p>자동으로 이동하지 않으면 아래 버튼을 눌러 주세요.</p>
+        <a class="legacy-button" :href="gatewayUrl">통합 로그인</a>
     </main>
 </template>
+
+<style scoped>
+.login-redirect {
+    box-sizing: border-box;
+    min-width: 500px;
+    min-height: 100vh;
+    padding: 40px 10px;
+    text-align: center;
+}
+
+h1 {
+    margin: 0 0 12px;
+    font-size: 20px;
+    font-weight: 400;
+}
+
+p {
+    margin: 0 0 16px;
+    color: #ccc;
+}
+
+a {
+    text-decoration: none;
+}
+</style>
diff --git a/app/gateway-frontend/src/components/MapPreview.vue b/app/gateway-frontend/src/components/MapPreview.vue
index 71a749f..e7e1d6a 100644
--- a/app/gateway-frontend/src/components/MapPreview.vue
+++ b/app/gateway-frontend/src/components/MapPreview.vue
@@ -39,10 +39,22 @@ const props = defineProps<{
 
 const BASE_MAP_WIDTH = 700;
 const BASE_MAP_HEIGHT = 500;
-const MAP_SCALE = 0.45;
 
-const mapWidth = computed(() => `${BASE_MAP_WIDTH * MAP_SCALE}px`);
-const mapHeight = computed(() => `${BASE_MAP_HEIGHT * MAP_SCALE}px`);
+const assetBase = computed(() => (import.meta.env.VITE_GAME_ASSET_URL ?? '/image').replace(/\/+$/, ''));
+const season = computed(() => {
+    if (props.mapData.month <= 3) return 'spring';
+    if (props.mapData.month <= 6) return 'summer';
+    if (props.mapData.month <= 9) return 'fall';
+    return 'winter';
+});
+const mapBackground = computed(() => {
+    const theme = props.mapLayout.mapName;
+    if (theme === 'ludo_rathowm') return `${assetBase.value}/game/map/ludo_rathowm/back.jpg`;
+    if (theme === 'chess') return `${assetBase.value}/game/map/chess/chessboard.png`;
+    if (theme === 'pokemon_v1') return `${assetBase.value}/game/map/pokemon_v1/back_pal8.png`;
+    if (theme === 'cr') return `${assetBase.value}/game/map/cr/bg-fs8.png`;
+    return `${assetBase.value}/game/map/che/bg_${season.value}.jpg`;
+});
 
 const nationById = computed(() => {
     const map = new Map<number, { name: string; color: string; capitalCityId: number }>();
@@ -74,8 +86,8 @@ const cityDots = computed<CityDot[]>(() => {
         return {
             id: layoutCity.id,
             name: layoutCity.name,
-            x: layoutCity.x * MAP_SCALE,
-            y: layoutCity.y * MAP_SCALE,
+            x: (layoutCity.x / BASE_MAP_WIDTH) * 100,
+            y: (layoutCity.y / BASE_MAP_HEIGHT) * 100,
             color: nation?.color ?? '#666666',
             isCapital: nation?.capitalCityId === layoutCity.id,
         };
@@ -89,14 +101,14 @@ const cityDots = computed<CityDot[]>(() => {
             <span class="map-preview-title">{{ props.mapLayout.mapName }}</span>
             <span class="map-preview-date">{{ props.mapData.year }}년 {{ props.mapData.month }}월</span>
         </div>
-        <div class="map-preview-body" :style="{ width: mapWidth, height: mapHeight }">
+        <div class="map-preview-body" :style="{ backgroundImage: `url('${mapBackground}')` }">
             <div
                 v-for="city in cityDots"
                 :key="city.id"
                 class="city-dot"
                 :class="{ capital: city.isCapital }"
                 :title="city.name"
-                :style="{ left: `${city.x}px`, top: `${city.y}px`, backgroundColor: city.color }"
+                :style="{ left: `${city.x}%`, top: `${city.y}%`, backgroundColor: city.color }"
             />
         </div>
     </div>
@@ -105,6 +117,7 @@ const cityDots = computed<CityDot[]>(() => {
 <style scoped>
 .map-preview {
     display: flex;
+    width: 100%;
     flex-direction: column;
     gap: 6px;
 }
@@ -122,8 +135,13 @@ const cityDots = computed<CityDot[]>(() => {
 
 .map-preview-body {
     position: relative;
-    border: 1px dashed rgba(201, 164, 90, 0.4);
-    background: rgba(8, 8, 8, 0.7);
+    width: 100%;
+    aspect-ratio: 7 / 5;
+    overflow: hidden;
+    border: 1px solid #444;
+    background-color: #080808;
+    background-position: center;
+    background-size: 100% 100%;
 }
 
 .city-dot {
diff --git a/app/gateway-frontend/src/env.d.ts b/app/gateway-frontend/src/env.d.ts
index a0b19d1..a816649 100644
--- a/app/gateway-frontend/src/env.d.ts
+++ b/app/gateway-frontend/src/env.d.ts
@@ -10,6 +10,7 @@ interface ImportMetaEnv {
     readonly VITE_APP_BASE_PATH?: string;
     readonly VITE_GATEWAY_API_URL?: string;
     readonly VITE_GAME_API_URL_TEMPLATE?: string;
+    readonly VITE_GAME_ASSET_URL?: string;
     readonly VITE_GAME_WEB_URL?: string;
     readonly VITE_GAME_WEB_URL_TEMPLATE?: string;
 }
diff --git a/app/gateway-frontend/src/layouts/DefaultLayout.vue b/app/gateway-frontend/src/layouts/DefaultLayout.vue
index 3908829..bc40d8e 100644
--- a/app/gateway-frontend/src/layouts/DefaultLayout.vue
+++ b/app/gateway-frontend/src/layouts/DefaultLayout.vue
@@ -1,44 +1,170 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const menuOpen = ref(false);
+</script>
 
 <template>
-    <div class="min-h-screen flex flex-col bg-black text-gray-200">
-        <!-- Header / Navigation -->
-        <header class="bg-zinc-900 border-b border-zinc-800 py-2 px-4">
-            <div class="max-w-6xl mx-auto flex justify-between items-center">
-                <div class="flex items-center space-x-6">
-                    <h1 class="text-xl font-bold text-white">삼국지 모의전투 HiDCHe</h1>
-                    <nav class="hidden md:flex space-x-4 text-sm">
-                        <a href="#" class="hover:text-white">공지사항</a>
-                        <a href="#" class="hover:text-white">커뮤니티</a>
-                        <a href="#" class="hover:text-white">건의/제안/개발</a>
-                        <a href="#" class="hover:text-white">신고/문의</a>
-                        <a href="#" class="hover:text-white">자주 묻는 질문</a>
-                        <a href="#" class="hover:text-white">패치 내역</a>
-                        <a href="#" class="hover:text-white">Git Repo.</a>
-                        <a href="#" class="hover:text-white">위키</a>
-                        <RouterLink to="/admin" class="hover:text-white">관리자</RouterLink>
-                    </nav>
-                </div>
-                <div class="flex space-x-4 text-sm">
-                    <a href="#" class="hover:text-white">공식 오픈 톡</a>
-                    <a href="#" class="hover:text-white">잡담 오픈 톡</a>
-                </div>
+    <div class="gateway-layout">
+        <header class="gateway-navbar">
+            <div class="navbar-inner">
+                <RouterLink class="navbar-brand" to="/">삼국지 모의전투 HiDCHe</RouterLink>
+                <button
+                    class="navbar-toggler"
+                    type="button"
+                    :aria-expanded="menuOpen"
+                    aria-controls="gateway-navigation"
+                    aria-label="메뉴 열기"
+                    @click="menuOpen = !menuOpen"
+                >
+                    <span></span><span></span><span></span>
+                </button>
+                <nav id="gateway-navigation" :class="{ open: menuOpen }">
+                    <a href="/bbs/board" target="_blank" rel="noreferrer">삼모게시판</a>
+                    <a href="/bbs/tip" target="_blank" rel="noreferrer">팁/강좌</a>
+                    <a href="/bbs/news" target="_blank" rel="noreferrer">삼국 일보</a>
+                    <a href="/bbs/history2" target="_blank" rel="noreferrer">개인 열전</a>
+                    <a href="/bbs/history3" target="_blank" rel="noreferrer">국가 열전</a>
+                    <a href="/bbs/patch" target="_blank" rel="noreferrer">패치 내역</a>
+                </nav>
             </div>
         </header>
 
-        <!-- Main Content -->
-        <main class="flex-grow">
+        <main>
             <slot />
         </main>
 
-        <!-- Footer -->
-        <footer class="bg-zinc-900 border-t border-zinc-800 py-6 px-4 text-center text-xs text-zinc-500">
-            <div class="space-x-4 mb-2">
-                <a href="#" class="hover:text-zinc-300">개인정보처리방침</a>
-                <a href="#" class="hover:text-zinc-300">이용약관</a>
-            </div>
+        <footer>
+            <p>
+                <a href="./terms.2.html">개인정보처리방침</a>
+                &amp;
+                <a href="./terms.1.html">이용약관</a>
+            </p>
             <p>© 2023 • HideD</p>
-            <p class="mt-1">크롬, 엣지, 파이어폭스에 최적화되어있습니다.</p>
+            <p>크롬, 엣지, 파이어폭스에 최적화되어있습니다.</p>
         </footer>
     </div>
 </template>
+
+<style scoped>
+.gateway-layout {
+    display: flex;
+    min-height: 100vh;
+    flex-direction: column;
+    background: #000;
+    color: #fff;
+}
+
+.gateway-layout > main {
+    flex: 1;
+}
+
+.gateway-navbar {
+    position: fixed;
+    z-index: 100;
+    top: 0;
+    right: 0;
+    left: 0;
+    min-height: 56px;
+    border-bottom: 1px solid #222;
+    background: #303030;
+}
+
+.navbar-inner {
+    display: flex;
+    min-height: 56px;
+    align-items: center;
+    padding: 0 1px;
+}
+
+.navbar-brand {
+    margin-right: 16px;
+    padding: 5px 0;
+    color: #fff;
+    font-size: 20px;
+    line-height: 30px;
+    text-decoration: none;
+    white-space: nowrap;
+}
+
+nav {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+}
+
+nav a {
+    color: rgb(255 255 255 / 55%);
+    font-size: 14px;
+    text-decoration: none;
+}
+
+nav a:hover,
+nav a:focus {
+    color: #fff;
+}
+
+.navbar-toggler {
+    display: none;
+    width: 56px;
+    height: 42px;
+    margin-left: auto;
+    border: 1px solid rgb(255 255 255 / 15%);
+    border-radius: 6px;
+    background: transparent;
+    padding: 8px 12px;
+}
+
+.navbar-toggler span {
+    display: block;
+    height: 2px;
+    margin: 5px 0;
+    background: rgb(255 255 255 / 55%);
+}
+
+footer {
+    border-top: 1px solid #303030;
+    background: #171719;
+    padding: 24px 16px;
+    color: #666;
+    font-size: 12px;
+    text-align: center;
+}
+
+footer p {
+    margin: 2px 0;
+}
+
+footer a {
+    color: #666;
+}
+
+@media (max-width: 759px) {
+    .navbar-inner {
+        flex-wrap: wrap;
+        padding: 8px 1px;
+    }
+
+    .navbar-toggler {
+        display: block;
+    }
+
+    nav {
+        display: none;
+        width: 100%;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 0;
+        padding: 8px 12px;
+    }
+
+    nav.open {
+        display: flex;
+    }
+
+    nav a {
+        width: 100%;
+        padding: 7px 0;
+    }
+}
+</style>
diff --git a/app/gateway-frontend/src/views/HomeView.vue b/app/gateway-frontend/src/views/HomeView.vue
index 6aeebec..10e53c5 100644
--- a/app/gateway-frontend/src/views/HomeView.vue
+++ b/app/gateway-frontend/src/views/HomeView.vue
@@ -1,130 +1,330 @@
 <script setup lang="ts">
-import { ref, onMounted } from 'vue';
+import { computed, onMounted, ref } from 'vue';
 import { useRouter } from 'vue-router';
+import type { inferRouterOutputs } from '@trpc/server';
+import type { AppRouter } from '@sammo-ts/gateway-api';
+
+import MapPreview from '../components/MapPreview.vue';
 import DefaultLayout from '../layouts/DefaultLayout.vue';
+import { createGameTrpc, type GameRouter } from '../utils/gameTrpc';
 import { trpc } from '../utils/trpc';
 
+type GatewayOutput = inferRouterOutputs<AppRouter>;
+type GameOutput = inferRouterOutputs<GameRouter>;
+type LobbyProfile = GatewayOutput['lobby']['profiles'][number];
+type LobbyInfo = GameOutput['lobby']['info'];
+type PublicMap = GameOutput['public']['getCachedMap'];
+type PublicMapLayout = GameOutput['public']['getMapLayout'];
+
 const router = useRouter();
 const username = ref('');
 const password = ref('');
+const loginError = ref('');
+const loginLoading = ref(false);
+const statusLoading = ref(false);
+const statusError = ref('');
+const profile = ref<LobbyProfile | null>(null);
+const info = ref<LobbyInfo | null>(null);
+const mapData = ref<PublicMap | null>(null);
+const mapLayout = ref<PublicMapLayout | null>(null);
+
+const statusTitle = computed(() => `${profile.value?.korName ?? '체'} 현황`);
+const dateText = computed(() => {
+    if (!info.value) {
+        return '';
+    }
+    return `西紀 ${info.value.year}年 ${info.value.month}月`;
+});
+
+const loadPublicStatus = async (): Promise<void> => {
+    statusLoading.value = true;
+    statusError.value = '';
+    try {
+        const profiles = await trpc.lobby.profiles.query();
+        profile.value =
+            profiles.find((entry) => entry.status === 'RUNNING') ??
+            profiles.find((entry) => entry.status === 'PREOPEN') ??
+            profiles[0] ??
+            null;
+        if (!profile.value) {
+            statusError.value = '공개 중인 서버가 없습니다.';
+            return;
+        }
+        const game = createGameTrpc(profile.value.profile, profile.value.apiPort);
+        const [nextInfo, nextLayout, nextMap] = await Promise.all([
+            game.lobby.info.query(),
+            game.public.getMapLayout.query(),
+            game.public.getCachedMap.query(),
+        ]);
+        info.value = nextInfo;
+        mapLayout.value = nextLayout;
+        mapData.value = nextMap;
+    } catch (error) {
+        statusError.value = error instanceof Error ? error.message : '서버 현황을 불러오지 못했습니다.';
+    } finally {
+        statusLoading.value = false;
+    }
+};
 
 onMounted(async () => {
     try {
         const me = await trpc.me.query();
         if (me) {
             await router.push('/lobby');
+            return;
         }
-    } catch (e) {
-        // Not logged in or error
+    } catch {
+        // 공개 로그인 화면은 API 상태 메시지와 함께 계속 표시한다.
     }
+    await loadPublicStatus();
 });
 
-const handleLogin = async () => {
+const handleLogin = async (): Promise<void> => {
+    loginError.value = '';
+    loginLoading.value = true;
     try {
-        // TODO: Implement login mutation
-        // const result = await trpc.auth.login.mutation({ username: username.value, password: password.value });
-        // if (result.success) router.push('/lobby');
-        console.log('Login attempt:', username.value);
-    } catch (e) {
-        alert('로그인 실패');
+        const result = await trpc.auth.login.mutate({
+            username: username.value,
+            password: password.value,
+        });
+        window.localStorage.setItem('sammo-session-token', result.sessionToken);
+        await router.push('/lobby');
+    } catch (error) {
+        loginError.value = error instanceof Error ? error.message : '로그인에 실패했습니다.';
+    } finally {
+        loginLoading.value = false;
     }
 };
 
-const handleJoin = () => {
-    console.log('Join attempt');
+const handleKakao = async (): Promise<void> => {
+    loginError.value = '';
+    try {
+        const result = await trpc.auth.kakaoStart.query({ mode: 'login' });
+        window.location.assign(result.authUrl);
+    } catch (error) {
+        loginError.value = error instanceof Error ? error.message : '카카오 로그인을 시작하지 못했습니다.';
+    }
 };
 </script>
 
 <template>
     <DefaultLayout>
-        <div class="max-w-4xl mx-auto py-12 px-4 flex flex-col items-center space-y-12">
-            <!-- Logo / Title -->
-            <div class="text-center">
-                <h2 class="text-4xl font-serif font-bold text-white tracking-widest">삼국지 모의전투 HiDCHe</h2>
-            </div>
+        <div class="gateway-home">
+            <h2>삼국지 모의전투 HiDCHe</h2>
 
-            <!-- Login Box -->
-            <div class="w-full max-w-md bg-zinc-800 border border-zinc-700 rounded shadow-2xl overflow-hidden">
-                <div class="bg-zinc-700 px-6 py-2 text-center font-bold text-white border-b border-zinc-600">
-                    로그인
-                </div>
-                <div class="p-6 space-y-4">
-                    <div class="flex items-center space-x-4">
-                        <label class="w-20 text-sm font-medium">계정명</label>
-                        <input
-                            v-model="username"
-                            type="text"
-                            class="flex-grow bg-zinc-900 border border-zinc-600 rounded px-3 py-1.5 text-white focus:outline-none focus:border-blue-500"
-                            placeholder="계정명"
-                        />
-                    </div>
-                    <div class="flex items-center space-x-4">
-                        <label class="w-20 text-sm font-medium">비밀번호</label>
-                        <input
-                            v-model="password"
-                            type="password"
-                            class="flex-grow bg-zinc-900 border border-zinc-600 rounded px-3 py-1.5 text-white focus:outline-none focus:border-blue-500"
-                            placeholder="비밀번호"
-                        />
-                    </div>
-                    <div class="flex space-x-2 pt-2">
-                        <button
-                            class="flex-1 bg-yellow-600 hover:bg-yellow-500 text-black font-bold py-2 rounded transition-colors flex items-center justify-center space-x-2"
-                            @click="handleJoin"
-                        >
-                            <span>가입 & 로그인</span>
-                        </button>
-                        <button
-                            class="flex-[2] bg-blue-700 hover:bg-blue-600 text-white font-bold py-2 rounded transition-colors"
-                            @click="handleLogin"
-                        >
-                            로그인
-                        </button>
-                    </div>
-                </div>
-            </div>
+            <section id="login_card" class="login-card">
+                <h3>로그인</h3>
+                <form id="main_form" @submit.prevent="handleLogin">
+                    <label for="username">계정명</label>
+                    <input
+                        id="username"
+                        v-model="username"
+                        autocomplete="username"
+                        type="text"
+                        placeholder="계정명"
+                        autofocus
+                        required
+                    />
+                    <label for="password">비밀번호</label>
+                    <input
+                        id="password"
+                        v-model="password"
+                        autocomplete="current-password"
+                        type="password"
+                        placeholder="비밀번호"
+                        required
+                    />
+                    <button id="btn_kakao_login" class="kakao-button" type="button" @click="handleKakao">
+                        가입&amp;<br />로그인
+                    </button>
+                    <button class="login-button" type="submit" :disabled="loginLoading">
+                        {{ loginLoading ? '로그인 중…' : '로그인' }}
+                    </button>
+                </form>
+                <p v-if="loginError" class="login-error" role="alert">{{ loginError }}</p>
+            </section>
 
-            <!-- Server Status Placeholder -->
-            <div class="w-full max-w-2xl bg-zinc-900 border border-zinc-800 rounded-lg overflow-hidden shadow-xl">
-                <div class="bg-zinc-800 px-4 py-2 border-b border-zinc-700 flex justify-between items-center">
-                    <span class="font-bold text-sm">체 현황</span>
-                    <span class="text-xs text-zinc-400">西紀 197年 7月 秋</span>
+            <section id="map-subframe" class="status-card">
+                <header>
+                    <strong>{{ statusTitle }}</strong>
+                    <span>{{ dateText }}</span>
+                </header>
+                <div v-if="mapData && mapLayout" class="map-frame">
+                    <MapPreview :map-data="mapData" :map-layout="mapLayout" />
                 </div>
-                <div class="aspect-video bg-zinc-950 relative flex items-center justify-center">
-                    <!-- Map Placeholder -->
-                    <div class="text-zinc-700 text-lg italic">지도 이미지 및 현황 데이터 영역</div>
-
-                    <!-- Example of a city dot if we wanted to mock it -->
-                    <div class="absolute bottom-4 right-4 text-[10px] text-blue-400">도시명 표기 끄기</div>
+                <div v-else class="status-message">
+                    {{ statusLoading ? '현황을 불러오는 중…' : statusError }}
                 </div>
-                <div class="p-4 bg-black text-xs space-y-1 font-mono">
-                    <div class="flex items-start space-x-2">
-                        <span class="text-blue-400">◆</span>
-                        <span
-                            >197년 7월: [대회] 황제 수장의 명으로 전력전 대회가 개최됩니다! 천하의 영웅들을 모집하고
-                            있습니다!</span
-                        >
-                    </div>
-                    <div class="flex items-start space-x-2">
-                        <span class="text-cyan-400">●</span>
-                        <span>197년 7월: [재난] 탐라 호토에 메뚜기 떼가 발생하여 도시가 황폐해지고 있습니다.</span>
-                    </div>
-                    <div class="flex items-start space-x-2">
-                        <span class="text-green-400">●</span>
-                        <span>197년 7월: [자금] 가을이 되어 봉록에 따라 군량이 지급됩니다.</span>
-                    </div>
-                    <div class="flex items-start space-x-2">
-                        <span class="text-red-400">●</span>
-                        <span>197년 4월: [재난] 남피, 무안에 홍수로 인해 피해가 급증하고 있습니다.</span>
-                    </div>
-                    <!-- ... more logs ... -->
-                    <div class="text-zinc-600 pt-2 italic text-center">최근 진행 상황 로그 (Placeholder)</div>
-                </div>
-            </div>
+                <ul v-if="info" class="status-summary">
+                    <li>서버: {{ profile?.korName }} / 시나리오: {{ profile?.scenario }}</li>
+                    <li>유저 {{ info.userCnt }}명 · NPC {{ info.npcCnt }}명 · {{ info.nationCnt }}국 경쟁중</li>
+                    <li>{{ info.turnTerm }}분 턴 서버</li>
+                </ul>
+                <button type="button" class="refresh-button" :disabled="statusLoading" @click="loadPublicStatus">
+                    현황 새로고침
+                </button>
+            </section>
         </div>
     </DefaultLayout>
 </template>
 
 <style scoped>
-/* Custom styles for the home view */
+.gateway-home {
+    display: flex;
+    width: min(100% - 24px, 700px);
+    margin: 120px auto 30px;
+    flex-direction: column;
+    align-items: center;
+    gap: 20px;
+}
+
+.gateway-home h2 {
+    margin: 0 0 2px;
+    color: #fff;
+    font-size: 20px;
+    font-weight: 400;
+    line-height: 1.2;
+    text-align: center;
+}
+
+.login-card {
+    width: min(100%, 450px);
+    overflow: hidden;
+    border: 1px solid #444;
+    border-radius: 6px;
+    background: #303030;
+}
+
+.login-card h3 {
+    margin: 0;
+    border-bottom: 1px solid #555;
+    background: #444;
+    padding: 6px 12px;
+    color: #fff;
+    font-size: 20px;
+    font-weight: 500;
+}
+
+.login-card form {
+    display: grid;
+    grid-template-columns: 1fr 1.8fr;
+    gap: 12px 10px;
+    align-items: center;
+    padding: 18px 14px;
+}
+
+.login-card label {
+    text-align: center;
+}
+
+.login-card input {
+    min-width: 0;
+    border: 1px solid #ced4da;
+    border-radius: 4px;
+    background: #ddd;
+    color: #303030;
+    padding: 6px 10px;
+}
+
+.login-card input:focus {
+    border-color: #8bb8e5;
+    outline: 0;
+    box-shadow: 0 0 0 3px rgb(55 90 127 / 35%);
+}
+
+.kakao-button,
+.login-button {
+    min-height: 40px;
+    border: 1px solid transparent;
+    border-radius: 4px;
+    font-weight: 700;
+    cursor: pointer;
+}
+
+.kakao-button {
+    background: #fee500;
+    color: #191919;
+    line-height: 1;
+}
+
+.login-button {
+    background: #375a7f;
+    color: #fff;
+}
+
+.login-button:hover,
+.login-button:focus {
+    background: #2f4d6c;
+}
+
+.login-button:disabled {
+    cursor: default;
+    opacity: 0.65;
+}
+
+.login-error {
+    margin: 0 14px 14px;
+    color: #ff8a80;
+    text-align: center;
+}
+
+.status-card {
+    width: min(100%, 700px);
+    overflow: hidden;
+    border: 1px solid #444;
+    border-radius: 6px;
+    background: #000;
+}
+
+.status-card > header {
+    display: flex;
+    justify-content: space-between;
+    border-bottom: 1px solid #555;
+    background: #444;
+    padding: 5px 12px;
+}
+
+.map-frame {
+    width: 100%;
+    min-height: 320px;
+    overflow: hidden;
+}
+
+.status-message {
+    display: grid;
+    min-height: 320px;
+    place-items: center;
+    color: #888;
+}
+
+.status-summary {
+    margin: 0;
+    padding: 8px 18px;
+    font-size: 12px;
+}
+
+.refresh-button {
+    float: right;
+    margin: 0 8px 8px;
+    border: 0;
+    background: transparent;
+    color: #3498db;
+    cursor: pointer;
+}
+
+@media (max-width: 519px) {
+    .gateway-home {
+        width: calc(100% - 16px);
+        margin-top: 110px;
+    }
+
+    .login-card form {
+        grid-template-columns: 0.85fr 1.35fr;
+    }
+
+    .map-frame,
+    .status-message {
+        min-height: 280px;
+    }
+}
 </style>