feat/ 입/출금 폼 기능 구현 진행 중

custom.d.ts

@@ -1,7 +1,7 @@
 // 소비 기록을 추가하거나 수정할 때 서버 요청 데이터
 interface ExpenseData {
   amount: number;
-  userId: string;
+  userId?: string;
   category: string;
   date: string;
 }

src/components/common/Numeric.ts

@@ -0,0 +1,5 @@
+// input에 숫자가 아닌 부분을 찾아서 제거 
+// 숫자 단위에 , 가 필요하면 input value값에 .toLocaleString()
+export const numeric = (input: string) => {
+    return Number(input.replace(/[^0-9]/g, ''));
+}

src/components/modal/DepositTag.tsx

@@ -1,19 +1,18 @@
 import Dropdown from './Dropdown';
 
-function DepositTag() {
+interface DepositTagProps {
+  handleTagChange: (tags: string) => void;
+}
+
+function DepositTag({ handleTagChange }: DepositTagProps) {
   const depositTags = [
     '월급',
     '용돈',
     '기타',
   ];
 
-  const handleTagSelect = (tag: string) => {
-
-    console.log(tag);
-  };
-
   return (
-    <Dropdown options={depositTags} onSelect={handleTagSelect} />
+    <Dropdown options={depositTags} onSelect={handleTagChange} />
   );
 }
 

src/components/modal/ExpensesAmount.tsx

@@ -1,8 +1,12 @@
-import { ChangeEvent, useState, useRef, useEffect } from 'react'
+import { ChangeEvent, useRef, useEffect } from 'react'
 import styled from 'styled-components'
 
-function ExpensesAmount() {
-    const [amount, setAmount] = useState(0);
+interface ExpensesAmountProps {
+    amount: number;
+    handleAmountChange: (e: ChangeEvent<HTMLInputElement>) => void;
+  }
+
+function ExpensesAmount({ amount, handleAmountChange }: ExpensesAmountProps) {
     const inputRef = useRef<HTMLInputElement>(null);
 
     useEffect(() => {
@@ -11,16 +15,11 @@ function ExpensesAmount() {
         }
     }, []);
 
-    const handleChage = (e: ChangeEvent<HTMLInputElement>) => {
-        const input = e.target.value;
-        const numericInput = Number(input.replace(/[^0-9]/g, ''));
-        setAmount(numericInput);
-    }
 
 
   return (
     <AmountContainer>
-        <Won>\</Won><AmountInput ref={inputRef} dir="rtl" type="text" value={amount.toLocaleString()} onChange={handleChage}/>
+        <Won>\</Won><AmountInput ref={inputRef} dir="rtl" type="text" value={amount.toLocaleString()} onChange={handleAmountChange}/>
     </AmountContainer>
   )
 }

src/components/modal/ExpensesTag.tsx

@@ -1,6 +1,10 @@
 import Dropdown from './Dropdown';
 
-function ExpensesTag() {
+interface ExpensesTagProps {
+  handleTagChange: (tags: string) => void;
+}
+
+function ExpensesTag({ handleTagChange }: ExpensesTagProps) {
   const ExpensesTags = [
     '식비',
     '교통비',
@@ -19,13 +23,8 @@ function ExpensesTag() {
     '기타',
   ];
 
-  const handleTagSelect = (tag: string) => {
-
-    console.log(tag);
-  };
-
   return (
-    <Dropdown options={ExpensesTags} onSelect={handleTagSelect} />
+    <Dropdown options={ExpensesTags} onSelect={handleTagChange} />
   );
 }
 

src/components/modal/Modal.tsx

@@ -1,24 +1,93 @@
-import React from 'react'
-import ExpensesAmount from './ExpensesAmount'
-import { styled } from 'styled-components'
-import ExpensesTag from './ExpensesTag'
-import DepositTag from './DepositTag'
+import React, { useState } from 'react';
+import ExpensesAmount from './ExpensesAmount';
+import ExpensesTag from './ExpensesTag';
+import DepositTag from './DepositTag';
+import PaymentMethod from './PaymentMethod';
+import { numeric } from '../common/Numeric';
+import { createdExpense } from '@/lib/api/Api';
+import { styled } from 'styled-components';
 
 function Modal() {
+  const [type, setType] = useState<string | undefined>('');
+  const [amount, setAmount] = useState(0);
+  const [tag, setTag] = useState('');
+  const [paymentMethod, setPaymentMethod] = useState('');
+
+  const handleButtonClick = (
+    e: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+  ) => {
+    const formType = e.currentTarget.dataset.formType;
+    setType(formType);
+  };
+
+  const handleAmountChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const input = e.target.value;
+    setAmount(numeric(input));
+  };
+
+  const handleTagChange = (tags: string) => {
+    setTag(tags);
+  };
+
+  const handleMethodChange = (tags: string) => {
+    setPaymentMethod(tags);
+  };
+
+  const handleSubmit = async () => {
+    const data = {
+      amount,
+      category: tag,
+      date: new Date().toISOString(),
+    };
+    await createdExpense(data);
+  };
+
   return (
     <Container>
-      <ExpensesAmount />
-      <ExpensesTag />
-      <DepositTag />
+      <ButtonCotainer>
+        <DepositButton data-form-type="deposit" onClick={handleButtonClick}>
+          입금
+        </DepositButton>
+        <ExpenseButton data-form-type="expense" onClick={handleButtonClick}>
+          지출
+        </ExpenseButton>
+      </ButtonCotainer>
+      <ExpensesAmount amount={amount} handleAmountChange={handleAmountChange} />
+      {type === 'deposit' ? (
+        <DepositTag handleTagChange={handleTagChange} />
+      ) : type === 'expense' ? (
+        <ExpensesTag handleTagChange={handleTagChange} />
+      ) : null}
+      {type === 'deposit' ? null : type === 'expense' ? (
+        <PaymentMethod handleMethodChange={handleMethodChange} />
+      ) : null}
+      <Submit onClick={handleSubmit}>확인</Submit>
     </Container>
-  )
+  );
 }
 
-const Container = styled.div `
-  display:flex;
+const Container = styled.div`
+  display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
-`
+`;
+
+const ButtonCotainer = styled.div`
+  display: flex;
+  gap: 50px;
+  justify-content: center;
+`;
+
+const DepositButton = styled.button`
+  width: 100px;
+  height: 30px;
+`;
+
+const ExpenseButton = styled.button`
+  width: 100px;
+  height: 30px;
+`;
 
-export default Modal
+const Submit = styled.button``;
+export default Modal;

src/components/modal/PaymentMethod.tsx

@@ -0,0 +1,19 @@
+import Dropdown from './Dropdown';
+
+interface PaymentTagProps {
+  handleMethodChange: (tags: string) => void;
+  }
+
+function PaymentTag({ handleMethodChange }: PaymentTagProps) {
+  const PaymentTags = [
+   '현금',
+   '체크카드',
+   '신용카드'
+  ];
+
+  return (
+    <Dropdown options={PaymentTags} onSelect={handleMethodChange} />
+  );
+}
+
+export default PaymentTag;