feat: implement real-time numbering preview with manual input handling

- Enhanced the `previewCode` endpoint to accept a new `manualInputValue` parameter, allowing for dynamic sequence generation based on user input. - Updated the `NumberingRuleService` to skip legacy sequence lookups when manual input is not provided, ensuring accurate initial sequence display. - Integrated debounce functionality in the `V2Input` component to optimize API calls for real-time suffix updates as users type. - Refactored category resolution logic into a helper function to reduce code duplication and improve maintainability. These changes significantly improve the user experience by providing immediate feedback on numbering sequences based on manual inputs.
2026-03-12 16:07:13 +09:00
parent 93c6c45ce8
commit 1a11b08487
7 changed files with 239 additions and 224 deletions
--- a/backend-node/src/controllers/numberingRuleController.ts
+++ b/backend-node/src/controllers/numberingRuleController.ts
@@ -311,13 +311,14 @@ router.post(
  async (req: AuthenticatedRequest, res: Response) => {
    const companyCode = req.user!.companyCode;
    const { ruleId } = req.params;
-    const { formData } = req.body; // 폼 데이터 (카테고리 기반 채번 시 사용)
+    const { formData, manualInputValue } = req.body;

    try {
      const previewCode = await numberingRuleService.previewCode(
        ruleId,
        companyCode,
-        formData
+        formData,
+        manualInputValue
      );
      return res.json({ success: true, data: { generatedCode: previewCode } });
    } catch (error: any) {
--- a/backend-node/src/services/numberingRuleService.ts
+++ b/backend-node/src/services/numberingRuleService.ts
@@ -1086,22 +1086,30 @@ class NumberingRuleService {
   * @param ruleId 채번 규칙 ID
   * @param companyCode 회사 코드
   * @param formData 폼 데이터 (카테고리 기반 채번 시 사용)
+   * @param manualInputValue 수동 입력 값 (접두어별 순번 조회용)
   */
  async previewCode(
    ruleId: string,
    companyCode: string,
-    formData?: Record<string, any>
+    formData?: Record<string, any>,
+    manualInputValue?: string
  ): Promise<string> {
    const rule = await this.getRuleById(ruleId, companyCode);
    if (!rule) throw new Error("규칙을 찾을 수 없습니다");

-    // prefix_key 기반 순번 조회
-    const prefixKey = await this.buildPrefixKey(rule, formData);
+    // 수동 파트가 있는데 입력값이 없으면 레거시 공용 시퀀스 조회를 건너뜀
+    const hasManualPart = rule.parts.some((p: any) => p.generationMethod === "manual");
+    const skipSequenceLookup = hasManualPart && !manualInputValue;
+
+    const manualValues = manualInputValue ? [manualInputValue] : undefined;
+    const prefixKey = await this.buildPrefixKey(rule, formData, manualValues);
    const pool = getPool();
-    const currentSeq = await this.getSequenceForPrefix(pool, ruleId, companyCode, prefixKey);
+    const currentSeq = skipSequenceLookup
+      ? 0
+      : await this.getSequenceForPrefix(pool, ruleId, companyCode, prefixKey);

    logger.info("미리보기: prefix_key 기반 순번 조회", {
-      ruleId, prefixKey, currentSeq,
+      ruleId, prefixKey, currentSeq, skipSequenceLookup,
    });

    const parts = await Promise.all(rule.parts
@@ -1116,7 +1124,8 @@ class NumberingRuleService {
        switch (part.partType) {
          case "sequence": {
            const length = autoConfig.sequenceLength || 3;
-            const nextSequence = currentSeq + 1;
+            const startFrom = autoConfig.startFrom || 1;
+            const nextSequence = currentSeq + startFrom;
            return String(nextSequence).padStart(length, "0");
          }

@@ -1158,110 +1167,8 @@ class NumberingRuleService {
            return autoConfig.textValue || "TEXT";
          }

-          case "category": {
-            // 카테고리 기반 코드 생성
-            const categoryKey = autoConfig.categoryKey; // 예: "item_info.material"
-            const categoryMappings = autoConfig.categoryMappings || [];
-
-            if (!categoryKey || !formData) {
-              logger.warn("카테고리 키 또는 폼 데이터 없음", {
-                categoryKey,
-                hasFormData: !!formData,
-              });
-              return "";
-            }
-
-            // categoryKey에서 컬럼명 추출 (예: "item_info.material" -> "material")
-            const columnName = categoryKey.includes(".")
-              ? categoryKey.split(".")[1]
-              : categoryKey;
-
-            // 폼 데이터에서 해당 컬럼의 값 가져오기
-            const selectedValue = formData[columnName];
-
-            logger.info("카테고리 파트 처리", {
-              categoryKey,
-              columnName,
-              selectedValue,
-              formDataKeys: Object.keys(formData),
-              mappingsCount: categoryMappings.length,
-            });
-
-            if (!selectedValue) {
-              logger.warn("카테고리 값이 선택되지 않음", {
-                columnName,
-                formDataKeys: Object.keys(formData),
-              });
-              return "";
-            }
-
-            // 카테고리 매핑에서 해당 값에 대한 형식 찾기
-            // selectedValue는 valueCode일 수 있음 (V2Select에서 valueCode를 value로 사용)
-            const selectedValueStr = String(selectedValue);
-            let mapping = categoryMappings.find((m: any) => {
-              // ID로 매칭 (기존 방식: V2Select가 valueId를 사용하던 경우)
-              if (m.categoryValueId?.toString() === selectedValueStr)
-                return true;
-              // valueCode로 매칭 (매핑에 categoryValueCode가 있는 경우)
-              if (m.categoryValueCode && m.categoryValueCode === selectedValueStr)
-                return true;
-              // 라벨로 매칭 (폴백)
-              if (m.categoryValueLabel === selectedValueStr) return true;
-              return false;
-            });
-
-            // 매핑을 못 찾았으면 category_values 테이블에서 valueCode → valueId 역변환 시도
-            if (!mapping) {
-              try {
-                const pool = getPool();
-                const [catTableName, catColumnName] = categoryKey.includes(".")
-                  ? categoryKey.split(".")
-                  : [categoryKey, categoryKey];
-                const cvResult = await pool.query(
-                  `SELECT value_id, value_code, value_label FROM category_values 
-                   WHERE table_name = $1 AND column_name = $2 AND value_code = $3 LIMIT 1`,
-                  [catTableName, catColumnName, selectedValueStr]
-                );
-                if (cvResult.rows.length > 0) {
-                  const resolvedId = cvResult.rows[0].value_id;
-                  const resolvedLabel = cvResult.rows[0].value_label;
-                  mapping = categoryMappings.find((m: any) => {
-                    if (m.categoryValueId?.toString() === String(resolvedId)) return true;
-                    if (m.categoryValueLabel === resolvedLabel) return true;
-                    return false;
-                  });
-                  if (mapping) {
-                    logger.info("카테고리 매핑 역변환 성공 (valueCode→valueId)", {
-                      valueCode: selectedValueStr,
-                      resolvedId,
-                      resolvedLabel,
-                      format: mapping.format,
-                    });
-                  }
-                }
-              } catch (lookupError: any) {
-                logger.warn("카테고리 값 역변환 조회 실패", { error: lookupError.message });
-              }
-            }
-
-            if (mapping) {
-              logger.info("카테고리 매핑 적용", {
-                selectedValue,
-                format: mapping.format,
-                categoryValueLabel: mapping.categoryValueLabel,
-              });
-              return mapping.format || "";
-            }
-
-            logger.warn("카테고리 매핑을 찾을 수 없음", {
-              selectedValue,
-              availableMappings: categoryMappings.map((m: any) => ({
-                id: m.categoryValueId,
-                label: m.categoryValueLabel,
-              })),
-            });
-            return "";
-          }
+          case "category":
+            return this.resolveCategoryFormat(autoConfig, formData);

          case "reference": {
            const refColumn = autoConfig.referenceColumnName;
@@ -1364,7 +1271,9 @@ class NumberingRuleService {
          switch (part.partType) {
            case "sequence": {
              const length = autoConfig.sequenceLength || 3;
-              return String(allocatedSequence).padStart(length, "0");
+              const startFrom = autoConfig.startFrom || 1;
+              const actualSequence = allocatedSequence + startFrom - 1;
+              return String(actualSequence).padStart(length, "0");
            }

            case "number": {
@@ -1401,65 +1310,14 @@ class NumberingRuleService {
              return autoConfig.textValue || "TEXT";
            }

-            case "category": {
-              const categoryKey = autoConfig.categoryKey;
-              const categoryMappings = autoConfig.categoryMappings || [];
-
-              if (!categoryKey || !formData) {
-                return "";
-              }
-
-              const columnName = categoryKey.includes(".")
-                ? categoryKey.split(".")[1]
-                : categoryKey;
-
-              const selectedValue = formData[columnName];
-
-              if (!selectedValue) {
-                return "";
-              }
-
-              const selectedValueStr = String(selectedValue);
-              let allocMapping = categoryMappings.find((m: any) => {
-                if (m.categoryValueId?.toString() === selectedValueStr) return true;
-                if (m.categoryValueCode && m.categoryValueCode === selectedValueStr) return true;
-                if (m.categoryValueLabel === selectedValueStr) return true;
-                return false;
-              });
-
-              if (!allocMapping) {
-                try {
-                  const pool3 = getPool();
-                  const [ct3, cc3] = categoryKey.includes(".") ? categoryKey.split(".") : [categoryKey, categoryKey];
-                  const cvr3 = await pool3.query(
-                    `SELECT value_id, value_label FROM category_values WHERE table_name = $1 AND column_name = $2 AND value_code = $3 LIMIT 1`,
-                    [ct3, cc3, selectedValueStr]
-                  );
-                  if (cvr3.rows.length > 0) {
-                    const rid3 = cvr3.rows[0].value_id;
-                    const rlabel3 = cvr3.rows[0].value_label;
-                    allocMapping = categoryMappings.find((m: any) => {
-                      if (m.categoryValueId?.toString() === String(rid3)) return true;
-                      if (m.categoryValueLabel === rlabel3) return true;
-                      return false;
-                    });
-                  }
-                } catch { /* ignore */ }
-              }
-
-              if (allocMapping) {
-                return allocMapping.format || "";
-              }
-
-              return "";
-            }
+            case "category":
+              return this.resolveCategoryFormat(autoConfig, formData);

            case "reference": {
              const refColumn = autoConfig.referenceColumnName;
              if (refColumn && formData && formData[refColumn]) {
                return String(formData[refColumn]);
              }
-              logger.warn("reference 파트: 참조 컬럼 값 없음", { refColumn, formDataKeys: formData ? Object.keys(formData) : [] });
              return "";
            }

@@ -1525,57 +1383,12 @@ class NumberingRuleService {
            return autoConfig.textValue || "";
          case "date":
            return "DATEPART";
-          case "category": {
-            const catKey2 = autoConfig.categoryKey;
-            const catMappings2 = autoConfig.categoryMappings || [];
-
-            if (!catKey2 || !formData) {
-              return "";
-            }
-
-            const colName2 = catKey2.includes(".")
-              ? catKey2.split(".")[1]
-              : catKey2;
-            const selVal2 = formData[colName2];
-
-            if (!selVal2) {
-              return "";
-            }
-
-            const selValStr2 = String(selVal2);
-            let catMapping2 = catMappings2.find((m: any) => {
-              if (m.categoryValueId?.toString() === selValStr2) return true;
-              if (m.categoryValueCode && m.categoryValueCode === selValStr2) return true;
-              if (m.categoryValueLabel === selValStr2) return true;
-              return false;
-            });
-
-            if (!catMapping2) {
-              try {
-                const pool2 = getPool();
-                const [ct2, cc2] = catKey2.includes(".") ? catKey2.split(".") : [catKey2, catKey2];
-                const cvr2 = await pool2.query(
-                  `SELECT value_id, value_label FROM category_values WHERE table_name = $1 AND column_name = $2 AND value_code = $3 LIMIT 1`,
-                  [ct2, cc2, selValStr2]
-                );
-                if (cvr2.rows.length > 0) {
-                  const rid2 = cvr2.rows[0].value_id;
-                  const rlabel2 = cvr2.rows[0].value_label;
-                  catMapping2 = catMappings2.find((m: any) => {
-                    if (m.categoryValueId?.toString() === String(rid2)) return true;
-                    if (m.categoryValueLabel === rlabel2) return true;
-                    return false;
-                  });
-                }
-              } catch { /* ignore */ }
-            }
-
-            return catMapping2?.format || "";
-          }
+          case "category":
+            return this.resolveCategoryFormat(autoConfig, formData);
          case "reference": {
-            const refCol2 = autoConfig.referenceColumnName;
-            if (refCol2 && formData && formData[refCol2]) {
-              return String(formData[refCol2]);
+            const refColumn = autoConfig.referenceColumnName;
+            if (refColumn && formData && formData[refColumn]) {
+              return String(formData[refColumn]);
            }
            return "";
          }
@@ -1622,6 +1435,60 @@ class NumberingRuleService {
    return extractedValues;
  }

+  /**
+   * 카테고리 매핑에서 format 값을 해석
+   * categoryKey + formData로 선택된 값을 찾고, 매핑 테이블에서 format 반환
+   */
+  private async resolveCategoryFormat(
+    autoConfig: Record<string, any>,
+    formData?: Record<string, any>
+  ): Promise<string> {
+    const categoryKey = autoConfig.categoryKey;
+    const categoryMappings = autoConfig.categoryMappings || [];
+
+    if (!categoryKey || !formData) return "";
+
+    const columnName = categoryKey.includes(".")
+      ? categoryKey.split(".")[1]
+      : categoryKey;
+    const selectedValue = formData[columnName];
+
+    if (!selectedValue) return "";
+
+    const selectedValueStr = String(selectedValue);
+    let mapping = categoryMappings.find((m: any) => {
+      if (m.categoryValueId?.toString() === selectedValueStr) return true;
+      if (m.categoryValueCode && m.categoryValueCode === selectedValueStr) return true;
+      if (m.categoryValueLabel === selectedValueStr) return true;
+      return false;
+    });
+
+    // 매핑 못 찾으면 category_values에서 valueCode → valueId 역변환
+    if (!mapping) {
+      try {
+        const pool = getPool();
+        const [tableName, colName] = categoryKey.includes(".")
+          ? categoryKey.split(".")
+          : [categoryKey, categoryKey];
+        const result = await pool.query(
+          `SELECT value_id, value_label FROM category_values WHERE table_name = $1 AND column_name = $2 AND value_code = $3 LIMIT 1`,
+          [tableName, colName, selectedValueStr]
+        );
+        if (result.rows.length > 0) {
+          const resolvedId = result.rows[0].value_id;
+          const resolvedLabel = result.rows[0].value_label;
+          mapping = categoryMappings.find((m: any) => {
+            if (m.categoryValueId?.toString() === String(resolvedId)) return true;
+            if (m.categoryValueLabel === resolvedLabel) return true;
+            return false;
+          });
+        }
+      } catch { /* ignore */ }
+    }
+
+    return mapping?.format || "";
+  }
+
  private formatDate(date: Date, format: string): string {
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, "0");