diff --git a/client/src/components/Profile/cashModal.tsx b/client/src/components/Profile/cashModal.tsx index 866ff083..02195472 100644 --- a/client/src/components/Profile/cashModal.tsx +++ b/client/src/components/Profile/cashModal.tsx @@ -1,18 +1,25 @@ import React, { useState } from 'react'; import styled from 'styled-components'; import { useSelector, useDispatch } from 'react-redux'; -import { useCreateCash, useGetCash, useUpdateCash } from '../../hooks/useCash'; +import { useCreateCash, useGetCash, useResetCash } from '../../hooks/useCash'; import { RootState } from '../../store/config'; import { setCashId, setCashAmount } from '../../reducer/cash/cashSlice'; const CashModal: React.FC = ({ onClose }) => { + + const titleText = "현금"; + const cashCreationPlaceholder = "생성할 현금 입력"; + const createCashButtonText = "현금 생성"; + const cashInputPlaceholder = "현금 입력"; + const resetButtonText = "리셋"; + const dispatch = useDispatch(); const cashId = useSelector((state: RootState) => state.cash.cashId); const cashAmount = useSelector((state: RootState) => state.cash.cashAmount) || 0; const createCashMutation = useCreateCash(); const { data: cashData, isLoading } = useGetCash(cashId); - const updateCashMutation = useUpdateCash(); + const updateCashMutation = useResetCash(); const [cashInput, setCashInput] = useState(''); const [initialAmount, setInitialAmount] = useState(0); // 현금 생성을 위한 상태 변수 @@ -31,26 +38,27 @@ const CashModal: React.FC = ({ onClose }) => { dispatch(setCashAmount(cashData.data.cash)); } - // 현금 충전 및 충전된 현금량 전역 저장 - const handleCashReceive = () => { - if (cashId && cashAmount !== null) { +// 현금을 입력한 금액으로 리셋하는 함수 + const handleCashReset = () => { + if (cashId) { const numericCashId = parseInt(cashId, 10); // cashId를 숫자로 변환 const numericCashAmount = Number(cashInput); // cashInput을 숫자로 변환 updateCashMutation.mutate({ cashId: numericCashId, cashAmount: numericCashAmount }, { onSuccess: () => { - dispatch(setCashAmount((prevCash: number) => prevCash ? prevCash + numericCashAmount : numericCashAmount)); + dispatch(setCashAmount(numericCashAmount)); // 현금 금액을 입력한 금액으로 리셋 } }); } else { - console.error("cashId or cashAmount is null or not a valid number."); + console.error("cashId is null or not a valid number."); } }; + return ( × - 현금 + {titleText} {/* 현금 생성 입력창 및 버튼 추가 */}
@@ -58,9 +66,9 @@ const CashModal: React.FC = ({ onClose }) => { type="number" value={initialAmount} onChange={e => setInitialAmount(Number(e.target.value))} - placeholder="생성할 현금 입력" + placeholder={cashCreationPlaceholder} /> - 현금 생성 + {createCashButtonText}

현재 현금: {isLoading ? 'Loading...' : cashAmount.toLocaleString()}

@@ -69,16 +77,15 @@ const CashModal: React.FC = ({ onClose }) => { type="number" value={cashInput} onChange={e => setCashInput(e.target.value)} - placeholder="현금 입력" + placeholder={cashInputPlaceholder} /> - 받기 + {resetButtonText}
); }; - interface CashModalProps { onClose: () => void; cashId: string | null; diff --git a/client/src/hooks/useCash.ts b/client/src/hooks/useCash.ts index ade93b0b..7df13135 100644 --- a/client/src/hooks/useCash.ts +++ b/client/src/hooks/useCash.ts @@ -29,6 +29,6 @@ export const useGetCash = (cashId: string | null) => { } -export const useUpdateCash = () => { - return useMutation((data: { cashId: number, cashAmount: number }) => axios.post(`http://ec2-13-125-246-160.ap-northeast-2.compute.amazonaws.com/cash/${data.cashId}`, { cash: data.cashAmount })); +export const useResetCash = () => { + return useMutation((data: { cashId: number, cashAmount: number }) => axios.patch(`http://ec2-13-125-246-160.ap-northeast-2.compute.amazonaws.com/cash/${data.cashId}`, { cash: data.cashAmount })); } \ No newline at end of file