From 55c63e5735d268deacbfc09cf3dd633b719f9cd6 Mon Sep 17 00:00:00 2001
From: Yejin <78341274+Yejin0O0@users.noreply.github.com>
Date: Thu, 28 Nov 2024 11:04:02 +0900
Subject: [PATCH] =?UTF-8?q?Revert=20"feat:=20=EB=B2=84=ED=8A=BC,=20?=
 =?UTF-8?q?=EB=B1=83=EC=A7=80=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20?=
 =?UTF-8?q?=ED=99=94=20(#265)"?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This reverts commit 352f2174a7310f7fac4451c06b8a289e5452811c.
---
 components/liveMatch/LeagueStatusButton.tsx |  67 ------------
 components/liveMatch/LeagueTierBadge.tsx    |  46 ---------
 components/pages/LiveMatchList.tsx          | 107 ++++++++++++++++++--
 3 files changed, 99 insertions(+), 121 deletions(-)
 delete mode 100644 components/liveMatch/LeagueStatusButton.tsx
 delete mode 100644 components/liveMatch/LeagueTierBadge.tsx

diff --git a/components/liveMatch/LeagueStatusButton.tsx b/components/liveMatch/LeagueStatusButton.tsx
deleted file mode 100644
index a3192f95..00000000
--- a/components/liveMatch/LeagueStatusButton.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import { Button } from "@/components/ui/Button";
-import { AccordionTrigger } from "@/components/ui/accordion";
-import type { LeagueStatus } from "@/types/commonTypes";
-import Link from "next/link";
-import React from "react";
-
-interface LeagueStatusButtonProps {
-  status: LeagueStatus;
-  clubToken: string;
-  leagueId: number;
-}
-
-function LeagueStatusButton(props: LeagueStatusButtonProps) {
-  const { status, clubToken, leagueId } = props;
-
-  if (status === "PLAYING") {
-    return (
-      <AccordionTrigger className="p-2 h-8 rounded-md text-xs w-[105px] border-0 bg-orange-500 text-white hover:no-underline">
-        진행 상황 보기
-      </AccordionTrigger>
-    );
-  }
-  if (status === "RECRUITING") {
-    return (
-      <Link href={`/club/${clubToken}/league/${leagueId}`}>
-        <Button className="p-2 h-8 rounded-md text-xs w-[105px] border-0 bg-blue-500 text-white">
-          모집중
-        </Button>
-      </Link>
-    );
-  }
-
-  if (status === "RECRUITING_COMPLETED") {
-    return (
-      <Link href={`/club/${clubToken}/league/${leagueId}`}>
-        <Button className="p-2 h-8 rounded-md text-xs w-[105px] border-0 bg-gray-300 text-gray-600 hover:bg-gray-300 hover:text-gray-600">
-          모집마감
-        </Button>
-      </Link>
-    );
-  }
-
-  if (status === "CANCELED") {
-    return (
-      <Link href={`/club/${clubToken}/league/${leagueId}`}>
-        <Button
-          variant="outline"
-          className="p-2 h-8 rounded-md text-xs w-[105px] border text-white bg-gray-600 hover:bg-gray-500 hover:text-white "
-        >
-          취소된 경기
-        </Button>
-      </Link>
-    );
-  }
-
-  if (status === "FINISHED") {
-    return (
-      <Link href={`/club/${clubToken}/league/${leagueId}`}>
-        <Button className="p-2 h-8 rounded-md text-xs w-[105px] border-primary hover:border-primary hover:text-primay hover:bg-white">
-          종료된 경기
-        </Button>
-      </Link>
-    );
-  }
-}
-
-export default LeagueStatusButton;
diff --git a/components/liveMatch/LeagueTierBadge.tsx b/components/liveMatch/LeagueTierBadge.tsx
deleted file mode 100644
index ee9a0171..00000000
--- a/components/liveMatch/LeagueTierBadge.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import type { Tier } from "@/types/commonTypes";
-import { getTierWithEmojiAndText } from "@/utils/getTier";
-import React from "react";
-import { Badge } from "../ui/badge";
-
-interface LeagueTierBadgeProps {
-  tier: Tier;
-}
-
-function LeagueTierBadge(props: LeagueTierBadgeProps) {
-  const { tier } = props;
-  if (tier === "GOLD") {
-    return (
-      <Badge
-        variant="outline"
-        className="font-semibold px-2 py-0.5 text-xs rounded-full border-0 w-fit bg-yellow-200 text-yellow-800"
-      >
-        {getTierWithEmojiAndText(tier)}
-      </Badge>
-    );
-  }
-
-  if (tier === "SILVER") {
-    return (
-      <Badge
-        variant="outline"
-        className="font-semibold px-2 py-0.5 text-xs rounded-full border-0 w-fit bg-gray-200 text-gray-700"
-      >
-        {getTierWithEmojiAndText(tier)}
-      </Badge>
-    );
-  }
-
-  if (tier === "BRONZE") {
-    return (
-      <Badge
-        variant="outline"
-        className="font-semibold px-2 py-0.5 text-xs rounded-full border-0 w-fit bg-orange-200 text-orange-800"
-      >
-        {getTierWithEmojiAndText(tier)}
-      </Badge>
-    );
-  }
-}
-
-export default LeagueTierBadge;
diff --git a/components/pages/LiveMatchList.tsx b/components/pages/LiveMatchList.tsx
index b42d815c..7e549a92 100644
--- a/components/pages/LiveMatchList.tsx
+++ b/components/pages/LiveMatchList.tsx
@@ -17,15 +17,106 @@ import {
   useGetMainLeagues,
   useGetMainLeaguesMatch,
 } from "@/lib/api/hooks/mainLeagueHook";
+import type { LeagueStatus, Tier } from "@/types/commonTypes";
 import type {
   GetMainLeagues,
   GetMainLeaguesMatchData,
 } from "@/types/mainLeagueTypes";
+import { getTierWithEmojiAndText } from "@/utils/getTier";
 import { format } from "date-fns";
 import Link from "next/link";
 import React, { useState } from "react";
-import LeagueStatusButton from "../liveMatch/LeagueStatusButton";
-import LeagueTierBadge from "../liveMatch/LeagueTierBadge";
+
+const renderLeagueStatusButton = (
+  status: LeagueStatus,
+  clubToken: string,
+  leagueId: number,
+) => {
+  if (status === "PLAYING") {
+    return (
+      <AccordionTrigger className="p-2 h-8 rounded-md text-xs w-[105px] border-0 bg-orange-500 text-white hover:no-underline">
+        진행 상황 보기
+      </AccordionTrigger>
+    );
+  }
+  if (status === "RECRUITING") {
+    return (
+      <Link href={`/club/${clubToken}/league/${leagueId}`}>
+        <Button className="p-2 h-8 rounded-md text-xs w-[105px] border-0 bg-blue-500 text-white">
+          모집중
+        </Button>
+      </Link>
+    );
+  }
+
+  if (status === "RECRUITING_COMPLETED") {
+    return (
+      <Link href={`/club/${clubToken}/league/${leagueId}`}>
+        <Button className="p-2 h-8 rounded-md text-xs w-[105px] border-0 bg-gray-300 text-gray-600 hover:bg-gray-300 hover:text-gray-600">
+          모집마감
+        </Button>
+      </Link>
+    );
+  }
+
+  if (status === "CANCELED") {
+    return (
+      <Link href={`/club/${clubToken}/league/${leagueId}`}>
+        <Button
+          variant="outline"
+          className="p-2 h-8 rounded-md text-xs w-[105px] border border-gray-300 text-gray-600 hover:border-gray-300 hover:text-gray-600 hover:bg-white"
+        >
+          경기취소
+        </Button>
+      </Link>
+    );
+  }
+
+  if (status === "FINISHED") {
+    return (
+      <Link href={`/club/${clubToken}/league/${leagueId}`}>
+        <Button className="p-2 h-8 rounded-md text-xs w-[105px] border-primary hover:border-primary hover:text-primay hover:bg-white">
+          경기종료
+        </Button>
+      </Link>
+    );
+  }
+};
+
+const renderLeagueTierBadge = (tier: Tier) => {
+  if (tier === "GOLD") {
+    return (
+      <Badge
+        variant="outline"
+        className="font-semibold px-2 py-0.5 text-xs rounded-full border-0 w-fit bg-yellow-200 text-yellow-800"
+      >
+        {getTierWithEmojiAndText(tier)}
+      </Badge>
+    );
+  }
+
+  if (tier === "SILVER") {
+    return (
+      <Badge
+        variant="outline"
+        className="font-semibold px-2 py-0.5 text-xs rounded-full border-0 w-fit bg-gray-200 text-gray-700"
+      >
+        {getTierWithEmojiAndText(tier)}
+      </Badge>
+    );
+  }
+
+  if (tier === "BRONZE") {
+    return (
+      <Badge
+        variant="outline"
+        className="font-semibold px-2 py-0.5 text-xs rounded-full border-0 w-fit bg-orange-200 text-orange-800"
+      >
+        {getTierWithEmojiAndText(tier)}
+      </Badge>
+    );
+  }
+};
 
 function LiveMatchList() {
   const today = format(new Date(), "yyyy-MM-dd");
@@ -89,7 +180,7 @@ function LiveMatchList() {
                                 </p>
                               </div>
                               <div className="flex flex-col flex-grow pl-3 gap-1">
-                                <LeagueTierBadge tier={item.required_tier} />
+                                {renderLeagueTierBadge(item.required_tier)}
                                 <div className="flex items-center my-1 pl-1">
                                   <p className="text-base font-semibold text-gray-900">
                                     {item.league_name}
@@ -110,11 +201,11 @@ function LiveMatchList() {
                               </div>
                             </Link>
                             <div className="flex items-center">
-                              <LeagueStatusButton
-                                status={item.league_status}
-                                clubToken={item.club_token}
-                                leagueId={item.league_id}
-                              />
+                              {renderLeagueStatusButton(
+                                item.league_status,
+                                item.club_token,
+                                item.league_id,
+                              )}
                             </div>
                           </div>
                           <AccordionContent>