테스트서버 테스트 배포 (#1116) (#1158)

* Update README.md * Update README.md * Update README.md * Update README.md * Update README.md * Update README.md * [Feat] [GGFE-273] 게임 관리 상태 타입 추가 * [Fix] [GGFE-273] 빌드 에러 수정 * [Feat] [GGFE-273] 게임 종료 전 관리자 점수 입력 방지 * [Style] [GGFE-285] 클릭 가능한 부분 curosr:pointer 추가 * 매치 [GGFE-286] 매뉴얼 노쇼 패널티 문구 추가 * [] * [] * [] * .husky 전체 주석처리 * [] * feat:토너먼트 테이블 타입 추가#1075 * [] * [] * [Feat] 토너먼트 참가용 모달 샘플 생성 * Feat/유저 토너먼트 전적 페이지 레이아웃 #1077 * [Chore] add tournament-record.tsx * [Feat] 토너먼트 전적 페이지 레이아웃 #1077 * [Style] 토너먼트 전적 페이지 레이아웃 스타일 #1077 * [Style] 토너먼트 페이지 스타일 * [Feat] 대기중인 토너먼트를 보여주는 Card 컴포넌트 생성 * [Style] 대기중인 토너먼트 Card 스타일 생성 * [Feat] 테스트용 데이터 생성 * [Stylle] 대기중인 토너먼트 css 수정#1073 * [FIX] 토너먼트 모달에 사용되는 인터페이스 멤버 네이밍을 API에서 사용되는 이름으로 변경 #1073 * [FIX] 토너먼트 Card의 Props들을 API에 맞춰서 변경#1073 * feat: 리스트에 버튼 추가#1075 * [FIX] ismainn에 따라서 bangContainer의 변화 * [Style] 랭킹화면 margin변화 * feat:토너먼트 모달타입추가 * feat:버튼 클릭 모달열기 추가#1080 * [Feat] API 받아오는거 추가#1083 * fix: ITournament TournamentInfo 필드 이름 변경 * [FIX] 토너먼트 타입 변경#1084 * [FIX] admin 토너먼트 타입 변경#1084 * [FIX] ITournamentInfo 사용하는곳 들의 Sample Data 변경 * [FIX] 타입들을 사용하는 곳에서 변경된 내용들을 수정 #1084 * [FIX] 사용할수 없는 api주석 처리#1083 * [Style] 토너먼트 모달 스타일 수정#1083 * [S[Style] 모달 X 버튼클릭으로 나가기#1083 * [Style] 모달 참가인원 추가 #1083 * [Style] 모달 내부 텍스트 중앙정렬 #1083 * Feat/유저 토너먼트 전적 페이지 우승자 스와이프 뷰 #1070 (#1086) * [Feat] winner images swipe ui #1070 * [Style] add border and brightness #1070 * [Refactor] choose style in function #1070 * [Chore] install Swiper #1070 * [Feat] swiper UI #1070 * [Feat] 토너먼트 전체조회 API mock #1089 (#1091) * [Feat] 무한스크롤 제네릭 함수 #1092 (#1093) * [Feat] TournamentData 추가 #1094 (#1095) * [Fix] 토너먼트전체조회 Mock API 페이지네이션 로직 수정 #1096 (#1097) * [Feat] tournament 스타일 추가 * [Feat] 토너먼트 전적 수정 모달 작성 * [Feat] 토너먼트 브래킷뷰 구현 * [Feat] 토너먼트 전적 수정 버튼 추가 * Feat/유저 토너먼트 전적 페이지 우승자 스와이퍼 슬라이드 UI 및 mock API #1088 (#1099) * [Feat] 슬라이드 구현 #1088 * [Feat] prop 추가 #1088 * [Feat] mock 데이터 수정 #1088 * [Refactor] optional chaining #1088 * [Feat] 토너먼트 전체조회 API 명세에 맞춤 #1088 * [Feat] 토너먼트전체조회 API 확정 #1088 * [Feat] 토너먼트전체조회 API 확정 #1088 * [Feat] 토너먼트전체조회 API 확정 #1088 * [Refactor] 삼항연산자 제거 #1088 * [Chore] 파일명 변경 #1088 * [Refactor] 컴포넌트명 변경 #1088 * [Fix] 토너먼트 전체조회 엔드포인트 수정 #1088 * [Fix] 토너먼트 전체조회 엔드포인트 수정 #1088 * [Fix] TournamentInfo 타입 변경에 따른 수정 #1088 * [Refactor] 토너먼트 타입 임시로 대문자로 통일 #1088 * [Refactor] 컴포넌트 분리 #1088 * [Refactor] WinnerSwiper 컴포넌트 #1088 * [Feat] 브래킷뷰 스타일 작성 #1080 * [Refactor] 스타일 분리 #1080 * [Fix] 수정버튼 위치 수정 * [Fix] AdminEditTournamentBraket props 제거 #1080 * [Fix] dynamic import 타입 명시 #1080 * [Fix] 구버전 TournamentInfo 삭제 #1080 * [Style] 주석제거 * [Fix] 구버전 TournamentInfo 삭제 * [Feat] 토너먼트 페이지 인피니티 스크롤#1090 (#1100) * [FIX] a mock API page문제 수정#1090 * [Feat] 대기중인 토너먼트 인피니트 스크롤 #1090 * [Feat] 메인페이지 토너먼트 안내 메가폰 설치 #1090 * [FIX] 메가폰 클릭시 토너먼트 페이지로 이동#1090 * [Feat] 대토너먼트 인피니티 스크롤 #1080 * [Fix] ] 오타수정 #1090 * [Fix] mock api 주소 수정 및 기존에 쓰던 mock api 삭제 #1090 * [Chore] test용 콘솔로그 제거 #1090 * [Fix] api 루키와 마스터리그 모두다 받아오도록 수정#1090 * [Fix] fetch async 함수로 변환#1090 --------- * Feat/유저 토너먼트 전적 페이지 토너먼트 정보 표시 #1104 (#1105) * [Fix] TournamentInfo 날짜 타입 수정 #1104 * [Feat] 토너먼트 정보 표시 #1104 * [Refactor] 사용하지 않는 더미데이터 삭제 및 에러코드 수정 #1104 * Feat/유저 토너먼트 전적 페이지 리그 선택 버튼 #1079 (#1107) * [Fix] TournamentInfo 날짜 타입 수정 #1104 * [Feat] 토너먼트 정보 표시 #1104 * [Feat] 리그선택버튼 기능구현 #1079 * [Style] 활성 버튼 디자인 #1079 * [Feat] 활성 버튼 스타일 변경 #1079 * [Fix] 버튼 스타일 변경 시 위치 이동되지 않도록 고정크기 적용 #1079 * Feat/메뉴바에 tournament record(명예의전당) 바로가기 추가 #1108 (#1109) * [Feat] 명예의전당 링크 추가 #1108 * [Chore] 명예의 전당 아이콘 추가 #1108 * [Feat] 토너먼트 게임 타입 추가 #1102 * [Feat] 토너먼트게임 브래킷뷰 데이터 컨버터 구현 #1102 * [Fix] props 변경 #1102 * [Feat] mockApi 추가 #1102 * Feat/우승자 슬라이드 애니메이션 및 이미지 로드 실패 시 fall back 이미지 #1098 (#1110) * [Refactor] 불필요한 리턴값 제거 #1098 * [Feat] fade in 애니메이션 추가 #1098 * [Feat] 이미지 로드 에러 시 fallBack 이미지 표시 #1098 * [Docs] 주석 제거 #1098 * [Fix] 잘못된 setState 호출 삭제 #1098 * [Chore] edit test-deploy action #1114 (#1115) --------- Co-authored-by: Yoon Jeongyeon <[email protected]> Co-authored-by: hyobb109 <[email protected]> Co-authored-by: Jincheol Park <[email protected]> Co-authored-by: PARK <[email protected]> Co-authored-by: hyobicho <[email protected]> Co-authored-by: PHJoon <[email protected]> Co-authored-by: Junho Jeon <[email protected]> Co-authored-by: kimjaehyuk <[email protected]> Co-authored-by: greatSweetMango <[email protected]> Co-authored-by: Junho jeon <[email protected]>
42organization · Dec 13, 2023 · f749c7a · f749c7a
1 parent 0d53dbf
commit f749c7a
Show file tree

Hide file tree

Showing 2 changed files with 109 additions and 1 deletion.
diff --git a/components/modal/admin/AdminEditTournamentBraket.tsx b/components/modal/admin/AdminEditTournamentBraket.tsx
@@ -44,5 +44,5 @@ export default function AdminEditTournamentBraket({
         />
       </TournamentIdContext.Provider>
     </div>
-  ); //*onClick={putHandler}
+  );
 }
