From fa5f6afd5d75a49bacdd2e8bd8c8601f2fa008ff Mon Sep 17 00:00:00 2001
From: sooyeoniya <tndus1306403@naver.com>
Date: Sun, 18 Aug 2024 19:14:49 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EC=83=88=EB=A1=9C=EA=B3=A0=EC=B9=A8=20?=
 =?UTF-8?q?=ED=88=B4=ED=8C=81=20=EB=A9=94=EC=8B=9C=EC=A7=80=20=EB=B6=80?=
 =?UTF-8?q?=EB=93=9C=EB=9F=BD=EA=B2=8C=20=EC=82=AC=EB=9D=BC=EC=A7=80?=
 =?UTF-8?q?=EB=8A=94=20=EC=9D=B8=ED=84=B0=EB=A0=89=EC=85=98=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../RushCardCurrentRatio.tsx                  | 30 ++++++++++++-------
 1 file changed, 19 insertions(+), 11 deletions(-)

diff --git a/client/src/features/RushGame/RushGameComponents/RushCardCurrentRatio.tsx b/client/src/features/RushGame/RushGameComponents/RushCardCurrentRatio.tsx
index 832b5443..b52a276b 100644
--- a/client/src/features/RushGame/RushGameComponents/RushCardCurrentRatio.tsx
+++ b/client/src/features/RushGame/RushGameComponents/RushCardCurrentRatio.tsx
@@ -1,3 +1,4 @@
+import { cva } from "class-variance-authority";
 import Tooltip from "@/components/Tooltip";
 import { CARD_OPTION } from "@/constants/Rush/rushCard.ts";
 import RushCurrentOptionDisplay from "@/features/RushGame/RushGameComponents/RushCurrentOptionDisplay.tsx";
@@ -7,6 +8,18 @@ import useToggleContents from "@/hooks/useToggleContents.ts";
 import { CardOption } from "@/types/rushGame.ts";
 import Reload from "/public/assets/icons/reload.svg?react";
 
+const tooltipVariants = cva(`absolute transition-opacity duration-300 ease-in-out`, {
+    variants: {
+        visible: {
+            true: "opacity-1 visibility-visible",
+            false: "opacity-0 visibility-hidden",
+        },
+    },
+    defaultVariants: {
+        visible: true,
+    },
+});
+
 const TOOLTIP_CONTENT = () => (
     <>
         새로고침을 눌러
@@ -77,17 +90,12 @@ export default function RushCardCurrentRatio() {
                 />
             </div>
             <div className="absolute right-6 bottom-6">
-                {toggleContents ? (
-                    <Tooltip content={TOOLTIP_CONTENT()} tooltipPosition="left">
-                        <button onClick={fetchRushBalance}>
-                            <Reload />
-                        </button>
-                    </Tooltip>
-                ) : (
-                    <button onClick={fetchRushBalance}>
-                        <Reload />
-                    </button>
-                )}
+                <div className={tooltipVariants({ visible: toggleContents })}>
+                    <Tooltip content={TOOLTIP_CONTENT()} tooltipPosition="left" />
+                </div>
+                <button onClick={fetchRushBalance}>
+                    <Reload />
+                </button>
             </div>
         </div>
     );