docu-list-rule페이지 수정

4 files changed, 84 insertions, 30 deletions

diff --git a/lib/docu-list-rule/combo-box-settings/table/combo-box-options-detail-sheet.tsx b/lib/docu-list-rule/combo-box-settings/table/combo-box-options-detail-sheet.tsx
index 286acfbf..7e81fdab 100644
--- a/lib/docu-list-rule/combo-box-settings/table/combo-box-options-detail-sheet.tsx
+++ b/lib/docu-list-rule/combo-box-settings/table/combo-box-options-detail-sheet.tsx
@@ -4,12 +4,16 @@ import * as React from "react"
 import { useReactTable, getCoreRowModel, getSortedRowModel, getFilteredRowModel, getPaginationRowModel } from "@tanstack/react-table"
 import { DataTableDetail } from "@/components/data-table/data-table-detail"
 import { DataTableAdvancedToolbarDetail } from "@/components/data-table/data-table-advanced-toolbar-detail"
+import { DragDropTable } from "@/lib/docu-list-rule/number-type-configs/table/drag-drop-table"
 import type { DataTableAdvancedFilterField, DataTableRowAction } from "@/types/table"
+import { DragEndEvent } from '@dnd-kit/core'
+import { arrayMove } from '@dnd-kit/sortable'
+import { toast } from "sonner"
 import {
   Sheet,
   SheetContent,
 } from "@/components/ui/sheet"
-import { getComboBoxOptions } from "@/lib/docu-list-rule/combo-box-settings/service"
+import { getComboBoxOptions, updateComboBoxOption } from "@/lib/docu-list-rule/combo-box-settings/service"
 import { getColumns } from "@/lib/docu-list-rule/combo-box-settings/table/combo-box-options-table-columns"
 import { ComboBoxOptionsEditSheet } from "@/lib/docu-list-rule/combo-box-settings/table/combo-box-options-edit-sheet"
 import { DeleteComboBoxOptionsDialog } from "@/lib/docu-list-rule/combo-box-settings/table/delete-combo-box-options-dialog"
