메인서버 배포 (#1242)

* 테스트 배포 (#1178) * [Fix] 유효성 검사 수정 #1169 (#1170) * Others/토너먼트 card 모바일 style 수정 및 api 최적화#1168 (#1172) * [fix] 예정된 토너먼트가 없을 시 안내문구 생성#1159 * [Style] 예정된 토너먼트 없을 시 텍스트 스타일 수정 #1159 * [Fix] Open된 토너먼트가 없을 때 조건문 수정 #1159 * [Fix] 진행중인 토너먼트 undefined 상태 추가 #1159 * [feat] 토너먼트 레지스트리 모달 시작: 종료 시간 추가 #1159 * [fix] api 최적화 #1159 * [Fix] 토너먼트 카드 모달 참여인원 표시 수정 #1159 * [Fix] 메인페이지에서 토너먼트 없을 시 수정 #1159 * [Fix] 토너먼트 신청 모달 map 재작성 #1159 * merge * [Fix] API 호출 최적화 #1168 * [Style] 시간을 좌측정렬으로 크기 수정 #1168 * [Fix] 등록/취소중 에러발생시 에러메세지 수정 #1168 * [others] 에러발생시키기 위한 코드 제거 #1168 * [fix] 토너먼트 진행되는게 없을 시 컨테이너 크기 없이 생성#1168 --------- Co-authored-by: Junho jeon <junhjeon@Junhoui-MacBookAir.local> Co-authored-by: Junho Jeon <junhjeon@c1r1s5.42seoul.kr> * [fix] 오타수정 #1176 (#1177) Co-authored-by: Junho jeon <junhjeon@Junhoui-MacBookAir.local> --------- Co-authored-by: Jincheol Park <67998022+Clearsu@users.noreply.github.com> Co-authored-by: Junho jeon <junhjeon@Junhoui-MacBookAir.local> Co-authored-by: Junho Jeon <junhjeon@c1r1s5.42seoul.kr> * 테스트 배포 (#1186) * [Fix] 유효성 검사 수정 #1169 (#1170) * Others/토너먼트 card 모바일 style 수정 및 api 최적화#1168 (#1172) * [fix] 예정된 토너먼트가 없을 시 안내문구 생성#1159 * [Style] 예정된 토너먼트 없을 시 텍스트 스타일 수정 #1159 * [Fix] Open된 토너먼트가 없을 때 조건문 수정 #1159 * [Fix] 진행중인 토너먼트 undefined 상태 추가 #1159 * [feat] 토너먼트 레지스트리 모달 시작: 종료 시간 추가 #1159 * [fix] api 최적화 #1159 * [Fix] 토너먼트 카드 모달 참여인원 표시 수정 #1159 * [Fix] 메인페이지에서 토너먼트 없을 시 수정 #1159 * [Fix] 토너먼트 신청 모달 map 재작성 #1159 * merge * [Fix] API 호출 최적화 #1168 * [Style] 시간을 좌측정렬으로 크기 수정 #1168 * [Fix] 등록/취소중 에러발생시 에러메세지 수정 #1168 * [others] 에러발생시키기 위한 코드 제거 #1168 * [fix] 토너먼트 진행되는게 없을 시 컨테이너 크기 없이 생성#1168 --------- Co-authored-by: Junho jeon <junhjeon@Junhoui-MacBookAir.local> Co-authored-by: Junho Jeon <junhjeon@c1r1s5.42seoul.kr> * [fix] 오타수정 #1176 (#1177) Co-authored-by: Junho jeon <junhjeon@Junhoui-MacBookAir.local> * [Fix] 버그수정 #1131 * [Fix] 시간대 안맞는 버그 수정 #1131 * [Style] 미사용 메서드 제거 #1131 * Others/일반랭크 게임 결과 조회 api 통합 #1181 (#1183) * [Refactor] 엔드포인트를 쿼리 파라미터로 변경 #1181 * [Refactor] 불필요한 import, async 제거 #1181 * [Refactor] 조건부 렌더링 로직 개선 #1181 * [Refactor] 불필요한 div React Fragment로 대체 #1181 * [Feat] url 변경 #1181 * [Refactor] fetch 함수 명 변경 #1181 * [Fix] 이미지 위치 수정 #1162 (#1185) Co-authored-by: greatSweetMango <jhkim0097@gmail.com> --------- Co-authored-by: joonho0410 <76806109+joonho0410@users.noreply.github.com> Co-authored-by: Junho jeon <junhjeon@Junhoui-MacBookAir.local> Co-authored-by: Junho Jeon <junhjeon@c1r1s5.42seoul.kr> Co-authored-by: kimjaehyuk <jhkim0097@gmail.com> Co-authored-by: greatSweetMango <93255519+greatSweetMango@users.noreply.github.com> * 테스트 배포 (#1192) * Test deploy (#1187) * 테스트 배포 (#1178) * [Fix] 유효성 검사 수정 #1169 (#1170) * Others/토너먼트 card 모바일 style 수정 및 api 최적화#1168 (#1172) * [fix] 예정된 토너먼트가 없을 시 안내문구 생성#1159 * [Style] 예정된 토너먼트 없을 시 텍스트 스타일 수정 #1159 * [Fix] Open된 토너먼트가 없을 때 조건문 수정 #1159 * [Fix] 진행중인 토너먼트 undefined 상태 추가 #1159 * [feat] 토너먼트 레지스트리 모달 시작: 종료 시간 추가 #1159 * [fix] api 최적화 #1159 * [Fix] 토너먼트 카드 모달 참여인원 표시 수정 #1159 * [Fix] 메인페이지에서 토너먼트 없을 시 수정 #1159 * [Fix] 토너먼트 신청 모달 map 재작성 #1159 * merge * [Fix] API 호출 최적화 #1168 * [Style] 시간을 좌측정렬으로 크기 수정 #1168 * [Fix] 등록/취소중 에러발생시 에러메세지 수정 #1168 * [others] 에러발생시키기 위한 코드 제거 #1168 * [fix] 토너먼트 진행되는게 없을 시 컨테이너 크기 없이 생성#1168 --------- Co-authored-by: Junho jeon <junhjeon@Junhoui-MacBookAir.local> Co-authored-by: Junho Jeon <junhjeon@c1r1s5.42seoul.kr> * [fix] 오타수정 #1176 (#1177) Co-authored-by: Junho jeon <junhjeon@Junhoui-MacBookAir.local> --------- Co-authored-by: Jincheol Park <67998022+Clearsu@users.noreply.github.com> Co-authored-by: Junho jeon <junhjeon@Junhoui-MacBookAir.local> Co-authored-by: Junho Jeon <junhjeon@c1r1s5.42seoul.kr> * 테스트 배포 (#1186) * [Fix] 유효성 검사 수정 #1169 (#1170) * Others/토너먼트 card 모바일 style 수정 및 api 최적화#1168 (#1172) * [fix] 예정된 토너먼트가 없을 시 안내문구 생성#1159 * [Style] 예정된 토너먼트 없을 시 텍스트 스타일 수정 #1159 * [Fix] Open된 토너먼트가 없을 때 조건문 수정 #1159 * [Fix] 진행중인 토너먼트 undefined 상태 추가 #1159 * [feat] 토너먼트 레지스트리 모달 시작: 종료 시간 추가 #1159 * [fix] api 최적화 #1159 * [Fix] 토너먼트 카드 모달 참여인원 표시 수정 #1159 * [Fix] 메인페이지에서 토너먼트 없을 시 수정 #1159 * [Fix] 토너먼트 신청 모달 map 재작성 #1159 * merge * [Fix] API 호출 최적화 #1168 * [Style] 시간을 좌측정렬으로 크기 수정 #1168 * [Fix] 등록/취소중 에러발생시 에러메세지 수정 #1168 * [others] 에러발생시키기 위한 코드 제거 #1168 * [fix] 토너먼트 진행되는게 없을 시 컨테이너 크기 없이 생성#1168 --------- Co-authored-by: Junho jeon <junhjeon@Junhoui-MacBookAir.local> Co-authored-by: Junho Jeon <junhjeon@c1r1s5.42seoul.kr> * [fix] 오타수정 #1176 (#1177) Co-authored-by: Junho jeon <junhjeon@Junhoui-MacBookAir.local> * [Fix] 버그수정 #1131 * [Fix] 시간대 안맞는 버그 수정 #1131 * [Style] 미사용 메서드 제거 #1131 * Others/일반랭크 게임 결과 조회 api 통합 #1181 (#1183) * [Refactor] 엔드포인트를 쿼리 파라미터로 변경 #1181 * [Refactor] 불필요한 import, async 제거 #1181 * [Refactor] 조건부 렌더링 로직 개선 #1181 * [Refactor] 불필요한 div React Fragment로 대체 #1181 * [Feat] url 변경 #1181 * [Refactor] fetch 함수 명 변경 #1181 * [Fix] 이미지 위치 수정 #1162 (#1185) Co-authored-by: greatSweetMango <jhkim0097@gmail.com> --------- Co-authored-by: joonho0410 <76806109+joonho0410@users.noreply.github.com> Co-authored-by: Junho jeon <junhjeon@Junhoui-MacBookAir.local> Co-authored-by: Junho Jeon <junhjeon@c1r1s5.42seoul.kr> Co-authored-by: kimjaehyuk <jhkim0097@gmail.com> Co-authored-by: greatSweetMango <93255519+greatSweetMango@users.noreply.github.com> --------- Co-authored-by: joonho0410 <76806109+joonho0410@users.noreply.github.com> Co-authored-by: Junho jeon <junhjeon@Junhoui-MacBookAir.local> Co-authored-by: Junho Jeon <junhjeon@c1r1s5.42seoul.kr> Co-authored-by: kimjaehyuk <jhkim0097@gmail.com> Co-authored-by: greatSweetMango <93255519+greatSweetMango@users.noreply.github.com> * [fix] escape함수를 통한 문자열 치환 #1179 (#1180) * [fix] escape함수를 통한 문자열 치환 #1179 * [Fix] TBD => '' 공백으로 변환 #1179 --------- Co-authored-by: Junho jeon <junhjeon@Junhoui-MacBookAir.local> * [Fix] 점수 입력 모달 클릭 안 됨 #1190 (#1191) * [Fix] div 복원 #1190 * [Fix] fallback이미지 추가 #1190 --------- Co-authored-by: joonho0410 <76806109+joonho0410@users.noreply.github.com> Co-authored-by: Junho jeon <junhjeon@Junhoui-MacBookAir.local> Co-authored-by: Junho Jeon <junhjeon@c1r1s5.42seoul.kr> Co-authored-by: kimjaehyuk <jhkim0097@gmail.com> Co-authored-by: greatSweetMango <93255519+greatSweetMango@users.noreply.github.com> * [Fix] 반영 안 된 변경사항 적용 * [Chore] 페이지 제목 수정 #1213 (#1214) (#1215) * 테스트서버 배포 (#1241) * [Feat]토너먼트 페이지 메뉴얼 추가#1232 (#1235) * [style] 경기 규칙 버튼 스타일#1232 * [feat] 토너먼트 경기 설명용 모달 추가 #1232 * [fieat] 새로운 모달 타입 추가 #1232 * [Style] 위치 수정 #1232 --------- Co-authored-by: Junho Jeon <junhjeon@c1r1s5.42seoul.kr> Co-authored-by: Clearsu <clearwater1219@gmail.com> Co-authored-by: Jincheol Park <67998022+Clearsu@users.noreply.github.com> Co-authored-by: Junho jeon <junhjeon@Junhoui-MacBookAir.local> * [Others] 토너먼트 점수 입력 혹은 경기 종료 후 경기 진행 상황 업데이트 #1210 (#1236) * [Feat] 새로고침 버튼 추가 #1210 * [Feat] 새로고침 버튼 추가 #1210 * [Refactor] 리액트 아이콘 대신 HTML 문자 엔티티 사용 #1210 * [Fix] LIVE 상태인 토너먼트 모두 표시 #1239 (#1240) --------- Co-authored-by: joonho0410 <76806109+joonho0410@users.noreply.github.com> Co-authored-by: Junho Jeon <junhjeon@c1r1s5.42seoul.kr> Co-authored-by: Junho jeon <junhjeon@Junhoui-MacBookAir.local> --------- Co-authored-by: joonho0410 <76806109+joonho0410@users.noreply.github.com> Co-authored-by: Junho jeon <junhjeon@Junhoui-MacBookAir.local> Co-authored-by: Junho Jeon <junhjeon@c1r1s5.42seoul.kr> Co-authored-by: kimjaehyuk <jhkim0097@gmail.com> Co-authored-by: greatSweetMango <93255519+greatSweetMango@users.noreply.github.com>
42organization · Jan 11, 2024 · 5c27aaf · 5c27aaf
1 parent 554e915
commit 5c27aaf
Show file tree

Hide file tree

Showing 7 changed files with 209 additions and 19 deletions.
diff --git a/components/modal/modalType/TournamentModal.tsx b/components/modal/modalType/TournamentModal.tsx
@@ -1,5 +1,6 @@
 import { useRecoilValue } from 'recoil';
 import { modalState } from 'utils/recoil/modal';
+import TournamentManualModal from '../tournament/TournamentManualModal';
 import TournamentRegistryModal from '../tournament/TournamentRegistryModal';
 
 export default function TournamentModal() {
@@ -9,6 +10,7 @@ export default function TournamentModal() {
     'TOURNAMENT-REGISTRY': tournamentInfo ? (
       <TournamentRegistryModal {...tournamentInfo} />
     ) : null,
+    'TOURNAMENT-MANUAL': <TournamentManualModal />,
   };
 
   if (!modalName) return null;

diff --git a/components/modal/tournament/TournamentManualModal.tsx b/components/modal/tournament/TournamentManualModal.tsx
@@ -0,0 +1,109 @@
+import { useSetRecoilState } from 'recoil';
+import { modalState } from 'utils/recoil/modal';
+import {
+  ModalButtonContainer,
+  ModalButton,
+} from 'components/modal/ModalButton';
+import styles from 'styles/modal/match/MatchManualModal.module.scss';
+
+type contentType = {
+  title: React.ReactNode;
+  description: string[];
+};
+
+type contentsType = contentType[];
+
+// TODO : 토너먼트 경기에 대한 룰 설명
+const modalContents: contentsType = [
+  {
+    title: <ContentTitle title={'토너먼트 경기 규칙'} icon={'📖'} />,
+    description: [
+      '11점 3판 2선승제',
+      '경기시간은 슬롯에 표기',
+      '점수가 10:10 인 경우 듀스',
+      '듀스인 경우, 2점 차가 나면 경기 종료',
+      '탁구채를 잡지 않은 손으로 탁구대를 짚으면 실점',
+      '탁구대 및 네트가 아닌 곳에 공이 맞을 시 실점',
+    ],
+  },
+  {
+    title: <ContentTitle title={'서브 규칙'} icon={'🚨'} />,
+    description: [
+      '첫 세트만 서브 게임 진행',
+      '서브 게임 승자부터 세트별 교대로 서브',
+      '서브는 2점마다 교대하며, 듀스일 때는 1점마다 교대',
+      '서브 시작 시 상대방에게 신호 (e.g. 서브하겠습니다.)',
+      '서브 시 공이 네트에 맞고 넘어가면 다시 서브',
+    ],
+  },
+  {
+    title: <ContentTitle title={'경기 결과'} icon={'✅'} />,
+    description: [
+      '경기 종료 후 그 자리에서 세트 점수 입력',
+      '종료시간에 다음 경기가 있을 시 현재 스코어가 높은 선수가 승리',
+      '다음 경기가 없을 시 계속 진행 가능',
+    ],
+  },
+  {
+    title: <ContentTitle title={'노쇼'} icon={'🚨'} />,
+    description: [
+      `매치가 시작 되었으나 상대방이 나오지 않는다면 3분이 지날 때 마다 세트 점수 1점씩 획득`,
+      '6분이 지났을 때도 나오지 않았다면 세트 점수 2:0 승리 처리',
+    ],
+  },
+];
+
+export default function TournamentManualModal() {
+  const setModal = useSetRecoilState(modalState);
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.title}>토너먼트 규칙</div>
+      <ul className={styles.ruleList}>
+        {modalContents.map(
+          (
+            item: {
+              title: React.ReactNode;
+              description: string[];
+            },
+            index
+          ) => (
+            <li key={index}>
+              {item.title}
+              <ul className={styles.ruleDetail}>
+                {item.description.map((e, idx) => (
+                  <li key={idx}>{e}</li>
+                ))}
+              </ul>
+            </li>
+          )
+        )}
+      </ul>
+      <ModalButtonContainer>
+        <ModalButton
+          onClick={() => setModal({ modalName: null })}
+          style='positive'
+          value='확인'
+        />
+      </ModalButtonContainer>
+    </div>
+  );
+}
+
+type contentTitleProps = {
+  title: string;
+  icon?: React.ReactNode | string;
+};
+
+function ContentTitle({ title, icon }: contentTitleProps) {
+  icon = typeof icon === 'string' ? <span>{icon}</span> : icon;
+  return (
+    <div
+      className={`${styles.ruleTitle} 
+      ${styles[icon ? 'withIcon' : 'withoutIcon']}`}
+    >
+      {icon ? icon : null}
+      <span>{title}</span>
+    </div>
+  );
+}
diff --git a/components/tournament/UserTournamentBracket.tsx b/components/tournament/UserTournamentBracket.tsx
@@ -11,11 +11,13 @@ import styles from 'styles/tournament/UserTournamentBracket.module.scss';
 
 interface UserTournamentBracketProps {
   tournamentId: number | undefined;
+  state?: string | undefined;
   queryStaleTime: number;
 }
 
 export default function UserTournamentBraket({
   tournamentId,
+  state,
   queryStaleTime,
 }: UserTournamentBracketProps) {
   const setError = useSetRecoilState(errorState);
@@ -31,6 +33,8 @@ export default function UserTournamentBraket({
   const {
     data: bracketMatches = [],
     isLoading,
+    isFetching,
+    refetch,
     isError,
   } = useQuery<Match[]>(
     ['tournamentMatches', tournamentId],
@@ -50,10 +54,20 @@ export default function UserTournamentBraket({
       {isLoading ? (
         <LoadingSpinner />
       ) : (
-        <TournamentBraket
-          singleEliminationBracketMatchs={bracketMatches}
-          containerSize={size}
-        />
+        <>
+          {state === 'LIVE' && (
+            <button
+              onClick={() => refetch()}
+              className={isFetching ? styles.refetching : ''}
+            >
+              &#8635;
+            </button>
+          )}
+          <TournamentBraket
+            singleEliminationBracketMatchs={bracketMatches}
+            containerSize={size}
+          />
+        </>
       )}
     </div>
   );

diff --git a/pages/tournament.tsx b/pages/tournament.tsx
@@ -1,14 +1,28 @@
+import { useSetRecoilState } from 'recoil';
+import { modalState } from 'utils/recoil/modal';
 import TournamentCard from 'components/tournament/TournamentCard';
 import UserTournamentBraket from 'components/tournament/UserTournamentBracket';
 import useBeforeLiveTournamentData from 'hooks/tournament/useBeforeLiveTournamentData';
 import styles from 'styles/tournament/TournamentContainer.module.scss';
 
 export default function Tournament() {
   const { data, isLoading } = useBeforeLiveTournamentData();
+  const setModal = useSetRecoilState(modalState);
+
+  const openManual = () => {
+    setModal({ modalName: 'TOURNAMENT-MANUAL' });
+  };
 
   return (
     <div className={styles.pageWrap}>
-      <h1 className={styles.title}>Tournament</h1>
+      <div className={styles.titleWrap}>
+        <h1 className={styles.title}>Tournament</h1>
+        <div className={styles.buttonWrap}>
+          <button className={styles.manual} onClick={openManual}>
+            경기 규칙
+          </button>
+        </div>
+      </div>
       <div className={styles.tournamentText}> 예정된 토너먼트 </div>
       {data?.beforeTournament.length === 0 ? (
         <div className={styles.noTournamentText}>
@@ -29,19 +43,16 @@ export default function Tournament() {
           진행중인 토너먼트가 없습니다.
         </div>
       ) : (
-        data &&
-        data?.liveTournament.length > 0 && (
+        data?.liveTournament.map((tournament) => (
           <>
-            <TournamentCard
-              {...data.liveTournament[0]}
-              page='tournament/playing'
-            />
+            <TournamentCard {...tournament} page='tournament/playing' />
             <UserTournamentBraket
-              tournamentId={data?.liveTournament[0].tournamentId}
+              tournamentId={tournament.tournamentId}
               queryStaleTime={60 * 1000}
+              state={tournament.status}
             />
           </>
-        )
+        ))
       )}
     </div>
   );

diff --git a/styles/tournament/TournamentContainer.module.scss b/styles/tournament/TournamentContainer.module.scss
@@ -4,11 +4,15 @@
   @include pageWrap;
 }
 
-.title {
-  @include pageTitle;
-  width: fit-content;
-  padding-bottom: 1rem;
-  cursor: pointer;
+.titleWrap {
+  display: flex;
+  justify-content: space-between;
+  .title {
+    @include pageTitle;
+    width: fit-content;
+    padding-bottom: 1rem;
+    cursor: pointer;
+  }
 }
 
 .tournamentCardContainer {
@@ -43,3 +47,19 @@
   justify-content: center;
   align-content: center;
 }
+.buttonWrap {
+  display: flex;
+  margin-right: 0.6rem;
+  margin-bottom: 1rem;
+  align-items: center;
+
+  .manual {
+    @include match-noti-button;
+    width: 4.2rem;
+    height: 1.6rem;
+    padding: 0;
+    margin: 0 0.8rem 0 0;
+    font-size: $small-font;
+    border-radius: $small-radius;
+  }
+}
diff --git a/styles/tournament/UserTournamentBracket.module.scss b/styles/tournament/UserTournamentBracket.module.scss
@@ -1,14 +1,48 @@
+@import 'styles/common.scss';
+
 .bracketContainer {
+  position: relative;
   display: flex;
   width: 100%;
   height: 30rem;
   margin-top: 1rem;
+  margin-bottom: 1.5rem;
   overflow: hidden;
   background-color: rgba(112, 0, 225, 0.17);
   border: 1px solid #c67dff;
   border-radius: 26px;
   align-items: center;
   justify-content: center;
+
+  button {
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+    z-index: 100;
+    display: flex;
+    width: 1.8rem;
+    height: 1.8rem;
+    padding: 0;
+    background-color: rgba(202, 202, 202, 0.561);
+    border: none;
+    border-radius: 50%;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.refetching {
+  background-color: rgb(202, 202, 202) !important;
+  animation: rotate 0.5s linear infinite;
 }
 
 .noTournamentText {

diff --git a/types/modalTypes.ts b/types/modalTypes.ts
@@ -33,7 +33,7 @@ type EditItemModal = 'MEGAPHONE';
 
 type StoreModal = 'MANUAL' | 'COIN_HISTORY';
 
-type TournamentModal = 'REGISTRY';
+type TournamentModal = 'REGISTRY' | 'MANUAL';
 
 type AdminModal =
   | 'PROFILE'