수주등록 저장기능

2025-11-20 15:30:00 +09:00 · 2025-11-20 15:30:00 +09:00 · 45ac397417
parent b46559ba78
commit 45ac397417
4 changed files with 107 additions and 47 deletions
--- a/frontend/components/common/ScreenModal.tsx
+++ b/frontend/components/common/ScreenModal.tsx
@ -31,7 +31,7 @@ interface ScreenModalProps {
 }

 export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
-  const { userId } = useAuth();
+  const { userId, userName, user } = useAuth();

  const [modalState, setModalState] = useState<ScreenModalState>({
    isOpen: false,
@ -587,6 +587,9 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
                        id: modalState.screenId!,
                        tableName: screenData.screenInfo?.tableName,
                      }}
+                      userId={userId}
+                      userName={userName}
+                      companyCode={user?.companyCode}
                    />
                  );
                })}
--- a/frontend/components/screen/InteractiveScreenViewerDynamic.tsx
+++ b/frontend/components/screen/InteractiveScreenViewerDynamic.tsx
@ -42,6 +42,10 @@ interface InteractiveScreenViewerProps {
  onSave?: () => Promise<void>;
  onRefresh?: () => void;
  onFlowRefresh?: () => void;
+  // 🆕 외부에서 전달받는 사용자 정보 (ScreenModal 등에서 사용)
+  userId?: string;
+  userName?: string;
+  companyCode?: string;
 }

 export const InteractiveScreenViewerDynamic: React.FC<InteractiveScreenViewerProps> = ({
@ -54,9 +58,24 @@ export const InteractiveScreenViewerDynamic: React.FC<InteractiveScreenViewerPro
  onSave,
  onRefresh,
  onFlowRefresh,
+  userId: externalUserId,
+  userName: externalUserName,
+  companyCode: externalCompanyCode,
 }) => {
  const { isPreviewMode } = useScreenPreview(); // 프리뷰 모드 확인
-  const { userName, user } = useAuth();
+  const { userName: authUserName, user: authUser } = useAuth();
+
+  // 외부에서 전달받은 사용자 정보가 있으면 우선 사용 (ScreenModal 등에서)
+  const userName = externalUserName || authUserName;
+  const user =
+    externalUserId && externalUserId !== authUser?.userId
+      ? {
+          userId: externalUserId,
+          userName: externalUserName || authUserName || "",
+          companyCode: externalCompanyCode || authUser?.companyCode || "",
+          isAdmin: authUser?.isAdmin || false,
+        }
+      : authUser;
  const [localFormData, setLocalFormData] = useState<Record<string, any>>({});
  const [dateValues, setDateValues] = useState<Record<string, Date | undefined>>({});

@ -142,16 +161,12 @@ export const InteractiveScreenViewerDynamic: React.FC<InteractiveScreenViewerPro
        }

        // input, select 등의 폼 요소에서만 작동
