From f60f705f564061af07f5a5bba28cdececa13bf96 Mon Sep 17 00:00:00 2001
From: ttipo <kysung114y@gmail.com>
Date: Sun, 21 Jun 2026 21:23:09 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20=EC=83=81=EB=8B=A8=20=ED=97=A4?=
 =?UTF-8?q?=EB=8D=94=20=EB=84=A4=EB=B9=84=EA=B2=8C=EC=9D=B4=EC=85=98?=
 =?UTF-8?q?=EC=9D=84=20=EC=A2=8C=EC=B8=A1=20=EC=82=AC=EC=9D=B4=EB=93=9C?=
 =?UTF-8?q?=EB=B0=94=EB=A1=9C=20=EC=A0=84=ED=99=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

추후 메뉴 확장을 고려해 AppShell 레이아웃을 사이드바 구조로 변경한다.

- 좌측 사이드바: 브랜드 + 세로 네비(내 업무/프로젝트, 아이콘) + 하단 사용자 프로필·메뉴(위로 펼침)
- 우측 본문 컬럼: 슬림 툴바(페이지 액션 슬롯 + AI/검색/알림) + 기존 페이지 슬롯
- 알림 드롭다운·AI 패널 동작은 그대로 유지(.page 본문은 컬럼 내 중앙 정렬)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 frontend/src/layouts/AppShell.vue | 596 ++++++++++++++++++------------
 1 file changed, 356 insertions(+), 240 deletions(-)

diff --git a/frontend/src/layouts/AppShell.vue b/frontend/src/layouts/AppShell.vue
index eb521cf..3e14036 100644
--- a/frontend/src/layouts/AppShell.vue
+++ b/frontend/src/layouts/AppShell.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-// 앱 공통 셸 — 상단 탑바(브랜드/네비/우측 액션) + 본문 슬롯
+// 앱 공통 셸 — 좌측 사이드바(브랜드/네비/사용자) + 우측 본문 컬럼(상단 툴바 + 슬롯)
 // 모든 인증 이후 화면이 이 레이아웃을 공유한다.
 import { computed, onMounted, ref } from 'vue'
 import { storeToRefs } from 'pinia'
@@ -14,10 +14,10 @@ const route = useRoute()
 const router = useRouter()
 const authStore = useAuthStore()
 
-// AI 채팅 패널 — 모든 화면 헤더에서 열 수 있다
+// AI 채팅 패널 — 모든 화면 툴바에서 열 수 있다
 const agentOpen = ref(false)
 
-// 현재 경로 기준으로 상단 네비 활성 항목을 판별
+// 현재 경로 기준으로 사이드바 네비 활성 항목을 판별
 const activeNav = computed<'tasks' | 'projects'>(() =>
   route.path.startsWith('/projects') ? 'projects' : 'tasks',
 )