@@ -21,6 +25,7 @@ type ComboBoxOption = {
   code: string
   description: string
   remark: string | null
+  sdq: number
   isActive: boolean
   createdAt: Date
   updatedAt: Date
@@ -57,7 +62,7 @@ export function ComboBoxOptionsDetailSheet({
             page: 1,
             perPage: 10,
             search: "",
-            sort: [{ id: "createdAt", desc: true }],
+            sort: [{ id: "sdq", desc: false }],
             filters: [],
             joinOperator: "and",
           })
@@ -90,6 +95,7 @@ export function ComboBoxOptionsDetailSheet({
       const result = await getComboBoxOptions(codeGroup.id, {
         page: 1,
         perPage: 10,
+        sort: [{ id: "sdq", desc: false }],
       })
       if (result.success && result.data) {
         const optionsWithIsActive = result.data.map(option => ({
@@ -123,7 +129,7 @@ export function ComboBoxOptionsDetailSheet({
     getFilteredRowModel: getFilteredRowModel(),
     getPaginationRowModel: getPaginationRowModel(),
     initialState: {
-      sorting: [{ id: "code", desc: false }],
+      sorting: [{ id: "sdq", desc: false }],
       pagination: {
         pageSize: 10,
       },
@@ -131,6 +137,66 @@ export function ComboBoxOptionsDetailSheet({
     getRowId: (originalRow) => String((originalRow as any).id),
   })
 
+  // 드래그 종료 핸들러
+  const handleDragEnd = React.useCallback(async (event: DragEndEvent) => {
+    const { active, over } = event
+    console.log("Drag end event:", { active, over })
+
+    if (active.id !== over?.id) {
+      const oldIndex = rawData.data.findIndex((item) => String(item.id) === active.id)
+      const newIndex = rawData.data.findIndex((item) => String(item.id) === over?.id)
+      console.log("Indices:", { oldIndex, newIndex })
+
+      if (oldIndex !== -1 && newIndex !== -1) {
+        const reorderedData = arrayMove(rawData.data, oldIndex, newIndex)
+        
+        // 새로운 순서로 sdq 값 업데이트
+        const updatedOptions = reorderedData.map((item, index) => ({
+          ...item,
+          sdq: index + 1
+        }))
+
+        // 로컬 상태 먼저 업데이트
+        setRawData(prev => ({ ...prev, data: updatedOptions }))
+
+        // 서버에 순서 업데이트 (Number Type Config와 같은 방식)
+        try {
+          // 모든 항목을 임시 값으로 먼저 업데이트
+          for (let i = 0; i < updatedOptions.length; i++) {
+            const option = updatedOptions[i]
+            await updateComboBoxOption({
+              id: option.id,
+              codeGroupId: option.codeGroupId,
+              code: option.code,
+              description: option.description,
+              remark: option.remark,
+              sdq: -(i + 1), // 임시 음수 값
+            })
+          }
+          
+          // 최종 순서로 업데이트
+          for (const option of updatedOptions) {
+            await updateComboBoxOption({
+              id: option.id,
+              codeGroupId: option.codeGroupId,
+              code: option.code,
+              description: option.description,
+              remark: option.remark,
+              sdq: option.sdq,
+            })
+          }
+          
+          toast.success("순서가 성공적으로 변경되었습니다.")
+        } catch (error) {
+          console.error("Error updating order:", error)
+          toast.error("순서 변경 중 오류가 발생했습니다.")
+          // 에러 시 원래 데이터로 복원
+          await refreshData()
+        }
+      }
+    }
+  }, [rawData.data, codeGroup, refreshData])
+
   if (!codeGroup) return null
 
   return (
@@ -151,12 +217,16 @@ export function ComboBoxOptionsDetailSheet({
           onSuccess={refreshData}
         />
 
-        <DataTableDetail table={table as any}>
+        <DragDropTable
+          table={table as any}
+          data={rawData.data}
+          onDragEnd={handleDragEnd}
+        >
           <DataTableAdvancedToolbarDetail
             table={table as any}
             filterFields={advancedFilterFields}
           />
-        </DataTableDetail>
+        </DragDropTable>
 
         <DeleteComboBoxOptionsDialog
           open={rowAction?.type === "delete"}
diff --git a/lib/docu-list-rule/combo-box-settings/table/combo-box-options-table-columns.tsx b/lib/docu-list-rule/combo-box-settings/table/combo-box-options-table-columns.tsx
index 17754331..cf770c33 100644
--- a/lib/docu-list-rule/combo-box-settings/table/combo-box-options-table-columns.tsx
+++ b/lib/docu-list-rule/combo-box-settings/table/combo-box-options-table-columns.tsx
@@ -25,6 +25,7 @@ interface ComboBoxOption {
   code: string
   description: string
   remark: string | null
+  sdq: number
   isActive?: boolean
   createdAt: Date
   updatedAt: Date
@@ -114,17 +115,17 @@ export function getColumns({ setRowAction }: GetColumnsProps): ColumnDef<ComboBo
   // ----------------------------------------------------------------
   const dataColumns: ColumnDef<ComboBoxOption>[] = [
     {
-      accessorKey: "projectCode",
+      accessorKey: "sdq",
       enableResizing: true,
       header: ({ column }) => (
-        <DataTableColumnHeaderSimple column={column} title="프로젝트 코드" />
+        <DataTableColumnHeaderSimple column={column} title="순서" />
       ),
       meta: {
-        excelHeader: "프로젝트 코드",
-        type: "text",
+        excelHeader: "순서",
+        type: "number",
       },
-      cell: ({ row }) => row.getValue("projectCode") ?? "",
-      minSize: 120
+      cell: ({ row }) => row.getValue("sdq") ?? "",
+      minSize: 50
     },
     {
       accessorKey: "code",
diff --git a/lib/docu-list-rule/combo-box-settings/table/combo-box-settings-table-columns.tsx b/lib/docu-list-rule/combo-box-settings/table/combo-box-settings-table-columns.tsx
index d41fe5ec..0775c1d2 100644
--- a/lib/docu-list-rule/combo-box-settings/table/combo-box-settings-table-columns.tsx
+++ b/lib/docu-list-rule/combo-box-settings/table/combo-box-settings-table-columns.tsx
@@ -91,19 +91,7 @@ export function getColumns({ onDetail }: GetColumnsProps): ColumnDef<typeof code
   // 3) 데이터 컬럼들
   // ----------------------------------------------------------------
   const dataColumns: ColumnDef<typeof codeGroups.$inferSelect>[] = [
-    {
-      accessorKey: "projectCode",
-      enableResizing: true,
-      header: ({ column }) => (
-        <DataTableColumnHeaderSimple column={column} title="프로젝트 코드" />
-      ),
-      meta: {
-        excelHeader: "프로젝트 코드",
-        type: "text",
-      },
-      cell: ({ row }) => row.getValue("projectCode") ?? "",
-      minSize: 120
-    },
+
     {
       accessorKey: "groupId",
       enableResizing: true,
diff --git a/lib/docu-list-rule/combo-box-settings/table/combo-box-settings-table.tsx b/lib/docu-list-rule/combo-box-settings/table/combo-box-settings-table.tsx
index 8e469149..fef4cf8e 100644
--- a/lib/docu-list-rule/combo-box-settings/table/combo-box-settings-table.tsx
+++ b/lib/docu-list-rule/combo-box-settings/table/combo-box-settings-table.tsx
@@ -66,12 +66,7 @@ export function ComboBoxSettingsTable({ promises }: ComboBoxSettingsTableProps)
     clearOnDefault: true,
   })
 
-  // 컴포넌트 마운트 후 그룹핑 설정
-  React.useEffect(() => {
-    if (rawData[0]?.data && table.getState().grouping.length === 0) {
-      table.setGrouping(["projectCode"])
-    }
-  }, [table, rawData])
+
 
   // 정렬 시 펼쳐진 상태 유지
   React.useEffect(() => {