Merge pull request #1167 from 42organization/main

12/15 QA 테스트 서버 배포
42organization · Dec 15, 2023 · 6d21ce0 · 6d21ce0
2 parents 370bb96 + 6420e54
commit 6d21ce0
Show file tree

Hide file tree

Showing 13 changed files with 200 additions and 49 deletions.
diff --git a/components/modal/tournament/TournamentRegistryModal.tsx b/components/modal/tournament/TournamentRegistryModal.tsx
@@ -8,7 +8,6 @@ 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,
@@ -31,7 +30,6 @@ 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');
@@ -44,12 +42,13 @@ export default function TournamentRegistryModal({
     return instance
       .post(`/pingpong/tournaments/${tournamentId}/users`)
       .then((res) => {
-        alert('토너먼트 신청이 완료됐습니다');
-        setModal({ modalName: null });
+        // alert('토너먼트 신청이 완료됐습니다');
+        setLoading(false);
+        setRegistState(res.data.status);
         return res.data.status;
       })
       .catch((error) => {
-        alert('토너먼트 신청 중 에러가 발생했습니다.');
+        setError('토너먼트 신청 중 에러가 발생했습니다.');
         setLoading(false);
       });
   }, []);
@@ -60,15 +59,17 @@ export default function TournamentRegistryModal({
       .delete(`/pingpong/tournaments/${tournamentId}/users`)
       .then((res) => {
         if (registState === 'WAIT') {
-          alert('토너먼트 대기가 취소 되었습니다');
+          // alert('토너먼트 대기가 취소 되었습니다');
         } else {
-          alert('토너먼트 등록이 취소 되었습니다');
+          // setPlayerCount(playerCount - 1);
+          // alert('토너먼트 등록이 취소 되었습니다');
         }
-        setModal({ modalName: null });
+        setRegistState(res.data.status);
+        setLoading(false);
         return res.data.status;
       })
       .catch((error) => {
-        alert('토너먼트 등록취소 중 에러가 발생했습니다');
+        setError('토너먼트 등록취소 중 에러가 발생했습니다');
         setLoading(false);
       });
   }, []);
@@ -85,12 +86,29 @@ export default function TournamentRegistryModal({
       });
   }, []);
 
+  const getTournamentInfo = useCallback(() => {
+    return instance
+      .get(`/pingpong/tournaments/${tournamentId}`)
+      .then((res) => {
+        setPlayerCount(res.data.player_cnt);
+        return res.data.player_cnt;
+      })
+      .catch((error) => {
+        setError('JJH2');
+      });
+  }, [tournamentId]);
+
   useEffect(() => {
+    getTournamentInfo();
     getStatus();
     const date = new Date(startTime);
     setOpenDate(dateToKRLocaleTimeString(date));
   }, []);
 
+  useEffect(() => {
+    getTournamentInfo();
+  }, [registState]);
+
   const closeModalButtonHandler = () => {
     setModal({ modalName: null });
   };

diff --git a/components/tournament-record/WinnerProfileImage.tsx b/components/tournament-record/WinnerProfileImage.tsx
@@ -6,12 +6,14 @@ import styles from 'styles/tournament-record/WinnerProfileImage.module.scss';
 
 interface WinnerProfileImageProps {
   tournament: TournamentInfo;
+  type: string;
   slideIndex: number;
   setTournamentInfo: React.Dispatch<SetStateAction<TournamentInfo | undefined>>;
 }
 
 export default function WinnerProfileImage({
   tournament,
+  type,
   slideIndex,
   setTournamentInfo,
 }: WinnerProfileImageProps) {
@@ -35,7 +37,7 @@ export default function WinnerProfileImage({
     }
   }, [indexDiff, tournament, setTournamentInfo]);
 
