From fefca6304eefea94f41057f9f934b0e19ceb54bb Mon Sep 17 00:00:00 2001 From: 0-Zz-ang Date: Fri, 22 Aug 2025 13:47:37 +0900 Subject: (박서영)Compliance 설문/응답 리스트 생성 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../compliance-question-create-dialog.tsx | 562 ++++++++++++++++++++ .../compliance-question-delete-dialog.tsx | 107 ++++ .../questions/compliance-question-edit-sheet.tsx | 572 +++++++++++++++++++++ .../compliance-questions-draggable-list.tsx | 157 ++++++ 4 files changed, 1398 insertions(+) create mode 100644 lib/compliance/questions/compliance-question-create-dialog.tsx create mode 100644 lib/compliance/questions/compliance-question-delete-dialog.tsx create mode 100644 lib/compliance/questions/compliance-question-edit-sheet.tsx create mode 100644 lib/compliance/questions/compliance-questions-draggable-list.tsx (limited to 'lib/compliance/questions') diff --git a/lib/compliance/questions/compliance-question-create-dialog.tsx b/lib/compliance/questions/compliance-question-create-dialog.tsx new file mode 100644 index 00000000..c0e050ab --- /dev/null +++ b/lib/compliance/questions/compliance-question-create-dialog.tsx @@ -0,0 +1,562 @@ +"use client"; + +import * as React from "react"; +import { useForm } from "react-hook-form"; +import { zodResolver } from "@hookform/resolvers/zod"; +import * as z from "zod"; +import { Button } from "@/components/ui/button"; +import { + Dialog, + DialogContent, + DialogDescription, + DialogFooter, + DialogHeader, + DialogTitle, + DialogTrigger, +} from "@/components/ui/dialog"; +import { + Form, + FormControl, + FormDescription, + FormField, + FormItem, + FormLabel, + FormMessage, +} from "@/components/ui/form"; +import { Input } from "@/components/ui/input"; +import { Textarea } from "@/components/ui/textarea"; +import { Checkbox } from "@/components/ui/checkbox"; +import { Badge } from "@/components/ui/badge"; +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from "@/components/ui/select"; +import { Plus, Trash2 } from "lucide-react"; +import { createComplianceQuestion, createComplianceQuestionOption, getComplianceQuestionsCount, getComplianceQuestions, getComplianceQuestionOptions } from "@/lib/compliance/services"; +import { QUESTION_TYPES } from "@/db/schema/compliance"; +import { toast } from "sonner"; +import { useRouter } from "next/navigation"; + +const questionSchema = z.object({ + questionNumber: z.string().min(1, "질문 번호를 입력하세요"), + questionText: z.string().min(1, "질문 내용을 입력하세요"), + questionType: z.string().min(1, "질문 유형을 선택하세요"), + isRequired: z.boolean(), + hasDetailText: z.boolean(), + hasFileUpload: z.boolean(), + conditionalValue: z.string().optional(), +}); + +type QuestionFormData = z.infer; + +interface ComplianceQuestionCreateDialogProps { + templateId: number; + onSuccess?: () => void; +} + +export function ComplianceQuestionCreateDialog({ + templateId, + onSuccess +}: ComplianceQuestionCreateDialogProps) { + const [open, setOpen] = React.useState(false); + const [isLoading, setIsLoading] = React.useState(false); + const router = useRouter(); + + const form = useForm({ + resolver: zodResolver(questionSchema), + defaultValues: { + questionNumber: "", + questionText: "", + questionType: "", + isRequired: false, + hasDetailText: false, + hasFileUpload: false, + conditionalValue: "", + }, + }); + + // 부모 질문 및 옵션 상태 + const [parentQuestionId, setParentQuestionId] = React.useState(""); + const [selectableParents, setSelectableParents] = React.useState>([]); + const [parentOptions, setParentOptions] = React.useState>([]); + + // 옵션 관리 상태 + const [options, setOptions] = React.useState>([]); + const [newOptionValue, setNewOptionValue] = React.useState(""); + const [newOptionText, setNewOptionText] = React.useState(""); + const [newOptionOther, setNewOptionOther] = React.useState(false); + const [showOptionForm, setShowOptionForm] = React.useState(false); + + // 선택형 질문인지 확인 + const isSelectionType = React.useMemo(() => { + const questionType = form.watch("questionType"); + return [QUESTION_TYPES.RADIO, QUESTION_TYPES.CHECKBOX, QUESTION_TYPES.DROPDOWN].includes((questionType || "").toUpperCase() as any); + }, [form.watch("questionType")]); + + // 시트/다이얼로그 열릴 때 부모 후보 로드 (같은 템플릿 내 선택형 질문만) + React.useEffect(() => { + if (!open) return; + (async () => { + try { + const qs = await getComplianceQuestions(templateId); + const filtered = (qs || []).filter((q: any) => [QUESTION_TYPES.RADIO, QUESTION_TYPES.CHECKBOX, QUESTION_TYPES.DROPDOWN].includes((q.questionType || "").toUpperCase())); + setSelectableParents(filtered); + } catch (e) { + console.error("load selectable parents error", e); + } + })(); + }, [open, templateId]); + + // 부모 선택 시 옵션 로드 + React.useEffect(() => { + if (!open) return; + (async () => { + if (!parentQuestionId) { setParentOptions([]); return; } + try { + const opts = await getComplianceQuestionOptions(Number(parentQuestionId)); + setParentOptions(opts.map((o: any) => ({ id: o.id, optionValue: o.optionValue, optionText: o.optionText }))); + } catch (e) { + console.error("load parent options error", e); + setParentOptions([]); + } + })(); + }, [open, parentQuestionId]); + + const onSubmit = async (data: QuestionFormData) => { + try { + setIsLoading(true); + + // 새로운 질문의 displayOrder는 기존 질문 개수 + 1 + const currentQuestionsCount = await getComplianceQuestionsCount(templateId); + + const newQuestion = await createComplianceQuestion({ + templateId, + ...data, + parentQuestionId: data.isConditional && parentQuestionId ? Number(parentQuestionId) : null, + displayOrder: currentQuestionsCount + 1, + }); + + // 선택형 질문이고 옵션이 있다면 옵션들도 생성 + if (isSelectionType && options.length > 0 && newQuestion) { + try { + // 옵션들을 순차적으로 생성 + for (let i = 0; i < options.length; i++) { + const option = options[i]; + await createComplianceQuestionOption({ + questionId: newQuestion.id, + optionValue: option.optionValue, + optionText: option.optionText, + allowsOtherInput: option.allowsOtherInput, + displayOrder: i + 1, + }); + } + } catch (optionError) { + console.error("Error creating options:", optionError); + toast.error("질문은 생성되었지만 옵션 생성 중 오류가 발생했습니다."); + } + } + + toast.success("질문이 성공적으로 추가되었습니다."); + setOpen(false); + form.reset(); + setOptions([]); + setShowOptionForm(false); + + // 페이지 새로고침 + router.refresh(); + + if (onSuccess) { + onSuccess(); + } + } catch (error) { + console.error("Error creating question:", error); + + // 중복 질문번호 오류 처리 + if (error instanceof Error && error.message === "DUPLICATE_QUESTION_NUMBER") { + form.setError("questionNumber", { + type: "manual", + message: "이미 사용 중인 질문번호입니다." + }); + toast.error("이미 사용 중인 질문번호입니다."); + } else { + toast.error("질문 추가 중 오류가 발생했습니다."); + } + } finally { + setIsLoading(false); + } + }; + + return ( + + + + + + + 새 질문 추가 + + 템플릿에 새로운 질문을 추가합니다. + + + +
+ + ( + + 질문 번호 + + + + + + )} + /> + + ( + + 질문 내용 + +