@team-monolith/cds 1.7.0 → 1.8.0

package/dist/patterns/Dropdown/Dropdown.d.ts

@@ -0,0 +1,36 @@
+/** @jsxImportSource @emotion/react */
+import React from "react";
+import { DropdownMenuProps } from "./DropdownMenu";
+import { SerializedStyles } from "@emotion/react";
+import { ButtonColor, ButtonSize } from "../../components/Button";
+export interface DropdownProps {
+    className?: string;
+    component?: React.ElementType;
+    /** 버튼 비활성화 여부 */
+    disabled?: boolean;
+    /** 버튼 컴포넌트 색상 */
+    color?: ButtonColor;
+    /** 버튼 컴포넌트 크기 */
+    size?: ButtonSize;
+    /** 버튼 컴포넌트 내 좌측에 표기될 아이콘 */
+    startIcon?: React.ReactNode;
+    /** 버튼 컴포넌트 내 우측에 표기될 아이콘 */
+    endIcon?: React.ReactNode;
+    /** button에 적용되는 css 스타일 */
+    buttonCss?: SerializedStyles;
+    /** 버튼 컴포넌트 내 표기될 문자열 */
+    label: string;
+    /** 버튼 클릭 시 호출될 콜백 함수 */
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+    /** 드롭다운 메뉴의 props */
+    menuProps?: Omit<DropdownMenuProps, "anchorEl" | "children" | "itemState" | "setItemState">;
+    /** 드롭다운 메뉴의 children */
+    children: React.ReactNode;
+    /** 드롭다운 메뉴 아이템 클릭 시 메뉴가 닫히는지 여부 */
+    closeOnItemClick?: boolean;
+}
+/**
+ * [피그마](https://www.figma.com/file/PnQp3tPxiCjgsPZfLUaUL1/Codle-PD-Kit---Patterns?type=design&node-id=203-95329&t=FwczLZ1IVvskUVbT-0)
+ */
+declare const Dropdown: React.ForwardRefExoticComponent<DropdownProps & React.RefAttributes<any>>;
+export default Dropdown;

package/dist/patterns/Dropdown/Dropdown.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
+import { forwardRef, useRef, useState } from "react";
+import DropdownMenu from "./DropdownMenu";
+import Button from "../../components/Button";
+import { ArrowDropDownFillIcon } from "../../icons";
+/**
+ * [피그마](https://www.figma.com/file/PnQp3tPxiCjgsPZfLUaUL1/Codle-PD-Kit---Patterns?type=design&node-id=203-95329&t=FwczLZ1IVvskUVbT-0)
+ */
+const Dropdown = forwardRef((props, ref) => {
+    const { className, component: Component = "div", disabled, color = "primary", size = "medium", startIcon, endIcon = _jsx(ArrowDropDownFillIcon, {}), buttonCss, label, onClick, menuProps = {}, children, closeOnItemClick, } = props;
+    const buttonProps = {
+        disabled,
+        color,
+        size,
+        startIcon,
+        endIcon,
+    };
+    const menuRef = useRef(null);
+    const [open, setOpen] = useState(false);
+    const [itemState, setItemState] = useState(new Map());
+    const handleClick = (e) => {
+        onClick === null || onClick === void 0 ? void 0 : onClick(e);
+        setOpen(true);
+    };
+    const handleClose = (e) => {
+        var _a;
+        setOpen(false);
+        setItemState((prevState) => {
+            const newState = new Map(prevState);
+            newState.forEach((value, key) => {
+                newState.set(key, {
+                    open: false,
+                    checked: value.checked,
+                });
+            });
+            return newState;
+        });
+        (_a = menuProps === null || menuProps === void 0 ? void 0 : menuProps.onClose) === null || _a === void 0 ? void 0 : _a.call(menuProps, e);
+    };
+    return (_jsxs(Component, Object.assign({ className: className, ref: ref }, { children: [_jsx(Button, Object.assign({ css: buttonCss, ref: menuRef }, buttonProps, { label: label, onClick: handleClick, fullWidth: true })), _jsx(DropdownMenu, Object.assign({}, menuProps, { open: open, onClose: handleClose, anchorEl: menuRef.current, closeOnItemClick: closeOnItemClick, itemState: itemState, setItemState: setItemState }, { children: children }))] })));
+});
+export default Dropdown;

