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

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>