Merge pull request #782 from woowacourse-teams/fix/#775

프론트 따닥 문제 해결
woowacourse-teams · Oct 24, 2024 · fb86c04 · fb86c04
2 parents 791d1a3 + 7e9185b
commit fb86c04
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 31 deletions.
diff --git a/frontend/src/pages/Bet/BetCreationPage/BetCreationPage.tsx b/frontend/src/pages/Bet/BetCreationPage/BetCreationPage.tsx
@@ -5,6 +5,7 @@ import TitleStep from './components/Steps/TitleStep';
 import WaitingMinutesStep from './components/Steps/WaitingMinutesStep';
 import useBetCreationForm from './hooks/useBetCreationForm';
 import useFunnel from '@_hooks/useFunnel';
+import { useRef } from 'react';
 
 export type BetCreationStep = '제목' | '추첨시간';
 
@@ -26,6 +27,8 @@ export default function BetCreationPage() {
     createBet,
   } = useBetCreationForm(currentStep);
 
+  const isSubmitted = useRef(false);
+
   return (
     <FunnelLayout>
       <FunnelLayout.Header>
@@ -63,13 +66,15 @@ export default function BetCreationPage() {
                 updateWaitingMinutes(waitingMinutes);
               }}
               onButtonClick={async () => {
+                if (isSubmitted.current) return;
                 const isValid = finalValidate(form);
 
                 if (!isValid) {
                   alert('모든 항목을 입력해주세요.');
                   return;
                 }
 
+                isSubmitted.current = true;
                 await createBet(form);
               }}
             />

diff --git a/frontend/src/pages/Bet/BetDetailPage/BetDetailPage.tsx b/frontend/src/pages/Bet/BetDetailPage/BetDetailPage.tsx
@@ -63,6 +63,9 @@ export default function BetDetailPage() {
   const [mainDescription, setMainDescription] = useState(' ');
   const leftSecond = useRef<number>(Infinity);
 
+  const isJoined = useRef(false);
+  const isCompleted = useRef(false);
+
   if (bet?.isAnnounced) {
     navigate(GET_ROUTES.nowDarakbang.betResult(betId), { replace: true });
   }
@@ -102,11 +105,15 @@ export default function BetDetailPage() {
       return navigate(GET_ROUTES.nowDarakbang.chattingRoom(bet.chatroomId));
     }
     if (bet.myRole === 'MOIMER') {
+      if (isCompleted.current) return;
+      isCompleted.current = true;
       completeBet(betId);
       return;
     }
     if (bet.myRole === 'MOIMEE') return;
     if (bet.myRole === 'NON_MOIMEE') {
+      if (isJoined.current) return;
+      isJoined.current = true;
       await joinBet(betId);
     }
   };

diff --git a/frontend/src/pages/Darakbang/DarakbangCreationPage/DarakbangCreationPage.tsx b/frontend/src/pages/Darakbang/DarakbangCreationPage/DarakbangCreationPage.tsx
@@ -1,7 +1,8 @@
 import * as S from './DarakbangCreationPage.style';
 
-import { ChangeEvent, useState } from 'react';
+import { ChangeEvent, useRef, useState } from 'react';
 
+import BackArrowButton from '@_components/Button/BackArrowButton/BackArrowButton';
 import Button from '@_components/Button/Button';
 import DarakbangCreationModalContent from './DarakbangCreationModalContent/DarakbangCreationModalContent';
 import ErrorControlledInput from '@_components/ErrorControlledInput/ErrorControlledInput';
@@ -14,7 +15,6 @@ import { setLastDarakbangId } from '@_common/lastDarakbangManager';
 import useCreateDarakbang from '@_hooks/mutaions/useCreateDarakbang';
 import { useNavigate } from 'react-router-dom';
 import { useTheme } from '@emotion/react';
