From 4422b55e2caba43f0efd61412f8f3f8755449e30 Mon Sep 17 00:00:00 2001 From: Jacob Date: Sat, 5 Sep 2026 11:39:32 +0900 Subject: [PATCH] =?UTF-8?q?fix(a11y):=20=ED=81=B0=20=EA=B8=80=EC=94=A8=20?= =?UTF-8?q?=EB=AA=A8=EB=93=9C=20=EC=83=81=EB=8B=A8=EB=B0=94=20=EB=B0=8F=20?= =?UTF-8?q?=EC=A0=84=EC=97=AD=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20?= =?UTF-8?q?=EA=B9=A8=EC=A7=90=20=EB=B0=A9=EC=A7=80=20=EB=A0=88=EC=9D=B4?= =?UTF-8?q?=EC=95=84=EC=9B=83=20=EC=B5=9C=EC=A0=81=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 상단바 햄버거 버튼에 xl:!hidden 적용하여 데스크톱 중복 노출 및 넘침 방지 - globals.css에서 btn-accent, btn-ghost를 @layer components로 분리하여 유틸리티 우선순위 보장 - a11y-large-text 환경에서 nav 규격(폰트 13px, 버튼 36-38px) 및 btn-icon 규격(min-h-0) 보호 - 챗봇, 로그인, 시뮬레이터, 주식 컴포넌트 내 컴팩트 버튼에 min-h-0 및 모바일 hidden 명시 --- frontend/src/app/chat/KnowledgePanel.tsx | 2 +- frontend/src/app/chat/page.tsx | 6 +- frontend/src/app/globals.css | 230 +++++++++++--------- frontend/src/app/graph/page.tsx | 2 +- frontend/src/app/login/page.tsx | 2 +- frontend/src/app/page.tsx | 4 +- frontend/src/app/simulator/page.tsx | 10 +- frontend/src/app/stocks/MemoryStatsCard.tsx | 2 +- frontend/src/app/stocks/WatchlistCard.tsx | 2 +- frontend/src/app/stocks/page.tsx | 6 +- frontend/src/components/NavBar.tsx | 24 +- 11 files changed, 159 insertions(+), 131 deletions(-) diff --git a/frontend/src/app/chat/KnowledgePanel.tsx b/frontend/src/app/chat/KnowledgePanel.tsx index 593747e..f2f8b49 100644 --- a/frontend/src/app/chat/KnowledgePanel.tsx +++ b/frontend/src/app/chat/KnowledgePanel.tsx @@ -180,7 +180,7 @@ export default function KnowledgePanel() {
diff --git a/frontend/src/app/login/page.tsx b/frontend/src/app/login/page.tsx index fe0caa9..327af9e 100644 --- a/frontend/src/app/login/page.tsx +++ b/frontend/src/app/login/page.tsx @@ -96,7 +96,7 @@ export default function LoginPage() { type="button" onClick={() => setShowPassword((s) => !s)} aria-label={showPassword ? "비밀번호 숨기기" : "비밀번호 표시"} - className="btn-ghost btn-icon absolute right-1.5 top-1/2 -translate-y-1/2 h-7 w-7 text-muted hover:text-fg" + className="btn-ghost btn-icon min-h-0 absolute right-1.5 top-1/2 -translate-y-1/2 h-7 w-7 text-muted hover:text-fg" > {showPassword ? : } diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx index d64f6cd..80031d0 100644 --- a/frontend/src/app/page.tsx +++ b/frontend/src/app/page.tsx @@ -119,13 +119,13 @@ export default function HomePage() {
5겹 보안 체험 챗봇 열기 → diff --git a/frontend/src/app/simulator/page.tsx b/frontend/src/app/simulator/page.tsx index ece3fb7..f822c10 100644 --- a/frontend/src/app/simulator/page.tsx +++ b/frontend/src/app/simulator/page.tsx @@ -207,16 +207,16 @@ export default function SimulatorPage() { diff --git a/frontend/src/app/stocks/MemoryStatsCard.tsx b/frontend/src/app/stocks/MemoryStatsCard.tsx index 55525f0..a8ab5b6 100644 --- a/frontend/src/app/stocks/MemoryStatsCard.tsx +++ b/frontend/src/app/stocks/MemoryStatsCard.tsx @@ -94,7 +94,7 @@ export default function MemoryStatsCard({ @@ -1217,7 +1217,7 @@ export default function StocksPage() { @@ -232,7 +232,7 @@ export default function NavBar() { 로그인 @@ -244,7 +244,7 @@ export default function NavBar() { onClick={toggle} aria-label="테마 전환" title={theme === "dark" ? "라이트 모드로 전환" : "다크 모드로 전환"} - className="btn-ghost btn-icon shrink-0 h-[38px] w-[38px] rounded-full border border-line/70 hover:border-line hover:bg-surface/80" + className="btn-ghost btn-icon min-h-0 shrink-0 h-[38px] w-[38px] rounded-full border border-line/70 hover:border-line hover:bg-surface/80" > {theme === "dark" ? : } @@ -255,7 +255,7 @@ export default function NavBar() { aria-pressed={largeText} aria-label="큰 글씨 모드" title={largeText ? "큰 글씨 모드 끄기 (A11y)" : "큰 글씨 모드 켜기 (A11y)"} - className={`btn-ghost btn-icon shrink-0 h-[38px] w-[38px] rounded-full border border-line/70 hover:border-line hover:bg-surface/80 ${ + className={`btn-ghost btn-icon min-h-0 shrink-0 h-[38px] w-[38px] rounded-full border border-line/70 hover:border-line hover:bg-surface/80 ${ largeText ? "!border-accent/50 !bg-accent/15 !text-accent font-bold" : "" }`} > @@ -268,7 +268,7 @@ export default function NavBar() { aria-label="전체 메뉴 열기" aria-expanded={open} title="전체 메뉴" - className={`btn-ghost btn-icon shrink-0 h-[38px] w-[38px] rounded-full border transition-all xl:hidden ${ + className={`btn-ghost btn-icon min-h-0 shrink-0 h-[38px] w-[38px] rounded-full border transition-all xl:!hidden ${ open ? "!border-accent !bg-accent/20 !text-accent" : "border-line/70 hover:border-line hover:bg-surface/80 text-fg"