Merge pull request #168 from softeerbootcamp4th/fix/#166-total-ui-bug

[Fix] 전체적인 UI 오류 수정
softeerbootcamp4th · Aug 19, 2024 · 6f2491f · 6f2491f
2 parents d038c92 + fa5f6af
commit 6f2491f
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 19 deletions.
diff --git a/client/src/features/Main/Lottery.tsx b/client/src/features/Main/Lottery.tsx
@@ -75,13 +75,15 @@ function Lottery({ id }: SectionKeyProps) {
                     </div>
                 </div>
             </div>
-            <Link
-                to="/lottery/show-case"
-                className="flex w-[1200px] justify-end gap-1 h-body-1-regular text-n-neutral-500 hover:underline"
-            >
-                <p>다른 사람들의 스마일 로봇 뱃지 보러가기</p>
-                <ArrowRightIcon stroke="#637381" />
-            </Link>
+            <div className="flex justify-end">
+                <Link
+                    to="/lottery/show-case"
+                    className="flex gap-1 hover:underline h-body-1-regular text-n-neutral-500"
+                >
+                    <p>다른 사람들의 스마일 로봇 뱃지 보러가기</p>
+                    <ArrowRightIcon stroke="#637381" />
+                </Link>
+            </div>
         </Section>
     );
 }

diff --git 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 (
         <span className={barVariants({ color, status, textAlign })} style={{ width: `${ratio}%` }}>
-            <p className="px-3">{ratio}%</p>
+            <p className="px-3 z-40">{ratio}%</p>
         </span>
     );
 }
diff --git 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>
     );