feat: 인터랙션 가이드 UI 추가 (#197)

* feat: 인터랙션 가이드 추가

* chore: 인터랙션 가이드 내용 추가

packages/frontend/package.json

@@ -25,6 +25,7 @@
     "@radix-ui/react-context-menu": "^2.2.2",
     "@radix-ui/react-dialog": "^1.1.2",
     "@radix-ui/react-dropdown-menu": "^2.1.2",
+    "@radix-ui/react-hover-card": "^1.1.2",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-popover": "^1.1.2",
     "@radix-ui/react-slot": "^1.1.0",

packages/frontend/src/components/space/InteractionGuide.tsx

@@ -0,0 +1,63 @@
+import { InfoIcon } from "lucide-react";
+
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from "@/components/ui/hover-card";
+
+const interactions = [
+  {
+    id: "node-drag",
+    title: "새로운 노드 생성",
+    description: "노드 드래그",
+  },
+  {
+    id: "node-move",
+    title: "노드 이동",
+    description: "클릭 + 0.5초 이상 홀드",
+  },
+  {
+    id: "screen-move",
+    title: "화면 이동",
+    description: "스페이스 빈 공간 클릭 후 드래그",
+  },
+  {
+    id: "screen-zoom",
+    title: "화면 줌",
+    description: "ctrl + 마우스 휠 또는 트랙패드 제스처",
+  },
+  {
+    id: "node-edit",
+    title: "노드 편집",
+    description: "노드 위에서 우클릭",
+  },
+  {
+    id: "edge-edit",
+    title: "간선 편집",
+    description: "간선 위에서 우클릭",
+  },
+];
+
+export default function InteractionGuide() {
+  return (
+    <HoverCard>
+      <HoverCardTrigger>
+        <InfoIcon fill="#FFFFFF" />
+      </HoverCardTrigger>
+      <HoverCardContent align="end">
+        <div className="flex flex-col space-y-2">
+          <h2 className="text-lg font-bold">상호작용 가이드 🐝</h2>
+          <ul className="list-disc list-inside">
+            {interactions.map((interaction) => (
+              <li key={interaction.id}>
+                <span className="font-bold">{interaction.title}</span>:&nbsp;
+                {interaction.description}
+              </li>
+            ))}
+          </ul>
+        </div>
+      </HoverCardContent>
+    </HoverCard>
+  );
+}

packages/frontend/src/components/ui/hover-card.tsx

@@ -0,0 +1,28 @@
+import * as React from "react";
+
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
+
+import { cn } from "@/lib/utils";
+
+const HoverCard = HoverCardPrimitive.Root;
+
+const HoverCardTrigger = HoverCardPrimitive.Trigger;
+
+const HoverCardContent = React.forwardRef<
+  React.ElementRef<typeof HoverCardPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <HoverCardPrimitive.Content
+    ref={ref}
+    align={align}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 w-96 rounded-md border bg-popover p-4 text-popover-foreground break-keep shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className,
+    )}
+    {...props}
+  />
+));
+HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
+
+export { HoverCard, HoverCardTrigger, HoverCardContent };

packages/frontend/src/pages/Space.tsx

@@ -4,6 +4,7 @@ import { useNavigate, useParams } from "react-router-dom";
 import { CircleDashedIcon, MoveLeftIcon } from "lucide-react";
 
 import ErrorSection from "@/components/ErrorSection";
+import InteractionGuide from "@/components/space/InteractionGuide";
 import SpacePageHeader from "@/components/space/SpacePageHeader";
 import SpaceView from "@/components/space/SpaceView";
 import { Button } from "@/components/ui/button";
@@ -44,7 +45,7 @@ export default function SpacePage() {
 
   return (
     <YjsStoreProvider value={{ yDoc, yProvider, setYDoc, setYProvider }}>
-      <div className="w-full h-full" ref={containerRef}>
+      <div className="w-full h-full relative" ref={containerRef}>
         {status === "connecting" ? (
           <div className="flex items-center justify-center w-full h-full">
             <CircleDashedIcon className="animate-spin w-32 h-32 text-primary" />
@@ -53,6 +54,14 @@ export default function SpacePage() {
           <SpaceView spaceId={spaceId} autofitTo={containerRef} />
         )}
         <SpacePageHeader spaceId={spaceId} />
+        <div
+          className="absolute top-7 right-[52px]"
+          style={{
+            top: "calc(4rem + 24px)",
+          }}
+        >
+          <InteractionGuide />
+        </div>
       </div>
     </YjsStoreProvider>
   );