design: 싱글 토너먼트 구현 (#208)

* feat: update MatchPlayerBlock design

* feat: add getTier

* feat: 구조 구현

* feat: 디렉터님과 페어프로그래밍

* fix: 가운데 정렬

* feat: 주석 삭제 및 로직 수정

* feat: match 페이지에 적용

* fix: fix tsc error

app/club/[clubId]/league/[leagueId]/match/page.tsx

@@ -1,8 +1,7 @@
-// import Match from "@/components/pages/club/Match";
+import Match from "@/components/pages/club/Match";
 
 function MatchPage() {
-  return <div>match</div>;
-  //   return <Match />;
+  return <Match />;
 }
 
 export default MatchPage;

components/club/LeagueForm.tsx

@@ -151,12 +151,9 @@ function LeagueForm(props: LeagueFormProps) {
       data.mode = "create";
     }
     if (data.mode === "create") {
-      createLeague(
-        { ...data, league_status: "RECRUITING" },
-        {
-          onSuccess: () => router.push(`/club/${clubId}/league`),
-        },
-      );
+      createLeague(data, {
+        onSuccess: () => router.push(`/club/${clubId}/league`),
+      });
     } else {
       updateLeague(data, {
         onSuccess: () => router.push(`/club/${clubId}/league`),

components/club/LeagueList.tsx

@@ -5,7 +5,7 @@ import { useGetDateLeagues } from "@/lib/api/hooks/leagueHook";
 import type { components } from "@/schemas/schema";
 import type { GetLeagueDateData } from "@/types/leagueTypes";
 import { getLeagueType } from "@/utils/getLeagueType";
-import { getTierWithEmoji } from "@/utils/getTierWithEmoji";
+import { getTierWithEmojiAndText } from "@/utils/getTier";
 import { format } from "date-fns";
 import { CalendarPlus } from "lucide-react";
 import Link from "next/link";
@@ -46,7 +46,7 @@ function ScheduleList(props: ScheduleListProps) {
                 </Text>
               </div>
               <Text className="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-800">
-                {getTierWithEmoji(schedule.required_tier as string)}
+                {getTierWithEmojiAndText(schedule.required_tier as string)}
               </Text>
             </div>
             <div className="flex justify-between items-center text-gray-600">

components/club/MemberInfo.tsx

@@ -3,7 +3,7 @@
 import MemberDropDown from "@/components/club/MemberDropdown";
 import IconButton from "@/components/ui/IconButton";
 import type { components } from "@/schemas/schema";
-import { getTierWithEmoji } from "@/utils/getTierWithEmoji";
+import { getTierWithEmojiAndText } from "@/utils/getTier";
 import { AlignJustify } from "lucide-react";
 
 type ClubMemberResponse = components["schemas"]["ClubMemberResponse"];
@@ -48,7 +48,7 @@ function MemberInfo({ memberData, isOpen, onToggle }: MemberInfoProps) {
       </div>
       <div className="flex flex-[1] items-center">
         <p className="text-black">
-          {getTierWithEmoji(memberData.tier as string)}
+          {getTierWithEmojiAndText(memberData.tier as string)}
         </p>
       </div>
       <div className="flex flex-[1] items-center justify-between relative">

components/club/TournamentBracket/MatchNode.tsx

@@ -1,9 +1,10 @@
+import type { MatchParticipant } from "@/types/matchTypes";
 import { Handle, Position } from "@xyflow/react";
-import PlayerNode, { type Player } from "./MatchPlayerBlock";
+import MatchPlayerBlock from "./MatchPlayerBlock";
 
 export type CustomNodeData = {
-  player1: Player;
-  player2: Player;
+  player1: MatchParticipant;
+  player2: MatchParticipant;
 };
 
 interface MatchNodeProps {
@@ -14,10 +15,10 @@ interface MatchNodeProps {
 function MatchNode({ data }: MatchNodeProps) {
   return (
     <div>
-      <Handle type="source" position={Position.Left} id="left" />
-      <Handle type="target" position={Position.Right} id="right" />
-      <PlayerNode {...data.player1} />
-      <PlayerNode {...data.player2} />
+      <MatchPlayerBlock {...data.player1} />
+      <MatchPlayerBlock {...data.player2} />
+      <Handle type="source" position={Position.Right} id="Right" />
+      <Handle type="target" position={Position.Left} id="Left" />
     </div>
   );
 }

components/club/TournamentBracket/MatchPlayerBlock.tsx

@@ -1,24 +1,34 @@
-import { getTierWithEmoji } from "@/utils/getTierWithEmoji";
+import type { MatchParticipant } from "@/types/matchTypes";
+import { getTierWithEmoji } from "@/utils/getTier";
 import React from "react";
 
-export type Player = {
-  imgUrl: string;
-  name: string;
-  tier: "GOLD" | "SILVER" | "BRONZE";
-  score: number;
-};
+interface MatchPlayerBlockProps extends MatchParticipant {}
 
-interface PlayerNodeProps extends Player {}
-
-function PlayerNode({ imgUrl, name, tier, score }: PlayerNodeProps) {
+function MatchPlayerBlock({
+  image,
+  name,
+  tier,
+  participant_win_set_count,
+}: MatchPlayerBlockProps) {
   return (
-    <div className="flex gap-2 border-gray-300 border">
-      <img src={imgUrl} alt="profile" className="w-10 h-10 rounded-full" />
-      <span>{name}</span>
-      <span>{getTierWithEmoji(tier)}</span>
-      <span>{score}</span>
+    <div className="flex items-center justify-between gap-3 p-2 rounded-sm bg-gray-700 w-60 h-11">
+      <div className="flex items-center gap-3 ">
+        <img
+          src={image}
+          alt="profile"
+          className="w-8 h-8 rounded-full object-cover border border-gray-500"
+        />
+        <div className="flex-1 flex justify-center items-center gap-2">
+          <span className="block text-sm font-semibold text-gray-200 truncate">
+            {name} {getTierWithEmoji(tier || "")}
+          </span>
+        </div>
+      </div>
+      <span className="text-lg font-semibold text-blue-300">
+        {participant_win_set_count}
+      </span>
     </div>
   );
 }
 
-export default PlayerNode;
+export default MatchPlayerBlock;