@team-monolith/cds 1.96.0 → 1.96.2

package/dist/patterns/LexicalEditor/nodes/ProblemSelectNode/SelectBox/SelectBoxView.d.ts

@@ -1,5 +1,6 @@
 import { ImageProps } from "../../../components/InsertImageDialog";
 export interface SelectBoxViewProps {
+    multipleSelectionsEnabled: boolean;
     index: number;
     isSelected: boolean;
     isAnswer?: boolean;

package/dist/patterns/LexicalEditor/nodes/ProblemSelectNode/SelectBox/SelectBoxView.js

@@ -20,15 +20,39 @@ const TYPE_TO_INDEX_ICON = (type) => ({
           height: 12px;
         ` })),
 })[type];
+/**
+ * isSelected, isAnswer, onClick에 따른 type, description 내용
+ * /images/2025-05-05-01-25-06.png
+ */
+function getTypeAndDescription(isSelected, isAnswer, onClick) {
+    if (isAnswer === undefined) {
+        return {
+            type: isSelected ? "primary" : undefined,
+            description: isSelected ? "선택됨" : onClick ? "선택하기" : "",
+        };
+    }
+    if (isAnswer) {
+        return {
+            type: isSelected ? "success" : undefined,
+            description: isSelected
+                ? "선택됨, 정답"
+                : onClick
+                    ? "선택하기, 정답"
+                    : "정답",
+        };
+    }
+    return {
+        type: isSelected ? "danger" : undefined,
+        description: isSelected
+            ? "선택됨, 오답"
+            : onClick
+                ? "선택하기, 오답"
+                : "오답",
+    };
+}
 export function SelectBoxView(props) {
-    const { index, isSelected, isAnswer, image, text, onClick } = props;
-    const selectBoxType = isSelected
-        ? isAnswer === undefined
-            ? "primary"
-            : isAnswer
-                ? "success"
-                : "danger"
-        : undefined;
+    const { multipleSelectionsEnabled, index, isSelected, isAnswer, image, text, onClick, } = props;
+    const { type, description } = getTypeAndDescription(isSelected, isAnswer, onClick);
     const boxRef = useRef(null);
     const handleKeyDown = (e) => {
         // onClick이 없으면 아무것도 하지 않음.
@@ -50,7 +74,7 @@ export function SelectBoxView(props) {
     const ariaText = text || (image && image.altText) || index.toString() + "번 선택지";
     return (_jsx(SelectBoxComponent, { css: css `
         width: 100%;
-      `, ref: boxRef, role: onClick ? "checkbox" : undefined, "aria-checked": isSelected, "aria-label": onClick ? ariaText + (isSelected ? " 선택됨" : " 선택하기") : ariaText, tabIndex: onClick ? 0 : -1, type: selectBoxType, index: selectBoxType ? TYPE_TO_INDEX_ICON(selectBoxType) : index, image: image, text: text, onClick: onClick, 
+      `, ref: boxRef, role: multipleSelectionsEnabled ? "checkbox" : "radio", "aria-checked": isSelected, "aria-disabled": !onClick, "aria-label": [ariaText, description].filter(Boolean).join(" "), tabIndex: onClick ? 0 : -1, type: type, index: type ? TYPE_TO_INDEX_ICON(type) : index, image: image, text: text, onClick: onClick, 
         // 선택되지 않았으나 정답일 때 정답 태그를 표시
         endIcon: isAnswer &&
             !isSelected && (_jsx(Tag, { label: "\uC815\uB2F5", icon: _jsx(CheckboxCircleFillIcon, {}), color: "green", css: css `

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

@@ -18,15 +18,19 @@ export function SelectComponent(props) {
     const [settingOpen, setSettingOpen] = useState(false);
     const isEditable = useLexicalEditable();
     const { freezeProblemNode, showQuizSolution } = useContext(LexicalCustomConfigContext);
-    const showMultipleSolutions = hasMultipleSolutions ||
+    const multipleSelectionsEnabled = hasMultipleSolutions ||
         (hasMultipleSolutions === undefined &&
             selections.filter((s) => "isAnswer" in s && s.isAnswer).length > 1);
     // view
     if (!isEditable) {
-        return (_jsxs(_Fragment, { children: [showMultipleSolutions && (_jsxs(Alert, { children: [_jsx(AlarmWarningFillIcon, { css: css `
+        return (_jsxs("div", Object.assign({ role: multipleSelectionsEnabled ? "group" : "radiogroup", css: css `
+          display: flex;
+          flex-direction: column;
+          gap: 4px;
+        ` }, { children: [multipleSelectionsEnabled && (_jsxs(Alert, { children: [_jsx(AlarmWarningFillIcon, { css: css `
                 width: 14px;
                 height: 14px;
-              ` }), "\uC9C8\uBB38\uC5D0 \uD574\uB2F9\uD558\uB294 \uB2F5\uC744 \uBAA8\uB450 \uACE0\uB974\uB294 \uBB38\uC81C\uC785\uB2C8\uB2E4."] })), selections.map((selection, index) => (_jsx(SelectBoxView, { index: index + 1, isAnswer: showQuizSolution && "isAnswer" in selection
+              ` }), "\uC9C8\uBB38\uC5D0 \uD574\uB2F9\uD558\uB294 \uB2F5\uC744 \uBAA8\uB450 \uACE0\uB974\uB294 \uBB38\uC81C\uC785\uB2C8\uB2E4."] })), selections.map((selection, index) => (_jsx(SelectBoxView, { multipleSelectionsEnabled: multipleSelectionsEnabled, index: index + 1, isAnswer: showQuizSolution && "isAnswer" in selection
                         ? selection.isAnswer
                         : undefined, isSelected: selected.includes(selection.value), image: selection.show.image, text: selection.show.text, onClick: freezeProblemNode
                         ? undefined
@@ -47,7 +51,7 @@ export function SelectComponent(props) {
                                     if (!$isProblemSelectNode(node)) {
                                         return;
                                     }
-                                    if (showMultipleSolutions) {
+                                    if (multipleSelectionsEnabled) {
                                         node.setSelected([...selected, selection.value]);
                                     }
                                     else {
@@ -55,7 +59,7 @@ export function SelectComponent(props) {
                                     }
                                 });
                             }
-                        } }, index)))] }));
+                        } }, index)))] })));
     }
     // 교사 edit view
     return (_jsxs(_Fragment, { children: [_jsxs("div", Object.assign({ css: css `

package/package.json

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