1 files changed, 75 insertions, 5 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"}