Feat/관리자 토너먼트 페이지 전적 수정을 위한 브래킷뷰#1080

components/admin/tournament/TournamentList.tsx

@@ -1,5 +1,6 @@
 import dynamic from 'next/dynamic';
 import { useCallback, useEffect, useState } from 'react';
+import { useSetRecoilState } from 'recoil';
 import {
   Paper,
   Table,
@@ -12,6 +13,8 @@ import {
   ITournament,
   ITournamentTable,
 } from 'types/admin/adminTournamentTypes';
+import { TournamentInfo } from 'types/tournamentTypes';
+import { modalState } from 'utils/recoil/modal';
 import { tableFormat } from 'constants/admin/table';
 import {
   AdminEmptyItem,
@@ -28,7 +31,8 @@ const Quill = dynamic(() => import('react-quill'), {
 });
 
 const tableTitle: { [key: string]: string } = {
-  tournamentName: '토너먼트 이름',
+  title: '토너먼트 이름',
+  content: '토너먼트 내용',
   startTime: '시작 시간',
   endTime: '종료 시간',
   tournamentType: '토너먼트 타입',
@@ -45,6 +49,7 @@ const smapleTournamentList: ITournament[] = Array.from({ length: 10 }, () => ({
 }));
 
 export default function TournamentList() {
+  const setModal = useSetRecoilState(modalState);
   const [tournamentInfo, setTournamentInfo] = useState<ITournamentTable>({
     tournamentList: [],
     totalPage: 0,
@@ -93,27 +98,32 @@ export default function TournamentList() {
                             key={index}
                           >
                             {columnName === 'startTime' ||
-                            columnName === 'endTime'
-                              ? tournament[
-                                  columnName as keyof ITournament
-                                ]?.toLocaleString()
-                              : tournament[
-                                  columnName as keyof ITournament
-                                ]?.toString()}
+                            columnName === 'endTime' ? (
+                              tournament[
+                                columnName as keyof ITournament
+                              ]?.toLocaleString()
+                            ) : columnName === 'edit' ? (
+                              <div>
+                                <button
+                                  className={styles.editBtn}
+                                  onClick={() => {
+                                    setModal({
+                                      modalName: 'ADMIN-TOURNAMENT_BRAKET_EDIT',
+                                    });
+                                  }}
+                                >
+                                  수정
+                                </button>
+                              </div>
+                            ) : (
+                              tournament[
+                                columnName as keyof ITournament
+                              ]?.toString()
+                            )}
                           </TableCell>
                         );
                       }
                     )}
-                    <TableCell>
-                      <div>
-                        <button
-                          className={styles.editBtn}
-                          // onClick={() => deleteHandler(seasonL.seasonId)}
-                        >
-                          삭제
-                        </button>
-                      </div>
-                    </TableCell>
                   </TableRow>
                 )
               )

components/modal/admin/AdminEditTournamentBraket.tsx

