a

app/app.css

@@ -52,9 +52,9 @@ body {
 
 @keyframes rotate {
   0% {
-    transform: rotate(var(--rotate-angle, 0deg));
+    transform: rotate(0deg);
   }
   100% {
-    transform: rotate(calc(var(--rotate-angle, 0deg) + 360deg));
+    transform: rotate(360deg);
   }
 }

app/components/Top.tsx

@@ -1,36 +1,8 @@
 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"
@@ -43,13 +15,6 @@ export default function Top() {
         height={200}
         id="avatar"
         ref={avatarRef}
-        style={
-          {
-            "--rotate-angle": `${angle}deg`,
-          } as React.CSSProperties
-        }
-        onMouseEnter={handleMouseEnter}
-        onMouseLeave={handleMouseLeave}
         className="rounded-full"
       />
       <div>