package/dist/patterns/Dropdown/DropdownContext.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import { ItemState } from "./DropdownItem";
+declare const DropdownContext: React.Context<{
+    /** 최상위 드롭다운 메뉴의 open 여부 */
+    open: boolean;
+    onCloseOnItemClick?: ((e: React.MouseEvent<HTMLElement>) => void) | undefined;
+    nestedIndex: string;
+    itemState: ItemState;
+    setItemState: React.Dispatch<React.SetStateAction<ItemState>>;
+}>;
+export default DropdownContext;

package/dist/patterns/Dropdown/DropdownContext.js

@@ -0,0 +1,9 @@
+import React from "react";
+const DropdownContext = React.createContext({
+    open: false,
+    onCloseOnItemClick: undefined,
+    nestedIndex: "",
+    itemState: new Map(),
+    setItemState: () => { },
+});
+export default DropdownContext;

package/dist/patterns/Dropdown/DropdownItem/DropdownItem.d.ts

@@ -0,0 +1,50 @@
+/** @jsxImportSource @emotion/react */
+import { SerializedStyles } from "@emotion/react";
+import * as React from "react";
+import { DropdownMenuProps } from "../DropdownMenu";
+import { CheckboxInputProps } from "../../../components/CheckboxInput";
+export type DropdownItemType = "default" | "danger";
+export type ItemState = Map<string, {
+    open: boolean;
+    checked?: "checked" | "partial" | null;
+}>;
+export interface DropdownItemProps {
+    className?: string;
+    labelCss?: SerializedStyles;
+    component?: React.ElementType;
+    /** 드롭다운 아이템 index */
+    index: number;
+    /** 드롭다운 아이템의 타입 */
+    type?: DropdownItemType;
+    /** 체크박스 노출여부 */
+    checkbox?: boolean;
+    /** 체크박스 설정 props. 초기 체크여부 및 체크박스 값 변경시 호출되는 함수 등을 지정합니다. */
+    checkboxProps?: CheckboxInputProps;
+    /** 시작 아이콘 설정 */
+    startIcon?: React.ReactNode;
+    /** 드롭다운 아이템의 라벨 */
+    label?: React.ReactNode;
+    /** 끝 아이콘 설정. 주어지지 않고, 서브메뉴가 있으면 ArrowRightSLineIcon으로 보여집니다. */
+    endIcon?: React.ReactNode;
+    /** 아이콘 색상을 결정할때, type에 따른 색상을 사용하지 않고, 아이콘의 고유 색을 사용합니다. */
+    preserveIconColor?: boolean;
+    /** 비활성화 여부 */
+    disabled?: boolean;
+    /** 드롭다운 아이템의 활성화 여부. 서브 메뉴가 노출될 때 true가 됩니다. */
+    active?: boolean;
+    /** 드롭다운 아이템 마우스 호버 시 호출될 콜백 함수 */
+    onMouseEnter?: (e: React.MouseEvent<HTMLElement>) => void;
+    /** 드롭다운 아이템 마우스 아웃 시 호출될 콜백 함수 */
+    onMouseLeave?: (e: React.MouseEvent<HTMLElement>) => void;
+    /** 드롭다운 아이템 클릭 시 호출될 콜백 함수 */
+    onClick?: (e: React.MouseEvent<HTMLElement>) => void;
+    /** 아이템이 가지는 드롭다운 메뉴 props.*/
+    subMenuProps?: Omit<DropdownMenuProps, "anchorEl" | "itemState" | "setItemState" | "children">;
+    /** 아이템이 가지는 드롭다운 메뉴의 서브 아이템들. 주어지지 않으면 서브메뉴가 없습니다. */
+    children?: React.ReactNode;
+}
+/**
+ * [피그마](https://www.figma.com/file/PnQp3tPxiCjgsPZfLUaUL1/Codle-PD-Kit---Patterns?type=design&node-id=106-1900&t=FwczLZ1IVvskUVbT-0)
+ */
+declare const DropdownItem: React.ForwardRefExoticComponent<DropdownItemProps & React.RefAttributes<any>>;
+export default DropdownItem;

package/dist/patterns/Dropdown/DropdownItem/DropdownItem.js

