@team-monolith/cds 1.61.3 → 1.63.0

package/@types/emotion.d.ts

@@ -106,20 +106,6 @@ interface CodleColors {
     ebookAlt: string;
     makecode: string;
     makecodeAlt: string;
-    decorativeRed: string;
-    decorativePink: string;
-    decorativeAmber: string;
-    decorativeGrass: string;
-    decorativeGreen: string;
-    decorativeBlue: string;
-    decorativeIndigo: string;
-    decorativePurple: string;
-    decorativeBrown: string;
-    decorativeCopper: string;
-    decorativeGold: string;
-    decorativeSilver: string;
-    decorativeGray: string;
-    decorativeBlack: string;
   };
   blanket: {
     neutral: string;

package/dist/CodleDesignSystemProvider.js

@@ -111,20 +111,6 @@ export const light = {
             ebookAlt: "#E0F2FF",
             makecode: "#AA278F",
             makecodeAlt: "#FFE0F9",
-            decorativeRed: "#D73152",
-            decorativePink: "#D13D78",
-            decorativeAmber: "#CC4827",
-            decorativeGrass: "#6E7B3F",
-            decorativeGreen: "#26864B",
-            decorativeBlue: "#0076D0",
-            decorativeIndigo: "#5863FF",
-            decorativePurple: "#9A3BBC",
-            decorativeBrown: "#996C49",
-            decorativeCopper: "#8A6470",
-            decorativeGold: "#876E3F",
-            decorativeSilver: "#6A7781",
-            decorativeGray: "#747474",
-            decorativeBlack: "#474658",
         },
         blanket: {
             neutral: COLOR.alpha030,
@@ -242,20 +228,6 @@ export const dark = {
             ebookAlt: "#475966",
             makecode: "#AA278F",
             makecodeAlt: "#664760",
-            decorativeRed: "#D73152",
-            decorativePink: "#D13D78",
-            decorativeAmber: "#CC4827",
-            decorativeGrass: "#6E7B3F",
-            decorativeGreen: "#26864B",
-            decorativeBlue: "#0076D0",
-            decorativeIndigo: "#5863FF",
-            decorativePurple: "#9A3BBC",
-            decorativeBrown: "#996C49",
-            decorativeCopper: "#8A6470",
-            decorativeGold: "#876E3F",
-            decorativeSilver: "#6A7781",
-            decorativeGray: "#747474",
-            decorativeBlack: "#474658",
         },
         blanket: {
             neutral: COLOR.alphaf20,

package/dist/index.d.ts

@@ -3,7 +3,6 @@ export * from "./components/AlertDialog";
 export * from "./components/DecoratedNumber";
 export { default as Banner } from "./components/Banner";
 export * from "./components/Banner";
-export { default as Book } from "./components/Book";
 export { default as Button } from "./components/Button";
 export * from "./components/Button";
 export { default as CheckboxInput } from "./components/CheckboxInput";

package/dist/index.js

@@ -3,7 +3,6 @@ export * from "./components/AlertDialog";
 export * from "./components/DecoratedNumber";
 export { default as Banner } from "./components/Banner";
 export * from "./components/Banner";
-export { default as Book } from "./components/Book";
 export { default as Button } from "./components/Button";
 export * from "./components/Button";
 export { default as CheckboxInput } from "./components/CheckboxInput";

package/dist/patterns/LexicalEditor/LexicalEditor.js

@@ -1,24 +1,11 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { LexicalComposer, } from "@lexical/react/LexicalComposer";
-import { HeadingNode, QuoteNode } from "@lexical/rich-text";
-import { TableCellNode, TableNode, TableRowNode } from "@lexical/table";
-import { ListItemNode, ListNode } from "@lexical/list";
-import { CodeHighlightNode, CodeNode } from "@lexical/code";
-import { AutoLinkNode, LinkNode } from "@lexical/link";
-import { ImageNode } from "./nodes/ImageNode";
-import { HorizontalRuleNode } from "@lexical/react/LexicalHorizontalRuleNode";
 import { getTheme } from "./theme";
 import { useTheme } from "@emotion/react";
 import Plugins from "./Plugins";
-import { ColoredQuoteNode, ProblemInputNode } from "./nodes";
+import { nodes } from "./nodes";
 import { LexicalCustomConfigContext } from "./LexicalCustomConfigContext";
-import { ProblemSelectNode } from "./nodes/ProblemSelectNode";
-import { LayoutContainerNode } from "./nodes/LayoutContainerNode";
-import { LayoutItemNode } from "./nodes/LayoutItemNode";
 import _ from "lodash";
-import { SheetSelectNode } from "./nodes/SheetSelectNode";
-import { SheetInputNode } from "./nodes/SheetInputNode";
-import { SelfEvaluationNode } from "./nodes/SelfEvaluationNode";
 function validateValue(value) {
     var _a, _b;
     if (value && typeof value !== "object") {
@@ -60,35 +47,7 @@ export function LexicalEditor(props) {
     const initialConfig = {
         namespace: "CodleLexicalEditor",
         onError: (error) => console.error(error),
-        nodes: [
-            ProblemInputNode,
-            ProblemSelectNode,
-            HeadingNode,
-            ListNode,
-            ListItemNode,
-            QuoteNode,
-            CodeNode,
-            CodeHighlightNode,
-            TableNode,
-            TableCellNode,
-            TableRowNode,
-            AutoLinkNode,
-            LinkNode,
-            ImageNode,
-            HorizontalRuleNode,
-            ColoredQuoteNode,
-            LayoutContainerNode,
-            LayoutItemNode,
-            SheetSelectNode,
-            SheetInputNode,
-            SelfEvaluationNode,
-            {
-                replace: QuoteNode,
-                with: (_node) => {
-                    return new ColoredQuoteNode("grey");
-                },
-            },
-        ],
+        nodes,
         // 마운트 된 이후 editable 수정해도 theme에 반영되지 않음 유의
         theme: getTheme(theme, editable),
         editorState: validateValue(value) ? JSON.stringify(value) : undefined,

package/dist/patterns/LexicalEditor/convertToMarkdown.d.ts

@@ -0,0 +1,2 @@
+import { SerializedEditorState } from "lexical";
+export declare function convertToMarkdown(serializedLexical: SerializedEditorState): string;

package/dist/patterns/LexicalEditor/convertToMarkdown.js

@@ -0,0 +1,21 @@
+import { createEditor } from "lexical";
+import { $convertToMarkdownString } from "@lexical/markdown";
+import { CODLE_TRANSFORMERS } from "./plugins/MarkdownTransformers";
+import { nodes } from "./nodes";
+export function convertToMarkdown(serializedLexical) {
+    // Create a Lexical editor instance
+    const editor = createEditor({
+        nodes,
+    });
+    // Update the editor state with the serialized Lexical state
+    editor.update(() => {
+        const editorState = editor.parseEditorState(serializedLexical);
+        editor.setEditorState(editorState);
+    });
+    // Convert the Lexical editor state to Markdown string
+    let markdown = "";
+    editor.update(() => {
+        markdown = $convertToMarkdownString(CODLE_TRANSFORMERS);
+    });
+    return markdown;
+}

package/dist/patterns/LexicalEditor/index.d.ts

@@ -1,2 +1,3 @@
 export * from "./LexicalEditor";
 export * from "./plugins/MarkdownTransformers";
+export * from "./convertToMarkdown";

package/dist/patterns/LexicalEditor/index.js

@@ -1,2 +1,3 @@
 export * from "./LexicalEditor";
 export * from "./plugins/MarkdownTransformers";
+export * from "./convertToMarkdown";

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

@@ -2,18 +2,18 @@ import React from "react";
 import { ImageProps } from "../../../components/InsertImageDialog";
 export type SelectBoxType = "primary" | "success" | "danger";
 /** 비지니스 로직과 무관한 SelectBox를 그리는 공통 컴포넌트입니다. */
-export declare function SelectBoxComponent(props: {
-    className?: string;
-    indexClassName?: string;
-    contentClassName?: string;
+export declare const SelectBoxComponent: React.ForwardRefExoticComponent<{
+    className?: string | undefined;
+    indexClassName?: string | undefined;
+    contentClassName?: string | undefined;
     /** SelectBox의 스타일 타입. 전달하지 않으면 기본 스타일이 적용됩니다. */
-    type?: SelectBoxType;
+    type?: SelectBoxType | undefined;
     /** 문제 번호 박스 내부를 그립니다. */
     index: React.ReactNode;
-    image?: ImageProps | null;
+    image?: ImageProps | null | undefined;
     text: React.ReactNode;
     /** SelectBox content 우측에 표시될 부분 */
     endIcon?: React.ReactNode;
-    /** 박스를 클릭할 때 실행될 콜백. 존재하지 않으면 cursor: pointer가 적용되지 않습니다. */
-    onClick?: () => void;
-}): import("@emotion/react/jsx-runtime").JSX.Element;
+    /** 박스를 클릭할 때 실행될 콜백. 전달하지 않으면 cursor: pointer가 적용되지 않습니다. */
+    onClick?: (() => void) | undefined;
+} & Partial<React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<HTMLDivElement>>;

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

@@ -1,7 +1,19 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 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";
+import { forwardRef } from "react";
 const TYPE_TO_CONTAINER_STYLE = (theme, type) => ({
     primary: css `
       background: ${theme.color.container.blueContainer};
@@ -37,17 +49,17 @@ const TYPE_TO_INDEX_STYLE = (theme, type) => ({
     `,
 })[type];
 /** 비지니스 로직과 무관한 SelectBox를 그리는 공통 컴포넌트입니다. */
-export function SelectBoxComponent(props) {
-    const { className, indexClassName, contentClassName, type, index, image, text, endIcon, onClick, } = props;
+export const SelectBoxComponent = forwardRef(function SelectBoxComponent(props, ref) {
+    const { className, indexClassName, contentClassName, type, index, image, text, endIcon, onClick } = props, restProps = __rest(props, ["className", "indexClassName", "contentClassName", "type", "index", "image", "text", "endIcon", "onClick"]);
     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 `
+    return (_jsxs(Container, Object.assign({ className: className, ref: ref }, restProps, { css: type ? TYPE_TO_CONTAINER_STYLE(theme, type) : undefined, onClick: onClick }, { children: [_jsx(Index, Object.assign({ className: indexClassName, "aria-hidden": "true", css: type ? TYPE_TO_INDEX_STYLE(theme, type) : undefined }, { children: index })), _jsxs(Content, Object.assign({ className: contentClassName, "aria-hidden": "true" }, { children: [image && (_jsx("img", { "aria-hidden": "true", 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;

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

@@ -4,6 +4,8 @@ import { css } from "@emotion/react";
 import { CheckboxCircleFillIcon, CheckFillIcon, CloseCircleFillIcon, } from "../../../../../icons";
 import { SelectBoxComponent } from "./SelectBoxComponent";
 import Tag from "../../../../../components/Tag";
+import { useRef } from "react";
+import { useEventListener } from "usehooks-ts";
 const TYPE_TO_INDEX_ICON = (type) => ({
     primary: (_jsx(CheckFillIcon, { css: css `
           width: 12px;
@@ -27,9 +29,28 @@ export function SelectBoxView(props) {
                 ? "success"
                 : "danger"
         : undefined;
+    const boxRef = useRef(null);
+    const handleKeyDown = (e) => {
+        // onClick이 없으면 아무것도 하지 않음.
+        if (!onClick) {
+            return;
+        }
+        // tab을 통해 focus된 상태가 아니면 아무것도 하지 않음.
+        if (document.activeElement !== boxRef.current) {
+            return;
+        }
+        // spacebar 또는 엔터를 누르면 onClick 실행
+        if (e.key === " " || e.key === "Enter") {
+            e.preventDefault();
+            onClick();
+        }
+    };
+    useEventListener("keydown", handleKeyDown);
+    // text가 있으면 text, 없으면 image의 altText, 없으면 index를 aria-label로 사용
+    const ariaText = text || (image && image.altText) || index.toString() + "번 선택지";
     return (_jsx(SelectBoxComponent, { css: css `
         width: 100%;
-      `, type: selectBoxType, index: selectBoxType ? TYPE_TO_INDEX_ICON(selectBoxType) : index, image: image, text: text, onClick: onClick, 
+      `, 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, 
         // 선택되지 않았으나 정답일 때 정답 태그를 표시
         endIcon: isAnswer &&
             !isSelected && (_jsx(Tag, { label: "\uC815\uB2F5", icon: _jsx(CheckboxCircleFillIcon, {}), color: "green", css: css `

package/dist/patterns/LexicalEditor/nodes/SheetSelectNode/SelectComponent/SelectBox/SelectBoxComponent.d.ts

@@ -7,12 +7,12 @@ export declare const SelectBoxClasses: {
 };
 export type SelectBoxType = "primary" | "normal";
 /** 비지니스 로직과 무관한 SelectBox를 그리는 공통 컴포넌트입니다. */
-export declare function SelectBoxComponent(props: {
-    className?: string;
+export declare const SelectBoxComponent: import("react").ForwardRefExoticComponent<{
+    className?: string | undefined;
     type: SelectBoxType;
     index: React.ReactNode;
-    image?: ImageProps | null;
+    image?: ImageProps | null | undefined;
     text: React.ReactNode;
     /** 박스를 클릭할 때 실행될 콜백. 존재하지 않으면 cursor: pointer가 적용되지 않습니다. */
-    onClick?: () => void;
-}): import("@emotion/react/jsx-runtime").JSX.Element;
+    onClick?: (() => void) | undefined;
+} & Partial<import("react").HTMLAttributes<HTMLDivElement>> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/patterns/LexicalEditor/nodes/SheetSelectNode/SelectComponent/SelectBox/SelectBoxComponent.js

@@ -1,7 +1,19 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 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";
+import { forwardRef } from "react";
 export const SelectBoxClasses = {
     container: "SheetSelectNode-SelectBox-container",
     index: "SheetSelectNode-SelectBox-index",
@@ -32,17 +44,17 @@ const TYPE_TO_INDEX_STYLE = (theme, type) => ({
     `,
 })[type];
 /** 비지니스 로직과 무관한 SelectBox를 그리는 공통 컴포넌트입니다. */
-export function SelectBoxComponent(props) {
-    const { className, type, index, image, text, onClick } = props;
+export const SelectBoxComponent = forwardRef(function SelectBoxComponent(props, ref) {
+    const { className, type, index, image, text, onClick } = props, restProps = __rest(props, ["className", "type", "index", "image", "text", "onClick"]);
     const theme = useTheme();
-    return (_jsxs(Container, Object.assign({ className: `${className} ${SelectBoxClasses.container}`, css: TYPE_TO_CONTAINER_STYLE(theme, type), onClick: onClick }, { children: [_jsx(Index, Object.assign({ className: SelectBoxClasses.index, css: TYPE_TO_INDEX_STYLE(theme, type) }, { children: index })), _jsxs(Content, Object.assign({ className: SelectBoxClasses.content }, { children: [image && (_jsx("img", { src: image.src, alt: image.altText, css: css `
+    return (_jsxs(Container, Object.assign({ className: `${className} ${SelectBoxClasses.container}`, ref: ref }, restProps, { css: TYPE_TO_CONTAINER_STYLE(theme, type), onClick: onClick }, { children: [_jsx(Index, Object.assign({ className: SelectBoxClasses.index, "aria-hidden": "true", css: TYPE_TO_INDEX_STYLE(theme, type) }, { children: index })), _jsxs(Content, Object.assign({ className: SelectBoxClasses.content, "aria-hidden": "true" }, { children: [image && (_jsx("img", { "aria-hidden": "true", src: image.src, alt: image.altText, css: css `
               height: auto;
               // 이미지로 인해 좌우로 스크롤이 생기는 것을 방지
               max-width: 100%;
               width: fit-content;
               border-radius: 6px;
             ` })), text] }))] })));
-}
+});
 const Container = styled.div(({ onClick }) => css `
     ${onClick && "cursor: pointer;"}
     display: flex;

package/dist/patterns/LexicalEditor/nodes/SheetSelectNode/SelectComponent/SelectBox/SelectBoxView.js

@@ -3,6 +3,8 @@ import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { css } from "@emotion/react";
 import { SelectBoxComponent } from "./SelectBoxComponent";
 import { CheckFillIcon } from "../../../../../../icons";
+import { useRef } from "react";
+import { useEventListener } from "usehooks-ts";
 function getIndexIcon(type, index) {
     return {
         primary: (_jsx(CheckFillIcon, { css: css `
@@ -16,7 +18,26 @@ function getIndexIcon(type, index) {
 export function SelectBoxView(props) {
     const { index, isSelected, image, text, onClick } = props;
     const selectBoxType = isSelected ? "primary" : "normal";
+    const boxRef = useRef(null);
+    const handleKeyDown = (e) => {
+        // onClick이 없으면 아무것도 하지 않음.
+        if (!onClick) {
+            return;
+        }
+        // tab을 통해 focus된 상태가 아니면 아무것도 하지 않음.
+        if (document.activeElement !== boxRef.current) {
+            return;
+        }
+        // spacebar 또는 엔터를 누르면 onClick 실행
+        if (e.key === " " || e.key === "Enter") {
+            e.preventDefault();
+            onClick();
+        }
+    };
+    useEventListener("keydown", handleKeyDown);
+    // text가 있으면 text, 없으면 image의 altText, 없으면 index를 aria-label로 사용
+    const ariaText = text || (image && image.altText) || index.toString() + "번 선택지";
     return (_jsx(SelectBoxComponent, { css: css `
         width: 100%;
-      `, type: selectBoxType, index: getIndexIcon(selectBoxType, index), image: image, text: text, onClick: onClick }));
+      `, ref: boxRef, role: onClick ? "checkbox" : undefined, "aria-checked": isSelected, "aria-label": onClick ? ariaText + (isSelected ? " 선택됨" : " 선택하기") : ariaText, tabIndex: onClick ? 0 : -1, type: selectBoxType, index: getIndexIcon(selectBoxType, index), image: image, text: text, onClick: onClick }));
 }

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

@@ -1,3 +1,4 @@
 export * from "./ColoredQuoteNode";
 export * from "./ImageNode";
 export * from "./ProblemInputNode";
+export * from "./nodes";

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

@@ -1,3 +1,4 @@
 export * from "./ColoredQuoteNode";
 export * from "./ImageNode";
 export * from "./ProblemInputNode";
+export * from "./nodes";

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

@@ -0,0 +1,19 @@
+import { HorizontalRuleNode } from "@lexical/react/LexicalHorizontalRuleNode";
+import { ColoredQuoteNode } from "./ColoredQuoteNode";
+import { ImageNode } from "./ImageNode";
+import { LayoutContainerNode } from "./LayoutContainerNode";
+import { LayoutItemNode } from "./LayoutItemNode";
+import { ProblemInputNode } from "./ProblemInputNode";
+import { ProblemSelectNode } from "./ProblemSelectNode";
+import { SelfEvaluationNode } from "./SelfEvaluationNode";
+import { SheetInputNode } from "./SheetInputNode";
+import { SheetSelectNode } from "./SheetSelectNode";
+import { HeadingNode, QuoteNode } from "@lexical/rich-text";
+import { TableCellNode, TableNode, TableRowNode } from "@lexical/table";
+import { ListItemNode, ListNode } from "@lexical/list";
+import { CodeHighlightNode, CodeNode } from "@lexical/code";
+import { LinkNode } from "@lexical/link";
+export declare const nodes: (typeof ColoredQuoteNode | typeof QuoteNode | typeof ImageNode | typeof ProblemInputNode | typeof LayoutContainerNode | typeof LayoutItemNode | typeof ProblemSelectNode | typeof SelfEvaluationNode | typeof SheetInputNode | typeof SheetSelectNode | typeof HeadingNode | typeof ListNode | typeof ListItemNode | typeof CodeNode | typeof CodeHighlightNode | typeof TableNode | typeof TableCellNode | typeof TableRowNode | typeof LinkNode | typeof HorizontalRuleNode | {
+    replace: typeof QuoteNode;
+    with: () => ColoredQuoteNode;
+})[];

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

@@ -0,0 +1,44 @@
+import { HorizontalRuleNode } from "@lexical/react/LexicalHorizontalRuleNode";
+import { ColoredQuoteNode } from "./ColoredQuoteNode";
+import { ImageNode } from "./ImageNode";
+import { LayoutContainerNode } from "./LayoutContainerNode";
+import { LayoutItemNode } from "./LayoutItemNode";
+import { ProblemInputNode } from "./ProblemInputNode";
+import { ProblemSelectNode } from "./ProblemSelectNode";
+import { SelfEvaluationNode } from "./SelfEvaluationNode";
+import { SheetInputNode } from "./SheetInputNode";
+import { SheetSelectNode } from "./SheetSelectNode";
+import { HeadingNode, QuoteNode } from "@lexical/rich-text";
+import { TableCellNode, TableNode, TableRowNode } from "@lexical/table";
+import { ListItemNode, ListNode } from "@lexical/list";
+import { CodeHighlightNode, CodeNode } from "@lexical/code";
+import { AutoLinkNode, LinkNode } from "@lexical/link";
+export const nodes = [
+    ProblemInputNode,
+    ProblemSelectNode,
+    HeadingNode,
+    ListNode,
+    ListItemNode,
+    QuoteNode,
+    CodeNode,
+    CodeHighlightNode,
+    TableNode,
+    TableCellNode,
+    TableRowNode,
+    AutoLinkNode,
+    LinkNode,
+    ImageNode,
+    HorizontalRuleNode,
+    ColoredQuoteNode,
+    LayoutContainerNode,
+    LayoutItemNode,
+    SheetSelectNode,
+    SheetInputNode,
+    SelfEvaluationNode,
+    {
+        replace: QuoteNode,
+        with: () => {
+            return new ColoredQuoteNode("grey");
+        },
+    },
+];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@team-monolith/cds",
-  "version": "1.61.3",
+  "version": "1.63.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "sideEffects": false,
@@ -13,7 +13,6 @@
     "@types/node": "^16.11.26",
     "@types/react": "^18.2.28",
     "@types/react-dom": "^18.2.13",
-    "framer-motion": "^11.3.19",
     "hex-to-css-filter": "^5.4.0",
     "lexical": "^0.12.4",
     "lodash": "^4.17.21",
@@ -22,7 +21,8 @@
     "react-hook-form": "^7.48.2",
     "remixicon": "^3.4.0",
     "typescript": "^4.9.5",
-    "uid": "^2.0.2"
+    "uid": "^2.0.2",
+    "usehooks-ts": "^2.9.1"
   },
   "files": [
     "dist/**/*",

package/dist/components/Book/Book.d.ts

@@ -1,18 +0,0 @@
-import React from "react";
-export interface BookProps {
-    className?: string;
-    title?: string;
-    subtitle?: string;
-    subtitleBold?: string;
-    isHidden?: boolean;
-    buttons?: React.ReactNode;
-    /** 전달하면 controlled component로 애니메이션을 제어할 수 있다 */
-    open?: boolean;
-    onHoverStart?: () => void;
-    onHoverEnd?: () => void;
-    onCoverClick?: () => void;
-    icon?: React.ReactNode;
-    coverColor: string;
-}
-declare const _default: React.ForwardRefExoticComponent<BookProps & React.RefAttributes<HTMLDivElement>>;
-export default _default;

package/dist/components/Book/Book.js

@@ -1,252 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-/** @jsxImportSource @emotion/react */
-import { css, useTheme } from "@emotion/react";
-import styled from "@emotion/styled";
-import { forwardRef, useState } from "react";
-import shadows from "../../foundation/shadows";
-import { EyeOffFillIcon } from "../../icons";
-import { motion } from "framer-motion";
-// 이 ZINDEX는 Book 컴포넌트 내의 Stacking Context 에서 활용되므로
-// 다른 글로벌 ZINDEX와 충돌을 고려할 필요가 없습니다.
-const ZINDEX_BUTTONS = 5;
-const ZINDEX_HIDE = 4;
-const ZINDEX_TEXT = 3;
-const ZINDEX_COVER = 2;
-const ZINDEX_ICON = 1;
-const BOOK_HEIGHT = 235;
-const HOVER_Y_OFFSET = 12;
-const SHELF_HEIGHT = 16;
-const BOOK_SHELF_GAP = 10;
-const BUTTONS_HEIGHT = 36; // Button의 높이는 36px (small)로 가정합니다.
-const coverMotion = {
-    closed: {
-        y: 0,
-        boxShadow: shadows.shadow04,
-        transition: { duration: 0.3 },
-    },
-    open: {
-        y: -HOVER_Y_OFFSET,
-        boxShadow: shadows.shadow16,
-        transition: { duration: 0.3 },
-    },
-};
-const textMotion = {
-    closed: {
-        paddingBottom: 12,
-        transition: { duration: 0.3 },
-    },
-    open: {
-        paddingBottom: 12 + BUTTONS_HEIGHT + 4,
-        transition: { duration: 0.3 },
-    },
-};
-const buttonsMotion = {
-    closed: {
-        opacity: 0,
-        pointerEvents: "none",
-        transition: { duration: 0.3 },
-    },
-    open: {
-        opacity: 1,
-        pointerEvents: "auto",
-        transition: { duration: 0.3 },
-    },
-};
-const CARD_COLOR_PALETTE = (theme) => ({
-    border: theme.color.foreground.primaryDisabled,
-    text: theme.color.foreground.neutralAlt,
-});
-/**
- * Framer Motion의 whileHover를 사용하지 않고 직접 애니메이션 상태를 관리합니다.
- * 내부적으로는 간단한 애니메이션 상태 관리가 있으며, 필요한 경우
- * open 상태를 전달하여 외부에서 관리할 수 있습니다.
- *
- * 사유1)
- *   모바일에서는 hover가 없기 때문에 whileHover를 사용할 수 없습니다.
- *   클릭(탭)을 통해 열고 닫을 수 있어야 합니다.
- *
- * 사유2)
- *   관리/배부 드랍다운 Modal이 Card 위로 그려져 hoverEnd를 유발하기 때문에
- *   특성 상황에서는 hoverEnd가 발생했어도 Card를 열고 있어야 합니다.
- * @param props
- * @param ref
- * @returns
- */
-function Book(props, ref) {
-    const { className, title, subtitle, subtitleBold, coverColor, isHidden = false, buttons, open: controlledOpen, onHoverStart, onHoverEnd, onCoverClick, icon, } = props;
-    const theme = useTheme();
-    const [open, setOpen] = useState(false);
-    return (_jsxs(Container, Object.assign({ initial: "closed", animate: (controlledOpen !== undefined ? controlledOpen : open)
-            ? "open"
-            : "closed", ref: ref, onHoverStart: () => {
-            setOpen(true);
-            onHoverStart === null || onHoverStart === void 0 ? void 0 : onHoverStart();
-        }, onHoverEnd: () => {
-            setOpen(false);
-            onHoverEnd === null || onHoverEnd === void 0 ? void 0 : onHoverEnd();
-        } }, { children: [_jsxs(Cover, Object.assign({ className: className, backgroundColor: coverColor, variants: coverMotion, onClick: () => {
-                    setOpen(!open);
-                    onCoverClick === null || onCoverClick === void 0 ? void 0 : onCoverClick();
-                } }, { children: [icon && _jsx(CoverIcon, { children: icon }), isHidden && (_jsxs(_Fragment, { children: [_jsx(Hide, {}), _jsx(EyeOffFillIcon, { color: theme.color.foreground.neutralAlt, css: css `
-                position: absolute;
-                z-index: ${ZINDEX_HIDE};
-                left: 50%;
-                top: 50%;
-                transform: translate(-50%, -50%);
-                opacity: 0.8;
-
-                width: 24px;
-                height: 24px;
-              ` })] })), _jsxs(CoverTexts, Object.assign({ variants: buttons ? textMotion : undefined }, { children: [_jsx(Subtitle, { children: subtitle }), _jsx(Subtitle, Object.assign({ css: css `
-              font-weight: 800;
-            ` }, { children: subtitleBold })), _jsx(CoverTitle, { children: title })] })), _jsx(BookGradient, {}), _jsx(Buttons, Object.assign({ variants: buttonsMotion, onClick: (e) => {
-                            // Button 클릭 시에도 CoverClick 이벤트가 발생하지 않도록 막습니다.
-                            e.stopPropagation();
-                        } }, { children: buttons }))] })), _jsx(Shelf, {})] })));
-}
-export default forwardRef(Book);
-const Container = styled(motion.div) `
-  position: relative;
-
-  width: 200px;
-  height: ${BOOK_HEIGHT + HOVER_Y_OFFSET + SHELF_HEIGHT + BOOK_SHELF_GAP}px;
-
-  padding-top: ${HOVER_Y_OFFSET}px;
-`;
-const Cover = styled(motion.div)(({ backgroundColor }) => css `
-    height: ${BOOK_HEIGHT}px;
-
-    border-radius: 8px;
-    background: ${backgroundColor};
-    box-shadow: ${shadows.shadow04};
-
-    display: flex;
-    flex-direction: row;
-    gap: 12px;
-    overflow: hidden;
-
-    position: relative;
-    bottom: 0px;
-    z-index: ${ZINDEX_COVER};
-  `);
-const CoverTexts = styled(motion.div) `
-  width: 100%;
-  height: 100%;
-  padding: 12px 12px 12px 24px;
-
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: ${ZINDEX_TEXT};
-
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-`;
-const CoverTitle = styled.h1(({ theme }) => css `
-    word-wrap: break-word;
-    word-break: keep-all;
-
-    margin: auto 0 8px 0;
-    color: ${CARD_COLOR_PALETTE(theme).text};
-
-    /* Alt/Paragraph/16px-Eb */
-    font-family: ${theme.fontFamily.title};
-    font-size: 16px;
-    font-style: normal;
-    font-weight: 800;
-    line-height: 24px;
-
-    /* multiline 말줄임말 적용 css */
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: -webkit-box;
-    -webkit-line-clamp: 7;
-    -webkit-box-orient: vertical;
-  `);
-const BookGradient = styled.div `
-  width: 200px;
-  height: ${BOOK_HEIGHT}px;
-  background: linear-gradient(
-      180deg,
-      rgba(255, 255, 255, 0) 0%,
-      rgba(0, 0, 0, 0.75) 100%
-    ),
-    linear-gradient(
-      90deg,
-      #999 0%,
-      #fbfbfb 2%,
-      #fbfbfb 4%,
-      #cdcdcd 6%,
-      #fbfbfb 10%,
-      #fbfbfb 100%
-    );
-  mix-blend-mode: multiply;
-
-  position: absolute;
-  top: 0;
-  left: 0;
-  border-radius: 8px;
-  z-index: ${ZINDEX_COVER};
-`;
-const Buttons = styled(motion.div)(({ theme }) => css `
-    display: flex;
-    gap: 8px;
-    width: 100%;
-    padding: 0 12px 0 24px;
-
-    position: absolute;
-    bottom: 12px;
-    z-index: ${ZINDEX_BUTTONS};
-
-    svg {
-      color: ${CARD_COLOR_PALETTE(theme).text};
-    }
-  `);
-const Shelf = styled.div(({ theme }) => css `
-    height: ${SHELF_HEIGHT}px;
-    width: calc(100% + 32px);
-    border-radius: 4px;
-    background: ${theme.color.background.neutralAltActive};
-
-    position: absolute;
-    bottom: 0px;
-    left: -16px;
-  `);
-const Hide = styled.div(({ theme }) => css `
-    position: absolute;
-    left: 0;
-    top: 0;
-
-    width: 100%;
-    height: 100%;
-
-    background: ${theme.color.blanket.neutral};
-    border-radius: 8px;
-
-    z-index: ${ZINDEX_HIDE};
-  `);
-const Subtitle = styled.div(({ theme }) => css `
-    color: ${CARD_COLOR_PALETTE(theme).text};
-
-    /* Default/Label/12px-Md */
-    font-family: ${theme.fontFamily.ui};
-    font-size: 12px;
-    font-style: normal;
-    font-weight: 500;
-    line-height: 16px; /* 133.333% */
-  `);
-const CoverIcon = styled.div(({ theme }) => css `
-    position: absolute;
-    top: 50%;
-    left: 100px;
-    transform: translateY(-50%);
-
-    svg {
-      width: 120px;
-      height: 120px;
-      color: ${theme.color.blanket.neutral};
-    }
-
-    z-index: ${ZINDEX_ICON};
-  `);

package/dist/components/Book/index.d.ts

@@ -1 +0,0 @@
-export { default } from "./Book";

package/dist/components/Book/index.js

@@ -1 +0,0 @@
-export { default } from "./Book";