@seed-design/figma 0.0.20 → 0.0.22

package/src/codegen/targets/react/component/{transformers → handlers}/app-bar.ts

@@ -1,19 +1,19 @@
-import { createElement, defineComponentTransformer } from "@/codegen/core";
+import { createElement, defineComponentHandler } from "@/codegen/core";
 import * as metadata from "@/entities/data/__generated__/component-sets";
 import type { NormalizedInstanceNode, NormalizedTextNode } from "@/normalizer";
 import { findAll, findAllInstances, findOne } from "@/utils/figma-node";
 import { match } from "ts-pattern";
-import type { SeedComponentTransformerDeps } from "../deps.interface";
+import type { ComponentHandlerDeps } from "../deps.interface";
 import type {
   AppBarLeftProperties,
   AppBarMainProperties,
   AppBarProperties,
   AppBarRightProperties,
-} from "../properties.type";
+} from "@/codegen/component-properties";
 
 const APP_BAR_MAIN_KEY = "336b49b26c3933485d87cc460b06c390976ea58e";
-const createAppBarMainTransformer = (_ctx: SeedComponentTransformerDeps) =>
-  defineComponentTransformer<AppBarMainProperties>(
+const createAppBarMainHandler = (_ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<AppBarMainProperties>(
     APP_BAR_MAIN_KEY,
     ({ componentProperties: props }) => {
       const { title, subtitle, layout } = match(props.Type.value)
@@ -49,8 +49,8 @@ const createAppBarMainTransformer = (_ctx: SeedComponentTransformerDeps) =>
   );
 
 const APP_BAR_LEFT_KEY = "e5d2e47052a22395db79f195a0991a570dc1b6c9";
-const createAppBarLeftTransformer = (ctx: SeedComponentTransformerDeps) =>
-  defineComponentTransformer<AppBarLeftProperties>(APP_BAR_LEFT_KEY, (node) => {
+const createAppBarLeftHandler = (ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<AppBarLeftProperties>(APP_BAR_LEFT_KEY, (node) => {
     const props = node.componentProperties;
 
     const children = (() => {
@@ -65,17 +65,15 @@ const createAppBarLeftTransformer = (ctx: SeedComponentTransformerDeps) =>
             (child) => child.type === "INSTANCE" && child.name === "Icon",
           ) as NormalizedInstanceNode | null;
 
-          const iconComponentKey = iconNode?.componentKey ?? undefined;
+          if (!iconNode) {
+            return undefined;
+          }
 
           return createElement(
             "AppBarIconButton",
             undefined,
-            iconComponentKey
-              ? createElement(ctx.iconService.createIconTagName(iconComponentKey))
-              : undefined,
-            iconComponentKey === undefined
-              ? "아이콘과, aria-label 또는 aria-labelledby를 제공해주세요."
-              : "aria-label 또는 aria-labelledby를 제공해주세요.",
+            ctx.iconHandler.transform(iconNode),
+            "aria-label 또는 aria-labelledby를 제공해주세요.",
           );
         }
       }
@@ -85,8 +83,8 @@ const createAppBarLeftTransformer = (ctx: SeedComponentTransformerDeps) =>
   });
 
 const APP_BAR_RIGHT_KEY = "9e157fc2d1f89ffee938a5bc62f4a58064fec44e";
-const createAppBarRightTransformer = (ctx: SeedComponentTransformerDeps) =>
-  defineComponentTransformer<AppBarRightProperties>(APP_BAR_RIGHT_KEY, (node) => {
+const createAppBarRightHandler = (ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<AppBarRightProperties>(APP_BAR_RIGHT_KEY, (node) => {
     const props = node.componentProperties;
 
     const children = (() => {
@@ -105,18 +103,12 @@ const createAppBarRightTransformer = (ctx: SeedComponentTransformerDeps) =>
             (child) => child.type === "INSTANCE" && child.name === "Icon",
           ) as NormalizedInstanceNode[];
 
-          const iconComponentKeys = iconNodes.map((iconNode) => iconNode.componentKey);
-
-          return iconComponentKeys.map((iconComponentKey) =>
+          return iconNodes.map((iconNode) =>
             createElement(
               "AppBarIconButton",
               undefined,
-              iconComponentKey
-                ? createElement(ctx.iconService.createIconTagName(iconComponentKey))
-                : undefined,
-              iconComponentKey === undefined
-                ? "아이콘과, aria-label 또는 aria-labelledby를 제공해주세요."
-                : "aria-label 또는 aria-labelledby를 제공해주세요.",
+              ctx.iconHandler.transform(iconNode),
+              "aria-label 또는 aria-labelledby를 제공해주세요.",
             ),
           );
         }
@@ -126,12 +118,12 @@ const createAppBarRightTransformer = (ctx: SeedComponentTransformerDeps) =>
     return createElement("AppBarRight", undefined, children);
   });
 
-export const createAppBarTransformer = (ctx: SeedComponentTransformerDeps) => {
-  const appBarMainTransformer = createAppBarMainTransformer(ctx);
-  const appBarLeftTransformer = createAppBarLeftTransformer(ctx);
-  const appBarRightTransformer = createAppBarRightTransformer(ctx);
+export const createAppBarHandler = (ctx: ComponentHandlerDeps) => {
+  const appBarMainHandler = createAppBarMainHandler(ctx);
+  const appBarLeftHandler = createAppBarLeftHandler(ctx);
+  const appBarRightHandler = createAppBarRightHandler(ctx);
 
-  return defineComponentTransformer<AppBarProperties>(metadata.standardNavigation.key, (node) => {
+  return defineComponentHandler<AppBarProperties>(metadata.standardNavigation.key, (node) => {
     const props = node.componentProperties;
 
     const theme = (() => {
@@ -153,25 +145,25 @@ export const createAppBarTransformer = (ctx: SeedComponentTransformerDeps) => {
     })();
 
     const mainNode = findAllInstances<AppBarMainProperties>({
-      key: appBarMainTransformer.key,
+      key: appBarMainHandler.key,
       node,
     });
     const onlyMainNode = mainNode.length === 1 ? mainNode[0] : undefined;
-    const main = onlyMainNode ? appBarMainTransformer.transform(onlyMainNode) : undefined;
+    const main = onlyMainNode ? appBarMainHandler.transform(onlyMainNode) : undefined;
 
     const leftNode = findAllInstances<AppBarLeftProperties>({
-      key: appBarLeftTransformer.key,
+      key: appBarLeftHandler.key,
       node,
     });
     const onlyLeftNode = leftNode.length === 1 ? leftNode[0] : undefined;
-    const left = onlyLeftNode ? appBarLeftTransformer.transform(onlyLeftNode) : undefined;
+    const left = onlyLeftNode ? appBarLeftHandler.transform(onlyLeftNode) : undefined;
 
     const rightNode = findAllInstances<AppBarRightProperties>({
-      key: appBarRightTransformer.key,
+      key: appBarRightHandler.key,
       node,
     });
     const onlyRightNode = rightNode.length === 1 ? rightNode[0] : undefined;
-    const right = onlyRightNode ? appBarRightTransformer.transform(onlyRightNode) : undefined;
+    const right = onlyRightNode ? appBarRightHandler.transform(onlyRightNode) : undefined;
 
     return createElement(
       "AppBar",

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

@@ -0,0 +1,29 @@
+import { createElement, defineComponentHandler } from "@/codegen/core";
+import * as metadata from "@/entities/data/__generated__/component-sets";
+import { findAllInstances } from "@/utils/figma-node";
+import type { ComponentHandlerDeps } from "../deps.interface";
+import type { AvatarProperties, AvatarStackProperties } from "@/codegen/component-properties";
+import { createAvatarHandler } from "./avatar";
+
+export const createAvatarStackHandler = (ctx: ComponentHandlerDeps) => {
+  const avatarHandler = createAvatarHandler(ctx);
+
+  return defineComponentHandler<AvatarStackProperties>(metadata.avatarStack.key, (node) => {
+    const avatarNodes = findAllInstances<AvatarProperties>({
+      node,
+      key: avatarHandler.key,
+    });
+
+    const { componentProperties: props } = node;
+
+    const commonProps = {
+      size: props.Size.value,
+      // TODO: 구현될 예정
+      // topItem: camelCase(props["Top Item"].value),
+    };
+
+    const avatarStackChildren = avatarNodes.map(avatarHandler.transform);
+
+    return createElement("AvatarStack", commonProps, avatarStackChildren);
+  });
+};

package/src/codegen/targets/react/component/{transformers → handlers}/avatar.ts

@@ -1,17 +1,20 @@
-import { createElement, defineComponentTransformer } 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 type { SeedComponentTransformerDeps } from "../deps.interface";
-import type { AvatarProperties, IdentityPlaceholderProperties } from "../properties.type";
-import { createIdentityPlaceholderTransformer } from "./identity-placeholder";
+import type { ComponentHandlerDeps } from "../deps.interface";
+import type {
+  AvatarProperties,
+  IdentityPlaceholderProperties,
+} from "@/codegen/component-properties";
+import { createIdentityPlaceholderHandler } from "./identity-placeholder";
 
-export const createAvatarTransformer = (ctx: SeedComponentTransformerDeps) => {
-  const identityPlaceholderTransformer = createIdentityPlaceholderTransformer(ctx);
+export const createAvatarHandler = (ctx: ComponentHandlerDeps) => {
+  const identityPlaceholderHandler = createIdentityPlaceholderHandler(ctx);
 
-  return defineComponentTransformer<AvatarProperties>(metadata.avatar.key, (node) => {
+  return defineComponentHandler<AvatarProperties>(metadata.avatar.key, (node) => {
     const [placeholder] = findAllInstances<IdentityPlaceholderProperties>({
       node,
-      key: identityPlaceholderTransformer.key,
+      key: identityPlaceholderHandler.key,
     });
     const { componentProperties: props } = node;
 
@@ -23,7 +26,7 @@ export const createAvatarTransformer = (ctx: SeedComponentTransformerDeps) => {
         src: `https://placehold.co/${props.Size.value}x${props.Size.value}`,
       }),
       ...(placeholder && {
-        fallback: identityPlaceholderTransformer.transform(placeholder),
+        fallback: identityPlaceholderHandler.transform(placeholder),
       }),
       size: props.Size.value,
     };

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

@@ -0,0 +1,18 @@
+import { createElement, defineComponentHandler } from "@/codegen/core";
+import * as metadata from "@/entities/data/__generated__/component-sets";
+import { camelCase } from "change-case";
+import type { ComponentHandlerDeps } from "../deps.interface";
+import type { BadgeProperties } from "@/codegen/component-properties";
+import { handleSizeProp } from "../size";
+
+export const createBadgeHandler = (_ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<BadgeProperties>(metadata.badge.key, ({ componentProperties: props }) => {
+    const commonProps = {
+      size: handleSizeProp(props.Size.value),
+      tone: camelCase(props.Tone.value),
+      variant: camelCase(props.Variant.value),
+      shape: camelCase(props.Shape.value),
+    };
+
+    return createElement("Badge", commonProps, props["Label#1584:0"].value);
+  });

package/src/codegen/targets/react/component/{transformers → handlers}/callout.ts

@@ -1,12 +1,12 @@
-import { createElement, defineComponentTransformer } from "@/codegen/core";
+import { createElement, defineComponentHandler } from "@/codegen/core";
 import * as metadata from "@/entities/data/__generated__/component-sets";
 import type { NormalizedTextNode } from "@/normalizer";
 import { camelCase } from "change-case";
-import type { SeedComponentTransformerDeps } from "../deps.interface";
-import type { CalloutProperties } from "../properties.type";
+import type { ComponentHandlerDeps } from "../deps.interface";
+import type { CalloutProperties } from "@/codegen/component-properties";
 
-export const createCalloutTransformer = (ctx: SeedComponentTransformerDeps) =>
-  defineComponentTransformer<CalloutProperties>(
+export const createCalloutHandler = (ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<CalloutProperties>(
     metadata.callout.key,
     ({ componentProperties: props, children }) => {
       const tag = (() => {
@@ -78,9 +78,7 @@ export const createCalloutTransformer = (ctx: SeedComponentTransformerDeps) =>
           children: linkLabel,
         },
         ...(props["Icon#12598:210"].value && {
-          prefixIcon: createElement(
-            ctx.iconService.createIconTagName(props["Icon#12598:210"].componentKey),
-          ),
+          prefixIcon: ctx.iconHandler.transform(props["Icon#12598:210"]),
         }),
       };
 

package/src/codegen/targets/react/component/{transformers → handlers}/checkbox.ts

@@ -1,12 +1,12 @@
-import { createElement, defineComponentTransformer } from "@/codegen/core";
+import { createElement, defineComponentHandler } from "@/codegen/core";
 import * as metadata from "@/entities/data/__generated__/component-sets";
 import { camelCase } from "change-case";
-import type { SeedComponentTransformerDeps } from "../deps.interface";
-import type { CheckboxProperties } from "../properties.type";
+import type { ComponentHandlerDeps } from "../deps.interface";
+import type { CheckboxProperties } from "@/codegen/component-properties";
 import { handleSizeProp } from "../size";
 
-export const createCheckboxTransformer = (_ctx: SeedComponentTransformerDeps) =>
-  defineComponentTransformer<CheckboxProperties>(
+export const createCheckboxHandler = (_ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<CheckboxProperties>(
     metadata.checkbox.key,
     ({ componentProperties: props }) => {
       const states = props.State.value.split("-");

package/src/codegen/targets/react/component/{transformers → handlers}/chip-tabs.ts

@@ -1,13 +1,13 @@
-import { createElement, defineComponentTransformer } 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 { camelCase } from "change-case";
-import type { SeedComponentTransformerDeps } from "../deps.interface";
-import type { ChipTabsItemProperties, ChipTabsProperties } from "../properties.type";
+import type { ComponentHandlerDeps } from "../deps.interface";
+import type { ChipTabsItemProperties, ChipTabsProperties } from "@/codegen/component-properties";
 
 const CHIP_TABS_ITEM_KEY = "fa80168b02051fbb0ba032238bd76d840dbe2e15";
-const createChipTabsItemTransformer = (_ctx: SeedComponentTransformerDeps) =>
-  defineComponentTransformer<ChipTabsItemProperties>(
+const createChipTabsItemHandler = (_ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<ChipTabsItemProperties>(
     CHIP_TABS_ITEM_KEY,
     ({ componentProperties: props }) => {
       const states = props.State.value.split("-");
@@ -23,13 +23,13 @@ const createChipTabsItemTransformer = (_ctx: SeedComponentTransformerDeps) =>
     },
   );
 
-export const createChipTabsTransformer = (ctx: SeedComponentTransformerDeps) => {
-  const chipTabsItemTransformer = createChipTabsItemTransformer(ctx);
+export const createChipTabsHandler = (ctx: ComponentHandlerDeps) => {
+  const chipTabsItemHandler = createChipTabsItemHandler(ctx);
 
-  return defineComponentTransformer<ChipTabsProperties>(metadata.chipTablist.key, (node) => {
+  return defineComponentHandler<ChipTabsProperties>(metadata.chipTablist.key, (node) => {
     const chipTabsItems = findAllInstances<ChipTabsItemProperties>({
       node,
-      key: chipTabsItemTransformer.key,
+      key: chipTabsItemHandler.key,
     });
 
     const selectedChipTabsItem = chipTabsItems.find((chipTabsItem) =>
@@ -39,7 +39,7 @@ export const createChipTabsTransformer = (ctx: SeedComponentTransformerDeps) =>
     const chipTabsList = createElement(
       "ChipTabsList",
       undefined,
-      chipTabsItems.map(chipTabsItemTransformer.transform),
+      chipTabsItems.map(chipTabsItemHandler.transform),
     );
 
     const commonProps = {

package/src/codegen/targets/react/component/{transformers → handlers}/control-chip.ts

@@ -1,12 +1,12 @@
-import { createElement, defineComponentTransformer } from "@/codegen/core";
+import { createElement, defineComponentHandler } from "@/codegen/core";
 import * as metadata from "@/entities/data/__generated__/component-sets";
 import { match } from "ts-pattern";
-import type { SeedComponentTransformerDeps } from "../deps.interface";
-import type { ControlChipProperties } from "../properties.type";
+import type { ComponentHandlerDeps } from "../deps.interface";
+import type { ControlChipProperties } from "@/codegen/component-properties";
 import { handleSizeProp } from "../size";
 
-export const createControlChipTransformer = (ctx: SeedComponentTransformerDeps) =>
-  defineComponentTransformer<ControlChipProperties>(
+export const createControlChipHandler = (ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<ControlChipProperties>(
     metadata.controlChip.key,
     ({ componentProperties: props }) => {
       const states = props.State.value.split("-");
@@ -16,9 +16,7 @@ export const createControlChipTransformer = (ctx: SeedComponentTransformerDeps)
           layout: "iconOnly",
           children: [
             createElement("Icon", {
-              svg: createElement(
-                ctx.iconService.createIconTagName(props["Icon#8722:41"].componentKey),
-              ),
+              svg: ctx.iconHandler.transform(props["Icon#8722:41"]),
             }),
           ],
         }))
@@ -26,9 +24,7 @@ export const createControlChipTransformer = (ctx: SeedComponentTransformerDeps)
           layout: "withText",
           children: [
             createElement("PrefixIcon", {
-              svg: createElement(
-                ctx.iconService.createIconTagName(props["Prefix Icon#8722:0"].componentKey),
-              ),
+              svg: ctx.iconHandler.transform(props["Prefix Icon#8722:0"]),
             }),
             props["Label#7185:0"].value,
           ],
@@ -38,9 +34,7 @@ export const createControlChipTransformer = (ctx: SeedComponentTransformerDeps)
           children: [
             props["Label#7185:0"].value,
             createElement("SuffixIcon", {
-              svg: createElement(
-                ctx.iconService.createIconTagName(props["Suffix Icon#8722:82"].componentKey),
-              ),
+              svg: ctx.iconHandler.transform(props["Suffix Icon#8722:82"]),
             }),
           ],
         }))
@@ -48,15 +42,11 @@ export const createControlChipTransformer = (ctx: SeedComponentTransformerDeps)
           layout: "withText",
           children: [
             createElement("PrefixIcon", {
-              svg: createElement(
-                ctx.iconService.createIconTagName(props["Prefix Icon#8722:0"].componentKey),
-              ),
+              svg: ctx.iconHandler.transform(props["Prefix Icon#8722:0"]),
             }),
             props["Label#7185:0"].value,
             createElement("SuffixIcon", {
-              svg: createElement(
-                ctx.iconService.createIconTagName(props["Suffix Icon#8722:82"].componentKey),
-              ),
+              svg: ctx.iconHandler.transform(props["Suffix Icon#8722:82"]),
             }),
           ],
         }))

package/src/codegen/targets/react/component/{transformers → handlers}/error-state.ts

@@ -1,20 +1,20 @@
-import { createElement, defineComponentTransformer } 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 { camelCase } from "change-case";
-import type { SeedComponentTransformerDeps } from "../deps.interface";
-import type { ActionButtonProperties, ErrorStateProperties } from "../properties.type";
-import { createActionButtonTransformer } from "./action-button";
+import type { ComponentHandlerDeps } from "../deps.interface";
+import type { ActionButtonProperties, ErrorStateProperties } from "@/codegen/component-properties";
+import { createActionButtonHandler } from "./action-button";
 
-export const createErrorStateTransformer = (ctx: SeedComponentTransformerDeps) => {
-  const actionButtonTransformer = createActionButtonTransformer(ctx);
+export const createErrorStateHandler = (ctx: ComponentHandlerDeps) => {
+  const actionButtonHandler = createActionButtonHandler(ctx);
 
-  return defineComponentTransformer<ErrorStateProperties>(metadata.errorState.key, (node) => {
+  return defineComponentHandler<ErrorStateProperties>(metadata.errorState.key, (node) => {
     const props = node.componentProperties;
 
     const [actionButtonNode] = findAllInstances<ActionButtonProperties>({
       node,
-      key: actionButtonTransformer.key,
+      key: actionButtonHandler.key,
     });
 
     const commonProps = {
@@ -25,7 +25,7 @@ export const createErrorStateTransformer = (ctx: SeedComponentTransformerDeps) =
       description: props["Description#16237:5"].value,
       ...(actionButtonNode && {
         primaryActionProps: {
-          children: actionButtonTransformer.transform(actionButtonNode).children[0],
+          children: actionButtonHandler.transform(actionButtonNode).children[0],
         },
         secondaryActionProps: {
           children: props["Secondary Action Label#17042:0"].value,

package/src/codegen/targets/react/component/{transformers → handlers}/extended-action-sheet.ts

@@ -1,17 +1,17 @@
-import { createElement, defineComponentTransformer } 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 { camelCase } from "change-case";
-import type { SeedComponentTransformerDeps } from "../deps.interface";
+import type { ComponentHandlerDeps } from "../deps.interface";
 import type {
   ExtendedActionSheetGroupProperties,
   ExtendedActionSheetItemProperties,
   ExtendedActionSheetProperties,
-} from "../properties.type";
+} from "@/codegen/component-properties";
 
 const EXTENDED_ACTION_SHEET_ITEM_KEY = "057083e95466da59051119eec0b41d4ad5a07f8f";
-const createExtendedActionSheetItemTransformer = (ctx: SeedComponentTransformerDeps) =>
-  defineComponentTransformer<ExtendedActionSheetItemProperties>(
+const createExtendedActionSheetItemHandler = (ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<ExtendedActionSheetItemProperties>(
     EXTENDED_ACTION_SHEET_ITEM_KEY,
     ({ componentProperties: props }) => {
       const states = props.State.value.split("-");
@@ -26,9 +26,7 @@ const createExtendedActionSheetItemTransformer = (ctx: SeedComponentTransformerD
       return createElement("ExtendedActionSheetItem", commonProps, [
         props["Show Prefix Icon#17043:5"].value
           ? createElement("PrefixIcon", {
-              svg: createElement(
-                ctx.iconService.createIconTagName(props["Prefix Icon#55948:0"].componentKey),
-              ),
+              svg: ctx.iconHandler.transform(props["Prefix Icon#55948:0"]),
             })
           : undefined,
         props["Label#55905:8"].value,
@@ -37,38 +35,38 @@ const createExtendedActionSheetItemTransformer = (ctx: SeedComponentTransformerD
   );
 
 const EXTENDED_ACTION_SHEET_GROUP_KEY = "2a504a1c6b7810d5e652862dcba2cb7048f9eb16";
-const createExtendedActionSheetGroupTransformer = (ctx: SeedComponentTransformerDeps) => {
-  const extendedActionSheetItemTransformer = createExtendedActionSheetItemTransformer(ctx);
+const createExtendedActionSheetGroupHandler = (ctx: ComponentHandlerDeps) => {
+  const extendedActionSheetItemHandler = createExtendedActionSheetItemHandler(ctx);
 
-  return defineComponentTransformer<ExtendedActionSheetGroupProperties>(
+  return defineComponentHandler<ExtendedActionSheetGroupProperties>(
     EXTENDED_ACTION_SHEET_GROUP_KEY,
     (node) => {
       const items = findAllInstances<ExtendedActionSheetItemProperties>({
         node,
-        key: extendedActionSheetItemTransformer.key,
+        key: extendedActionSheetItemHandler.key,
       });
 
-      const contentChildren = items.map(extendedActionSheetItemTransformer.transform);
+      const contentChildren = items.map(extendedActionSheetItemHandler.transform);
 
       return createElement("ExtendedActionSheetGroup", undefined, contentChildren);
     },
   );
 };
 
-export const createExtendedActionSheetTransformer = (ctx: SeedComponentTransformerDeps) => {
-  const extendedActionSheetGroupTransformer = createExtendedActionSheetGroupTransformer(ctx);
+export const createExtendedActionSheetHandler = (ctx: ComponentHandlerDeps) => {
+  const extendedActionSheetGroupHandler = createExtendedActionSheetGroupHandler(ctx);
 
-  return defineComponentTransformer<ExtendedActionSheetProperties>(
+  return defineComponentHandler<ExtendedActionSheetProperties>(
     metadata.extendedActionSheet.key,
     (node) => {
       const { componentProperties: props } = node;
 
       const groups = findAllInstances<ExtendedActionSheetGroupProperties>({
         node,
-        key: extendedActionSheetGroupTransformer.key,
+        key: extendedActionSheetGroupHandler.key,
       });
 
-      const contentChildren = groups.map(extendedActionSheetGroupTransformer.transform);
+      const contentChildren = groups.map(extendedActionSheetGroupHandler.transform);
 
       const title = props["Show Title#17043:12"].value ? props["Title#14599:0"].value : undefined;
 

package/src/codegen/targets/react/component/{transformers → handlers}/extended-fab.ts

@@ -1,12 +1,12 @@
-import { createElement, defineComponentTransformer } from "@/codegen/core";
+import { createElement, defineComponentHandler } from "@/codegen/core";
 import * as metadata from "@/entities/data/__generated__/component-sets";
 import { camelCase } from "change-case";
-import type { SeedComponentTransformerDeps } from "../deps.interface";
-import type { ExtendedFabProperties } from "../properties.type";
+import type { ComponentHandlerDeps } from "../deps.interface";
+import type { ExtendedFabProperties } from "@/codegen/component-properties";
 import { handleSizeProp } from "../size";
 
-export const createExtendedFabTransformer = (ctx: SeedComponentTransformerDeps) =>
-  defineComponentTransformer<ExtendedFabProperties>(
+export const createExtendedFabHandler = (ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<ExtendedFabProperties>(
     metadata.extendedFloatingActionButton.key,
     ({ componentProperties: props }) => {
       const commonProps = {
@@ -16,7 +16,7 @@ export const createExtendedFabTransformer = (ctx: SeedComponentTransformerDeps)
 
       return createElement("ExtendedFab", commonProps, [
         createElement("PrefixIcon", {
-          svg: createElement(ctx.iconService.createIconTagName(props["Icon#28796:0"].componentKey)),
+          svg: ctx.iconHandler.transform(props["Icon#28796:0"]),
         }),
         props["Label#28936:0"].value,
       ]);

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

@@ -0,0 +1,18 @@
+import { defineComponentHandler } from "@/codegen/core";
+import * as metadata from "@/entities/data/__generated__/component-sets";
+import { createElement } from "@/codegen/core";
+import type { FabProperties } from "@/codegen/component-properties";
+import type { ComponentHandlerDeps } from "../deps.interface";
+
+export const createFabHandler = (ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<FabProperties>(
+    metadata.floatingActionButton.key,
+    ({ componentProperties: props }) => {
+      return createElement(
+        "Fab",
+        undefined,
+        ctx.iconHandler.transform(props["Icon#28796:0"]),
+        "aria-label이나 aria-labelledby 중 하나를 제공해야 합니다.",
+      );
+    },
+  );

package/src/codegen/targets/react/component/{transformers → handlers}/help-bubble.ts

@@ -1,11 +1,11 @@
-import { defineComponentTransformer } from "@/codegen/core";
+import { defineComponentHandler } from "@/codegen/core";
 import * as metadata from "@/entities/data/__generated__/component-sets";
 import { createElement } from "@/codegen/core";
-import type { HelpBubbleProperties } from "../properties.type";
-import type { SeedComponentTransformerDeps } from "../deps.interface";
+import type { HelpBubbleProperties } from "@/codegen/component-properties";
+import type { ComponentHandlerDeps } from "../deps.interface";
 
-export const createHelpBubbleTransformer = (_ctx: SeedComponentTransformerDeps) =>
-  defineComponentTransformer<HelpBubbleProperties>(
+export const createHelpBubbleHandler = (_ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<HelpBubbleProperties>(
     metadata.helpBubble.key,
     ({ componentProperties: props }) => {
       const placement:

package/src/codegen/targets/react/component/{transformers → handlers}/identity-placeholder.ts

@@ -1,12 +1,12 @@
-import { defineComponentTransformer } from "@/codegen/core";
+import { defineComponentHandler } from "@/codegen/core";
 import { camelCase } from "change-case";
 import * as metadata from "@/entities/data/__generated__/component-sets";
 import { createElement } from "@/codegen/core";
-import type { IdentityPlaceholderProperties } from "../properties.type";
-import type { SeedComponentTransformerDeps } from "../deps.interface";
+import type { IdentityPlaceholderProperties } from "@/codegen/component-properties";
+import type { ComponentHandlerDeps } from "../deps.interface";
 
-export const createIdentityPlaceholderTransformer = (_ctx: SeedComponentTransformerDeps) =>
-  defineComponentTransformer<IdentityPlaceholderProperties>(
+export const createIdentityPlaceholderHandler = (_ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<IdentityPlaceholderProperties>(
     metadata.identityPlaceholder.key,
     ({ componentProperties: props }) => {
       const commonProps = {

package/src/codegen/targets/react/component/{transformers → handlers}/inline-banner.ts

@@ -1,13 +1,13 @@
-import { createElement, defineComponentTransformer } from "@/codegen/core";
+import type { InlineBannerProperties } from "@/codegen/component-properties";
+import { createElement, defineComponentHandler } from "@/codegen/core";
 import * as metadata from "@/entities/data/__generated__/component-sets";
 import type { NormalizedInstanceNode, NormalizedTextNode } from "@/normalizer";
 import { findOne } from "@/utils/figma-node";
 import { camelCase } from "change-case";
-import type { SeedComponentTransformerDeps } from "../deps.interface";
-import type { InlineBannerProperties } from "../properties.type";
+import type { ComponentHandlerDeps } from "../deps.interface";
 
-export const createInlineBannerTransformer = (ctx: SeedComponentTransformerDeps) =>
-  defineComponentTransformer<InlineBannerProperties>(metadata.inlineBanner.key, (node) => {
+export const createInlineBannerHandler = (ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<InlineBannerProperties>(metadata.inlineBanner.key, (node) => {
     const { componentProperties: props } = node;
 
     const tag = (() => {
@@ -58,11 +58,8 @@ export const createInlineBannerTransformer = (ctx: SeedComponentTransformerDeps)
       (child) => child.type === "INSTANCE" && child.name === "icon",
     ) as NormalizedInstanceNode | null;
 
-    const iconComponentKey =
-      props["Show Icon#11840:27"] && iconNode ? iconNode.componentKey : undefined;
-    const prefixIcon = iconComponentKey
-      ? createElement(ctx.iconService.createIconTagName(iconComponentKey))
-      : undefined;
+    const showIcon = props["Show Icon#11840:27"] && iconNode;
+    const prefixIcon = showIcon ? ctx.iconHandler.transform(iconNode) : undefined;
 
     const commonProps = {
       variant: camelCase(props.Variant.value),