145 lines
4.7 KiB
TypeScript
145 lines
4.7 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogDescription,
|
|
} from "@/components/ui/dialog";
|
|
|
|
interface ShortcutItem {
|
|
keys: string[];
|
|
description: string;
|
|
}
|
|
|
|
interface ShortcutGroup {
|
|
title: string;
|
|
shortcuts: ShortcutItem[];
|
|
}
|
|
|
|
const shortcutGroups: ShortcutGroup[] = [
|
|
{
|
|
title: "기본 조작",
|
|
shortcuts: [
|
|
{ keys: ["Ctrl", "S"], description: "레이아웃 저장" },
|
|
{ keys: ["Ctrl", "Z"], description: "실행취소" },
|
|
{ keys: ["Ctrl", "Y"], description: "다시실행" },
|
|
{ keys: ["Ctrl", "A"], description: "전체 선택" },
|
|
{ keys: ["Delete"], description: "선택 삭제" },
|
|
{ keys: ["Esc"], description: "선택 해제" },
|
|
],
|
|
},
|
|
{
|
|
title: "복사/붙여넣기",
|
|
shortcuts: [
|
|
{ keys: ["Ctrl", "C"], description: "컴포넌트 복사" },
|
|
{ keys: ["Ctrl", "V"], description: "컴포넌트 붙여넣기" },
|
|
],
|
|
},
|
|
{
|
|
title: "그룹 관리",
|
|
shortcuts: [
|
|
{ keys: ["Ctrl", "G"], description: "그룹 생성" },
|
|
{ keys: ["Ctrl", "Shift", "G"], description: "그룹 해제" },
|
|
],
|
|
},
|
|
{
|
|
title: "이동 (Nudge)",
|
|
shortcuts: [
|
|
{ keys: ["Arrow"], description: "1px 이동" },
|
|
{ keys: ["Shift", "Arrow"], description: "10px 이동" },
|
|
],
|
|
},
|
|
{
|
|
title: "정렬 (다중 선택 시)",
|
|
shortcuts: [
|
|
{ keys: ["Alt", "L"], description: "좌측 정렬" },
|
|
{ keys: ["Alt", "R"], description: "우측 정렬" },
|
|
{ keys: ["Alt", "C"], description: "가로 중앙 정렬" },
|
|
{ keys: ["Alt", "T"], description: "상단 정렬" },
|
|
{ keys: ["Alt", "B"], description: "하단 정렬" },
|
|
{ keys: ["Alt", "M"], description: "세로 중앙 정렬" },
|
|
],
|
|
},
|
|
{
|
|
title: "배분/크기 (다중 선택 시)",
|
|
shortcuts: [
|
|
{ keys: ["Alt", "H"], description: "가로 균등 배분" },
|
|
{ keys: ["Alt", "V"], description: "세로 균등 배분" },
|
|
{ keys: ["Alt", "W"], description: "너비 맞추기" },
|
|
{ keys: ["Alt", "E"], description: "높이 맞추기" },
|
|
],
|
|
},
|
|
{
|
|
title: "보기/탐색",
|
|
shortcuts: [
|
|
{ keys: ["Space", "Drag"], description: "캔버스 팬(이동)" },
|
|
{ keys: ["Wheel"], description: "줌 인/아웃" },
|
|
{ keys: ["P"], description: "패널 열기/닫기" },
|
|
{ keys: ["Alt", "Shift", "L"], description: "라벨 일괄 표시/숨기기" },
|
|
{ keys: ["?"], description: "단축키 도움말" },
|
|
],
|
|
},
|
|
];
|
|
|
|
interface KeyboardShortcutsModalProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
}
|
|
|
|
export const KeyboardShortcutsModal: React.FC<KeyboardShortcutsModalProps> = ({
|
|
isOpen,
|
|
onClose,
|
|
}) => {
|
|
return (
|
|
<Dialog open={isOpen} onOpenChange={onClose}>
|
|
<DialogContent className="max-w-[95vw] sm:max-w-[600px] max-h-[80vh] overflow-y-auto">
|
|
<DialogHeader>
|
|
<DialogTitle className="text-base sm:text-lg">
|
|
키보드 단축키
|
|
</DialogTitle>
|
|
<DialogDescription className="text-xs sm:text-sm">
|
|
화면 디자이너에서 사용할 수 있는 단축키 목록입니다. Mac에서는 Ctrl 대신 Cmd를 사용합니다.
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
<div className="space-y-5">
|
|
{shortcutGroups.map((group) => (
|
|
<div key={group.title}>
|
|
<h3 className="text-sm font-semibold text-foreground mb-2">
|
|
{group.title}
|
|
</h3>
|
|
<div className="space-y-1">
|
|
{group.shortcuts.map((shortcut, idx) => (
|
|
<div
|
|
key={idx}
|
|
className="flex items-center justify-between rounded-md px-3 py-1.5 hover:bg-muted/50 transition-colors"
|
|
>
|
|
<span className="text-sm text-muted-foreground">
|
|
{shortcut.description}
|
|
</span>
|
|
<div className="flex items-center gap-1">
|
|
{shortcut.keys.map((key, kidx) => (
|
|
<React.Fragment key={kidx}>
|
|
{kidx > 0 && (
|
|
<span className="text-xs text-muted-foreground">+</span>
|
|
)}
|
|
<kbd className="inline-flex h-6 min-w-[24px] items-center justify-center rounded border border-border bg-muted px-1.5 font-mono text-xs text-muted-foreground shadow-sm">
|
|
{key}
|
|
</kbd>
|
|
</React.Fragment>
|
|
))}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
};
|