✨ Feat(#309): 템플릿 페이지 기능 추가

Team-Blitz-Steady · Dec 1, 2023 · 7f32d6d · 7f32d6d
1 parent 009fe24
commit 7f32d6d
Showing 1 changed file with 55 additions and 39 deletions.
diff --git a/src/app/(user-menu)/mypage/template/create/page.tsx b/src/app/(user-menu)/mypage/template/create/page.tsx
@@ -1,8 +1,9 @@
 "use client";
 
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { useRouter } from "next/navigation";
 import { useToast } from "@/components/ui/use-toast";
+import { Command } from "cmdk";
 import { createTemplate } from "@/services/template/createTemplate";
 import Button, { buttonSize } from "@/components/_common/Button";
 import Icon from "@/components/_common/Icon";
@@ -11,7 +12,6 @@ import InputModal from "@/components/_common/Modal/InputModal";
 const CreateTemplatePage = () => {
   const [question, setQuestion] = useState([{ id: 1, value: "" }]);
   const [content, setContent] = useState("");
-  const [count, setCount] = useState(2);
   const [isModalOpen, setIsModalOpen] = useState(false);
   const { toast } = useToast();
   const router = useRouter();
@@ -38,16 +38,20 @@ const CreateTemplatePage = () => {
   };
 
   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));
   };
 
@@ -78,6 +82,22 @@ const CreateTemplatePage = () => {
     router.push("/mypage/template");
   };
 
+  const handleKeyDown = (event: React.KeyboardEvent) => {
+    if (event.nativeEvent.isComposing) {
+      return;
+    }
+    if (event.key === "Enter") {
+      addQuestion();
+    }
+  };
+
+  useEffect(() => {
+    const curInput = question.reduce((prev, cur) => {
+      return cur.id > prev.id ? cur : prev;
+    });
+    document.getElementById(`question-${curInput.id}`)?.focus();
+  }, [question.length]);
+
   return (
     <div className="flex gap-30 max-sm:w-400 sm:w-500 md:w-400 lg:w-600 xl:w-750">
       <div className="w-full">
@@ -93,39 +113,35 @@ const CreateTemplatePage = () => {
         <div className="h-5 w-full bg-st-gray-400"></div>
         <div className="h-650 w-full overflow-y-scroll">
           <div className="flex w-full 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}
-                  className="h-50 w-full text-15 text-st-black outline-none lg:text-20"
-                  onChange={(event) => handleInputChange(event, item.id)}
-                />
-                <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 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}
+                    className="h-50 w-full text-15 text-st-black outline-none lg:text-20"
+                    onChange={(event) => handleInputChange(event, item.id)}
                   />
+
+                  <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>
+              </Command>
             ))}
           </div>
         </div>