fix(frontend): align ref menu structure

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

@@ -66,21 +66,33 @@ const onQuick = (item: QuickNavigationItem) => {
                             @navigate="close()"
                         />
                     </li>
-                    <template v-else>
+                    <template v-else-if="entry.kind === 'group'">
                         <li class="bottom-heading" role="presentation">
-                            {{ entry.kind === 'group' ? entry.label : entry.main.label }}
+                            {{ entry.label }}
                         </li>
-                        <template v-if="entry.kind === 'split'">
-                            <li role="none">
+                        <template v-for="item in entry.items" :key="item.id">
+                            <li v-if="item.kind === 'divider'" class="bottom-divider" role="separator"></li>
+                            <li v-else role="none">
                                 <MainNavigationLink
-                                    :link="entry.main"
-                                    :enabled="isNavigationConfigured(entry.main)"
+                                    :link="item"
+                                    :enabled="isNavigationConfigured(item)"
                                     compact
                                     role="menuitem"
                                     @navigate="close()"
                                 />
                             </li>
                         </template>
+                    </template>
+                    <template v-else-if="entry.kind === 'split'">
+                        <li role="none">
+                            <MainNavigationLink
+                                :link="entry.main"
+                                :enabled="isNavigationConfigured(entry.main)"
+                                compact
+                                role="menuitem"
+                                @navigate="close()"
+                            />
+                        </li>
                         <template v-for="item in entry.items" :key="item.id">
                             <li v-if="item.kind === 'divider'" class="bottom-divider" role="separator"></li>
                             <li v-else role="none">
@@ -123,15 +135,6 @@ const onQuick = (item: QuickNavigationItem) => {
                         />
                     </li>
                     <template v-else-if="entry.kind === 'split'">
-                        <li role="none">
-                            <MainNavigationLink
-                                :link="entry.main"
-                                :enabled="isNationNavigationEnabled(entry.main, access)"
-                                compact
-                                role="menuitem"
-                                @navigate="close()"
-                            />
-                        </li>
                         <li v-for="item in entry.items" :key="item.id" role="none">
                             <template v-if="item.kind === 'link'">
                                 <MainNavigationLink
@@ -162,7 +165,10 @@ const onQuick = (item: QuickNavigationItem) => {
             </button>
             <ul v-show="openId === 'quick'" id="mobile-quick-menu" class="bottom-popup" role="menu">
                 <template v-for="item in quickNavigation" :key="item.id">
-                    <li v-if="'kind' in item" class="bottom-divider" role="separator"></li>
+                    <template v-if="'kind' in item">
+                        <li class="bottom-heading" role="presentation">{{ item.label }}</li>
+                        <li class="bottom-divider" role="separator"></li>
+                    </template>
                     <li v-else role="none">
                         <button
                             class="quick-link"

app/game-frontend/src/components/main/mainNavigation.ts

@@ -17,6 +17,7 @@ export type MainNavigationLink = {
 export interface MainNavigationDivider {
     kind: 'divider';
     id: string;
+    label?: string;
 }
 
 export interface MainNavigationGroup {
@@ -317,18 +318,18 @@ export const nationNavigation: MainNavigationEntry[] = [
 ];
 
 export const quickNavigation: Array<QuickNavigationItem | MainNavigationDivider> = [
-    { kind: 'divider', id: 'quick-nation-heading' },
+    { kind: 'divider', id: 'quick-nation-heading', label: '국가 정보' },
     { id: 'policy', label: '방침', tab: 'map', selector: '[data-main-target="policy"]' },
     { id: 'commands', label: '명령', tab: 'commands', selector: '[data-main-target="commands"]' },
     { id: 'nation', label: '국가', tab: 'status', selector: '[data-main-target="nation"]' },
     { id: 'general', label: '장수', tab: 'status', selector: '[data-main-target="general"]' },
     { id: 'city', label: '도시', tab: 'status', selector: '[data-main-target="city"]' },
-    { kind: 'divider', id: 'quick-record-heading' },
+    { kind: 'divider', id: 'quick-record-heading', label: '동향 정보' },
     { id: 'map', label: '지도', tab: 'map', selector: '[data-main-target="map"]' },
     { id: 'global-records', label: '동향', tab: 'world', selector: '[data-main-target="global-records"]' },
     { id: 'general-records', label: '개인', tab: 'world', selector: '[data-main-target="general-records"]' },
     { id: 'world-history', label: '정세', tab: 'world', selector: '[data-main-target="world-history"]' },
-    { kind: 'divider', id: 'quick-message-heading' },
+    { kind: 'divider', id: 'quick-message-heading', label: '메시지' },
     { id: 'public-message', label: '전체', tab: 'messages', selector: '[data-message-type="public"]' },
     { id: 'national-message', label: '국가', tab: 'messages', selector: '[data-message-type="national"]' },
     { id: 'private-message', label: '개인', tab: 'messages', selector: '[data-message-type="private"]' },