@team-monolith/cds 1.99.7 → 1.99.9

package/dist/components/Button.js

@@ -212,7 +212,7 @@ const SIZE_TO_LABEL_STYLE = {
 export const Button = React.forwardRef(function Button(props, ref) {
     const { className, component: Component = "button", disabled, color, size, startIcon, endIcon, label, fullWidth, bold = false, loading = false } = props, other = __rest(props, ["className", "component", "disabled", "color", "size", "startIcon", "endIcon", "label", "fullWidth", "bold", "loading"]);
     const theme = useTheme();
-    return (_jsxs(Component, Object.assign({ type: Component === "a" ? undefined : "button" }, other, { className: className, ref: ref, css: [
+    return (_jsxs(Component, Object.assign({ type: Component === "button" || Component === "input" ? "button" : undefined }, other, { className: className, ref: ref, css: [
             css `
           display: inline-flex;
           align-items: center;

package/dist/components/OverflowTooltip.d.ts

@@ -2,7 +2,7 @@
 /** @jsxImportSource @emotion/react */
 import { SerializedStyles } from "@emotion/react";
 import { TooltipProps } from "./Tooltip";
-interface OverflowTooltipProps extends Omit<TooltipProps, "open" | "onOpen" | "onClose" | "children"> {
+interface OverflowTooltipProps extends Omit<TooltipProps, "open" | "onOpen" | "onClose" | "children" | "tooltipId"> {
     className?: string;
     childrenCss?: SerializedStyles;
 }

package/dist/components/OverflowTooltip.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import styled from "@emotion/styled";
-import { useRef, useState } from "react";
+import { useRef, useState, useMemo } from "react";
 import { Tooltip } from "./Tooltip";
+import { uid } from "uid";
 /**
  * 인자로 주어진 텍스트를 그립니다.
  * 공간이 부족하면 ...으로 표시하고 툴팁으로 전체 내용을 노출합니다.
@@ -9,6 +10,7 @@ import { Tooltip } from "./Tooltip";
 export function OverflowTooltip(props) {
     const tooltipRef = useRef(null);
     const [isTooltipOpen, setIsTooltipOpen] = useState(false);
+    const tooltipId = useMemo(() => `tooltip-${uid()}`, []);
     const getIsOverflow = () => {
         if (tooltipRef.current) {
             return tooltipRef.current.scrollWidth > tooltipRef.current.offsetWidth;
@@ -23,7 +25,7 @@ export function OverflowTooltip(props) {
     const handleClose = () => {
         setIsTooltipOpen(false);
     };
-    return (_jsx(Tooltip, Object.assign({ open: isTooltipOpen, onOpen: handleOpen, onClose: handleClose }, props, { children: _jsx(OverflowDiv, Object.assign({ css: props.childrenCss, ref: tooltipRef, onMouseOver: handleOpen }, { children: props.text })) })));
+    return (_jsx(Tooltip, Object.assign({ tooltipId: tooltipId, open: isTooltipOpen, onOpen: handleOpen, onClose: handleClose }, props, { children: _jsx(OverflowDiv, Object.assign({ css: props.childrenCss, ref: tooltipRef, onMouseOver: handleOpen, "aria-labelledby": tooltipId }, { children: props.text })) })));
 }
 const OverflowDiv = styled.div `
   overflow: hidden;

package/dist/components/SquareButton.js

@@ -184,7 +184,9 @@ export const SquareButton = React.forwardRef(function SquareButton(props, ref) {
           align-items: center;
           gap: 8px;
           width: ${fullWidth ? "100%" : "fit-content"};
-        ` }, { children: [_jsx(Component, Object.assign({ type: Component === "a" ? undefined : "button" }, other, buttonProps, { ref: ref, css: [
+        ` }, { children: [_jsx(Component, Object.assign({ type: Component === "button" || Component === "input"
+                    ? "button"
+                    : undefined }, other, buttonProps, { ref: ref, css: [
                     COLOR_TO_BUTTON_STYLE(theme, color, Boolean(disabled || loading)),
                     SIZE_TO_BUTTON_STYLE[size],
                     css `

package/dist/components/Tooltip.d.ts

@@ -21,6 +21,12 @@ export interface TooltipProps {
     placement?: "bottom-end" | "bottom-start" | "bottom" | "left-end" | "left-start" | "left" | "right-end" | "right-start" | "right" | "top-end" | "top-start" | "top";
     /** 툴팁을 표시할 객체입니다. ref를 props로 받을 수 있어야합니다. */
     children: React.ReactElement;
+    /**
+     * 툴팁의 고유 id입니다.
+     * 이 id는 툴팁을 띄우는 요소에 aria-labelledby 속성을 통해 연결되어,
+     * 스크린 리더 등의 보조 기술이 툴팁 내용을 올바르게 인식하도록 돕습니다.
+     */
+    tooltipId: string;
 }
 /**
  * [피그마](https://www.figma.com/file/yhrRFizzmhPoHdw9FbYow2/Codle-PD-Kit---Components?type=design&node-id=172-626&t=aFkKTFgWq2xFFGC5-0)

package/dist/components/Tooltip.js

@@ -45,9 +45,9 @@ function addTabIndexIfNeeded(element) {
  * [피그마](https://www.figma.com/file/yhrRFizzmhPoHdw9FbYow2/Codle-PD-Kit---Components?type=design&node-id=172-626&t=aFkKTFgWq2xFFGC5-0)
  */
 export const Tooltip = React.forwardRef(function Tooltip(props, ref) {
-    const { title, text, children } = props, restProps = __rest(props, ["title", "text", "children"]);
+    const { tooltipId, title, text, children } = props, restProps = __rest(props, ["tooltipId", "title", "text", "children"]);
     const focusableChildren = addTabIndexIfNeeded(children);
-    return (_jsx(StyledTooltip, Object.assign({ ref: ref, title: 
+    return (_jsx(StyledTooltip, Object.assign({ id: tooltipId, ref: ref, title: 
         // title이 없고 text가 null인 경우 툴팁을 표시하지 않음
         !title && text === null ? null : (_jsxs(_Fragment, { children: [title && _jsx(TitleDiv, { children: title }), text] })), describeChild: true }, restProps, { children: focusableChildren })));
 });

package/dist/patterns/Dropdown/Dropdown.js

@@ -32,7 +32,7 @@ const Dropdown = forwardRef(function Dropdown(props, ref) {
     const isControlled = menuProps.open !== undefined;
     const [open, setOpen] = useState(false);
     const [itemState, setItemState] = useState(new Map());
-    const uniqueId = useMemo(uid, []);
+    const dropdownMenuId = useMemo(() => `dropdown-menu-${uid()}`, []);
     const handleClick = (e) => {
         onClick === null || onClick === void 0 ? void 0 : onClick(e);
         if (!isControlled)
@@ -55,6 +55,6 @@ const Dropdown = forwardRef(function Dropdown(props, ref) {
         });
         (_a = menuProps.onClose) === null || _a === void 0 ? void 0 : _a.call(menuProps, e);
     };
-    return (_jsxs(Component, Object.assign({ className: className }, other, { ref: ref }, { children: [_jsx(Button, Object.assign({ css: buttonCss, ref: menuRef }, buttonProps, { onClick: handleClick, fullWidth: true, "aria-expanded": (_a = menuProps.open) !== null && _a !== void 0 ? _a : open, "aria-controls": uniqueId })), _jsx(DropdownMenu, Object.assign({ dropdownMenuId: uniqueId }, menuProps, { open: isControlled ? menuProps.open : open, onClose: handleClose, anchorEl: menuRef.current, closeOnItemClick: closeOnItemClick, itemState: itemState, setItemState: setItemState }, { children: children }))] })));
+    return (_jsxs(Component, Object.assign({ className: className }, other, { ref: ref }, { children: [_jsx(Button, Object.assign({ css: buttonCss, ref: menuRef }, buttonProps, { onClick: handleClick, fullWidth: true, "aria-expanded": (_a = menuProps.open) !== null && _a !== void 0 ? _a : open, "aria-controls": dropdownMenuId })), _jsx(DropdownMenu, Object.assign({ dropdownMenuId: dropdownMenuId }, menuProps, { open: isControlled ? menuProps.open : open, onClose: handleClose, anchorEl: menuRef.current, closeOnItemClick: closeOnItemClick, itemState: itemState, setItemState: setItemState }, { children: children }))] })));
 });
 export { Dropdown };

package/dist/patterns/Dropdown/DropdownItem/DropdownItem.js

@@ -31,7 +31,7 @@ const DropdownItem = React.forwardRef(function DropdownItem(props, ref) {
     const { className, index, labelCss, component: Component = "div", type = "default", checkbox, checkboxProps = { checked: false }, startIcon, label, endIcon, preserveIconColor = false, disabled, active, onMouseEnter, onMouseLeave, onClick, subMenuProps, children } = props, other = __rest(props, ["className", "index", "labelCss", "component", "type", "checkbox", "checkboxProps", "startIcon", "label", "endIcon", "preserveIconColor", "disabled", "active", "onMouseEnter", "onMouseLeave", "onClick", "subMenuProps", "children"]);
     const itemRef = useRef(null);
     const { open, onCloseOnItemClick, nestedIndex, itemState, setItemState } = useContext(DropdownContext);
-    const uniqueId = useMemo(uid, []);
+    const dropdownMenuId = useMemo(() => `dropdown-menu-${uid()}`, []);
     const absItemIndex = nestedIndex ? `${nestedIndex}-${index}` : `${index}`;
     // 서브메뉴가 존재하는지 여부
     const isSubMenuExist = Boolean(children);
@@ -51,7 +51,7 @@ const DropdownItem = React.forwardRef(function DropdownItem(props, ref) {
             setSelected(setItemState, absItemIndex);
         }
     };
-    return (_jsxs(_Fragment, { children: [_jsx(Component, Object.assign({ className: className, ref: ref, tabIndex: disabled ? -1 : 0, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onClick: handleClick, "aria-disabled": disabled }, other, { "aria-expanded": isSubMenuExist ? isSubMenuShowed : undefined, "aria-controls": isSubMenuExist ? uniqueId : undefined }, { children: _jsxs(Item, Object.assign({ ref: itemRef, disabled: disabled, selected: isSubMenuShowed || Boolean(active) }, { children: [_jsxs(LeftWrapper, { children: [checkbox && (_jsx(StyledCheckboxInput, Object.assign({}, checkboxProps, { disabled: disabled, onClick: (e) => {
+    return (_jsxs(_Fragment, { children: [_jsx(Component, Object.assign({ className: className, ref: ref, tabIndex: disabled ? -1 : 0, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onClick: handleClick, "aria-disabled": disabled }, other, { "aria-expanded": isSubMenuExist ? isSubMenuShowed : undefined, "aria-controls": isSubMenuExist ? dropdownMenuId : undefined }, { children: _jsxs(Item, Object.assign({ ref: itemRef, disabled: disabled, selected: isSubMenuShowed || Boolean(active) }, { children: [_jsxs(LeftWrapper, { children: [checkbox && (_jsx(StyledCheckboxInput, Object.assign({}, checkboxProps, { disabled: disabled, onClick: (e) => {
                                         e.stopPropagation();
                                     } }))), startIcon && (_jsx(IconDiv, Object.assign({ type: type, preserveIconColor: preserveIconColor }, { children: startIcon }))), _jsx(LabelDiv, Object.assign({ css: labelCss, type: type }, { children: label }))] }), endIcon && (_jsx(IconDiv, Object.assign({ type: type, preserveIconColor: preserveIconColor }, { children: endIcon }))), !endIcon && isSubMenuExist && (_jsx(IconDiv, Object.assign({ type: type, preserveIconColor: preserveIconColor }, { children: _jsx(ArrowRightSLineIcon, {}) })))] })) })), isSubMenuExist && (_jsx(DropdownContext.Provider, Object.assign({ value: {
                     open,
@@ -59,7 +59,7 @@ const DropdownItem = React.forwardRef(function DropdownItem(props, ref) {
                     nestedIndex: absItemIndex,
                     itemState,
                     setItemState,
-                } }, { children: _jsx(DropdownMenu, Object.assign({ dropdownMenuId: uniqueId }, subMenuProps, { open: isSubMenuShowed, anchorEl: itemRef.current, isNestedMenu: true, anchorOrigin: {
+                } }, { children: _jsx(DropdownMenu, Object.assign({ dropdownMenuId: dropdownMenuId }, subMenuProps, { open: isSubMenuShowed, anchorEl: itemRef.current, isNestedMenu: true, anchorOrigin: {
                         vertical: "top",
                         horizontal: "right",
                     }, itemState: itemState, setItemState: setItemState }, { children: children })) })))] }));

package/dist/patterns/LexicalEditor/nodes/ProblemInputNode/SettingForm/FormSolution.js

@@ -7,9 +7,12 @@ import { AlertFillIcon, DeleteBinLineIcon, ErrorWarningFillIcon, } from "../../.
 import { SquareButton } from "../../../../../components/SquareButton";
 import { Tooltip } from "../../../../../components/Tooltip";
 import { TextTypeDropdown } from "./TextTypeDropdown";
+import { uid } from "uid";
+import { useMemo } from "react";
 export function FormSolution(props) {
     const { index, control, rules, onDelete } = props;
     const theme = useTheme();
+    const tooltipId = useMemo(() => `tooltip-${uid()}`, []);
     return (_jsx(Controller, { name: `solutions.${index}.value`, control: control, rules: rules, render: ({ field: { value, onChange }, fieldState: { invalid, error }, }) => {
             const disabled = (error === null || error === void 0 ? void 0 : error.type) === "enabled";
             return (_jsx(Input, { size: "small", color: invalid ? "activeDanger" : "default", onChange: onChange, disabled: disabled, value: value, hintIcon: !disabled && invalid ? _jsx(ErrorWarningFillIcon, {}) : undefined, hintText: !disabled ? error === null || error === void 0 ? void 0 : error.message : undefined, placeholder: "\uC548\uB155\uD558\uC138\uC694", fullWidth: true, css: css `
@@ -21,8 +24,8 @@ export function FormSolution(props) {
                   gap: 4px;
                 ` }, { children: [onDelete && (_jsx(SquareButton, { color: "white", size: "xsmall", icon: _jsx(DeleteBinLineIcon, {}), onClick: onDelete, buttonProps: {
                                 "aria-label": "삭제",
-                            } })), disabled && (_jsx(Tooltip, Object.assign({ text: _jsxs("span", { children: ["\uC785\uB825 \uCE78 \uC124\uC815\uC774 '\uAE00\uC790 \uC218\uB300\uB85C'\uC778 \uACBD\uC6B0", _jsx("br", {}), "\uC815\uB2F5\uC744 \uD558\uB098\uB9CC \uB4F1\uB85D\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4."] }) }, { children: _jsx(SquareButton, { color: "danger", size: "xsmall", icon: _jsx(AlertFillIcon, { color: theme.color.foreground.neutralAlt }), disabled: true, buttonProps: {
+                            } })), disabled && (_jsx(Tooltip, Object.assign({ tooltipId: tooltipId, text: _jsxs("span", { children: ["\uC785\uB825 \uCE78 \uC124\uC815\uC774 '\uAE00\uC790 \uC218\uB300\uB85C'\uC778 \uACBD\uC6B0", _jsx("br", {}), "\uC815\uB2F5\uC744 \uD558\uB098\uB9CC \uB4F1\uB85D\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4."] }) }, { children: _jsx(SquareButton, { color: "danger", size: "xsmall", icon: _jsx(AlertFillIcon, { color: theme.color.foreground.neutralAlt }), disabled: true, buttonProps: {
                                     "aria-label": "정답 등록 불가",
-                                } }) })))] })) }));
+                                }, "aria-labelledby": tooltipId }) })))] })) }));
         } }));
 }

package/dist/patterns/LexicalEditor/nodes/ProblemInputNode/SettingForm/SettingForm.js

@@ -13,9 +13,13 @@ import { FormSegmentedControl } from "./FormSegmentedControl";
 import { FormPlaceholder } from "./FormPlaceholder";
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 import { $getNodeByKey } from "lexical";
+import { uid } from "uid";
+import { useMemo } from "react";
 export function SettingForm(props) {
     const { solutions, showCharacterNumber, placeholder, nodeKey, onClose, caseSensitive, ignoreWhitespace, } = props;
     const [editor] = useLexicalComposerContext();
+    const inputTooltipId = useMemo(() => `tooltip-${uid()}`, []);
+    const placeholderTooltipId = useMemo(() => `tooltip-${uid()}`, []);
     const { control, handleSubmit, watch, trigger } = useForm({
         mode: "all",
         defaultValues: {
@@ -73,16 +77,16 @@ export function SettingForm(props) {
             ` }, { children: [_jsx(AlarmWarningFillIcon, { color: theme.color.foreground.neutralBaseDisabled, css: css `
                 width: 14px;
                 height: 14px;
-              ` }), _jsx(Label, { children: "\uAC00\uB2A5\uD55C \uC815\uB2F5\uC744 \uBAA8\uB450 \uCD94\uAC00\uD574\uC57C \uC6D0\uD65C\uD558\uAC8C \uC790\uB3D9 \uCC44\uC810\uD560 \uC218 \uC788\uC5B4\uC694." })] }))] }), _jsxs(Right, { children: [_jsxs(FormArea, { children: [_jsxs(Label, { children: ["\uC785\uB825 \uCE78", _jsx(Tooltip, Object.assign({ text: _jsxs("span", { children: [`예를 들어 정답이 '글자 수'이고`, _jsx("br", {}), _jsx("b", { children: "\uAE00\uC790 \uC218\uB300\uB85C" }), " \uC635\uC158\uC744 \uC120\uD0DD\uD588\uB2E4\uBA74", _jsx("br", {}), `입력 칸이 '☐☐ ☐' 처럼 표시됩니다.`] }), placement: "top" }, { children: _jsx(QuestionFillIcon, { css: css `
+              ` }), _jsx(Label, { children: "\uAC00\uB2A5\uD55C \uC815\uB2F5\uC744 \uBAA8\uB450 \uCD94\uAC00\uD574\uC57C \uC6D0\uD65C\uD558\uAC8C \uC790\uB3D9 \uCC44\uC810\uD560 \uC218 \uC788\uC5B4\uC694." })] }))] }), _jsxs(Right, { children: [_jsxs(FormArea, { children: [_jsxs(Label, { children: ["\uC785\uB825 \uCE78", _jsx(Tooltip, Object.assign({ tooltipId: inputTooltipId, text: _jsxs("span", { children: [`예를 들어 정답이 '글자 수'이고`, _jsx("br", {}), _jsx("b", { children: "\uAE00\uC790 \uC218\uB300\uB85C" }), " \uC635\uC158\uC744 \uC120\uD0DD\uD588\uB2E4\uBA74", _jsx("br", {}), `입력 칸이 '☐☐ ☐' 처럼 표시됩니다.`] }), placement: "top" }, { children: _jsx(QuestionFillIcon, { css: css `
                     width: 12px;
                     height: 12px;
-                  ` }) }))] }), _jsx(FormSegmentedControl, { control: control, trigger: trigger, name: "showCharacterNumber", items: [
+                  `, "aria-labelledby": inputTooltipId }) }))] }), _jsx(FormSegmentedControl, { control: control, trigger: trigger, name: "showCharacterNumber", items: [
                                             { value: false, label: "한 칸으로" },
                                             { value: true, label: "글자 수대로" },
-                                        ] })] }), _jsxs(FormArea, { children: [_jsxs(Label, { children: ["\uC790\uB9AC \uD45C\uC2DC\uC790", _jsx(Tooltip, Object.assign({ text: _jsx("span", { children: "\uC785\uB825 \uCE78\uC5D0 \uAE30\uBCF8\uC73C\uB85C \uB178\uCD9C\uB418\uB294 \uD14D\uC2A4\uD2B8\uC785\uB2C8\uB2E4." }), placement: "top" }, { children: _jsx(QuestionFillIcon, { css: css `
+                                        ] })] }), _jsxs(FormArea, { children: [_jsxs(Label, { children: ["\uC790\uB9AC \uD45C\uC2DC\uC790", _jsx(Tooltip, Object.assign({ tooltipId: placeholderTooltipId, text: _jsx("span", { children: "\uC785\uB825 \uCE78\uC5D0 \uAE30\uBCF8\uC73C\uB85C \uB178\uCD9C\uB418\uB294 \uD14D\uC2A4\uD2B8\uC785\uB2C8\uB2E4." }), placement: "top" }, { children: _jsx(QuestionFillIcon, { css: css `
                     width: 12px;
                     height: 12px;
-                  ` }) }))] }), _jsx(FormPlaceholder, { control: control })] }), _jsxs(FormArea, { children: [_jsx(Label, { children: "\uB744\uC5B4\uC4F0\uAE30" }), _jsx(FormSegmentedControl, { control: control, trigger: trigger, name: "ignoreWhitespace", items: [
+                  `, "aria-labelledby": placeholderTooltipId }) }))] }), _jsx(FormPlaceholder, { control: control })] }), _jsxs(FormArea, { children: [_jsx(Label, { children: "\uB744\uC5B4\uC4F0\uAE30" }), _jsx(FormSegmentedControl, { control: control, trigger: trigger, name: "ignoreWhitespace", items: [
                                             { value: true, label: "무시하기" },
                                             { value: false, label: "포함하기" },
                                         ] })] }), _jsxs(FormArea, { children: [_jsx(Label, { children: "\uB300\uC18C\uBB38\uC790" }), _jsx(FormSegmentedControl, { control: control, trigger: trigger, name: "caseSensitive", items: [

package/dist/patterns/LexicalEditor/nodes/ProblemSelectNode/SettingForm/SettingForm.js

@@ -11,12 +11,13 @@ import { AddFillIcon, AlarmWarningFillIcon, ListRadioIcon, } from "../../../../.
 import { Button } from "../../../../../components/Button";
 import { FormSelection } from "./FormSelection";
 import { Tooltip } from "../../../../../components/Tooltip";
-import { useState } from "react";
+import { useState, useMemo } from "react";
 import { uid } from "uid";
 export function SettingForm(props) {
     const { selections, nodeKey, onClose } = props;
     const [editor] = useLexicalComposerContext();
     const [tooltipOpen, setTooltipOpen] = useState(false);
+    const tooltipId = useMemo(() => `tooltip-${uid()}`, []);
     const { control, handleSubmit, watch } = useForm({
         mode: "all",
         defaultValues: {
@@ -89,7 +90,7 @@ export function SettingForm(props) {
                         }, disabled: fields.length >= 9 }), hasMultipleAnswers && (_jsxs(Alert, { children: [_jsx(AlarmWarningFillIcon, { css: css `
                 width: 14px;
                 height: 14px;
-              ` }), "\uC815\uB2F5\uC774 \uC5EC\uB7EC \uAC1C\uC778 \uBB38\uC81C\uC5D0\uB294 \uC815\uB2F5\uC744 \uBAA8\uB450 \uC120\uD0DD\uD574\uC57C \uD55C\uB2E4\uB294 \uC548\uB0B4\uAC00 \uC81C\uACF5\uB429\uB2C8\uB2E4."] }))] }), _jsxs(Buttons, { children: [_jsx(Button, { color: "grey", size: "xsmall", label: "\uB2EB\uAE30", onClick: onClose }), _jsx(Tooltip, Object.assign({ open: !hasAnswer && tooltipOpen, text: "\uC120\uD0DD\uC9C0 \uC911 \uC815\uB2F5\uC744 \uD45C\uC2DC\uD574\uC8FC\uC138\uC694.", onOpen: () => setTooltipOpen(true), onClose: () => setTooltipOpen(false), placement: "top-end" }, { children: _jsx("span", { children: _jsx(Button, { color: "primary", size: "xsmall", label: "\uC774\uB300\uB85C \uB123\uAE30", type: "submit", disabled: !hasAnswer }) }) }))] })] })));
+              ` }), "\uC815\uB2F5\uC774 \uC5EC\uB7EC \uAC1C\uC778 \uBB38\uC81C\uC5D0\uB294 \uC815\uB2F5\uC744 \uBAA8\uB450 \uC120\uD0DD\uD574\uC57C \uD55C\uB2E4\uB294 \uC548\uB0B4\uAC00 \uC81C\uACF5\uB429\uB2C8\uB2E4."] }))] }), _jsxs(Buttons, { children: [_jsx(Button, { color: "grey", size: "xsmall", label: "\uB2EB\uAE30", onClick: onClose }), _jsx(Tooltip, Object.assign({ tooltipId: tooltipId, open: !hasAnswer && tooltipOpen, text: "\uC120\uD0DD\uC9C0 \uC911 \uC815\uB2F5\uC744 \uD45C\uC2DC\uD574\uC8FC\uC138\uC694.", onOpen: () => setTooltipOpen(true), onClose: () => setTooltipOpen(false), placement: "top-end" }, { children: _jsx("span", Object.assign({ "aria-labelledby": tooltipId }, { children: _jsx(Button, { color: "primary", size: "xsmall", label: "\uC774\uB300\uB85C \uB123\uAE30", type: "submit", disabled: !hasAnswer }) })) }))] })] })));
 }
 const Form = styled.form(({ theme }) => css `
     display: flex;

package/dist/patterns/LexicalEditor/nodes/SheetInputNode/SettingForm.js

@@ -8,10 +8,13 @@ import { css } from "@emotion/react";
 import { InputMethodLineIcon, QuestionFillIcon } from "../../../../icons";
 import { Button, Input, shadows, Tooltip } from "../../../..";
 import { $isSheetInputNode } from "./SheetInputNode";
+import { uid } from "uid";
+import { useMemo } from "react";
 /** 활동지 활동의 입력칸 설정 컴포넌트입니다. */
 export function SettingForm(props) {
     const { multiline, placeholder, nodeKey, onClose } = props;
     const [editor] = useLexicalComposerContext();
+    const tooltipId = useMemo(() => `tooltip-${uid()}`, []);
     const { control, handleSubmit } = useForm({
         mode: "all",
         defaultValues: {
@@ -31,10 +34,10 @@ export function SettingForm(props) {
     return (_jsxs(Form, Object.assign({ onSubmit: handleSubmit(onSettingSubmit) }, { children: [_jsxs(Title, { children: [_jsx(InputMethodLineIcon, { css: css `
             width: 12px;
             height: 12px;
-          ` }), multiline ? "서술형 입력 칸" : "단답형 입력 칸"] }), _jsx(Content, { children: _jsxs(FormArea, { children: [_jsxs(Label, { children: ["\uC790\uB9AC \uD45C\uC2DC\uC790", _jsx(Tooltip, Object.assign({ text: _jsx("span", { children: "\uC785\uB825 \uCE78\uC5D0 \uAE30\uBCF8\uC73C\uB85C \uB178\uCD9C\uB418\uB294 \uD14D\uC2A4\uD2B8\uC785\uB2C8\uB2E4." }), placement: "top" }, { children: _jsx(QuestionFillIcon, { css: css `
+          ` }), multiline ? "서술형 입력 칸" : "단답형 입력 칸"] }), _jsx(Content, { children: _jsxs(FormArea, { children: [_jsxs(Label, { children: ["\uC790\uB9AC \uD45C\uC2DC\uC790", _jsx(Tooltip, Object.assign({ tooltipId: tooltipId, text: _jsx("span", { children: "\uC785\uB825 \uCE78\uC5D0 \uAE30\uBCF8\uC73C\uB85C \uB178\uCD9C\uB418\uB294 \uD14D\uC2A4\uD2B8\uC785\uB2C8\uB2E4." }), placement: "top" }, { children: _jsx(QuestionFillIcon, { css: css `
                   width: 12px;
                   height: 12px;
-                ` }) }))] }), _jsx(Controller, { name: "placeholder", control: control, render: ({ field: { value, onChange } }) => (_jsx(Input, { size: "small", color: "default", value: value, onChange: onChange, placeholder: "\uC608) \uC5EC\uAE30\uC5D0 \uC785\uB825\uD558\uC138\uC694." })) })] }) }), _jsxs(Buttons, { children: [_jsx(Button, { color: "grey", size: "xsmall", label: "\uB2EB\uAE30", onClick: onClose }), _jsx(Button, { color: "primary", size: "xsmall", label: "\uC774\uB300\uB85C \uB123\uAE30", bold: true, type: "submit" })] })] })));
+                `, "aria-labelledby": tooltipId }) }))] }), _jsx(Controller, { name: "placeholder", control: control, render: ({ field: { value, onChange } }) => (_jsx(Input, { size: "small", color: "default", value: value, onChange: onChange, placeholder: "\uC608) \uC5EC\uAE30\uC5D0 \uC785\uB825\uD558\uC138\uC694." })) })] }) }), _jsxs(Buttons, { children: [_jsx(Button, { color: "grey", size: "xsmall", label: "\uB2EB\uAE30", onClick: onClose }), _jsx(Button, { color: "primary", size: "xsmall", label: "\uC774\uB300\uB85C \uB123\uAE30", bold: true, type: "submit" })] })] })));
 }
 const Form = styled.form(({ theme }) => css `
     display: flex;

package/dist/patterns/ToggleButtonGroup/ToggleButton.js

@@ -3,14 +3,17 @@ import styled from "@emotion/styled";
 import { HOVER, RESET_BUTTON, Tooltip } from "../..";
 import { css } from "@emotion/react";
 import { toggleButtonGroupClasses, } from "./ToggleButtonGroup";
+import { uid } from "uid";
+import { useMemo } from "react";
 /** 하나의 ToggleButton을 그립니다. */
 export function ToggleButton(props) {
     const { datum, placement, isActive, onClick } = props;
     const { label, onIcon, offIcon } = datum;
+    const tooltipId = useMemo(() => `tooltip-${uid()}`, []);
     if (isActive) {
         return (_jsxs(Active, Object.assign({ "aria-label": `${label} 선택 해제하기`, className: toggleButtonGroupClasses.toggleButton.active, onClick: onClick }, { children: [onIcon, label] })));
     }
-    return (_jsx(Tooltip, Object.assign({ placement: placement, text: label }, { children: _jsx(Inactive, Object.assign({ "aria-label": `${label} 선택하기`, className: toggleButtonGroupClasses.toggleButton.inactive, onClick: onClick }, { children: offIcon })) })));
+    return (_jsx(Tooltip, Object.assign({ tooltipId: tooltipId, placement: placement, text: label }, { children: _jsx(Inactive, Object.assign({ "aria-label": `${label} 선택하기`, className: toggleButtonGroupClasses.toggleButton.inactive, onClick: onClick, "aria-labelledby": tooltipId }, { children: offIcon })) })));
 }
 const Active = styled.button(({ theme }) => css `
     ${RESET_BUTTON};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@team-monolith/cds",
-  "version": "1.99.7",
+  "version": "1.99.9",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "sideEffects": false,