div 사이즈 통일

frontend/src/surveys/Question.tsx

@@ -23,6 +23,8 @@ export const Question = ({
   const [question, setQuestion] = useState(element);
   const isEditing = question.isEditing;
 
+  const [questions, setQuestions] = useState();
+
   async function handleEditComplete() {
     question.content.choices.map((choice) => {
       if (choice.text.trim() === "") {
@@ -84,11 +86,12 @@ export const Question = ({
       const dropResult = monitor.getDropResult<DropResult>();
       if (item && dropResult) {
         alert(`You dropped ${item.name}`);
+      } else {
+        alert("you dropped wrong place");
       }
     },
     collect: (monitor) => ({
       isDragging: monitor.isDragging(),
-      handlerId: monitor.getHandlerId(),
     }),
   }));
 
@@ -98,19 +101,22 @@ export const Question = ({
       isOver: monitor.isOver(),
       canDrop: monitor.canDrop(),
     }),
-    hover(item, monitor) {
-      if (!isDragging) {
-        return;
-      }
-    },
   }));
 
   //
   return (
-    <div ref={drop} className="flex w-full h-full justify-center">
+    <div
+      ref={drop}
+      className="flex w-4/5 h-full justify-center"
+      style={{
+        border: isOver ? "dotted" : "",
+      }}
+    >
       <div
         ref={drag}
-        style={{ borderColor: isEditing ? "red" : "#0A8A8A" }}
+        style={{
+          borderColor: isEditing ? "red" : "#0A8A8A",
+        }}
         className={
           "flex flex-col container w-full h-auto border-2 items-center m-3 py-2 rounded-lg cursor-move "
         }

frontend/src/surveys/SurveyTitleAndComment.tsx

@@ -42,50 +42,52 @@ export const SurveyTitleAndComment = ({
   };
 
   return (
-    <div
-      className={`flex flex-col container w-4/5 h-auto border-2 items-center m-3 py-2 rounded-lg ${
-        disabled ? "border-themeColor" : "border-red-500"
-      }`}
-    >
-      <input
-        type="text"
-        name="title"
-        className="w-11/12 md:w-1/2 font-bold text-4xl text-center m-2 border-b-2"
-        placeholder="설문지 제목"
-        autoComplete="on"
-        value={state.title}
-        disabled={disabled}
-        onChange={handleChange}
-      />
-      <input
-        type="text"
-        name="comment"
-        className="w-11/12 md:w-1/2 font-bold text-1xl text-center m-2 border-b-2 resize-none"
-        placeholder="설문조사에 대한 설명을 입력해주세요"
-        autoComplete="on"
-        size={50}
-        value={state.comment}
-        disabled={disabled}
-        onChange={handleChange}
-      />
+    <div className="flex w-4/5 h-full justify-center">
+      <div
+        className={`flex flex-col container w-full h-auto border-2 items-center m-3 py-2 rounded-lg ${
+          disabled ? "border-themeColor" : "border-red-500"
+        }`}
+      >
+        <input
+          type="text"
+          name="title"
+          className="w-11/12 md:w-1/2 font-bold text-4xl text-center m-2 border-b-2"
+          placeholder="설문지 제목"
+          autoComplete="on"
+          value={state.title}
+          disabled={disabled}
+          onChange={handleChange}
+        />
+        <input
+          type="text"
+          name="comment"
+          className="w-11/12 md:w-1/2 font-bold text-1xl text-center m-2 border-b-2 resize-none"
+          placeholder="설문조사에 대한 설명을 입력해주세요"
+          autoComplete="on"
+          size={50}
+          value={state.comment}
+          disabled={disabled}
+          onChange={handleChange}
+        />
 
-      <div className="flex w-11/12 justify-end">
-        {disabled ? (
-          <>
-            <button type="button" className="px-1" onClick={onEdit}>
-              수정
-            </button>
-          </>
-        ) : (
-          <>
-            <button type="button" className="px-1" onClick={onCancel}>
-              취소
-            </button>
-            <button type="button" className="px-1" onClick={handleConfirm}>
-              확인
-            </button>
-          </>
-        )}
+        <div className="flex w-11/12 justify-end">
+          {disabled ? (
+            <>
+              <button type="button" className="px-1" onClick={onEdit}>
+                수정
+              </button>
+            </>
+          ) : (
+            <>
+              <button type="button" className="px-1" onClick={onCancel}>
+                취소
+              </button>
+              <button type="button" className="px-1" onClick={handleConfirm}>
+                확인
+              </button>
+            </>
+          )}
+        </div>
       </div>
     </div>
   );