From bac0228d21b7195065e9cddcc327ae33659c7bcc Mon Sep 17 00:00:00 2001
From: dujinkim <dujin.kim@dtsolution.co.kr>
Date: Sun, 1 Jun 2025 13:52:21 +0000
Subject: (대표님) 20250601까지 작업사항
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 lib/items/table/items-table.tsx | 189 +++++++++++++++++++---------------------
 1 file changed, 92 insertions(+), 97 deletions(-)

(limited to 'lib/items/table/items-table.tsx')

diff --git a/lib/items/table/items-table.tsx b/lib/items/table/items-table.tsx
index c05b4348..92f805eb 100644
--- a/lib/items/table/items-table.tsx
+++ b/lib/items/table/items-table.tsx
@@ -22,6 +22,7 @@ import { getColumns } from "./items-table-columns"
 import { ItemsTableToolbarActions } from "./items-table-toolbar-actions"
 import { UpdateItemSheet } from "./update-item-sheet"
 import { DeleteItemsDialog } from "./delete-items-dialog"
+import { ViewModeToggle } from "@/components/data-table/view-mode-toggle"
 
 interface ItemsTableProps {
   promises?: Promise<
@@ -71,7 +72,7 @@ export function ItemsTable({ promises }: ItemsTableProps) {
       id: "itemName",
       label: "자재그룹이름",
       type: "text",
-    }, 
+    },
     {
       id: "description",
       label: "상세",
@@ -115,13 +116,13 @@ export function ItemsTable({ promises }: ItemsTableProps) {
   ]
 
   // 확장된 useDataTable 훅 사용 (pageSize 기반 자동 전환)
-  const { 
-    table, 
-    infiniteScroll, 
-    isInfiniteMode, 
+  const {
+    table,
+    infiniteScroll,
+    isInfiniteMode,
     effectivePageSize,
     handlePageSizeChange,
-    urlState 
+    urlState
   } = useDataTable({
     data,
     columns,
@@ -154,98 +155,92 @@ export function ItemsTable({ promises }: ItemsTableProps) {
   }
 
   return (
-    <div className="w-full space-y-2.5">
-    
-      {/* <div className="flex items-center justify-between">
-        <div className="flex items-center gap-2">
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={handleRefresh}
-            disabled={isInfiniteMode && infiniteScroll?.isLoading}
-          >
-            <RotateCcw className="h-4 w-4 mr-2" />
-            새로고침
-          </Button>
+    <div className="w-full space-y-2.5 overflow-x-auto" style={{maxWidth:'100wv'}}>
+
+        {/* 모드 토글 & 새로고침 */}
+        <div className="flex items-center justify-between">
+          <ViewModeToggle
+            isInfiniteMode={isInfiniteMode}
+            onSwitch={handlePageSizeChange}   // ← ViewModeToggle에 prop 추가
+          />
         </div>
-      </div> */}
-
-      {/* 에러 상태 (무한 스크롤 모드) */}
-      {isInfiniteMode && infiniteScroll?.error && (
-        <Alert variant="destructive">
-          <AlertDescription>
-            데이터를 불러오는 중 오류가 발생했습니다.
-            <Button
-              variant="link"
-              size="sm"
-              onClick={() => infiniteScroll.reset()}
-              className="ml-2 p-0 h-auto"
-            >
-              다시 시도
-            </Button>
-          </AlertDescription>
-        </Alert>
-      )}
-
-      {/* 로딩 상태가 아닐 때만 테이블 렌더링 */}
-      {!(isInfiniteMode && infiniteScroll?.isLoading && infiniteScroll?.isEmpty) ? (
-        <>
-          {/* 도구 모음 */}
-          <DataTableAdvancedToolbar
-            table={table}
-            filterFields={advancedFilterFields}
-            shallow={false}
-          >
-            <ItemsTableToolbarActions table={table} />
-          </DataTableAdvancedToolbar>
-
-          {/* 테이블 렌더링 */}
-          {isInfiniteMode ? (
-            // 무한 스크롤 모드: InfiniteDataTable 사용 (자체 페이지네이션 없음)
-            <InfiniteDataTable
-              table={table}
-              hasNextPage={infiniteScroll?.hasNextPage || false}
-              isLoadingMore={infiniteScroll?.isLoadingMore || false}
-              onLoadMore={infiniteScroll?.loadMore}
-              totalCount={infiniteScroll?.totalCount}
-              isEmpty={infiniteScroll?.isEmpty || false}
-              compact={false}
-              autoSizeColumns={true}
-            />
-          ) : (
-            // 페이지네이션 모드: DataTable 사용 (내장 페이지네이션 활용)
-            <DataTable 
+
+        {/* 에러 상태 (무한 스크롤 모드) */}
+        {isInfiniteMode && infiniteScroll?.error && (
+          <Alert variant="destructive">
+            <AlertDescription>
+              데이터를 불러오는 중 오류가 발생했습니다.
+              <Button
+                variant="link"
+                size="sm"
+                onClick={() => infiniteScroll.reset()}
+                className="ml-2 p-0 h-auto"
+              >
+                다시 시도
+              </Button>
+            </AlertDescription>
+          </Alert>
+        )}
+
+        {/* 로딩 상태가 아닐 때만 테이블 렌더링 */}
+        {!(isInfiniteMode && infiniteScroll?.isLoading && infiniteScroll?.isEmpty) ? (
+          <>
+            {/* 도구 모음 */}
+            <DataTableAdvancedToolbar
               table={table}
-              compact={false}
-              autoSizeColumns={true}
-            />
-          )}
-        </>
-      ) : (
-        /* 로딩 스켈레톤 (무한 스크롤 초기 로딩) */
-        <div className="space-y-3">
-          <div className="text-sm text-muted-foreground mb-4">
-            무한 스크롤 모드로 데이터를 로드하고 있습니다...
+              filterFields={advancedFilterFields}
+              shallow={false}
+            >
+              <ItemsTableToolbarActions table={table} />
+            </DataTableAdvancedToolbar>
+
+            {/* 테이블 렌더링 */}
+            {isInfiniteMode ? (
+              // 무한 스크롤 모드: InfiniteDataTable 사용 (자체 페이지네이션 없음)
+              <InfiniteDataTable
+                table={table}
+                hasNextPage={infiniteScroll?.hasNextPage || false}
+                isLoadingMore={infiniteScroll?.isLoadingMore || false}
+                onLoadMore={infiniteScroll?.onLoadMore}
+                totalCount={infiniteScroll?.totalCount}
+                isEmpty={infiniteScroll?.isEmpty || false}
+                compact={false}
+                autoSizeColumns={true}
+              />
+            ) : (
+              // 페이지네이션 모드: DataTable 사용 (내장 페이지네이션 활용)
+              <DataTable
+                table={table}
+                compact={false}
+                autoSizeColumns={true}
+              />
+            )}
+          </>
+        ) : (
+          /* 로딩 스켈레톤 (무한 스크롤 초기 로딩) */
+          <div className="space-y-3">
+            <div className="text-sm text-muted-foreground mb-4">
+              무한 스크롤 모드로 데이터를 로드하고 있습니다...
+            </div>
+            {Array.from({ length: 10 }).map((_, i) => (
+              <div key={i} className="h-12 w-full bg-muted animate-pulse rounded" />
+            ))}
           </div>
-          {Array.from({ length: 10 }).map((_, i) => (
-            <div key={i} className="h-12 w-full bg-muted animate-pulse rounded" />
-          ))}
-        </div>
-      )}
-
-      {/* 기존 다이얼로그들 */}
-      <UpdateItemSheet
-        open={rowAction?.type === "update"}
-        onOpenChange={() => setRowAction(null)}
-        item={rowAction?.row.original ?? null}
-      />
-      <DeleteItemsDialog
-        open={rowAction?.type === "delete"}
-        onOpenChange={() => setRowAction(null)}
-        items={rowAction?.row.original ? [rowAction?.row.original] : []}
-        showTrigger={false}
-        onSuccess={() => rowAction?.row.toggleSelected(false)}
-      />
-    </div>
-  )
+        )}
+
+        {/* 기존 다이얼로그들 */}
+        <UpdateItemSheet
+          open={rowAction?.type === "update"}
+          onOpenChange={() => setRowAction(null)}
+          item={rowAction?.row.original ?? null}
+        />
+        <DeleteItemsDialog
+          open={rowAction?.type === "delete"}
+          onOpenChange={() => setRowAction(null)}
+          items={rowAction?.row.original ? [rowAction?.row.original] : []}
+          showTrigger={false}
+          onSuccess={() => rowAction?.row.toggleSelected(false)}
+        />
+      </div>
+      )
 }
\ No newline at end of file
-- 
cgit v1.2.3