-import BackArrowButton from '@_components/Button/BackArrowButton/BackArrowButton';
 
 export default function DarakbangCreationPage() {
   const theme = useTheme();
@@ -29,6 +29,7 @@ export default function DarakbangCreationPage() {
   const [darakbangName, setDarakbangName] = useState('');
   const [nickname, setNickname] = useState('');
   const [isModalOpen, setIsModalOpen] = useState(false);
+  const isSubmitted = useRef(false);
 
   return (
     <SelectLayout>
@@ -94,6 +95,8 @@ export default function DarakbangCreationPage() {
             nickname={nickname}
             onCancel={() => setIsModalOpen(false)}
             onConfirm={() => {
+              if (isSubmitted.current) return;
+              isSubmitted.current = true;
               createDarakbang({ nickname, name: darakbangName });
             }}
           />

diff --git a/frontend/src/pages/Moim/MoimCreationPage/MoimCreationPage.tsx b/frontend/src/pages/Moim/MoimCreationPage/MoimCreationPage.tsx
@@ -1,13 +1,14 @@
-import FunnelStepIndicator from '@_components/Funnel/FunnelStepIndicator/FunnelStepIndicator';
-import FunnelLayout from '@_layouts/FunnelLayout/FunnelLayout';
-import TitleStep from './components/Steps/TitleStep';
-import PlaceStep from './components/Steps/PlaceStep';
+import BackArrowButton from '@_components/Button/BackArrowButton/BackArrowButton';
 import DateAndTimeStep from './components/Steps/DateAndTimeStep';
-import MaxPeopleStep from './components/Steps/MaxPeopleStep';
 import DescriptionStep from './components/Steps/DescriptionStep';
+import FunnelLayout from '@_layouts/FunnelLayout/FunnelLayout';
+import FunnelStepIndicator from '@_components/Funnel/FunnelStepIndicator/FunnelStepIndicator';
+import MaxPeopleStep from './components/Steps/MaxPeopleStep';
+import PlaceStep from './components/Steps/PlaceStep';
+import TitleStep from './components/Steps/TitleStep';
 import useFunnel from '@_hooks/useFunnel';
 import useMoimCreationForm from './MoimCreationPage.hook';
-import BackArrowButton from '@_components/Button/BackArrowButton/BackArrowButton';
+import { useRef } from 'react';
 
 export type MoimCreationStep =
   | '이름입력'
@@ -44,6 +45,8 @@ export default function MoimCreationPage() {
     isPending,
   } = useMoimCreationForm(currentStep);
 
+  const isSubmitted = useRef(false);
+
   return (
     <FunnelLayout>
       <FunnelLayout.Header>
@@ -98,11 +101,13 @@ export default function MoimCreationPage() {
               onDescriptionChange={updateDescription}
               isValid={!isPending}
               onButtonClick={() => {
+                if (isSubmitted.current) return;
                 const { isValid, errorMessage } = finalValidate();
                 if (!isValid) {
                   alert(errorMessage);
                   return;
                 }
+                isSubmitted.current = true;
                 createMoim(formData);
               }}
             />

diff --git a/frontend/src/pages/Moim/MoimDetailPage/MoimDetailPage.tsx b/frontend/src/pages/Moim/MoimDetailPage/MoimDetailPage.tsx
@@ -128,12 +128,16 @@ export default function MoimDetailPage() {
             {
               name: '모임 취소하기',
               disabled: isPendingCancelMoim,
-              onClick: () => cancelMoim(moimId),
+              onClick: () => {
+                cancelMoim(moimId);
+              },
             },
             {
               name: '모임 다시 열기',
               disabled: isPendingReopenMoim,
-              onClick: () => ReopenMoim(moimId),
+              onClick: () => {
+                ReopenMoim(moimId);
+              },
             },
           ]}
         />
@@ -146,24 +150,16 @@ export default function MoimDetailPage() {
             {
               name: '참여 취소하기',
               disabled: isPendingCancelChamyo,
-              onClick: () => cancelChamyo(moimId),
+              onClick: () => {
+                cancelChamyo(moimId);
+              },
             },
           ]}
         />
       );
     }
 
-    return (
-      <KebabMenu
-        options={[
-          {
-            name: '사용할 수 있는 메뉴가 없습니다',
-            disabled: isPendingCancelChamyo,
-            onClick: () => {},
-          },
-        ]}
-      />
-    );
+    return null;
   }, [
     ReopenMoim,
     cancelChamyo,
@@ -181,16 +177,22 @@ export default function MoimDetailPage() {
     if (moim.status === 'CANCELED') return;
 
     if (role === 'MOIMER') {
-      if (moim.status === 'MOIMING') return completeMoim(moimId);
+      if (moim.status === 'MOIMING') {
+        return completeMoim(moimId);
+      }
       if (moim.status === 'COMPLETED') {
-        if (moim.chatRoomId === null) return openChat(moimId);
+        if (moim.chatRoomId === null) {
+          return openChat(moimId);
+        }
 
         return navigate(GET_ROUTES.nowDarakbang.chattingRoom(moim.chatRoomId));
       }
       return;
     }
     if (role === 'NON_MOIMEE') {
-      if (moim.status === 'MOIMING') return joinMoim(moimId);
+      if (moim.status === 'MOIMING') {
+        return joinMoim(moimId);
+      }
       if (moim.status === 'COMPLETED') return;
       return;
     }

diff --git a/frontend/src/pages/Moim/MoimModifyPage/MoimModifyPage.tsx b/frontend/src/pages/Moim/MoimModifyPage/MoimModifyPage.tsx
@@ -1,15 +1,15 @@
-import { MoimInfo } from '@_types/index';
 import { useLocation, useNavigate } from 'react-router-dom';
 
 import Button from '@_components/Button/Button';
 import FormLayout from '@_layouts/FormLayout/FormLayout';
 import GET_ROUTES from '@_common/getRoutes';
 import LabeledInput from '@_components/Input/MoimInput';
+import LabeledTextArea from '@_components/TextArea/LabeledTextArea';
 import MOIM_INPUT_INFOS from './MoimModifyPage.constant';
+import { MoimInfo } from '@_types/index';
 import useModifyMoim from '@_hooks/mutaions/useModifyMoim';
 import useMoimInfoInput from './MoimModifyPage.hook';
-import { useState } from 'react';
-import LabeledTextArea from '@_components/TextArea/LabeledTextArea';
+import { useRef } from 'react';
 
 export default function MoimModifyPage() {
   const navigate = useNavigate();
@@ -18,7 +18,7 @@ export default function MoimModifyPage() {
   const { mutate: modifyMoim } = useModifyMoim((moimId: number) => {
     navigate(GET_ROUTES.nowDarakbang.moimDetail(moimId));
   });
-  const [isSubmitted, setIsSubmitted] = useState(false);
+  const isModified = useRef(false);
 
   const {
     inputData,
@@ -31,8 +31,8 @@ export default function MoimModifyPage() {
     if (!isValidMoimInfoInput) {
       return;
     }
-    if (isSubmitted) return;
-    setIsSubmitted(true);
+    if (isModified.current) return;
+    isModified.current = true;
     modifyMoim({ moimId: state.moimId, state: inputData });
   };