Merge pull request #1231 from 42organization/main

[Deploy] 토너먼트 생성,수정 분단위 입력 배포
42organization · Jan 4, 2024 · 8ca9a7a · 8ca9a7a
2 parents 0539d0d + d7f8072
commit 8ca9a7a
Show file tree

Hide file tree

Showing 15 changed files with 154 additions and 228 deletions.
diff --git a/README.md b/README.md
@@ -103,6 +103,21 @@
   </tr>
 </table>
 
+<h3>5기</h3>
+<table>
+  <tr>
+    <td align=center>역할</td>
+    <td align=center>LEAD🐧</td>
+    <td align=center>🌚</td>
+    <td align=center>🥨</td>
+  </tr>
+  <tr>
+    <td align=center>이름</td>
+    <td align=center><a href="https://github.com/yoouyeon">김재혁 @jaehyuki</a></td>
+    <td align=center><a href="https://github.com/joonho0410">전준호 @junhjeon</a></td>
+    <td align=center><a href="https://github.com/Clearsu">박진철 @jincpark</a></td>
+  </tr>
+</table>
 <br>
 
 <h2>주요 기능 소개</h2>
@@ -209,6 +224,22 @@
 
 <br/>
 
+### 🏓 개최된 토너먼트에 참가 신청을 할 수 있습니다
+<img width="25%" alt="Store_CoinHistory" src="https://github.com/42organization/42gg.client/assets/93255519/8614432d-e570-4423-a064-5655c766df5b">
+&nbsp;&nbsp;&nbsp;
+<img width="25%" alt="Store_CoinHistory" src="https://github.com/42organization/42gg.client/assets/93255519/40d5b219-fd55-4b9f-a4ab-f57c29f39e6c">
+
+### 🏓 진행중인 토너먼트를 실시간으로 확인 할 수 있습니다
+
+<img width="25%" alt="Store_CoinHistory" src="https://github.com/42organization/42gg.client/assets/93255519/e6fce8ce-bb7d-4e44-b3c2-b19167c5ce39">
+
+### 🏆 명예의 전당에서 토너먼트 우승자들을 확인 할 수 있어요!
+<img width="28.4%" alt="Store_CoinHistory" src="https://github.com/42organization/42gg.client/assets/93255519/524d6c26-39bb-48f6-ae08-ca0690a69bfb">
+&nbsp;&nbsp;&nbsp;
+<img width="25%" alt="Store_CoinHistory" src="https://github.com/42organization/42gg.client/assets/93255519/53b6d903-de35-401d-979d-90ab7ec19eb5">
+
+<br/>
+
 ### 🔥 최근 경기들을 확인할 수 있습니다
 
 <img width="25%" alt="RecentGame_Both" src="https://github.com/42organization/42gg.client/assets/57761286/d014c5e8-216f-49e8-b7c9-0038650590a3">

