릴리스: v1.2.14 에디터 우측 패널 셸 컬럼 이관

frontend/src/App.vue

@@ -17,10 +17,12 @@ const { toasts, dismissToast } = useToast()
 const menuOpen = ref(false)
 const rightRailOpen = ref(true)
 provide('rightRailOpen', rightRailOpen)
+provide('localRightRailTarget', '#local-right-rail-root')
 
 const isAdmin = computed(() => !!auth.user?.isAdmin)
 const isPreviewMode = computed(() => route.query.preview === '1')
 const usesLocalRightRail = computed(() => ['editEditor', 'newEditor', 'admin'].includes(String(route.name || '')))
+const usesShellRightRail = computed(() => ['editEditor', 'newEditor'].includes(String(route.name || '')))
 const avatarUrl = computed(() => (auth.user?.avatarSrc ? toApiUrl(auth.user.avatarSrc) : ''))
 const accountName = computed(() => {
   const nickname = (auth.user?.nickname || '').trim()
@@ -293,46 +295,51 @@ async function logout() {
       </main>
 
       <aside
-        v-if="!usesLocalRightRail"
+        v-if="!usesLocalRightRail || usesShellRightRail"
         class="rightRail"
         :class="{ 'rightRail--closed': !rightRailOpen }"
         :aria-hidden="!rightRailOpen"
       >
-        <div class="rightRail__top">
-          <button class="ghostIcon ghostIcon--iconOnly" type="button" aria-label="상태">
-            <img :src="iconGridView" alt="" />
-          </button>
-        </div>
-        <section class="contextCard">
-          <div class="contextCard__label">Context</div>
-          <h2 class="contextCard__title">{{ routeMeta.contextTitle }}</h2>
-          <p class="contextCard__text">{{ routeMeta.contextText }}</p>
-          <button class="contextCard__action" type="button" @click="routeMeta.action">
-            {{ routeMeta.actionLabel }}
-          </button>
-        </section>
-        <section class="contextCard">
-          <div class="contextCard__label">Account</div>
-          <div class="contextStat">
-            <span class="contextStat__name">현재 사용자</span>
-            <span class="contextStat__value">{{ accountName }}</span>
+        <template v-if="usesShellRightRail">
+          <div id="local-right-rail-root" class="localRightRailRoot"></div>
+        </template>
+        <template v-else>
+          <div class="rightRail__top">
+            <button class="ghostIcon ghostIcon--iconOnly" type="button" aria-label="상태">
+              <img :src="iconGridView" alt="" />
+            </button>
           </div>
-          <div class="contextStat">
-            <span class="contextStat__name">권한</span>
-            <span class="contextStat__value">{{ isAdmin ? 'Admin' : auth.user ? 'Member' : 'Guest' }}</span>
-          </div>
-        </section>
-        <section class="contextCard contextCard--links">
-          <div class="contextCard__label">Jump</div>
-          <button class="contextLink" type="button" @click="$router.push('/')">
-            <svg viewBox="0 0 24 24" aria-hidden="true"><path :d="railGlyph('link')" /></svg>
-            <span>게임 목록으로</span>
-          </button>
-          <button v-if="auth.user" class="contextLink" type="button" @click="$router.push('/me')">
-            <svg viewBox="0 0 24 24" aria-hidden="true"><path :d="railGlyph('link')" /></svg>
-            <span>내 티어표 열기</span>
-          </button>
-        </section>
+          <section class="contextCard">
+            <div class="contextCard__label">Context</div>
+            <h2 class="contextCard__title">{{ routeMeta.contextTitle }}</h2>
+            <p class="contextCard__text">{{ routeMeta.contextText }}</p>
+            <button class="contextCard__action" type="button" @click="routeMeta.action">
+              {{ routeMeta.actionLabel }}
+            </button>
+          </section>
+          <section class="contextCard">
+            <div class="contextCard__label">Account</div>
+            <div class="contextStat">
+              <span class="contextStat__name">현재 사용자</span>
+              <span class="contextStat__value">{{ accountName }}</span>
+            </div>
+            <div class="contextStat">
+              <span class="contextStat__name">권한</span>
+              <span class="contextStat__value">{{ isAdmin ? 'Admin' : auth.user ? 'Member' : 'Guest' }}</span>
+            </div>
+          </section>
+          <section class="contextCard contextCard--links">
+            <div class="contextCard__label">Jump</div>
+            <button class="contextLink" type="button" @click="$router.push('/')">
+              <svg viewBox="0 0 24 24" aria-hidden="true"><path :d="railGlyph('link')" /></svg>
+              <span>게임 목록으로</span>
+            </button>
+            <button v-if="auth.user" class="contextLink" type="button" @click="$router.push('/me')">
+              <svg viewBox="0 0 24 24" aria-hidden="true"><path :d="railGlyph('link')" /></svg>
+              <span>내 티어표 열기</span>
+            </button>
+          </section>
+        </template>
       </aside>
     </template>
 
@@ -743,6 +750,10 @@ async function logout() {
   gap: 18px;
 }
 
+.localRightRailRoot {
+  min-height: calc(100vh - 40px);
+}
+
 .contextCard {
   display: grid;
   gap: 12px;

frontend/src/views/TierEditorView.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, inject, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
+import { Teleport, computed, inject, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import Sortable from 'sortablejs'
 import * as htmlToImage from 'html-to-image'
@@ -13,6 +13,7 @@ const router = useRouter()
 const auth = useAuthStore()
 const toast = useToast()
 const globalRightRailOpen = inject('rightRailOpen', ref(true))
+const localRightRailTarget = inject('localRightRailTarget', '#local-right-rail-root')
 const gameId = computed(() => route.params.gameId)
 const tierListId = computed(() => route.params.tierListId)
 const previewMode = computed(() => route.query.preview === '1')
@@ -670,11 +671,7 @@ onUnmounted(() => {
     </div>
   </div>
 
-  <section
-    class="layout"
-    :class="{ 'layout--railClosed': !globalRightRailOpen }"
-    :style="{ '--thumb-size': `${iconSize}px` }"
-  >
+  <section class="layout" :style="{ '--thumb-size': `${iconSize}px` }">
     <div class="editorMain">
       <section class="head">
         <div class="editorMain__headCopy">
@@ -785,7 +782,10 @@ onUnmounted(() => {
       </div>
     </div>
 
-    <aside class="editorSidebar">
+  </section>
+
+  <Teleport :to="localRightRailTarget">
+    <aside v-show="globalRightRailOpen" class="editorSidebar">
       <div class="editorSidebar__section">
         <div class="editorSidebar__label">Title</div>
         <input v-model="title" class="editorSidebar__input" placeholder="Title Text" :readonly="!canEdit" />
@@ -869,7 +869,7 @@ onUnmounted(() => {
         </button>
       </div>
     </aside>
-  </section>
+  </Teleport>
   </template>
 </template>