From 70729fd8a32fdb0aba5d972030189cca78c73f53 Mon Sep 17 00:00:00 2001
From: Hyungi Ahn <hyungiahn@Hyungiui-MacBookPro.local>
Date: Tue, 14 Apr 2026 07:00:54 +0900
Subject: [PATCH] =?UTF-8?q?refactor(frontend):=20=EC=83=81=EB=8B=A8=20nav?=
 =?UTF-8?q?=20=EC=9E=AC=EA=B5=AC=EC=84=B1=20=E2=80=94=20=ED=95=B5=EC=8B=AC?=
 =?UTF-8?q?=20=EA=B8=B0=EB=8A=A5=20=EC=A4=91=EC=8B=AC=204=EA=B0=9C=20?=
 =?UTF-8?q?=EA=B3=A0=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

상단 nav를 질문|메모|뉴스|Inbox 4개 핵심 기능으로 재정렬.
설정/로그아웃은 더보기(⋮) 드롭다운으로 이동.
메모 링크가 모바일에서 사이드바 없이 바로 접근 가능.
active 상태 표시(startsWith), 접근성 속성, 오버레이 닫기.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 frontend/src/routes/+layout.svelte | 46 ++++++++++++++++++++++++++----
 1 file changed, 40 insertions(+), 6 deletions(-)

diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
index ff7b6c9..7a8a6a3 100644
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -3,7 +3,7 @@
   import { browser } from '$app/environment';
   import { page } from '$app/stores';
   import { goto } from '$app/navigation';
-  import { Menu } from 'lucide-svelte';
+  import { Menu, EllipsisVertical } from 'lucide-svelte';
   import { isAuthenticated, user, tryRefresh, logout } from '$lib/stores/auth';
   import { toasts, removeToast } from '$lib/stores/toast';
   import { ui } from '$lib/stores/uiState.svelte';
@@ -27,6 +27,11 @@
   };
 
   let authChecked = $state(false);
+  let menuOpen = $state(false);
+
+  function isActive(path) {
+    return $page.url.pathname.startsWith(path);
+  }
 
   onMount(async () => {
     if (!$isAuthenticated) {
@@ -81,11 +86,40 @@
           <SystemStatusDot />
         </div>
         <div class="flex items-center gap-1">
-          <Button variant="ghost" size="sm" href="/ask">질문</Button>
-          <Button variant="ghost" size="sm" href="/news">뉴스</Button>
-          <Button variant="ghost" size="sm" href="/inbox">Inbox</Button>
-          <Button variant="ghost" size="sm" href="/settings">설정</Button>
-          <Button variant="ghost" size="sm" onclick={() => logout()}>로그아웃</Button>
+          <Button variant="ghost" size="sm" href="/ask" class={isActive('/ask') ? 'text-accent' : ''}>질문</Button>
+          <Button variant="ghost" size="sm" href="/memos" class={isActive('/memos') ? 'text-accent' : ''}>메모</Button>
+          <Button variant="ghost" size="sm" href="/news" class={isActive('/news') ? 'text-accent' : ''}>뉴스</Button>
+          <Button variant="ghost" size="sm" href="/inbox" class={isActive('/inbox') ? 'text-accent' : ''}>Inbox</Button>
+          <div class="relative">
+            <IconButton
+              icon={EllipsisVertical}
+              size="sm"
+              aria-label="메뉴"
+              aria-expanded={menuOpen}
+              aria-haspopup="menu"
+              onclick={() => (menuOpen = !menuOpen)}
+            />
+            {#if menuOpen}
+              <button
+                onclick={() => (menuOpen = false)}
+                class="fixed inset-0 z-40"
+                aria-label="메뉴 닫기"
+              ></button>
+              <div class="absolute right-0 top-full z-50 mt-1 min-w-[140px] bg-surface border border-default rounded-lg shadow-lg py-1" role="menu">
+                <a
+                  href="/settings"
+                  onclick={() => (menuOpen = false)}
+                  class="block px-4 py-2 text-sm text-text hover:bg-surface-hover transition-colors"
+                  role="menuitem"
+                >설정</a>
+                <button
+                  onclick={() => { menuOpen = false; logout(); }}
+                  class="w-full text-left px-4 py-2 text-sm text-error hover:bg-error/10 transition-colors"
+                  role="menuitem"
+                >로그아웃</button>
+              </div>
+            {/if}
+          </div>
         </div>
       </nav>