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..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"; @@ -19,8 +20,7 @@ interface QuestionType { const EditTemplatePage = () => { const [question, setQuestion] = useState([]); - 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 = () => {
- {question.map((item, index) => ( -
( + -
- handleInputChange(event, item.id)} - className="h-50 w-5/6 bg-st-white text-15 text-st-black outline-none lg:text-20" - /> - {isModify && ( -
{ - if (count === 2) { - toast({ - description: "질문은 최소 1개 이상이어야 합니다.", - variant: "red", - }); - } else { - removeQuestion(item.id); - } - }} - > - -
- )} -
+
+
+ handleInputChange(event, item.id)} + className="h-50 w-5/6 bg-st-white text-15 text-st-black outline-none lg:text-20" + /> + {isModify && ( +
removeQuestion(item.id)} + > + +
+ )} +
+ ))}