diff --git a/frontend/app/(main)/screens/[screenId]/page.tsx b/frontend/app/(main)/screens/[screenId]/page.tsx index 510b3b3b..6930c583 100644 --- a/frontend/app/(main)/screens/[screenId]/page.tsx +++ b/frontend/app/(main)/screens/[screenId]/page.tsx @@ -310,7 +310,7 @@ export default function ScreenViewPage() { // ๐Ÿ”ง ์ž„์‹œ: ๋ฒ„ํŠผ ๊ทธ๋ฃน ๊ธฐ๋Šฅ ์™„์ „ ๋น„ํ™œ์„ฑํ™” // TODO: ์‚ฌ์šฉ์ž๊ฐ€ ๋ช…์‹œ์ ์œผ๋กœ ๊ทธ๋ฃน์„ ์›ํ•˜๋Š” ๊ฒฝ์šฐ์—๋งŒ ํ™œ์„ฑํ™”ํ•˜๋„๋ก UI ๊ฐœ์„  ํ•„์š” - const DISABLE_BUTTON_GROUPS = true; + const DISABLE_BUTTON_GROUPS = false; if ( !DISABLE_BUTTON_GROUPS && @@ -457,20 +457,36 @@ export default function ScreenViewPage() { const groupConfig = (firstButton as any).webTypeConfig ?.flowVisibilityConfig as FlowVisibilityConfig; - // ๊ทธ๋ฃน์˜ ์œ„์น˜๋Š” ๋ชจ๋“  ๋ฒ„ํŠผ ์ค‘ ๊ฐ€์žฅ ์™ผ์ชฝ/์œ„์ชฝ ๋ฒ„ํŠผ์˜ ์œ„์น˜ ์‚ฌ์šฉ - const groupPosition = buttons.reduce( - (min, button) => ({ - x: Math.min(min.x, button.position.x), - y: Math.min(min.y, button.position.y), - z: min.z, - }), - { x: buttons[0].position.x, y: buttons[0].position.y, z: buttons[0].position.z || 2 }, - ); + // ๐Ÿ” ๋ฒ„ํŠผ ๊ทธ๋ฃน ์„ค์ • ํ™•์ธ + console.log("๐Ÿ” ๋ฒ„ํŠผ ๊ทธ๋ฃน ์„ค์ •:", { + groupId, + buttonCount: buttons.length, + buttons: buttons.map((b) => ({ + id: b.id, + label: b.label, + x: b.position.x, + y: b.position.y, + })), + groupConfig: { + layoutBehavior: groupConfig.layoutBehavior, + groupDirection: groupConfig.groupDirection, + groupAlign: groupConfig.groupAlign, + groupGap: groupConfig.groupGap, + }, + }); - // ๋ฒ„ํŠผ ๊ทธ๋ฃน ์œ„์น˜์—๋„ widthOffset ์ ์šฉ (ํ…Œ์ด๋ธ”์ด ๋Š˜์–ด๋‚œ ๋งŒํผ ์˜ค๋ฅธ์ชฝ์œผ๋กœ ์ด๋™) + // ๐Ÿ”ง ์ˆ˜์ •: ๊ทธ๋ฃน ์ปจํ…Œ์ด๋„ˆ๋Š” ์ฒซ ๋ฒˆ์งธ ๋ฒ„ํŠผ ์œ„์น˜๋ฅผ ๊ธฐ์ค€์œผ๋กœ ํ•˜๋˜, + // ๊ฐ ๋ฒ„ํŠผ์˜ ์ƒ๋Œ€ ์œ„์น˜๋Š” ์›๋ž˜ ์œ„์น˜๋ฅผ ์œ ์ง€ + const firstButtonPosition = { + x: buttons[0].position.x, + y: buttons[0].position.y, + z: buttons[0].position.z || 2, + }; + + // ๋ฒ„ํŠผ ๊ทธ๋ฃน ์œ„์น˜์—๋„ widthOffset ์ ์šฉ const adjustedGroupPosition = { - ...groupPosition, - x: groupPosition.x + widthOffset, + ...firstButtonPosition, + x: firstButtonPosition.x + widthOffset, }; // ๊ทธ๋ฃน์˜ ํฌ๊ธฐ ๊ณ„์‚ฐ: ๋ฒ„ํŠผ๋“ค์˜ ์‹ค์ œ ํฌ๊ธฐ + ๊ฐ„๊ฒฉ์„ ๊ธฐ์ค€์œผ๋กœ ๊ณ„์‚ฐ @@ -501,9 +517,9 @@ export default function ScreenViewPage() { key={`flow-button-group-${groupId}`} style={{ position: "absolute", - left: `${groupPosition.x}px`, - top: `${groupPosition.y}px`, - zIndex: groupPosition.z, + left: `${adjustedGroupPosition.x}px`, + top: `${adjustedGroupPosition.y}px`, + zIndex: adjustedGroupPosition.z, width: `${groupWidth}px`, height: `${groupHeight}px`, }} @@ -513,9 +529,14 @@ export default function ScreenViewPage() { groupConfig={groupConfig} isDesignMode={false} renderButton={(button) => { + // ๐Ÿ”ง ๊ฐ ๋ฒ„ํŠผ์˜ ์ƒ๋Œ€ ์œ„์น˜ = ๋ฒ„ํŠผ์˜ ์›๋ž˜ ์œ„์น˜ - ์ฒซ ๋ฒˆ์งธ ๋ฒ„ํŠผ ์œ„์น˜ const relativeButton = { ...button, - position: { x: 0, y: 0, z: button.position.z || 1 }, + position: { + x: button.position.x - firstButtonPosition.x, + y: button.position.y - firstButtonPosition.y, + z: button.position.z || 1, + }, }; return (