@team-monolith/cds 1.38.3 → 1.38.4

package/dist/patterns/LexicalEditor/nodes/ProblemInputNode/InputComponent.d.ts

@@ -5,5 +5,6 @@ export declare function InputComponent(props: {
     showCharacterNumber: boolean;
     placeholder: string;
     answer: string;
+    isCorrect?: boolean;
     nodeKey: NodeKey;
 }): import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -25,7 +25,7 @@ import { LexicalCustomConfigContext } from "../../LexicalCustomConfigContext";
 import TextInput from "./TextInput";
 import SegmentedInput from "./SegmentedInput";
 export function InputComponent(props) {
-    const { answer } = props, settingFormProps = __rest(props, ["answer"]);
+    const { answer, isCorrect } = props, settingFormProps = __rest(props, ["answer", "isCorrect"]);
     const { solutions, showCharacterNumber, placeholder, nodeKey } = settingFormProps;
     const [editor] = useLexicalComposerContext();
     const [settingOpen, setSettingOpen] = useState(false);
@@ -51,9 +51,9 @@ export function InputComponent(props) {
     // 학생 view
     if (!isEditable) {
         if (showCharacterNumber) {
-            return (_jsx(SegmentedInput, { readOnly: lexicalCustomConfig.freezeProblemNode, answerFormat: answerFormat, placeholder: placeholder || "여기에 입력하세요.", value: answerInput, onChange: handleChange }));
+            return (_jsx(SegmentedInput, { readOnly: lexicalCustomConfig.freezeProblemNode, isCorrect: isCorrect, answerFormat: answerFormat, placeholder: placeholder || "여기에 입력하세요.", value: answerInput, onChange: handleChange }));
         }
-        return (_jsx(TextInput, { readOnly: lexicalCustomConfig.freezeProblemNode, size: "small", color: "default", placeholder: placeholder || "여기에 입력하세요.", value: answerInput, onChange: (e) => {
+        return (_jsx(TextInput, { readOnly: lexicalCustomConfig.freezeProblemNode, isCorrect: isCorrect, size: "small", color: "default", placeholder: placeholder || "여기에 입력하세요.", value: answerInput, onChange: (e) => {
                 handleChange(e.target.value);
             }, fullWidth: true }));
     }

package/dist/patterns/LexicalEditor/nodes/ProblemInputNode/ProblemInputNode.d.ts

@@ -11,6 +11,8 @@ export interface ProblemInputPayload {
      * (ex: "코들 입니다" => "** ***") */
     solutions: Solution[];
     answer: string;
+    /** FE에서만 사용하는 값. 문제의 정오답 여부를 주입하여 스타일을 변경합니다. */
+    isCorrect?: boolean;
     key?: NodeKey;
 }
 export type SerializedProblemInputNode = Spread<ProblemInputPayload, SerializedLexicalNode>;
@@ -23,6 +25,7 @@ export declare class ProblemInputNode extends DecoratorNode<ReactNode> {
     __showCharacterNumber: boolean;
     __placeholder: string;
     __answer: string;
+    __isCorrect?: boolean;
     isInline(): boolean;
     static getType(): string;
     getSolutions(): Solution[];
@@ -34,12 +37,12 @@ export declare class ProblemInputNode extends DecoratorNode<ReactNode> {
     setPlaceholder(placeholder: string): void;
     setAnswer(answer: string): void;
     static clone(node: ProblemInputNode): ProblemInputNode;
-    constructor(showCharacterNumber: boolean, placeholder: string, solutions: Solution[], answer: string, key?: NodeKey);
+    constructor(showCharacterNumber: boolean, placeholder: string, solutions: Solution[], answer: string, isCorrect?: boolean, key?: NodeKey);
     createDOM(config: EditorConfig): HTMLElement;
     updateDOM(): boolean;
     static importJSON(serializedNode: SerializedProblemInputNode): ProblemInputNode;
     exportJSON(): SerializedProblemInputNode;
     decorate(): ReactNode;
 }
-export declare function $createProblemInputNode({ showCharacterNumber, placeholder, solutions, answer, key, }: ProblemInputPayload): ProblemInputNode;
+export declare function $createProblemInputNode({ showCharacterNumber, placeholder, solutions, answer, isCorrect, key, }: ProblemInputPayload): ProblemInputNode;
 export declare function $isProblemInputNode(node: LexicalNode | null | undefined): node is ProblemInputNode;

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

@@ -42,14 +42,15 @@ export class ProblemInputNode extends DecoratorNode {
         self.__answer = answer;
     }
     static clone(node) {
-        return new ProblemInputNode(node.__showCharacterNumber, node.__placeholder, node.__solutions, node.__answer, node.__key);
+        return new ProblemInputNode(node.__showCharacterNumber, node.__placeholder, node.__solutions, node.__answer, node.__isCorrect, node.__key);
     }
-    constructor(showCharacterNumber, placeholder, solutions, answer, key) {
+    constructor(showCharacterNumber, placeholder, solutions, answer, isCorrect, key) {
         super(key);
         this.__showCharacterNumber = showCharacterNumber;
         this.__placeholder = placeholder;
         this.__solutions = solutions;
         this.__answer = answer;
+        this.__isCorrect = isCorrect;
     }
     createDOM(config) {
         // Define the DOM element here
@@ -67,6 +68,7 @@ export class ProblemInputNode extends DecoratorNode {
             showCharacterNumber: serializedNode.showCharacterNumber,
             placeholder: serializedNode.placeholder,
             answer: serializedNode.answer,
+            isCorrect: serializedNode.isCorrect,
         });
         return node;
     }
@@ -77,15 +79,16 @@ export class ProblemInputNode extends DecoratorNode {
             showCharacterNumber: this.__showCharacterNumber,
             placeholder: this.__placeholder,
             solutions: this.__solutions,
+            isCorrect: this.__isCorrect,
             answer: this.__answer,
         };
     }
     decorate() {
-        return (_jsx(InputComponent, { solutions: this.__solutions, showCharacterNumber: this.__showCharacterNumber, placeholder: this.__placeholder, answer: this.__answer, nodeKey: this.getKey() }));
+        return (_jsx(InputComponent, { solutions: this.__solutions, showCharacterNumber: this.__showCharacterNumber, placeholder: this.__placeholder, answer: this.__answer, isCorrect: this.__isCorrect, nodeKey: this.getKey() }));
     }
 }
-export function $createProblemInputNode({ showCharacterNumber, placeholder, solutions, answer, key, }) {
-    return $applyNodeReplacement(new ProblemInputNode(showCharacterNumber, placeholder, solutions, answer, key));
+export function $createProblemInputNode({ showCharacterNumber, placeholder, solutions, answer, isCorrect, key, }) {
+    return $applyNodeReplacement(new ProblemInputNode(showCharacterNumber, placeholder, solutions, answer, isCorrect, key));
 }
 export function $isProblemInputNode(node) {
     return node instanceof ProblemInputNode;

package/dist/patterns/LexicalEditor/nodes/ProblemInputNode/SegmentedInput.d.ts

@@ -1,5 +1,6 @@
 export interface SegmentedInputProps {
     readOnly: boolean;
+    isCorrect?: boolean;
     answerFormat: string;
     placeholder: string;
     value: string;

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 /** @jsxImportSource @emotion/react */
-import { css } from "@emotion/react";
+import { css, useTheme } from "@emotion/react";
 import styled from "@emotion/styled";
 import { InputBase } from "../../../../components/InputBase";
 import { useRef, useState } from "react";
@@ -9,7 +9,8 @@ import { useRef, useState } from "react";
  *  그리고 그 value는 split되어 segmented input에 표시됩니다.
  */
 export default function SegmentedInput(props) {
-    const { readOnly, answerFormat, placeholder, value, onChange } = props;
+    const { readOnly, isCorrect, answerFormat, placeholder, value, onChange } = props;
+    const theme = useTheme();
     // "** ***" => ["*", "*", " ", "*", "*", "*"]
     const splitedFormat = answerFormat.split("");
     // ["*", "*", " ", "*", "*", "*", " ", "*", "*"] => [2, 5]
@@ -58,7 +59,13 @@ export default function SegmentedInput(props) {
             display: flex;
             align-items: center;
             gap: 4px;
-          ` }, { children: despacedFormat.map((_format, i) => (_jsx(SquareInput, { leftSpaced: leftSpacedIndexs.includes(i), size: "small", color: focusedIndex === i ? "activePrimary" : "default", inputProps: {
+          ` }, { children: despacedFormat.map((_format, i) => (_jsx(SquareInput, { leftSpaced: leftSpacedIndexs.includes(i), size: "small", color: isCorrect === true
+                                ? "activeSuccess"
+                                : isCorrect === false
+                                    ? "activeDanger"
+                                    : focusedIndex === i
+                                        ? "activePrimary"
+                                        : "default", inputProps: {
                                 readOnly,
                                 onFocus: () => {
                                     var _a, _b;
@@ -68,6 +75,9 @@ export default function SegmentedInput(props) {
                                     (_a = hiddenRef.current) === null || _a === void 0 ? void 0 : _a.focus();
                                     (_b = hiddenRef.current) === null || _b === void 0 ? void 0 : _b.setSelectionRange(i, i);
                                 },
+                                color: isCorrect === false
+                                    ? theme.color.foreground.danger
+                                    : undefined,
                             }, value: splitedValues[i] || "", onChange: () => { } }, i))) })), _jsx(InputMarker, {})] }), _jsx(Text, { children: placeholder })] }));
 }
 const Container = styled.div `

package/dist/patterns/LexicalEditor/nodes/ProblemInputNode/TextInput.d.ts

@@ -1,6 +1,7 @@
 import { InputProps } from "../../../../components/Input";
 export type TextInputProps = InputProps & {
     readOnly: boolean;
+    isCorrect?: boolean;
 };
 /** 읽기모드/편집모드가 가능한 input 컴포넌트 */
 export default function TextInput(props: TextInputProps): import("react/jsx-runtime").JSX.Element;

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

@@ -12,16 +12,32 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useState } from "react";
 import Input from "../../../../components/Input";
+import { css as cssToClassName } from "@emotion/css";
+import { useTheme } from "@emotion/react";
 /** 읽기모드/편집모드가 가능한 input 컴포넌트 */
 export default function TextInput(props) {
-    const { readOnly } = props, InputOriginalProps = __rest(props, ["readOnly"]);
+    const { readOnly, isCorrect } = props, inputOriginalProps = __rest(props, ["readOnly", "isCorrect"]);
     const [focus, setFocus] = useState(false);
+    const theme = useTheme();
     if (readOnly) {
-        return (_jsx(Input, Object.assign({}, InputOriginalProps, { inputProps: {
+        return (_jsx(Input, Object.assign({}, inputOriginalProps, { color: isCorrect === true
+                ? "activeSuccess"
+                : isCorrect === false
+                    ? "activeDanger"
+                    : inputOriginalProps.color, inputProps: {
                 readOnly: true,
+                className: isCorrect === false
+                    ? cssToClassName `
+                  color: ${theme.color.foreground.danger};
+                  &::placeholder {
+                    // inputComponent의 placeholder 스타일을 덮어쓰기 위해 부득이하게 !important 사용
+                    color: ${theme.color.foreground.dangerDisabled} !important;
+                  }
+                `
+                    : undefined,
             } })));
     }
-    return (_jsx(Input, Object.assign({}, InputOriginalProps, { color: focus ? "activePrimary" : "default", inputProps: {
+    return (_jsx(Input, Object.assign({}, inputOriginalProps, { color: focus ? "activePrimary" : inputOriginalProps.color, inputProps: {
             onFocus: () => setFocus(true),
             onBlur: () => setFocus(false),
         } })));

package/package.json

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