feat: DISTINCT 값 조회 API 추가 및 라우터 설정

- 테이블 컬럼의 DISTINCT 값을 조회하는 API를 추가하였습니다. 이 API는 특정 테이블과 컬럼에서 DISTINCT 값을 반환하여 선택박스 옵션으로 사용할 수 있도록 합니다. - API 호출 시 멀티테넌시를 고려하여 회사 코드에 따라 필터링을 적용하였습니다. - 관련된 라우터 설정을 추가하여 API 접근을 가능하게 하였습니다. - 프론트엔드에서 DISTINCT 값을 조회할 수 있도록 UnifiedSelect 컴포넌트를 업데이트하였습니다.
2026-01-27 23:02:03 +09:00
parent cc742b27f1
commit a06f2eb52c
9 changed files with 624 additions and 93 deletions
--- a/frontend/components/screen/panels/UnifiedPropertiesPanel.tsx
+++ b/frontend/components/screen/panels/UnifiedPropertiesPanel.tsx
@@ -303,6 +303,14 @@ export const UnifiedPropertiesPanel: React.FC<UnifiedPropertiesPanelProps> = ({
                allComponents={allComponents} // 🆕 연쇄 드롭다운 부모 감지용
                currentComponent={selectedComponent} // 🆕 현재 컴포넌트 정보
                menuObjid={menuObjid} // 🆕 메뉴 OBJID 전달 (채번 규칙 등)
+                // 🆕 집계 위젯 등에서 사용하는 컴포넌트 목록
+                screenComponents={allComponents.map((comp: any) => ({
+                  id: comp.id,
+                  componentType: comp.componentType || comp.type,
+                  label: comp.label || comp.name || comp.id,
+                  tableName: comp.componentConfig?.tableName || comp.tableName,
+                  columnName: comp.columnName || comp.componentConfig?.columnName || comp.componentConfig?.fieldName,
+                }))}
              />
            </Suspense>
          </div>
--- a/frontend/components/screen/widgets/TabsWidget.tsx
+++ b/frontend/components/screen/widgets/TabsWidget.tsx
@@ -1,13 +1,20 @@
 "use client";

-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useMemo } from "react";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Button } from "@/components/ui/button";
-import { X } from "lucide-react";
-import type { TabsComponent, TabItem, TabInlineComponent } from "@/types/screen-management";
+import { X, Loader2 } from "lucide-react";
+import type { TabsComponent, TabItem, TabInlineComponent, ComponentData } from "@/types/screen-management";
 import { cn } from "@/lib/utils";
 import { useActiveTab } from "@/contexts/ActiveTabContext";
 import { DynamicComponentRenderer } from "@/lib/registry/DynamicComponentRenderer";
