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 da16a349..4bdb1a2e 100644 --- a/frontend/lib/registry/components/selected-items-detail-input/SelectedItemsDetailInputComponent.tsx +++ b/frontend/lib/registry/components/selected-items-detail-input/SelectedItemsDetailInputComponent.tsx @@ -544,13 +544,19 @@ export const SelectedItemsDetailInputComponent: React.FC { - const displayItems = componentConfig.displayItems || []; + // ๐Ÿ†• displayItems๋ฅผ ๋ Œ๋”๋งํ•˜๋Š” ํ—ฌํผ ํ•จ์ˆ˜ (๊ทธ๋ฃน๋ณ„) + const renderDisplayItems = useCallback((entry: GroupEntry, item: ItemData, groupId: string) => { + // ๐Ÿ†• ํ•ด๋‹น ๊ทธ๋ฃน์˜ displayItems ๊ฐ€์ ธ์˜ค๊ธฐ + const group = (componentConfig.fieldGroups || []).find(g => g.id === groupId); + const displayItems = group?.displayItems || []; if (displayItems.length === 0) { - // displayItems๊ฐ€ ์—†์œผ๋ฉด ๊ธฐ๋ณธ ๋ฐฉ์‹ (๋ชจ๋“  ํ•„๋“œ ๋‚˜์—ด) - const fields = componentConfig.additionalFields || []; + // displayItems๊ฐ€ ์—†์œผ๋ฉด ๊ธฐ๋ณธ ๋ฐฉ์‹ (ํ•ด๋‹น ๊ทธ๋ฃน์˜ ํ•„๋“œ๋งŒ ๋‚˜์—ด) + const fields = (componentConfig.additionalFields || []).filter(f => + componentConfig.fieldGroups && componentConfig.fieldGroups.length > 0 + ? f.groupId === groupId + : true + ); return fields.map((f) => entry[f.name] || "-").join(" / "); } @@ -694,7 +700,7 @@ export const SelectedItemsDetailInputComponent: React.FC ); - }, [componentConfig.displayItems, componentConfig.additionalFields]); + }, [componentConfig.fieldGroups, componentConfig.additionalFields]); // ๋นˆ ์ƒํƒœ ๋ Œ๋”๋ง if (items.length === 0) { @@ -805,7 +811,7 @@ export const SelectedItemsDetailInputComponent: React.FC handleEditGroupEntry(item.id, group.id, entry.id)} > - {idx + 1}. {renderDisplayItems(entry, item)} + {idx + 1}. {renderDisplayItems(entry, item, group.id)} + + + + + +

+ ์ด ๊ทธ๋ฃน์˜ ์ž…๋ ฅ ํ•ญ๋ชฉ์ด ์ถ”๊ฐ€๋˜๋ฉด ์–ด๋–ป๊ฒŒ ํ‘œ์‹œ๋ ์ง€ ์„ค์ • +

+ + {(!group.displayItems || group.displayItems.length === 0) ? ( +
+ ๋ฏธ์„ค์ • (๋ชจ๋“  ํ•„๋“œ๋ฅผ " / "๋กœ ๊ตฌ๋ถ„ํ•˜์—ฌ ํ‘œ์‹œ) +
+ ) : ( +
+ {group.displayItems.map((item, itemIndex) => ( +
+ {/* ํ—ค๋” */} +
+ + {item.type === "icon" && "๐ŸŽจ"} + {item.type === "field" && "๐Ÿ“"} + {item.type === "text" && "๐Ÿ’ฌ"} + {item.type === "badge" && "๐Ÿท๏ธ"} + + +
+ + {/* ์•„์ด์ฝ˜ ์„ค์ • */} + {item.type === "icon" && ( + updateDisplayItemInGroup(group.id, itemIndex, { icon: e.target.value })} + placeholder="Building" + className="h-6 text-[9px] sm:text-[10px]" + /> + )} + + {/* ํ…์ŠคํŠธ ์„ค์ • */} + {item.type === "text" && ( + updateDisplayItemInGroup(group.id, itemIndex, { value: e.target.value })} + placeholder="| , / , -" + className="h-6 text-[9px] sm:text-[10px]" + /> + )} + + {/* ํ•„๋“œ ์„ค์ • */} + {item.type === "field" && ( +
+ {/* ํ•„๋“œ ์„ ํƒ */} + + + {/* ๋ผ๋ฒจ */} + updateDisplayItemInGroup(group.id, itemIndex, { label: e.target.value })} + placeholder="๊ฑฐ๋ž˜์ฒ˜:" + className="h-6 text-[9px] sm:text-[10px]" + /> + + {/* ํ‘œ์‹œ ํ˜•์‹ */} + + + {/* ๋นˆ ๊ฐ’ ์ฒ˜๋ฆฌ */} +
+ + + {/* ๊ธฐ๋ณธ๊ฐ’ */} + {item.emptyBehavior === "default" && ( + updateDisplayItemInGroup(group.id, itemIndex, { defaultValue: e.target.value })} + placeholder="๋ฏธ์ž…๋ ฅ" + className="h-6 text-[9px] sm:text-[10px]" + /> + )} +
+
+ )} +
+ ))} +
+ )} + ))} @@ -761,252 +956,6 @@ export const SelectedItemsDetailInputConfigPanel: React.FC - {/* ๐Ÿ†• ํ•ญ๋ชฉ ํ‘œ์‹œ ์„ค์ • */} -
-
- -
- - - -
-
- -

