Merge pull request #1010 from 42organization/GGFE-248-Store-Coin-Reac…

…t-Query

[GGFE-248] 상점 코인 react-query 적용

components/modal/store/purchase/BuyModal.tsx

@@ -1,10 +1,10 @@
 import { useState } from 'react';
+import { useQueryClient } from 'react-query';
 import { useSetRecoilState, useResetRecoilState } from 'recoil';
 import { PriceTag } from 'types/modalTypes';
 import { instance, isAxiosError } from 'utils/axios';
 import { errorState } from 'utils/recoil/error';
 import { modalState } from 'utils/recoil/modal';
-import { updateCoinState } from 'utils/recoil/updateCoin';
 import { PURCHASE_ALERT_MESSAGE } from 'constants/store/purchaseAlertMessage';
 import {
   ModalButtonContainer,
@@ -17,8 +17,7 @@ export default function BuyModal({ itemId, product, price }: PriceTag) {
   const setModal = useSetRecoilState(modalState);
   const resetModal = useResetRecoilState(modalState);
   const setError = useSetRecoilState<string>(errorState);
-  const updateCoin = useSetRecoilState(updateCoinState);
-
+  const queryClient = useQueryClient();
   const errorCode = ['IT100', 'IT201', 'IT202', 'IT203', 'UR100'] as const;
 
   type errorCodeType = (typeof errorCode)[number];
@@ -43,7 +42,7 @@ export default function BuyModal({ itemId, product, price }: PriceTag) {
     try {
       await instance.post(`/pingpong/items/purchases/${itemId}`, null);
       alert(BUY.SUCCESS);
-      updateCoin(true);
+      queryClient.invalidateQueries('coin');
       setIsLoading(false);
     } catch (error: unknown) {
       setIsLoading(false);

components/modal/store/purchase/GiftModal.tsx

@@ -1,11 +1,11 @@
 import { useState } from 'react';
+import { useQueryClient } from 'react-query';
 import { useSetRecoilState, useResetRecoilState } from 'recoil';
 import { GiftRequest } from 'types/itemTypes';
 import { PriceTag } from 'types/modalTypes';
 import { instance, isAxiosError } from 'utils/axios';
 import { errorState } from 'utils/recoil/error';
 import { modalState } from 'utils/recoil/modal';
-import { updateCoinState } from 'utils/recoil/updateCoin';
 import { PURCHASE_ALERT_MESSAGE } from 'constants/store/purchaseAlertMessage';
 import {
   ModalButtonContainer,
@@ -19,11 +19,10 @@ export default function GiftModal({ itemId, product, price }: PriceTag) {
   const setModal = useSetRecoilState(modalState);
   const resetModal = useResetRecoilState(modalState);
   const setError = useSetRecoilState<string>(errorState);
-  const updateCoin = useSetRecoilState(updateCoinState);
   const [giftReqData, setGiftReqData] = useState<GiftRequest>({
     ownerId: '',
   });
-
+  const queryClient = useQueryClient();
   const errorCode = [
     'IT100',
     'IT201',
@@ -61,7 +60,7 @@ export default function GiftModal({ itemId, product, price }: PriceTag) {
     try {
       await instance.post(`/pingpong/items/gift/${itemId}`, giftReqData);
       alert(`(◞ꈍ∇ꈍ)っ■ ${giftReqData.ownerId}님께 선물이 전달되었습니다`);
-      updateCoin(true);
+      queryClient.invalidateQueries('coin');
       setIsLoading(false);
     } catch (error: unknown) {
       setIsLoading(false);

components/mode/modeWraps/StoreModeWrap.tsx

@@ -1,4 +1,3 @@
-import Image from 'next/image';
 import { Dispatch, SetStateAction } from 'react';
 import { useSetRecoilState } from 'recoil';
 import { Modal } from 'types/modalTypes';

pages/store.tsx

@@ -1,45 +1,39 @@
-import { useEffect, useState } from 'react';
-import { useRecoilState, useResetRecoilState } from 'recoil';
+import { useState } from 'react';
+import { useQuery } from 'react-query';
+import { useSetRecoilState } from 'recoil';
 import { StoreMode } from 'types/storeTypes';
 import { ICoin } from 'types/userTypes';
-import { updateCoinState } from 'utils/recoil/updateCoin';
+import { instance } from 'utils/axios';
+import { errorState } from 'utils/recoil/error';
 import { StoreModeWrap } from 'components/mode/modeWraps/StoreModeWrap';
 import { InventoryList } from 'components/store/InventoryList';
 import ItemsList from 'components/store/purchase/ItemsList';
-import useAxiosGet from 'hooks/useAxiosGet';
 import styles from 'styles/store/StoreContainer.module.scss';
 
 export default function Store() {
   const [mode, setMode] = useState<StoreMode>('BUY');
-  const [coin, setCoin] = useState<ICoin>({ coin: 0 });
-  const [reloadCoin, updateCoin] = useRecoilState(updateCoinState);
-  const resetUpdateCoinState = useResetRecoilState(updateCoinState);
+  const dummyCoin = { coin: 0 }; // data가 undefined일 때 대비
+  const setError = useSetRecoilState(errorState);
 
-  const getCoin = useAxiosGet({
-    url: '/pingpong/users/coin',
-    setState: setCoin,
-    err: 'JY01',
-    type: 'setError',
-  });
-
-  useEffect(() => {
-    getCoin();
-    return () => {
-      resetUpdateCoinState();
-    };
-  }, []);
+  const { data, isError } = useQuery<ICoin>(
+    'coin',
+    () => instance.get('/pingpong/users/coin').then((res) => res.data),
+    { retry: 1 }
+  );
 
-  useEffect(() => {
-    if (reloadCoin) {
-      getCoin();
-      updateCoin(false);
-    }
-  }, [reloadCoin]);
+  if (isError) {
+    setError('JY01');
+  }
 
+  if (!data) return null;
   return (
     <div className={styles.pageWrap}>
       <h1 className={styles.title}>GG Store</h1>
-      <StoreModeWrap currentMode={mode} setStoreMode={setMode} coin={coin} />
+      <StoreModeWrap
+        currentMode={mode}
+        setStoreMode={setMode}
+        coin={data ? data : dummyCoin}
+      />
       <div className={styles.storeContainer}>
         {mode === 'BUY' ? <ItemsList /> : <InventoryList />}
       </div>