diff --git a/apps/client/src/components/Keymap.tsx b/apps/client/src/components/Keymap.tsx new file mode 100644 index 00000000..14bc3749 --- /dev/null +++ b/apps/client/src/components/Keymap.tsx @@ -0,0 +1,86 @@ +import { Box, Paper, Stack, Typography, useTheme } from '@mui/material'; +import { styled } from '@mui/material/styles'; + +// 키 맵 항목을 위한 스타일링된 컴포넌트 +const KeyMapItem = styled(Stack)(({ theme }) => ({ + alignItems: 'center', + marginBottom: theme.spacing(1), +})); + +// 키 표시를 위한 스타일링된 박스 +const KeyBox = styled(Box)(({ theme }) => ({ + border: `1px solid ${theme.palette.divider}`, + borderRadius: '4px', + padding: '4px 8px', + backgroundColor: theme.palette.background.paper, + marginRight: theme.spacing(1), + display: 'inline-block', +})); + +const KeyMap = () => { + const theme = useTheme(); + + return ( + + + + Shortcut Key + + + + Space + + + Drag + + : Pan 기능 + + + + Wheel + + : 줌 인/아웃 + + + + Ctrl + + + Click + + : Edge 분할 + + + + Double Click + + : Edge 전체 선택 + + + + Select + + + Backspace + + : 삭제 + + + + + + ); +}; + +export default KeyMap; diff --git a/apps/client/src/components/Layout/index.tsx b/apps/client/src/components/Layout/index.tsx index 3f95cf9f..21808153 100644 --- a/apps/client/src/components/Layout/index.tsx +++ b/apps/client/src/components/Layout/index.tsx @@ -4,6 +4,7 @@ import { Box } from '@mui/material'; import { Outlet } from 'react-router-dom'; import Header from './Header'; import Sidebar from './Sidebar'; +import KeyMap from '@components/Keymap'; export default () => { return ( @@ -28,6 +29,7 @@ export default () => { +