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) { - -

다른 사람들의 스마일 로봇 뱃지 보러가기

- - +
+ +

다른 사람들의 스마일 로봇 뱃지 보러가기

+ + +
); } diff --git a/client/src/features/RushGame/RushGameComponents/RushBar.tsx b/client/src/features/RushGame/RushGameComponents/RushBar.tsx index d2e10d0b..ef9c8cae 100644 --- a/client/src/features/RushGame/RushGameComponents/RushBar.tsx +++ b/client/src/features/RushGame/RushGameComponents/RushBar.tsx @@ -31,7 +31,7 @@ interface BarProps extends BarVariantsProps { export default function RushBar({ ratio, color, status, textAlign }: BarProps) { return ( -

{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() { />
- {toggleContents ? ( - - - - ) : ( - - )} +
+ +
+
);