diff --git a/components/admin/tournament/TournamentEdit.tsx b/components/admin/tournament/TournamentEdit.tsx
@@ -98,10 +98,6 @@ export default function TournamentEdit({
 
   const postHandler = async () => {
     try {
-      console.log('startTime : ', tournamentEditInfo.startTime);
-      console.log('endTime : ', tournamentEditInfo.endTime);
-      console.log('startTime Date : ', new Date(tournamentEditInfo.startTime));
-      console.log('endTime Date : ', new Date(tournamentEditInfo.endTime));
       await instanceInManage.post(`/tournaments`, {
         title: tournamentEditInfo.title,
         contents: tournamentEditInfo.contents,

diff --git a/components/main/Section.tsx b/components/main/Section.tsx
@@ -2,7 +2,7 @@ import { useRouter } from 'next/router';
 import React from 'react';
 import { FaChevronRight } from 'react-icons/fa';
 import GameResult from 'components/game/GameResult';
-import TournamentPreview from 'components/main/TournamentPreview/TournamentPreview';
+import TournamentPreview from 'components/main/TournamentPreview';
 import RankListMain from 'components/rank/topRank/RankListMain';
 import styles from 'styles/main/Section.module.scss';
 

diff --git a/...n/TournamentPreview/TournamentPreview.tsx → components/main/TournamentPreview.tsx b/...n/TournamentPreview/TournamentPreview.tsx → components/main/TournamentPreview.tsx
@@ -1,24 +1,26 @@
 import { useRouter } from 'next/router';
 import { useState, useRef } from 'react';
 import { Virtuoso, VirtuosoHandle } from 'react-virtuoso';
-import { TournamentInfo } from 'types/tournamentTypes';
 import TournamentCard from 'components/tournament/TournamentCard';
 import useBeforeLiveTournamentData from 'hooks/tournament/useBeforeLiveTournamentData';
 import useInterval from 'hooks/useInterval';
-import styles from 'styles/main/TournamentPreview/TournamentPreview.module.scss';
-import TournamentPreviewItem from './TournamentPreviewItem';
+import styles from 'styles/main/TournamentPreview.module.scss';
 
 export default function TournamentPreview() {
-  const data: TournamentInfo[] | undefined = useBeforeLiveTournamentData();
+  const { data } = useBeforeLiveTournamentData();
   const [selectedIndex, setSelectedIndex] = useState<number>(0);
   const virtuoso = useRef<VirtuosoHandle>(null);
   const router = useRouter();
 
+  const dataCombined = data
+    ? [...data.beforeTournament, ...data.liveTournament]
+    : [];
+
   useInterval(() => {
-    if (!data || data?.length === 0) {
+    if (!data || dataCombined.length === 0) {
       return;
     }
-    const nextIndex = (selectedIndex + 1) % data.length;
+    const nextIndex = (selectedIndex + 1) % dataCombined.length;
     setSelectedIndex(nextIndex);
     if (virtuoso.current !== null) {
       virtuoso.current.scrollToIndex({
@@ -34,18 +36,16 @@ export default function TournamentPreview() {
       className={styles.rollingBanner}
       onClick={() => router.push('tournament')}
     >
-      {data && data.length > 0 && (
-        <Virtuoso
-          className={styles.virtuoso}
-          totalCount={data.length}
-          data={data}
-          ref={virtuoso}
-          itemContent={(index) => (
-            <TournamentCard {...data[index]} page='main' />
-          )}
-          style={{ height: '100%' }}
-        />
-      )}
+      <Virtuoso
+        className={styles.virtuoso}
+        totalCount={dataCombined.length}
+        data={dataCombined}
+        ref={virtuoso}
+        itemContent={(index) => (
+          <TournamentCard {...dataCombined[index]} page='main' />
+        )}
+        style={{ height: '100%' }}
+      />
     </div>
   );
 }
diff --git a/components/main/TournamentPreview/TournamentPreviewItem.tsx b/components/main/TournamentPreview/TournamentPreviewItem.tsx
diff --git a/components/modal/admin/AdminFeedbackCheckModal.tsx b/components/modal/admin/AdminFeedbackCheckModal.tsx
@@ -24,19 +24,21 @@ export default function AdminFeedbackCheck({
       await instanceInManage.patch(`/feedback/${id}`, {
         isSolved: isSolved,
       });
-      await instanceInManage.post(`/notifications`, {
-        intraId,
-        message: isSolved
-          ? '피드백을 검토중입니다.'
-          : '피드백이 반영되었습니다.',
-        // sendMail: isSend, todo: 슬랙으로 보내는 것으로 변경
-      });
-      setSnackBar({
-        toastName: 'noti user',
-        severity: 'success',
-        message: `알림이 성공적으로 전송되었습니다!`,
-        clicked: true,
-      });
+      if (isSend) {
+        await instanceInManage.post(`/notifications`, {
+          intraId,
+          message: isSolved
+            ? '피드백을 검토중입니다.'
+            : '피드백이 반영되었습니다.',
+          // sendMail: isSend, todo: 슬랙으로 보내는 것으로 변경
+        });
+        setSnackBar({
+          toastName: 'noti user',
+          severity: 'success',
+          message: `알림이 성공적으로 전송되었습니다!`,
+          clicked: true,
+        });
+      }
       setModal({ modalName: null });
     } catch (e) {
       console.error('SW03');

diff --git a/components/tournament/TournamentCard.tsx b/components/tournament/TournamentCard.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { useRecoilValue, useSetRecoilState } from 'recoil';
 import { BiCalendar } from 'react-icons/bi';
 import { MdPeopleAlt } from 'react-icons/md';
@@ -47,7 +47,7 @@ export default function TournamentCard({
     });
   };
 
-  const getTournamentInfo = useCallback(() => {
+  const getTournamentInfo = useCallback(async () => {
     return instance
       .get(`/pingpong/tournaments/${tournamentId}`)
       .then((res) => {
@@ -57,16 +57,9 @@ export default function TournamentCard({
       .catch((error) => {
         setError('JJH2');
       });
-  }, [tournamentId]);
+  }, [tournamentId, setError]);
 
-  useEffect(() => {
-    if (modal.modalName === null) {
-      getTournamentInfo();
-      getStatus();
-    }
-  }, [modal]);
-
-  const getStatus = useCallback(() => {
+  const getStatus = useCallback(async () => {
     return instance
       .get(`/pingpong/tournaments/${tournamentId}/users`)
       .then((res) => {
@@ -79,12 +72,20 @@ export default function TournamentCard({
   }, []);
 
   const start = dateToKRLocaleTimeString(new Date(startTime));
+
+  useEffect(() => {
+    if (modal.modalName === null) {
+      getTournamentInfo();
+      getStatus();
+    }
+  }, [modal, getStatus, getTournamentInfo]);
+
   const end = dateToKRLocaleTimeString(new Date(endTime));
   const isFull = playerCount === 8 ? 'full' : 'notFull';
 
   const userState: Record<string, string> = {
-    BEFORE: '참여하기!',
-    PLAYER: '참여 중',
+    BEFORE: '참가하기!',
+    PLAYER: '참가 중',
     WAIT: '대기 중',
   };
 

diff --git a/hooks/tournament/useBeforeLiveTournamentData.ts b/hooks/tournament/useBeforeLiveTournamentData.ts
@@ -5,31 +5,42 @@ import { TournamentInfo } from 'types/tournamentTypes';
 import { instance } from 'utils/axios';
 import { errorState } from 'utils/recoil/error';
 
-export default function useBeforeLiveTournamentData() {
+type UseBeforeLiveTournamentDataReturn = {
+  data:
+    | {
+        beforeTournament: TournamentInfo[];
+        liveTournament: TournamentInfo[];
+      }
+    | undefined;
+  isLoading: boolean;
+};
+
+export default function useBeforeLiveTournamentData(): UseBeforeLiveTournamentDataReturn {
   const setError = useSetRecoilState(errorState);
   const fetchTournamentData = useCallback(async () => {
-    const liveRes = await instance.get(
-      '/pingpong/tournaments?page=1&status=LIVE'
-    );
     const beforeRes = await instance.get(
       '/pingpong/tournaments?page=1&status=BEFORE'
     );
-    const combinedData = [
-      ...liveRes.data.tournaments,
-      ...beforeRes.data.tournaments,
-    ];
-    return combinedData;
+    const liveRes = await instance.get(
+      '/pingpong/tournaments?page=1&status=LIVE'
+    );
+    return {
+      beforeTournament: beforeRes.data.tournaments,
+      liveTournament: liveRes.data.tournaments,
+    };
   }, []);
 
-  const { data, isError } = useQuery<TournamentInfo[]>(
-    'beforeLiveTournamentData',
-    fetchTournamentData,
-    { retry: 1, staleTime: 60000 }
-  );
+  const { data, isLoading, isError } = useQuery<{
+    beforeTournament: TournamentInfo[];
+    liveTournament: TournamentInfo[];
+  }>('beforeLiveTournamentData', fetchTournamentData, {
+    retry: 1,
+    staleTime: 60000,
+  });
 
   if (isError) {
     setError('JC04');
   }
 
-  return data;
+  return { data, isLoading };
 }
diff --git a/hooks/tournament/useTournamentEditInfo.ts b/hooks/tournament/useTournamentEditInfo.ts
@@ -17,12 +17,7 @@ function useTournamentEditInfo() {
   // change
   const inputChangeHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
     const { name, value } = event.target;
-    if (name === 'startTime' || name === 'endTime') {
-      setTournamentEditInfo((prev) => ({
-        ...prev,
-        [name]: value.slice(0, -2) + '00',
-      }));
-    } else setTournamentEditInfo((prev) => ({ ...prev, [name]: value }));
+    setTournamentEditInfo((prev) => ({ ...prev, [name]: value }));
   };
 
   const selectChangeHandler = (event: React.ChangeEvent<HTMLSelectElement>) => {

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -5,13 +5,16 @@ import useBeforeLiveTournamentData from 'hooks/tournament/useBeforeLiveTournamen
 import styles from 'styles/main/Home.module.scss';
 
 const Home: NextPage = () => {
-  const tournamentData = useBeforeLiveTournamentData();
+  const { data: tournamentData } = useBeforeLiveTournamentData();
+
   return (
     <div className={styles.container}>
       <SearchBar />
-      {tournamentData && tournamentData?.length > 0 && (
-        <Section path='tournament' sectionTitle={'Tournament'} />
-      )}
+      {tournamentData &&
+        (tournamentData.beforeTournament?.length > 0 ||
+          tournamentData.liveTournament?.length > 0) && (
+          <Section path='tournament' sectionTitle={'Tournament'} />
+        )}
       <Section path='rank' sectionTitle={'Ranking'} />
       <Section path='game' sectionTitle={'Current Play'} />
     </div>