diff --git a/src/app/(user-menu)/mypage/template/create/page.tsx b/src/app/(user-menu)/mypage/template/create/page.tsx index 069691e2..5b51dde6 100644 --- 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 (