feat: HoverTrigger 컴포넌트 구현

Author: yewonJin

frontend/src/components/HoverTrigger.tsx

@@ -0,0 +1,39 @@
+import { cn } from "@/lib/utils";
+import { useState } from "react";
+
+interface HoverTriggerProps {
+  className?: string;
+  children: React.ReactNode;
+}
+
+export default function HoverTrigger({
+  className,
+  children,
+}: HoverTriggerProps) {
+  const [isHovered, setIsHovered] = useState(false);
+
+  const handleMouseEnter = () => {
+    setIsHovered(true);
+  };
+
+  const handleMouseLeave = () => {
+    setIsHovered(false);
+  };
+
+  return (
+    <div
+      className={cn("h-screen", className)}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
+      <div
+        className={cn(
+          "transition-transform",
+          isHovered ? "translate-x-0" : "-translate-x-full",
+        )}
+      >
+        {children}
+      </div>
+    </div>
+  );
+}