From 1216eea7b311fa4875c09c460aae3d8817a20d60 Mon Sep 17 00:00:00 2001
From: Seongho Bae <me@seonghobae.me>
Date: Mon, 6 Jul 2026 20:15:51 +0900
Subject: [PATCH] feat(security-ui): render security domain local nav as a left
 LNB sidebar
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Same shell-parity fix as the data domain (docs/ui-ux/naruon-ui-ux-mapping.md
§4.1 + mockup_06/24): security rendered its areas (보안 대시보드/접근 권한/
감사 로그/외부 공유/정책) as a horizontal top-tab strip; the canonical shell
uses a left LOCAL LNB sidebar.

- Desktop (lg+): left <nav aria-label='보안 로컬 탐색'> sidebar with the domain
  title + the five areas as vertical nav buttons (aria-current on active).
- Mobile (<lg): collapses to the existing horizontal tab strip; unchanged.

Verified: security page tests 3 passed, tsc + eslint clean, 1440px runtime
capture shows GNB + left LNB + content.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_017RkKdtHRLG4wSLh6PVsp8J
---
 frontend/src/components/SecurityLayout.tsx | 73 +++++++++++++++-------
 1 file changed, 50 insertions(+), 23 deletions(-)

diff --git a/frontend/src/components/SecurityLayout.tsx b/frontend/src/components/SecurityLayout.tsx
index 8951e5b6..7454467a 100644
--- a/frontend/src/components/SecurityLayout.tsx
+++ b/frontend/src/components/SecurityLayout.tsx
@@ -685,31 +685,57 @@ export function SecurityLayout() {
   }, [activeTab, data, error, loading]);
 
   return (
-    <div className="flex h-full min-h-0 min-w-0 flex-col overflow-x-hidden bg-background text-foreground">
-      <header className="flex h-20 shrink-0 items-center overflow-hidden border-b border-border bg-card px-4 md:px-8">
-        <h1 className="flex shrink-0 items-center gap-3 text-xl font-bold md:text-2xl">
-          <ShieldCheck className="size-6 text-primary" />
-          <span className="hidden sm:inline">보안과 관리자</span>
+    <div className="flex h-full min-h-0 min-w-0 overflow-x-hidden bg-background text-foreground">
+      {/* Local navigation (LNB): desktop left sidebar for the security domain's areas */}
+      <nav
+        aria-label="보안 로컬 탐색"
+        className="hidden w-60 shrink-0 flex-col gap-1 border-r border-border bg-card p-4 lg:flex"
+      >
+        <h1 className="mb-2 flex items-center gap-2 px-2 text-lg font-bold">
+          <ShieldCheck className="size-5 text-primary" aria-hidden="true" />
+          <span>보안과 관리자</span>
         </h1>
-        <p className="sr-only">관리자 경계</p>
-        <div className="ml-4 flex min-w-0 flex-1 gap-2 overflow-x-auto pb-1 md:ml-8">
-          {tabs.map((tab) => (
-            <button type="button"
-              key={tab}
-              onClick={() => setActiveTab(tab)}
-              className={`shrink-0 whitespace-nowrap rounded-md px-3 py-2 text-sm font-bold transition-colors md:px-4 ${
-                activeTab === tab
-                  ? 'bg-primary text-primary-foreground'
-                  : 'text-muted-foreground hover:bg-secondary'
-              }`}
-            >
-              {tab}
-            </button>
-          ))}
-        </div>
-      </header>
+        {tabs.map((tab) => (
+          <button
+            type="button"
+            key={tab}
+            aria-current={activeTab === tab ? 'page' : undefined}
+            onClick={() => setActiveTab(tab)}
+            className={`rounded-lg px-3 py-2 text-left text-sm font-bold transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40 ${
+              activeTab === tab
+                ? 'bg-primary text-primary-foreground'
+                : 'text-muted-foreground hover:bg-secondary'
+            }`}
+          >
+            {tab}
+          </button>
+        ))}
+      </nav>
+
+      <div className="flex min-w-0 flex-1 flex-col overflow-hidden">
+        {/* Mobile local tabs: the LNB collapses to a horizontal tab strip below the desktop breakpoint */}
+        <header className="flex h-16 shrink-0 items-center overflow-hidden border-b border-border bg-card px-4 lg:hidden">
+          <h1 className="sr-only">보안과 관리자</h1>
+          <div className="flex min-w-0 flex-1 gap-2 overflow-x-auto pb-1">
+            {tabs.map((tab) => (
+              <button
+                type="button"
+                key={tab}
+                aria-current={activeTab === tab ? 'page' : undefined}
+                onClick={() => setActiveTab(tab)}
+                className={`shrink-0 whitespace-nowrap rounded-md px-3 py-2 text-sm font-bold transition-colors ${
+                  activeTab === tab
+                    ? 'bg-primary text-primary-foreground'
+                    : 'text-muted-foreground hover:bg-secondary'
+                }`}
+              >
+                {tab}
+              </button>
+            ))}
+          </div>
+        </header>
 
-      <main className="min-w-0 flex-1 overflow-y-auto overflow-x-hidden p-4 md:p-8">
+        <main className="min-w-0 flex-1 overflow-y-auto overflow-x-hidden p-4 md:p-8">
         <div className="mx-auto max-w-6xl space-y-5">
           <div className="flex flex-wrap items-center justify-between gap-3">
             <div>
@@ -758,6 +784,7 @@ export function SecurityLayout() {
           {content}
         </div>
       </main>
+      </div>
     </div>
   );
 }