툴바 선택

2025-12-09 18:26:36 +09:00 · 2025-12-09 18:26:36 +09:00 · 93ec294be3
parent 36a7529da2
commit 93ec294be3
3 changed files with 263 additions and 162 deletions
--- a/frontend/lib/registry/components/table-list/TableListComponent.tsx
+++ b/frontend/lib/registry/components/table-list/TableListComponent.tsx
@ -4675,6 +4675,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
          </Popover>

          {/* 새로고침 버튼 */}
+          {(tableConfig.toolbar?.showRefresh ?? true) && (
            <Button
              variant="ghost"
              size="sm"
@ -4684,10 +4685,11 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
            >
              <RefreshCw className={cn("h-3 w-3", loading && "animate-spin")} />
            </Button>
+          )}
        </div>
      </div>
    );
-  }, [tableConfig.pagination, isDesignMode, currentPage, totalPages, totalItems, loading, selectedRows.size, exportToExcel, exportToPdf]);
+  }, [tableConfig.pagination, tableConfig.toolbar?.showRefresh, isDesignMode, currentPage, totalPages, totalItems, loading, selectedRows.size, exportToExcel, exportToPdf]);

  // ========================================
  // 렌더링
@ -4790,6 +4792,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
        {/* 🆕 DevExpress 스타일 기능 툴바 */}
        <div className="border-border bg-muted/20 flex flex-wrap items-center gap-1 border-b px-2 py-1.5 sm:gap-2 sm:px-4 sm:py-2">
          {/* 편집 모드 토글 */}
+          {(tableConfig.toolbar?.showEditMode ?? true) && (
            <div className="flex items-center gap-1 border-r border-border pr-2">
              <Button
                variant={editMode === "batch" ? "default" : "ghost"}
@ -4802,9 +4805,12 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                {editMode === "batch" ? "배치 모드" : "즉시 저장"}
              </Button>
            </div>
+          )}

          {/* 내보내기 버튼들 */}
+          {((tableConfig.toolbar?.showExcel ?? true) || (tableConfig.toolbar?.showPdf ?? true)) && (
            <div className="flex items-center gap-1 border-r border-border pr-2">
+              {(tableConfig.toolbar?.showExcel ?? true) && (
                <Button
                  variant="ghost"
                  size="sm"
@ -4815,6 +4821,8 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                  <FileSpreadsheet className="mr-1 h-3 w-3 text-green-600" />
                  Excel
                </Button>
+              )}
+              {(tableConfig.toolbar?.showPdf ?? true) && (
                <Button
                  variant="ghost"
                  size="sm"
@ -4825,9 +4833,12 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                  <FileText className="mr-1 h-3 w-3 text-red-600" />
                  PDF
                </Button>
+              )}
            </div>
+          )}

          {/* 복사 버튼 */}
+          {(tableConfig.toolbar?.showCopy ?? true) && (
            <div className="flex items-center gap-1 border-r border-border pr-2">
              <Button
                variant="ghost"
@ -4841,6 +4852,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                복사
              </Button>
            </div>
+          )}

          {/* 선택 정보 */}
          {selectedRows.size > 0 && (
@ -4861,6 +4873,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
          )}

          {/* 🆕 통합 검색 패널 */}
+          {(tableConfig.toolbar?.showSearch ?? true) && (
            <div className="flex items-center gap-1 border-r border-border pr-2">
              {isSearchPanelOpen ? (
                <div className="flex items-center gap-1">
@ -4934,8 +4947,10 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                </Button>
              )}
            </div>
+          )}

          {/* 🆕 Filter Builder (고급 필터) 버튼 */}
+          {(tableConfig.toolbar?.showFilter ?? true) && (
            <div className="flex items-center gap-1 border-r border-border pr-2">
              <Button
                variant={activeFilterCount > 0 ? "default" : "ghost"}
@ -4964,8 +4979,10 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                </Button>
              )}
            </div>
+          )}

          {/* 새로고침 */}
+          {(tableConfig.toolbar?.showRefresh ?? true) && (
            <div className="ml-auto flex items-center gap-1">
              <Button
                variant="ghost"
@ -4979,6 +4996,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                새로고침
              </Button>
            </div>
+          )}
        </div>

        {/* 🆕 배치 편집 툴바 */}
