From f749c7a91d66102ceee7500b7f8739807c2804e2 Mon Sep 17 00:00:00 2001 From: joonho0410 <76806109+joonho0410@users.noreply.github.com> Date: Wed, 13 Dec 2023 17:18:21 +0900 Subject: [PATCH] =?UTF-8?q?=ED=85=8C=EC=8A=A4=ED=8A=B8=EC=84=9C=EB=B2=84?= =?UTF-8?q?=20=ED=85=8C=EC=8A=A4=ED=8A=B8=20=EB=B0=B0=ED=8F=AC=20(#1116)?= =?UTF-8?q?=20(#1158)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 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 Co-authored-by: hyobb109 <105159293+hyobb109@users.noreply.github.com> Co-authored-by: Jincheol Park <67998022+Clearsu@users.noreply.github.com> Co-authored-by: PARK <100325940+PHJoon@users.noreply.github.com> Co-authored-by: hyobicho Co-authored-by: PHJoon Co-authored-by: Junho Jeon Co-authored-by: kimjaehyuk Co-authored-by: greatSweetMango <93255519+greatSweetMango@users.noreply.github.com> Co-authored-by: Junho jeon --- .../modal/admin/AdminEditTournamentBraket.tsx | 2 +- components/tournament/TournamentMegaphone.tsx | 108 ++++++++++++++++++ 2 files changed, 109 insertions(+), 1 deletion(-) create mode 100644 components/tournament/TournamentMegaphone.tsx diff --git a/components/modal/admin/AdminEditTournamentBraket.tsx b/components/modal/admin/AdminEditTournamentBraket.tsx index 104cd663a..c0f6258a9 100644 --- a/components/modal/admin/AdminEditTournamentBraket.tsx +++ b/components/modal/admin/AdminEditTournamentBraket.tsx @@ -44,5 +44,5 @@ export default function AdminEditTournamentBraket({ /> - ); //*onClick={putHandler} + ); } diff --git a/components/tournament/TournamentMegaphone.tsx b/components/tournament/TournamentMegaphone.tsx new file mode 100644 index 000000000..0bad4aa61 --- /dev/null +++ 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) => void; +} + +type MegaphoneList = Array; + +export const MegaphoneItem = ({ + content, + intraId, + onClick, +}: IMegaphoneContent) => { + return ( +
+
{intraId}
+
{content}
+
+ ); +}; + +const TournamentMegaphone = () => { + const [contents, setContents] = useState([]); + const [TournamentList, setTournamentList] = useState([]); + const [megaphoneData, setMegaphoneData] = useState([]); + const [selectedIndex, setSelectedIndex] = useState(0); + const virtuoso = useRef(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) => { + 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 ( +
+
+ {!!megaphoneData && megaphoneData.length > 0 && ( + ( + + )} + style={{ height: '100%' }} + /> + )} +
+
+ ); +}; + +export default TournamentMegaphone;