fix: 툴팁 애니메이션 수정, 필요한 곳에 노출

Author: JKyEun

src/routes/mission/$missionId/-components/MissionNotTriedDefault.tsx

@@ -15,6 +15,7 @@ export default function MissionNotTriedDefault({
   sectorImage,
   difficulty,
   missionImage,
+  score,
   onStart,
 }: MissionNotTriedDefaultProps) {
   return (
@@ -46,6 +47,8 @@ export default function MissionNotTriedDefault({
             onStart={onStart}
             type="detail"
             imageOpacity={100}
+            score={score}
+            hasTooltip
           />
         </div>
       </div>

src/routes/mission/$missionId/-components/MissionNotTriedSuccess.tsx

@@ -58,6 +58,8 @@ export default function MissionNotTriedSuccess({
                 }}
                 type="recommendation"
                 isSelected={index === selectedIndex}
+                score={mission.score}
+                hasTooltip
               />
             ))}
           </div>

src/routes/mission/-components/MissionGridCard.tsx

@@ -1,4 +1,5 @@
 import { Link } from "@tanstack/react-router";
+import { Tooltip } from "radix-ui";
 import Button from "@/components/Button";
 import { Tag } from "@/components/tag/Tag";
 import { cn } from "@/utils/cn";
@@ -21,6 +22,7 @@ interface MissionGridCardProps {
   type: "main" | "detail" | "recommendation";
   isSelected?: boolean;
   imageOpacity?: number;
+  hasTooltip?: boolean;
 }
 
 export default function MissionGridCard({
@@ -37,6 +39,7 @@ export default function MissionGridCard({
   type = "main",
   isSelected = true,
   imageOpacity = 50,
+  hasTooltip = false,
 }: MissionGridCardProps) {
   return (
     <Link
@@ -182,7 +185,29 @@ export default function MissionGridCard({
           )}
           {onStart && (type === "recommendation" || type === "detail") && (
             <div className="flex justify-end gap-2 mt-auto">
-              <Button onClick={onStart}>도전</Button>
+              <Tooltip.Provider>
+                <Tooltip.Root open={hasTooltip && isSelected}>
+                  <Tooltip.Trigger asChild>
+                    <Button onClick={onStart}>도전</Button>
+                  </Tooltip.Trigger>
+                  <Tooltip.Portal>
+                    <Tooltip.Content
+                      className="select-none rounded-[8px] bg-white px-[15px] py-2 text-[15px] leading-none text-violet11 shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] will-change-[transform,opacity] data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade animate-bounce"
+                      sideOffset={5}
+                    >
+                      <p className="t-p-14-sb text-neutral-800 flex items-center gap-1">
+                        <img
+                          src="/score-star.png"
+                          alt="score-star"
+                          className="w-2.5 h-2.5"
+                        />
+                        +{score}
+                      </p>
+                      <Tooltip.Arrow className="fill-white mt-[-1px]" />
+                    </Tooltip.Content>
+                  </Tooltip.Portal>
+                </Tooltip.Root>
+              </Tooltip.Provider>
             </div>
           )}
         </div>

src/routes/mission/-components/MissionTimer.tsx

@@ -1,7 +1,6 @@
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { useNavigate } from "@tanstack/react-router";
 import { differenceInSeconds, isValid, parseISO } from "date-fns";
-import { motion } from "motion/react";
 import { Tooltip } from "radix-ui";
 import { useEffect, useRef, useState } from "react";
 import { Timer } from "@/components/timer/Timer";
@@ -17,8 +16,6 @@ import StopIcon from "../../../components/icons/StopIcon";
 
 const HOLD_MS = 1000;
 
-const MotionTooltipContent = motion.create(Tooltip.Content);
-
 export default function MissionTimer({
   showMockStopButton,
   isTooltipOpen,
@@ -181,26 +178,14 @@ export default function MissionTimer({
               )}
             </button>
           </Tooltip.Trigger>
-          <Tooltip.Portal key={isTooltipOpen ? "open" : "close"}>
-            <MotionTooltipContent
-              key={isTooltipOpen ? "open" : "close"}
-              initial={{ y: -7 }}
-              animate={{
-                y: [0, -7, 0],
-              }}
-              exit={{ y: -7 }}
-              transition={{
-                duration: 1.5,
-                repeat: Infinity,
-                ease: "easeInOut",
-                repeatType: "loop",
-              }}
-              className="select-none rounded-[8px] bg-white px-[15px] py-2 text-[15px] leading-none text-violet11 shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] will-change-[transform,opacity] data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade"
+          <Tooltip.Portal>
+            <Tooltip.Content
+              className="select-none rounded-[8px] bg-white px-[15px] py-2 text-[15px] leading-none text-violet11 shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] will-change-[transform,opacity] data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade animate-bounce"
               sideOffset={5}
             >
               <p className="t-p-14-sb text-blue-500">시작</p>
-              <Tooltip.Arrow className="fill-white" />
-            </MotionTooltipContent>
+              <Tooltip.Arrow className="fill-white mt-[-1px]" />
+            </Tooltip.Content>
           </Tooltip.Portal>
         </Tooltip.Root>
       </Tooltip.Provider>