현금 모달 구현

useCash Hook, cashSlice reducer 생성
현금의 생성,읽기, 추가 기능 구현
프로필 탭에서 화면 구현
Issues #70

client/src/components/Profile/cashModal.tsx

@@ -1,49 +1,69 @@
-import React, { useState, useEffect } from 'react';
-import styled from 'styled-components';
-import axios from 'axios';
+import React, { useState } from 'react';
+import styled from 'styled-components'; 
+import { useSelector, useDispatch } from 'react-redux'; 
+import { useCreateCash, useGetCash, useUpdateCash } from '../../hooks/useCash'; 
+import { RootState } from '../../store/config'; 
+import { setCashId, setCashAmount } from '../../reducer/cash/cashSlice';
 
-const CashModal: React.FC<CashModalProps> = ({ onClose, memberId }) => {
-    const [cash, setCash] = useState<number | null>(null);
-    const [cashInput, setCashInput] = useState<string>('');
+const CashModal: React.FC<CashModalProps> = ({ onClose }) => {
+    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();
 
-    useEffect(() => {
-        axios.get(`http://ec2-13-125-246-160.ap-northeast-2.compute.amazonaws.com/cash/${memberId}`)
-            .then(response => {
-                if (response.status === 200) {
-                    setCash(response.data.cash);
-                } else if (response.status === 204) {
-                    // Handle the "No Content" scenario. This could be setting cash to 0 or displaying a message.
-                    setCash(0); // Or handle it in a way that suits your needs
-                }
-            })
-            .catch(error => {
-                console.error("Error fetching cash:", error);
-            });
-    }, [memberId]);
+    const [cashInput, setCashInput] = useState<string>('');
+    const [initialAmount, setInitialAmount] = useState<number>(0); // 현금 생성을 위한 상태 변수
 
-    const handleCashReceive = () => {
-        axios.post(`http://ec2-13-125-246-160.ap-northeast-2.compute.amazonaws.com/cash/${memberId}`, {
-            cash: cashInput
-        })
-        .then(response => {
-            if (response.status === 201) {
-                // Update the cash display with the new value
-                setCash(prevCash => prevCash ? prevCash + Number(cashInput) : Number(cashInput));
-            } else {
-                console.warn("Unexpected status code:", response.status);
+    // 현금 생성 및 cashId 전역 저장
+    const handleCreateCash = () => {
+        createCashMutation.mutate(initialAmount, {
+            onSuccess: (data) => {
+                dispatch(setCashId(data.data.cashId));
             }
-        })
-        .catch(error => {
-            console.error("Error updating cash:", error);
         });
     };
 
+    // 보유 현금량 조회 및 전역 저장
+    if (cashData && cashAmount !== cashData.data.cash) {
+        dispatch(setCashAmount(cashData.data.cash));
+    }
+
+    // 현금 충전 및 충전된 현금량 전역 저장
+    const handleCashReceive = () => {
+        if (cashId && cashAmount !== null) {
+            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));
+                }
+            });
+        } else {
+            console.error("cashId or cashAmount is null or not a valid number.");
+        }
+    };
+
     return (
         <ModalBackground>
             <ModalContainer>
                 <CloseButton onClick={onClose}>&times;</CloseButton>
                 <Title>현금</Title>
-                <p>현재 현금: {cash ? cash.toLocaleString() : 'Loading...'}</p>
+
+                {/* 현금 생성 입력창 및 버튼 추가 */}
+                <div>
+                    <CashCreationInput
+                        type="number"
+                        value={initialAmount}
+                        onChange={e => setInitialAmount(Number(e.target.value))}
+                        placeholder="생성할 현금 입력"
+                    />
+                    <CreateCashButton onClick={handleCreateCash}>현금 생성</CreateCashButton>
+                </div>
+
+                <p>현재 현금: {isLoading ? 'Loading...' : cashAmount.toLocaleString()}</p>
                 <div>
                     <CashInput
                         type="number"
@@ -58,9 +78,10 @@ const CashModal: React.FC<CashModalProps> = ({ onClose, memberId }) => {
     );
 };
 
+
 interface CashModalProps {
     onClose: () => void;
-    memberId: string;
+    cashId: string | null;
 }
 
 // Styled Components Definitions:
@@ -119,5 +140,20 @@ const ReceiveButton = styled.button`
     border-radius: 5px;
     cursor: pointer;
 `;
+const CashCreationInput = styled.input`
+    padding: 10px;
+    border: 1px solid lightgray;
+    border-radius: 5px;
+    margin-right: 10px;
+`;
+
+const CreateCashButton = styled.button`
+    padding: 10px 15px;
+    background-color: blue;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+`;
 
 export default CashModal;

client/src/components/Profile/profileModal.tsx

@@ -1,10 +1,14 @@
 import React, { useState } from 'react';
 import styled from 'styled-components';
+import { useSelector } from 'react-redux';
 import MemberInfoModal from './memberInfoModal'; // 경로는 실제 파일 위치에 따라 수정해야 합니다.
 import MemberWithdrawalModal from './memberWithdrawalModal'; // 경로는 실제 파일 위치에 따라 수정해야 합니다.
+import CashModal from './cashModal'; 
+import { RootState } from '../../store/config'; 
 
 const ProfileModal: React.FC<ProfileModalProps> = ({ onClose }) => {
     const [selectedTab, setSelectedTab] = useState<number>(1);
+    const cashId = useSelector((state: RootState) => state.cash.cashId); // Get cashId from Redux store
 
     const handleTabChange = (tabNumber: number) => {
         setSelectedTab(tabNumber);
@@ -21,7 +25,7 @@ const ProfileModal: React.FC<ProfileModalProps> = ({ onClose }) => {
                 </Tabs>
                 <TabContent>
                     {selectedTab === 1 && <MemberInfoModal onClose={onClose}/>}
-                    {selectedTab === 2 && <div>현금 Content</div>}
+                    <CashModal onClose={onClose} cashId={cashId} />
                     {selectedTab === 3 && <MemberWithdrawalModal onClose={onClose}/>} {/* 회원탈퇴 모달 추가 */}
                 </TabContent>
             </ModalContainer>

client/src/hooks/useCash.ts

@@ -0,0 +1,34 @@
+// hooks/useCash.ts
+import { useQuery, useMutation } from 'react-query';
+import axios from 'axios';
+
+export const useCreateCash = () => {
+    return useMutation((initialAmount: number) => axios.post('http://ec2-13-125-246-160.ap-northeast-2.compute.amazonaws.com/cash', { cash: initialAmount }));
+}
+
+export const useGetCash = (cashId: string | null) => {
+    const queryFn = () => {
+        if (!cashId) {
+            throw new Error("Cash ID is not provided.");
+        }
+        return axios.get(`http://ec2-13-125-246-160.ap-northeast-2.compute.amazonaws.com/cash/${cashId}`);
+    };
+
+    const queryResult = useQuery(['cash', cashId], queryFn, {
+        enabled: !!cashId,
+    });
+
+    if (!cashId) {
+        return {
+            ...queryResult,
+            data: null
+        };
+    }
+
+    return queryResult;
+}
+
+
+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 }));
+}

