Merge branch 'jskim-node' of http://39.117.244.52:3000/kjs/ERP-node into gbpark-node

; Please enter a commit message to explain why this merge is necessary, ; especially if it merges an updated upstream into a topic branch. ; ; Lines starting with ';' will be ignored, and an empty message aborts ; the commit.
2026-02-12 16:33:00 +09:00
parent b1ec674fa9 d0ebb82f90
commit 95f668d40d
13 changed files with 1668 additions and 223 deletions
--- a/frontend/lib/registry/components/v2-split-panel-layout/SplitPanelLayoutComponent.tsx
+++ b/frontend/lib/registry/components/v2-split-panel-layout/SplitPanelLayoutComponent.tsx
@@ -194,6 +194,17 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
  const [selectedLeftItem, setSelectedLeftItem] = useState<any>(null);
  const [expandedRightItems, setExpandedRightItems] = useState<Set<string | number>>(new Set()); // 확장된 우측 아이템
  const [customLeftSelectedData, setCustomLeftSelectedData] = useState<Record<string, any>>({}); // 커스텀 모드: 좌측 선택 데이터
+  // 커스텀 모드: 탭/버튼 간 공유할 selectedRowsData 자체 관리 (항상 로컬 상태 사용)
+  const [localSelectedRowsData, setLocalSelectedRowsData] = useState<any[]>([]);
+  const handleLocalSelectedRowsChange = useCallback(
+    (selectedRows: any[], selectedRowsDataNew: any[], sortBy?: string, sortOrder?: "asc" | "desc", columnOrder?: string[]) => {
+      setLocalSelectedRowsData(selectedRowsDataNew);
+      if ((props as any).onSelectedRowsChange) {
+        (props as any).onSelectedRowsChange(selectedRows, selectedRowsDataNew, sortBy, sortOrder, columnOrder);
+      }
+    },
+    [(props as any).onSelectedRowsChange],
+  );
  const [leftSearchQuery, setLeftSearchQuery] = useState("");
  const [rightSearchQuery, setRightSearchQuery] = useState("");
  const [isLoadingLeft, setIsLoadingLeft] = useState(false);
