61 lines
1.8 KiB
TypeScript
61 lines
1.8 KiB
TypeScript
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"
|
|
className="w-auto text-center flex items-center justify-center flex-col gap-4"
|
|
>
|
|
<img
|
|
src="https://f.imnya.ng/profile/34b47ba35448cc74a659bcec443c3fbc.webp"
|
|
alt="imnyang"
|
|
width={200}
|
|
height={200}
|
|
id="avatar"
|
|
ref={avatarRef}
|
|
style={
|
|
{
|
|
"--rotate-angle": `${angle}deg`,
|
|
} as React.CSSProperties
|
|
}
|
|
onMouseEnter={handleMouseEnter}
|
|
onMouseLeave={handleMouseLeave}
|
|
className="rounded-full"
|
|
/>
|
|
<div>
|
|
<h1 className="text-2xl font-bold">암냥</h1>
|
|
<p className="text-sm text-neutral-400">@imnyang</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|