feat: 드래그 앤 드롭 기능 추가

Author: gs0428

apps/web/src/components/(with-side-bar)/library/content-item.tsx

@@ -25,13 +25,28 @@ const contentType = {
 export default function ContentItem({ item, ...props }: ContentItemProps) {
   const { className, ...restProps } = props;
 
+  const onDragStart = (e: React.DragEvent<HTMLButtonElement>) => {
+    e.dataTransfer.setData("application/json", JSON.stringify(item));
+    e.dataTransfer.effectAllowed = "copy";
+
+    // 드래그 중인 요소에 시각적 피드백 추가
+    e.currentTarget.style.opacity = "0.5";
+  };
+
+  const onDragEnd = (e: React.DragEvent<HTMLButtonElement>) => {
+    e.currentTarget.style.opacity = "1";
+  };
+
   return (
     <button
       className={cn(
         "bg-card border-border hover:border-primary group cursor-pointer rounded-lg border p-6 text-start transition-all duration-300 hover:-translate-y-1 hover:transform hover:shadow-lg",
         className
       )}
       aria-label={`${item.title} 콘텐츠 상세보기`}
+      draggable
+      onDragStart={onDragStart}
+      onDragEnd={onDragEnd}
       {...restProps}
     >
       <div className="mb-4 flex items-center gap-4">

apps/web/src/page/topic/index.tsx

@@ -12,8 +12,10 @@ import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import type { ContentTypeOptions } from "@/constants/content";
 import { useCreateConnection, useRemoveConnection } from "@/lib/tanstack/mutation/connection";
+import { useCreateContent } from "@/lib/tanstack/mutation/topic-content";
 import { useGetTopicById } from "@/lib/tanstack/query/topic";
 import { useMobileMenuStore } from "@/lib/zustand/mobile-menu-store";
+import type { CategoryContentDTO } from "@/models/content";
 import { infoToast } from "@/utils/toast";
 import {
   addEdge,
@@ -67,6 +69,7 @@ export default function TopicBoardPage({ id, type }: TopicBoardPageProps) {
   } = useGetTopicById(id);
   const { mutateAsync: createConnection } = useCreateConnection();
   const { mutateAsync: removeConnection } = useRemoveConnection();
+  const { mutateAsync: createContent } = useCreateContent(id);
 
   const [nodes, setNodes, onNodesChange] = useNodesState<Node>(initialNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState<Edge>([]);
@@ -139,6 +142,24 @@ export default function TopicBoardPage({ id, type }: TopicBoardPageProps) {
     }
   };
 
+  // 드래그 앤 드롭 핸들러
+  const onDragOver = (e: React.DragEvent) => {
+    e.preventDefault();
+    e.dataTransfer.dropEffect = "copy";
+  };
+
+  const onDrop = async (e: React.DragEvent) => {
+    e.preventDefault();
+
+    const contentData: CategoryContentDTO = JSON.parse(e.dataTransfer.getData("application/json"));
+
+    // 서버에 콘텐츠 추가
+    await createContent({
+      topicId: id,
+      contentId: contentData.id,
+    });
+  };
+
   const onSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setSearchQuery(event.target.value);
   };
@@ -261,7 +282,11 @@ export default function TopicBoardPage({ id, type }: TopicBoardPageProps) {
         </div>
 
         {/* Canvas */}
-        <div className="relative flex-1 overflow-hidden rounded-r-lg border border-l-0">
+        <div
+          className="relative flex-1 overflow-hidden rounded-r-lg border border-l-0"
+          onDragOver={onDragOver}
+          onDrop={onDrop}
+        >
           {isLoading ? (
             <div className="flex h-full flex-col items-center justify-center gap-2">
               <Loader2 className="text-muted-foreground size-16 animate-spin" />