feat: 금액 입력 부분 작업 진행 중

src/components/modal/Expenses.tsx

@@ -0,0 +1,47 @@
+import React, {useState} from 'react'
+import styled from 'styled-components'
+
+function Expenses() {
+  const [expenses, setExpenses] = useState('');
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const input = event.target.value;
+    const numericInput = Number(input.replace(/[^0-9]/g, '')).toLocaleString()
+    setExpenses(numericInput);
+  };
+
+  return (
+    <>
+    <Container>
+      <ExpensesInputBox>
+        <span>&#x20A9;</span> 
+        <StyledInput type="text" value={expenses} onChange={handleChange} />
+      </ExpensesInputBox>
+
+    </Container>
+    </>
+  );
+}
+
+const Container = styled.form `
+
+`
+
+const ExpensesInputBox = styled.div `
+  display: flex;
+  justify-content: space-around;
+  width: 200px;
+  border: 1px solid;
+  
+`
+
+const StyledInput = styled.input `
+  border: none;
+  text-align: right;
+  
+  &:focus {
+    outline: none;
+    
+`
+
+export default Expenses;

src/components/modal/Modal.tsx

@@ -1,5 +1,10 @@
-function modal() {
-  return <div>modal</div>;
+import React from 'react'
+import Expenses from './Expenses'
+
+function Modal() {
+  return (
+    <Expenses />
+  )
 }
 
-export default modal;
+export default Modal