- ๊ฐ ์ž…๋ ฅ ํ•ญ๋ชฉ์ด ์ถ”๊ฐ€๋˜๋ฉด ์–ด๋–ป๊ฒŒ ํ‘œ์‹œ๋ ์ง€ ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค -

- - {displayItems.length === 0 ? ( -
- ํ‘œ์‹œ ํ•ญ๋ชฉ์ด ์—†์Šต๋‹ˆ๋‹ค. ์œ„์˜ ๋ฒ„ํŠผ์œผ๋กœ ์ถ”๊ฐ€ํ•˜์„ธ์š”. -
- (๋ฏธ์„ค์ • ์‹œ ๋ชจ๋“  ํ•„๋“œ๋ฅผ " / "๋กœ ๊ตฌ๋ถ„ํ•˜์—ฌ ํ‘œ์‹œ) -
- ) : ( -
- {displayItems.map((item, index) => ( - - - {/* ํ—ค๋” */} -
- - {item.type === "icon" && "๐ŸŽจ ์•„์ด์ฝ˜"} - {item.type === "field" && "๐Ÿ“ ํ•„๋“œ"} - {item.type === "text" && "๐Ÿ’ฌ ํ…์ŠคํŠธ"} - {item.type === "badge" && "๐Ÿท๏ธ ๋ฐฐ์ง€"} - - -
- - {/* ์•„์ด์ฝ˜ ์„ค์ • */} - {item.type === "icon" && ( -
-
- - updateDisplayItem(index, { icon: e.target.value })} - placeholder="์˜ˆ: Building, User, Package" - className="h-7 text-xs" - /> -

- lucide-react ์•„์ด์ฝ˜ ์ด๋ฆ„์„ ์ž…๋ ฅํ•˜์„ธ์š” -

-
-
- )} - - {/* ํ…์ŠคํŠธ ์„ค์ • */} - {item.type === "text" && ( -
- - updateDisplayItem(index, { value: e.target.value })} - placeholder="์˜ˆ: | , / , - " - className="h-7 text-xs" - /> -
- )} - - {/* ํ•„๋“œ ์„ค์ • */} - {item.type === "field" && ( -
- {/* ํ•„๋“œ ์„ ํƒ */} -
- - -
- - {/* ๋ผ๋ฒจ */} -
- - updateDisplayItem(index, { label: e.target.value })} - placeholder="์˜ˆ: ๊ฑฐ๋ž˜์ฒ˜:, ๋‹จ๊ฐ€:" - className="h-7 text-xs" - /> -
- - {/* ํ‘œ์‹œ ํ˜•์‹ */} -
- - -
- - {/* ๋นˆ ๊ฐ’ ์ฒ˜๋ฆฌ */} -
- - -
- - {/* ๊ธฐ๋ณธ๊ฐ’ (emptyBehavior๊ฐ€ "default"์ผ ๋•Œ๋งŒ) */} - {item.emptyBehavior === "default" && ( -
- - updateDisplayItem(index, { defaultValue: e.target.value })} - placeholder="์˜ˆ: ๋ฏธ์ž…๋ ฅ, 0, -" - className="h-7 text-xs" - /> -
- )} -
- )} - - {/* ์Šคํƒ€์ผ ์„ค์ • */} -
- -
- - - -
- - {/* ์ƒ‰์ƒ */} -
-
- - updateDisplayItem(index, { color: e.target.value })} - className="h-7 w-full" - /> -
-
- - updateDisplayItem(index, { backgroundColor: e.target.value })} - className="h-7 w-full" - /> -
-
-
-
-
- ))} -
- )} -
- {/* ์‚ฌ์šฉ ์˜ˆ์‹œ */}

๐Ÿ’ก ์‚ฌ์šฉ ์˜ˆ์‹œ

diff --git a/frontend/lib/registry/components/selected-items-detail-input/types.ts b/frontend/lib/registry/components/selected-items-detail-input/types.ts index 6685fc50..05c11e4a 100644 --- a/frontend/lib/registry/components/selected-items-detail-input/types.ts +++ b/frontend/lib/registry/components/selected-items-detail-input/types.ts @@ -50,6 +50,8 @@ export interface FieldGroup { description?: string; /** ๊ทธ๋ฃน ํ‘œ์‹œ ์ˆœ์„œ */ order?: number; + /** ๐Ÿ†• ์ด ๊ทธ๋ฃน์˜ ํ•ญ๋ชฉ ํ‘œ์‹œ ์„ค์ • (๊ทธ๋ฃน๋ณ„๋กœ ๋‹ค๋ฅธ ํ‘œ์‹œ ํ˜•์‹ ๊ฐ€๋Šฅ) */ + displayItems?: DisplayItem[]; } /** @@ -115,12 +117,6 @@ export interface SelectedItemsDetailInputConfig extends ComponentConfig { */ inputMode?: "inline" | "modal"; - /** - * ๐Ÿ†• ํ•ญ๋ชฉ ํ‘œ์‹œ ์„ค์ • (๊ฐ ๊ทธ๋ฃน์˜ ์ž…๋ ฅ ํ•ญ๋ชฉ์„ ์–ด๋–ป๊ฒŒ ํ‘œ์‹œํ• ์ง€) - * ์˜ˆ: [{ type: "icon", icon: "Building" }, { type: "field", fieldName: "customer_name", label: "๊ฑฐ๋ž˜์ฒ˜:" }] - */ - displayItems?: DisplayItem[]; - /** * ๋นˆ ์ƒํƒœ ๋ฉ”์‹œ์ง€ */