diff --git a/client/src/features/Main/Lottery.tsx b/client/src/features/Main/Lottery.tsx index 34e5cd91..1383aef6 100644 --- a/client/src/features/Main/Lottery.tsx +++ b/client/src/features/Main/Lottery.tsx @@ -75,13 +75,15 @@ function Lottery({ id }: SectionKeyProps) { - -
다른 사람들의 스마일 로봇 뱃지 보러가기
-다른 사람들의 스마일 로봇 뱃지 보러가기
+{ratio}%
+{ratio}%
); } 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() { />