@team-monolith/cds 1.40.0 → 1.42.0

package/dist/components/Tag.js

@@ -25,39 +25,39 @@ const COLOR_TO_STYLE = (theme, color) => ({
     `,
     red: css `
       box-sizing: border-box;
-      background: ${theme.color.container.dangerContainer};
-      border: 1px solid ${theme.color.container.dangerOnContainer};
-      color: ${theme.color.container.dangerOnContainer};
+      background: ${theme.color.container.redContainer};
+      border: 1px solid ${theme.color.container.redOnContainer};
+      color: ${theme.color.container.redOnContainer};
     `,
     teal: css `
       box-sizing: border-box;
-      background: ${theme.color.container.infoContainer};
-      border: 1px solid ${theme.color.container.infoOnContainer};
-      color: ${theme.color.container.infoOnContainer};
+      background: ${theme.color.container.tealContainer};
+      border: 1px solid ${theme.color.container.tealOnContainer};
+      color: ${theme.color.container.tealOnContainer};
     `,
     orange: css `
       box-sizing: border-box;
-      background: ${theme.color.container.secondaryContainer};
-      border: 1px solid ${theme.color.container.secondaryOnContainer};
-      color: ${theme.color.container.secondaryOnContainer};
+      background: ${theme.color.container.orangeContainer};
+      border: 1px solid ${theme.color.container.orangeOnContainer};
+      color: ${theme.color.container.orangeOnContainer};
     `,
     blue: css `
       box-sizing: border-box;
-      background: ${theme.color.container.primaryContainer};
-      border: 1px solid ${theme.color.container.primaryOnContainer};
-      color: ${theme.color.container.primaryOnContainer};
+      background: ${theme.color.container.blueContainer};
+      border: 1px solid ${theme.color.container.blueOnContainer};
+      color: ${theme.color.container.blueOnContainer};
     `,
     green: css `
       box-sizing: border-box;
-      background: ${theme.color.container.successContainer};
-      border: 1px solid ${theme.color.container.successOnContainer};
-      color: ${theme.color.container.successOnContainer};
+      background: ${theme.color.container.greenContainer};
+      border: 1px solid ${theme.color.container.greenOnContainer};
+      color: ${theme.color.container.greenOnContainer};
     `,
     yellow: css `
       box-sizing: border-box;
-      background: ${theme.color.container.warningContainer};
-      border: 1px solid ${theme.color.container.warningOnContainer};
-      color: ${theme.color.container.warningOnContainer};
+      background: ${theme.color.container.yellowContainer};
+      border: 1px solid ${theme.color.container.yellowOnContainer};
+      color: ${theme.color.container.yellowOnContainer};
     `,
     black: css `
       background: ${theme.color.container.obsidianContainer};

package/dist/foundation/color.d.ts

@@ -1,6 +1,6 @@
 declare const _default: {
     blue10: string;
-    priamry09: string;
+    blue09: string;
     blue08: string;
     blue07: string;
     blue06: string;
@@ -71,5 +71,11 @@ declare const _default: {
     grey02: string;
     grey01: string;
     white: string;
+    alpha065: string;
+    alpha030: string;
+    alpha015: string;
+    alphaf50: string;
+    alphaf20: string;
+    alphaf10: string;
 };
 export default _default;

package/dist/foundation/color.js

@@ -1,7 +1,7 @@
 // eslint-disable-next-line import/no-anonymous-default-export
 export default {
     blue10: "#1C3D73",
-    priamry09: "#234E91",
+    blue09: "#234E91",
     blue08: "#2C61B5",
     blue07: "#3574D9",
     blue06: "#3E88FF",
@@ -72,4 +72,10 @@ export default {
     grey02: "#F6F6F6",
     grey01: "#FDFDFD",
     white: "#FFFFFF",
+    alpha065: "#000000A6",
+    alpha030: "#0000004D",
+    alpha015: "#00000026",
+    alphaf50: "#FFFFFF80",
+    alphaf20: "#FFFFFF33",
+    alphaf10: "#FFFFFF1A",
 };

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 /// <reference path="../@types/emotion.d.ts" />
 export * from "./components/AlertDialog";
+export * from "./components/DecoratedNumber";
 export { default as Banner } from "./components/Banner";
 export * from "./components/Banner";
 export { default as Button } from "./components/Button";

package/dist/index.js

@@ -1,5 +1,6 @@
 /// <reference path="../../@types/emotion.d.ts" />
 export * from "./components/AlertDialog";
+export * from "./components/DecoratedNumber";
 export { default as Banner } from "./components/Banner";
 export * from "./components/Banner";
 export { default as Button } from "./components/Button";

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

@@ -7,8 +7,12 @@ export interface Solution {
 export interface ProblemInputPayload {
     showCharacterNumber: boolean;
     placeholder: string;
+    /** solution은 채점하기 전의 학생에게는 검열되어 노출됩니다.
+     * (ex: "코들 입니다" => "** ***") */
     solutions: Solution[];
     answer: string;
+    /** FE에서만 사용하는 값. 문제의 정오답 여부를 주입하여 스타일을 변경합니다. */
+    isCorrect?: boolean;
     key?: NodeKey;
 }
 export type SerializedProblemInputNode = Spread<ProblemInputPayload, SerializedLexicalNode>;
@@ -21,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[];
@@ -32,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,33 @@ 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 사용
+                    // TODO: static classname을 사용하여 !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/dist/patterns/LexicalEditor/nodes/ProblemSelectNode/ProblemSelectNode.d.ts

@@ -5,7 +5,8 @@ export interface ImageProps {
     altText: string;
 }
 export interface Selection {
-    isAnswer: boolean;
+    /** 해당 선택지의 정답 유무는 채점하기 전의 학생에게는 노출하지 않습니다. */
+    isAnswer?: boolean;
     show: {
         image: ImageProps | null;
         text: string;

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

@@ -0,0 +1,19 @@
+import React from "react";
+import { ImageProps } from "../ProblemSelectNode";
+export type SelectBoxType = "primary" | "success" | "danger";
+/** 비지니스 로직과 무관한 SelectBox를 그리는 공통 컴포넌트입니다. */
+export declare function SelectBoxComponent(props: {
+    className?: string;
+    indexClassName?: string;
+    contentClassName?: string;
+    /** SelectBox의 스타일 타입. 전달하지 않으면 기본 스타일이 적용됩니다. */
+    type?: SelectBoxType;
+    /** 문제 번호 박스 내부를 그립니다. */
+    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,92 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
+import { css, useTheme } from "@emotion/react";
+import styled from "@emotion/styled";
+const TYPE_TO_CONTAINER_STYLE = (theme, type) => ({
+    primary: css `
+      background: ${theme.color.container.blueContainer};
+      border: 1px solid ${theme.color.foreground.primary};
+      color: ${theme.color.container.blueOnContainer};
+    `,
+    success: css `
+      background: ${theme.color.container.greenContainer};
+      border: 1px solid ${theme.color.background.successActive};
+      color: ${theme.color.container.greenOnContainer};
+    `,
+    danger: css `
+      background: ${theme.color.container.redContainer};
+      border: 1px solid ${theme.color.background.dangerActive};
+      color: ${theme.color.container.redOnContainer};
+    `,
+})[type];
+const TYPE_TO_INDEX_STYLE = (theme, type) => ({
+    primary: css `
+      background: ${theme.color.background.primary};
+      border: 1px solid ${theme.color.background.primary};
+      color: ${theme.color.foreground.neutralAlt};
+    `,
+    success: css `
+      background: ${theme.color.background.successActive};
+      border: 1px solid ${theme.color.background.successActive};
+      color: ${theme.color.foreground.neutralAlt};
+    `,
+    danger: css `
+      background: ${theme.color.background.dangerActive};
+      border: 1px solid ${theme.color.background.dangerActive};
+      color: ${theme.color.foreground.neutralAlt};
+    `,
+})[type];
+/** 비지니스 로직과 무관한 SelectBox를 그리는 공통 컴포넌트입니다. */
+export function SelectBoxComponent(props) {
+    const { className, indexClassName, contentClassName, type, index, image, text, endIcon, onClick, } = props;
+    const theme = useTheme();
+    return (_jsxs(Container, Object.assign({ className: className, css: type ? TYPE_TO_CONTAINER_STYLE(theme, type) : undefined, onClick: onClick }, { children: [_jsx(Index, Object.assign({ className: indexClassName, css: type ? TYPE_TO_INDEX_STYLE(theme, type) : undefined }, { 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

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

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

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
+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 (_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 }));
+}

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

@@ -0,0 +1,10 @@
+import { ImageProps } from "../ProblemSelectNode";
+export interface SelectBoxViewProps {
+    index: number;
+    isSelected: boolean;
+    isAnswer?: boolean;
+    image?: ImageProps | null;
+    text: string;
+    onClick?: () => void;
+}
+export declare function SelectBoxView(props: SelectBoxViewProps): import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,42 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
+import { css } from "@emotion/react";
+import { CheckboxCircleFillIcon, CheckFillIcon, CloseCircleFillIcon, } from "../../../../../icons";
+import { SelectBoxComponent } from "./SelectBoxComponent";
+import Tag from "../../../../../components/Tag";
+const TYPE_TO_INDEX_ICON = (type) => ({
+    primary: (_jsx(CheckFillIcon, { css: css `
+          width: 12px;
+          height: 12px;
+        ` })),
+    success: (_jsx(CheckboxCircleFillIcon, { css: css `
+          width: 12px;
+          height: 12px;
+        ` })),
+    danger: (_jsx(CloseCircleFillIcon, { css: css `
+          width: 12px;
+          height: 12px;
+        ` })),
+})[type];
+export function SelectBoxView(props) {
+    const { index, isSelected, isAnswer, image, text, onClick } = props;
+    const selectBoxType = isSelected
+        ? isAnswer === undefined
+            ? "primary"
+            : isAnswer
+                ? "success"
+                : "danger"
+        : undefined;
+    return (_jsx(SelectBoxComponent, { css: css `
+        width: 100%;
+      `, type: selectBoxType, index: selectBoxType ? TYPE_TO_INDEX_ICON(selectBoxType) : index, 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/dist/patterns/LexicalEditor/nodes/ProblemSelectNode/SelectBox/index.d.ts

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

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

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

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

@@ -16,7 +16,7 @@ import { $isProblemSelectNode } from "./ProblemSelectNode";
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 import { useContext, useState } from "react";
 import useLexicalEditable from "@lexical/react/useLexicalEditable";
-import SelectBox from "./SelectBox";
+import { SelectBoxEdit, SelectBoxView } from "./SelectBox";
 import { css } from "@emotion/react";
 import SquareButton from "../../../../components/SquareButton";
 import { AlarmWarningFillIcon, Settings3FillIcon } from "../../../../icons";
@@ -35,7 +35,7 @@ export function SelectComponent(props) {
         return (_jsxs(_Fragment, { children: [hasMultipleAnswers && (_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(SelectBox, { index: index + 1, isSelected: selected.includes(selection.value), image: selection.show.image, text: selection.show.text, onClick: () => {
+              ` }), "\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: selection.isAnswer, isSelected: selected.includes(selection.value), image: selection.show.image, text: selection.show.text, onClick: () => {
                         if (lexicalCustomConfig.freezeProblemNode)
                             return;
                         const isSelected = selected.includes(selection.value);
@@ -62,7 +62,7 @@ export function SelectComponent(props) {
                                 }
                             });
                         }
-                    }, fullWidth: true }, index)))] }));
+                    } }, index)))] }));
     }
     // 교사 edit view
     return (_jsxs(_Fragment, { children: [_jsxs("div", Object.assign({ css: css `
@@ -72,7 +72,7 @@ export function SelectComponent(props) {
             display: flex;
             flex-direction: column;
             gap: 4px;
-          ` }, { children: selections.map((selection, index) => (_jsx(SelectBox, { index: index + 1, isAnswer: selection.isAnswer, image: selection.show.image, text: selection.show.text || `${index + 1}번 선택지`, onClick: () => setSettingOpen(true) }, index))) })), _jsx(SquareButton, { size: "small", color: "icon", icon: _jsx(Settings3FillIcon, {}), onClick: () => {
+          ` }, { children: selections.map((selection, index) => (_jsx(SelectBoxEdit, { index: index + 1, isAnswer: Boolean(selection.isAnswer), image: selection.show.image, text: selection.show.text || `${index + 1}번 선택지`, onClick: () => setSettingOpen(true) }, index))) })), _jsx(SquareButton, { size: "small", color: "icon", icon: _jsx(Settings3FillIcon, {}), onClick: () => {
                             setSettingOpen(true);
                         } })] })), settingOpen && (_jsx(SettingForm, Object.assign({}, settingFormProps, { onClose: () => setSettingOpen(false) })))] }));
 }

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

@@ -46,7 +46,7 @@ export function FormSelection(props) {
                             setImageOpen(true);
                         } }), _jsx(Controller, { name: `selections.${index}.isAnswer`, control: control, render: ({ field: { value, onChange } }) => (_jsxs(Answer, Object.assign({ onClick: () => {
                                 onChange(!value);
-                            } }, { children: ["\uC815\uB2F5", _jsx(Switch, { checked: value, size: "small" })] }))) }), onDelete && (_jsx(SquareButton, { color: "white", size: "xsmall", icon: _jsx(DeleteBinLineIcon, {}), onClick: onDelete }))] }))] }));
+                            } }, { children: ["\uC815\uB2F5", _jsx(Switch, { checked: Boolean(value), size: "small" })] }))) }), onDelete && (_jsx(SquareButton, { color: "white", size: "xsmall", icon: _jsx(DeleteBinLineIcon, {}), onClick: onDelete }))] }))] }));
 }
 const Container = styled.div(({ theme }) => css `
     display: flex;

package/dist/patterns/LexicalEditor/plugins/ComponentAdderPlugin/useContextMenuOptions.js

@@ -212,9 +212,9 @@ function getColoredQuoteContextMenuOptions(editor, theme, node) {
             },
         }),
         new ComponentPickerOption("빨간색", {
-            icon: (_jsx(InputMethodLineIcon, { color: theme.color.container.dangerOnContainer })),
+            icon: (_jsx(InputMethodLineIcon, { color: theme.color.container.redOnContainer })),
             iconContainerClassName: css `
-        background: ${theme.color.container.dangerContainer};
+        background: ${theme.color.container.redContainer};
       `,
             keywords: ["red"],
             onSelect: () => {
@@ -224,9 +224,9 @@ function getColoredQuoteContextMenuOptions(editor, theme, node) {
             },
         }),
         new ComponentPickerOption("노란색", {
-            icon: (_jsx(InputMethodLineIcon, { color: theme.color.container.warningOnContainer })),
+            icon: (_jsx(InputMethodLineIcon, { color: theme.color.container.yellowOnContainer })),
             iconContainerClassName: css `
-        background: ${theme.color.container.warningContainer};
+        background: ${theme.color.container.yellowContainer};
       `,
             keywords: ["yellow"],
             onSelect: () => {
@@ -236,9 +236,9 @@ function getColoredQuoteContextMenuOptions(editor, theme, node) {
             },
         }),
         new ComponentPickerOption("파란색", {
-            icon: (_jsx(InputMethodLineIcon, { color: theme.color.container.primaryOnContainer })),
+            icon: (_jsx(InputMethodLineIcon, { color: theme.color.container.blueOnContainer })),
             iconContainerClassName: css `
-        background: ${theme.color.container.primaryContainer};
+        background: ${theme.color.container.blueContainer};
       `,
             keywords: ["blue"],
             onSelect: () => {
@@ -248,9 +248,9 @@ function getColoredQuoteContextMenuOptions(editor, theme, node) {
             },
         }),
         new ComponentPickerOption("초록색", {
-            icon: (_jsx(InputMethodLineIcon, { color: theme.color.container.successOnContainer })),
+            icon: (_jsx(InputMethodLineIcon, { color: theme.color.container.greenOnContainer })),
             iconContainerClassName: css `
-        background: ${theme.color.container.successContainer};
+        background: ${theme.color.container.greenContainer};
       `,
             keywords: ["green"],
             onSelect: () => {