dnd 시도

frontend/package.json

@@ -37,6 +37,8 @@
     "d3-scale": "^4.0.2",
     "d3-shape": "^3.2.0",
     "react": "^18.2.0",
+    "react-dnd": "^16.0.1",
+    "react-dnd-html5-backend": "^16.0.1",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.3.0"
   }

frontend/src/App.tsx

@@ -2,12 +2,16 @@ import React from "react";
 import { Outlet } from "react-router-dom";
 import { AuthProvider } from "./auth/auth.context";
 import { Footer, Header } from "./commons";
+import { DndProvider } from "react-dnd/dist/core";
+import { HTML5Backend } from "react-dnd-html5-backend";
 
 const App = () => (
   <AuthProvider>
     <Header />
     <div style={{ minHeight: "80vh" }}>
+      <DndProvider backend={HTML5Backend}>
         <Outlet />
+      </DndProvider>
     </div>
     <Footer />
   </AuthProvider>

frontend/src/layouts/SurveyLayout.tsx

@@ -10,6 +10,8 @@ import type {
 } from "../types";
 import { SpinnerIcon } from "../icons";
 import { surveyApi } from "../apis";
+import { DndProvider } from "react-dnd";
+import { HTML5Backend } from "react-dnd-html5-backend";
 
 type SurveyContextType = {
   survey: ICreateSurvey;
@@ -122,6 +124,7 @@ export const SurveyLayout = () => {
           응답결과
         </NavLink>
       </div>
+      <DndProvider backend={HTML5Backend}>
         <Outlet
           context={{
             survey,
@@ -131,6 +134,7 @@ export const SurveyLayout = () => {
             updateTitleComment,
           }}
         />
+      </DndProvider>
     </div>
   );
 };

frontend/src/surveys/Question.tsx

@@ -2,6 +2,9 @@ import React, { useState } from "react";
 import { getEnumKeyByEnumValue, QUESTION_TYPES } from "../commons";
 import { getElementByQuestionType } from "../helpers";
 import { IQuestionProps } from "../types";
+import { useDrag, useDrop } from "react-dnd";
+import { SurveyLayout } from "../layouts";
+import { surveyApi } from "../apis";
 
 const options = Object.entries(QUESTION_TYPES).map(([type, value]) => (
   <option key={type} value={value}>
@@ -9,6 +12,9 @@ const options = Object.entries(QUESTION_TYPES).map(([type, value]) => (
   </option>
 ));
 
+export interface DropResult {
+  name: string;
+}
 export const Question = ({
   element,
   handleQuestion,
@@ -16,7 +22,39 @@ export const Question = ({
 }: IQuestionProps) => {
   const [question, setQuestion] = useState(element);
   const isEditing = question.isEditing;
+  //
 
+  const [{ isDragging }, drag] = useDrag(() => ({
+    type: SurveyLayout.name,
+    item: { name: question.type },
+    end: (item, monitor) => {
+      const dropResult = monitor.getDropResult<DropResult>();
+      if (item && dropResult) {
+        alert(`You dropped ${item.name}`);
+      }
+    },
+    collect: (monitor) => ({
+      isDragging: monitor.isDragging(),
+      handlerId: monitor.getHandlerId(),
+    }),
+  }));
+
+  const [{ canDrop, isOver }, drop] = useDrop(() => ({
+    accept: SurveyLayout.name,
+    collect: (monitor) => ({
+      isOver: monitor.isOver(),
+      canDrop: monitor.canDrop(),
+    }),
+  }));
+
+  const isActive = canDrop && isOver;
+  let backgroundColor = "#222";
+  if (isActive) {
+    backgroundColor = "darkgreen";
+  } else if (canDrop) {
+    backgroundColor = "darkkhaki";
+  }
+  //
   async function handleEditComplete() {
     question.content.choices.map((choice) => {
       if (choice.text.trim() === "") {
@@ -71,9 +109,13 @@ export const Question = ({
   };
 
   return (
+    <div ref={drop} className="flex w-3/5 h-full justify-center">
       <div
+        ref={drag}
         style={{ borderColor: isEditing ? "red" : "#0A8A8A" }}
-      className="flex flex-col container w-4/5 h-auto border-2 items-center m-3 py-2 rounded-lg"
+        className={
+          "flex flex-col container w-full h-auto border-2 items-center m-3 py-2 rounded-lg cursor-move "
+        }
       >
         <div className="flex h-16 w-full place-content-center items-center">
           <input
@@ -150,5 +192,6 @@ export const Question = ({
           </div>
         </div>
       </div>
+    </div>
   );
 };