feat: Add draggable window component and associated functionality

- Implemented DraggableWindose component with drag-and-drop capabilities.
- Added shake detection to close the window after multiple shakes.
- Integrated responsive design for mobile devices.
- Created TXT component to display a clickable text icon with hover effects.
- Included image assets for the draggable window and text icon.
This commit is contained in:
암냥 2025-12-20 01:13:28 +09:00
commit 82b5b0719c
No known key found for this signature in database
6 changed files with 182 additions and 2 deletions

22
src/components/txt.tsx Normal file
View file

@ -0,0 +1,22 @@
import Image from "next/image";
interface TXTProps {
onHover?: (position: { x: number; y: number } | null) => void;
}
export default function TXT({ onHover }: TXTProps) {
return (
<div
className="flex flex-col items-center justify-center gap-4 absolute top-4 left-4 p-2 cursor-pointer font-galmuri drag-none select-none"
onMouseEnter={() => onHover?.({ x: 16, y: 16 })}
onMouseLeave={() => onHover?.(null)}
onClick={() => {
alert("왜 편법을 쓰지?");
window.location.reload();
}}
>
<Image src="/txt.webp" alt="txt" width={24} height={24} />
<span className="text-sm font-medium text-foreground/80 font-galmuri">.txt</span>
</div>
);
}