@@ -63,188 +63,96 @@ async function onLogout() {
 </script>
 
 <template>
-  <header class="topbar">
-    <RouterLink
-      to="/projects"
-      class="brand"
-    >
-      <div class="logo">
-        R
-      </div>
-      Relay
-    </RouterLink>
-
-    <nav class="topnav">
-      <RouterLink
-        to="/tasks"
-        :class="{ active: activeNav === 'tasks' }"
-      >
-        내 업무
-      </RouterLink>
+  <div class="shell">
+    <!-- 좌측 사이드바 -->
+    <aside class="sidebar">
       <RouterLink
         to="/projects"
-        :class="{ active: activeNav === 'projects' }"
+        class="brand"
       >
-        프로젝트
+        <div class="logo">
+          R
+        </div>
+        <span class="brand-name">Relay</span>
       </RouterLink>
-    </nav>
 
-    <div class="topbar-right">
-      <!-- 화면별 추가 액션을 끼워 넣는 슬롯 -->
-      <slot name="actions" />
-
-      <!-- AI 어시스턴트 — 모든 화면에서 상시 노출 -->
-      <button
-        class="icon-btn agent"
-        type="button"
-        title="AI 어시스턴트"
-        aria-label="AI 어시스턴트"
-        @click="agentOpen = true"
-      >
-        <svg
-          width="17"
-          height="17"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        >
-          <path d="M12 3 13.4 8.6 19 10l-5.6 1.4L12 17l-1.4-5.6L5 10l5.6-1.4Z" />
-          <path d="M18 16l.7 2.3L21 19l-2.3.7L18 22l-.7-2.3L15 19l2.3-.7Z" />
-        </svg>
-      </button>
-
-      <button
-        class="icon-btn"
-        type="button"
-        title="검색"
-        aria-label="검색"
-      >
-        <svg
-          width="17"
-          height="17"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-        >
-          <circle
-            cx="11"
-            cy="11"
-            r="7"
-          />
-          <path d="m21 21-4-4" />
-        </svg>
-      </button>
-      <div class="noti-wrap">
-        <button
-          class="icon-btn noti-btn"
-          type="button"
-          title="알림"
-          aria-label="알림"
-          aria-haspopup="menu"
-          :aria-expanded="notiOpen"
-          @click="notiOpen = !notiOpen"
+      <nav class="sidenav">
+        <RouterLink
+          to="/tasks"
+          class="nav-item"
+          :class="{ active: activeNav === 'tasks' }"
         >
           <svg
-            width="17"
-            height="17"
             viewBox="0 0 24 24"
             fill="none"
             stroke="currentColor"
             stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
           >
-            <path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" />
-            <path d="M10.3 21a1.94 1.94 0 0 0 3.4 0" />
+            <path d="M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2" />
+            <rect
+              x="9"
+              y="3"
+              width="6"
+              height="4"
+              rx="1"
+            />
+            <path d="M9 13l2 2 4-4" />
           </svg>
-          <span
-            v-if="unreadCount > 0"
-            class="noti-badge"
-            :aria-label="`읽지 않은 알림 ${unreadCount}건`"
-          >{{ unreadCount > 99 ? '99+' : unreadCount }}</span>
-        </button>
-
-        <!-- 알림 드롭다운 -->
-        <div
-          v-if="notiOpen"
-          class="noti-panel"
-          role="menu"
+          <span>내 업무</span>
+        </RouterLink>
+        <RouterLink
+          to="/projects"
+          class="nav-item"
+          :class="{ active: activeNav === 'projects' }"
         >
-          <div class="noti-head">
-            <span class="noti-title">알림</span>
-            <button
-              v-if="unreadCount > 0"
-              type="button"
-              class="noti-readall"
-              @click="notiStore.markAllRead()"
-            >
-              모두 읽음
-            </button>
-          </div>
-          <div class="noti-list">
-            <div
-              v-if="notiLoading && notiViews.length === 0"
-              class="noti-empty"
-            >
-              불러오는 중…
-            </div>
-            <div
-              v-else-if="notiViews.length === 0"
-              class="noti-empty"
-            >
-              새 알림이 없습니다.
-            </div>
-            <template v-else>
-              <button
-                v-for="v in notiViews"
-                :key="v.id"
-                type="button"
-                class="noti-item"
-                :class="{ unread: !v.read }"
-                role="menuitem"
-                @click="onNotiClick(v)"
-              >
-                <span
-                  class="noti-dot"
-                  :class="`tone-${v.tone || 'none'}`"
-                />
-                <span class="noti-body">
-                  <!-- noti-text 의 v-html 은 store 에서 사용자 입력을 escapeHtml 한 뒤 신뢰 태그(<b>)만 조립한 마크업이다 (XSS 위험 없음) -->
-                  <!-- eslint-disable vue/no-v-html -->
-                  <span
-                    class="noti-text"
-                    v-html="v.html"
-                  />
-                  <!-- eslint-enable vue/no-v-html -->
-                  <span class="noti-time">{{ v.time }}</span>
-                </span>
-              </button>
-              <button
-                v-if="notiHasMore"
-                type="button"
-                class="noti-more"
-                :disabled="notiLoadingMore"
-                @click="notiStore.loadMore()"
-              >
-                {{ notiLoadingMore ? '불러오는 중…' : '더보기' }}
-              </button>
-            </template>
-          </div>
-        </div>
-        <!-- 메뉴 바깥 클릭 시 닫기 -->
-        <div
-          v-if="notiOpen"
-          class="noti-overlay"
-          @click="notiOpen = false"
-        />
-      </div>
-      <div class="me-wrap">
+          <svg
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <rect
+              x="3"
+              y="3"
+              width="7"
+              height="7"
+              rx="1.5"
+            />
+            <rect
+              x="14"
+              y="3"
+              width="7"
+              height="7"
+              rx="1.5"
+            />
+            <rect
+              x="3"
+              y="14"
+              width="7"
+              height="7"
+              rx="1.5"
+            />
+            <rect
+              x="14"
+              y="14"
+              width="7"
+              height="7"
+              rx="1.5"
+            />
+          </svg>
+          <span>프로젝트</span>
+        </RouterLink>
+      </nav>
+
+      <!-- 하단 사용자 프로필 + 메뉴(위로 펼침) -->
+      <div class="side-bottom">
         <button
-          class="me"
+          class="side-me"
           type="button"
-          :title="me?.name ?? '사용자'"
           :aria-label="`${me?.name ?? '사용자'} 메뉴`"
           aria-haspopup="menu"
           :aria-expanded="menuOpen"
@@ -254,22 +162,17 @@ async function onLogout() {
             :url="me?.avatarUrl"
             :name="me?.name"
           />
+          <span class="side-me-text">
+            <span class="side-me-name">{{ me?.name }}</span>
+            <span class="side-me-email">{{ me?.email }}</span>
+          </span>
         </button>
 
-        <!-- 사용자 드롭다운 -->
         <div
           v-if="menuOpen"
-          class="me-menu"
+          class="me-menu side-menu"
           role="menu"
         >
-          <div class="me-info">
-            <div class="me-name">
-              {{ me?.name }}
-            </div>
-            <div class="me-email">
-              {{ me?.email }}
-            </div>
-          </div>
           <button
             class="me-action"
             type="button"
@@ -279,36 +182,201 @@ async function onLogout() {
             로그아웃
           </button>
         </div>
-        <!-- 메뉴 바깥 클릭 시 닫기 -->
         <div
           v-if="menuOpen"
           class="me-overlay"
           @click="menuOpen = false"
         />
       </div>
+    </aside>
+
+    <!-- 우측 본문 컬럼 -->
+    <div class="main">
+      <header class="topbar">
+        <!-- 화면별 추가 액션을 끼워 넣는 슬롯 -->
+        <slot name="actions" />
+
+        <div class="topbar-right">
+          <!-- AI 어시스턴트 — 모든 화면에서 상시 노출 -->
+          <button
+            class="icon-btn agent"
+            type="button"
+            title="AI 어시스턴트"
+            aria-label="AI 어시스턴트"
+            @click="agentOpen = true"
+          >
+            <svg
+              width="17"
+              height="17"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <path d="M12 3 13.4 8.6 19 10l-5.6 1.4L12 17l-1.4-5.6L5 10l5.6-1.4Z" />
+              <path d="M18 16l.7 2.3L21 19l-2.3.7L18 22l-.7-2.3L15 19l2.3-.7Z" />
+            </svg>
+          </button>
+
+          <button
+            class="icon-btn"
+            type="button"
+            title="검색"
+            aria-label="검색"
+          >
+            <svg
+              width="17"
+              height="17"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+            >
+              <circle
+                cx="11"
+                cy="11"
+                r="7"
+              />
+              <path d="m21 21-4-4" />
+            </svg>
+          </button>
+          <div class="noti-wrap">
+            <button
+              class="icon-btn noti-btn"
+              type="button"
+              title="알림"
+              aria-label="알림"
+              aria-haspopup="menu"
+              :aria-expanded="notiOpen"
+              @click="notiOpen = !notiOpen"
+            >
+              <svg
+                width="17"
+                height="17"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+              >
+                <path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" />
+                <path d="M10.3 21a1.94 1.94 0 0 0 3.4 0" />
+              </svg>
+              <span
+                v-if="unreadCount > 0"
+                class="noti-badge"
+                :aria-label="`읽지 않은 알림 ${unreadCount}건`"
+              >{{ unreadCount > 99 ? '99+' : unreadCount }}</span>
+            </button>
+
+            <!-- 알림 드롭다운 -->
+            <div
+              v-if="notiOpen"
+              class="noti-panel"
+              role="menu"
+            >
+              <div class="noti-head">
+                <span class="noti-title">알림</span>
+                <button
+                  v-if="unreadCount > 0"
+                  type="button"
+                  class="noti-readall"
+                  @click="notiStore.markAllRead()"
+                >
+                  모두 읽음
+                </button>
+              </div>
+              <div class="noti-list">
+                <div
+                  v-if="notiLoading && notiViews.length === 0"
+                  class="noti-empty"
+                >
+                  불러오는 중…
+                </div>
+                <div
+                  v-else-if="notiViews.length === 0"
+                  class="noti-empty"
+                >
+                  새 알림이 없습니다.
+                </div>
+                <template v-else>
+                  <button
+                    v-for="v in notiViews"
+                    :key="v.id"
+                    type="button"
+                    class="noti-item"
+                    :class="{ unread: !v.read }"
+                    role="menuitem"
+                    @click="onNotiClick(v)"
+                  >
+                    <span
+                      class="noti-dot"
+                      :class="`tone-${v.tone || 'none'}`"
+                    />
+                    <span class="noti-body">
+                      <!-- noti-text 의 v-html 은 store 에서 사용자 입력을 escapeHtml 한 뒤 신뢰 태그(<b>)만 조립한 마크업이다 (XSS 위험 없음) -->
+                      <!-- eslint-disable vue/no-v-html -->
+                      <span
+                        class="noti-text"
+                        v-html="v.html"
+                      />
+                      <!-- eslint-enable vue/no-v-html -->
+                      <span class="noti-time">{{ v.time }}</span>
+                    </span>
+                  </button>
+                  <button
+                    v-if="notiHasMore"
+                    type="button"
+                    class="noti-more"
+                    :disabled="notiLoadingMore"
+                    @click="notiStore.loadMore()"
+                  >
+                    {{ notiLoadingMore ? '불러오는 중…' : '더보기' }}
+                  </button>
+                </template>
+              </div>
+            </div>
+            <!-- 메뉴 바깥 클릭 시 닫기 -->
+            <div
+              v-if="notiOpen"
+              class="noti-overlay"
+              @click="notiOpen = false"
+            />
+          </div>
+        </div>
+      </header>
+
+      <slot />
     </div>
-  </header>
 
-  <slot />
-
-  <!-- AI 채팅 패널 — 헤더 어디서든 열림 -->
-  <AgentChatPanel
-    :open="agentOpen"
-    @close="agentOpen = false"
-  />
+    <!-- AI 채팅 패널 — 어디서든 열림 -->
+    <AgentChatPanel
+      :open="agentOpen"
+      @close="agentOpen = false"
+    />
+  </div>
 </template>
 
 <style scoped>
-.topbar {
-  height: 3.25rem;
-  background: var(--panel);
-  border-bottom: 1px solid var(--border);
+.shell {
   display: flex;
-  align-items: center;
-  gap: 1.75rem;
-  padding: 0 1.25rem;
+  align-items: flex-start;
+  min-height: 100vh;
+}
+
+/* ===== 좌측 사이드바 ===== */
+.sidebar {
+  width: 14.5rem;
+  flex-shrink: 0;
   position: sticky;
   top: 0;
+  height: 100vh;
+  background: var(--panel);
+  border-right: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  padding: 0.875rem 0;
   z-index: 50;
 }
 
@@ -321,6 +389,7 @@ async function onLogout() {
   letter-spacing: -0.0125rem;
   color: var(--text);
   text-decoration: none;
+  padding: 0.25rem 1.125rem 0.875rem;
 }
 .brand .logo {
   width: 1.625rem;
@@ -335,31 +404,108 @@ async function onLogout() {
   box-shadow: 0 2px 6px rgba(79, 70, 229, 0.35);
 }
 
-.topnav {
+.sidenav {
+  display: flex;
+  flex-direction: column;
+  gap: 0.1875rem;
+  padding: 0 0.625rem;
+}
+.nav-item {
   display: flex;
   align-items: center;
-  gap: 0.125rem;
-}
-.topnav a {
+  gap: 0.6875rem;
+  padding: 0.5625rem 0.75rem;
+  border-radius: var(--radius);
   color: var(--text-2);
   text-decoration: none;
-  font-size: 0.844rem;
+  font-size: 0.875rem;
   font-weight: 500;
-  padding: 0.4375rem 0.75rem;
-  border-radius: var(--radius-sm);
   line-height: 1;
   white-space: nowrap;
 }
-.topnav a:hover {
+.nav-item svg {
+  width: 1.125rem;
+  height: 1.125rem;
+  flex-shrink: 0;
+}
+.nav-item:hover {
   background: #f1f2f4;
   color: var(--text);
 }
-.topnav a.active {
-  color: var(--accent);
+.nav-item.active {
   background: var(--accent-weak);
+  color: var(--accent);
   font-weight: 600;
 }
 
+/* 사이드바 하단 사용자 프로필 */
+.side-bottom {
+  margin-top: auto;
+  position: relative;
+  padding: 0.625rem;
+  border-top: 1px solid var(--border);
+}
+.side-me {
+  display: flex;
+  align-items: center;
+  gap: 0.5625rem;
+  width: 100%;
+  padding: 0.4375rem 0.5rem;
+  border: none;
+  background: transparent;
+  border-radius: var(--radius);
+  cursor: pointer;
+  font-family: inherit;
+  text-align: left;
+}
+.side-me:hover {
+  background: #f1f2f4;
+}
+.side-me > :first-child {
+  width: 1.875rem;
+  height: 1.875rem;
+  flex-shrink: 0;
+}
+.side-me-text {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.0625rem;
+}
+.side-me-name {
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: var(--text);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.side-me-email {
+  font-size: 0.6875rem;
+  color: var(--text-3);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* ===== 우측 본문 컬럼 ===== */
+.main {
+  flex: 1;
+  min-width: 0;
+}
+
+.topbar {
+  height: 3.25rem;
+  background: var(--panel);
+  border-bottom: 1px solid var(--border);
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 0 1.25rem;
+  position: sticky;
+  top: 0;
+  z-index: 40;
+}
 .topbar-right {
   margin-left: auto;
   display: flex;
@@ -553,30 +699,9 @@ async function onLogout() {
   z-index: 55;
 }
 
-.me-wrap {
-  position: relative;
-  margin-left: 0.25rem;
-}
-.me {
-  width: 1.75rem;
-  height: 1.75rem;
-  border-radius: 50%;
-  display: grid;
-  place-items: center;
-  font-size: 0.719rem;
-  font-weight: 700;
-  color: #fff;
-  /* 내부 UserAvatar 가 이미지/placeholder 로 배경을 채운다(버튼 자체 배경 없음) */
-  border: none;
-  cursor: pointer;
-  padding: 0;
-}
-
-/* 드롭다운 메뉴 */
+/* 사용자 드롭다운(사이드바 하단 → 위로 펼침) */
 .me-menu {
   position: absolute;
-  top: calc(100% + 0.5rem);
-  right: 0;
   z-index: 60;
   min-width: 11rem;
   background: var(--panel);
@@ -585,19 +710,10 @@ async function onLogout() {
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
   overflow: hidden;
 }
-.me-info {
-  padding: 0.75rem 0.875rem;
-  border-bottom: 1px solid var(--border);
-}
-.me-name {
-  font-size: 0.844rem;
-  font-weight: 600;
-  color: var(--text);
-}
-.me-email {
-  margin-top: 0.125rem;
-  font-size: 0.75rem;
-  color: var(--text-3);
+.side-menu {
+  left: 0.625rem;
+  right: 0.625rem;
+  bottom: calc(100% - 0.25rem);
 }
 .me-action {
   width: 100%;