@@ -0,0 +1,131 @@
+import { Match } from '@g-loot/react-tournament-brackets/dist/src/types';
+import TournamentBraket from 'components/tournament/TournamentBraket';
+import styles from 'styles/admin/modal/AdminEditTournamentBraket.module.scss';
+
+export const simpleSmallBracket: Match[] = [
+  {
+    id: 19753,
+    nextMatchId: null,
+    tournamentRoundText: '3',
+    startTime: '2021-05-30',
+    state: 'SCHEDULED',
+    participants: [],
+  },
+  {
+    id: 19754,
+    nextMatchId: 19753,
+    tournamentRoundText: '2',
+    startTime: '2021-05-30',
+    state: 'SCHEDULED',
+    participants: [
+      {
+        id: '14754a1a-932c-4992-8dec-f7f94a339960',
+        resultText: null,
+        isWinner: false,
+        status: null,
+        name: 'CoKe BoYz',
+        picture: 'https://avatars.githubusercontent.com/u/93255519?v=4',
+      },
+    ],
+  },
+  {
+    id: 19755,
+    nextMatchId: 19754,
+    tournamentRoundText: '1',
+    startTime: '2021-05-30',
+    state: 'SCORE_DONE',
+    participants: [
+      {
+        id: '14754a1a-932c-4992-8dec-f7f94a339960',
+        resultText: 'Won',
+        isWinner: true,
+        status: 'PLAYED',
+        name: 'CoKe BoYz',
+        picture: 'https://avatars.githubusercontent.com/u/93255519?v=4',
+      },
+      {
+        id: 'd16315d4-7f2d-427b-ae75-63a1ae82c0a8',
+        resultText: 'Lost',
+        isWinner: false,
+        status: 'PLAYED',
+        name: 'Aids Team',
+        picture: 'https://avatars.githubusercontent.com/u/93255519?v=4',
+      },
+    ],
+  },
+  {
+    id: 19756,
+    nextMatchId: 19754,
+    tournamentRoundText: '1',
+    startTime: '2021-05-30',
+    state: 'RUNNING',
+    participants: [
+      {
+        id: 'd8b9f00a-0ffa-4527-8316-da701894768e',
+        resultText: null,
+        isWinner: false,
+        status: null,
+        name: 'Art of kill',
+        picture: 'https://avatars.githubusercontent.com/u/93255519?v=4',
+      },
+    ],
+  },
+  {
+    id: 19757,
+    nextMatchId: 19753,
+    tournamentRoundText: '2',
+    startTime: '2021-05-30',
+    state: 'SCHEDULED',
+    participants: [],
+  },
+  {
+    id: 19758,
+    nextMatchId: 19757,
+    tournamentRoundText: '1',
+    startTime: '2021-05-30',
+    state: 'SCHEDULED',
+    participants: [
+      {
+        id: '9397971f-4b2f-44eb-a094-722eb286c59b',
+        resultText: null,
+        isWinner: false,
+        status: null,
+        name: 'Crazy Pepes',
+        picture: 'https://avatars.githubusercontent.com/u/93255519?v=4',
+      },
+    ],
+  },
+  {
+    id: 19759,
+    nextMatchId: 19757,
+    tournamentRoundText: '1',
+    startTime: '2021-05-30',
+    state: 'SCHEDULED',
+    participants: [
+      {
+        id: '42fecd89-dc83-4821-80d3-718acb50a30c',
+        resultText: null,
+        isWinner: false,
+        status: null,
+        name: 'BLUEJAYS',
+        picture: 'https://avatars.githubusercontent.com/u/93255519?v=4',
+      },
+      {
+        id: 'df01fe2c-18db-4190-9f9e-aa63364128fe',
+        resultText: null,
+        isWinner: false,
+        status: null,
+        name: 'Bosphorus',
+        picture: 'teamlogos/r7zn4gr8eajivapvjyzd',
+      },
+    ],
+  },
+];
+
+export default function AdminEditTournamentBraket() {
+  return (
+    <div className={styles['whole']}>
+      <TournamentBraket singleEliminationBracketMatchs={simpleSmallBracket} />
+    </div>
+  );
+}

components/modal/modalType/AdminModal.tsx

@@ -15,6 +15,7 @@ import AdminUserCoinModal from 'components/modal/admin/AdminUserCoinModal';
 import DeletePenaltyModal from 'components/modal/admin/DeletePenaltyModal';
 import DetailModal from 'components/modal/admin/DetailModal';
 import AdminSeasonEdit from 'components/modal/admin/SeasonEdit';
