🚨 Fix(#326): 템플릿 오류 수정

src/app/(user-menu)/mypage/template/edit/[id]/page.tsx

@@ -4,6 +4,7 @@ import { useEffect, useState } from "react";
 import { usePathname, useRouter } from "next/navigation";
 import { toast } from "@/components/ui/use-toast";
 import { useQuery } from "@tanstack/react-query";
+import { Command } from "cmdk";
 import deleteTemplate from "@/services/template/deleteTemplate";
 import getTemplateDetail from "@/services/template/getTemplateDetail";
 import updateTemplate from "@/services/template/updateTemplate";
@@ -39,6 +40,15 @@ const EditTemplatePage = () => {
     }
   }, [data]);
 
+  useEffect(() => {
+    if (question.length !== 0) {
+      const curInput = question.reduce((prev, cur) => {
+        return cur.id > prev.id ? cur : prev;
+      });
+      document.getElementById(`question-${curInput.id}`)?.focus();
+    }
+  }, [question.length]);
+
   const handleAddQuestion = (content: string) => {
     if (content === "") {
       toast({
@@ -98,6 +108,15 @@ const EditTemplatePage = () => {
     router.push("/mypage/template");
   };
 
+  const handleKeyDown = (event: React.KeyboardEvent) => {
+    if (event.nativeEvent.isComposing) {
+      return;
+    }
+    if (event.key === "Enter") {
+      addQuestion();
+    }
+  };
+
   const openModal = () => {
     setIsModalOpen(true);
   };
@@ -142,33 +161,36 @@ const EditTemplatePage = () => {
         <div className="h-5 w-full bg-st-gray-400"></div>
         <div className="h-650 w-full overflow-x-hidden overflow-y-scroll">
           <div className="flex flex-col gap-20 p-20">
-            {question.map((item, index) => (
-              <div
-                key={index}
-                className="flex h-50 w-full items-center gap-20 rounded-10 p-10 shadow-lg lg:h-70 lg:gap-30"
+            {question.map((item) => (
+              <Command
+                key={item.id}
+                onKeyDown={handleKeyDown}
               >
-                <div className="h-40 w-7 rounded-full bg-st-skyblue-50 lg:h-60 lg:w-10"></div>
-                <input
-                  type="text"
-                  placeholder="질문을 입력해 주세요."
-                  value={item.value}
-                  disabled={!isModify}
-                  onChange={(event) => handleInputChange(event, item.id)}
-                  className="h-50 w-5/6 bg-st-white text-15 text-st-black outline-none lg:text-20"
-                />
-                {isModify && (
-                  <div
-                    className="cursor-pointer"
-                    onClick={() => removeQuestion(item.id)}
-                  >
-                    <Icon
-                      name="cross"
-                      size={20}
-                      color="w-15 h-15 lg:w-20 lg:h-20"
-                    />
-                  </div>
-                )}
-              </div>
+                <div className="flex h-50 w-full items-center gap-20 rounded-10 p-10 shadow-lg lg:h-70 lg:gap-30">
+                  <div className="h-40 w-7 rounded-full bg-st-skyblue-50 lg:h-60 lg:w-10"></div>
+                  <input
+                    id={`question-${item.id}`}
+                    type="text"
+                    placeholder="질문을 입력해 주세요."
+                    value={item.value}
+                    disabled={!isModify}
+                    onChange={(event) => handleInputChange(event, item.id)}
+                    className="h-50 w-5/6 bg-st-white text-15 text-st-black outline-none lg:text-20"
+                  />
+                  {isModify && (
+                    <div
+                      className="cursor-pointer"
+                      onClick={() => removeQuestion(item.id)}
+                    >
+                      <Icon
+                        name="cross"
+                        size={20}
+                        color="w-15 h-15 lg:w-20 lg:h-20"
+                      />
+                    </div>
+                  )}
+                </div>
+              </Command>
             ))}
           </div>
         </div>