sussy

app/app.css

@@ -10,18 +10,16 @@ body {
 }
 
 #avatar {
+  display: inline-block;
+  font-size: 100px;
   transition: transform 0.5s linear;
 }
 
-#avatar:hover {
-  animation: rotate 1s linear infinite;
-}
-
 @keyframes rotate {
   0% {
-    transform: rotate(0deg);
+    transform: rotate(var(--rotate-angle, 0deg));
   }
   100% {
-    transform: rotate(360deg);
+    transform: rotate(calc(var(--rotate-angle, 0deg) + 360deg));
   }
 }

app/components/Top.tsx

@@ -1,4 +1,36 @@
+import React, { useState, useRef } from "react";
+
 export default function Top() {
+  const [angle, setAngle] = useState(0);
+  const avatarRef = useRef<HTMLImageElement | null>(null); // Ref 타입 변경
+
+  const handleMouseEnter = () => {
+    if (avatarRef.current) {
+      avatarRef.current.style.animation = `rotate 1s linear infinite`;
+    }
+  };
+
+  const handleMouseLeave = () => {
+    if (avatarRef.current) {
+      const computedStyle = window.getComputedStyle(avatarRef.current);
+      const matrix = computedStyle.transform;
+
+      if (matrix && matrix !== "none") {
+        const values = matrix.match(/matrix\((.+)\)/)?.[1].split(", ");
+        if (values) {
+          const a = parseFloat(values[0]);
+          const b = parseFloat(values[1]);
+          const currentAngle = Math.round(Math.atan2(b, a) * (180 / Math.PI));
+          setAngle((prev) =>
+            currentAngle >= 0 ? currentAngle : currentAngle + 360
+          );
+        }
+      }
+      avatarRef.current.style.animation = "none";
+      avatarRef.current.style.transform = `rotate(${angle}deg)`;
+    }
+  };
+
   return (
     <div
       id="top"
@@ -10,6 +42,14 @@ export default function Top() {
         width={200}
         height={200}
         id="avatar"
+        ref={avatarRef}
+        style={
+          {
+            "--rotate-angle": `${angle}deg`,
+          } as React.CSSProperties
+        }
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
         className="rounded-full"
       />
       <div>