Merge branch 'main' into feat/관리자-토너먼트-페이지-api-연동-#1131

42organization · Dec 21, 2023 · 2aeb4d4 · 2aeb4d4
2 parents eb5af40 + f65da3a
commit 2aeb4d4
Show file tree

Hide file tree

Showing 8 changed files with 120 additions and 60 deletions.
diff --git a/components/modal/tournament/TournamentRegistryModal.tsx b/components/modal/tournament/TournamentRegistryModal.tsx
@@ -8,6 +8,7 @@ import { instance } from 'utils/axios';
 import { dateToKRLocaleTimeString } from 'utils/handleTime';
 import { errorState } from 'utils/recoil/error';
 import { modalState } from 'utils/recoil/modal';
+import { toastState } from 'utils/recoil/toast';
 import {
   ModalButtonContainer,
   ModalButton,
@@ -30,25 +31,40 @@ export default function TournamentRegistryModal({
   player_cnt,
   tournamentId,
 }: TournamentInfo) {
+  const setSnackbar = useSetRecoilState(toastState);
   const setModal = useSetRecoilState(modalState);
   const setError = useSetRecoilState(errorState);
   const [registState, setRegistState] = useState<string>('LOADING');
   const [openDate, setOpenDate] = useState<string>('미정');
+  const [closeDate, setCloseDate] = useState<string>('미정');
   const [loading, setLoading] = useState<boolean>(false);
   const [playerCount, setPlayerCount] = useState<number>(player_cnt);
-
   const registTournament = useCallback(() => {
     setLoading(true);
     return instance
       .post(`/pingpong/tournaments/${tournamentId}/users`)
       .then((res) => {
-        // alert('토너먼트 신청이 완료됐습니다');
         setLoading(false);
+        setSnackbar({
+          toastName: `토너먼트 신청`,
+          severity: 'success',
+          message: `🔥 토너먼트 참가 신청이 완료 됐습니다 ! 🔥`,
+          clicked: true,
+        });
         setRegistState(res.data.status);
         return res.data.status;
       })
       .catch((error) => {
-        setError('토너먼트 신청 중 에러가 발생했습니다.');
+        setSnackbar({
+          toastName: `토너먼트 신청`,
+          severity: 'error',
+          message: `${
+            error.response?.data?.message
+              ? error.response.data.message
+              : '예상치 못한 에러가 발생했습니다 다시 시도해 주세요 😢'
+          } `,
+          clicked: true,
+        });
         setLoading(false);
       });
   }, []);
@@ -59,17 +75,31 @@ export default function TournamentRegistryModal({
       .delete(`/pingpong/tournaments/${tournamentId}/users`)
       .then((res) => {
         if (registState === 'WAIT') {
-          // alert('토너먼트 대기가 취소 되었습니다');
+          setSnackbar({
+            toastName: `토너먼트 대기 취소`,
+            severity: 'success',
+            message: `토너먼트 대기 신청을 취소했습니다.`,
+            clicked: true,
+          });
         } else {
-          // setPlayerCount(playerCount - 1);
-          // alert('토너먼트 등록이 취소 되었습니다');
+          setSnackbar({
+            toastName: `토너먼트 신청 취소 `,
+            severity: 'success',
+            message: `토너먼트 참가 신청을 취소했습니다.`,
+            clicked: true,
+          });
         }
         setRegistState(res.data.status);
         setLoading(false);
         return res.data.status;
       })
       .catch((error) => {
-        setError('토너먼트 등록취소 중 에러가 발생했습니다');
+        setSnackbar({
+          toastName: `토너먼트 신청 취소`,
+          severity: 'error',
+          message: `취소중 에러가 발생했습니다.`,
+          clicked: true,
+        });
         setLoading(false);
       });
   }, []);
@@ -99,38 +129,42 @@ export default function TournamentRegistryModal({
   }, [tournamentId]);
 
   useEffect(() => {
-    getTournamentInfo();
     getStatus();
-    const date = new Date(startTime);
-    setOpenDate(dateToKRLocaleTimeString(date));
+    setOpenDate(dateToKRLocaleTimeString(new Date(startTime)));
+    setCloseDate(dateToKRLocaleTimeString(new Date(endTime)));
   }, []);
 
   useEffect(() => {
-    getTournamentInfo();
-  }, [registState]);
+    if (registState !== 'LOADING') getTournamentInfo();
+  }, [registState, getTournamentInfo]);
 
   const closeModalButtonHandler = () => {
     setModal({ modalName: null });
   };
 
