릴리스: v1.2.12 에디터 우측 패널 토글 연결

frontend/src/App.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+import { computed, onMounted, onUnmounted, provide, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useAuthStore } from './stores/auth'
 import { toApiUrl } from './lib/runtime'
@@ -16,6 +16,7 @@ const { toasts, dismissToast } = useToast()
 
 const menuOpen = ref(false)
 const rightRailOpen = ref(true)
+provide('rightRailOpen', rightRailOpen)
 
 const isAdmin = computed(() => !!auth.user?.isAdmin)
 const isPreviewMode = computed(() => route.query.preview === '1')
@@ -367,6 +368,10 @@ async function logout() {
   grid-template-columns: 248px minmax(0, 1fr);
 }
 
+.appShell--localRail.appShell--rightClosed {
+  grid-template-columns: 248px minmax(0, 1fr);
+}
+
 .leftRail,
 .rightRail {
   min-height: 100vh;
@@ -888,6 +893,10 @@ async function logout() {
     grid-template-columns: 220px minmax(0, 1fr);
   }
 
+  .appShell--localRail.appShell--rightClosed {
+    grid-template-columns: 220px minmax(0, 1fr);
+  }
+
   .rightRail {
     display: none;
   }

frontend/src/views/TierEditorView.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
+import { 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'
@@ -12,6 +12,7 @@ const route = useRoute()
 const router = useRouter()
 const auth = useAuthStore()
 const toast = useToast()
+const globalRightRailOpen = inject('rightRailOpen', ref(true))
 const gameId = computed(() => route.params.gameId)
 const tierListId = computed(() => route.params.tierListId)
 const previewMode = computed(() => route.query.preview === '1')
@@ -669,7 +670,11 @@ onUnmounted(() => {
     </div>
   </div>
 
-  <section class="layout" :style="{ '--thumb-size': `${iconSize}px` }">
+  <section
+    class="layout"
+    :class="{ 'layout--railClosed': !globalRightRailOpen.value }"
+    :style="{ '--thumb-size': `${iconSize}px` }"
+  >
     <div class="editorMain">
       <section class="head">
         <div class="editorMain__headCopy">
@@ -1039,6 +1044,10 @@ onUnmounted(() => {
   grid-template-columns: minmax(0, 1fr) 320px;
   gap: 18px;
   align-items: start;
+  transition: grid-template-columns 220ms ease;
+}
+.layout--railClosed {
+  grid-template-columns: minmax(0, 1fr) 0;
 }
 .error {
   margin: 10px 0 14px;
@@ -1357,6 +1366,21 @@ onUnmounted(() => {
   position: sticky;
   top: 14px;
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
+  transition:
+    opacity 220ms ease,
+    transform 220ms ease,
+    padding 220ms ease,
+    border-color 220ms ease,
+    background 220ms ease;
+}
+.layout--railClosed .editorSidebar {
+  opacity: 0;
+  transform: translateX(18px);
+  pointer-events: none;
+  overflow: hidden;
+  padding-left: 0;
+  padding-right: 0;
+  border-color: transparent;
 }
 .editorSidebar__section {
   display: grid;