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 () => {
+
>