diff --git a/hooks/modal/store/purchase/useBuyModal.ts b/hooks/modal/store/purchase/useBuyModal.ts index 3f0f2ddfe..7b34f0bcf 100644 --- a/hooks/modal/store/purchase/useBuyModal.ts +++ b/hooks/modal/store/purchase/useBuyModal.ts @@ -3,10 +3,12 @@ import { Purchase } from 'types/itemTypes'; import { instance } from 'utils/axios'; import { errorState } from 'utils/recoil/error'; import { modalState } from 'utils/recoil/modal'; +import { updateCoinState } from 'utils/recoil/updateCoin'; const useBuyModal = (purchasedItem: Purchase) => { const setModal = useSetRecoilState(modalState); const setError = useSetRecoilState(errorState); + const updateCoin = useSetRecoilState(updateCoinState); const onPurchase = async () => { try { @@ -15,6 +17,7 @@ const useBuyModal = (purchasedItem: Purchase) => { null ); alert(`구매 성공!`); + updateCoin(true); } catch (error) { setError('HB03'); } diff --git a/hooks/modal/store/purchase/useGiftModal.ts b/hooks/modal/store/purchase/useGiftModal.ts index c5de34b24..781b9039e 100644 --- a/hooks/modal/store/purchase/useGiftModal.ts +++ b/hooks/modal/store/purchase/useGiftModal.ts @@ -3,10 +3,12 @@ import { Gift, GiftRequest } from 'types/itemTypes'; import { instance } from 'utils/axios'; import { errorState } from 'utils/recoil/error'; import { modalState } from 'utils/recoil/modal'; +import { updateCoinState } from 'utils/recoil/updateCoin'; const useGiftModal = (gift: Gift) => { const setModal = useSetRecoilState(modalState); const setError = useSetRecoilState(errorState); + const updateCoin = useSetRecoilState(updateCoinState); const data: GiftRequest = { ownerId: gift.ownerId, }; @@ -23,6 +25,7 @@ const useGiftModal = (gift: Gift) => { ); if (res.status === 201) { alert(`${gift.ownerId}님께 선물이 전달되었습니다.`); + updateCoin(true); } } catch (error) { setError('HB02'); diff --git a/pages/store.tsx b/pages/store.tsx index 09c549e3d..bb0694010 100644 --- a/pages/store.tsx +++ b/pages/store.tsx @@ -1,6 +1,8 @@ import { useEffect, useState } from 'react'; +import { useRecoilState, useResetRecoilState } from 'recoil'; import { StoreMode } from 'types/storeTypes'; import { ICoin } from 'types/userTypes'; +import { updateCoinState } from 'utils/recoil/updateCoin'; import { StoreModeWrap } from 'components/mode/modeWraps/StoreModeWrap'; import { Inventory } from 'components/store/Inventory'; import ItemsList from 'components/store/purchase/ItemsList'; @@ -10,7 +12,8 @@ import styles from 'styles/store/StoreContainer.module.scss'; export default function Store() { const [mode, setMode] = useState('BUY'); const [coin, setCoin] = useState({ coin: 0 }); - const [updateCoin, setUpdateCoin] = useState(true); + const [reloadCoin, updateCoin] = useRecoilState(updateCoinState); + const resetUpdateCoinState = useResetRecoilState(updateCoinState); const getCoin = useAxiosGet({ url: '/pingpong/users/coin', @@ -20,11 +23,18 @@ export default function Store() { }); useEffect(() => { - if (updateCoin) { + getCoin(); + return () => { + resetUpdateCoinState(); + }; + }, []); + + useEffect(() => { + if (reloadCoin) { getCoin(); - setUpdateCoin(false); + updateCoin(false); } - }, [updateCoin]); + }, [reloadCoin]); return (
diff --git a/utils/recoil/updateCoin.ts b/utils/recoil/updateCoin.ts new file mode 100644 index 000000000..e1dc2bc45 --- /dev/null +++ b/utils/recoil/updateCoin.ts @@ -0,0 +1,7 @@ +import { atom } from 'recoil'; +import { v1 } from 'uuid'; + +export const updateCoinState = atom({ + key: `updateCoinState/${v1()}`, + default: false, +});