From 49da393f17e33e89e5f2dd90f2ddcdc8c36ee167 Mon Sep 17 00:00:00 2001
From: SeongHyun Kim <kksh7842@gmail.com>
Date: Wed, 25 Mar 2026 16:08:32 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20PopFieldComponent=20preview=20fetch?=
 =?UTF-8?q?=EC=97=90=20json=5Fextract=5Flookup=20=EC=B2=98=EB=A6=AC=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20?=
 =?UTF-8?q?=EB=A7=88=EC=9A=B4=ED=8A=B8=20=EC=8B=9C=20cart=5Fitems.row=5Fda?=
 =?UTF-8?q?ta=EC=97=90=EC=84=9C=20=EC=BD=94=EB=93=9C=EA=B0=92=EC=9D=84=20?=
 =?UTF-8?q?=EC=B6=94=EC=B6=9C=ED=95=9C=20=ED=9B=84=20=EC=B0=B8=EC=A1=B0=20?=
 =?UTF-8?q?=ED=85=8C=EC=9D=B4=EB=B8=94=EC=97=90=EC=84=9C=20=ED=91=9C?=
 =?UTF-8?q?=EC=8B=9C=EA=B0=92=EC=9D=84=20=EC=A1=B0=ED=9A=8C=ED=95=98?=
 =?UTF-8?q?=EB=8A=94=20json=5Fextract=5Flookup=EC=9D=84=20preview=20fetch?=
 =?UTF-8?q?=EC=97=90=EB=8F=84=20=EC=B6=94=EA=B0=80=ED=95=9C=EB=8B=A4.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pop-field/PopFieldComponent.tsx           | 38 +++++++++++++++++++
 1 file changed, 38 insertions(+)

diff --git a/frontend/lib/registry/pop-components/pop-field/PopFieldComponent.tsx b/frontend/lib/registry/pop-components/pop-field/PopFieldComponent.tsx
index 9a65e0fb..16b68ca3 100644
--- a/frontend/lib/registry/pop-components/pop-field/PopFieldComponent.tsx
+++ b/frontend/lib/registry/pop-components/pop-field/PopFieldComponent.tsx
@@ -362,6 +362,7 @@ export function PopFieldComponent({
         const row = res.data[0] as Record<string, unknown>;
 
         const extracted: Record<string, unknown> = {};
+        const previewLookupQueue: { fieldId: string; codeValue: string; table: string; codeCol: string; displayCol: string }[] = [];
         for (const mapping of cfg.readSource!.fieldMappings || []) {
           if (mapping.valueSource === "json_extract" && mapping.columnName && mapping.jsonKey) {
             const rawVal = row[mapping.columnName];
@@ -372,11 +373,48 @@ export function PopFieldComponent({
               parsed = rawVal as Record<string, unknown>;
             }
             extracted[mapping.fieldId] = parsed[mapping.jsonKey] ?? "";
+          } else if (mapping.valueSource === "json_extract_lookup" && mapping.columnName && mapping.jsonKey && mapping.lookupTable && mapping.lookupCodeColumn && mapping.lookupDisplayColumn) {
+            const rawVal = row[mapping.columnName];
+            let parsed: Record<string, unknown> = {};
+            if (typeof rawVal === "string") {
+              try { parsed = JSON.parse(rawVal); } catch { /* ignore */ }
+            } else if (typeof rawVal === "object" && rawVal !== null) {
+              parsed = rawVal as Record<string, unknown>;
+            }
+            const codeValue = String(parsed[mapping.jsonKey] ?? "");
+            if (codeValue) {
+              previewLookupQueue.push({ fieldId: mapping.fieldId, codeValue, table: mapping.lookupTable, codeCol: mapping.lookupCodeColumn, displayCol: mapping.lookupDisplayColumn });
+            } else {
+              extracted[mapping.fieldId] = "";
+            }
           } else if (mapping.valueSource === "db_column" && mapping.columnName) {
             extracted[mapping.fieldId] = row[mapping.columnName] ?? "";
           }
         }
 
+        // json_extract_lookup: 코드 값으로 참조 테이블 조회하여 표시명 획득 (미리보기)
+        if (previewLookupQueue.length > 0) {
+          const previewLookupResults = await Promise.allSettled(
+            previewLookupQueue.map(async (lq) => {
+              const lookupRes = await dataApi.getTableData(lq.table, {
+                page: 1,
+                size: 1,
+                filters: { [lq.codeCol]: lq.codeValue },
+              });
+              if (Array.isArray(lookupRes.data) && lookupRes.data.length > 0) {
+                const lookupRow = lookupRes.data[0] as Record<string, unknown>;
+                return { fieldId: lq.fieldId, value: lookupRow[lq.displayCol] ?? lq.codeValue };
+              }
+              return { fieldId: lq.fieldId, value: lq.codeValue };
+            }),
+          );
+          for (const result of previewLookupResults) {
+            if (result.status === "fulfilled") {
+              extracted[result.value.fieldId] = result.value.value;
+            }
+          }
+        }
+
         const allFieldsInConfig = cfg.sections.flatMap((s) => s.fields || []);
         const valuesUpdate: Record<string, unknown> = {};
         for (const [fieldId, val] of Object.entries(extracted)) {