addd keyboard feature

src/components/keyboard.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+
+import {
+    Wrapper,
+    Key,
+    KeyRow,
+} from './keyboard.style';
+
+const rows = [
+    ['q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p'],
+    ['a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l'],
+    ['z', 'x', 'c', 'v', 'b', 'n', 'm']
+]
+
+export const Keyboard = ({ onChange }) => {
+    const handleClick = (key) => () => onChange(v => v + key); 
+    return (
+        <Wrapper>
+            {rows.map((row, index) => (
+                <KeyRow key={index}>
+                    {row.map(key => (
+                        <Key key={key} onClick={handleClick(key)}>{key}</Key>
+                    ))}
+                </KeyRow>
+            ))}
+        </Wrapper>
+    )
+}