Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

🚨 Fix(#326): ν…œν”Œλ¦Ώ 였λ₯˜ μˆ˜μ • #335

Merged
merged 4 commits into from
Dec 20, 2023
Merged

🚨 Fix(#326): ν…œν”Œλ¦Ώ 였λ₯˜ μˆ˜μ • #335

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
72a2645
🚨 Fix(#326): ν…œν”Œλ¦Ώ νŽ˜μ΄μ§€ QA
JeongWuk Dec 13, 2023
ca28145
🚨 Fix(#326): ν…œν”Œλ¦Ώ 였λ₯˜ μˆ˜μ •
JeongWuk Dec 16, 2023
4e27fbb
Merge branch 'main' of https://github.com/Team-Blitz-Steady/steady-cl…
JeongWuk Dec 16, 2023
c5cfade
Merge branch 'main' of https://github.com/Team-Blitz-Steady/steady-cl…
JeongWuk Dec 20, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
109 changes: 62 additions & 47 deletions src/app/(user-menu)/mypage/template/edit/[id]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -19,8 +20,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];
Expand All @@ -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({
Expand All @@ -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");
};

Expand All @@ -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);
};
Expand Down Expand Up @@ -140,42 +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={() => {
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>
)}
</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>
Expand Down
Loading