@@ -0,0 +1,128 @@
+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, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
+import { css } from "@emotion/react";
+import * as React from "react";
+import styled from "@emotion/styled";
+import { useContext, useRef } from "react";
+import DropdownMenu from "../DropdownMenu";
+import DropdownContext from "../DropdownContext";
+import { getSelected, setSelected } from "./selected";
+import CheckboxInput from "../../../components/CheckboxInput";
+import { ArrowRightSLineIcon } from "../../../icons";
+import { HOVER } from "../../../utils/hover";
+const TYPE_TO_COLOR = (theme, type) => {
+    return {
+        default: theme.color.foreground.neutralBase,
+        danger: theme.color.foreground.danger,
+    }[type];
+};
+/**
+ * [피그마](https://www.figma.com/file/PnQp3tPxiCjgsPZfLUaUL1/Codle-PD-Kit---Patterns?type=design&node-id=106-1900&t=FwczLZ1IVvskUVbT-0)
+ */
+const DropdownItem = React.forwardRef((props, ref) => {
+    const { className, index, labelCss, component: Component = "div", type = "default", checkbox, checkboxProps = { checked: false }, startIcon, label, endIcon, preserveIconColor = false, disabled, active, onMouseEnter, onMouseLeave, onClick, subMenuProps, children } = props, other = __rest(props, ["className", "index", "labelCss", "component", "type", "checkbox", "checkboxProps", "startIcon", "label", "endIcon", "preserveIconColor", "disabled", "active", "onMouseEnter", "onMouseLeave", "onClick", "subMenuProps", "children"]);
+    const itemRef = useRef(null);
+    const { open, onCloseOnItemClick, nestedIndex, itemState, setItemState } = useContext(DropdownContext);
+    const absItemIndex = nestedIndex ? `${nestedIndex}-${index}` : `${index}`;
+    // 서브메뉴가 존재하는지 여부
+    const isSubMenuExist = Boolean(children);
+    // 서브메뉴 노출 여부
+    const isSubMenuShowed = isSubMenuExist && getSelected(itemState, absItemIndex);
+    // 드롭다운 아이템을 클릭하면, 같은 레벨에 있는 다른 아이템들은 모두 닫히도록 설정해야 합니다.
+    const handleClick = (e) => {
+        e.stopPropagation();
+        onClick === null || onClick === void 0 ? void 0 : onClick(e);
+        // 서브메뉴가 없는 드롭다운 아이템 클릭시 상위 메뉴가 닫히는 설정
+        if (onCloseOnItemClick && !isSubMenuExist) {
+            onCloseOnItemClick(e);
+        }
+        else {
+            setSelected(setItemState, absItemIndex);
+        }
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(Component, Object.assign({ className: className, ref: ref, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onClick: handleClick }, other, { children: _jsxs(Item, Object.assign({ ref: itemRef, disabled: disabled, selected: isSubMenuShowed || Boolean(active) }, { children: [_jsxs(LeftWrapper, { children: [checkbox && (_jsx(StyledCheckboxInput, Object.assign({}, checkboxProps, { disabled: disabled, onClick: (e) => {
+                                        e.stopPropagation();
+                                    } }))), startIcon && (_jsx(IconDiv, Object.assign({ type: type, preserveIconColor: preserveIconColor }, { children: startIcon }))), _jsx(LabelDiv, Object.assign({ css: labelCss, type: type }, { children: label }))] }), endIcon && (_jsx(IconDiv, Object.assign({ type: type, preserveIconColor: preserveIconColor }, { children: endIcon }))), !endIcon && isSubMenuExist && (_jsx(IconDiv, Object.assign({ type: type, preserveIconColor: preserveIconColor }, { children: _jsx(ArrowRightSLineIcon, {}) })))] })) })), isSubMenuExist && (_jsx(DropdownContext.Provider, Object.assign({ value: {
+                    open,
+                    onCloseOnItemClick,
+                    nestedIndex: absItemIndex,
+                    itemState,
+                    setItemState,
+                } }, { children: _jsx(DropdownMenu, Object.assign({}, subMenuProps, { open: isSubMenuShowed, anchorEl: itemRef.current, isNestedMenu: true, anchorOrigin: {
+                        vertical: "top",
+                        horizontal: "right",
+                    }, itemState: itemState, setItemState: setItemState }, { children: children })) })))] }));
+});
+const StyledCheckboxInput = styled(CheckboxInput) `
+  margin: 4px;
+`;
+const IconDiv = styled.div(({ theme, type, preserveIconColor }) => css `
+    width: 14px;
+    height: 14px;
+    svg {
+      width: 14px;
+      height: 14px;
+
+      ${!preserveIconColor &&
+    css `
+        path {
+          fill: ${TYPE_TO_COLOR(theme, type)};
+        }
+      `}
+    }
+  `);
+const LabelDiv = styled.div `
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 14px;
+  font-weight: 400;
+  font-family: ${({ theme }) => theme.fontFamily.ui};
+  color: ${({ theme, type }) => TYPE_TO_COLOR(theme, type)};
+`;
+const LeftWrapper = styled.div `
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+  white-space: nowrap;
+  gap: 4px;
+`;
+const Item = styled.div(({ theme, selected, disabled }) => css `
+    background-color: ${theme.color.background.neutralBase};
+    box-sizing: content-box;
+    height: 24px;
+    border-radius: 6px;
+    padding: 4px 8px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    line-height: 20px;
+    cursor: pointer;
+
+    ${HOVER(css `
+      background-color: ${theme.color.background.neutralAlt};
+    `)}
+    ${selected &&
+    css `
+      background-color: ${theme.color.background.neutralAlt};
+    `}
+    ${disabled &&
+    css `
+      cursor: auto;
+      // mui MenuItem-disabled의 opacity: 0.38을 참고하여 적용합니다.
+      opacity: 0.38;
+      background-color: ${theme.color.background.neutralBase};
+    `}
+  `);
+export default DropdownItem;

