refactor: GroupCard SRP 원칙에 따라 분리

src/components/display/Cards/GroupCard.tsx

@@ -14,8 +14,8 @@ import { Card, CardHeader, CardContent, CardFooter } from "./style";
 import { faReceipt, faUsers } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
-export interface IGroupCard extends ISearchGroup {
-    variants: "SEARCH" | "JOINED";
+export interface IGroupCard extends ISearchGroup, Omit<React.ComponentProps<"div">, "id"> {
+    button: React.ReactNode;
 }
 
 export const GroupCard: React.FC<IGroupCard> = ({
@@ -27,38 +27,11 @@ export const GroupCard: React.FC<IGroupCard> = ({
     memberCount,
     receiptCount,
     accountantName,
-    variants,
+    button,
+    ...rest
 }) => {
-    const router = useRouter();
-
-    const handleJoinBtnClick = useCallback(async () => {
-        const request = groupsService.joinGroup(id);
-        toast
-            .promise(request, {
-                pending: "그룹 가입중입니다",
-                success: "그룹 가입 성공!",
-                error: "이미 가입된 그룹입니다",
-            })
-            .then(() => {
-                router.push({ pathname: `/groups/${id}` });
-            });
-    }, [id, router]);
-
-    const handleLeaveBtnClick = useCallback(async () => {
-        const request = groupsService.leaveGroup(id);
-        toast
-            .promise(request, {
-                success: "그룹 탈퇴 완료!",
-                pending: "잠시만 기다려주세요..",
-                error: "그룹 탈퇴 실패! 관리자에게 문의해주세요",
-            })
-            .then(() => {
-                queryClient.invalidateQueries({ queryKey: [`/groups`] });
-            });
-    }, [id]);
-
     return (
-        <Card>
+        <Card {...rest}>
             <CardHeader>
                 <div className="flex justify-between items-center mb-2">
                     <div className="text-xs text-gray-500 overflow-hidden text-ellipsis">
@@ -87,13 +60,7 @@ export const GroupCard: React.FC<IGroupCard> = ({
                     </Avatar>
                     <div className="text-xs text-gray-500">{accountantName}</div>
                 </div>
-                <Button
-                    size="sm"
-                    variant={variants === "SEARCH" ? "default" : "destructive"}
-                    onClick={variants === "SEARCH" ? handleJoinBtnClick : handleLeaveBtnClick}
-                >
-                    {variants === "SEARCH" ? "가입하기" : "탈퇴하기"}
-                </Button>
+                {button}
             </CardFooter>
         </Card>
     );

src/components/display/Cards/GroupInfoCard.tsx

@@ -7,13 +7,14 @@ import { Card, CardContent } from "./style";
 export const GroupInfoCard = () => {
     const { isPending, data } = useGroupInfo();
 
-    if (isPending)
+    if (isPending) {
         return (
             <>
                 <TitleSkeleton />
                 <GroupInfoCardSkeleton />
             </>
         );
+    }
 
     return (
         <>

src/components/display/Cards/GroupJoinedCard.tsx

@@ -0,0 +1,49 @@
+import { useRouter } from "next/router";
+import { useCallback } from "react";
+import { toast } from "react-toastify";
+
+import { Button } from "@/components/forms/Button";
+
+import { queryClient } from "@/pages/_app";
+
+import { groupsService } from "@/services/groups/groups.service";
+
+import { GroupCard, IGroupCard } from "./GroupCard";
+
+export interface IGroupJoinedCard extends Omit<IGroupCard, "button"> {}
+
+export const GroupJoinedCard: React.FC<IGroupJoinedCard> = ({ ...props }) => {
+    const router = useRouter();
+
+    const handleLeaveBtnClick = useCallback(() => {
+        const request = groupsService.leaveGroup(props.id);
+        toast
+            .promise(request, {
+                success: "그룹 탈퇴 완료!",
+                pending: "잠시만 기다려주세요..",
+                error: "회계담당자는 그룹을 탈퇴할 수 없습니다",
+            })
+            .then(() => {
+                queryClient.invalidateQueries({ queryKey: [`/groups`] });
+            })
+            .catch((e) => {
+                console.log(e);
+            });
+    }, [props.id]);
+
+    const handleCardClick = useCallback(() => {
+        router.push(`/groups/${router.query.id}`);
+    }, [router]);
+
+    return (
+        <GroupCard
+            {...props}
+            button={
+                <Button size="sm" variant="destructive" onClick={handleLeaveBtnClick}>
+                    탈퇴하기
+                </Button>
+            }
+            onClick={handleCardClick}
+        />
+    );
+};

src/components/display/Cards/GroupSearchCard.tsx

@@ -0,0 +1,42 @@
+import { useRouter } from "next/router";
+import { useCallback } from "react";
+import { toast } from "react-toastify";
+
+import { Button } from "@/components/forms/Button";
+
+import { groupsService } from "@/services/groups/groups.service";
+
+import { GroupCard, IGroupCard } from "./GroupCard";
+
+export interface IGroupSearchCard extends Omit<IGroupCard, "button"> {}
+
+export const GroupSearchCard: React.FC<IGroupSearchCard> = ({ ...props }) => {
+    const router = useRouter();
+
+    const handleClick = useCallback(async () => {
+        const request = groupsService.joinGroup(props.id);
+        toast
+            .promise(request, {
+                pending: "그룹 가입중입니다",
+                success: "그룹 가입 성공!",
+                error: "그룹은 최대 10개까지 가입 가능합니다",
+            })
+            .then(() => {
+                router.push(`/groups/${props.id}`);
+            })
+            .catch((e) => {
+                console.error(e);
+            });
+    }, [props.id, router]);
+
+    return (
+        <GroupCard
+            {...props}
+            button={
+                <Button size="sm" variant="default" onClick={handleClick}>
+                    가입하기
+                </Button>
+            }
+        />
+    );
+};