-        if (
-          target.tagName === "INPUT" ||
-          target.tagName === "SELECT" ||
-          target.getAttribute("role") === "combobox"
-        ) {
+        if (target.tagName === "INPUT" || target.tagName === "SELECT" || target.getAttribute("role") === "combobox") {
          e.preventDefault();

          // 모든 포커스 가능한 요소 찾기
          const focusableElements = document.querySelectorAll<HTMLElement>(
-            'input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled]), [role="combobox"]:not([disabled])'
+            'input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled]), [role="combobox"]:not([disabled])',
          );

          // 화면에 보이는 순서(Y 좌표 → X 좌표)대로 정렬
@ -193,7 +208,7 @@ export const InteractiveScreenViewerDynamic: React.FC<InteractiveScreenViewerPro
    const initAutoInputFields = async () => {
      for (const comp of allComponents) {
        // type: "component" 또는 type: "widget" 모두 처리
-        if (comp.type === 'widget' || comp.type === 'component') {
+        if (comp.type === "widget" || comp.type === "component") {
          const widget = comp as any;
          const fieldName = widget.columnName || widget.id;

@ -202,7 +217,7 @@ export const InteractiveScreenViewerDynamic: React.FC<InteractiveScreenViewerPro
            const autoFillConfig = widget.autoFill || (comp as any).autoFill;
            const currentValue = formData[fieldName];

-            if (currentValue === undefined || currentValue === '') {
+            if (currentValue === undefined || currentValue === "") {
              const { sourceTable, filterColumn, userField, displayColumn } = autoFillConfig;

              // 사용자 정보에서 필터 값 가져오기
@ -211,12 +226,7 @@ export const InteractiveScreenViewerDynamic: React.FC<InteractiveScreenViewerPro
              if (userValue && sourceTable && filterColumn && displayColumn) {
                try {
                  const { tableTypeApi } = await import("@/lib/api/screen");
-                  const result = await tableTypeApi.getTableRecord(
-                    sourceTable,
-                    filterColumn,
-                    userValue,
-                    displayColumn
-                  );
+                  const result = await tableTypeApi.getTableRecord(sourceTable, filterColumn, userValue, displayColumn);

                  updateFormData(fieldName, result.value);
                } catch (error) {
@ -329,10 +339,13 @@ export const InteractiveScreenViewerDynamic: React.FC<InteractiveScreenViewerPro
            setFlowSelectedData(selectedData);
            setFlowSelectedStepId(stepId);
          }}
-          onRefresh={onRefresh || (() => {
-            // 부모로부터 전달받은 onRefresh 또는 기본 동작
-            console.log("🔄 InteractiveScreenViewerDynamic onRefresh 호출");
-          })}
+          onRefresh={
+            onRefresh ||
+            (() => {
+              // 부모로부터 전달받은 onRefresh 또는 기본 동작
+              console.log("🔄 InteractiveScreenViewerDynamic onRefresh 호출");
+            })
+          }
          onFlowRefresh={onFlowRefresh}
          onClose={() => {
            // buttonActions.ts가 이미 처리함
@ -357,7 +370,7 @@ export const InteractiveScreenViewerDynamic: React.FC<InteractiveScreenViewerPro
      return React.cloneElement(element, {
        style: {
          ...element.props.style,
-          ...styleWithoutSize,  // width/height 제외한 스타일만 적용
+          ...styleWithoutSize, // width/height 제외한 스타일만 적용
          width: "100%",
          height: "100%",
          minHeight: "100%",
@ -563,8 +576,8 @@ export const InteractiveScreenViewerDynamic: React.FC<InteractiveScreenViewerPro
          backgroundColor: config?.backgroundColor || comp.style?.backgroundColor,
          color: config?.textColor || comp.style?.color,
          // 부모 컨테이너 크기에 맞춤
-          width: '100%',
-          height: '100%',
+          width: "100%",
+          height: "100%",
        }}
      >
        {label || "버튼"}
@ -698,9 +711,9 @@ export const InteractiveScreenViewerDynamic: React.FC<InteractiveScreenViewerPro
    left: position?.x || 0,
    top: position?.y || 0,
    zIndex: position?.z || 1,
-    ...styleWithoutSize,  // width/height 제외한 스타일만 먼저 적용
-    width: size?.width || 200,  // size의 픽셀 값이 최종 우선순위
-    height: isTableSearchWidget ? "auto" : (size?.height || 10),
+    ...styleWithoutSize, // width/height 제외한 스타일만 먼저 적용
+    width: size?.width || 200, // size의 픽셀 값이 최종 우선순위
+    height: isTableSearchWidget ? "auto" : size?.height || 10,
    minHeight: isTableSearchWidget ? "48px" : undefined,
  };

--- a/frontend/components/screen/ScreenList.tsx
+++ b/frontend/components/screen/ScreenList.tsx
@ -125,7 +125,10 @@ export default function ScreenList({ onScreenSelect, selectedScreen, onDesignScr
    screenName: "",
    description: "",
    isActive: "Y",
+    tableName: "",
  });
+  const [tables, setTables] = useState<string[]>([]);
+  const [loadingTables, setLoadingTables] = useState(false);

  // 미리보기 관련 상태
  const [previewDialogOpen, setPreviewDialogOpen] = useState(false);
@ -260,14 +263,31 @@ export default function ScreenList({ onScreenSelect, selectedScreen, onDesignScr
    onScreenSelect(screen);
  };

-  const handleEdit = (screen: ScreenDefinition) => {
+  const handleEdit = async (screen: ScreenDefinition) => {
    setScreenToEdit(screen);
    setEditFormData({
      screenName: screen.screenName,
      description: screen.description || "",
      isActive: screen.isActive,
+      tableName: screen.tableName || "",
    });
    setEditDialogOpen(true);
+
+    // 테이블 목록 로드
+    try {
+      setLoadingTables(true);
+      const { tableManagementApi } = await import("@/lib/api/tableManagement");
+      const response = await tableManagementApi.getTableList();
+      if (response.success && response.data) {
+        // tableName만 추출 (camelCase)
+        const tableNames = response.data.map((table: any) => table.tableName);
+        setTables(tableNames);
+      }
+    } catch (error) {
+      console.error("테이블 목록 조회 실패:", error);
+    } finally {
+      setLoadingTables(false);
+    }
  };

  const handleEditSave = async () => {
@ -1180,6 +1200,25 @@ export default function ScreenList({ onScreenSelect, selectedScreen, onDesignScr
                placeholder="화면명을 입력하세요"
              />
            </div>
+            <div className="space-y-2">
+              <Label htmlFor="edit-tableName">테이블 *</Label>
+              <Select
+                value={editFormData.tableName}
+                onValueChange={(value) => setEditFormData({ ...editFormData, tableName: value })}
+                disabled={loadingTables}
+              >
+                <SelectTrigger id="edit-tableName">
+                  <SelectValue placeholder={loadingTables ? "로딩 중..." : "테이블을 선택하세요"} />
+                </SelectTrigger>
+                <SelectContent>
+                  {tables.map((tableName) => (
+                    <SelectItem key={tableName} value={tableName}>
+                      {tableName}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
            <div className="space-y-2">
              <Label htmlFor="edit-description">설명</Label>
              <Textarea
@ -1210,7 +1249,7 @@ export default function ScreenList({ onScreenSelect, selectedScreen, onDesignScr
            <Button variant="outline" onClick={() => setEditDialogOpen(false)}>
              취소
            </Button>
-            <Button onClick={handleEditSave} disabled={!editFormData.screenName.trim()}>
+            <Button onClick={handleEditSave} disabled={!editFormData.screenName.trim() || !editFormData.tableName.trim()}>
              저장
            </Button>
          </DialogFooter>
--- a/frontend/lib/registry/components/conditional-container/ConditionalSectionViewer.tsx
+++ b/frontend/lib/registry/components/conditional-container/ConditionalSectionViewer.tsx
@ -7,6 +7,7 @@ import { cn } from "@/lib/utils";
 import { Loader2 } from "lucide-react";
 import { screenApi } from "@/lib/api/screen";
 import { ComponentData } from "@/types/screen";
+import { useAuth } from "@/hooks/useAuth";

 /**
 * 조건부 섹션 뷰어 컴포넌트
@ -24,6 +25,7 @@ export function ConditionalSectionViewer({
  formData,
  onFormDataChange,
 }: ConditionalSectionViewerProps) {
+  const { userId, userName, user } = useAuth();
  const [isLoading, setIsLoading] = useState(false);
  const [components, setComponents] = useState<ComponentData[]>([]);
  const [screenInfo, setScreenInfo] = useState<{ id: number; tableName?: string } | null>(null);
@ -142,6 +144,9 @@ export function ConditionalSectionViewer({
                    onClick={() => {}}
                    screenId={screenInfo?.id}
                    tableName={screenInfo?.tableName}
+                    userId={userId}
+                    userName={userName}
+                    companyCode={user?.companyCode}
                    formData={formData}
                    onFormDataChange={onFormDataChange}
                  />