package/dist/patterns/Dropdown/DropdownItem/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./DropdownItem";
+export * from "./DropdownItem";

package/dist/patterns/Dropdown/DropdownItem/index.js

@@ -0,0 +1,2 @@
+export { default } from "./DropdownItem";
+export * from "./DropdownItem";

package/dist/patterns/Dropdown/DropdownItem/selected.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { ItemState } from "./DropdownItem";
+/** index에 해당하는 아이템의 open state를 리턴합니다. */
+export declare function getSelected(state: ItemState, index: string): boolean;
+/** index에 해당하는 아이템의 open state를 true로 업데이트합니다.
+ * 동시에, 같은 레벨의 다른 형제 아이템과 그 자식들의 open state를 false로 업데이트합니다.
+*/
+export declare function setSelected(setState: React.Dispatch<React.SetStateAction<ItemState>>, index: string): void;

package/dist/patterns/Dropdown/DropdownItem/selected.js

@@ -0,0 +1,33 @@
+// 각 함수의 index인자는 모두 절대index입니다. (nestedIndex) ex) "3", "0-3-2", ...
+/** index에 해당하는 아이템의 open state를 리턴합니다. */
+export function getSelected(state, index) {
+    var _a, _b;
+    return (_b = (_a = state.get(index)) === null || _a === void 0 ? void 0 : _a.open) !== null && _b !== void 0 ? _b : false;
+}
+/** index에 해당하는 아이템의 open state를 true로 업데이트합니다.
+ * 동시에, 같은 레벨의 다른 형제 아이템과 그 자식들의 open state를 false로 업데이트합니다.
+*/
+export function setSelected(setState, index) {
+    setState((prevState) => {
+        var _a;
+        const newState = new Map(prevState);
+        // 같은 레벨의 형제 아이템과 그 자식들을 닫기 위해 상위 index로 시작하는 모든 아이템을 닫아야 합니다.
+        // 상위 index : ex) index: "0-4-3" -> prevIndex: "0-4-"
+        const joinIndex = index.split("-").slice(0, -1).join("-");
+        const prevIndex = joinIndex ? joinIndex + "-" : "";
+        newState.forEach((value, key) => {
+            if (key.startsWith(prevIndex)) {
+                newState.set(key, {
+                    open: false,
+                    checked: value.checked,
+                });
+            }
+        });
+        // index에 해당하는 item을 엽니다.
+        newState.set(index, {
+            open: true,
+            checked: (_a = newState.get(index)) === null || _a === void 0 ? void 0 : _a.checked,
+        });
+        return newState;
+    });
+}