+import { screenApi } from "@/lib/api/screen";
+
+// 확장된 TabItem 타입 (screenId 지원)
+interface ExtendedTabItem extends TabItem {
+  screenId?: number;
+  screenName?: string;
+}

 interface TabsWidgetProps {
  component: TabsComponent;
@@ -15,10 +22,10 @@ interface TabsWidgetProps {
  style?: React.CSSProperties;
  menuObjid?: number;
  formData?: Record<string, any>;
-  onFormDataChange?: (fieldName: string, value: any) => void; // DynamicComponentRenderer와 동일한 시그니처
-  isDesignMode?: boolean; // 디자인 모드 여부
-  onComponentSelect?: (tabId: string, componentId: string) => void; // 컴포넌트 선택 콜백
-  selectedComponentId?: string; // 선택된 컴포넌트 ID
+  onFormDataChange?: (fieldName: string, value: any) => void;
+  isDesignMode?: boolean;
+  onComponentSelect?: (tabId: string, componentId: string) => void;
+  selectedComponentId?: string;
 }

 export function TabsWidget({
@@ -56,14 +63,45 @@ export function TabsWidget({
  };

  const [selectedTab, setSelectedTab] = useState<string>(getInitialTab());
-  const [visibleTabs, setVisibleTabs] = useState<TabItem[]>(tabs);
+  const [visibleTabs, setVisibleTabs] = useState<ExtendedTabItem[]>(tabs as ExtendedTabItem[]);
  const [mountedTabs, setMountedTabs] = useState<Set<string>>(() => new Set([getInitialTab()]));
+  
+  // screenId 기반 화면 로드 상태
+  const [screenLayouts, setScreenLayouts] = useState<Record<string, ComponentData[]>>({});
+  const [screenLoadingStates, setScreenLoadingStates] = useState<Record<string, boolean>>({});
+  const [screenErrors, setScreenErrors] = useState<Record<string, string>>({});

  // 컴포넌트 탭 목록 변경 시 동기화
  useEffect(() => {
-    setVisibleTabs(tabs.filter((tab) => !tab.disabled));
+    setVisibleTabs((tabs as ExtendedTabItem[]).filter((tab) => !tab.disabled));
  }, [tabs]);

+  // screenId가 있는 탭의 화면 레이아웃 로드
+  useEffect(() => {
+    const loadScreenLayouts = async () => {
+      for (const tab of visibleTabs) {
+        const extTab = tab as ExtendedTabItem;
+        // screenId가 있고, 아직 로드하지 않았으며, 인라인 컴포넌트가 없는 경우만 로드
+        if (extTab.screenId && !screenLayouts[tab.id] && !screenLoadingStates[tab.id] && (!extTab.components || extTab.components.length === 0)) {
+          setScreenLoadingStates(prev => ({ ...prev, [tab.id]: true }));
+          try {
+            const layoutData = await screenApi.getLayout(extTab.screenId);
+            if (layoutData && layoutData.components) {
+              setScreenLayouts(prev => ({ ...prev, [tab.id]: layoutData.components }));
+            }
+          } catch (error) {
+            console.error(`탭 "${tab.label}" 화면 로드 실패:`, error);
+            setScreenErrors(prev => ({ ...prev, [tab.id]: "화면을 불러올 수 없습니다." }));
+          } finally {
+            setScreenLoadingStates(prev => ({ ...prev, [tab.id]: false }));
+          }
+        }
+      }
+    };
+    
+    loadScreenLayouts();
+  }, [visibleTabs, screenLayouts, screenLoadingStates]);
+
  // 선택된 탭 변경 시 localStorage에 저장 + ActiveTab Context 업데이트
  useEffect(() => {
    if (persistSelection && typeof window !== "undefined") {
@@ -123,20 +161,110 @@ export function TabsWidget({
    return `${baseClass} ${variantClass}`;
  };

-  // 인라인 컴포넌트 렌더링
-  const renderTabComponents = (tab: TabItem) => {
-    const components = tab.components || [];
-
-    if (components.length === 0) {
+  // 탭 컨텐츠 렌더링 (screenId 또는 인라인 컴포넌트)
+  const renderTabContent = (tab: ExtendedTabItem) => {
+    const extTab = tab as ExtendedTabItem;
+    const inlineComponents = tab.components || [];
+    
+    // 1. screenId가 있고 인라인 컴포넌트가 없는 경우 -> 화면 로드 방식
+    if (extTab.screenId && inlineComponents.length === 0) {
+      // 로딩 중
+      if (screenLoadingStates[tab.id]) {
+        return (
+          <div className="flex h-full w-full items-center justify-center">
+            <Loader2 className="h-8 w-8 animate-spin text-primary" />
+            <span className="ml-2 text-muted-foreground">화면을 불러오는 중...</span>
+          </div>
+        );
+      }
+      
+      // 에러 발생
+      if (screenErrors[tab.id]) {
+        return (
+          <div className="flex h-full w-full items-center justify-center rounded border-2 border-dashed border-destructive/50 bg-destructive/5">
+            <p className="text-destructive text-sm">{screenErrors[tab.id]}</p>
+          </div>
+        );
+      }
+      
+      // 화면 레이아웃이 로드된 경우
+      const loadedComponents = screenLayouts[tab.id];
+      if (loadedComponents && loadedComponents.length > 0) {
+        return renderScreenComponents(loadedComponents);
+      }
+      
+      // 아직 로드되지 않은 경우
      return (
-        <div className="flex h-full w-full items-center justify-center rounded border-2 border-dashed border-gray-300 bg-gray-50">
-          <p className="text-muted-foreground text-sm">
-            {isDesignMode ? "컴포넌트를 드래그하여 추가하세요" : "컴포넌트가 없습니다"}
-          </p>
+        <div className="flex h-full w-full items-center justify-center">
+          <Loader2 className="h-8 w-8 animate-spin text-primary" />
        </div>
      );
    }
+    
+    // 2. 인라인 컴포넌트가 있는 경우 -> 기존 v2 방식
+    if (inlineComponents.length > 0) {
+      return renderInlineComponents(tab, inlineComponents);
+    }
+    
+    // 3. 둘 다 없는 경우
+    return (
+      <div className="flex h-full w-full items-center justify-center rounded border-2 border-dashed border-gray-300 bg-gray-50">
+        <p className="text-muted-foreground text-sm">
+          {isDesignMode ? "컴포넌트를 드래그하여 추가하세요" : "컴포넌트가 없습니다"}
+        </p>
+      </div>
+    );
+  };

+  // screenId로 로드한 화면 컴포넌트 렌더링
+  const renderScreenComponents = (components: ComponentData[]) => {
+    // InteractiveScreenViewerDynamic 동적 로드
+    const InteractiveScreenViewerDynamic = require("@/components/screen/InteractiveScreenViewerDynamic").InteractiveScreenViewerDynamic;
+    
+    // 컴포넌트들의 최대 위치를 계산하여 스크롤 가능한 영역 확보
+    const maxBottom = Math.max(
+      ...components.map((c) => (c.position?.y || 0) + (c.size?.height || 100)),
+      300
+    );
+    const maxRight = Math.max(
+      ...components.map((c) => (c.position?.x || 0) + (c.size?.width || 200)),
+      400
+    );
+    
+    return (
+      <div 
+        className="relative h-full w-full overflow-auto"
+        style={{ 
+          minHeight: maxBottom + 20,
+          minWidth: maxRight + 20,
+        }}
+      >
+        {components.map((comp) => (
+          <div
+            key={comp.id}
+            className="absolute"
+            style={{
+              left: comp.position?.x || 0,
+              top: comp.position?.y || 0,
+              width: comp.size?.width || "auto",
+              height: comp.size?.height || "auto",
+            }}
+          >
+            <InteractiveScreenViewerDynamic
+              component={comp}
+              allComponents={components}
+              formData={formData}
+              onFormDataChange={onFormDataChange}
+              menuObjid={menuObjid}
+            />
+          </div>
+        ))}
+      </div>
+    );
+  };
+
+  // 인라인 컴포넌트 렌더링 (v2 방식)
+  const renderInlineComponents = (tab: TabItem, components: TabInlineComponent[]) => {
    // 컴포넌트들의 최대 위치를 계산하여 스크롤 가능한 영역 확보
    const maxBottom = Math.max(
      ...components.map((c) => (c.position?.y || 0) + (c.size?.height || 100)),
@@ -256,7 +384,7 @@ export function TabsWidget({
                forceMount
                className={cn("h-full overflow-auto", !isActive && "hidden")}
              >
-                {shouldRender && renderTabComponents(tab)}
+                {shouldRender && renderTabContent(tab)}
              </TabsContent>
            );
          })}