@seed-design/figma 0.1.6 → 0.1.8

package/src/codegen/targets/react/component/handlers/avatar.ts

@@ -2,26 +2,27 @@ import type {
   AvatarProperties,
   IdentityPlaceholderProperties,
 } from "@/codegen/component-properties";
-import { defineComponentHandler } from "@/codegen/core";
+import { createElement, defineComponentHandler } from "@/codegen/core";
 import * as metadata from "@/entities/data/__generated__/component-sets";
 import { findAllInstances } from "@/utils/figma-node";
 import { createLocalSnippetHelper } from "../../element-factories";
 import type { ComponentHandlerDeps } from "../deps.interface";
 import { createIdentityPlaceholderHandler } from "./identity-placeholder";
+import { camelCase } from "change-case";
 
 const { createLocalSnippetElement } = createLocalSnippetHelper("avatar");
 
 export const createAvatarHandler = (ctx: ComponentHandlerDeps) => {
   const identityPlaceholderHandler = createIdentityPlaceholderHandler(ctx);
 
-  return defineComponentHandler<AvatarProperties>(metadata.avatar.key, (node) => {
+  return defineComponentHandler<AvatarProperties>(metadata.avatar.key, (node, traverse) => {
     const [placeholder] = findAllInstances<IdentityPlaceholderProperties>({
       node,
       key: identityPlaceholderHandler.key,
     });
     const { componentProperties: props } = node;
 
-    const avatarHasSrc = props["Show Image#71850:57"].value;
+    const avatarHasSrc = props["Has Image Contents#33407:0"].value;
 
     const commonProps = {
       ...(avatarHasSrc && {
@@ -29,7 +30,10 @@ export const createAvatarHandler = (ctx: ComponentHandlerDeps) => {
         src: `https://placehold.co/${props.Size.value}x${props.Size.value}`,
       }),
       ...(placeholder && {
-        fallback: identityPlaceholderHandler.transform(placeholder),
+        fallback: identityPlaceholderHandler.transform(placeholder, traverse),
+      }),
+      ...(props["Badge"].value !== "None" && {
+        badgeMask: camelCase(props["Badge"].value),
       }),
       size: props.Size.value,
     };
@@ -37,10 +41,15 @@ export const createAvatarHandler = (ctx: ComponentHandlerDeps) => {
     return createLocalSnippetElement(
       "Avatar",
       commonProps,
-      props["Show Badge#1398:26"].value ? createLocalSnippetElement("AvatarBadge", {}) : undefined,
-      {
-        comment: avatarHasSrc ? "alt 텍스트를 제공해야 합니다." : undefined,
-      },
+      props["Badge"].value === "None"
+        ? undefined
+        : createLocalSnippetElement(
+            "AvatarBadge",
+            { asChild: true },
+            createElement("img", { src: "https://placehold.co/20x20" }),
+            { comment: "뱃지를 설명하는 alt 텍스트를 제공해야 합니다." },
+          ),
+      { comment: avatarHasSrc ? "alt 텍스트를 제공해야 합니다." : undefined },
     );
   });
 };

package/src/codegen/targets/react/component/handlers/badge.ts

@@ -12,7 +12,6 @@ export const createBadgeHandler = (_ctx: ComponentHandlerDeps) =>
       size: handleSizeProp(props.Size.value),
       tone: camelCase(props.Tone.value),
       variant: camelCase(props.Variant.value),
-      shape: camelCase(props.Shape.value),
     };
 
     return createSeedReactElement("Badge", commonProps, props["Label#1584:0"].value);

package/src/codegen/targets/react/component/handlers/bottom-sheet.ts

@@ -0,0 +1,71 @@
+import type { BottomSheetProperties } from "@/codegen/component-properties";
+import { createElement, defineComponentHandler } from "@/codegen/core";
+import * as metadata from "@/entities/data/__generated__/component-sets";
+import { match } from "ts-pattern";
+import { createLocalSnippetHelper } from "../../element-factories";
+import type { ComponentHandlerDeps } from "../deps.interface";
+import { findAllInstances } from "@/utils/figma-node";
+
+const { createLocalSnippetElement } = createLocalSnippetHelper("bottom-sheet");
+const { createLocalSnippetElement: createLocalSnippetElementTrigger } =
+  createLocalSnippetHelper("action-button");
+
+// TODO: Bottom Action Bar (WIP) handler의 키. 해당 컴포넌트(템플릿) 핸들러 작성 시 handler.transform()으로 대체
+const BOTTOM_SHEET_FOOTER_KEY = "de6c65d34cc4a01c18c9a7c0ded34635170ca11f";
+const BOTTOM_SHEET_BODY_KEY = "aa9ffdd60fbfdea42f0d11162cd64f4b4389ddcc";
+
+export const createBottomSheetHandler = (_ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<BottomSheetProperties>(metadata.bottomSheet.key, (node, traverse) => {
+    const props = node.componentProperties;
+    const headerAlign = match(props["Header Layout"].value)
+      .with("Bottom Left", "Top Left", () => "left")
+      .with("Bottom Center", "Top Center", () => "center")
+      .with("None", () => undefined)
+      .exhaustive();
+
+    const contentProps = {
+      title: props["Title#19787:3"].value,
+      ...(props["Show Description#25192:0"].value === true && {
+        description: props["Description#19787:7"].value,
+      }),
+      ...(props["Show Close Button#19787:11"].value === false && {
+        showCloseButton: false,
+      }),
+    };
+
+    const bodyNodes = findAllInstances({
+      node,
+      key: BOTTOM_SHEET_BODY_KEY,
+    });
+
+    const bottomSheetBody =
+      bodyNodes.length === 1
+        ? createLocalSnippetElement("BottomSheetBody", {}, bodyNodes[0].children.map(traverse))
+        : createLocalSnippetElement(
+            "BottomSheetBody",
+            {},
+            createElement("div", undefined, "No content available"),
+          );
+
+    const footerNodes = findAllInstances({
+      node,
+      key: BOTTOM_SHEET_FOOTER_KEY,
+    });
+
+    const bottomSheetFooter =
+      props["Show Footer#25162:14"] && footerNodes.length === 1
+        ? createLocalSnippetElement("BottomSheetFooter", {}, footerNodes[0].children.map(traverse))
+        : undefined;
+
+    return createLocalSnippetElement("BottomSheetRoot", { defaultOpen: true, headerAlign }, [
+      createLocalSnippetElement(
+        "BottomSheetTrigger",
+        { asChild: true },
+        createLocalSnippetElementTrigger("ActionButton", {}, "BottomSheet 열기"),
+      ),
+      createLocalSnippetElement("BottomSheetContent", contentProps, [
+        bottomSheetBody,
+        bottomSheetFooter,
+      ]),
+    ]);
+  });

package/src/codegen/targets/react/component/handlers/callout.ts

@@ -5,6 +5,7 @@ import type { NormalizedTextNode } from "@/normalizer";
 import { camelCase } from "change-case";
 import { createLocalSnippetHelper } from "../../element-factories";
 import type { ComponentHandlerDeps } from "../deps.interface";
+import { match } from "ts-pattern";
 
 const { createLocalSnippetElement } = createLocalSnippetHelper("callout");
 
@@ -12,18 +13,11 @@ export const createCalloutHandler = (ctx: ComponentHandlerDeps) =>
   defineComponentHandler<CalloutProperties>(
     metadata.callout.key,
     ({ componentProperties: props, children }) => {
-      const tag = (() => {
-        switch (props.Interaction.value) {
-          case "Default":
-            return "Callout";
-          case "Actionable":
-            return "ActionableCallout";
-          case "Dismissible":
-            return "DismissibleCallout";
-          default:
-            return "Callout";
-        }
-      })();
+      const tag = match(props.Interaction.value)
+        .with("Display", () => "Callout")
+        .with("Actionable", () => "ActionableCallout")
+        .with("Dismissible", () => "DismissibleCallout")
+        .exhaustive();
 
       const textNode = children.find((child) => child.type === "TEXT") as NormalizedTextNode | null;
 
@@ -79,11 +73,13 @@ export const createCalloutHandler = (ctx: ComponentHandlerDeps) =>
         tone: camelCase(props.Tone.value),
         title,
         description,
-        linkProps: {
-          children: linkLabel,
-        },
-        ...(props["Icon#12598:210"].value && {
-          prefixIcon: ctx.iconHandler.transform(props["Icon#12598:210"]),
+        ...(linkLabel && {
+          linkProps: {
+            children: linkLabel,
+          },
+        }),
+        ...(props["Show Prefix Icon#35087:1"].value && {
+          prefixIcon: ctx.iconHandler.transform(props["Prefix Icon#35087:0"]),
         }),
       };
 

package/src/codegen/targets/react/component/handlers/chip.ts

@@ -0,0 +1,66 @@
+import type { AvatarProperties, ChipProperties } from "@/codegen/component-properties";
+import { defineComponentHandler } from "@/codegen/core";
+import * as metadata from "@/entities/data/__generated__/component-sets";
+import { match } from "ts-pattern";
+import { createLocalSnippetHelper } from "../../element-factories";
+import type { ComponentHandlerDeps } from "../deps.interface";
+import { handleSizeProp } from "../size";
+import { camelCase } from "change-case";
+import { findAllInstances } from "@/utils/figma-node";
+import { createAvatarHandler } from "@/codegen/targets/react/component/handlers/avatar";
+
+const { createLocalSnippetElement } = createLocalSnippetHelper("chip");
+
+export const createChipHandler = (ctx: ComponentHandlerDeps) => {
+  const avatarHandler = createAvatarHandler(ctx);
+
+  return defineComponentHandler<ChipProperties>(metadata.chip.key, (node, traverse) => {
+    const props = node.componentProperties;
+    const states = props.State.value.split("-");
+
+    const prefix = match(props["Prefix Type"].value)
+      .with("None", "Image", () => undefined)
+      .with("Icon", () =>
+        createLocalSnippetElement(
+          "Chip.PrefixIcon",
+          undefined,
+          ctx.iconHandler.transform(props["Prefix Icon#8722:0"]),
+        ),
+      )
+      .with("Avatar", () => {
+        const [avatar] = findAllInstances<AvatarProperties>({ node, key: metadata.avatar.key });
+        if (!avatar) return undefined;
+
+        return createLocalSnippetElement(
+          "Chip.PrefixAvatar",
+          undefined,
+          avatarHandler.transform(avatar, traverse),
+        );
+      })
+      .exhaustive();
+
+    const suffix = props["Has Suffix#32538:181"].value
+      ? createLocalSnippetElement(
+          "Chip.SuffixIcon",
+          undefined,
+          ctx.iconHandler.transform(props["Suffix Type#32538:0"]),
+        )
+      : undefined;
+
+    const commonProps = {
+      variant: camelCase(props.Variant.value),
+      size: handleSizeProp(props.Size.value),
+      layout: props["Label#7185:0"].value ? "withText" : "iconOnly",
+      ...(states.includes("Disabled") && {
+        disabled: true,
+      }),
+    };
+
+    return createLocalSnippetElement(
+      "Chip.Button",
+      commonProps,
+      [prefix, props["Label#7185:0"].value, suffix],
+      { comment: "목적에 따라 Chip.Toggle, Chip.RadioItem 등으로도 사용할 수 있습니다." },
+    );
+  });
+};

package/src/codegen/targets/react/component/handlers/contextual-floating-button.ts

@@ -0,0 +1,52 @@
+import type { ContextualFloatingButtonProperties } from "@/codegen/component-properties";
+import { defineComponentHandler } from "@/codegen/core";
+import * as metadata from "@/entities/data/__generated__/component-sets";
+import { match } from "ts-pattern";
+import { createLocalSnippetHelper, createSeedReactElement } from "../../element-factories";
+import type { ComponentHandlerDeps } from "../deps.interface";
+
+const { createLocalSnippetElement } = createLocalSnippetHelper("contextual-floating-button");
+
+export const createContextualFloatingButtonHandler = (ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<ContextualFloatingButtonProperties>(
+    metadata.contextualFloatingButton.key,
+    ({ componentProperties: props }) => {
+      const states = props.State.value.split("-");
+
+      const { layout, children } = match(props.Layout.value)
+        .with("Icon Only", () => ({
+          layout: "iconOnly",
+          children: [
+            createSeedReactElement("Icon", {
+              svg: ctx.iconHandler.transform(props["Icon#28796:0"]),
+            }),
+          ],
+        }))
+        .with("Icon First", () => ({
+          layout: "withText",
+          children: [
+            createSeedReactElement("PrefixIcon", {
+              svg: ctx.iconHandler.transform(props["Icon#28796:0"]),
+            }),
+            props["Label#28936:0"].value,
+          ],
+        }))
+        .exhaustive();
+
+      const commonProps = {
+        ...(states.includes("Disabled") && {
+          disabled: true,
+        }),
+        ...(states.includes("Loading") && {
+          loading: true,
+        }),
+        variant: match(props.Variant.value)
+          .with("Solid", () => "solid")
+          .with("Layer", () => "layer")
+          .exhaustive(),
+        layout,
+      };
+
+      return createLocalSnippetElement("ContextualFloatingButton", commonProps, children);
+    },
+  );

package/src/codegen/targets/react/component/handlers/divider.ts

@@ -0,0 +1,19 @@
+import type { DividerProperties } from "@/codegen/component-properties";
+import { defineComponentHandler } from "@/codegen/core";
+import * as metadata from "@/entities/data/__generated__/component-sets";
+import { match } from "ts-pattern";
+import { createSeedReactElement } from "../../element-factories";
+import type { ComponentHandlerDeps } from "../deps.interface";
+
+export const createDividerHandler = (_ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<DividerProperties>(
+    metadata.divider.key,
+    ({ componentProperties: props }) => {
+      const { color } = match(props.Tone.value)
+        .with("Neutral", () => ({ color: "stroke.neutral" }))
+        .with("Neutral Muted", () => ({ color: "stroke.neutralMuted" }))
+        .exhaustive();
+
+      return createSeedReactElement("Divider", { color });
+    },
+  );

package/src/codegen/targets/react/component/handlers/error-state.ts

@@ -12,30 +12,33 @@ const { createLocalSnippetElement } = createLocalSnippetHelper("error-state");
 export const createErrorStateHandler = (ctx: ComponentHandlerDeps) => {
   const actionButtonHandler = createActionButtonHandler(ctx);
 
-  return defineComponentHandler<ErrorStateProperties>(metadata.errorState.key, (node) => {
-    const props = node.componentProperties;
+  return defineComponentHandler<ErrorStateProperties>(
+    metadata.templateErrorState.key,
+    (node, traverse) => {
+      const props = node.componentProperties;
 
-    const [actionButtonNode] = findAllInstances<ActionButtonProperties>({
-      node,
-      key: actionButtonHandler.key,
-    });
+      const [actionButtonNode] = findAllInstances<ActionButtonProperties>({
+        node,
+        key: actionButtonHandler.key,
+      });
 
-    const commonProps = {
-      variant: camelCase(props.Variant.value),
-      ...(props.Layout.value === "With Title" && {
-        title: props["Title#16237:0"].value,
-      }),
-      description: props["Description#16237:5"].value,
-      ...(actionButtonNode && {
-        primaryActionProps: {
-          children: actionButtonHandler.transform(actionButtonNode).children[0],
-        },
-        secondaryActionProps: {
-          children: props["Secondary Action Label#17042:0"].value,
-        },
-      }),
-    };
+      const commonProps = {
+        variant: camelCase(props.Variant.value),
+        ...(props.Layout.value === "With Title" && {
+          title: props["Title#16237:0"].value,
+        }),
+        description: props["Description#16237:5"].value,
+        ...(actionButtonNode && {
+          primaryActionProps: {
+            children: actionButtonHandler.transform(actionButtonNode, traverse).children[0],
+          },
+          secondaryActionProps: {
+            children: props["Secondary Action Label#17042:0"].value,
+          },
+        }),
+      };
 
-    return createLocalSnippetElement("ErrorState", commonProps);
-  });
+      return createLocalSnippetElement("ErrorState", commonProps);
+    },
+  );
 };

package/src/codegen/targets/react/component/handlers/floating-action-button.ts

@@ -0,0 +1,48 @@
+import type {
+  FloatingActionButtonButtonItemProperties,
+  FloatingActionButtonMenuItemProperties,
+  FloatingActionButtonProperties,
+} from "@/codegen/component-properties";
+import { defineComponentHandler } from "@/codegen/core";
+import * as metadata from "@/entities/data/__generated__/component-sets";
+import { createLocalSnippetHelper } from "../../element-factories";
+import type { ComponentHandlerDeps } from "../deps.interface";
+import { findAllInstances } from "@/utils/figma-node";
+
+const { createLocalSnippetElement } = createLocalSnippetHelper("floating-action-button");
+
+const BUTTON_TYPE_KEY = "8cecc85275115d653579d4c3156567ebf19f7b27";
+const MENU_TYPE_KEY = "400124347392c15473f9cd2d8a6aedb64f3baf36";
+
+export const createFloatingActionButtonHandler = (ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<FloatingActionButtonProperties>(
+    metadata.floatingActionButton.key,
+    (node) => {
+      const [button] = findAllInstances<FloatingActionButtonButtonItemProperties>({
+        node,
+        key: BUTTON_TYPE_KEY,
+      });
+      const [menu] = findAllInstances<FloatingActionButtonMenuItemProperties>({
+        node,
+        key: MENU_TYPE_KEY,
+      });
+
+      const commonProps = (() => {
+        if (button)
+          return {
+            icon: ctx.iconHandler.transform(button.componentProperties["Icon#29766:18"]),
+            extended: button.componentProperties.Extended.value === "True",
+            label: button.componentProperties["Label#29808:0"].value,
+          };
+
+        if (menu)
+          return {
+            icon: ctx.iconHandler.transform(menu.componentProperties["Icon#29766:0"]),
+            extended: menu.componentProperties.Extended.value === "True",
+            label: menu.componentProperties["Label#29766:9"].value,
+          };
+      })();
+
+      return createLocalSnippetElement("FloatingActionButton", commonProps);
+    },
+  );

package/src/codegen/targets/react/component/handlers/help-bubble.ts

@@ -1,10 +1,12 @@
 import type { HelpBubbleProperties } from "@/codegen/component-properties";
-import { createElement, defineComponentHandler } from "@/codegen/core";
+import { defineComponentHandler } from "@/codegen/core";
 import * as metadata from "@/entities/data/__generated__/component-sets";
 import { createLocalSnippetHelper } from "../../element-factories";
 import type { ComponentHandlerDeps } from "../deps.interface";
 
 const { createLocalSnippetElement } = createLocalSnippetHelper("help-bubble");
+const { createLocalSnippetElement: createLocalSnippetElementTrigger } =
+  createLocalSnippetHelper("action-button");
 
 export const createHelpBubbleHandler = (_ctx: ComponentHandlerDeps) =>
   defineComponentHandler<HelpBubbleProperties>(
@@ -56,7 +58,6 @@ export const createHelpBubbleHandler = (_ctx: ComponentHandlerDeps) =>
         ...(props["Show Description#62499:0"].value && {
           description: props["Description#62535:98"].value,
         }),
-        showCloseButton: props["Show Close Button"].value === "True",
         defaultOpen: true,
         placement,
       };
@@ -64,9 +65,7 @@ export const createHelpBubbleHandler = (_ctx: ComponentHandlerDeps) =>
       return createLocalSnippetElement(
         "HelpBubbleTrigger",
         commonProps,
-        createElement("button", undefined, "열기", {
-          comment: "HelpBubble을 여는 요소를 제공해주세요.",
-        }),
+        createLocalSnippetElementTrigger("ActionButton", {}, "HelpBubble 열기"),
       );
     },
   );

package/src/codegen/targets/react/component/handlers/identity-placeholder.ts

@@ -1,13 +1,14 @@
 import type { IdentityPlaceholderProperties } from "@/codegen/component-properties";
 import { defineComponentHandler } from "@/codegen/core";
-import * as metadata from "@/entities/data/__generated__/component-sets";
 import { camelCase } from "change-case";
 import { createSeedReactElement } from "../../element-factories";
 import type { ComponentHandlerDeps } from "../deps.interface";
 
+const IDENTITY_PLACEHOLDER_KEY = "b3563b6f16ba4cfe4240c9b33eef7edad4c304eb";
+
 export const createIdentityPlaceholderHandler = (_ctx: ComponentHandlerDeps) =>
   defineComponentHandler<IdentityPlaceholderProperties>(
-    metadata.identityPlaceholder.key,
+    IDENTITY_PLACEHOLDER_KEY,
     ({ componentProperties: props }) => {
       const commonProps = {
         identity: camelCase(props.Identity.value),

package/src/codegen/targets/react/component/handlers/inline-banner.ts

@@ -6,6 +6,7 @@ import { findOne } from "@/utils/figma-node";
 import { camelCase } from "change-case";
 import { createLocalSnippetHelper } from "../../element-factories";
 import type { ComponentHandlerDeps } from "../deps.interface";
+import { match } from "ts-pattern";
 
 const { createLocalSnippetElement } = createLocalSnippetHelper("inline-banner");
 
@@ -13,20 +14,12 @@ export const createInlineBannerHandler = (ctx: ComponentHandlerDeps) =>
   defineComponentHandler<InlineBannerProperties>(metadata.inlineBanner.key, (node) => {
     const { componentProperties: props } = node;
 
-    const tag = (() => {
-      switch (props.Interaction.value) {
-        case "Default":
-          return "InlineBanner";
-        case "Actionable":
-          return "ActionableInlineBanner";
-        case "Dismissible":
-          return "DismissibleInlineBanner";
-        case "Link":
-          return "InlineBanner";
-        default:
-          return "InlineBanner";
-      }
-    })();
+    const tag = match(props.Interaction.value)
+      .with("Default", () => "InlineBanner")
+      .with("Actionable", () => "ActionableInlineBanner")
+      .with("Dismissible", () => "DismissibleInlineBanner")
+      .with("Link", () => "InlineBanner")
+      .exhaustive();
 
     const textNode = findOne(
       node,

package/src/codegen/targets/react/component/handlers/manner-temp.ts

@@ -0,0 +1,18 @@
+import type { MannerTempProperties } from "@/codegen/component-properties";
+import { defineComponentHandler } from "@/codegen/core";
+import * as metadata from "@/entities/data/__generated__/component-sets";
+import { createLocalSnippetHelper } from "../../element-factories";
+import type { ComponentHandlerDeps } from "../deps.interface";
+
+const { createLocalSnippetElement } = createLocalSnippetHelper("manner-temp-badge");
+
+export const createMannerTempHandler = (_ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<MannerTempProperties>(metadata.mannerTemp.key, ({ children }) => {
+    const textNode = children.find((child) => child.type === "TEXT");
+
+    const commonProps = {
+      temperature: Number(textNode?.characters.replace(/[^\d.-]/g, "") ?? "-1"),
+    };
+
+    return createLocalSnippetElement("MannerTemp", commonProps);
+  });

package/src/codegen/targets/react/component/handlers/menu-sheet.ts

@@ -0,0 +1,106 @@
+import type {
+  MenuSheetGroupProperties,
+  MenuSheetItemProperties,
+  MenuSheetProperties,
+} from "@/codegen/component-properties";
+import { defineComponentHandler } from "@/codegen/core";
+import * as metadata from "@/entities/data/__generated__/component-sets";
+import { findAllInstances } from "@/utils/figma-node";
+import { camelCase } from "change-case";
+import { createLocalSnippetHelper, createSeedReactElement } from "../../element-factories";
+import type { ComponentHandlerDeps } from "../deps.interface";
+import { match } from "ts-pattern";
+
+const { createLocalSnippetElement } = createLocalSnippetHelper("menu-sheet");
+const { createLocalSnippetElement: createLocalSnippetElementTrigger } =
+  createLocalSnippetHelper("action-button");
+
+const MENU_SHEET_ITEM_KEY = "057083e95466da59051119eec0b41d4ad5a07f8f";
+const createMenuSheetItemHandler = (ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<MenuSheetItemProperties>(
+    MENU_SHEET_ITEM_KEY,
+    ({ componentProperties: props }) => {
+      const states = props.State.value.split("-");
+
+      const commonProps = {
+        tone: camelCase(props.Tone.value),
+        ...(states.includes("Disabled") && {
+          disabled: true,
+        }),
+      };
+
+      return createLocalSnippetElement("MenuSheetItem", commonProps, [
+        props["Show Prefix Icon#17043:5"].value
+          ? createSeedReactElement("PrefixIcon", {
+              svg: ctx.iconHandler.transform(props["Prefix Icon#55948:0"]),
+            })
+          : undefined,
+        props["Label#55905:8"].value,
+      ]);
+    },
+  );
+
+const MENU_SHEET_GROUP_KEY = "2a504a1c6b7810d5e652862dcba2cb7048f9eb16";
+const createMenuSheetGroupHandler = (ctx: ComponentHandlerDeps) => {
+  const menuSheetItemHandler = createMenuSheetItemHandler(ctx);
+
+  return defineComponentHandler<MenuSheetGroupProperties>(
+    MENU_SHEET_GROUP_KEY,
+    (node, traverse) => {
+      const items = findAllInstances<MenuSheetItemProperties>({
+        node,
+        key: menuSheetItemHandler.key,
+      });
+
+      const contentChildren = items.map((item) => menuSheetItemHandler.transform(item, traverse));
+
+      return createLocalSnippetElement("MenuSheetGroup", undefined, contentChildren);
+    },
+  );
+};
+
+export const createMenuSheetHandler = (ctx: ComponentHandlerDeps) => {
+  const menuSheetGroupHandler = createMenuSheetGroupHandler(ctx);
+
+  return defineComponentHandler<MenuSheetProperties>(metadata.menuSheet.key, (node, traverse) => {
+    const { componentProperties: props } = node;
+
+    const groups = findAllInstances<MenuSheetGroupProperties>({
+      node,
+      key: menuSheetGroupHandler.key,
+    });
+
+    const contentChildren = groups.map((group) => menuSheetGroupHandler.transform(group, traverse));
+
+    const title = props["Show Header#17043:12"].value
+      ? props["Title Text#14599:0"].value
+      : undefined;
+
+    // TODO: React 구현체에 description 추가 이후
+    // const description = props["Description Text#21827:0"].value;
+
+    const { labelAlignment } = match(props.Layout.value)
+      .with("Text with Icon", () => ({ labelAlignment: undefined }))
+      .with("Text Only", () => ({ labelAlignment: "center" }))
+      .exhaustive();
+
+    const content = createLocalSnippetElement(
+      "MenuSheetContent",
+      { title, labelAlignment },
+      contentChildren,
+      {
+        comment: title
+          ? undefined
+          : "title을 제공하지 않는 경우 aria-label이나 aria-labelledby 중 하나를 제공해야 합니다.",
+      },
+    );
+
+    const trigger = createLocalSnippetElement(
+      "MenuSheetTrigger",
+      { asChild: true },
+      createLocalSnippetElementTrigger("ActionButton", {}, "MenuSheet 열기"),
+    );
+
+    return createLocalSnippetElement("MenuSheet", undefined, [trigger, content]);
+  });
+};

package/src/codegen/targets/react/component/handlers/multiline-text-field.ts

@@ -5,7 +5,7 @@ import { createLocalSnippetHelper } from "../../element-factories";
 import type { ComponentHandlerDeps } from "../deps.interface";
 import { handleSizeProp } from "../size";
 
-const { createLocalSnippetElement } = createLocalSnippetHelper("multiline-text-field");
+const { createLocalSnippetElement } = createLocalSnippetHelper("text-field");
 
 export const createMultilineTextFieldHandler = (_ctx: ComponentHandlerDeps) =>
   defineComponentHandler<MultilineTextFieldProperties>(