diff --git a/frontend/components/screen-embedding/EmbeddedScreen.tsx b/frontend/components/screen-embedding/EmbeddedScreen.tsx index d8e62c00..17cd240f 100644 --- a/frontend/components/screen-embedding/EmbeddedScreen.tsx +++ b/frontend/components/screen-embedding/EmbeddedScreen.tsx @@ -40,32 +40,33 @@ export const EmbeddedScreen = forwardRef(null); const [screenInfo, setScreenInfo] = useState(null); const [formData, setFormData] = useState>(initialFormData || {}); // ๐Ÿ†• ์ดˆ๊ธฐ ๋ฐ์ดํ„ฐ๋กœ ์‹œ์ž‘ + const [formDataVersion, setFormDataVersion] = useState(0); // ๐Ÿ†• ํผ ๋ฐ์ดํ„ฐ ๋ฒ„์ „ (๊ฐ•์ œ ๋ฆฌ๋ Œ๋”๋ง์šฉ) // ์ปดํฌ๋„ŒํŠธ ์ฐธ์กฐ ๋งต const componentRefs = useRef>(new Map()); - + // ๋ถ„ํ•  ํŒจ๋„ ์ปจํ…์ŠคํŠธ (๋ถ„ํ•  ํŒจ๋„ ๋‚ด๋ถ€์— ์žˆ์„ ๋•Œ๋งŒ ์‚ฌ์šฉ) const splitPanelContext = useSplitPanelContext(); - + // ๐Ÿ†• ์‚ฌ์šฉ์ž ์ •๋ณด ๊ฐ€์ ธ์˜ค๊ธฐ (์ €์žฅ ์•ก์…˜์— ํ•„์š”) const { userId, userName, companyCode } = useAuth(); // ์ปดํฌ๋„ŒํŠธ๋“ค์˜ ์‹ค์ œ ์˜์—ญ ๊ณ„์‚ฐ (๊ฐ€๋กœํญ ๋งž์ถค์„ ์œ„ํ•ด) const contentBounds = React.useMemo(() => { if (layout.length === 0) return { width: 0, height: 0 }; - + let maxRight = 0; let maxBottom = 0; - + layout.forEach((component) => { const { position: compPosition = { x: 0, y: 0 }, size = { width: 200, height: 40 } } = component; const right = (compPosition.x || 0) + (size.width || 200); const bottom = (compPosition.y || 0) + (size.height || 40); - + if (right > maxRight) maxRight = right; if (bottom > maxBottom) maxBottom = bottom; }); - + return { width: maxRight, height: maxBottom }; }, [layout]); @@ -92,26 +93,49 @@ export const EmbeddedScreen = forwardRef { // ์šฐ์ธก ํ™”๋ฉด์ธ ๊ฒฝ์šฐ์—๋งŒ ์ ์šฉ - if (position !== "right" || !splitPanelContext) return; - - // ์ž๋™ ๋ฐ์ดํ„ฐ ์ „๋‹ฌ์ด ๋น„ํ™œ์„ฑํ™”๋œ ๊ฒฝ์šฐ ์Šคํ‚ต - if (splitPanelContext.disableAutoDataTransfer) { - console.log("๐Ÿ”— [EmbeddedScreen] ์ž๋™ ๋ฐ์ดํ„ฐ ์ „๋‹ฌ ๋น„ํ™œ์„ฑํ™”๋จ - ๋ฒ„ํŠผ ํด๋ฆญ์œผ๋กœ๋งŒ ์ „๋‹ฌ"); + if (position !== "right" || !splitPanelContext) { return; } - - const mappedData = splitPanelContext.getMappedParentData(); - if (Object.keys(mappedData).length > 0) { - console.log("๐Ÿ”— [EmbeddedScreen] ๋ถ„ํ•  ํŒจ๋„ ๋ถ€๋ชจ ๋ฐ์ดํ„ฐ ์ž๋™ ๋ฐ˜์˜:", mappedData); - setFormData((prev) => ({ - ...prev, - ...mappedData, - })); + + // ์ž๋™ ๋ฐ์ดํ„ฐ ์ „๋‹ฌ์ด ๋น„ํ™œ์„ฑํ™”๋œ ๊ฒฝ์šฐ ์Šคํ‚ต + if (splitPanelContext.disableAutoDataTransfer) { + return; } - }, [position, splitPanelContext, splitPanelContext?.selectedLeftData]); + + // ๐Ÿ†• ํ˜„์žฌ ํ™”๋ฉด์˜ ๋ชจ๋“  ์ปดํฌ๋„ŒํŠธ์—์„œ columnName ์ˆ˜์ง‘ + const allColumnNames = layout.filter((comp) => comp.columnName).map((comp) => comp.columnName as string); + + // ๐Ÿ†• ๋ชจ๋“  ํ•„๋“œ๋ฅผ ๋นˆ ๊ฐ’์œผ๋กœ ์ดˆ๊ธฐํ™”ํ•œ ํ›„, selectedLeftData๋กœ ๋ฎ์–ด์“ฐ๊ธฐ + const initializedFormData: Record = {}; + + // ๋จผ์ € ๋ชจ๋“  ์ปฌ๋Ÿผ์„ ๋นˆ ๋ฌธ์ž์—ด๋กœ ์ดˆ๊ธฐํ™” + allColumnNames.forEach((colName) => { + initializedFormData[colName] = ""; + }); + + // selectedLeftData๊ฐ€ ์žˆ์œผ๋ฉด ํ•ด๋‹น ๊ฐ’์œผ๋กœ ๋ฎ์–ด์“ฐ๊ธฐ + if (selectedLeftData && Object.keys(selectedLeftData).length > 0) { + Object.keys(selectedLeftData).forEach((key) => { + // null/undefined๋Š” ๋นˆ ๋ฌธ์ž์—ด๋กœ, ๋‚˜๋จธ์ง€๋Š” ๊ทธ๋Œ€๋กœ + initializedFormData[key] = selectedLeftData[key] ?? ""; + }); + } + + console.log("๐Ÿ”— [EmbeddedScreen] ์šฐ์ธก ํผ ๋ฐ์ดํ„ฐ ๊ต์ฒด:", { + allColumnNames, + selectedLeftDataKeys: selectedLeftData ? Object.keys(selectedLeftData) : [], + initializedFormDataKeys: Object.keys(initializedFormData), + }); + + setFormData(initializedFormData); + setFormDataVersion((v) => v + 1); // ๐Ÿ†• ๋ฒ„์ „ ์ฆ๊ฐ€๋กœ ์ปดํฌ๋„ŒํŠธ ๊ฐ•์ œ ๋ฆฌ๋ Œ๋”๋ง + }, [position, splitPanelContext, selectedLeftData, layout]); // ์„ ํƒ ๋ณ€๊ฒฝ ์ด๋ฒคํŠธ ์ „ํŒŒ useEffect(() => { @@ -377,15 +401,15 @@ export const EmbeddedScreen = forwardRefํ™”๋ฉด์— ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค.

) : ( -
{layout.map((component) => { const { position: compPosition = { x: 0, y: 0, z: 1 }, size = { width: 200, height: 40 } } = component; - + // ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์ปจํ…Œ์ด๋„ˆ ๋„ˆ๋น„๋ฅผ ์ดˆ๊ณผํ•˜์ง€ ์•Š๋„๋ก ๋„ˆ๋น„ ์กฐ์ • // ๋ถ€๋ชจ ์ปจํ…Œ์ด๋„ˆ์˜ 100%๋ฅผ ๊ธฐ์ค€์œผ๋กœ ๊ณ„์‚ฐ const componentStyle: React.CSSProperties = { @@ -397,13 +421,9 @@ export const EmbeddedScreen = forwardRef +
= ({ const loadModalMappingColumns = async () => { // ์†Œ์Šค ํ…Œ์ด๋ธ”: ํ˜„์žฌ ํ™”๋ฉด์˜ ๋ถ„ํ•  ํŒจ๋„ ๋˜๋Š” ํ…Œ์ด๋ธ”์—์„œ ๊ฐ์ง€ - // allComponents์—์„œ split-panel-layout ๋˜๋Š” table-list ์ฐพ๊ธฐ let sourceTableName: string | null = null; + console.log("[openModalWithData] ์ปฌ๋Ÿผ ๋กœ๋“œ ์‹œ์ž‘:", { + allComponentsCount: allComponents.length, + currentTableName, + targetScreenId: config.action?.targetScreenId, + }); + + // ๋ชจ๋“  ์ปดํฌ๋„ŒํŠธ ํƒ€์ž… ๋กœ๊ทธ + allComponents.forEach((comp, idx) => { + const compType = comp.componentType || (comp as any).componentConfig?.type; + console.log(` [${idx}] componentType: ${compType}, tableName: ${(comp as any).componentConfig?.tableName || (comp as any).componentConfig?.leftPanel?.tableName || 'N/A'}`); + }); + for (const comp of allComponents) { const compType = comp.componentType || (comp as any).componentConfig?.type; + const compConfig = (comp as any).componentConfig || {}; + + // ๋ถ„ํ•  ํŒจ๋„ ํƒ€์ž…๋“ค (๋‹ค์–‘ํ•œ ๊ฒฝ๋กœ์—์„œ ํ…Œ์ด๋ธ”๋ช… ์ถ”์ถœ) if (compType === "split-panel-layout" || compType === "screen-split-panel") { - // ๋ถ„ํ•  ํŒจ๋„์˜ ์ขŒ์ธก ํ…Œ์ด๋ธ”๋ช… - sourceTableName = (comp as any).componentConfig?.leftPanel?.tableName || - (comp as any).componentConfig?.leftTableName; - break; + sourceTableName = compConfig?.leftPanel?.tableName || + compConfig?.leftTableName || + compConfig?.tableName; + if (sourceTableName) { + console.log(`โœ… [openModalWithData] split-panel-layout์—์„œ ์†Œ์Šค ํ…Œ์ด๋ธ” ๊ฐ์ง€: ${sourceTableName}`); + break; + } } + + // split-panel-layout2 ํƒ€์ž… (์ƒˆ๋กœ์šด ๋ถ„ํ•  ํŒจ๋„) + if (compType === "split-panel-layout2") { + sourceTableName = compConfig?.leftPanel?.tableName || + compConfig?.tableName || + compConfig?.leftTableName; + if (sourceTableName) { + console.log(`โœ… [openModalWithData] split-panel-layout2์—์„œ ์†Œ์Šค ํ…Œ์ด๋ธ” ๊ฐ์ง€: ${sourceTableName}`); + break; + } + } + + // ํ…Œ์ด๋ธ” ๋ฆฌ์ŠคํŠธ ํƒ€์ž… if (compType === "table-list") { - sourceTableName = (comp as any).componentConfig?.tableName; + sourceTableName = compConfig?.tableName; + if (sourceTableName) { + console.log(`โœ… [openModalWithData] table-list์—์„œ ์†Œ์Šค ํ…Œ์ด๋ธ” ๊ฐ์ง€: ${sourceTableName}`); + break; + } + } + + // ๐Ÿ†• ๋ชจ๋“  ์ปดํฌ๋„ŒํŠธ์—์„œ tableName ์ฐพ๊ธฐ (ํด๋ฐฑ) + if (!sourceTableName && compConfig?.tableName) { + sourceTableName = compConfig.tableName; + console.log(`โœ… [openModalWithData] ${compType}์—์„œ ์†Œ์Šค ํ…Œ์ด๋ธ” ๊ฐ์ง€ (ํด๋ฐฑ): ${sourceTableName}`); break; } } + + // ์—ฌ์ „ํžˆ ์—†์œผ๋ฉด currentTableName ์‚ฌ์šฉ (ํ™”๋ฉด ๋ ˆ๋ฒจ ํ…Œ์ด๋ธ”๋ช…) + if (!sourceTableName && currentTableName) { + sourceTableName = currentTableName; + console.log(`โœ… [openModalWithData] currentTableName์—์„œ ์†Œ์Šค ํ…Œ์ด๋ธ” ์‚ฌ์šฉ: ${sourceTableName}`); + } + + if (!sourceTableName) { + console.warn("[openModalWithData] ์†Œ์Šค ํ…Œ์ด๋ธ”์„ ์ฐพ์„ ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค."); + } // ์†Œ์Šค ํ…Œ์ด๋ธ” ์ปฌ๋Ÿผ ๋กœ๋“œ if (sourceTableName) { @@ -361,11 +411,11 @@ export const ButtonConfigPanel: React.FC = ({ if (Array.isArray(columnData)) { const columns = columnData.map((col: any) => ({ - name: col.name || col.columnName, - label: col.displayName || col.label || col.columnLabel || col.name || col.columnName, + name: col.name || col.columnName || col.column_name, + label: col.displayName || col.label || col.columnLabel || col.display_name || col.name || col.columnName || col.column_name, })); setModalSourceColumns(columns); - console.log(`โœ… [openModalWithData] ์†Œ์Šค ํ…Œ์ด๋ธ”(${sourceTableName}) ์ปฌ๋Ÿผ ๋กœ๋“œ:`, columns.length); + console.log(`โœ… [openModalWithData] ์†Œ์Šค ํ…Œ์ด๋ธ”(${sourceTableName}) ์ปฌ๋Ÿผ ๋กœ๋“œ ์™„๋ฃŒ:`, columns.length); } } } catch (error) { @@ -379,8 +429,12 @@ export const ButtonConfigPanel: React.FC = ({ try { // ํƒ€๊ฒŸ ํ™”๋ฉด ์ •๋ณด ๊ฐ€์ ธ์˜ค๊ธฐ const screenResponse = await apiClient.get(`/screen-management/screens/${targetScreenId}`); + console.log("[openModalWithData] ํƒ€๊ฒŸ ํ™”๋ฉด ์‘๋‹ต:", screenResponse.data); + if (screenResponse.data.success && screenResponse.data.data) { const targetTableName = screenResponse.data.data.tableName; + console.log("[openModalWithData] ํƒ€๊ฒŸ ํ™”๋ฉด ํ…Œ์ด๋ธ”๋ช…:", targetTableName); + if (targetTableName) { const columnResponse = await apiClient.get(`/table-management/tables/${targetTableName}/columns`); if (columnResponse.data.success) { @@ -390,23 +444,27 @@ export const ButtonConfigPanel: React.FC = ({ if (Array.isArray(columnData)) { const columns = columnData.map((col: any) => ({ - name: col.name || col.columnName, - label: col.displayName || col.label || col.columnLabel || col.name || col.columnName, + name: col.name || col.columnName || col.column_name, + label: col.displayName || col.label || col.columnLabel || col.display_name || col.name || col.columnName || col.column_name, })); setModalTargetColumns(columns); - console.log(`โœ… [openModalWithData] ํƒ€๊ฒŸ ํ…Œ์ด๋ธ”(${targetTableName}) ์ปฌ๋Ÿผ ๋กœ๋“œ:`, columns.length); + console.log(`โœ… [openModalWithData] ํƒ€๊ฒŸ ํ…Œ์ด๋ธ”(${targetTableName}) ์ปฌ๋Ÿผ ๋กœ๋“œ ์™„๋ฃŒ:`, columns.length); } } + } else { + console.warn("[openModalWithData] ํƒ€๊ฒŸ ํ™”๋ฉด์— ํ…Œ์ด๋ธ”๋ช…์ด ์—†์Šต๋‹ˆ๋‹ค."); } } } catch (error) { console.error("ํƒ€๊ฒŸ ํ™”๋ฉด ํ…Œ์ด๋ธ” ์ปฌ๋Ÿผ ๋กœ๋“œ ์‹คํŒจ:", error); } + } else { + console.warn("[openModalWithData] ํƒ€๊ฒŸ ํ™”๋ฉด ID๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค."); } }; loadModalMappingColumns(); - }, [config.action?.type, config.action?.targetScreenId, allComponents]); + }, [config.action?.type, config.action?.targetScreenId, allComponents, currentTableName]); // ํ™”๋ฉด ๋ชฉ๋ก ๊ฐ€์ ธ์˜ค๊ธฐ (ํ˜„์žฌ ํŽธ์ง‘ ์ค‘์ธ ํ™”๋ฉด์˜ ํšŒ์‚ฌ ์ฝ”๋“œ ๊ธฐ์ค€) useEffect(() => { @@ -1158,11 +1216,12 @@ export const ButtonConfigPanel: React.FC = ({

) : ( -
+
{(config.action?.fieldMappings || []).map((mapping: any, index: number) => ( -
- {/* ์†Œ์Šค ํ•„๋“œ ์„ ํƒ (Combobox) */} -
+
+ {/* ์†Œ์Šค ํ•„๋“œ ์„ ํƒ (Combobox) - ์„ธ๋กœ ๋ฐฐ์น˜ */} +
+ setModalSourcePopoverOpen((prev) => ({ ...prev, [index]: open }))} @@ -1171,15 +1230,17 @@ export const ButtonConfigPanel: React.FC = ({ - + = ({ value={modalSourceSearch[index] || ""} onValueChange={(value) => setModalSourceSearch((prev) => ({ ...prev, [index]: value }))} /> - + ์ปฌ๋Ÿผ์„ ์ฐพ์„ ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค {modalSourceColumns.map((col) => ( @@ -1208,9 +1269,9 @@ export const ButtonConfigPanel: React.FC = ({ mapping.sourceField === col.name ? "opacity-100" : "opacity-0" )} /> - {col.label} + {col.label} {col.label !== col.name && ( - ({col.name}) + ({col.name}) )} ))} @@ -1221,10 +1282,14 @@ export const ButtonConfigPanel: React.FC = ({
- โ†’ + {/* ํ™”์‚ดํ‘œ ํ‘œ์‹œ */} +
+ โ†“ +
- {/* ํƒ€๊ฒŸ ํ•„๋“œ ์„ ํƒ (Combobox) */} -
+ {/* ํƒ€๊ฒŸ ํ•„๋“œ ์„ ํƒ (Combobox) - ์„ธ๋กœ ๋ฐฐ์น˜ */} +
+ setModalTargetPopoverOpen((prev) => ({ ...prev, [index]: open }))} @@ -1233,15 +1298,17 @@ export const ButtonConfigPanel: React.FC = ({ - + = ({ value={modalTargetSearch[index] || ""} onValueChange={(value) => setModalTargetSearch((prev) => ({ ...prev, [index]: value }))} /> - + ์ปฌ๋Ÿผ์„ ์ฐพ์„ ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค {modalTargetColumns.map((col) => ( @@ -1270,9 +1337,9 @@ export const ButtonConfigPanel: React.FC = ({ mapping.targetField === col.name ? "opacity-100" : "opacity-0" )} /> - {col.label} + {col.label} {col.label !== col.name && ( - ({col.name}) + ({col.name}) )} ))} @@ -1284,19 +1351,22 @@ export const ButtonConfigPanel: React.FC = ({
{/* ์‚ญ์ œ ๋ฒ„ํŠผ */} - +
+ +
))}
diff --git a/frontend/lib/registry/components/button-primary/ButtonPrimaryComponent.tsx b/frontend/lib/registry/components/button-primary/ButtonPrimaryComponent.tsx index 7ba822b2..160591c6 100644 --- a/frontend/lib/registry/components/button-primary/ButtonPrimaryComponent.tsx +++ b/frontend/lib/registry/components/button-primary/ButtonPrimaryComponent.tsx @@ -880,6 +880,44 @@ export const ButtonPrimaryComponent: React.FC = ({ return; } + // ๋ชจ๋‹ฌ ์•ก์…˜์ธ๋ฐ ์„ ํƒ๋œ ๋ฐ์ดํ„ฐ๊ฐ€ ์žˆ์œผ๋ฉด ๊ฒฝ๊ณ  ๋ฉ”์‹œ์ง€ ํ‘œ์‹œํ•˜๊ณ  ์ค‘๋‹จ + // (์‹ ๊ทœ ๋“ฑ๋ก ๋ชจ๋‹ฌ์—์„œ ์„ ํƒ๋œ ๋ฐ์ดํ„ฐ๊ฐ€ ์ดˆ๊ธฐ๊ฐ’์œผ๋กœ ์ „๋‹ฌ๋˜๋Š” ๊ฒƒ์„ ๋ฐฉ์ง€) + if (processedConfig.action.type === "modal" && effectiveSelectedRowsData && effectiveSelectedRowsData.length > 0) { + toast.warning("์‹ ๊ทœ ๋“ฑ๋ก ์‹œ์—๋Š” ํ…Œ์ด๋ธ”์—์„œ ์„ ํƒ๋œ ํ•ญ๋ชฉ์„ ํ•ด์ œํ•ด์ฃผ์„ธ์š”."); + return; + } + + // ์ˆ˜์ •(edit) ์•ก์…˜ ๊ฒ€์ฆ + if (processedConfig.action.type === "edit") { + // ์„ ํƒ๋œ ๋ฐ์ดํ„ฐ๊ฐ€ ์—†์œผ๋ฉด ๊ฒฝ๊ณ  + if (!effectiveSelectedRowsData || effectiveSelectedRowsData.length === 0) { + toast.warning("์ˆ˜์ •ํ•  ํ•ญ๋ชฉ์„ ์„ ํƒํ•ด์ฃผ์„ธ์š”."); + return; + } + + // groupByColumns ์„ค์ •์ด ์žˆ์œผ๋ฉด ํ•ด๋‹น ์ปฌ๋Ÿผ ๊ฐ’์ด ์œ ์ผํ•œ์ง€ ํ™•์ธ + const groupByColumns = processedConfig.action.groupByColumns; + if (groupByColumns && groupByColumns.length > 0 && effectiveSelectedRowsData.length > 1) { + // ์ฒซ ๋ฒˆ์งธ ๊ทธ๋ฃนํ•‘ ์ปฌ๋Ÿผ ๊ธฐ์ค€์œผ๋กœ ์ค‘๋ณต ์ฒดํฌ (์˜ˆ: order_no) + const groupByColumn = groupByColumns[0]; + const uniqueValues = new Set( + effectiveSelectedRowsData.map((row: any) => row[groupByColumn]).filter(Boolean) + ); + + if (uniqueValues.size > 1) { + // ์ปฌ๋Ÿผ๋ช…์„ ํ•œ๊ธ€๋กœ ๋ณ€ํ™˜ (order_no -> ์ˆ˜์ฃผ๋ฒˆํ˜ธ) + const columnLabels: Record = { + order_no: "์ˆ˜์ฃผ๋ฒˆํ˜ธ", + shipment_no: "์ถœํ•˜๋ฒˆํ˜ธ", + purchase_no: "๊ตฌ๋งค๋ฒˆํ˜ธ", + }; + const columnLabel = columnLabels[groupByColumn] || groupByColumn; + toast.warning(`${columnLabel} ํ•˜๋‚˜๋งŒ ์„ ํƒํ•ด์ฃผ์„ธ์š”. (ํ˜„์žฌ ${uniqueValues.size}๊ฐœ ์„ ํƒ๋จ)`); + return; + } + } + } + // ๐Ÿ†• ๋ชจ๋“  ์ปดํฌ๋„ŒํŠธ์˜ ์„ค์ • ์ˆ˜์ง‘ (parentDataMapping ๋“ฑ) const componentConfigs: Record = {}; if (allComponents && Array.isArray(allComponents)) { @@ -919,21 +957,27 @@ export const ButtonPrimaryComponent: React.FC = ({ } } - // ๐Ÿ†• ๋ถ„ํ•  ํŒจ๋„ ์šฐ์ธก์ด๋ฉด screenContext.formData์™€ props.formData๋ฅผ ๋ณ‘ํ•ฉ - // screenContext.formData: RepeaterFieldGroup ๋“ฑ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์ง์ ‘ ์—…๋ฐ์ดํŠธํ•œ ๋ฐ์ดํ„ฐ - // props.formData: ๋ถ€๋ชจ์—์„œ ์ „๋‹ฌ๋œ ํผ ๋ฐ์ดํ„ฐ + // ๐Ÿ†• ๋ถ„ํ•  ํŒจ๋„ ์šฐ์ธก์ด๋ฉด ์—ฌ๋Ÿฌ ์†Œ์Šค์—์„œ formData๋ฅผ ๋ณ‘ํ•ฉ + // ์šฐ์„ ์ˆœ์œ„: props.formData > screenContext.formData > splitPanelParentData const screenContextFormData = screenContext?.formData || {}; const propsFormData = formData || {}; - // ๋ณ‘ํ•ฉ: props.formData๋ฅผ ๊ธฐ๋ณธ์œผ๋กœ ํ•˜๊ณ , screenContext.formData๋กœ ์˜ค๋ฒ„๋ผ์ด๋“œ - // (RepeaterFieldGroup ๋ฐ์ดํ„ฐ๋Š” screenContext์—๋งŒ ์žˆ์Œ) - const effectiveFormData = { ...propsFormData, ...screenContextFormData }; + // ๋ณ‘ํ•ฉ: splitPanelParentData๋ฅผ ๊ธฐ๋ณธ์œผ๋กœ, props.formData, screenContext.formData ์ˆœ์œผ๋กœ ์˜ค๋ฒ„๋ผ์ด๋“œ + // (์ผ๋ฐ˜ ํผ ํ•„๋“œ๋Š” props.formData, RepeaterFieldGroup์€ screenContext.formData์— ์žˆ์Œ) + let effectiveFormData = { ...propsFormData, ...screenContextFormData }; + + // ๐Ÿ†• ๋ถ„ํ•  ํŒจ๋„ ์šฐ์ธก์ด๊ณ  formData๊ฐ€ ๋น„์–ด์žˆ์œผ๋ฉด splitPanelParentData ์‚ฌ์šฉ + if (splitPanelPosition === "right" && Object.keys(effectiveFormData).length === 0 && splitPanelParentData) { + effectiveFormData = { ...splitPanelParentData }; + console.log("๐Ÿ” [ButtonPrimary] ๋ถ„ํ•  ํŒจ๋„ ์šฐ์ธก - splitPanelParentData ์‚ฌ์šฉ:", Object.keys(effectiveFormData)); + } console.log("๐Ÿ” [ButtonPrimary] formData ์„ ํƒ:", { hasScreenContextFormData: Object.keys(screenContextFormData).length > 0, screenContextKeys: Object.keys(screenContextFormData), hasPropsFormData: Object.keys(propsFormData).length > 0, propsFormDataKeys: Object.keys(propsFormData), + hasSplitPanelParentData: !!splitPanelParentData && Object.keys(splitPanelParentData).length > 0, splitPanelPosition, effectiveFormDataKeys: Object.keys(effectiveFormData), }); diff --git a/frontend/lib/registry/components/text-input/TextInputComponent.tsx b/frontend/lib/registry/components/text-input/TextInputComponent.tsx index ad37f19f..8ffa8afe 100644 --- a/frontend/lib/registry/components/text-input/TextInputComponent.tsx +++ b/frontend/lib/registry/components/text-input/TextInputComponent.tsx @@ -53,7 +53,7 @@ export const TextInputComponent: React.FC = ({ // ์ž๋™์ƒ์„ฑ๋œ ๊ฐ’ ์ƒํƒœ const [autoGeneratedValue, setAutoGeneratedValue] = useState(""); - + // API ํ˜ธ์ถœ ์ค‘๋ณต ๋ฐฉ์ง€๋ฅผ ์œ„ํ•œ ref const isGeneratingRef = React.useRef(false); const hasGeneratedRef = React.useRef(false); @@ -104,7 +104,6 @@ export const TextInputComponent: React.FC = ({ const currentFormValue = formData?.[component.columnName]; const currentComponentValue = component.value; - // ์ž๋™์ƒ์„ฑ๋œ ๊ฐ’์ด ์—†๊ณ , ํ˜„์žฌ ๊ฐ’๋„ ์—†์„ ๋•Œ๋งŒ ์ƒ์„ฑ if (!autoGeneratedValue && !currentFormValue && !currentComponentValue) { isGeneratingRef.current = true; // ์ƒ์„ฑ ์‹œ์ž‘ ํ”Œ๋ž˜๊ทธ @@ -145,7 +144,7 @@ export const TextInputComponent: React.FC = ({ if (isInteractive && onFormDataChange && component.columnName) { console.log("๐Ÿ“ formData ์—…๋ฐ์ดํŠธ:", component.columnName, generatedValue); onFormDataChange(component.columnName, generatedValue); - + // ์ฑ„๋ฒˆ ๊ทœ์น™ ID๋„ ํ•จ๊ป˜ ์ €์žฅ (์ €์žฅ ์‹œ์ ์— ์‹ค์ œ ํ• ๋‹นํ•˜๊ธฐ ์œ„ํ•จ) if (testAutoGeneration.type === "numbering_rule" && testAutoGeneration.options?.numberingRuleId) { const ruleIdKey = `${component.columnName}_numberingRuleId`; @@ -181,12 +180,12 @@ export const TextInputComponent: React.FC = ({ // width๋Š” ํ•ญ์ƒ 100%๋กœ ๊ณ ์ • (๋ถ€๋ชจ ์ปจํ…Œ์ด๋„ˆ๊ฐ€ gridColumns๋กœ ํฌ๊ธฐ ์ œ์–ด) width: "100%", // ์ˆจ๊น€ ๊ธฐ๋Šฅ: ํŽธ์ง‘ ๋ชจ๋“œ์—์„œ๋งŒ ์—ฐํ•˜๊ฒŒ ํ‘œ์‹œ - ...(isHidden && - isDesignMode && { - opacity: 0.4, - backgroundColor: "hsl(var(--muted))", - pointerEvents: "auto", - }), + ...(isHidden && + isDesignMode && { + opacity: 0.4, + backgroundColor: "hsl(var(--muted))", + pointerEvents: "auto", + }), }; // ๋””์ž์ธ ๋ชจ๋“œ ์Šคํƒ€์ผ @@ -361,7 +360,7 @@ export const TextInputComponent: React.FC = ({
{/* ๋ผ๋ฒจ ๋ Œ๋”๋ง */} {component.label && component.style?.labelDisplay !== false && ( -