From 4170824f15d490cbdc1b4b3b3002f674ea28b08a Mon Sep 17 00:00:00 2001
From: htlee <htlee@gcsc.co.kr>
Date: Wed, 8 Apr 2026 11:31:16 +0900
Subject: [PATCH] =?UTF-8?q?feat(frontend):=20=EC=87=BC=EC=BC=80=EC=9D=B4?=
 =?UTF-8?q?=EC=8A=A4=20=ED=85=8C=EB=A7=88=20=EC=A0=84=ED=99=98=20=EB=8B=A8?=
 =?UTF-8?q?=EC=B6=95=ED=82=A4=20A=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/design-system/DesignSystemApp.tsx     | 22 +++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/frontend/src/design-system/DesignSystemApp.tsx b/frontend/src/design-system/DesignSystemApp.tsx
index edb916a..cc517c7 100644
--- a/frontend/src/design-system/DesignSystemApp.tsx
+++ b/frontend/src/design-system/DesignSystemApp.tsx
@@ -43,6 +43,22 @@ function DesignSystemShell() {
     root.classList.add(theme);
   }, [theme]);
 
+  // 단축키: 'a' 입력 시 테마 전환 (input/textarea 등 편집 중에는 무시)
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if (e.key !== 'a' && e.key !== 'A') return;
+      if (e.ctrlKey || e.metaKey || e.altKey) return;
+      const target = e.target as HTMLElement | null;
+      const tag = target?.tagName;
+      if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT' || target?.isContentEditable) {
+        return;
+      }
+      setTheme((prev) => (prev === 'dark' ? 'light' : 'dark'));
+    };
+    window.addEventListener('keydown', handler);
+    return () => window.removeEventListener('keydown', handler);
+  }, []);
+
   // 스크롤 감지로 현재 네비 하이라이트
   useEffect(() => {
     const observer = new IntersectionObserver(
@@ -87,9 +103,11 @@ function DesignSystemShell() {
           <button
             type="button"
             onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
-            className="px-3 py-1 rounded-md border border-slate-600/40 text-xs text-label hover:bg-slate-700/30"
+            title="단축키: A"
+            className="px-3 py-1 rounded-md border border-slate-600/40 text-xs text-label hover:bg-slate-700/30 flex items-center gap-1.5"
           >
-            {theme === 'dark' ? '☾ Dark' : '☀ Light'}
+            <span>{theme === 'dark' ? '☾ Dark' : '☀ Light'}</span>
+            <kbd className="text-[9px] font-mono text-hint border border-slate-600/40 rounded px-1 py-0">A</kbd>
           </button>
         </div>
       </header>