diff --git a/frontend/components/common/ScreenModal.tsx b/frontend/components/common/ScreenModal.tsx index f7926f43..44685dc0 100644 --- a/frontend/components/common/ScreenModal.tsx +++ b/frontend/components/common/ScreenModal.tsx @@ -175,13 +175,21 @@ export const ScreenModal: React.FC = ({ className }) => { if (editData) { console.log("๐Ÿ“ [ScreenModal] ์ˆ˜์ • ๋ฐ์ดํ„ฐ ์„ค์ •:", editData); - // ๐Ÿ†• ๋ฐฐ์—ด์ธ ๊ฒฝ์šฐ (๊ทธ๋ฃน ๋ ˆ์ฝ”๋“œ) vs ๋‹จ์ผ ๊ฐ์ฒด ์ฒ˜๋ฆฌ + // ๐Ÿ†• ๋ฐฐ์—ด์ธ ๊ฒฝ์šฐ ๋‘ ๊ฐ€์ง€ ๋ฐ์ดํ„ฐ๋ฅผ ์„ค์ •: + // 1. formData: ์ฒซ ๋ฒˆ์งธ ์š”์†Œ(๊ฐ์ฒด) - ์ผ๋ฐ˜ ์ž…๋ ฅ ํ•„๋“œ์šฉ (TextInput ๋“ฑ) + // 2. selectedData: ์ „์ฒด ๋ฐฐ์—ด - ๋‹ค์ค‘ ํ•ญ๋ชฉ ์ปดํฌ๋„ŒํŠธ์šฉ (SelectedItemsDetailInput ๋“ฑ) if (Array.isArray(editData)) { - console.log(`๐Ÿ“ [ScreenModal] ๊ทธ๋ฃน ๋ ˆ์ฝ”๋“œ ${editData.length}๊ฐœ ์„ค์ •`); - setFormData(editData as any); // ๋ฐฐ์—ด ๊ทธ๋Œ€๋กœ ์ „๋‹ฌ (SelectedItemsDetailInput์—์„œ ์ฒ˜๋ฆฌ) - setOriginalData(editData[0] || null); // ์ฒซ ๋ฒˆ์งธ ๋ ˆ์ฝ”๋“œ๋ฅผ ์›๋ณธ์œผ๋กœ ์ €์žฅ + const firstRecord = editData[0] || {}; + console.log(`๐Ÿ“ [ScreenModal] ๊ทธ๋ฃน ๋ ˆ์ฝ”๋“œ ${editData.length}๊ฐœ ์„ค์ •:`, { + formData: "์ฒซ ๋ฒˆ์งธ ๋ ˆ์ฝ”๋“œ (์ผ๋ฐ˜ ์ž…๋ ฅ ํ•„๋“œ์šฉ)", + selectedData: "์ „์ฒด ๋ฐฐ์—ด (๋‹ค์ค‘ ํ•ญ๋ชฉ ์ปดํฌ๋„ŒํŠธ์šฉ)", + }); + setFormData(firstRecord); // ๐Ÿ”ง ์ผ๋ฐ˜ ์ž…๋ ฅ ํ•„๋“œ์šฉ (๊ฐ์ฒด) + setSelectedData(editData); // ๐Ÿ”ง ๋‹ค์ค‘ ํ•ญ๋ชฉ ์ปดํฌ๋„ŒํŠธ์šฉ (๋ฐฐ์—ด) - groupedData๋กœ ์ „๋‹ฌ๋จ + setOriginalData(firstRecord); // ์ฒซ ๋ฒˆ์งธ ๋ ˆ์ฝ”๋“œ๋ฅผ ์›๋ณธ์œผ๋กœ ์ €์žฅ } else { setFormData(editData); + setSelectedData([editData]); // ๐Ÿ”ง ๋‹จ์ผ ๊ฐ์ฒด๋„ ๋ฐฐ์—ด๋กœ ๋ณ€ํ™˜ํ•˜์—ฌ ์ €์žฅ setOriginalData(editData); // ๐Ÿ†• ์›๋ณธ ๋ฐ์ดํ„ฐ ์ €์žฅ (UPDATE ํŒ๋‹จ์šฉ) } } else { diff --git a/frontend/lib/registry/DynamicComponentRenderer.tsx b/frontend/lib/registry/DynamicComponentRenderer.tsx index 6166317f..3d8b2d4e 100644 --- a/frontend/lib/registry/DynamicComponentRenderer.tsx +++ b/frontend/lib/registry/DynamicComponentRenderer.tsx @@ -281,10 +281,12 @@ export const DynamicComponentRenderer: React.FC = // ์ปดํฌ๋„ŒํŠธ์˜ columnName์— ํ•ด๋‹นํ•˜๋Š” formData ๊ฐ’ ์ถ”์ถœ const fieldName = (component as any).columnName || component.id; - // modal-repeater-table์€ ๋ฐฐ์—ด ๋ฐ์ดํ„ฐ๋ฅผ ๋‹ค๋ฃจ๋ฏ€๋กœ ๋นˆ ๋ฐฐ์—ด๋กœ ์ดˆ๊ธฐํ™” + // ๋‹ค์ค‘ ๋ ˆ์ฝ”๋“œ๋ฅผ ๋‹ค๋ฃจ๋Š” ์ปดํฌ๋„ŒํŠธ๋Š” ๋ฐฐ์—ด ๋ฐ์ดํ„ฐ๋กœ ์ดˆ๊ธฐํ™” let currentValue; - if (componentType === "modal-repeater-table" || componentType === "repeat-screen-modal") { - // EditModal์—์„œ ์ „๋‹ฌ๋œ groupedData๊ฐ€ ์žˆ์œผ๋ฉด ์šฐ์„  ์‚ฌ์šฉ + if (componentType === "modal-repeater-table" || + componentType === "repeat-screen-modal" || + componentType === "selected-items-detail-input") { + // EditModal/ScreenModal์—์„œ ์ „๋‹ฌ๋œ groupedData๊ฐ€ ์žˆ์œผ๋ฉด ์šฐ์„  ์‚ฌ์šฉ currentValue = props.groupedData || formData?.[fieldName] || []; } else { currentValue = formData?.[fieldName] || ""; diff --git a/frontend/lib/registry/components/selected-items-detail-input/SelectedItemsDetailInputComponent.tsx b/frontend/lib/registry/components/selected-items-detail-input/SelectedItemsDetailInputComponent.tsx index 19073e39..285c655d 100644 --- a/frontend/lib/registry/components/selected-items-detail-input/SelectedItemsDetailInputComponent.tsx +++ b/frontend/lib/registry/components/selected-items-detail-input/SelectedItemsDetailInputComponent.tsx @@ -42,6 +42,8 @@ export const SelectedItemsDetailInputComponent: React.FC { + // ๐Ÿ†• groupedData ์ถ”์ถœ (DynamicComponentRenderer์—์„œ ์ „๋‹ฌ) + const groupedData = (props as any).groupedData || (props as any)._groupedData; // ๐Ÿ†• URL ํŒŒ๋ผ๋ฏธํ„ฐ์—์„œ dataSourceId ์ฝ๊ธฐ const searchParams = useSearchParams(); const urlDataSourceId = searchParams?.get("dataSourceId") || undefined; @@ -225,24 +227,32 @@ export const SelectedItemsDetailInputComponent: React.FC { - // ๐Ÿ†• ์ˆ˜์ • ๋ชจ๋“œ: formData์—์„œ ๋ฐ์ดํ„ฐ ๋กœ๋“œ (URL์— mode=edit์ด ์žˆ์œผ๋ฉด) + // ๐Ÿ†• ์ˆ˜์ • ๋ชจ๋“œ: groupedData ๋˜๋Š” formData์—์„œ ๋ฐ์ดํ„ฐ ๋กœ๋“œ (URL์— mode=edit์ด ์žˆ์œผ๋ฉด) const urlParams = new URLSearchParams(window.location.search); const mode = urlParams.get("mode"); - if (mode === "edit" && formData) { + // ๐Ÿ”ง ๋ฐ์ดํ„ฐ ์†Œ์Šค ์šฐ์„ ์ˆœ์œ„: groupedData > formData (๋ฐฐ์—ด) > formData (๊ฐ์ฒด) + const sourceData = groupedData && Array.isArray(groupedData) && groupedData.length > 0 + ? groupedData + : formData; + + if (mode === "edit" && sourceData) { // ๋ฐฐ์—ด์ธ์ง€ ๋‹จ์ผ ๊ฐ์ฒด์ธ์ง€ ํ™•์ธ - const isArray = Array.isArray(formData); - const dataArray = isArray ? formData : [formData]; + const isArray = Array.isArray(sourceData); + const dataArray = isArray ? sourceData : [sourceData]; if (dataArray.length === 0 || (dataArray.length === 1 && Object.keys(dataArray[0]).length === 0)) { - console.warn("โš ๏ธ [SelectedItemsDetailInput] formData๊ฐ€ ๋น„์–ด์žˆ์Œ"); + console.warn("โš ๏ธ [SelectedItemsDetailInput] ๋ฐ์ดํ„ฐ๊ฐ€ ๋น„์–ด์žˆ์Œ"); return; } console.log( `๐Ÿ“ [SelectedItemsDetailInput] ์ˆ˜์ • ๋ชจ๋“œ - ${isArray ? "๊ทธ๋ฃน ๋ ˆ์ฝ”๋“œ" : "๋‹จ์ผ ๋ ˆ์ฝ”๋“œ"} (${dataArray.length}๊ฐœ)`, ); - console.log("๐Ÿ“ [SelectedItemsDetailInput] formData (JSON):", JSON.stringify(dataArray, null, 2)); + console.log("๐Ÿ“ [SelectedItemsDetailInput] ๋ฐ์ดํ„ฐ ์†Œ์Šค:", { + fromGroupedData: groupedData && Array.isArray(groupedData) && groupedData.length > 0, + dataArray: JSON.stringify(dataArray, null, 2), + }); const groups = componentConfig.fieldGroups || []; const additionalFields = componentConfig.additionalFields || []; @@ -423,7 +433,7 @@ export const SelectedItemsDetailInputComponent: React.FC = ({ // ์ˆจ๊น€ ์ƒํƒœ (props์—์„œ ์ „๋‹ฌ๋ฐ›์€ ๊ฐ’ ์šฐ์„  ์‚ฌ์šฉ) const isHidden = props.hidden !== undefined ? props.hidden : component.hidden || componentConfig.hidden || false; + // ์ˆ˜์ • ๋ชจ๋“œ ์—ฌ๋ถ€ ํ™•์ธ (originalData๊ฐ€ ์žˆ์œผ๋ฉด ์ˆ˜์ • ๋ชจ๋“œ) + const originalData = props.originalData || (props as any)._originalData; + const isEditMode = originalData && Object.keys(originalData).length > 0; + // ์ž๋™์ƒ์„ฑ๋œ ๊ฐ’ ์ƒํƒœ const [autoGeneratedValue, setAutoGeneratedValue] = useState(""); @@ -99,6 +103,16 @@ export const TextInputComponent: React.FC = ({ return; } + // ๐Ÿ†• ์ˆ˜์ • ๋ชจ๋“œ์ผ ๋•Œ๋Š” ์ฑ„๋ฒˆ ๊ทœ์น™ ์Šคํ‚ต (๊ธฐ์กด ๊ฐ’ ์œ ์ง€) + if (isEditMode) { + console.log("โญ๏ธ ์ˆ˜์ • ๋ชจ๋“œ - ์ฑ„๋ฒˆ ๊ทœ์น™ ์Šคํ‚ต:", { + columnName: component.columnName, + originalValue: originalData?.[component.columnName], + }); + hasGeneratedRef.current = true; // ์ƒ์„ฑ ์™„๋ฃŒ๋กœ ํ‘œ์‹œํ•˜์—ฌ ์žฌ์‹คํ–‰ ๋ฐฉ์ง€ + return; + } + if (testAutoGeneration.enabled && testAutoGeneration.type !== "none") { // ํผ ๋ฐ์ดํ„ฐ์— ์ด๋ฏธ ๊ฐ’์ด ์žˆ์œผ๋ฉด ์ž๋™์ƒ์„ฑํ•˜์ง€ ์•Š์Œ const currentFormValue = formData?.[component.columnName]; @@ -171,7 +185,7 @@ export const TextInputComponent: React.FC = ({ }; generateAutoValue(); - }, [testAutoGeneration.enabled, testAutoGeneration.type, component.columnName, isInteractive]); + }, [testAutoGeneration.enabled, testAutoGeneration.type, component.columnName, isInteractive, isEditMode]); // ์‹ค์ œ ํ™”๋ฉด์—์„œ ์ˆจ๊น€ ์ฒ˜๋ฆฌ๋œ ์ปดํฌ๋„ŒํŠธ๋Š” ๋ Œ๋”๋งํ•˜์ง€ ์•Š์Œ if (isHidden && !isDesignMode) {