summaryrefslogtreecommitdiff
path: root/lib/compliance/questions/compliance-question-create-dialog.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'lib/compliance/questions/compliance-question-create-dialog.tsx')
-rw-r--r--lib/compliance/questions/compliance-question-create-dialog.tsx173
1 files changed, 80 insertions, 93 deletions
diff --git a/lib/compliance/questions/compliance-question-create-dialog.tsx b/lib/compliance/questions/compliance-question-create-dialog.tsx
index c0e050ab..b05c2e0d 100644
--- a/lib/compliance/questions/compliance-question-create-dialog.tsx
+++ b/lib/compliance/questions/compliance-question-create-dialog.tsx
@@ -45,9 +45,16 @@ const questionSchema = z.object({
questionText: z.string().min(1, "질문 내용을 입력하세요"),
questionType: z.string().min(1, "질문 유형을 선택하세요"),
isRequired: z.boolean(),
+ isConditional: z.boolean(),
hasDetailText: z.boolean(),
hasFileUpload: z.boolean(),
conditionalValue: z.string().optional(),
+}).refine((data) => {
+ // 필수 질문이거나 조건부 질문이어야 함
+ return data.isRequired || data.isConditional;
+}, {
+ message: "필수 질문 또는 조건부 질문 중 하나는 선택해야 합니다.",
+ path: ["isRequired", "isConditional"]
});
type QuestionFormData = z.infer<typeof questionSchema>;
@@ -72,6 +79,7 @@ export function ComplianceQuestionCreateDialog({
questionText: "",
questionType: "",
isRequired: false,
+ isConditional: false,
hasDetailText: false,
hasFileUpload: false,
conditionalValue: "",
@@ -132,10 +140,16 @@ export function ComplianceQuestionCreateDialog({
// 새로운 질문의 displayOrder는 기존 질문 개수 + 1
const currentQuestionsCount = await getComplianceQuestionsCount(templateId);
+ // 디버깅을 위한 로그
+ console.log("Form data:", data);
+ console.log("isConditional:", form.watch("isConditional"));
+ console.log("parentQuestionId:", parentQuestionId);
+ console.log("Final parentQuestionId:", form.watch("isConditional") && parentQuestionId ? Number(parentQuestionId) : null);
+
const newQuestion = await createComplianceQuestion({
templateId,
...data,
- parentQuestionId: data.isConditional && parentQuestionId ? Number(parentQuestionId) : null,
+ parentQuestionId: form.watch("isConditional") && parentQuestionId ? Number(parentQuestionId) : null,
displayOrder: currentQuestionsCount + 1,
});
@@ -204,9 +218,13 @@ export function ComplianceQuestionCreateDialog({
템플릿에 새로운 질문을 추가합니다.
</DialogDescription>
</DialogHeader>
+
+
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+
+
<FormField
control={form.control}
name="questionNumber"
@@ -221,6 +239,58 @@ export function ComplianceQuestionCreateDialog({
)}
/>
+ {/* 필수 질문과 조건부 질문 체크박스 */}
+ <div className="grid grid-cols-2 gap-4">
+ <FormField
+ control={form.control}
+ name="isRequired"
+ render={({ field }) => (
+ <FormItem className="flex flex-row items-start space-x-3 space-y-0">
+ <FormControl>
+ <Checkbox
+ checked={field.value}
+ onCheckedChange={field.onChange}
+ />
+ </FormControl>
+ <div className="space-y-1 leading-none">
+ <FormLabel>필수 질문</FormLabel>
+ <FormDescription>
+ 응답자가 반드시 답변해야 하는 질문
+ </FormDescription>
+ </div>
+ </FormItem>
+ )}
+ />
+
+ <FormField
+ control={form.control}
+ name="isConditional"
+ render={({ field }) => (
+ <FormItem className="flex flex-row items-start space-x-3 space-y-0">
+ <FormControl>
+ <Checkbox
+ checked={field.value}
+ onCheckedChange={field.onChange}
+ />
+ </FormControl>
+ <div className="space-y-1 leading-none">
+ <FormLabel>조건부 질문</FormLabel>
+ <FormDescription>
+ 특정 조건에 따라 표시되는 질문
+ </FormDescription>
+ </div>
+ </FormItem>
+ )}
+ />
+ </div>
+
+ {/* 유효성 검사 에러 메시지 */}
+ {(form.formState.errors.isRequired || form.formState.errors.isConditional) && (
+ <div className="text-sm text-destructive">
+ {form.formState.errors.isRequired?.message || form.formState.errors.isConditional?.message || "필수 질문 또는 조건부 질문 중 하나는 선택해야 합니다."}
+ </div>
+ )}
+
<FormField
control={form.control}
name="questionText"
@@ -231,6 +301,7 @@ export function ComplianceQuestionCreateDialog({
<Textarea
placeholder="질문 내용을 입력하세요"
className="min-h-[100px]"
+ disabled={!form.watch("isRequired") && !form.watch("isConditional")}
{...field}
/>
</FormControl>
@@ -245,7 +316,7 @@ export function ComplianceQuestionCreateDialog({
render={({ field }) => (
<FormItem>
<FormLabel>질문 유형</FormLabel>
- <Select onValueChange={field.onChange} defaultValue={field.value}>
+ <Select onValueChange={field.onChange} defaultValue={field.value} disabled={!form.watch("isRequired") && !form.watch("isConditional")}>
<FormControl>
<SelectTrigger>
<SelectValue placeholder="질문 유형을 선택하세요" />
@@ -266,13 +337,14 @@ export function ComplianceQuestionCreateDialog({
{/* 옵션 관리 (선택형 질문일 때만) */}
{isSelectionType && (
- <div className="space-y-3">
+ <div className={`space-y-3 ${(!form.watch("isRequired") && !form.watch("isConditional")) ? "opacity-50 pointer-events-none" : ""}`}>
<div className="flex items-center justify-between">
<div className="text-sm font-medium">옵션 관리</div>
<Button
type="button"
variant="outline"
size="sm"
+ disabled={!form.watch("isRequired") && !form.watch("isConditional")}
onClick={() => {
setNewOptionValue("");
setNewOptionText("");
@@ -386,95 +458,7 @@ export function ComplianceQuestionCreateDialog({
</div>
)}
- {/* 조건부 질문 체크박스 */}
-
-
- <div className="grid grid-cols-3 gap-4">
- <FormField
- control={form.control}
- name="isRequired"
- render={({ field }) => (
- <FormItem className="flex flex-row items-start space-x-3 space-y-0">
- <FormControl>
- <Checkbox
- checked={field.value}
- onCheckedChange={field.onChange}
- />
- </FormControl>
- <div className="space-y-1 leading-none">
- <FormLabel>필수 질문</FormLabel>
- <FormDescription>
- 응답자가 반드시 답변해야 하는 질문
- </FormDescription>
- </div>
- </FormItem>
- )}
- />
-
- <FormField
- control={form.control}
- name="hasDetailText"
- render={({ field }) => (
- <FormItem className="flex flex-row items-start space-x-3 space-y-0">
- <FormControl>
- <Checkbox
- checked={field.value}
- onCheckedChange={field.onChange}
- />
- </FormControl>
- <div className="space-y-1 leading-none">
- <FormLabel>상세 설명</FormLabel>
- <FormDescription>
- 추가 설명 입력 가능
- </FormDescription>
- </div>
- </FormItem>
- )}
- />
-
- <FormField
- control={form.control}
- name="hasFileUpload"
- render={({ field }) => (
- <FormItem className="flex flex-row items-start space-x-3 space-y-0">
- <FormControl>
- <Checkbox
- checked={field.value}
- onCheckedChange={field.onChange}
- />
- </FormControl>
- <div className="space-y-1 leading-none">
- <FormLabel>파일 업로드</FormLabel>
- <FormDescription>
- 파일 첨부 가능
- </FormDescription>
- </div>
- </FormItem>
- )}
- />
- </div>
-
- {/* 조건부 질문 체크박스 */}
- <FormField
- control={form.control}
- name="isConditional"
- render={({ field }) => (
- <FormItem className="flex flex-row items-start space-x-3 space-y-0">
- <FormControl>
- <Checkbox
- checked={field.value}
- onCheckedChange={field.onChange}
- />
- </FormControl>
- <div className="space-y-1 leading-none">
- <FormLabel>조건부 질문</FormLabel>
- <FormDescription>
- 특정 조건에 따라 표시되는 질문
- </FormDescription>
- </div>
- </FormItem>
- )}
- />
+
{/* 조건부 질문일 때만 부모 질문과 조건값 표시 */}
{form.watch("isConditional") && (
@@ -550,7 +534,10 @@ export function ComplianceQuestionCreateDialog({
>
취소
</Button>
- <Button type="submit" disabled={isLoading}>
+ <Button
+ type="submit"
+ disabled={isLoading || (!form.watch("isRequired") && !form.watch("isConditional"))}
+ >
{isLoading ? "추가 중..." : "질문 추가"}
</Button>
</DialogFooter>
generated by cgit v1.2.3 (git 2.39.1) at 2025-12-07 19:43:17 +0000