릴리스: 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>

frontend/src/assets/icons/more.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="ffffff"><path d="M360-160q-19 0-36-8.5T296-192L80-480l216-288q11-15 28-23.5t36-8.5h440q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H360ZM180-480l180 240h440v-480H360L180-480Zm248.5 28.5Q440-463 440-480t-11.5-28.5Q417-520 400-520t-28.5 11.5Q360-497 360-480t11.5 28.5Q383-440 400-440t28.5-11.5Zm140 0Q580-463 580-480t-11.5-28.5Q557-520 540-520t-28.5 11.5Q500-497 500-480t11.5 28.5Q523-440 540-440t28.5-11.5Zm140 0Q720-463 720-480t-11.5-28.5Q697-520 680-520t-28.5 11.5Q640-497 640-480t11.5 28.5Q663-440 680-440t28.5-11.5ZM580-480Z"/></svg>

frontend/src/views/GameHubView.vue

@@ -84,10 +84,6 @@ function submitSearch() {
       <p class="dashboardHero__desc">이 게임의 공개 티어표를 탐색하고, 바로 새 보드를 만들어 같은 흐름으로 이어갈 수 있어요.</p>
     </div>
     <div class="dashboardHero__right">
-      <div class="dashboardStat">
-        <span class="dashboardStat__label">Visible Lists</span>
-        <strong class="dashboardStat__value">{{ tierLists.length }}</strong>
-      </div>
       <button class="primary" @click="createNew">{{ auth.user ? '새로운 티어표 만들기' : '로그인 후 새 티어표 만들기' }}</button>
     </div>
   </section>
@@ -168,25 +164,6 @@ function submitSearch() {
   color: rgba(255, 255, 255, 0.58);
   max-width: 720px;
 }
-.dashboardStat {
-  display: grid;
-  gap: 2px;
-  min-width: 112px;
-  padding: 12px 14px;
-  border-radius: 14px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  background: rgba(255, 255, 255, 0.045);
-}
-.dashboardStat__label {
-  font-size: 11px;
-  color: rgba(255, 255, 255, 0.48);
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-}
-.dashboardStat__value {
-  font-size: 18px;
-  font-weight: 900;
-}
 .primary {
   padding: 12px 16px;
   border-radius: 14px;

frontend/src/views/SearchResultsView.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, onMounted, ref, watch } from 'vue'
+import { ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { api } from '../lib/api'
 import { toApiUrl } from '../lib/runtime'
@@ -12,8 +12,6 @@ const loading = ref(false)
 const error = ref('')
 const query = ref('')
 
-const normalizedQuery = computed(() => (query.value || '').trim())
-
 function fmt(ts) {
   return new Date(ts).toLocaleString(undefined, {
     year: 'numeric',
@@ -57,10 +55,6 @@ async function loadResults() {
   }
 }
 
-function submitSearch() {
-  router.push(normalizedQuery.value ? `/search?q=${encodeURIComponent(normalizedQuery.value)}` : '/search')
-}
-
 watch(
   () => route.query.q,
   async (nextQuery) => {
@@ -69,10 +63,6 @@ watch(
   },
   { immediate: true }
 )
-
-onMounted(() => {
-  query.value = typeof route.query.q === 'string' ? route.query.q : ''
-})
 </script>
 
 <template>
@@ -83,10 +73,6 @@ onMounted(() => {
         <h2 class="title">전체 티어표 검색</h2>
         <div class="desc">공개된 모든 티어표를 제목과 작성자 기준으로 찾아볼 수 있어요.</div>
       </div>
-      <!-- <form class="toolbar" @submit.prevent="submitSearch">
-        <input v-model="query" class="input" placeholder="제목 또는 작성자 검색" />
-        <button class="btn" type="submit">검색</button>
-      </form> -->
     </div>
 
     <div v-if="error" class="error">{{ error }}</div>
@@ -151,28 +137,6 @@ onMounted(() => {
   margin-top: 6px;
   color: rgba(255, 255, 255, 0.58);
 }
-.toolbar {
-  display: flex;
-  gap: 10px;
-  flex-wrap: wrap;
-}
-.input {
-  min-width: 280px;
-  padding: 11px 13px;
-  border-radius: 14px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  background: rgba(255, 255, 255, 0.05);
-  color: rgba(255, 255, 255, 0.92);
-}
-.btn {
-  padding: 11px 13px;
-  border-radius: 14px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  background: rgba(255, 255, 255, 0.06);
-  color: rgba(255, 255, 255, 0.92);
-  font-weight: 800;
-  cursor: pointer;
-}
 .error {
   margin: 0 0 8px;
   padding: 10px 12px;
@@ -288,13 +252,6 @@ onMounted(() => {
   }
 }
 @media (max-width: 720px) {
-  .input {
-    min-width: 0;
-    width: 100%;
-  }
-  .toolbar {
-    width: 100%;
-  }
   .list {
     grid-template-columns: 1fr;
   }