99 lines
3.8 KiB
TypeScript
99 lines
3.8 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog";
|
|
import { Keyboard } from "lucide-react";
|
|
|
|
interface KeyboardShortcutsGuideProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
}
|
|
|
|
interface ShortcutItem {
|
|
keys: string[];
|
|
description: string;
|
|
category: string;
|
|
}
|
|
|
|
const shortcuts: ShortcutItem[] = [
|
|
// 기본 작업
|
|
{ keys: ["Delete"], description: "선택한 요소 삭제", category: "기본 작업" },
|
|
{ keys: ["Ctrl", "C"], description: "요소 복사", category: "기본 작업" },
|
|
{ keys: ["Ctrl", "V"], description: "요소 붙여넣기", category: "기본 작업" },
|
|
|
|
// 실행 취소/재실행 (구현 예정)
|
|
{ keys: ["Ctrl", "Z"], description: "실행 취소 (구현 예정)", category: "편집" },
|
|
{ keys: ["Ctrl", "Shift", "Z"], description: "재실행 (구현 예정)", category: "편집" },
|
|
];
|
|
|
|
const KeyBadge = ({ keyName }: { keyName: string }) => (
|
|
<kbd className="inline-flex h-6 min-w-6 items-center justify-center rounded border border-gray-300 bg-gray-100 px-2 text-xs font-semibold text-gray-800 shadow-sm">
|
|
{keyName}
|
|
</kbd>
|
|
);
|
|
|
|
export function KeyboardShortcutsGuide({ isOpen, onClose }: KeyboardShortcutsGuideProps) {
|
|
// 카테고리별로 그룹화
|
|
const groupedShortcuts = shortcuts.reduce(
|
|
(acc, shortcut) => {
|
|
if (!acc[shortcut.category]) {
|
|
acc[shortcut.category] = [];
|
|
}
|
|
acc[shortcut.category].push(shortcut);
|
|
return acc;
|
|
},
|
|
{} as Record<string, ShortcutItem[]>,
|
|
);
|
|
|
|
// Mac OS 감지
|
|
const isMac = typeof navigator !== "undefined" && navigator.platform.toUpperCase().indexOf("MAC") >= 0;
|
|
|
|
return (
|
|
<Dialog open={isOpen} onOpenChange={onClose}>
|
|
<DialogContent className="max-w-[95vw] sm:max-w-[600px]">
|
|
<DialogHeader>
|
|
<div className="flex items-center gap-2">
|
|
<Keyboard className="h-5 w-5" />
|
|
<DialogTitle className="text-base sm:text-lg">키보드 단축키</DialogTitle>
|
|
</div>
|
|
<DialogDescription className="text-xs sm:text-sm">
|
|
대시보드 편집을 더 빠르게 할 수 있는 단축키 목록입니다
|
|
{isMac && " (Mac에서는 Ctrl 대신 Cmd 키를 사용하세요)"}
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
<div className="max-h-[60vh] space-y-6 overflow-y-auto pr-2">
|
|
{Object.entries(groupedShortcuts).map(([category, categoryShortcuts]) => (
|
|
<div key={category}>
|
|
<h3 className="mb-3 text-sm font-semibold text-gray-900">{category}</h3>
|
|
<div className="space-y-2">
|
|
{categoryShortcuts.map((shortcut, index) => (
|
|
<div
|
|
key={`${category}-${index}`}
|
|
className="flex items-center justify-between rounded-lg border border-gray-200 bg-gray-50 p-3"
|
|
>
|
|
<span className="text-sm text-gray-700">{shortcut.description}</span>
|
|
<div className="flex items-center gap-1">
|
|
{shortcut.keys.map((key, keyIndex) => (
|
|
<React.Fragment key={keyIndex}>
|
|
<KeyBadge keyName={isMac && key === "Ctrl" ? "⌘" : key} />
|
|
{keyIndex < shortcut.keys.length - 1 && <span className="text-xs text-gray-400">+</span>}
|
|
</React.Fragment>
|
|
))}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="mt-4 rounded-lg bg-blue-50 p-3 text-xs text-blue-800">
|
|
<p className="font-medium">💡 팁</p>
|
|
<p className="mt-1">입력 필드나 모달에서는 단축키가 자동으로 비활성화됩니다.</p>
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|