diff --git a/components/tournament/TournamentMegaphone.tsx b/components/tournament/TournamentMegaphone.tsx
@@ -0,0 +1,108 @@
+import { useRouter } from 'next/router';
+import { useState, useEffect, useRef } from 'react';
+import { Virtuoso, VirtuosoHandle } from 'react-virtuoso';
+import { TournamentInfo } from 'types/tournamentTypes';
+import { instance } from 'utils/axios';
+import { mockInstance } from 'utils/mockAxios';
+import useInterval from 'hooks/useInterval';
+import styles from 'styles/Layout/MegaPhone.module.scss';
+
+interface IMegaphoneContent {
+  megaphoneId?: number;
+  content: string;
+  intraId: string;
+  onClick: (event: React.MouseEvent<HTMLDivElement>) => void;
+}
+
+type MegaphoneList = Array<IMegaphoneContent>;
+
+export const MegaphoneItem = ({
+  content,
+  intraId,
+  onClick,
+}: IMegaphoneContent) => {
+  return (
+    <div className={styles.contentWrapper} onClick={onClick}>
+      <div className={styles.intraId}>{intraId}</div>
+      <div className={styles.content}>{content}</div>
+    </div>
+  );
+};
+
+const TournamentMegaphone = () => {
+  const [contents, setContents] = useState<MegaphoneList>([]);
+  const [TournamentList, setTournamentList] = useState<TournamentInfo[]>([]);
+  const [megaphoneData, setMegaphoneData] = useState<MegaphoneList>([]);
+  const [selectedIndex, setSelectedIndex] = useState<number>(0);
+  const virtuoso = useRef<VirtuosoHandle>(null);
+  const router = useRouter();
+
+  function getTournamentListHandler() {
+    return mockInstance
+      .get(`tournament?page=1&status=예정&size=5`)
+      .then((res) => {
+        setTournamentList(res.data.tournaments);
+      });
+  }
+
+  const goTournamentPage = (event: React.MouseEvent<HTMLDivElement>) => {
+    router.push('tournament');
+  };
+
+  useEffect(() => {
+    if (contents.length === 0) getTournamentListHandler();
+  }, [contents]);
+
+  useEffect(() => {
+    if (contents.length > 0) setMegaphoneData([...contents]);
+    else {
+      setMegaphoneData([
+        ...TournamentList.map(
+          (item): IMegaphoneContent => ({
+            megaphoneId: item.tournamentId,
+            content: item.title,
+            intraId: item.startTime.toString().split(':').slice(0, 2).join(':'),
+            onClick: goTournamentPage,
+          })
+        ),
+      ]);
+    }
+  }, [contents, TournamentList]);
+
+  useInterval(() => {
+    if (!megaphoneData) return;
+    const nextIndex = (selectedIndex + 1) % megaphoneData.length;
+    setSelectedIndex(nextIndex);
+    if (virtuoso.current !== null)
+      virtuoso.current.scrollToIndex({
+        index: nextIndex,
+        align: 'start',
+        behavior: 'smooth',
+      });
+  }, 4000);
+
+  return (
+    <div className={styles.rollingBanner}>
+      <div className={styles.wrapper}>
+        {!!megaphoneData && megaphoneData.length > 0 && (
+          <Virtuoso
+            className={styles.virtuoso}
+            totalCount={megaphoneData.length}
+            data={megaphoneData}
+            ref={virtuoso}
+            itemContent={(index) => (
+              <MegaphoneItem
+                content={megaphoneData[index].content}
+                intraId={megaphoneData[index].intraId}
+                onClick={goTournamentPage}
+              />
+            )}
+            style={{ height: '100%' }}
+          />
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default TournamentMegaphone;
-Original file line number
+Diff line change
@@ Expand Up / @@ -44,5 +44,5 @@ export default function AdminEditTournamentBraket({ @@
             />
           </TournamentIdContext.Provider>
         </div>
-      ); //*onClick={putHandler}
+      );
     }