package/dist/patterns/Dropdown/DropdownMenu/DropdownMenu.d.ts

@@ -0,0 +1,37 @@
+import { SerializedStyles } from "@emotion/react";
+import React from "react";
+import { ModalProps } from "@mui/material";
+import { OriginProps } from "./style";
+import { ItemState } from "../DropdownItem";
+export declare const DROPDOWN_MENU_WIDTH = 124;
+export declare const DROPDOWN_MENU_MAX_HEIGHT = 160;
+export interface DropdownMenuProps extends Omit<ModalProps, "open" | "onClose" | "children"> {
+    /** 드롭다운 메뉴의 커스텀 스타일 */
+    menuCss?: SerializedStyles;
+    /** 드롭다운 메뉴가 열리는지 여부 */
+    open?: boolean;
+    /** 드롭다운 메뉴의 위치참조 */
+    anchorEl: HTMLElement | null;
+    /** 드롭다운 메뉴가 닫힐 때 실행될 콜백함수 */
+    onClose?: (e: React.MouseEvent<HTMLElement>) => void;
+    /** 현재 드롭다운 메뉴가 중첩 드롭다운인지 여부. 최상위일 경우 false입니다.
+     * 최상위 메뉴만 백드롭이 생성됩니다.
+     */
+    isNestedMenu?: boolean;
+    /** 드롭다운 메뉴 원점이 anchor의 어디에 위치하는지 조정 */
+    anchorOrigin?: OriginProps;
+    /** 드롭다운 메뉴 원점이 메뉴 자신의 어디에 위치하는지 조정 */
+    transformOrigin?: OriginProps;
+    /** 드롭다운 메뉴 아이템 클릭 시 메뉴가 닫히는지 여부 */
+    closeOnItemClick?: boolean;
+    /** 드롭다운 메뉴의 드롭다운 아이템들 */
+    children: React.ReactNode;
+    /** 중첩 드롭다운 메뉴가 아닐 경우 주어주지 않아도 됩니다. */
+    itemState?: ItemState;
+    setItemState?: React.Dispatch<React.SetStateAction<ItemState>>;
+}
+/**
+ * [피그마](https://www.figma.com/file/PnQp3tPxiCjgsPZfLUaUL1/Codle-PD-Kit---Patterns?type=design&node-id=106-1921&t=FwczLZ1IVvskUVbT-0)
+ */
+declare const DropdownMenu: React.ForwardRefExoticComponent<Omit<DropdownMenuProps, "ref"> & React.RefAttributes<any>>;
+export default DropdownMenu;

package/dist/patterns/Dropdown/DropdownMenu/DropdownMenu.js

