Merge pull request #1035 from 42organization/GGFE-261-출석모달버그

[GGFE-261] 리로드로인해 공지모달뜨는 버그 수정
42organization · Sep 19, 2023 · 6b19294 · 6b19294
2 parents e8556a3 + 3fe9ef5
commit 6b19294
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 13 deletions.
diff --git a/components/modal/ModalProvider.tsx b/components/modal/ModalProvider.tsx
@@ -1,4 +1,5 @@
 import { useEffect } from 'react';
+import { useQueryClient } from 'react-query';
 import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
 import { reloadMatchState } from 'utils/recoil/match';
 import { modalState, modalTypeState } from 'utils/recoil/modal';
@@ -11,6 +12,7 @@ export default function ModalProvider() {
   const [{ modalName, isAttended }, setModal] = useRecoilState(modalState);
   const setReloadMatch = useSetRecoilState(reloadMatchState);
   const modalType = useRecoilValue(modalTypeState);
+  const queryClient = useQueryClient();
 
   useEffect(() => {
     setModalOutsideScroll();
@@ -22,9 +24,13 @@ export default function ModalProvider() {
   const closeModalHandler = (e: React.MouseEvent) => {
     if (modalName?.split('-')[0] === 'FIXED') return;
     if (e.target instanceof HTMLDivElement && e.target.id === 'modalOutside') {
-      if (modalName === 'MATCH-CANCEL') setReloadMatch(true);
-      else if (modalName === 'EVENT-ANNOUNCEMENT' && isAttended === false) {
+      if (modalName === 'MATCH-CANCEL') {
+        setReloadMatch(true);
+      } else if (modalName === 'EVENT-ANNOUNCEMENT' && isAttended === false) {
         setModal({ modalName: 'EVENT-WELCOME' });
+      } else if (modalName === 'COIN-ANIMATION') {
+        queryClient.invalidateQueries('user');
+        setModal({ modalName: null });
       } else {
         setModal({ modalName: null });
       }

diff --git a/components/modal/event/WelcomeModal.tsx b/components/modal/event/WelcomeModal.tsx
@@ -1,5 +1,4 @@
 import { useState } from 'react';
-import { useQueryClient } from 'react-query';
 import { useSetRecoilState } from 'recoil';
 import { Modal } from 'types/modalTypes';
 import { instance } from 'utils/axios';
@@ -16,7 +15,6 @@ export default function WelcomeModal() {
   const setModal = useSetRecoilState<Modal>(modalState);
   const setError = useSetRecoilState(errorState);
   const [buttonState, setButtonState] = useState(false);
-  const queryClient = useQueryClient();
   const [isLoading, setIsLoading] = useState(false);
   const content = {
     title: 'Welcome!',
@@ -28,7 +26,6 @@ export default function WelcomeModal() {
     try {
       setIsLoading(true);
       const res = await instance.post(`/pingpong/users/attendance`);
-      queryClient.invalidateQueries('user');
       return res.data;
     } catch (e: any) {
       if (e.response.status === 409) {
@@ -52,7 +49,7 @@ export default function WelcomeModal() {
     try {
       setButtonState(true);
       const updatedcoin = await postCoinHandler();
-      if (updatedcoin == null) return;
+      if (updatedcoin === null) return;
       setModal({
         modalName: 'COIN-ANIMATION',
         CoinResult: {
@@ -92,7 +89,7 @@ export default function WelcomeModal() {
             value='출석하기'
             isLoading={isLoading}
           />
-          {buttonState && <CoinPopcon amount={8} coin={1} />}
+          {buttonState && <CoinPopcon amount={5} coin={0} />}
         </ModalButtonContainer>
       </div>
     </div>

diff --git a/components/modal/statChange/CoinChangeModal.tsx b/components/modal/statChange/CoinChangeModal.tsx
@@ -1,4 +1,6 @@
 import Image from 'next/image';
+import { useEffect } from 'react';
+import { useQueryClient } from 'react-query';
 import { useSetRecoilState } from 'recoil';
 import { CoinResult } from 'types/coinTypes';
 import { modalState } from 'utils/recoil/modal';
@@ -9,6 +11,13 @@ import styles from 'styles/modal/CoinChangeModal.module.scss';
 
 export default function CoinChangeModal(coin: CoinResult) {
   const setModal = useSetRecoilState(modalState);
+  const queryClient = useQueryClient();
+
+  useEffect(() => {
+    return () => {
+      queryClient.invalidateQueries('user');
+    };
+  }, []);
 
   const closeModal = () => {
     setModal({ modalName: null });

diff --git a/components/modal/statChange/StatChangeModal.tsx b/components/modal/statChange/StatChangeModal.tsx
@@ -1,5 +1,4 @@
 import { useEffect, useState } from 'react';
-import { useQueryClient } from 'react-query';
 import { useSetRecoilState } from 'recoil';
 import { CoinResult } from 'types/coinTypes';
 import { GameResult } from 'types/gameTypes';
@@ -9,15 +8,14 @@ import { reloadMatchState } from 'utils/recoil/match';
 import { modalState } from 'utils/recoil/modal';
 import ExpStat from 'components/modal/statChange/ExpStat';
 import PppStat from 'components/modal/statChange/PppStat';
-import useAxiosGet, { useMockAxiosGet } from 'hooks/useAxiosGet';
+import useAxiosGet from 'hooks/useAxiosGet';
 import styles from 'styles/modal/afterGame/StatChangeModal.module.scss';
 
 export default function StatChangeModal({ gameId, mode }: Exp) {
   const setModal = useSetRecoilState(modalState);
   const setReloadMatch = useSetRecoilState(reloadMatchState);
   const setError = useSetRecoilState(errorState);
   const [stat, setStat] = useState<GameResult | undefined>();
-  const queryClient = useQueryClient();
 
   const getExpHandler = useAxiosGet({
     url: `/pingpong/games/${gameId}/result/${mode?.toLowerCase()}`,
@@ -28,9 +26,6 @@ export default function StatChangeModal({ gameId, mode }: Exp) {
 
   useEffect(() => {
     getExpHandler();
-    return () => {
-      queryClient.invalidateQueries('user');
-    };
   }, []);
 
   const closeModal = () => {