feat(frontend): 쇼케이스 테마 전환 단축키 A 추가
This commit is contained in:
부모
d7f8db88ee
커밋
4170824f15
@ -43,6 +43,22 @@ function DesignSystemShell() {
|
|||||||
root.classList.add(theme);
|
root.classList.add(theme);
|
||||||
}, [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(() => {
|
useEffect(() => {
|
||||||
const observer = new IntersectionObserver(
|
const observer = new IntersectionObserver(
|
||||||
@ -87,9 +103,11 @@ function DesignSystemShell() {
|
|||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
|
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>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|||||||
불러오는 중...
Reference in New Issue
Block a user