@@ -1553,6 +1564,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
      if (isSameItem) {
        // 선택 해제 → 전체 데이터 로드
        setSelectedLeftItem(null);
+        setCustomLeftSelectedData({}); // 커스텀 모드 우측 폼 데이터 초기화
        setExpandedRightItems(new Set());
        setTabsData({});
        if (activeTabIndex === 0) {
@@ -1573,6 +1585,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
      }

      setSelectedLeftItem(item);
+      setCustomLeftSelectedData(item); // 커스텀 모드 우측 폼에 선택된 데이터 전달
      setExpandedRightItems(new Set()); // 좌측 항목 변경 시 우측 확장 초기화
      setTabsData({}); // 모든 탭 데이터 초기화

@@ -1980,6 +1993,88 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
  // 추가 버튼 핸들러
  const handleAddClick = useCallback(
    (panel: "left" | "right") => {
+      // 좌측 패널 추가 시, addButton 모달 모드 확인
+      if (panel === "left") {
+        const addButtonConfig = componentConfig.leftPanel?.addButton;
+        if (addButtonConfig?.mode === "modal" && addButtonConfig?.modalScreenId) {
+          const leftTableName = componentConfig.leftPanel?.tableName || "";
+
+          // ScreenModal 열기 이벤트 발생
+          window.dispatchEvent(
+            new CustomEvent("openScreenModal", {
+              detail: {
+                screenId: addButtonConfig.modalScreenId,
+                urlParams: {
+                  mode: "add",
+                  tableName: leftTableName,
+                },
+              },
+            }),
+          );
+
+          console.log("✅ [SplitPanel] 좌측 추가 모달 화면 열기:", {
+            screenId: addButtonConfig.modalScreenId,
+            tableName: leftTableName,
+          });
+          return;
+        }
+      }
+
+      // 우측 패널 추가 시, addButton 모달 모드 확인
+      if (panel === "right") {
+        const addButtonConfig =
+          activeTabIndex === 0
+            ? componentConfig.rightPanel?.addButton
+            : (componentConfig.rightPanel?.additionalTabs?.[activeTabIndex - 1] as any)?.addButton;
+
+        if (addButtonConfig?.mode === "modal" && addButtonConfig?.modalScreenId) {
+          // 커스텀 모달 화면 열기
+          const currentTableName =
+            activeTabIndex === 0
+              ? componentConfig.rightPanel?.tableName || ""
+              : (componentConfig.rightPanel?.additionalTabs?.[activeTabIndex - 1] as any)?.tableName || "";
+
+          // 좌측 선택 데이터를 modalDataStore에 저장 (추가 화면에서 참조 가능)
+          if (selectedLeftItem && componentConfig.leftPanel?.tableName) {
+            import("@/stores/modalDataStore").then(({ useModalDataStore }) => {
+              useModalDataStore.getState().setData(componentConfig.leftPanel!.tableName!, [selectedLeftItem]);
+            });
+          }
+
+          // ScreenModal 열기 이벤트 발생
+          window.dispatchEvent(
+            new CustomEvent("openScreenModal", {
+              detail: {
+                screenId: addButtonConfig.modalScreenId,
+                urlParams: {
+                  mode: "add",
+                  tableName: currentTableName,
+                  // 좌측 선택 항목의 연결 키 값 전달
+                  ...(selectedLeftItem && (() => {
+                    const relation = activeTabIndex === 0
+                      ? componentConfig.rightPanel?.relation
+                      : (componentConfig.rightPanel?.additionalTabs?.[activeTabIndex - 1] as any)?.relation;
+                    const leftColumn = relation?.keys?.[0]?.leftColumn || relation?.leftColumn;
+                    const rightColumn = relation?.keys?.[0]?.rightColumn || relation?.foreignKey;
+                    if (leftColumn && rightColumn && selectedLeftItem[leftColumn] !== undefined) {
+                      return { [rightColumn]: selectedLeftItem[leftColumn] };
+                    }
+                    return {};
+                  })()),
+                },
+              },
+            }),
+          );
+
+          console.log("✅ [SplitPanel] 추가 모달 화면 열기:", {
+            screenId: addButtonConfig.modalScreenId,
+            tableName: currentTableName,
+          });
+          return;
+        }
+      }
+
+      // 기존 내장 추가 모달 로직
      setAddModalPanel(panel);

      // 우측 패널 추가 시, 좌측에서 선택된 항목의 조인 컬럼 값을 자동으로 채움
@@ -1999,12 +2094,59 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>

      setShowAddModal(true);
    },
-    [selectedLeftItem, componentConfig],
+    [selectedLeftItem, componentConfig, activeTabIndex],
  );

  // 수정 버튼 핸들러
  const handleEditClick = useCallback(
    (panel: "left" | "right", item: any) => {
+      // 좌측 패널 수정 버튼 설정 확인 (모달 모드)
+      if (panel === "left") {
+        const editButtonConfig = componentConfig.leftPanel?.editButton;
+        if (editButtonConfig?.mode === "modal" && editButtonConfig?.modalScreenId) {
+          const leftTableName = componentConfig.leftPanel?.tableName || "";
+
+          // Primary Key 찾기 - 실제 DB의 id 컬럼 값을 우선 사용
+          let primaryKeyValue = item.id || item.ID;
+
+          if (primaryKeyValue === undefined || primaryKeyValue === null) {
+            // id가 없으면 sourceColumn 시도, 마지막으로 첫 번째 키
+            const sourceColumn = componentConfig.leftPanel?.itemAddConfig?.sourceColumn || "id";
+            primaryKeyValue = item[sourceColumn];
+            if (primaryKeyValue === undefined || primaryKeyValue === null) {
+              const firstKey = Object.keys(item)[0];
+              primaryKeyValue = item[firstKey];
+            }
+          }
+
+          // modalDataStore에 저장
+          import("@/stores/modalDataStore").then(({ useModalDataStore }) => {
+            useModalDataStore.getState().setData(leftTableName, [item]);
+          });
+
+          // ScreenModal 열기 이벤트 발생
+          window.dispatchEvent(
+            new CustomEvent("openScreenModal", {
+              detail: {
+                screenId: editButtonConfig.modalScreenId,
+                urlParams: {
+                  mode: "edit",
+                  editId: primaryKeyValue,
+                  tableName: leftTableName,
+                },
+              },
+            }),
+          );
+
+          console.log("✅ [SplitPanel] 좌측 수정 모달 화면 열기:", {
+            screenId: editButtonConfig.modalScreenId,
+            tableName: leftTableName,
+            primaryKeyValue,
+          });
+          return;
+        }
+      }
+
      // 우측 패널 수정 버튼 설정 확인 (탭별 설정 지원)
      if (panel === "right") {
        const editButtonConfig =
@@ -2112,6 +2254,81 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
    [componentConfig, activeTabIndex],
  );

+  // 커스텀 모드 우측 패널 저장 (인라인 편집 데이터)
+  const handleCustomRightSave = useCallback(async () => {
+    if (!selectedLeftItem || !customLeftSelectedData || Object.keys(customLeftSelectedData).length === 0) {
+      toast({
+        title: "저장 실패",
+        description: "저장할 데이터가 없습니다. 좌측에서 항목을 선택해주세요.",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    const tableName = componentConfig.rightPanel?.tableName || componentConfig.leftPanel?.tableName;
+    if (!tableName) {
+      toast({
+        title: "저장 실패",
+        description: "테이블 정보가 없습니다.",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    // Primary Key 찾기 - 실제 DB의 id 컬럼 값을 사용 (sourceColumn은 관계 연결용이므로 PK로 사용하지 않음)
+    const primaryKey = selectedLeftItem.id || selectedLeftItem.ID;
+
+    if (!primaryKey) {
+      toast({
+        title: "저장 실패",
+        description: "Primary Key를 찾을 수 없습니다.",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    try {
+      // 프론트엔드 전용 필드 제거
+      const cleanData = { ...customLeftSelectedData };
+      delete cleanData.children;
+      delete cleanData.level;
+      delete cleanData._originalItems;
+
+      // company_code 자동 추가
+      if (companyCode && !cleanData.company_code) {
+        cleanData.company_code = companyCode;
+      }
+
+      console.log("📝 [SplitPanel] 커스텀 우측 패널 저장:", { tableName, primaryKey, data: cleanData });
+
+      const response = await dataApi.updateRecord(tableName, primaryKey, cleanData);
+
+      if (response.success) {
+        toast({
+          title: "저장 완료",
+          description: "데이터가 저장되었습니다.",
+        });
+        // 좌측 데이터 새로고침 (변경된 항목 반영)
+        loadLeftData();
+        // selectedLeftItem도 업데이트
+        setSelectedLeftItem(customLeftSelectedData);
+      } else {
+        toast({
+          title: "저장 실패",
+          description: response.error || "데이터 저장에 실패했습니다.",
+          variant: "destructive",
+        });
+      }
+    } catch (error) {
+      console.error("커스텀 우측 패널 저장 오류:", error);
+      toast({
+        title: "저장 오류",
+        description: "데이터 저장 중 오류가 발생했습니다.",
+        variant: "destructive",
+      });
+    }
+  }, [selectedLeftItem, customLeftSelectedData, componentConfig, companyCode, toast, loadLeftData]);
+
  // 수정 모달 저장
  const handleEditModalSave = useCallback(async () => {
    const tableName =
@@ -2304,7 +2521,8 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
        if (deleteModalPanel === "left") {
          loadLeftData();
          // 삭제된 항목이 선택되어 있었으면 선택 해제
-          if (selectedLeftItem && selectedLeftItem[sourceColumn] === primaryKey) {
+          const deletedId = deleteModalItem?.id || deleteModalItem?.ID;
+          if (selectedLeftItem && (selectedLeftItem.id === deletedId || selectedLeftItem.ID === deletedId)) {
            setSelectedLeftItem(null);
            setRightData(null);
          }
@@ -2743,6 +2961,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                      const displayHeight = isResizingComp && resizeSize ? resizeSize.height : (comp.size?.height || 100);
                      
                      // 컴포넌트 데이터를 DynamicComponentRenderer 형식으로 변환
+                      // componentConfig의 주요 속성을 최상위로 펼침 (일반 화면의 overrides 플래트닝과 동일)
                      const componentData = {
                        id: comp.id,
                        type: "component" as const,
@@ -2752,6 +2971,11 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                        size: { width: displayWidth, height: displayHeight },
                        componentConfig: comp.componentConfig || {},
                        style: comp.style || {},
+                        // 파일 업로드/미디어 등이 component.tableName, component.columnName을 직접 참조하므로 펼침
+                        tableName: comp.componentConfig?.tableName,
+                        columnName: comp.componentConfig?.columnName,
+                        webType: comp.componentConfig?.webType,
+                        inputType: comp.inputType || comp.componentConfig?.inputType,
                      };

                      if (isDesignMode) {
@@ -2920,8 +3144,17 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                            <DynamicComponentRenderer
                              component={componentData as any}
                              isDesignMode={false}
+                              isInteractive={true}
                              formData={{}}
                              tableName={componentConfig.leftPanel?.tableName}
+                              menuObjid={(props as any).menuObjid}
+                              screenId={(props as any).screenId}
+                              userId={(props as any).userId}
+                              userName={(props as any).userName}
+                              companyCode={companyCode}
+                              allComponents={(props as any).allComponents}
+                              selectedRowsData={localSelectedRowsData}
+                              onSelectedRowsChange={handleLocalSelectedRowsChange}
                              onFormDataChange={(data: any) => {
                                // 커스텀 모드: 좌측 카드/테이블 선택 시 데이터 캡처
                                if (data?.selectedRowsData && data.selectedRowsData.length > 0) {
@@ -3317,29 +3550,33 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                              {/* 항목별 버튼들 */}
                              {!isDesignMode && (
                                <div className="flex flex-shrink-0 items-center gap-1 opacity-0 transition-opacity group-hover:opacity-100">
-                                  {/* 수정 버튼 */}
-                                  <button
-                                    onClick={(e) => {
-                                      e.stopPropagation();
-                                      handleEditClick("left", item);
-                                    }}
-                                    className="rounded p-1 transition-colors hover:bg-gray-200"
-                                    title="수정"
-                                  >
-                                    <Pencil className="h-4 w-4 text-gray-600" />
-                                  </button>
+                                  {/* 수정 버튼 (showEdit 활성화 시에만 표시) */}
+                                  {(componentConfig.leftPanel?.showEdit !== false) && (
+                                    <button
+                                      onClick={(e) => {
+                                        e.stopPropagation();
+                                        handleEditClick("left", item);
+                                      }}
+                                      className="rounded p-1 transition-colors hover:bg-gray-200"
+                                      title="수정"
+                                    >
+                                      <Pencil className="h-4 w-4 text-gray-600" />
+                                    </button>
+                                  )}

-                                  {/* 삭제 버튼 */}
-                                  <button
-                                    onClick={(e) => {
-                                      e.stopPropagation();
-                                      handleDeleteClick("left", item);
-                                    }}
-                                    className="rounded p-1 transition-colors hover:bg-red-100"
-                                    title="삭제"
-                                  >
-                                    <Trash2 className="h-4 w-4 text-red-600" />
-                                  </button>
+                                  {/* 삭제 버튼 (showDelete 활성화 시에만 표시) */}
+                                  {(componentConfig.leftPanel?.showDelete !== false) && (
+                                    <button
+                                      onClick={(e) => {
+                                        e.stopPropagation();
+                                        handleDeleteClick("left", item);
+                                      }}
+                                      className="rounded p-1 transition-colors hover:bg-red-100"
+                                      title="삭제"
+                                    >
+                                      <Trash2 className="h-4 w-4 text-red-600" />
+                                    </button>
+                                  )}

                                  {/* 항목별 추가 버튼 */}
                                  {componentConfig.leftPanel?.showItemAddButton && (
@@ -3456,6 +3693,13 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
              </div>
              {!isDesignMode && (
                <div className="flex items-center gap-2">
+                  {/* 커스텀 모드 기본정보 탭: 저장 버튼 */}
+                  {activeTabIndex === 0 && componentConfig.rightPanel?.displayMode === "custom" && selectedLeftItem && (
+                    <Button size="sm" variant="default" onClick={handleCustomRightSave}>
+                      <Save className="mr-1 h-4 w-4" />
+                      저장
+                    </Button>
+                  )}
                  {activeTabIndex === 0
                    ? componentConfig.rightPanel?.showAdd && (
                        <Button size="sm" variant="outline" onClick={() => handleAddClick("right")}>
@@ -3736,6 +3980,15 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
              })()
            ) : componentConfig.rightPanel?.displayMode === "custom" ? (
              // 🆕 커스텀 모드: 패널 안에 자유롭게 컴포넌트 배치
+              // 실행 모드에서 좌측 미선택 시 안내 메시지 표시
+              !isDesignMode && !selectedLeftItem ? (
+                <div className="flex h-full items-center justify-center">
+                  <div className="text-muted-foreground text-center text-sm">
+                    <p className="mb-2">좌측에서 항목을 선택하세요</p>
+                    <p className="text-xs">선택한 항목의 상세 정보가 여기에 표시됩니다</p>
+                  </div>
+                </div>
+              ) : (
              <div 
                className="relative h-full w-full"
                data-split-panel-container="true"
@@ -3757,6 +4010,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                      const displayHeight = isResizingComp && resizeSize ? resizeSize.height : (comp.size?.height || 100);
                      
                      // 컴포넌트 데이터를 DynamicComponentRenderer 형식으로 변환
+                      // componentConfig의 주요 속성을 최상위로 펼침 (일반 화면의 overrides 플래트닝과 동일)
                      const componentData = {
                        id: comp.id,
                        type: "component" as const,
@@ -3766,6 +4020,11 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                        size: { width: displayWidth, height: displayHeight },
                        componentConfig: comp.componentConfig || {},
                        style: comp.style || {},
+                        // 파일 업로드/미디어 등이 component.tableName, component.columnName을 직접 참조하므로 펼침
+                        tableName: comp.componentConfig?.tableName,
+                        columnName: comp.componentConfig?.columnName,
+                        webType: comp.componentConfig?.webType,
+                        inputType: comp.inputType || comp.componentConfig?.inputType,
                      };

                      if (isDesignMode) {
@@ -3923,8 +4182,20 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                            <DynamicComponentRenderer
                              component={componentData as any}
                              isDesignMode={false}
+                              isInteractive={true}
                              formData={customLeftSelectedData}
+                              onFormDataChange={(fieldName: string, value: any) => {
+                                setCustomLeftSelectedData((prev: Record<string, any>) => ({ ...prev, [fieldName]: value }));
+                              }}
                              tableName={componentConfig.rightPanel?.tableName || componentConfig.leftPanel?.tableName}
+                              menuObjid={(props as any).menuObjid}
+                              screenId={(props as any).screenId}
+                              userId={(props as any).userId}
+                              userName={(props as any).userName}
+                              companyCode={companyCode}
+                              allComponents={(props as any).allComponents}
+                              selectedRowsData={localSelectedRowsData}
+                              onSelectedRowsChange={handleLocalSelectedRowsChange}
                            />
                          </div>
                        );
@@ -3944,6 +4215,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                  </div>
                )}
              </div>
+              )
            ) : isLoadingRight ? (
              // 로딩 중
              <div className="flex h-full items-center justify-center">