client/src/reducer/cash/cashSlice.ts

@@ -0,0 +1,21 @@
+// store/cashSlice.ts
+import { createSlice } from '@reduxjs/toolkit';
+
+const cashSlice = createSlice({
+    name: 'cash',
+    initialState: {
+        cashId: null,
+        cashAmount: null,
+    },
+    reducers: {
+        setCashId: (state, action) => {
+            state.cashId = action.payload;
+        },
+        setCashAmount: (state, action) => {
+            state.cashAmount = action.payload;
+        },
+    },
+});
+
+export const { setCashId, setCashAmount } = cashSlice.actions;
+export default cashSlice.reducer;

client/src/store/config.ts

@@ -7,6 +7,7 @@ import { stockOrderSetReducer } from "../reducer/StockOrderSet-Reducer";
 import { companyIdReducer } from "../reducer/CompanyId-Reducer";
 import  memberInfoReducer from '../reducer/member/memberInfoSlice';
 import loginReducer from '../reducer/member/loginSlice';
+import cashSlice from '../reducer/cash/cashSlice';
 
 
 const store = configureStore({
@@ -19,6 +20,7 @@ const store = configureStore({
     companyId: companyIdReducer,
     memberInfo: memberInfoReducer,
     login: loginReducer,
+    cash: cashSlice,
   },
 });