backspace btn

src/components/keyboard.style.ts

@@ -18,6 +18,11 @@ export const KeyRow = styled.div`
     display: flex;
 `;
 
+export const BackspaceBtn = styled.img`
+    width: 60%;
+    /* height: 8px; */
+`;
+
 export const Key = styled.button`
     margin: 4px;
     width: 64px;

src/components/keyboard.tsx

@@ -1,19 +1,27 @@
 import React from 'react';
+import back from '../assets/back.svg';
 
 import {
     Wrapper,
     Key,
     KeyRow,
+    BackspaceBtn,
 } 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']
+    ['z', 'x', 'c', 'v', 'b', 'n', 'm', <BackspaceBtn src={back} />]
 ]
 
 export const Keyboard = ({ onChange }) => {
-    const handleClick = (key) => () => onChange(v => v + key); 
+    const handleClick = (key) => () => {
+        if (typeof key === 'string') {
+            onChange(v => v + key.toUpperCase());
+        } else {
+            onChange(v => v.split('').slice(0, -1).join(''))
+        }
+    } 
     return (
         <Wrapper>
             {rows.map((row, index) => (