@@ -0,0 +1,92 @@
+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 } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
+import styled from "@emotion/styled";
+import { css } from "@emotion/react";
+import React, { useContext } from "react";
+import { Modal as MuiModal, Grow as MuiGrow, Portal, } from "@mui/material";
+import { ORIGIN_PROPS_TO_POSITION, ORIGIN_PROPS_TO_TRANSFORM, } from "./style";
+import DropdownContext from "../DropdownContext";
+import shadows from "../../../foundation/shadows";
+export const DROPDOWN_MENU_WIDTH = 124;
+export const DROPDOWN_MENU_MAX_HEIGHT = 160;
+/**
+ * [피그마](https://www.figma.com/file/PnQp3tPxiCjgsPZfLUaUL1/Codle-PD-Kit---Patterns?type=design&node-id=106-1921&t=FwczLZ1IVvskUVbT-0)
+ */
+const DropdownMenu = React.forwardRef((props, ref) => {
+    const { className, open = false, anchorEl, onClose = () => { }, isNestedMenu = false, anchorOrigin = {
+        vertical: "bottom",
+        horizontal: "left",
+    }, transformOrigin = {
+        vertical: "top",
+        horizontal: "left",
+    }, closeOnItemClick, children, menuCss, itemState = new Map(), setItemState = () => { } } = props, other = __rest(props, ["className", "open", "anchorEl", "onClose", "isNestedMenu", "anchorOrigin", "transformOrigin", "closeOnItemClick", "children", "menuCss", "itemState", "setItemState"]);
+    const { nestedIndex } = useContext(DropdownContext);
+    // 드롭다운 메뉴 위치 조정
+    const anchorRect = anchorEl === null || anchorEl === void 0 ? void 0 : anchorEl.getBoundingClientRect();
+    const menuStyle = [
+        ORIGIN_PROPS_TO_POSITION(anchorOrigin, anchorRect, isNestedMenu),
+        ORIGIN_PROPS_TO_TRANSFORM(transformOrigin),
+    ];
+    // 최상위 드롭다운 메뉴
+    if (!isNestedMenu) {
+        return (_jsx(DropdownContext.Provider, Object.assign({ value: {
+                open,
+                onCloseOnItemClick: closeOnItemClick ? onClose : undefined,
+                nestedIndex,
+                itemState,
+                setItemState,
+            } }, { children: _jsx(MuiModal, Object.assign({ className: className, open: open, onClose: onClose, slotProps: {
+                    backdrop: {
+                        style: {
+                            backgroundColor: "transparent",
+                        },
+                    },
+                } }, other, { children: _jsx(Grow, Object.assign({ in: open }, { children: _jsx(Menu, Object.assign({ ref: ref, css: [menuCss, menuStyle] }, { children: children })) })) })) })));
+    }
+    // 중첩 드롭다운 메뉴
+    // Portal을 사용하여 DOM이 중첩되지 않고 최상단에 렌더링 됩니다.
+    // 드롭다운 메뉴에서 메뉴가 열리고 닫힐 때 애니메이션을 위해 Grow를 사용하고 있습니다.
+    // Grow에서는 transform속성이 있는데, 자식에 배치되는 Menu에서는 position: fixed 속성이 있습니다.
+    // position: fixed는 뷰포트를 기준으로 요소를 배치하는데, 부모가 transform속성을 지니면 fixed동작이 제대로 이루어지지 않습니다.
+    // 아이템이 열리고 닫힐 때 transform속성이 생기고, 그 아이템의 자식인 서브메뉴는 position: fixed이므로 문제가 발생합니다.
+    // https://stackoverflow.com/questions/2637058/position-fixed-doesnt-work-when-using-webkit-transform
+    // 그래서 중첩구조를 파괴하기 위해 Portal을 사용하여 중첩 드롭다운 메뉴를 최상단에 렌더링합니다.
+    return (_jsx(Portal, { children: _jsx(DropdownContext.Provider, Object.assign({ value: {
+                open,
+                onCloseOnItemClick: closeOnItemClick ? onClose : undefined,
+                nestedIndex,
+                itemState,
+                setItemState,
+            } }, { children: _jsx(Grow, Object.assign({ in: open }, { children: _jsx(Menu, Object.assign({ className: className, ref: ref, css: [menuCss, menuStyle] }, { children: children })) })) })) }));
+});
+const Grow = styled(MuiGrow)(css `
+  transform-origin: top left;
+`);
+const Menu = styled.div(({ theme }) => css `
+    position: fixed;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    padding: 4px;
+    background-color: ${theme.color.background.neutralBase};
+    box-shadow: ${shadows.shadow04};
+    border-radius: 8px;
+    width: ${DROPDOWN_MENU_WIDTH}px;
+    max-height: ${DROPDOWN_MENU_MAX_HEIGHT}px;
+    overflow-y: auto;
+    overflow-x: hidden;
+    // 최상위 메뉴의 mui modal 백드롭의 z-index는 1300입니다.
+    z-index: 1300;
+  `);
+export default DropdownMenu;

package/dist/patterns/Dropdown/DropdownMenu/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./DropdownMenu";
+export * from "./DropdownMenu";

package/dist/patterns/Dropdown/DropdownMenu/index.js

@@ -0,0 +1,2 @@
+export { default } from "./DropdownMenu";
+export * from "./DropdownMenu";

package/dist/patterns/Dropdown/DropdownMenu/style.d.ts

@@ -0,0 +1,8 @@
+export interface OriginProps {
+    vertical: "top" | "center" | "bottom";
+    horizontal: "left" | "center" | "right";
+}
+/** anchor를 기준으로 드롭다운 메뉴 원점 위치 스타일을 리턴합니다. */
+export declare const ORIGIN_PROPS_TO_POSITION: (anchorOrigin: OriginProps, anchorRect: DOMRect | undefined, nested?: boolean) => import("@emotion/utils").SerializedStyles;
+/** 드롭다운 메뉴 원점을 조정하는 스타일을 리턴합니다. */
+export declare const ORIGIN_PROPS_TO_TRANSFORM: (transformOrigin: OriginProps) => import("@emotion/utils").SerializedStyles;

