@restnfeel/agentc-starter-kit/src/hooks/useKeyboardShortcuts.ts

한국어 기업용 CMS 모듈 - Task Master AI와 함께 빠르게 웹사이트를 구현할 수 있는 재사용 가능한 컴포넌트 시스템

import { useEffect, useCallback } from "react";

interface KeyboardShortcut {
  key: string;
  ctrlKey?: boolean;
  altKey?: boolean;
  shiftKey?: boolean;
  metaKey?: boolean;
  callback: () => void;
  description?: string;
}

interface UseKeyboardShortcutsOptions {
  enabled?: boolean;
  preventDefault?: boolean;
}

export function useKeyboardShortcuts(
  shortcuts: KeyboardShortcut[],
  options: UseKeyboardShortcutsOptions = {}
) {
  const { enabled = true, preventDefault = true } = options;

  const handleKeyDown = useCallback(
    (event: KeyboardEvent) => {
      if (!enabled) return;

      const matchingShortcut = shortcuts.find((shortcut) => {
        const keyMatches =
          event.key.toLowerCase() === shortcut.key.toLowerCase();
        const ctrlMatches =
          Boolean(event.ctrlKey) === Boolean(shortcut.ctrlKey);
        const altMatches = Boolean(event.altKey) === Boolean(shortcut.altKey);
        const shiftMatches =
          Boolean(event.shiftKey) === Boolean(shortcut.shiftKey);
        const metaMatches =
          Boolean(event.metaKey) === Boolean(shortcut.metaKey);

        return (
          keyMatches && ctrlMatches && altMatches && shiftMatches && metaMatches
        );
      });

      if (matchingShortcut) {
        if (preventDefault) {
          event.preventDefault();
        }
        matchingShortcut.callback();
      }
    },
    [shortcuts, enabled, preventDefault]
  );

  useEffect(() => {
    if (enabled) {
      document.addEventListener("keydown", handleKeyDown);
      return () => {
        document.removeEventListener("keydown", handleKeyDown);
      };
    }
  }, [handleKeyDown, enabled]);

  return shortcuts;
}

// Common shortcuts for admin interface
export const createAdminShortcuts = (actions: {
  onSave?: () => void;
  onNew?: () => void;
  onSearch?: () => void;
  onRefresh?: () => void;
  onEscape?: () => void;
  onDelete?: () => void;
  onUpload?: () => void;
}) => {
  const shortcuts: KeyboardShortcut[] = [];

  if (actions.onSave) {
    shortcuts.push({
      key: "s",
      ctrlKey: true,
      callback: actions.onSave,
      description: "Save (Ctrl+S)",
    });
  }

  if (actions.onNew) {
    shortcuts.push({
      key: "n",
      ctrlKey: true,
      callback: actions.onNew,
      description: "New (Ctrl+N)",
    });
  }

  if (actions.onSearch) {
    shortcuts.push({
      key: "f",
      ctrlKey: true,
      callback: actions.onSearch,
      description: "Search (Ctrl+F)",
    });
  }

  if (actions.onRefresh) {
    shortcuts.push({
      key: "r",
      ctrlKey: true,
      callback: actions.onRefresh,
      description: "Refresh (Ctrl+R)",
    });
  }

  if (actions.onEscape) {
    shortcuts.push({
      key: "Escape",
      callback: actions.onEscape,
      description: "Close/Cancel (Esc)",
    });
  }

  if (actions.onDelete) {
    shortcuts.push({
      key: "Delete",
      callback: actions.onDelete,
      description: "Delete (Del)",
    });
  }

  if (actions.onUpload) {
    shortcuts.push({
      key: "u",
      ctrlKey: true,
      callback: actions.onUpload,
      description: "Upload (Ctrl+U)",
    });
  }

  return shortcuts;
};