feat(frontend): 쇼케이스 테마 전환 단축키 A 추가
This commit is contained in:
부모
d7f8db88ee
커밋
4170824f15
@ -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>
|
||||
|
||||
불러오는 중...
Reference in New Issue
Block a user