Merge pull request #335 from Team-Blitz-Steady/fix/#326/template

🚨 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";
@@ -19,8 +20,7 @@ interface QuestionType {
 
 const EditTemplatePage = () => {
   const [question, setQuestion] = useState<QuestionType[]>([]);
-  const [count, setCount] = useState(1);
-  const [content, setContent] = useState("");
+  const [content, setContent] = useState("0");
   const [isModalOpen, setIsModalOpen] = useState(false);
   const pathname = usePathname();
   const templateId = pathname.split("/")[4];
@@ -34,13 +34,21 @@ const EditTemplatePage = () => {
 
   useEffect(() => {
     if (data) {
-      setCount(data.questions.length + 1);
       setQuestion(
         data.questions.map((item, index) => ({ id: index, value: item })),
       );
     }
   }, [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({
@@ -55,25 +63,29 @@ const EditTemplatePage = () => {
   };
 
   const addQuestion = () => {
-    const newQuestion = {
-      id: count,
-      value: "",
-    };
-    setQuestion((prev) => [...prev, newQuestion]);
-    setCount(count + 1);
+    setQuestion((prev) => [
+      ...prev,
+      { id: prev[prev.length - 1].id + 1, value: "" },
+    ]);
   };
 
   const removeQuestion = (id: number) => {
-    setCount(count - 1);
+    if (question.length === 1) {
+      toast({
+        description: "질문은 최소 1개 이상이어야 합니다.",
+        variant: "red",
+      });
+      return;
+    }
     setQuestion((prev) => prev.filter((item) => item.id !== id));
   };
 
-  const handlePostTemplate = (title: string) => {
+  const handlePostTemplate = async (title: string) => {
     const json = {
       title: title,
       questions: question.map((item) => item.value),
     };
-    updateTemplate(data?.id.toString() as string, json);
+    await updateTemplate(data?.id.toString() as string, json);
     router.push("/mypage/template");
   };
 
@@ -96,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);
   };
@@ -140,42 +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={() => {
-                      if (count === 2) {
-                        toast({
-                          description: "질문은 최소 1개 이상이어야 합니다.",
-                          variant: "red",
-                        });
-                      } else {
-                        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>