Merge branch 'others/예정-진행중-토너먼트-데이터-fetching-리팩토링-#1024' of github.c…

…om:42organization/42gg.client into others/토너먼트-브라켓-및-스와이퍼-로딩-컴포넌트-적용-#1203

.github/ISSUE_TEMPLATE/others-.md

@@ -1,25 +1,30 @@
 ---
 name: 'Others '
 about: 기타 이슈 템플릿
-title: "[Others]"
+title: '[Others]'
 labels: ''
 assignees: mike2ox
-
 ---
 
 <!-- 기본적으로 제공하는 문서 이외의 타입일 때 해당 포멧을 기준으로 문서 작성을 권장합니다 -->
 <!-- 담당자는 이슈 발급자 + PO를 꼭 넣어주세요 -->
+
 ## Desc
+
 <!-- 해당 이슈에 대한 요약 설명 -->
+
 - ex. 게더타운 리모델링
 
 ## Detail
+
 <!-- 해당 이슈에 대한 자세한 설명 -->
 
 ## Todo
-- [ ] 
-- [ ] 
-- [ ] 
+
+- [ ]
+- [ ]
+- [ ]
 
 ## Etc
+
 <!-- 위 항목들 외 이슈관련 정보 작성 -->

components/admin/tournament/TournamentEditMatch.tsx

@@ -142,18 +142,7 @@ function TournamentMatchEditor({
 
 export default function TournamentEditMatch({
   match,
-  onMatchClick,
-  onPartyClick,
   onMouseEnter,
-  onMouseLeave,
-  topWon,
-  bottomWon,
-  topHovered,
-  bottomHovered,
-  topText,
-  bottomText,
-  connectorColor,
-  computedStyles,
   teamNameFallback,
   resultFallback,
 }: MatchComponentProps) {

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';
 

components/main/TournamentPreview.tsx

@@ -0,0 +1,51 @@
+import { useRouter } from 'next/router';
+import { useState, useRef } from 'react';
+import { Virtuoso, VirtuosoHandle } from 'react-virtuoso';
+import TournamentCard from 'components/tournament/TournamentCard';
+import useBeforeLiveTournamentData from 'hooks/tournament/useBeforeLiveTournamentData';
+import useInterval from 'hooks/useInterval';
+import styles from 'styles/main/TournamentPreview.module.scss';
+
+export default function TournamentPreview() {
+  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 || dataCombined.length === 0) {
+      return;
+    }
+    const nextIndex = (selectedIndex + 1) % dataCombined.length;
+    setSelectedIndex(nextIndex);
+    if (virtuoso.current !== null) {
+      virtuoso.current.scrollToIndex({
+        index: nextIndex,
+        align: 'start',
+        behavior: 'smooth',
+      });
+    }
+  }, 5000);
+
+  return (
+    <div
+      className={styles.rollingBanner}
+      onClick={() => router.push('tournament')}
+    >
+      <Virtuoso
+        className={styles.virtuoso}
+        totalCount={dataCombined.length}
+        data={dataCombined}
+        ref={virtuoso}
+        itemContent={(index) => (
+          <TournamentCard {...dataCombined[index]} page='main' />
+        )}
+        style={{ height: '100%' }}
+      />
+    </div>
+  );
+}

components/modal/admin/AdminEditTournamentBraket.tsx

@@ -17,7 +17,6 @@ export default function AdminEditTournamentBraket({
   const [ref, size] = useComponentSize<HTMLDivElement>();
 
   const fetchTournamentGames = useCallback(async () => {
-    console.log('Fetching more data...');
     try {
       const res = await instance.get(
         `pingpong/tournaments/${tournamentId}/games`

components/modal/admin/AdminTournamentParticipantEditModal/AdminTournamentParticipantEditModal.tsx

@@ -1,7 +1,11 @@
+import { useState, useCallback, useEffect } from 'react';
 import { useSetRecoilState } from 'recoil';
 import { Button } from '@mui/material';
+import { ITournamentUser } from 'types/admin/adminTournamentTypes';
+import { instanceInManage } from 'utils/axios';
 import { modalState } from 'utils/recoil/modal';
-import AdminTournamentSearchBarGroup from 'components/modal/admin/AdminTournamentParticipantEditModal/AdminTournamentSearchBarGroup';
+import { toastState } from 'utils/recoil/toast';
+import AdminSearchBar from 'components/admin/common/AdminSearchBar';
 import useAdminTournamentParticipantEdit from 'hooks/admin/modal/useAdminTournamentParticipantEdit';
 import styles from 'styles/admin/modal/AdminTournamentParticipantEditModal.module.scss';
 import AdminTournamentParticipantList from './AdminTournamentParticipantList';
@@ -10,24 +14,54 @@ export default function AdminTournamentParticipantEditModal(props: {
   tournamentId: number;
 }) {
   const setModal = useSetRecoilState(modalState);
+  const [inputId, setInputId] = useState('');
+  const setSnackBar = useSetRecoilState(toastState);
+
   const { setUserToAdd, participantList, participantDeleteHandler } =
     useAdminTournamentParticipantEdit(props.tournamentId);
 
+  const postUser = useCallback(async () => {
+    try {
+      const res: { data: ITournamentUser } = await instanceInManage.post(
+        `/tournaments/${props.tournamentId}/users`,
+        { intraId: inputId }
+      );
+      setUserToAdd(res.data);
+      setSnackBar({
+        toastName: 'tournament user add noti',
+        severity: 'success',
+        message: '유저를 성공적으로 추가하였습니다!',
+        clicked: true,
+      });
+    } catch (error: any) {
+      setSnackBar({
+        toastName: 'tournament user add noti',
+        severity: 'error',
+        message: `🔥 ${error.response.data.message} 🔥`,
+        clicked: true,
+      });
+    }
+  }, [inputId, setSnackBar, setUserToAdd, props.tournamentId]);
+
+  useEffect(() => {
+    postUser();
+  }, [inputId, postUser]);
+
+  function addUser(intraId?: string) {
+    setInputId(intraId || '');
+  }
+
   return (
     <div className={styles.whole}>
       <h2>참가자 수정</h2>
-      <div className={styles.hr}></div>
-      <div className={styles.stickyHeader}>
-        <AdminTournamentSearchBarGroup
-          onAddUser={setUserToAdd}
-          tournamentId={props.tournamentId}
-        />
+      <div className={styles.searchBarWrapper}>
+        <AdminSearchBar initSearch={addUser} />
       </div>
       <AdminTournamentParticipantList
         participantList={participantList}
         onDelete={participantDeleteHandler}
       />
-      <div className={styles.buttonGroup}>
+      <div className={styles.cancleButton}>
         <Button
           variant='outlined'
           onClick={() => setModal({ modalName: null })}