릴리스: v1.2.20 패널 토글과 검색 결과 화면 정리

frontend/src/App.vue

@@ -9,6 +9,7 @@ import iconDockToLeft from './assets/icons/dock_to_left.svg'
 import iconDockToRight from './assets/icons/dock_to_right.svg'
 import iconGridView from './assets/icons/grid_view.svg'
 import iconLists from './assets/icons/lists.svg'
+import iconMore from './assets/icons/more.svg'
 import iconSettings from './assets/icons/settings.svg'
 
 const route = useRoute()
@@ -284,7 +285,7 @@ watch(
             </button>
             <RouterLink to="/favorites" class="favoriteMoreLink">
               <span class="favoriteMoreLink__icon">
-                <img :src="iconSettings" alt="" />
+                <img :src="iconMore" alt="" />
               </span>
               <span>즐겨찾기 더 보기</span>
               <span class="favoriteMoreLink__arrow">↗</span>
@@ -308,9 +309,8 @@ watch(
               <span class="workspaceHead__brandSub">by zenn</span>
             </div>
             <div class="workspaceHead__actions">
-              <button class="ghostIcon ghostIcon--workspace" type="button" :aria-pressed="rightRailOpen" @click="toggleRightRail">
-                <img :src="rightRailOpen ? iconDockToRight : iconDockToLeft" alt="" />
-                <span>{{ rightRailOpen ? '패널 숨기기' : '패널 보기' }}</span>
+              <button v-if="!rightRailOpen" class="ghostIcon ghostIcon--iconOnly" type="button" aria-label="패널 열기" @click="toggleRightRail">
+                <img :src="iconDockToLeft" alt="" />
               </button>
             </div>
           </header>
@@ -321,7 +321,11 @@ watch(
       </main>
 
       <aside class="rightRail" :class="{ 'rightRail--closed': !rightRailOpen }" :aria-hidden="!rightRailOpen">
-        <div class="rightRail__top railHeader"></div>
+        <div class="rightRail__top railHeader">
+          <button v-if="rightRailOpen" class="ghostIcon ghostIcon--iconOnly" type="button" aria-label="패널 닫기" @click="toggleRightRail">
+            <img :src="iconDockToRight" alt="" />
+          </button>
+        </div>
         <div class="rightRail__body">
         <template v-if="!usesLocalRightRail">
           <section class="rightRailAction">
@@ -413,6 +417,10 @@ watch(
   gap: 12px;
 }
 
+.rightRail__top {
+  justify-content: flex-end;
+}
+
 .leftRail__body,
 .rightRail__body {
   flex: 1;
@@ -450,8 +458,7 @@ watch(
 }
 
 .ghostIcon img,
-.leftNav__glyph img,
-.ghostIcon--workspace img {
+.leftNav__glyph img {
   width: 16px;
   height: 16px;
   display: block;
@@ -464,17 +471,6 @@ watch(
   padding: 0;
 }
 
-.ghostIcon--workspace {
-  min-width: 132px;
-  height: 38px;
-  padding: 0 14px;
-  border-radius: 10px;
-  background: rgba(255, 255, 255, 0.06);
-  color: rgba(255, 255, 255, 0.88);
-  font-size: 12px;
-  font-weight: 800;
-}
-
 .appUserCard {
   position: relative;
   margin-bottom: 14px;
@@ -763,12 +759,12 @@ watch(
 
 .workspaceBody {
   min-height: calc(100vh - 56px);
-  padding: 18px;
-  border-radius: 26px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  background: linear-gradient(180deg, #2d2d2d 0%, #2a2a2a 100%);
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
-  margin: 18px;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+  margin: 18px 18px 0;
 }
 
 .workspaceBody--localRail {
@@ -778,7 +774,7 @@ watch(
   border-radius: 0;
   background: transparent;
   box-shadow: none;
-  margin: 18px;
+  margin: 18px 18px 0;
 }
 
 .rightRail {
@@ -895,15 +891,15 @@ watch(
   }
 
   .workspaceBody {
-    padding: 14px;
-    border-radius: 20px;
-    margin: 14px;
+    padding: 0;
+    border-radius: 0;
+    margin: 14px 14px 0;
   }
 
   .workspaceBody--localRail {
     padding: 0;
     border-radius: 0;
-    margin: 14px;
+    margin: 14px 14px 0;
   }
 }
 </style>