-  const buttonContents: Record<string, string> = {
-    LOADING: '로딩중...',
-    BEFORE: '등록',
-    WAIT: '대기 취소',
-    PLAYER: '등록 취소',
-  };
-
-  const buttonAction: Record<string, any> = {
-    BEFORE: registTournament,
-    WAIT: unRegistTournament,
-    PLAYER: unRegistTournament,
-    LOADING: () => {
-      console.log('loading..');
+  const buttonMappings: Record<string, any> = {
+    LOADING: {
+      content: '로딩중...',
+      handler: () => {
+        console.log('loading...');
+      },
+    },
+    BEFORE: {
+      content: '등록',
+      handler: registTournament,
+    },
+    WAIT: {
+      content: '대기 취소',
+      handler: unRegistTournament,
+    },
+    PLAYER: {
+      content: '등록 취소',
+      handler: unRegistTournament,
     },
   };
 
-  const buttonContent = buttonContents[registState];
-  const buttonHandler = buttonAction[registState];
+  const { content: buttonContent, handler: buttonHandler } =
+    buttonMappings[registState];
 
   return (
     <div className={styles.container}>
@@ -145,7 +179,8 @@ export default function TournamentRegistryModal({
       </div>
       <div className={styles.title}>{title}</div>
       <div className={styles.tournamentInfo}>
-        <div className={styles.startTime}>{openDate}</div>
+        <div className={styles.startTime}> 시작 : {openDate}</div>
+        <div className={styles.startTime}> 종료 : {closeDate}</div>
         <div className={styles.participants}>
           <MdPeopleAlt />
           <div className={styles.player}>{playerCount} / 8</div>
@@ -163,7 +198,7 @@ export default function TournamentRegistryModal({
           <ModalButton
             onClick={buttonHandler}
             value={
-              player_cnt === 8 && registState === 'BEFORE'
+              playerCount === 8 && registState === 'BEFORE'
                 ? '대기 등록'
                 : buttonContent
             }

diff --git a/components/tournament/TournamentCard.tsx b/components/tournament/TournamentCard.tsx
@@ -41,7 +41,7 @@ export default function TournamentCard({
         endTime: endTime,
         winnerIntraId: winnerIntraId,
         winnerImageUrl: winnerImageUrl,
-        player_cnt: player_cnt,
+        player_cnt: playerCount,
       },
     });
   };
@@ -59,8 +59,10 @@ export default function TournamentCard({
   }, [tournamentId]);
 
   useEffect(() => {
-    getTournamentInfo();
-    getStatus();
+    if (modal.modalName === null) {
+      getTournamentInfo();
+      getStatus();
+    }
   }, [modal]);
 
   const getStatus = useCallback(() => {

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -6,11 +6,10 @@ import styles from 'styles/main/Home.module.scss';
 
 const Home: NextPage = () => {
   const tournamentData = useBeforeLiveTournamentData();
-
   return (
     <div className={styles.container}>
       <SearchBar />
-      {tournamentData && (
+      {tournamentData?.length && (
         <Section path='tournament' sectionTitle={'Tournament'} />
       )}
       <Section path='rank' sectionTitle={'Ranking'} />

diff --git a/pages/tournament.tsx b/pages/tournament.tsx
@@ -12,7 +12,9 @@ import styles from 'styles/tournament/TournamentContainer.module.scss';
 
 export default function Tournament() {
   const setError = useSetRecoilState(errorState);
-  const [openTournamentId, setOpenTournamentId] = useState<number>(0);
+  const [openTournamentId, setOpenTournamentId] = useState<number | undefined>(
+    undefined
+  );
   const [openTournament, setOpenTournament] = useState<Match[]>([]);
   const [containerSize, setContainerSize] = useState({ width: 0, height: 0 });
   const containerRef = useRef<HTMLDivElement | null>(null); // useRef를 사용하여 Ref 생성
@@ -23,12 +25,15 @@ export default function Tournament() {
       instance
         .get('/pingpong/tournaments?size=20&page=1&status=LIVE')
         .then((res) => {
-          setOpenTournamentId(res.data.tournaments[0].tournamentId);
+          if (res.data.tournaments?.length === 1) {
+            console.log('openInfo');
+            setOpenTournamentId(res.data.tournaments[0].tournamentId);
+          }
           return res.data;
         }),
     {
       onError: (error) => {
-        setError('JHH02');
+        setError('JJH02');
       },
       retry: 1,
       staleTime: 60000 /* 60초 */,
@@ -45,7 +50,7 @@ export default function Tournament() {
         }),
     {
       onError: (error) => {
-        setError('JHH02');
+        setError('JJH03');
       },
     }
   );
@@ -67,36 +72,45 @@ export default function Tournament() {
 
   useEffect(() => {
     if (openTournamentId !== undefined) fetchTournamentGames();
+  }, [openTournamentId, fetchTournamentGames]);
+
+  useEffect(() => {
     if (containerRef.current) {
       const width = containerRef.current.clientWidth;
       const height = containerRef.current.clientHeight;
       setContainerSize({ width, height });
     }
-  }, [openTournamentId]);
+  }, []);
 
   return (
     <div className={styles.pageWrap}>
       <h1 className={styles.title}>Tournament</h1>
       <div className={styles.tournamentContainer}>
         <div className={styles.tournamentText}> 예정된 토너먼트 </div>
-        {waitInfo.data?.tournaments.map((tournament) => (
-          <div className={styles.cardContainer} key={tournament.tournamentId}>
-            <TournamentCard key={tournament.tournamentId} {...tournament} />
-          </div>
-        ))}
-        <div className={styles.tournamentText}> 진행중인 토너먼트 </div>
-        <div className={styles.openTournamentBox} ref={containerRef}>
-          {openInfo.data && openInfo.data.tournaments?.length === 0 ? (
-            <div className={styles.tournamentText}>
-              진행중인 토너먼트가 없습니다
+        {waitInfo.data?.tournaments.length === 0 ? (
+          <h4 className={styles.noTournamentText}>
+            예정된 토너먼트가 없습니다.
+          </h4>
+        ) : (
+          waitInfo.data?.tournaments.map((tournament) => (
+            <div className={styles.cardContainer} key={tournament.tournamentId}>
+              <TournamentCard key={tournament.tournamentId} {...tournament} />
             </div>
-          ) : (
+          ))
+        )}
+        <div className={styles.tournamentText}> 진행중인 토너먼트 </div>
+        {openInfo.data && openInfo.data.tournaments?.length === 0 ? (
+          <div className={styles.noTournamentText}>
+            진행중인 토너먼트가 없습니다
+          </div>
+        ) : (
+          <div className={styles.openTournamentBox} ref={containerRef}>
             <TournamentBraket
               singleEliminationBracketMatchs={openTournament}
               containerSize={containerSize}
             />
-          )}
-        </div>
+          </div>
+        )}
       </div>
     </div>
   );

diff --git a/styles/modal/event/TournamentRegistryModal.module.scss b/styles/modal/event/TournamentRegistryModal.module.scss
@@ -30,6 +30,7 @@
 }
 
 .startTime {
+  margin-bottom: 0.2rem;
   font-size: 0.7rem;
   color: rgba(18, 23, 37, 1);
 }

diff --git a/styles/tournament/TournamentCard.module.scss b/styles/tournament/TournamentCard.module.scss
@@ -66,14 +66,9 @@
     .time {
       display: flex;
       padding-bottom: 0.5rem;
-      font-size: 0.8rem;
-      justify-content: space-evenly;
-      .start {
-        color: green;
-      }
-      .end {
-        color: red;
-      }
+      font-size: 0.7rem;
+      justify-content: flex-start;
+      gap: 0.5rem;
     }
   }
 }
diff --git a/styles/tournament/TournamentContainer.module.scss b/styles/tournament/TournamentContainer.module.scss
@@ -40,3 +40,10 @@
     margin-bottom: 0rem;
   }
 }
+
+.noTournamentText {
+  display: flex;
+  color: white;
+  justify-content: center;
+  align-content: center;
+}
diff --git a/utils/handleBraketSize.ts b/utils/handleBraketSize.ts
@@ -0,0 +1,7 @@
+export const useContainerSize = (
+  containerRef: React.RefObject<HTMLDivElement>
+) => {
+  const width = containerRef.current?.clientWidth;
+  const height = containerRef.current?.clientHeight;
+  return { width, height };
+};