@team-monolith/cds 1.38.2 → 1.38.3

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

@@ -5,6 +5,5 @@ 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, isCorrect } = props, settingFormProps = __rest(props, ["answer", "isCorrect"]);
+    const { answer } = props, settingFormProps = __rest(props, ["answer"]);
     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, isCorrect: isCorrect, answerFormat: answerFormat, placeholder: placeholder || "여기에 입력하세요.", value: answerInput, onChange: handleChange }));
+            return (_jsx(SegmentedInput, { readOnly: lexicalCustomConfig.freezeProblemNode, answerFormat: answerFormat, placeholder: placeholder || "여기에 입력하세요.", value: answerInput, onChange: handleChange }));
         }
-        return (_jsx(TextInput, { readOnly: lexicalCustomConfig.freezeProblemNode, isCorrect: isCorrect, size: "small", color: "default", placeholder: placeholder || "여기에 입력하세요.", value: answerInput, onChange: (e) => {
+        return (_jsx(TextInput, { readOnly: lexicalCustomConfig.freezeProblemNode, 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,8 +11,6 @@ export interface ProblemInputPayload {
      * (ex: "코들 입니다" => "** ***") */
     solutions: Solution[];
     answer: string;
-    /** FE에서만 사용하는 값. 문제의 정오답 여부를 주입하여 스타일을 변경합니다. */
-    isCorrect?: boolean;
     key?: NodeKey;
 }
 export type SerializedProblemInputNode = Spread<ProblemInputPayload, SerializedLexicalNode>;
@@ -25,7 +23,6 @@ export declare class ProblemInputNode extends DecoratorNode<ReactNode> {
     __showCharacterNumber: boolean;
     __placeholder: string;
     __answer: string;
-    __isCorrect?: boolean;
     isInline(): boolean;
     static getType(): string;
     getSolutions(): Solution[];
@@ -37,12 +34,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, isCorrect?: boolean, key?: NodeKey);
+    constructor(showCharacterNumber: boolean, placeholder: string, solutions: Solution[], answer: string, 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, isCorrect, key, }: ProblemInputPayload): ProblemInputNode;
+export declare function $createProblemInputNode({ showCharacterNumber, placeholder, solutions, answer, key, }: ProblemInputPayload): ProblemInputNode;
 export declare function $isProblemInputNode(node: LexicalNode | null | undefined): node is ProblemInputNode;

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

@@ -42,15 +42,14 @@ export class ProblemInputNode extends DecoratorNode {
         self.__answer = answer;
     }
     static clone(node) {
-        return new ProblemInputNode(node.__showCharacterNumber, node.__placeholder, node.__solutions, node.__answer, node.__isCorrect, node.__key);
+        return new ProblemInputNode(node.__showCharacterNumber, node.__placeholder, node.__solutions, node.__answer, node.__key);
     }
-    constructor(showCharacterNumber, placeholder, solutions, answer, isCorrect, key) {
+    constructor(showCharacterNumber, placeholder, solutions, answer, 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
@@ -68,7 +67,6 @@ export class ProblemInputNode extends DecoratorNode {
             showCharacterNumber: serializedNode.showCharacterNumber,
             placeholder: serializedNode.placeholder,
             answer: serializedNode.answer,
-            isCorrect: serializedNode.isCorrect,
         });
         return node;
     }
@@ -79,16 +77,15 @@ 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, isCorrect: this.__isCorrect, nodeKey: this.getKey() }));
+        return (_jsx(InputComponent, { solutions: this.__solutions, showCharacterNumber: this.__showCharacterNumber, placeholder: this.__placeholder, answer: this.__answer, nodeKey: this.getKey() }));
     }
 }
-export function $createProblemInputNode({ showCharacterNumber, placeholder, solutions, answer, isCorrect, key, }) {
-    return $applyNodeReplacement(new ProblemInputNode(showCharacterNumber, placeholder, solutions, answer, isCorrect, key));
+export function $createProblemInputNode({ showCharacterNumber, placeholder, solutions, answer, key, }) {
+    return $applyNodeReplacement(new ProblemInputNode(showCharacterNumber, placeholder, solutions, answer, key));
 }
 export function $isProblemInputNode(node) {
     return node instanceof ProblemInputNode;

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

@@ -1,6 +1,5 @@
 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, useTheme } from "@emotion/react";
+import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 import { InputBase } from "../../../../components/InputBase";
 import { useRef, useState } from "react";
@@ -9,8 +9,7 @@ import { useRef, useState } from "react";
  *  그리고 그 value는 split되어 segmented input에 표시됩니다.
  */
 export default function SegmentedInput(props) {
-    const { readOnly, isCorrect, answerFormat, placeholder, value, onChange } = props;
-    const theme = useTheme();
+    const { readOnly, answerFormat, placeholder, value, onChange } = props;
     // "** ***" => ["*", "*", " ", "*", "*", "*"]
     const splitedFormat = answerFormat.split("");
     // ["*", "*", " ", "*", "*", "*", " ", "*", "*"] => [2, 5]
@@ -59,13 +58,7 @@ 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: isCorrect === true
-                                ? "activeSuccess"
-                                : isCorrect === false
-                                    ? "activeDanger"
-                                    : focusedIndex === i
-                                        ? "activePrimary"
-                                        : "default", inputProps: {
+          ` }, { children: despacedFormat.map((_format, i) => (_jsx(SquareInput, { leftSpaced: leftSpacedIndexs.includes(i), size: "small", color: focusedIndex === i ? "activePrimary" : "default", inputProps: {
                                 readOnly,
                                 onFocus: () => {
                                     var _a, _b;
@@ -75,9 +68,6 @@ 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,7 +1,6 @@
 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,32 +12,16 @@ 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, isCorrect } = props, inputOriginalProps = __rest(props, ["readOnly", "isCorrect"]);
+    const { readOnly } = props, InputOriginalProps = __rest(props, ["readOnly"]);
     const [focus, setFocus] = useState(false);
-    const theme = useTheme();
     if (readOnly) {
-        return (_jsx(Input, Object.assign({}, inputOriginalProps, { color: isCorrect === true
-                ? "activeSuccess"
-                : isCorrect === false
-                    ? "activeDanger"
-                    : inputOriginalProps.color, inputProps: {
+        return (_jsx(Input, Object.assign({}, InputOriginalProps, { 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" : inputOriginalProps.color, inputProps: {
+    return (_jsx(Input, Object.assign({}, InputOriginalProps, { color: focus ? "activePrimary" : "default", inputProps: {
             onFocus: () => setFocus(true),
             onBlur: () => setFocus(false),
         } })));

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

@@ -0,0 +1,16 @@
+import React from "react";
+import { ImageProps } from "../ProblemSelectNode";
+/** 비지니스 로직과 무관한 SelectBox를 그리는 공통 컴포넌트입니다. */
+export declare function SelectBoxComponent(props: {
+    className?: string;
+    indexClassName?: string;
+    contentClassName?: string;
+    /** 문제 번호 박스 내부를 그립니다. */
+    index: React.ReactNode;
+    image?: ImageProps | null;
+    text: React.ReactNode;
+    /** SelectBox content 우측에 표시될 부분 */
+    endIcon?: React.ReactNode;
+    /** 박스를 클릭할 때 실행될 콜백. 존재하지 않으면 cursor: pointer가 적용되지 않습니다. */
+    onClick?: () => void;
+}): import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+/** 비지니스 로직과 무관한 SelectBox를 그리는 공통 컴포넌트입니다. */
+export function SelectBoxComponent(props) {
+    const { className, indexClassName, contentClassName, index, image, text, endIcon, onClick, } = props;
+    return (_jsxs(Container, Object.assign({ className: className, onClick: onClick }, { children: [_jsx(Index, Object.assign({ className: indexClassName }, { children: index })), _jsxs(Content, Object.assign({ className: contentClassName }, { children: [image && (_jsx("img", { src: image.src, alt: image.altText, css: css `
+              height: auto;
+              // 이미지로 인해 좌우로 스크롤이 생기는 것을 방지
+              max-width: 100%;
+              width: fit-content;
+              border-radius: 6px;
+            ` })), text] })), endIcon] })));
+}
+const Container = styled.div(({ theme, onClick }) => css `
+    ${onClick && "cursor: pointer;"}
+    display: flex;
+    box-sizing: border-box;
+    width: 400px;
+    padding: 12px;
+    gap: 12px;
+    border-radius: 8px;
+    background: ${theme.color.background.neutralAlt};
+    border: 1px solid transparent;
+    color: ${theme.color.foreground.neutralBase};
+  `);
+const Index = styled.div(({ theme }) => css `
+    display: flex;
+    box-sizing: border-box;
+    width: 20px;
+    height: 20px;
+    padding: 4px;
+
+    user-select: none; /* Standard syntax */
+
+    justify-content: center;
+    align-items: center;
+    border-radius: 4px;
+    border: 1px solid ${theme.color.background.neutralAltActive};
+    background: ${theme.color.background.neutralBase};
+    color: ${theme.color.foreground.neutralBaseDisabled};
+    font-family: ${theme.fontFamily.ui};
+    font-size: 14px;
+    font-weight: 800;
+    line-height: 16px;
+  `);
+const Content = styled.div(({ theme }) => css `
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    flex: 1;
+    font-family: ${theme.fontFamily.ui};
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 20px;
+  `);

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

@@ -4,6 +4,6 @@ export interface SelectBoxEditProps {
     isAnswer: boolean;
     image?: ImageProps | null;
     text: string;
-    onClick?: () => void;
+    onClick: () => void;
 }
 export declare function SelectBoxEdit(props: SelectBoxEditProps): import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -1,61 +1,13 @@
-import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 /** @jsxImportSource @emotion/react */
-import styled from "@emotion/styled";
 import { css, useTheme } from "@emotion/react";
 import { CheckboxCircleFillIcon } from "../../../../../icons";
+import { SelectBoxComponent } from "./SelectBoxComponent";
 export function SelectBoxEdit(props) {
     const { index, isAnswer, image, text, onClick } = props;
     const theme = useTheme();
-    return (_jsxs(Container, Object.assign({ onClick: onClick }, { children: [_jsx(Index, { children: index }), _jsxs(Content, { children: [image && (_jsx("img", { src: image.src, alt: image.altText, css: css `
-              height: auto;
-              // 이미지로 인해 좌우로 스크롤이 생기는 것을 방지
-              max-width: 100%;
-              width: fit-content;
-              border-radius: 6px;
-            ` })), text] }), isAnswer && (_jsx(CheckboxCircleFillIcon, { color: theme.color.foreground.success, css: css `
-            width: 16px;
-            height: 16px;
-          ` }))] })));
+    return (_jsx(SelectBoxComponent, { index: index, image: image, text: text, endIcon: isAnswer && (_jsx(CheckboxCircleFillIcon, { color: theme.color.foreground.success, css: css `
+              width: 16px;
+              height: 16px;
+            ` })), onClick: onClick }));
 }
-const Container = styled.div(({ theme }) => css `
-    cursor: pointer;
-    display: flex;
-    box-sizing: border-box;
-    width: 400px;
-    padding: 12px;
-    gap: 12px;
-    border-radius: 8px;
-    background: ${theme.color.background.neutralAlt};
-    border: 1px solid transparent;
-    color: ${theme.color.foreground.neutralBase};
-  `);
-const Index = styled.div(({ theme }) => css `
-    display: flex;
-    box-sizing: border-box;
-    width: 20px;
-    height: 20px;
-    padding: 4px;
-
-    user-select: none; /* Standard syntax */
-
-    justify-content: center;
-    align-items: center;
-    border-radius: 4px;
-    border: 1px solid ${theme.color.background.neutralAltActive};
-    background: ${theme.color.background.neutralBase};
-    color: ${theme.color.foreground.neutralBaseDisabled};
-    font-family: ${theme.fontFamily.ui};
-    font-size: 14px;
-    font-weight: 800;
-    line-height: 16px;
-  `);
-const Content = styled.div(({ theme }) => css `
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
-    flex: 1;
-    font-family: ${theme.fontFamily.ui};
-    font-size: 16px;
-    font-weight: 400;
-    line-height: 20px;
-  `);

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

@@ -1,4 +1,4 @@
-import { ImageProps } from "../../ProblemSelectNode";
+import { ImageProps } from "../ProblemSelectNode";
 export interface SelectBoxViewProps {
     index: number;
     isSelected: boolean;

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

@@ -0,0 +1,104 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
+import { css, useTheme } from "@emotion/react";
+import { css as cssToClassName } from "@emotion/css";
+import { CheckboxCircleFillIcon, CheckFillIcon, CloseCircleFillIcon, } from "../../../../../icons";
+import { SelectBoxComponent } from "./SelectBoxComponent";
+import Tag from "../../../../../components/Tag";
+const getBoxStyle = (theme, isSelected, isAnswer) => {
+    if (isSelected) {
+        // 선택 박스
+        if (isAnswer === undefined) {
+            return css `
+        background: ${theme.color.container.primaryContainer};
+        border: 1px solid ${theme.color.foreground.primary};
+        color: ${theme.color.container.primaryOnContainer};
+      `;
+        }
+        // 정답 박스
+        if (isAnswer) {
+            return css `
+        background: ${theme.color.container.successContainer};
+        border: 1px solid ${theme.color.background.successActive};
+        color: ${theme.color.container.successOnContainer};
+      `;
+        }
+        // 오답 박스
+        return css `
+      background: ${theme.color.container.dangerContainer};
+      border: 1px solid ${theme.color.background.dangerActive};
+      color: ${theme.color.container.dangerOnContainer};
+    `;
+    }
+    return undefined;
+};
+const getIndexClassName = (theme, isSelected, isAnswer) => {
+    if (isSelected) {
+        // 선택 박스
+        if (isAnswer === undefined) {
+            return cssToClassName `
+        background: ${theme.color.background.primary};
+        border: 1px solid ${theme.color.background.primary};
+        color: ${theme.color.foreground.neutralAlt};
+      `;
+        }
+        // 정답 박스
+        if (isAnswer) {
+            return cssToClassName `
+        background: ${theme.color.background.successActive};
+        border: 1px solid ${theme.color.background.successActive};
+        color: ${theme.color.foreground.neutralAlt};
+      `;
+        }
+        // 오답 박스
+        return cssToClassName `
+      background: ${theme.color.background.dangerActive};
+      border: 1px solid ${theme.color.background.dangerActive};
+      color: ${theme.color.foreground.neutralAlt};
+    `;
+    }
+    return undefined;
+};
+const getIndexComponent = (index, isSelected, isAnswer) => {
+    if (isSelected) {
+        // 선택 박스
+        if (isAnswer === undefined) {
+            return (_jsx(CheckFillIcon, { css: css `
+            width: 12px;
+            height: 12px;
+          ` }));
+        }
+        // 정답 박스
+        if (isAnswer) {
+            return (_jsx(CheckboxCircleFillIcon, { css: css `
+            width: 12px;
+            height: 12px;
+          ` }));
+        }
+        // 오답 박스
+        return (_jsx(CloseCircleFillIcon, { css: css `
+          width: 12px;
+          height: 12px;
+        ` }));
+    }
+    return index;
+};
+export function SelectBoxView(props) {
+    const { index, isSelected, isAnswer, image, text, onClick } = props;
+    const theme = useTheme();
+    return (_jsx(SelectBoxComponent, { css: [
+            css `
+          width: 100%;
+        `,
+            getBoxStyle(theme, isSelected, isAnswer),
+        ], indexClassName: getIndexClassName(theme, isSelected, isAnswer), index: getIndexComponent(index, isSelected, isAnswer), image: image, text: text, 
+        // isAnswer가 존재하면 채점 후의 상태이므로 unclickable을 위해 onClick을 전달하지 않음
+        onClick: isAnswer === undefined ? onClick : undefined, 
+        // 선택되지 않았으나 정답일 때 정답 태그를 표시
+        endIcon: isAnswer &&
+            !isSelected && (_jsx(Tag, { label: "\uC815\uB2F5", icon: _jsx(CheckboxCircleFillIcon, {}), color: "green", css: css `
+              span {
+                font-weight: 700;
+              }
+            ` })) }));
+}

package/package.json

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

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

@@ -1,77 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-/** @jsxImportSource @emotion/react */
-import styled from "@emotion/styled";
-import { css } from "@emotion/react";
-import { CheckFillIcon } from "../../../../../../icons";
-import { SubmittedBox } from "./SubmittedBox";
-export function SelectBoxView(props) {
-    const { index, isSelected, isAnswer, image, text, onClick } = props;
-    if (isAnswer !== undefined) {
-        return (_jsx(SubmittedBox, { index: index, isSelected: isSelected, isAnswer: isAnswer, image: image, text: text }));
-    }
-    // 채점 전의 객관식 선택지 view
-    return (_jsxs(Container, Object.assign({ isSelected: isSelected, onClick: onClick }, { children: [_jsx(Index, Object.assign({ isSelected: isSelected }, { children: isSelected ? (_jsx(CheckFillIcon, { css: css `
-              width: 12px;
-              height: 12px;
-            ` })) : (index) })), _jsxs(Content, { children: [image && (_jsx("img", { src: image.src, alt: image.altText, css: css `
-              height: auto;
-              // 이미지로 인해 좌우로 스크롤이 생기는 것을 방지
-              max-width: 100%;
-              width: fit-content;
-              border-radius: 6px;
-            ` })), text] })] })));
-}
-const Container = styled.div(({ theme, isSelected }) => css `
-    cursor: pointer;
-    display: flex;
-    box-sizing: border-box;
-    width: 100%;
-    padding: 12px;
-    gap: 12px;
-    border-radius: 8px;
-    background: ${isSelected
-    ? theme.color.container.primaryContainer
-    : theme.color.background.neutralAlt};
-    border: ${isSelected
-    ? `1px solid ${theme.color.foreground.primary}`
-    : "1px solid transparent"};
-    color: ${isSelected
-    ? theme.color.container.primaryOnContainer
-    : theme.color.foreground.neutralBase};
-  `);
-const Index = styled.div(({ theme, isSelected }) => css `
-    display: flex;
-    box-sizing: border-box;
-    width: 20px;
-    height: 20px;
-    padding: 4px;
-
-    user-select: none; /* Standard syntax */
-
-    justify-content: center;
-    align-items: center;
-    border-radius: 4px;
-    border: ${isSelected
-    ? "none"
-    : `1px solid ${theme.color.background.neutralAltActive}`};
-    background: ${isSelected
-    ? theme.color.background.primary
-    : theme.color.background.neutralBase};
-    color: ${isSelected
-    ? theme.color.foreground.neutralAlt
-    : theme.color.foreground.neutralBaseDisabled};
-    font-family: ${theme.fontFamily.ui};
-    font-size: 14px;
-    font-weight: 800;
-    line-height: 16px;
-  `);
-const Content = styled.div(({ theme }) => css `
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
-    flex: 1;
-    font-family: ${theme.fontFamily.ui};
-    font-size: 16px;
-    font-weight: 400;
-    line-height: 20px;
-  `);

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

@@ -1,4 +0,0 @@
-/** 선택된 상태로 제출된 객관식 선택지 문항 번호 컴포넌트입니다. */
-export declare function SelectedIndex(props: {
-    isAnswer: boolean;
-}): import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -1,38 +0,0 @@
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-/** @jsxImportSource @emotion/react */
-import { css, useTheme } from "@emotion/react";
-import styled from "@emotion/styled";
-import { CheckboxCircleFillIcon, CloseCircleFillIcon, } from "../../../../../../../icons";
-/** 선택된 상태로 제출된 객관식 선택지 문항 번호 컴포넌트입니다. */
-export function SelectedIndex(props) {
-    const theme = useTheme();
-    if (props.isAnswer) {
-        return (_jsx(Index, Object.assign({ css: css `
-          background: ${theme.color.background.successActive};
-          border: 1px solid ${theme.color.background.successActive};
-        ` }, { children: _jsx(CheckboxCircleFillIcon, { css: css `
-            width: 12px;
-            height: 12px;
-          `, color: theme.color.foreground.neutralAlt }) })));
-    }
-    return (_jsx(Index, Object.assign({ css: css `
-        background: ${theme.color.background.dangerActive};
-        border: 1px solid ${theme.color.background.dangerActive};
-      ` }, { children: _jsx(CloseCircleFillIcon, { css: css `
-          width: 12px;
-          height: 12px;
-        `, color: theme.color.foreground.neutralAlt }) })));
-}
-const Index = styled.div `
-  display: flex;
-  box-sizing: border-box;
-  width: 20px;
-  height: 20px;
-  padding: 4px;
-
-  user-select: none; /* Standard syntax */
-
-  justify-content: center;
-  align-items: center;
-  border-radius: 4px;
-`;

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

@@ -1,10 +0,0 @@
-import { ImageProps } from "../../../ProblemSelectNode";
-export interface SelectBoxViewGradedProps {
-    index: number;
-    isSelected: boolean;
-    isAnswer: boolean;
-    image?: ImageProps | null;
-    text: string;
-}
-/** 채점(제출) 후의 정답이 공개된(isAnswer가 존재하는) 객관식 선택지 view입니다. */
-export declare function SubmittedBox(props: SelectBoxViewGradedProps): import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -1,86 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-/** @jsxImportSource @emotion/react */
-import styled from "@emotion/styled";
-import { css, useTheme } from "@emotion/react";
-import { CheckboxCircleFillIcon } from "../../../../../../../icons";
-import Tag from "../../../../../../../components/Tag";
-import { SelectedIndex } from "./SelectedIndex";
-const SELECTD_CONTAINER_STYLE = (theme, isCorrect) => isCorrect
-    ? css `
-        background: ${theme.color.container.successContainer};
-        border: 1px solid ${theme.color.background.successActive};
-        color: ${theme.color.container.successOnContainer};
-      `
-    : css `
-        background: ${theme.color.container.dangerContainer};
-        border: 1px solid ${theme.color.background.dangerActive};
-        color: ${theme.color.container.dangerOnContainer};
-      `;
-/** 채점(제출) 후의 정답이 공개된(isAnswer가 존재하는) 객관식 선택지 view입니다. */
-export function SubmittedBox(props) {
-    const { index, isSelected, isAnswer, image, text } = props;
-    const theme = useTheme();
-    // 선택된 상태일 때 : 정오답 여부에 따라 디자인이 다름
-    if (isSelected) {
-        return (_jsxs(Container, Object.assign({ css: SELECTD_CONTAINER_STYLE(theme, isAnswer) }, { children: [_jsx(SelectedIndex, { isAnswer: isAnswer }), _jsxs(Content, { children: [image && (_jsx("img", { src: image.src, alt: image.altText, css: css `
-                height: auto;
-                // 이미지로 인해 좌우로 스크롤이 생기는 것을 방지
-                max-width: 100%;
-                width: fit-content;
-                border-radius: 6px;
-              ` })), text] })] })));
-    }
-    // 선택되지 않은 상태일 때 : 정답이면 정답 태그를 표시
-    return (_jsxs(Container, { children: [_jsx(Index, { children: index }), _jsxs(Content, { children: [image && (_jsx("img", { src: image.src, alt: image.altText, css: css `
-              height: auto;
-              // 이미지로 인해 좌우로 스크롤이 생기는 것을 방지
-              max-width: 100%;
-              width: fit-content;
-              border-radius: 6px;
-            ` })), text] }), isAnswer && (_jsx(Tag, { label: "\uC815\uB2F5", icon: _jsx(CheckboxCircleFillIcon, {}), color: "green", css: css `
-            span {
-              font-weight: 700;
-            }
-          ` }))] }));
-}
-const Container = styled.div(({ theme }) => css `
-    display: flex;
-    box-sizing: border-box;
-    width: 100%;
-    padding: 12px;
-    gap: 12px;
-    border-radius: 8px;
-    background: ${theme.color.background.neutralAlt};
-    border: 1px solid transparent;
-    color: ${theme.color.foreground.neutralBase};
-  `);
-const Index = styled.div(({ theme }) => css `
-    display: flex;
-    box-sizing: border-box;
-    width: 20px;
-    height: 20px;
-    padding: 4px;
-
-    user-select: none; /* Standard syntax */
-
-    justify-content: center;
-    align-items: center;
-    border-radius: 4px;
-    border: 1px solid ${theme.color.background.neutralAltActive};
-    background: ${theme.color.background.neutralBase};
-    color: ${theme.color.foreground.neutralBaseDisabled};
-    font-family: ${theme.fontFamily.ui};
-    font-size: 14px;
-    font-weight: 800;
-    line-height: 16px;
-  `);
-const Content = styled.div(({ theme }) => css `
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
-    flex: 1;
-    font-family: ${theme.fontFamily.ui};
-    font-size: 16px;
-    font-weight: 400;
-    line-height: 20px;
-  `);

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

@@ -1 +0,0 @@
-export * from "./SubmittedBox";

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

@@ -1 +0,0 @@
-export * from "./SubmittedBox";

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

@@ -1 +0,0 @@
-export * from "./SelectBoxView";

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

@@ -1 +0,0 @@
-export * from "./SelectBoxView";