package/dist/patterns/Dropdown/DropdownMenu/style.js

@@ -0,0 +1,103 @@
+import { css } from "@emotion/react";
+import { DROPDOWN_MENU_WIDTH } from "./DropdownMenu";
+/** anchor를 기준으로 드롭다운 메뉴 원점 위치 스타일을 리턴합니다. */
+export const ORIGIN_PROPS_TO_POSITION = (anchorOrigin, anchorRect, nested) => {
+    const { vertical, horizontal } = anchorOrigin;
+    if (!anchorRect)
+        return css `
+      display: none;
+    `;
+    const { top, bottom, left, right, width, height } = anchorRect;
+    return {
+        top: {
+            left: css `
+        top: ${top}px;
+        left: ${left}px;
+        margin-right: 12px;
+      `,
+            center: css `
+        top: ${top}px;
+        left: ${left + width / 2}px;
+        margin-bottom: 8px;
+      `,
+            right: css `
+        top: ${top}px;
+        left: ${left + (nested ? DROPDOWN_MENU_WIDTH : width)}px;
+        margin-left: 12px;
+      `,
+        },
+        center: {
+            left: css `
+        top: ${top + height / 2}px;
+        left: ${left}px;
+        margin-right: 12px;
+      `,
+            center: css `
+        top: ${top + height / 2}px;
+        left: ${left + width / 2}px;
+        margin-bottom: 8px;
+      `,
+            right: css `
+        top: ${top + height / 2}px;
+        left: ${right}px;
+        margin-left: 12px;
+      `,
+        },
+        bottom: {
+            left: css `
+        top: ${bottom}px;
+        left: ${left}px;
+        margin-top: 8px;
+      `,
+            center: css `
+        top: ${bottom}px;
+        left: ${left + width / 2}px;
+        margin-top: 8px;
+      `,
+            right: css `
+        top: ${bottom}px;
+        left: ${right}px;
+        margin-top: 8px;
+      `,
+        },
+    }[vertical][horizontal];
+};
+/** 드롭다운 메뉴 원점을 조정하는 스타일을 리턴합니다. */
+export const ORIGIN_PROPS_TO_TRANSFORM = (transformOrigin) => {
+    const { vertical, horizontal } = transformOrigin;
+    return {
+        top: {
+            left: css `
+        transform: none;
+      `,
+            center: css `
+        transform: translateX(-50%) !important;
+      `,
+            right: css `
+        transform: translateX(-100%) !important;
+      `,
+        },
+        center: {
+            left: css `
+        transform: translateY(-50%) !important;
+      `,
+            center: css `
+        transform: translateX(-50%) translateY(-50%) !important;
+      `,
+            right: css `
+        transform: translateX(-100%) translateY(-50%) !important;
+      `,
+        },
+        bottom: {
+            left: css `
+        transform: translateY(-100%) !important;
+      `,
+            center: css `
+        transform: translateX(-50%) translateY(-100%) !important;
+      `,
+            right: css `
+        transform: translateX(-100%) translateY(-100%) !important;
+      `,
+        },
+    }[vertical][horizontal];
+};

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

@@ -0,0 +1,2 @@
+export * from "./Dropdown";
+export { default } from "./Dropdown";

package/dist/patterns/Dropdown/index.js

@@ -0,0 +1,2 @@
+export * from "./Dropdown";
+export { default } from "./Dropdown";

package/dist/patterns/LexicalEditor/LexicalEditor.js

@@ -10,7 +10,7 @@ import { HorizontalRuleNode } from "@lexical/react/LexicalHorizontalRuleNode";
 import { getTheme } from "./theme";
 import { useTheme } from "@emotion/react";
 import Plugins from "./Plugins";
