릴리스: v1.2.8 에디터 3열 구조와 SVG 아이콘 연결

frontend/src/App.vue

@@ -4,6 +4,10 @@ import { useRoute, useRouter } from 'vue-router'
 import { useAuthStore } from './stores/auth'
 import { toApiUrl } from './lib/runtime'
 import { useToast } from './composables/useToast'
+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'
 
 const route = useRoute()
 const router = useRouter()
@@ -27,13 +31,13 @@ const accountName = computed(() => {
 const accountEmail = computed(() => (auth.user?.email || '').trim() || '로그인 후 개인 메뉴를 사용할 수 있어요.')
 const leftNavItems = computed(() => {
   const items = [
-    { key: 'home', label: 'Games', path: '/', icon: 'M4 6.5h16M4 12h16M4 17.5h16' },
-    { key: 'me', label: '내 리스트', path: '/me', icon: 'M6 5.5h12v12H6z M8.75 8.5h6.5 M8.75 11.75h6.5 M8.75 15h4.5', requiresAuth: true },
+    { key: 'home', label: 'Games', path: '/', iconSrc: iconGridView },
+    { key: 'me', label: '내 리스트', path: '/me', iconSrc: iconLists, requiresAuth: true },
     { key: 'favorites', label: '즐겨찾기', path: '/favorites', icon: 'M12 4.75l2.18 4.42 4.88.71-3.53 3.44.83 4.86L12 15.9 7.64 18.18l.83-4.86-3.53-3.44 4.88-.71z', requiresAuth: true },
     { key: 'profile', label: 'Settings', path: '/profile', icon: 'M12 4.75a2.2 2.2 0 0 1 2.08 1.5l.18.56.58.13a2.2 2.2 0 0 1 1.52 2.76l-.17.56.39.46a2.2 2.2 0 0 1 0 2.86l-.39.46.17.56a2.2 2.2 0 0 1-1.52 2.76l-.58.13-.18.56a2.2 2.2 0 0 1-4.16 0l-.18-.56-.58-.13a2.2 2.2 0 0 1-1.52-2.76l.17-.56-.39-.46a2.2 2.2 0 0 1 0-2.86l.39-.46-.17-.56a2.2 2.2 0 0 1 1.52-2.76l.58-.13.18-.56A2.2 2.2 0 0 1 12 4.75z M12 9.35a2.65 2.65 0 1 0 0 5.3 2.65 2.65 0 0 0 0-5.3z', requiresAuth: true },
   ]
   if (isAdmin.value) {
-    items.push({ key: 'admin', label: 'Admin', path: '/admin', icon: 'M5.5 6.25h13v13h-13z M9 9.25h6 M9 12h6 M9 14.75h4.5' })
+    items.push({ key: 'admin', label: 'Admin', path: '/admin', iconSrc: iconLists })
   }
   return items.filter((item) => !item.requiresAuth || auth.user)
 })
@@ -131,7 +135,6 @@ const favoriteLinks = computed(() => [
 function railGlyph(type) {
   if (type === 'menu') return 'M4 6.5h16M4 12h16M4 17.5h16'
   if (type === 'search') return 'M10.2 6.2a4 4 0 1 1 0 8 4 4 0 0 1 0-8z M13.6 13.6l3.2 3.2'
-  if (type === 'panel') return 'M5.5 6.5h5v5h-5z M13.5 6.5h5v5h-5z M5.5 13.5h5v5h-5z M13.5 13.5h5v5h-5z'
   if (type === 'link') return 'M8 12h8 M12 8l4 4-4 4'
   return 'M4 12h16'
 }
@@ -240,7 +243,8 @@ async function logout() {
             :class="{ 'leftNav__item--active': isRouteActive(item.path) }"
           >
             <span class="leftNav__glyph">
-              <svg viewBox="0 0 24 24" aria-hidden="true"><path :d="item.icon" /></svg>
+              <img v-if="item.iconSrc" :src="item.iconSrc" alt="" />
+              <svg v-else viewBox="0 0 24 24" aria-hidden="true"><path :d="item.icon" /></svg>
             </span>
             <span>{{ item.label }}</span>
           </RouterLink>
@@ -269,7 +273,7 @@ async function logout() {
             </div>
             <div class="workspaceHead__actions">
               <button class="ghostIcon ghostIcon--workspace" type="button" :aria-pressed="rightRailOpen" @click="toggleRightRail">
-                <svg viewBox="0 0 24 24" aria-hidden="true"><path :d="railGlyph('panel')" /></svg>
+                <img :src="rightRailOpen ? iconDockToRight : iconDockToLeft" alt="" />
                 <span>{{ rightRailOpen ? '패널 숨기기' : '패널 보기' }}</span>
               </button>
             </div>
@@ -288,7 +292,7 @@ async function logout() {
       >
         <div class="rightRail__top">
           <button class="ghostIcon ghostIcon--iconOnly" type="button" aria-label="상태">
-            <svg viewBox="0 0 24 24" aria-hidden="true"><path :d="railGlyph('panel')" /></svg>
+            <img :src="iconGridView" alt="" />
           </button>
         </div>
         <section class="contextCard">
@@ -422,6 +426,15 @@ async function logout() {
   stroke-linejoin: round;
 }
 
+.ghostIcon img,
+.leftNav__glyph img,
+.ghostIcon--workspace img {
+  width: 16px;
+  height: 16px;
+  display: block;
+  filter: brightness(0) saturate(100%) invert(94%) sepia(6%) saturate(207%) hue-rotate(186deg) brightness(96%) contrast(92%);
+}
+
 .ghostIcon--iconOnly {
   min-width: 32px;
   width: 32px;