compliance 조건부 질문 관련사항 수정

1 files changed, 142 insertions, 88 deletions

diff --git a/lib/compliance/questions/compliance-question-edit-sheet.tsx b/lib/compliance/questions/compliance-question-edit-sheet.tsx
index 064cafc1..e5fc6242 100644
--- a/lib/compliance/questions/compliance-question-edit-sheet.tsx
+++ b/lib/compliance/questions/compliance-question-edit-sheet.tsx
@@ -15,6 +15,14 @@ import {
   SheetTrigger,
 } from "@/components/ui/sheet";
 import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import {
   Form,
   FormControl,
   FormDescription,
@@ -81,6 +89,8 @@ export function ComplianceQuestionEditSheet({
   const [selectableParents, setSelectableParents] = React.useState<Array<{ id: number; questionNumber: string; questionText: string; questionType: string }>>([]);
   const [parentQuestionId, setParentQuestionId] = React.useState<number | null>(question.parentQuestionId || null);
   const [showOptionForm, setShowOptionForm] = React.useState(false);
+  const [showOptionsDeleteDialog, setShowOptionsDeleteDialog] = React.useState(false);
+  const [pendingQuestionTypeChange, setPendingQuestionTypeChange] = React.useState<string | null>(null);
 
   const form = useForm<QuestionFormData>({
     resolver: zodResolver(questionSchema),
@@ -156,6 +166,12 @@ export function ComplianceQuestionEditSheet({
     try {
       setIsLoading(true);
       
+      // 디버깅을 위한 로그
+      console.log("Edit form data:", data);
+      console.log("Current isConditional:", data.isConditional);
+      console.log("Current parentQuestionId:", parentQuestionId);
+      console.log("Current conditionalValue:", data.conditionalValue);
+      
       // 조건부 질문 관련 데이터 처리
       const updateData = {
         ...data,
@@ -166,6 +182,8 @@ export function ComplianceQuestionEditSheet({
       // isConditional과 parentQuestionId는 제거 (스키마에 없음)
       delete (updateData as any).isConditional;
       
+      console.log("Final updateData:", updateData);
+      
       await updateComplianceQuestion(question.id, updateData);
 
       toast.success("질문이 성공적으로 수정되었습니다.");
@@ -226,6 +244,51 @@ export function ComplianceQuestionEditSheet({
               )}
             />
 
+            {/* 필수 질문과 조건부 질문 체크박스 */}
+            <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>
+
             <FormField
               control={form.control}
               name="questionText"
@@ -250,7 +313,22 @@ export function ComplianceQuestionEditSheet({
               render={({ field }) => (
                 <FormItem>
                   <FormLabel>질문 유형</FormLabel>
-                  <Select onValueChange={field.onChange} defaultValue={(field.value || "").toUpperCase()}>
+                  <Select 
+                    onValueChange={(newValue) => {
+                      const currentType = field.value;
+                      const isCurrentSelectionType = [QUESTION_TYPES.RADIO, QUESTION_TYPES.CHECKBOX, QUESTION_TYPES.DROPDOWN].includes((currentType || "").toUpperCase() as any);
+                      const isNewSelectionType = [QUESTION_TYPES.RADIO, QUESTION_TYPES.CHECKBOX, QUESTION_TYPES.DROPDOWN].includes(newValue.toUpperCase() as any);
+                      
+                      // 선택형에서 비선택형으로 변경하고 기존 옵션이 있는 경우
+                      if (isCurrentSelectionType && !isNewSelectionType && options.length > 0) {
+                        setPendingQuestionTypeChange(newValue);
+                        setShowOptionsDeleteDialog(true);
+                      } else {
+                        field.onChange(newValue);
+                      }
+                    }} 
+                    defaultValue={(field.value || "").toUpperCase()}
+                  >
                     <FormControl>
                       <SelectTrigger>
                         <SelectValue placeholder="질문 유형을 선택하세요" />
@@ -401,93 +479,6 @@ export function ComplianceQuestionEditSheet({
               </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") && (
               <div className="space-y-2">
@@ -567,6 +558,69 @@ export function ComplianceQuestionEditSheet({
           </form>
         </Form>
       </SheetContent>
+      
+      {/* 옵션 삭제 확인 다이얼로그 */}
+      <Dialog open={showOptionsDeleteDialog} onOpenChange={setShowOptionsDeleteDialog}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>옵션 삭제 확인</DialogTitle>
+            <DialogDescription>
+              질문 유형을 변경하면 기존 옵션들이 모두 삭제됩니다. 계속하시겠습니까?
+            </DialogDescription>
+          </DialogHeader>
+          
+          <div className="py-4">
+            <div className="bg-muted p-4 rounded-lg">
+              <h4 className="font-medium mb-2">삭제될 옵션들:</h4>
+              {options.map((option, index) => (
+                <div key={option.id} className="text-sm text-muted-foreground mb-1">
+                  <strong>옵션 {index + 1}:</strong> {option.optionValue} - {option.optionText}
+                </div>
+              ))}
+            </div>
+          </div>
+
+          <DialogFooter>
+            <Button 
+              type="button" 
+              variant="outline" 
+              onClick={() => {
+                setShowOptionsDeleteDialog(false);
+                setPendingQuestionTypeChange(null);
+              }}
+            >
+              취소
+            </Button>
+            <Button 
+              type="button" 
+              variant="destructive" 
+              onClick={async () => {
+                try {
+                  // 옵션들을 삭제
+                  for (const option of options) {
+                    await deleteComplianceQuestionOption(option.id);
+                  }
+                  setOptions([]);
+                  
+                  // 질문 유형 변경
+                  if (pendingQuestionTypeChange) {
+                    form.setValue("questionType", pendingQuestionTypeChange);
+                  }
+                  
+                  toast.success("옵션이 삭제되고 질문 유형이 변경되었습니다.");
+                  setShowOptionsDeleteDialog(false);
+                  setPendingQuestionTypeChange(null);
+                } catch (error) {
+                  console.error("Error deleting options:", error);
+                  toast.error("옵션 삭제 중 오류가 발생했습니다.");
+                }
+              }}
+            >
+              옵션 삭제 및 유형 변경
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
     </Sheet>
   );
 }