--- a/frontend/lib/registry/components/table-list/TableListConfigPanel.tsx
+++ b/frontend/lib/registry/components/table-list/TableListConfigPanel.tsx
@ -765,6 +765,73 @@ export const TableListConfigPanel: React.FC<TableListConfigPanelProps> = ({
          </div>
        </div>

+        {/* 툴바 버튼 설정 */}
+        <div className="space-y-3">
+          <div>
+            <h3 className="text-sm font-semibold">툴바 버튼 설정</h3>
+            <p className="text-muted-foreground text-[10px]">테이블 상단에 표시할 버튼을 선택합니다</p>
+          </div>
+          <hr className="border-border" />
+          <div className="grid grid-cols-2 gap-2">
+            <div className="flex items-center space-x-2">
+              <Checkbox
+                id="showEditMode"
+                checked={config.toolbar?.showEditMode ?? true}
+                onCheckedChange={(checked) => handleNestedChange("toolbar", "showEditMode", checked)}
+              />
+              <Label htmlFor="showEditMode" className="text-xs">즉시 저장</Label>
+            </div>
+            <div className="flex items-center space-x-2">
+              <Checkbox
+                id="showExcel"
+                checked={config.toolbar?.showExcel ?? true}
+                onCheckedChange={(checked) => handleNestedChange("toolbar", "showExcel", checked)}
+              />
+              <Label htmlFor="showExcel" className="text-xs">Excel</Label>
+            </div>
+            <div className="flex items-center space-x-2">
+              <Checkbox
+                id="showPdf"
+                checked={config.toolbar?.showPdf ?? true}
+                onCheckedChange={(checked) => handleNestedChange("toolbar", "showPdf", checked)}
+              />
+              <Label htmlFor="showPdf" className="text-xs">PDF</Label>
+            </div>
+            <div className="flex items-center space-x-2">
+              <Checkbox
+                id="showCopy"
+                checked={config.toolbar?.showCopy ?? true}
+                onCheckedChange={(checked) => handleNestedChange("toolbar", "showCopy", checked)}
+              />
+              <Label htmlFor="showCopy" className="text-xs">복사</Label>
+            </div>
+            <div className="flex items-center space-x-2">
+              <Checkbox
+                id="showSearch"
+                checked={config.toolbar?.showSearch ?? true}
+                onCheckedChange={(checked) => handleNestedChange("toolbar", "showSearch", checked)}
+              />
+              <Label htmlFor="showSearch" className="text-xs">검색</Label>
+            </div>
+            <div className="flex items-center space-x-2">
+              <Checkbox
+                id="showFilter"
+                checked={config.toolbar?.showFilter ?? true}
+                onCheckedChange={(checked) => handleNestedChange("toolbar", "showFilter", checked)}
+              />
+              <Label htmlFor="showFilter" className="text-xs">필터</Label>
+            </div>
+            <div className="flex items-center space-x-2">
+              <Checkbox
+                id="showRefresh"
+                checked={config.toolbar?.showRefresh ?? true}
+                onCheckedChange={(checked) => handleNestedChange("toolbar", "showRefresh", checked)}
+              />
+              <Label htmlFor="showRefresh" className="text-xs">새로고침</Label>
+            </div>
+          </div>
+        </div>
+
        {/* 체크박스 설정 */}
        <div className="space-y-3">
          <div>
--- a/frontend/lib/registry/components/table-list/types.ts
+++ b/frontend/lib/registry/components/table-list/types.ts
@ -164,6 +164,19 @@ export interface PaginationConfig {
  pageSizeOptions: number[];
 }

+/**
+ * 툴바 버튼 표시 설정
+ */
+export interface ToolbarConfig {
+  showEditMode?: boolean; // 즉시 저장/배치 모드 버튼
+  showExcel?: boolean; // Excel 내보내기 버튼
+  showPdf?: boolean; // PDF 내보내기 버튼
+  showCopy?: boolean; // 복사 버튼
+  showSearch?: boolean; // 검색 버튼
+  showFilter?: boolean; // 필터 버튼
+  showRefresh?: boolean; // 새로고침 버튼
+}
+
 /**
 * 체크박스 설정
 */
@ -259,6 +272,9 @@ export interface TableListConfig extends ComponentConfig {
  autoLoad: boolean;
  refreshInterval?: number; // 초 단위

+  // 🆕 툴바 버튼 표시 설정
+  toolbar?: ToolbarConfig;
+
  // 🆕 컬럼 값 기반 데이터 필터링
  dataFilter?: DataFilterConfig;