From 3855fb8afb2c929517d04a25d9145f294d02a521 Mon Sep 17 00:00:00 2001
From: imnyang <me@imnyang.xyz>
Date: Mon, 20 Jan 2025 21:46:27 +0900
Subject: [PATCH] sussy

---
 app/app.css            | 10 ++++------
 app/components/Top.tsx | 40 ++++++++++++++++++++++++++++++++++++++++
 2 files changed, 44 insertions(+), 6 deletions(-)

diff --git a/app/app.css b/app/app.css
index 0b67568..a0f62d8 100644
--- a/app/app.css
+++ b/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));
   }
 }
diff --git a/app/components/Top.tsx b/app/components/Top.tsx
index 31099e7..4f68248 100644
--- a/app/components/Top.tsx
+++ b/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>