-import { ColoredQuoteNode } from "./nodes/ColoredQuoteNode";
+import { ColoredQuoteNode, ProblemInputNode } from "./nodes";
 function validateValue(value) {
     var _a, _b;
     if (value && typeof value !== "object") {
@@ -34,6 +34,7 @@ export function LexicalEditor(props) {
         namespace: "CodleLexicalEditor",
         onError: (error) => console.error(error),
         nodes: [
+            ProblemInputNode,
             HeadingNode,
             ListNode,
             ListItemNode,

package/dist/patterns/LexicalEditor/Plugins.js

@@ -27,6 +27,7 @@ import FloatingLinkEditorPlugin from "./plugins/FloatingLinkEditorPlugin";
 import useLexicalEditable from "@lexical/react/useLexicalEditable";
 import ListMaxIndentLevelPlugin from "./plugins/ListMaxIndentLevelPlugin";
 import styled from "@emotion/styled";
+import ProblemInputPlugin from "./plugins/ProblemInputPlugin";
 export default function Plugins(props) {
     const { className, onChange } = props;
     const isEditable = useLexicalEditable();
@@ -41,7 +42,7 @@ export default function Plugins(props) {
                     onChange === null || onChange === void 0 ? void 0 : onChange(editorState.toJSON());
                 }, 
                 // ignore 하지 않으면 Form에서 수정하지 않았는데 Dirty로 처리됨.
-                ignoreSelectionChange: true }), _jsx(AutoFocusPlugin, {}), isEditable && (_jsxs(_Fragment, { children: [_jsx(TabIndentationPlugin, {}), _jsx(ComponentPickerMenuPlugin, {}), _jsx(MarkdownShortcutPlugin, { transformers: CODLE_TRANSFORMERS }), _jsx(HistoryPlugin, {})] })), floatingAnchorElem && isEditable && (_jsxs(_Fragment, { children: [_jsx(ComponentAdderPlugin, { anchorElem: floatingAnchorElem }), _jsx(FloatingTextFormatToolbarPlugin, { anchorElem: floatingAnchorElem }), _jsx(FloatingLinkEditorPlugin, { anchorElem: floatingAnchorElem, isLinkEditMode: isLinkEditMode, setIsLinkEditMode: setIsLinkEditMode })] })), !isEditable && _jsx(LexicalClickableLinkPlugin, {}), _jsx(ListPlugin, {}), _jsx(HorizontalRulePlugin, {}), _jsx(ImagesPlugin, {}), _jsx(TablePlugin, {}), _jsx(LinkPlugin, {}), _jsx(ListMaxIndentLevelPlugin, { maxDepth: 5 })] }));
+                ignoreSelectionChange: true }), _jsx(AutoFocusPlugin, {}), isEditable && (_jsxs(_Fragment, { children: [_jsx(TabIndentationPlugin, {}), _jsx(ComponentPickerMenuPlugin, {}), _jsx(MarkdownShortcutPlugin, { transformers: CODLE_TRANSFORMERS }), _jsx(HistoryPlugin, {})] })), floatingAnchorElem && isEditable && (_jsxs(_Fragment, { children: [_jsx(ComponentAdderPlugin, { anchorElem: floatingAnchorElem }), _jsx(FloatingTextFormatToolbarPlugin, { anchorElem: floatingAnchorElem }), _jsx(FloatingLinkEditorPlugin, { anchorElem: floatingAnchorElem, isLinkEditMode: isLinkEditMode, setIsLinkEditMode: setIsLinkEditMode })] })), !isEditable && _jsx(LexicalClickableLinkPlugin, {}), _jsx(ListPlugin, {}), _jsx(HorizontalRulePlugin, {}), _jsx(ImagesPlugin, {}), _jsx(TablePlugin, {}), _jsx(LinkPlugin, {}), _jsx(ListMaxIndentLevelPlugin, { maxDepth: 5 }), _jsx(ProblemInputPlugin, {})] }));
 }
 const ScrollArea = styled.div `
   min-height: 150px;

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

@@ -0,0 +1,9 @@
+import { Control } from "react-hook-form";
+import { ProblemInputPayload } from "../InputComponent";
+export interface FormAnswerProps {
+    index: number;
+    control: Control<ProblemInputPayload, any>;
+    onDelete?: () => void;
+    disabled?: boolean;
+}
+export declare function FormAnswer(props: FormAnswerProps): import("@emotion/react/jsx-runtime").JSX.Element;