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 = () => {
- {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 && ( -
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)} + > + +
+ )} +
+ ))}