+import AdminEditTournamentBraket from '../admin/AdminEditTournamentBraket';
 
 export default function AdminModal() {
   const {
@@ -30,6 +31,7 @@ export default function AdminModal() {
     profile,
     item,
     coinPolicy,
+    tournamentInfo,
   } = useRecoilValue(modalState);
 
   const content: { [key: string]: JSX.Element | null } = {
@@ -76,6 +78,7 @@ export default function AdminModal() {
     'ADMIN-COINPOLICY_EDIT': coinPolicy ? (
       <AdminEditCoinPolicyModal {...coinPolicy} />
     ) : null,
+    'ADMIN-TOURNAMENT_BRAKET_EDIT': <AdminEditTournamentBraket />,
   };
 
   if (!modalName) return null;

components/tournament/TournamentBraket.tsx

@@ -0,0 +1,74 @@
+import dynamic from 'next/dynamic';
+import {
+  SVGViewer as StaticSVGViewer,
+  SingleEliminationBracket as StaticSingleEliminationBracket,
+} from '@g-loot/react-tournament-brackets';
+import { Match } from '@g-loot/react-tournament-brackets/dist/src/types';
+import React from 'react';
+import TournamentMatch from 'components/tournament/TournamentMatch';
+
+if (typeof window !== 'undefined' && typeof window.navigator !== 'undefined') {
+  import('@g-loot/react-tournament-brackets');
+}
+
+const SingleEliminationBracket = dynamic<
+  React.ComponentProps<typeof StaticSingleEliminationBracket>
+>(
+  () => {
+    return import('@g-loot/react-tournament-brackets').then(
+      (mod) => mod.SingleEliminationBracket
+    );
+  },
+  { ssr: false }
+);
+
+const SVGViewer = dynamic<React.ComponentProps<typeof StaticSVGViewer>>(
+  () => {
+    return import('@g-loot/react-tournament-brackets').then(
+      (mod) => mod.SVGViewer
+    );
+  },
+  { ssr: false }
+);
+
+interface TournamentBraketProps {
+  singleEliminationBracketMatchs: Match[];
+}
+
+export default function TournamentBraket({
+  singleEliminationBracketMatchs,
+}: TournamentBraketProps) {
+  // const [width, height] = useWindowSize();
+  const finalWidth = 500; //Math.max(width - 50, 500);
+  const finalHeight = 500; //Math.max(height - 100, 500);
+
+  return (
+    <SingleEliminationBracket
+      matches={singleEliminationBracketMatchs}
+      matchComponent={TournamentMatch}
+      options={{
+        style: {
+          width: 230,
+          boxHeight: 120,
+          roundHeader: {
+            isShown: false,
+            fontColor: '#FFFFFF',
+          },
+          connectorColor: '#FFFFFF',
+          connectorColorHighlight: '#da96c6',
+        },
+      }}
+      svgWrapper={({ children, ...props }) => (
+        <SVGViewer
+          background={'rgba(0, 0, 0, 0)'}
+          SVGBackground={'rgba(0, 0, 0, 0)'}
+          width={finalWidth}
+          height={finalHeight}
+          {...props}
+        >
+          {children}
+        </SVGViewer>
+      )}
+    />
+  );
+}

components/tournament/TournamentMatch.tsx

@@ -0,0 +1,76 @@
+import {
+  MatchComponentProps,
+  Participant,
+} from '@g-loot/react-tournament-brackets/dist/src/types';
+import PlayerImage from 'components/PlayerImage';
+import styles from 'styles/tournament/TournamentMatch.module.scss';
+
+interface TournamentMatchPartyProps {
+  party: Participant;
+  teamNameFallback: string;
+  resultFallback: (participant: Participant) => string;
+  onMouseEnter: (partyId: string | number) => void;
+}
+
+function TournamentMatchParty({
+  party,
+  teamNameFallback,
+  onMouseEnter,
+  resultFallback,
+}: TournamentMatchPartyProps) {
+  return (
+    <div
+      className={styles.tournamentPartyWrapper}
+      onMouseEnter={() => onMouseEnter(party.id)}
+    >
+      <PlayerImage
+        src={party.picture ?? '/image/match_qustion.png'}
+        styleName={`tournament`}
+        size={1}
+      />
+
+      <div className={styles.partyName}>{party.name || teamNameFallback}</div>
+      <div className={styles.score}>
+        {party.resultText ?? resultFallback(party)}
+        {/* <input value={topParty.resultText ?? resultFallback(topParty)} /> */}
+      </div>
+    </div>
+  );
+}
+
+export default function TournamentMatch({
+  match,
+  onMatchClick,
+  onPartyClick,
+  onMouseEnter,
+  onMouseLeave,
+  topParty,
+  bottomParty,
+  topWon,
+  bottomWon,
+  topHovered,
+  bottomHovered,
+  topText,
+  bottomText,
+  connectorColor,
+  computedStyles,
+  teamNameFallback,
+  resultFallback,
+}: MatchComponentProps) {
+  return (
+    <div className={styles.tournamentMatchContainer}>
+      <TournamentMatchParty
+        party={topParty}
+        teamNameFallback={teamNameFallback}
+        onMouseEnter={onMouseEnter}
+        resultFallback={resultFallback}
+      ></TournamentMatchParty>
+      <TournamentMatchParty
+        party={bottomParty}
+        teamNameFallback={teamNameFallback}
+        onMouseEnter={onMouseEnter}
+        resultFallback={resultFallback}
+      ></TournamentMatchParty>
+    </div>
+  );
+}