(박서영) docu-list-rule detail sheet 컴포넌트 추가 및 검색 필터 기능 오류 수정

1 files changed, 23 insertions, 30 deletions

diff --git a/lib/docu-list-rule/document-class/table/document-class-table.tsx b/lib/docu-list-rule/document-class/table/document-class-table.tsx
index e3daac8a..c66a1395 100644
--- a/lib/docu-list-rule/document-class/table/document-class-table.tsx
+++ b/lib/docu-list-rule/document-class/table/document-class-table.tsx
@@ -6,12 +6,11 @@ import { useDataTable } from "@/hooks/use-data-table"
 import { DataTable } from "@/components/data-table/data-table"
 import { DataTableAdvancedToolbar } from "@/components/data-table/data-table-advanced-toolbar"
 import type { DataTableAdvancedFilterField, DataTableRowAction } from "@/types/table"
-import { getDocumentClassCodeGroups } from "@/lib/docu-list-rule/document-class/service"
-import { getColumns } from "./document-class-table-columns"
-import { DocumentClassEditSheet } from "./document-class-edit-sheet"
-import { DocumentClassOptionsTable } from "./document-class-options-table"
-import { DocumentClassTableToolbarActions } from "./document-class-table-toolbar"
-import { DeleteDocumentClassDialog } from "./delete-document-class-dialog"
+import { getColumns } from "@/lib/docu-list-rule/document-class/table/document-class-table-columns"
+import { DocumentClassEditSheet } from "@/lib/docu-list-rule/document-class/table/document-class-edit-sheet"
+import { DocumentClassOptionsDetailSheet } from "@/lib/docu-list-rule/document-class/table/document-class-options-detail-sheet"
+import { DocumentClassTableToolbarActions } from "@/lib/docu-list-rule/document-class/table/document-class-table-toolbar"
+import { DeleteDocumentClassDialog } from "@/lib/docu-list-rule/document-class/table/delete-document-class-dialog"
 import { documentClasses } from "@/db/schema/docu-list-rule"
 
 interface DocumentClassTableProps {
@@ -22,6 +21,7 @@ export function DocumentClassTable({ promises }: DocumentClassTableProps) {
   const router = useRouter()
   const rawData = React.use(promises!)
   const [rowAction, setRowAction] = React.useState<DataTableRowAction<typeof documentClasses.$inferSelect> | null>(null)
+  const [isDetailSheetOpen, setIsDetailSheetOpen] = React.useState(false)
   const [selectedDocumentClass, setSelectedDocumentClass] = React.useState<typeof documentClasses.$inferSelect | null>(null)
 
   const refreshData = React.useCallback(() => {
@@ -29,7 +29,13 @@ export function DocumentClassTable({ promises }: DocumentClassTableProps) {
     router.refresh()
   }, [router])
 
-  const columns = React.useMemo(() => getColumns({ setRowAction }), [setRowAction])
+  // Detail 버튼 클릭 핸들러
+  const handleDetail = React.useCallback((documentClass: typeof documentClasses.$inferSelect) => {
+    setSelectedDocumentClass(documentClass)
+    setIsDetailSheetOpen(true)
+  }, [])
+
+  const columns = React.useMemo(() => getColumns({ setRowAction, onDetail: handleDetail }), [setRowAction, handleDetail])
 
   // 고급 필터 필드 설정
   const advancedFilterFields: DataTableAdvancedFilterField<typeof documentClasses.$inferSelect>[] = [
@@ -40,14 +46,12 @@ export function DocumentClassTable({ promises }: DocumentClassTableProps) {
   ]
 
   const { table } = useDataTable({
-    data: rawData[0].data as any,
+    data: rawData[0].data as typeof documentClasses.$inferSelect[],
     columns,
     pageCount: rawData[0].pageCount,
     enablePinning: true,
     enableAdvancedFilter: true,
-    manualSorting: false,
     initialState: {
-      sorting: [{ id: "createdAt", desc: true }],
       columnPinning: { right: ["actions"] },
     },
     getRowId: (originalRow) => String(originalRow.id),
@@ -66,26 +70,15 @@ export function DocumentClassTable({ promises }: DocumentClassTableProps) {
         </DataTableAdvancedToolbar>
       </DataTable>
 
-      {/* 구분선 */}
-      <div className="border-t border-border my-6"></div>
-
-      {/* Document Class 옵션 관리 제목 */}
-      <div className="flex items-center justify-between space-y-2">
-        <div>
-          <div className="flex items-center gap-2">
-            <h2 className="text-2xl font-bold tracking-tight">Document Class 옵션 관리</h2>
-          </div>
-          <p className="text-muted-foreground">
-            Document Class 옵션들을 관리합니다.
-          </p>
-        </div>
-      </div>
-
-      {/* Document Class 옵션 테이블 */}
-      <DocumentClassOptionsTable 
-        selectedDocumentClass={selectedDocumentClass}
-        documentClasses={rawData[0].data || []}
-        onSelectDocumentClass={setSelectedDocumentClass}
+      {/* Detail 시트 */}
+      <DocumentClassOptionsDetailSheet
+        open={isDetailSheetOpen}
+        onOpenChange={setIsDetailSheetOpen}
+        documentClass={selectedDocumentClass}
+        onSuccess={() => {
+          setIsDetailSheetOpen(false)
+          setSelectedDocumentClass(null)
+        }}
       />
 
       <DeleteDocumentClassDialog