pds-dev-kit-web-test 2.5.189 → 2.5.190

package/dist/src/desktop/components/BasicButtonGroup/BasicButtonGroup.js

@@ -52,6 +52,7 @@ function BasicButtonGroup(_a) {
     var _d = (0, react_1.useState)(null), hoveredButtonIndex = _d[0], setHoveredButtonIndex = _d[1];
     var _e = (0, react_1.useState)(null), tooltipSizeOffset = _e[0], setTooltipSizeOffset = _e[1];
     var _f = (0, react_1.useState)(null), tooltipPositionOffset = _f[0], setTooltipPositionOffset = _f[1];
+    var _g = (0, react_1.useState)(false), canShowTooltip = _g[0], setCanShowTooltip = _g[1];
     var tooltipRef = (0, react_1.useRef)(null);
     var tooltipPositionTargetRef = (0, react_1.useRef)(null);
     /**
@@ -62,6 +63,7 @@ function BasicButtonGroup(_a) {
     (0, react_1.useEffect)(function () {
         if (hoveredButtonIndex === null) {
             setTooltipSizeOffset(null);
+            setCanShowTooltip(false);
             return;
         }
         if (tooltipPositionTargetRef.current) {
@@ -81,6 +83,8 @@ function BasicButtonGroup(_a) {
                 height: tooltipRef.current.offsetHeight,
                 width: tooltipRef.current.offsetWidth
             });
+            // 모든 위치 계산이 완료된 후에 툴팁을 보여줍니다
+            setCanShowTooltip(true);
         }
     }, [hoveredButtonIndex]);
     var getColorKey = function (buttonState, iconColorTheme) {
@@ -103,9 +107,10 @@ function BasicButtonGroup(_a) {
                     : "center_".concat(tooltipPosition)
             });
             var isHoveredButton = index === hoveredButtonIndex;
+            var canShowTooltip = tooltipSizeOffset && tooltipPositionOffset;
             return ((0, jsx_runtime_1.jsxs)(S_BasicButton, __assign({ size: size, onClick: function (e) { return onClick && onClick(e); }, onMouseDown: function (e) { return onMouseDown && onMouseDown(e); }, onPointerEnter: function () { return setHoveredButtonIndex(index); }, onPointerLeave: function () { return setHoveredButtonIndex(null); }, disabled: state === 'disabled' || buttonState === 'disabled' }, { children: [(0, jsx_runtime_1.jsx)(components_1.Icon, { iconName: iconName, size: size === 'small' ? 20 : 24, fillType: iconFillType, colorKey: getColorKey(buttonState, iconColorTheme) }), tooltipText &&
                         isHoveredButton &&
-                        tooltipPositionOffset &&
+                        canShowTooltip && // 위치 계산이 완료된 후에만 렌더링
                         (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(S_TooltipWrapper, __assign({ className: "TooltipWrapper", ref: tooltipRef, tooltipPositionCss: tooltipPositionCss, size: size }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: tooltipText, colorOverride: "ui_cpnt_textlabel_button_tooltip", styleTheme: "caption2Regular", colorTheme: "sysTextSecondary" }) })), document.getElementById('tooltip-root'))] }), iconName + index));
         }) })));
 }
@@ -132,7 +137,7 @@ var S_BasicButton = styled_components_1.default.button(templateObject_5 || (temp
     var theme = _a.theme;
     return theme.ui_cpnt_basicbuttongroup_base_disabled;
 });
-var S_TooltipWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  ", "\n\n  ", ";\n"], ["\n  ", "\n\n  ", ";\n"])), systemUI_1.TooltipWrapperStyle, function (_a) {
+var S_TooltipWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  ", "\n  ", ";\n"], ["\n  ", "\n  ", ";\n"])), systemUI_1.TooltipWrapperStyle, function (_a) {
     var tooltipPositionCss = _a.tooltipPositionCss;
     return tooltipPositionCss;
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pds-dev-kit-web-test",
-  "version": "2.5.189",
+  "version": "2.5.190",
   "license": "MIT",
   "private": false,
   "main": "dist/index.js",