addd keyboard feature

src/components/keyboard.style.ts

@@ -0,0 +1,34 @@
+import styled from '@emotion/styled';
+import { keyframes } from '@emotion/react';
+
+export const Wrapper = styled.div`
+    position: absolute;
+    bottom: 0;
+    left: auto;
+    right: auto;
+    padding: 12px;
+    background-color: #96e8c229;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+`;
+
+export const KeyRow = styled.div`
+    display: flex;
+`;
+
+export const Key = styled.button`
+    margin: 4px;
+    width: 64px;
+    height: 64px;
+    font-size: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #829cdb;
+    border-radius: 6px;
+    background-color: #fff;
+    border: none;
+    box-shadow: 1px 2px 6px #5c7cc9;
+`;

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>
+    )
+}