From 72a264580789fc5451fd7f8019fa0af0e37494fe Mon Sep 17 00:00:00 2001
From: Musix <ljw927@naver.com>
Date: Wed, 13 Dec 2023 19:08:40 +0900
Subject: [PATCH 1/2] =?UTF-8?q?=F0=9F=9A=A8=20Fix(#326):=20=ED=85=9C?=
 =?UTF-8?q?=ED=94=8C=EB=A6=BF=20=ED=8E=98=EC=9D=B4=EC=A7=80=20QA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../mypage/template/edit/[id]/page.tsx        | 37 ++++++++-----------
 1 file changed, 15 insertions(+), 22 deletions(-)

diff --git a/src/app/(user-menu)/mypage/template/edit/[id]/page.tsx b/src/app/(user-menu)/mypage/template/edit/[id]/page.tsx
index 61331d6d..1dbdb2f3 100644
--- a/src/app/(user-menu)/mypage/template/edit/[id]/page.tsx
+++ b/src/app/(user-menu)/mypage/template/edit/[id]/page.tsx
@@ -19,8 +19,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,7 +33,6 @@ const EditTemplatePage = () => {
 
   useEffect(() => {
     if (data) {
-      setCount(data.questions.length + 1);
       setQuestion(
         data.questions.map((item, index) => ({ id: index, value: item })),
       );
@@ -55,25 +53,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");
   };
 
@@ -157,16 +159,7 @@ const EditTemplatePage = () => {
                 {isModify && (
                   <div
                     className="cursor-pointer"
-                    onClick={() => {
-                      if (count === 2) {
-                        toast({
-                          description: "질문은 최소 1개 이상이어야 합니다.",
-                          variant: "red",
-                        });
-                      } else {
-                        removeQuestion(item.id);
-                      }
-                    }}
+                    onClick={() => removeQuestion(item.id)}
                   >
                     <Icon
                       name="cross"

From ca28145e3fbce6f8866ede12223de4c3208d1205 Mon Sep 17 00:00:00 2001
From: Musix <ljw927@naver.com>
Date: Sat, 16 Dec 2023 20:16:39 +0900
Subject: [PATCH 2/2] =?UTF-8?q?=F0=9F=9A=A8=20Fix(#326):=20=ED=85=9C?=
 =?UTF-8?q?=ED=94=8C=EB=A6=BF=20=EC=98=A4=EB=A5=98=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../mypage/template/edit/[id]/page.tsx        | 74 ++++++++++++-------
 1 file changed, 48 insertions(+), 26 deletions(-)

diff --git a/src/app/(user-menu)/mypage/template/edit/[id]/page.tsx b/src/app/(user-menu)/mypage/template/edit/[id]/page.tsx
index 1dbdb2f3..82021b0c 100644
--- a/src/app/(user-menu)/mypage/template/edit/[id]/page.tsx
+++ b/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>