fix(game-ui): 메인 갱신 제어를 턴 입력기 아래로 이동

2026-08-21 04:49:52 +00:00
parent 8e616ed07b
commit aa479c1f0f
5 changed files with 275 additions and 147 deletions
@@ -0,0 +1,84 @@
+<script setup lang="ts">
+defineProps<{
+    realtimeEnabled: boolean;
+    refreshing: boolean;
+}>();
+
+const emit = defineEmits<{
+    refresh: [];
+    toggleRealtime: [];
+    lobby: [];
+}>();
+</script>
+
+<template>
+    <section class="main-turn-controls" aria-label="메인 갱신 및 이동">
+        <div class="main-turn-controls__refresh-pair legacy-split-button">
+            <button
+                class="main-turn-controls__manual legacy-split-button__main legacy-button legacy-button--navigation"
+                type="button"
+                :aria-busy="refreshing"
+                @click="emit('refresh')"
+            >
+                갱 신
+            </button>
+            <button
+                class="main-turn-controls__auto legacy-split-button__toggle legacy-button legacy-button--navigation"
+                :class="{ active: realtimeEnabled }"
+                type="button"
+                :aria-label="`자동 갱신 ${realtimeEnabled ? 'ON' : 'OFF'}`"
+                :aria-pressed="realtimeEnabled"
+                @click="emit('toggleRealtime')"
+            >
+                <span>자동 갱신</span>
+                <strong>{{ realtimeEnabled ? 'ON' : 'OFF' }}</strong>
+            </button>
+        </div>
+        <button
+            class="main-turn-controls__lobby legacy-button legacy-button--navigation"
+            type="button"
+            @click="emit('lobby')"
+        >
+            로비로
+        </button>
+    </section>
+</template>
+
+<style scoped>
+.main-turn-controls {
+    display: grid;
+    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
+    gap: 4px;
+}
+
+.main-turn-controls__refresh-pair {
+    display: grid;
+    min-width: 0;
+    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
+}
+
+.main-turn-controls .legacy-button {
+    width: 100%;
+    min-width: 0;
+    padding-right: 4px;
+    padding-left: 4px;
+    font-weight: 400;
+    white-space: nowrap;
+}
+
+.main-turn-controls__auto {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+}
+
+.main-turn-controls__auto strong {
+    color: #bbb;
+    font-size: 0.85em;
+}
+
+.main-turn-controls__auto.active strong {
+    color: #9ef0b8;
+}
+</style>