순서 수정

frontend/src/surveys/Question.tsx

@@ -22,39 +22,7 @@ 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() === "") {
@@ -107,9 +75,39 @@ export const Question = ({
     setQuestion({ ...question, isEditing: true });
     handleQuestion({ ...question, isEditing: true });
   };
+  //
 
+  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(),
+    }),
+    hover(item, monitor) {
+      if (!isDragging) {
+        return;
+      }
+    },
+  }));
+
+  //
   return (
-    <div ref={drop} className="flex w-3/5 h-full justify-center">
+    <div ref={drop} className="flex w-full h-full justify-center">
       <div
         ref={drag}
         style={{ borderColor: isEditing ? "red" : "#0A8A8A" }}