버튼 수정과 그룹드롭다운, 품목복사기능, 연속입력기능추가

frontend/lib/registry/components/table-list/TableListComponent.tsx

@@ -35,6 +35,11 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
 import { Label } from "@/components/ui/label";
 import { AdvancedSearchFilters } from "@/components/screen/filters/AdvancedSearchFilters";
 import { SingleTableWithSticky } from "./SingleTableWithSticky";
@@ -274,7 +279,6 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
   const [visibleFilterColumns, setVisibleFilterColumns] = useState<Set<string>>(new Set());
 
   // 그룹 설정 관련 상태
-  const [isGroupSettingOpen, setIsGroupSettingOpen] = useState(false);
   const [groupByColumns, setGroupByColumns] = useState<string[]>([]);
   const [collapsedGroups, setCollapsedGroups] = useState<Set<string>>(new Set());
 
@@ -1281,17 +1285,14 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
       }));
   }, [visibleColumns, visibleFilterColumns, columnLabels]);
 
-  // 그룹 설정 저장
-  const saveGroupSettings = useCallback(() => {
+  // 그룹 설정 자동 저장 (localStorage)
+  useEffect(() => {
     if (!groupSettingKey) return;
 
     try {
       localStorage.setItem(groupSettingKey, JSON.stringify(groupByColumns));
-      setIsGroupSettingOpen(false);
-      toast.success("그룹 설정이 저장되었습니다");
     } catch (error) {
       console.error("그룹 설정 저장 실패:", error);
-      toast.error("설정 저장에 실패했습니다");
     }
   }, [groupSettingKey, groupByColumns]);
 
@@ -1542,10 +1543,6 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
           >
             <ChevronsRight className="h-3 w-3 sm:h-4 sm:w-4" />
           </Button>
-
-          <span className="text-muted-foreground ml-2 text-[10px] sm:ml-4 sm:text-xs">
-            전체 {totalItems.toLocaleString()}개
-          </span>
         </div>
 
         {/* 우측 새로고침 버튼 */}
@@ -1607,7 +1604,12 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                   onClearFilters={handleClearAdvancedFilters}
                 />
               </div>
-              <div className="flex gap-2">
+              <div className="flex items-center gap-2">
+                {/* 전체 개수 */}
+                <div className="hidden sm:block text-sm text-muted-foreground whitespace-nowrap">
+                  전체 <span className="font-semibold text-foreground">{totalItems.toLocaleString()}</span>개
+                </div>
+                
                 <Button
                   variant="outline"
                   size="sm"
@@ -1626,15 +1628,84 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                   <Settings className="mr-2 h-4 w-4" />
                   필터 설정
                 </Button>
-                <Button
-                  variant="outline"
-                  size="sm"
-                  onClick={() => setIsGroupSettingOpen(true)}
-                  className="w-full flex-shrink-0 sm:mt-1 sm:w-auto"
-                >
-                  <Layers className="mr-2 h-4 w-4" />
-                  그룹 설정
-                </Button>
+                <Popover>
+                  <PopoverTrigger asChild>
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      className="flex-shrink-0 w-full sm:w-auto sm:mt-1"
+                    >
+                      <Layers className="mr-2 h-4 w-4" />
+                      그룹 설정
+                      {groupByColumns.length > 0 && (
+                        <span className="ml-2 rounded-full bg-primary px-2 py-0.5 text-[10px] font-semibold text-primary-foreground">
+                          {groupByColumns.length}
+                        </span>
+                      )}
+                    </Button>
+                  </PopoverTrigger>
+                  <PopoverContent className="w-80 p-0" align="end">
+                    <div className="space-y-3 p-4">
+                      <div className="space-y-1">
+                        <h4 className="text-sm font-semibold">그룹 설정</h4>
+                        <p className="text-xs text-muted-foreground">
+                          데이터를 그룹화할 컬럼을 선택하세요
+                        </p>
+                      </div>
+
+                      {/* 컬럼 목록 */}
+                      <div className="max-h-[300px] space-y-2 overflow-y-auto">
+                        {visibleColumns
+                          .filter((col) => col.columnName !== "__checkbox__")
+                          .map((col) => (
+                            <div
+                              key={col.columnName}
+                              className="flex items-center gap-3 rounded p-2 hover:bg-muted/50"
+                            >
+                              <Checkbox
+                                id={`group-dropdown-${col.columnName}`}
+                                checked={groupByColumns.includes(col.columnName)}
+                                onCheckedChange={() => toggleGroupColumn(col.columnName)}
+                              />
+                              <Label
+                                htmlFor={`group-dropdown-${col.columnName}`}
+                                className="flex-1 cursor-pointer text-xs font-normal"
+                              >
+                                {columnLabels[col.columnName] || col.displayName || col.columnName}
+                              </Label>
+                            </div>
+                          ))}
+                      </div>
+
+                      {/* 선택된 그룹 안내 */}
+                      {groupByColumns.length > 0 && (
+                        <div className="rounded bg-muted/30 p-2 text-xs text-muted-foreground">
+                          <span className="font-semibold text-foreground">
+                            {groupByColumns.map((col) => columnLabels[col] || col).join(" → ")}
+                          </span>
+                        </div>
+                      )}
+
+                      {/* 초기화 버튼 */}
+                      {groupByColumns.length > 0 && (
+                        <Button
+                          variant="outline"
+                          size="sm"
+                          onClick={() => {
+                            setGroupByColumns([]);
+                            if (groupSettingKey) {
+                              localStorage.removeItem(groupSettingKey);
+                            }
+                            toast.success("그룹 설정이 초기화되었습니다");
+                          }}
+                          className="w-full text-xs"
+                        >
+                          초기화
+                        </Button>
+                      )}
+                    </div>
+                  </PopoverContent>
+                </Popover>
               </div>
             </div>
           </div>
@@ -1714,7 +1785,12 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                   onClearFilters={handleClearAdvancedFilters}
                 />
               </div>
-              <div className="flex gap-2">
+              <div className="flex items-center gap-2">
+                {/* 전체 개수 */}
+                <div className="hidden sm:block text-sm text-muted-foreground whitespace-nowrap">
+                  전체 <span className="font-semibold text-foreground">{totalItems.toLocaleString()}</span>개
+                </div>
+                
                 <Button
                   variant="outline"
                   size="sm"
@@ -1733,15 +1809,84 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                   <Settings className="mr-2 h-4 w-4" />
                   필터 설정
                 </Button>
-                <Button
-                  variant="outline"
-                  size="sm"
-                  onClick={() => setIsGroupSettingOpen(true)}
-                  className="w-full flex-shrink-0 sm:mt-1 sm:w-auto"
-                >
-                  <Layers className="mr-2 h-4 w-4" />
-                  그룹 설정
-                </Button>
+                <Popover>
+                  <PopoverTrigger asChild>
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      className="flex-shrink-0 w-full sm:w-auto sm:mt-1"
+                    >
+                      <Layers className="mr-2 h-4 w-4" />
+                      그룹 설정
+                      {groupByColumns.length > 0 && (
+                        <span className="ml-2 rounded-full bg-primary px-2 py-0.5 text-[10px] font-semibold text-primary-foreground">
+                          {groupByColumns.length}
+                        </span>
+                      )}
+                    </Button>
+                  </PopoverTrigger>
+                  <PopoverContent className="w-80 p-0" align="end">
+                    <div className="space-y-3 p-4">
+                      <div className="space-y-1">
+                        <h4 className="text-sm font-semibold">그룹 설정</h4>
+                        <p className="text-xs text-muted-foreground">
+                          데이터를 그룹화할 컬럼을 선택하세요
+                        </p>
+                      </div>
+
+                      {/* 컬럼 목록 */}
+                      <div className="max-h-[300px] space-y-2 overflow-y-auto">
+                        {visibleColumns
+                          .filter((col) => col.columnName !== "__checkbox__")
+                          .map((col) => (
+                            <div
+                              key={col.columnName}
+                              className="flex items-center gap-3 rounded p-2 hover:bg-muted/50"
+                            >
+                              <Checkbox
+                                id={`group-dropdown-2-${col.columnName}`}
+                                checked={groupByColumns.includes(col.columnName)}
+                                onCheckedChange={() => toggleGroupColumn(col.columnName)}
+                              />
+                              <Label
+                                htmlFor={`group-dropdown-2-${col.columnName}`}
+                                className="flex-1 cursor-pointer text-xs font-normal"
+                              >
+                                {columnLabels[col.columnName] || col.displayName || col.columnName}
+                              </Label>
+                            </div>
+                          ))}
+                      </div>
+
+                      {/* 선택된 그룹 안내 */}
+                      {groupByColumns.length > 0 && (
+                        <div className="rounded bg-muted/30 p-2 text-xs text-muted-foreground">
+                          <span className="font-semibold text-foreground">
+                            {groupByColumns.map((col) => columnLabels[col] || col).join(" → ")}
+                          </span>
+                        </div>
+                      )}
+
+                      {/* 초기화 버튼 */}
+                      {groupByColumns.length > 0 && (
+                        <Button
+                          variant="outline"
+                          size="sm"
+                          onClick={() => {
+                            setGroupByColumns([]);
+                            if (groupSettingKey) {
+                              localStorage.removeItem(groupSettingKey);
+                            }
+                            toast.success("그룹 설정이 초기화되었습니다");
+                          }}
+                          className="w-full text-xs"
+                        >
+                          초기화
+                        </Button>
+                      )}
+                    </div>
+                  </PopoverContent>
+                </Popover>
               </div>
             </div>
           </div>
@@ -2206,68 +2351,6 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
         </DialogContent>
       </Dialog>
 
-      {/* 그룹 설정 다이얼로그 */}
-      <Dialog open={isGroupSettingOpen} onOpenChange={setIsGroupSettingOpen}>
-        <DialogContent className="max-w-[95vw] sm:max-w-[500px]">
-          <DialogHeader>
-            <DialogTitle className="text-base sm:text-lg">그룹 설정</DialogTitle>
-            <DialogDescription className="text-xs sm:text-sm">
-              데이터를 그룹화할 컬럼을 선택하세요. 여러 컬럼을 선택하면 계층적으로 그룹화됩니다.
-            </DialogDescription>
-          </DialogHeader>
-
-          <div className="space-y-3 sm:space-y-4">
-            {/* 컬럼 목록 */}
-            <div className="max-h-[50vh] space-y-2 overflow-y-auto rounded border p-2">
-              {visibleColumns
-                .filter((col) => col.columnName !== "__checkbox__")
-                .map((col) => (
-                  <div key={col.columnName} className="hover:bg-muted/50 flex items-center gap-3 rounded p-2">
-                    <Checkbox
-                      id={`group-${col.columnName}`}
-                      checked={groupByColumns.includes(col.columnName)}
-                      onCheckedChange={() => toggleGroupColumn(col.columnName)}
-                    />
-                    <Label
-                      htmlFor={`group-${col.columnName}`}
-                      className="flex-1 cursor-pointer text-xs font-normal sm:text-sm"
-                    >
-                      {columnLabels[col.columnName] || col.displayName || col.columnName}
-                    </Label>
-                  </div>
-                ))}
-            </div>
-
-            {/* 선택된 그룹 안내 */}
-            <div className="text-muted-foreground bg-muted/30 rounded p-3 text-xs">
-              {groupByColumns.length === 0 ? (
-                <span>그룹화할 컬럼을 선택하세요</span>
-              ) : (
-                <span>
-                  선택된 그룹:{" "}
-                  <span className="text-primary font-semibold">
-                    {groupByColumns.map((col) => columnLabels[col] || col).join(" → ")}
-                  </span>
-                </span>
-              )}
-            </div>
-          </div>
-
-          <DialogFooter className="gap-2 sm:gap-0">
-            <Button
-              variant="outline"
-              onClick={() => setIsGroupSettingOpen(false)}
-              className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
-            >
-              취소
-            </Button>
-            <Button onClick={saveGroupSettings} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">
-              적용
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-
       {/* 테이블 옵션 모달 */}
       <TableOptionsModal
         isOpen={isTableOptionsOpen}

frontend/lib/utils/buttonActions.ts

@@ -14,6 +14,7 @@ export type ButtonActionType =
   | "save" // 저장
   | "delete" // 삭제
   | "edit" // 편집
+  | "copy" // 복사 (품목코드 초기화)
   | "navigate" // 페이지 이동
   | "modal" // 모달 열기
   | "control" // 제어 흐름
@@ -132,6 +133,9 @@ export class ButtonActionExecutor {
         case "delete":
           return await this.handleDelete(config, context);
 
+        case "copy":
+          return await this.handleCopy(config, context);
+
         case "navigate":
           return this.handleNavigate(config, context);
 
@@ -886,6 +890,154 @@ export class ButtonActionExecutor {
     window.location.href = editUrl;
   }
 
+  /**
+   * 복사 액션 처리 (품목코드 초기화)
+   */
+  private static async handleCopy(config: ButtonActionConfig, context: ButtonActionContext): Promise<boolean> {
+    try {
+      const { selectedRowsData, flowSelectedData } = context;
+
+      // 플로우 선택 데이터 우선 사용
+      let dataToCopy = flowSelectedData && flowSelectedData.length > 0 ? flowSelectedData : selectedRowsData;
+
+      console.log("📋 handleCopy - 데이터 소스 확인:", {
+        hasFlowSelectedData: !!(flowSelectedData && flowSelectedData.length > 0),
+        flowSelectedDataLength: flowSelectedData?.length || 0,
+        hasSelectedRowsData: !!(selectedRowsData && selectedRowsData.length > 0),
+        selectedRowsDataLength: selectedRowsData?.length || 0,
+        dataToCopyLength: dataToCopy?.length || 0,
+      });
+
+      // 선택된 데이터가 없는 경우
+      if (!dataToCopy || dataToCopy.length === 0) {
+        toast.error("복사할 항목을 선택해주세요.");
+        return false;
+      }
+
+      // 복사 화면이 설정되지 않은 경우
+      if (!config.targetScreenId) {
+        toast.error("복사 폼 화면이 설정되지 않았습니다. 버튼 설정에서 복사 폼 화면을 선택해주세요.");
+        return false;
+      }
+
+      console.log(`📋 복사 액션 실행: ${dataToCopy.length}개 항목`, {
+        dataToCopy,
+        targetScreenId: config.targetScreenId,
+        editMode: config.editMode,
+      });
+
+      if (dataToCopy.length === 1) {
+        // 단일 항목 복사
+        const rowData = dataToCopy[0];
+        console.log("📋 단일 항목 복사:", rowData);
+        console.log("📋 원본 데이터 키 목록:", Object.keys(rowData));
+
+        // 품목코드 필드 초기화 (여러 가능한 필드명 확인)
+        const copiedData = { ...rowData };
+        const itemCodeFields = [
+          "item_code",
+          "itemCode",
+          "item_no",
+          "itemNo",
+          "품목코드",
+          "품번",
+          "code",
+        ];
+
+        // 품목코드 필드를 찾아서 초기화
+        let resetFieldName = "";
+        for (const field of itemCodeFields) {
+          if (copiedData[field] !== undefined) {
+            // 품목코드 필드를 빈 문자열로 초기화
+            // (저장 시점에 채번 규칙이 자동으로 적용됨)
+            copiedData[field] = "";
+            
+            // 채번 규칙 ID도 함께 저장 (formData에 있을 경우)
+            const ruleIdKey = `${field}_numberingRuleId`;
+            if (rowData[ruleIdKey]) {
+              copiedData[ruleIdKey] = rowData[ruleIdKey];
+              console.log(`📋 채번 규칙 ID 복사: ${ruleIdKey} = ${rowData[ruleIdKey]}`);
+            }
+            
+            resetFieldName = field;
+            console.log(`✅ 품목코드 필드 초기화: ${field} (기존값: ${rowData[field]})`);
+            break;
+          }
+        }
+
+        if (resetFieldName) {
+          toast.success(`품목코드(${resetFieldName})가 초기화되었습니다. 저장 시 자동으로 새 코드가 생성됩니다.`);
+        } else {
+          console.warn("⚠️ 품목코드 필드를 찾을 수 없습니다. 전체 데이터를 복사합니다.");
+          console.warn("⚠️ 사용 가능한 필드:", Object.keys(copiedData));
+          toast.info("복사본이 생성됩니다. (품목코드 필드를 찾을 수 없음)");
+        }
+
+        console.log("📋 복사된 데이터:", copiedData);
+        await this.openCopyForm(config, copiedData, context);
+      } else {
+        // 다중 항목 복사 - 현재는 단일 복사만 지원
+        toast.error("현재 단일 항목 복사만 지원됩니다. 하나의 항목만 선택해주세요.");
+        return false;
+      }
+
+      return true;
+    } catch (error: any) {
+      console.error("❌ 복사 액션 실행 중 오류:", error);
+      toast.error(`복사 중 오류가 발생했습니다: ${error.message || "알 수 없는 오류"}`);
+      return false;
+    }
+  }
+
+  /**
+   * 복사 폼 열기 (단일 항목)
+   */
+  private static async openCopyForm(
+    config: ButtonActionConfig,
+    rowData: any,
+    context: ButtonActionContext,
+  ): Promise<void> {
+    try {
+      const editMode = config.editMode || "modal";
+      console.log("📋 openCopyForm 실행:", { editMode, targetScreenId: config.targetScreenId });
+
+      switch (editMode) {
+        case "modal":
+          // 모달로 복사 폼 열기 (편집 모달 재사용)
+          console.log("📋 모달로 복사 폼 열기");
+          await this.openEditModal(config, rowData, context);
+          break;
+
+        case "navigate":
+          // 새 페이지로 이동
+          console.log("📋 새 페이지로 복사 화면 이동");
+          this.navigateToCopyScreen(config, rowData, context);
+          break;
+
+        default:
+          // 기본값: 모달
+          console.log("📋 기본 모달로 복사 폼 열기");
+          this.openEditModal(config, rowData, context);
+      }
+    } catch (error: any) {
+      console.error("❌ openCopyForm 실행 중 오류:", error);
+      throw error;
+    }
+  }
+
+  /**
+   * 복사 화면으로 네비게이션
+   */
+  private static navigateToCopyScreen(config: ButtonActionConfig, rowData: any, context: ButtonActionContext): void {
+    const copyUrl = `/screens/${config.targetScreenId}?mode=copy`;
+    console.log("🔄 복사 화면으로 이동:", copyUrl);
+
+    // 복사할 데이터를 sessionStorage에 저장
+    sessionStorage.setItem("copyData", JSON.stringify(rowData));
+
+    window.location.href = copyUrl;
+  }
+
   /**
    * 닫기 액션 처리
    */