diff --git a/app/hooks/common/useShortcut.ts b/app/hooks/common/useShortcut.ts new file mode 100644 index 0000000..f532a50 --- /dev/null +++ b/app/hooks/common/useShortcut.ts @@ -0,0 +1,45 @@ +import { useEffect } from 'react'; + +const useShortcut = ( + onShortcutAction: () => void, + keys: string[], + isGlobal: boolean +) => { + useEffect(() => { + const handler = (e: KeyboardEvent) => { + const isPressed = keys?.every((key) => { + if (key === 'Alt') { + return e.altKey; + } else if (key === 'Control' || key === 'Ctrl') { + return e.ctrlKey; + } else if (key === 'Shift') { + return e.shiftKey; + } else if (key === 'Meta') { + return e.metaKey; + } + return e.key.toLowerCase() === key.toLowerCase(); + }); + if (isPressed) { + onShortcutAction(); + } + }; + // 고민 + // 다른 페이지로 먼저 접근하면 전역 이벤트가 설정되지 않는다. + // 생각나는 해결방법: layout.tsx 에서 useShortcut 훅을 사용하여 전역 이벤트를 설정한다. + // 이렇게 할 경우 어떤 페이지로 접근하든 전역 이벤트를 설정 할 수 있다. + + if (isGlobal) { + window.addEventListener('keydown', handler); + } else if (window) { + document.addEventListener('keydown', handler); + } + + return () => { + document.removeEventListener('keydown', handler); + }; + }, [onShortcutAction, keys, isGlobal]); + + return; +}; + +export default useShortcut; diff --git a/app/page.tsx b/app/page.tsx index 3e6a96f..c058ceb 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -16,10 +16,13 @@ import useToast from '@/app/hooks/useToast'; import useDataFetch from '@/app/hooks/common/useDataFetch'; import { Post } from '@/app/types/Post'; import ErrorBox from '@/app/entities/common/Error/ErrorBox'; +import { useRouter } from 'next/navigation'; +import useShortcut from '@/app/hooks/common/useShortcut'; export default function Home() { const { fingerprint } = useFingerprint(); const toast = useToast(); + const router = useRouter(); const fetchConfig = { method: 'GET' as const, @@ -41,6 +44,19 @@ export default function Home() { } }, [fingerprint]); + const goToWritePage = () => { + toast.success('글쓰기 페이지로 이동합니다...'); + router.push('/admin/write'); + }; + + const goToPostsPage = () => { + toast.success('모든 글 목록 페이지로 이동합니다...'); + router.push('/posts'); + }; + + useShortcut(goToWritePage, ['Alt', 'N'], true); + useShortcut(goToPostsPage, ['Ctrl', ';'], true); + return (