릴리스: v1.2.1 리디자인 포커스 화면 안정화

frontend/src/App.vue

@@ -14,6 +14,7 @@ const menuOpen = ref(false)
 
 const isAdmin = computed(() => !!auth.user?.isAdmin)
 const isPreviewMode = computed(() => route.query.preview === '1')
+const isFocusWorkspace = computed(() => ['admin', 'newEditor', 'editEditor', 'profile', 'login'].includes(String(route.name || '')))
 const avatarUrl = computed(() => (auth.user?.avatarSrc ? toApiUrl(auth.user.avatarSrc) : ''))
 const accountName = computed(() => {
   const nickname = (auth.user?.nickname || '').trim()
@@ -170,7 +171,7 @@ async function logout() {
 </script>
 
 <template>
-  <div class="appShell" :class="{ 'appShell--preview': isPreviewMode }">
+  <div class="appShell" :class="{ 'appShell--preview': isPreviewMode, 'appShell--focus': isFocusWorkspace && !isPreviewMode }">
     <template v-if="isPreviewMode">
       <main class="appMain appMain--preview">
         <RouterView />
@@ -242,7 +243,7 @@ async function logout() {
 
       <main class="appMain">
         <section class="workspace">
-          <header class="workspaceHead">
+          <header v-if="!isFocusWorkspace" class="workspaceHead">
             <div>
               <div class="workspaceHead__title">{{ routeMeta.title }}</div>
               <div class="workspaceHead__subtitle">{{ routeMeta.subtitle }}</div>
@@ -254,7 +255,7 @@ async function logout() {
         </section>
       </main>
 
-      <aside class="rightRail">
+      <aside v-if="!isFocusWorkspace" class="rightRail">
         <div class="rightRail__top">
           <button class="ghostIcon" type="button" aria-label="상태">⌗</button>
         </div>
@@ -296,7 +297,7 @@ async function logout() {
 .appShell {
   min-height: 100vh;
   display: grid;
-  grid-template-columns: 260px minmax(0, 1fr) 280px;
+  grid-template-columns: 176px minmax(0, 1fr) 228px;
   background:
     radial-gradient(circle at top left, rgba(255, 255, 255, 0.04), transparent 28%),
     linear-gradient(180deg, #1a1a1a 0%, #121212 100%);
@@ -310,7 +311,7 @@ async function logout() {
 .leftRail,
 .rightRail {
   min-height: 100vh;
-  padding: 14px 10px;
+  padding: 12px 10px;
   border-right: 1px solid rgba(255, 255, 255, 0.08);
   background: rgba(14, 14, 14, 0.92);
   box-sizing: border-box;
@@ -346,7 +347,7 @@ async function logout() {
 }
 
 .brandBlock__title {
-  font-size: 22px;
+  font-size: 18px;
   font-weight: 900;
   letter-spacing: -0.04em;
 }
@@ -461,8 +462,8 @@ async function logout() {
 .leftNav__item {
   display: flex;
   align-items: center;
-  gap: 12px;
-  padding: 10px 12px;
+  gap: 10px;
+  padding: 10px;
   border-radius: 12px;
   color: rgba(255, 255, 255, 0.76);
   text-decoration: none;
@@ -475,8 +476,8 @@ async function logout() {
 }
 
 .leftNav__glyph {
-  width: 26px;
-  height: 26px;
+  width: 24px;
+  height: 24px;
   border-radius: 8px;
   display: grid;
   place-items: center;
@@ -542,7 +543,7 @@ async function logout() {
 
 .appMain {
   min-width: 0;
-  padding: 18px 18px 28px;
+  padding: 14px 14px 22px;
   box-sizing: border-box;
 }
 
@@ -563,7 +564,7 @@ async function logout() {
 }
 
 .workspaceHead__title {
-  font-size: 34px;
+  font-size: 28px;
   font-weight: 900;
   letter-spacing: -0.04em;
 }
@@ -571,7 +572,7 @@ async function logout() {
 .workspaceHead__subtitle {
   margin-top: 6px;
   color: rgba(255, 255, 255, 0.58);
-  font-size: 14px;
+  font-size: 13px;
 }
 
 .workspaceBody {
@@ -583,6 +584,19 @@ async function logout() {
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
 }
 
+.appShell--focus {
+  grid-template-columns: 176px minmax(0, 1fr);
+}
+
+.appShell--focus .workspaceBody {
+  min-height: calc(100vh - 92px);
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+}
+
 .rightRail {
   display: grid;
   align-content: start;
@@ -714,7 +728,7 @@ async function logout() {
 
 @media (max-width: 1280px) {
   .appShell {
-    grid-template-columns: 220px minmax(0, 1fr);
+    grid-template-columns: 160px minmax(0, 1fr);
   }
 
   .rightRail {