-  function applyStyle() {
+  function applyLayerStyle() {
     if (indexDiff === 0) {
       return styles.firstLayer;
     }
@@ -45,8 +47,8 @@ export default function WinnerProfileImage({
   return (
     <div
       className={`${styles.winnerProfileImage} ${
-        indexDiff > -2 && indexDiff < 2 && applyStyle()
-      }`}
+        indexDiff > -2 && indexDiff < 2 && applyLayerStyle()
+      } ${styles[type]}`}
     >
       <Image
         src={imageUrl ?? '/image/fallBackSrc.jpeg'}

diff --git a/components/tournament-record/WinnerSwiper.tsx b/components/tournament-record/WinnerSwiper.tsx
@@ -84,9 +84,13 @@ const WinnerSwiper = forwardRef(
           <React.Fragment key={pageIndex}>
             {page.tournaments.length > 0 &&
               page.tournaments.map((tournament, index) => (
-                <SwiperSlide key={tournament.tournamentId}>
+                <SwiperSlide
+                  className={styles.swiperSlide}
+                  key={tournament.tournamentId}
+                >
                   <WinnerProfileImage
                     tournament={tournament}
+                    type={type}
                     slideIndex={index + pageIndex * size}
                     setTournamentInfo={setTournamentInfo}
                   />

diff --git a/components/tournament/TournamentCard.tsx b/components/tournament/TournamentCard.tsx
@@ -1,9 +1,12 @@
-import { useSetRecoilState } from 'recoil';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useRecoilValue, useSetRecoilState } from 'recoil';
 import { BiCalendar } from 'react-icons/bi';
 import { MdPeopleAlt } from 'react-icons/md';
 import { Modal } from 'types/modalTypes';
 import { TournamentInfo } from 'types/tournamentTypes';
-import { dateToString } from 'utils/handleTime';
+import { instance } from 'utils/axios';
+import { dateToKRLocaleTimeString } from 'utils/handleTime';
+import { errorState } from 'utils/recoil/error';
 import { modalState } from 'utils/recoil/modal';
 import styles from 'styles/tournament/TournamentCard.module.scss';
 
@@ -19,7 +22,11 @@ export default function TournamentCard({
   winnerImageUrl,
   player_cnt,
 }: TournamentInfo) {
+  const modal = useRecoilValue(modalState);
   const setModal = useSetRecoilState<Modal>(modalState);
+  const [registState, setRegistState] = useState<string>('로딩중');
+  const [playerCount, setPlayerCount] = useState<number>(player_cnt);
+  const setError = useSetRecoilState(errorState);
 
   const openTournamentInfoModal = () => {
     setModal({
@@ -39,22 +46,70 @@ export default function TournamentCard({
     });
   };
 
-  const date = new Date(startTime);
-  const year = date.getFullYear();
-  const month = date.getMonth() + 1;
-  const il = date.getDate();
-  const start = `${year}.${month}.${il}`;
+  const getTournamentInfo = useCallback(() => {
+    return instance
+      .get(`/pingpong/tournaments/${tournamentId}`)
+      .then((res) => {
+        setPlayerCount(res.data.player_cnt);
+        return res.data.player_cnt;
+      })
+      .catch((error) => {
+        setError('JJH2');
+      });
+  }, [tournamentId]);
+
+  useEffect(() => {
+    getTournamentInfo();
+    getStatus();
+  }, [modal]);
+
+  const getStatus = useCallback(() => {
+    return instance
+      .get(`/pingpong/tournaments/${tournamentId}/users`)
+      .then((res) => {
+        setRegistState(res.data.status);
+        return res.data.status;
+      })
+      .catch((error) => {
+        setError('JJH2');
+      });
+  }, []);
+
+  const start = dateToKRLocaleTimeString(new Date(startTime));
+  const end = dateToKRLocaleTimeString(new Date(endTime));
+  const isFull = playerCount === 8 ? 'full' : 'notFull';
+
+  const userState: Record<string, string> = {
+    BEFORE: '미 참여',
+    PLAYER: '참여 중',
+    WAIT: '대기 중',
+  };
 
   return (
     <div
       className={styles.tournamentCardContainer}
       onClick={openTournamentInfoModal}
     >
       <div className={styles.text}>
-        <div className={styles.left}>{title}</div>
-        <MdPeopleAlt /> {player_cnt} / 8
-        <div className={styles.right}>
-          <BiCalendar /> {start}
+        <div className={styles.up}>
+          <div className={styles.title}>{title}</div>
+          <div className={styles.tag}>
+            <div className={`${styles.participants} ${styles[isFull]}`}>
+              <MdPeopleAlt /> {playerCount} / 8
+            </div>
+            <div className={`${styles.state} ${styles[registState]}`}>
+              {userState[registState]}
+            </div>
+          </div>
+        </div>
+        <div className={styles.time}>
+          <time>
+            <BiCalendar /> {start}
+          </time>
+          ~
+          <time>
+            <BiCalendar /> {end}
+          </time>
         </div>
       </div>
     </div>

diff --git a/components/tournament/TournamentMatch.tsx b/components/tournament/TournamentMatch.tsx
@@ -34,6 +34,9 @@ function TournamentMatchParty({
       }`}
       onMouseEnter={() => onMouseEnter(party.id)}
       onClick={() => onPartyClick(party, false)}
+      onTouchStart={() => {
+        onPartyClick(party, false);
+      }}
     >
       <PlayerImage
         src={party.picture ?? '/image/match_qustion.png'}

diff --git a/hooks/tournament/useTournamentMatchEditor.ts b/hooks/tournament/useTournamentMatchEditor.ts
@@ -63,11 +63,11 @@ export default function useTournamentMatchEditor(
           tournamentGameId: match.id,
           nextTournamentGameId: match.nextMatchId,
           team1: {
-            teamId: topParty.teamId,
+            teamId: topParty.id,
             score: parseInt(topParty.resultText ? topParty.resultText : '0'),
           },
           team2: {
-            teamId: bottomParty.teamId,
+            teamId: bottomParty.id,
             score: parseInt(
               bottomParty.resultText ? bottomParty.resultText : '0'
             ),

diff --git a/pages/tournament-record.tsx b/pages/tournament-record.tsx
@@ -21,7 +21,7 @@ export default function TournamentRecord() {
 
   return (
     <div className={styles.pageWrap}>
-      <h1 className={styles.title}>명예의 전당</h1>
+      <h1 className={styles.title}>Hall of Glory</h1>
       <LeagueButtonGroup onSelect={setSelectedType} />
       <WinnerSwiper
         type={selectedType}

diff --git a/pages/tournament.tsx b/pages/tournament.tsx
@@ -23,7 +23,6 @@ export default function Tournament() {
       instance
         .get('/pingpong/tournaments?size=20&page=1&status=LIVE')
         .then((res) => {
-          console.log(res.data.tournaments[0].tournamentId);
           setOpenTournamentId(res.data.tournaments[0].tournamentId);
           return res.data;
         }),

diff --git a/styles/tournament-record/TournamentRecord.module.scss b/styles/tournament-record/TournamentRecord.module.scss
@@ -10,10 +10,21 @@
   }
 }
 
+@keyframes text-fade-in-out {
+  0%,
+  100% {
+    text-shadow: rgb(255, 209, 91) 0 0 10px;
+  }
+  50% {
+    text-shadow: rgb(254, 196, 51) 0 0 20px;
+  }
+}
+
 .title {
   @include pageTitle;
   display: flex;
   justify-content: center;
+  animation: text-fade-in-out 4s infinite;
 }
 
 .winnerImageContainer {

diff --git a/styles/tournament-record/WinnerProfileImage.module.scss b/styles/tournament-record/WinnerProfileImage.module.scss
@@ -15,14 +15,26 @@
   height: 100%;
   overflow: hidden;
   filter: brightness(50%);
-  border: 4px solid #e2be00;
   border-radius: 1.8rem;
   transition: filter 0.4s ease;
   transform: translate(-50%, -50%);
   animation: fadeIn 0.3s ease-in-out;
 
+  &.ROOKIE {
+    border: 4px solid #e2be00;
+  }
+
+  &.MASTER {
+    border: 4px solid #7ceeff;
+  }
+
+  &.CUSTOM {
+    border: 4px solid #7dffbe;
+  }
+
   &.firstLayer {
     filter: brightness(100%);
+    box-shadow: 0 0 15px 5px rgba(255, 247, 201, 0.75);
   }
 
   &.secondLayer {

diff --git a/styles/tournament-record/WinnerSwiper.module.scss b/styles/tournament-record/WinnerSwiper.module.scss
@@ -1,6 +1,8 @@
 .swiper {
-  height: 10rem;
-  margin-top: 1.7rem;
-  margin-bottom: 1rem;
-  overflow: hidden;
+  height: 14rem;
+}
+
+.swiperSlide {
+  height: 80% !important; // 라이브러리 default height 속성 무시
+  margin: 1.5rem 0;
 }
diff --git a/styles/tournament-record/WinnerTournamentInfo.module.scss b/styles/tournament-record/WinnerTournamentInfo.module.scss
@@ -1,13 +1,10 @@
 .winnerInfoContainer {
-  font-weight: 500;
-  color: #d591ff;
-  text-align: center;
-
   p {
     margin: 0.4rem 0 0;
   }
 
   .userId {
+    font-size: 1.3rem;
     font-weight: 700;
     color: white;
   }
@@ -16,11 +13,13 @@
     font-size: 1rem;
 
     .highlighted {
+      font-weight: 700;
       color: #ffc700;
     }
   }
 
   .date {
     font-size: 0.8rem;
+    color: rgb(206, 206, 206);
   }
 }