♻️ 노드 렌더러 수정

className을 style객체에서 직접 참조하도록 수정 -> 인라인 스타일로 변경할때 className을 제외하고 추출하기때문에 className은 style객체에서 직접 참조해야한다.
style추출할때 processNodeStyles함수 사용하도록 수정완료

Author: y-minion

packages/ui/src/components/Heading.tsx

@@ -1,6 +1,6 @@
+import processNodeStyles from "utils/processNodeStyles";
 import { NodeComponentProps } from "../types";
 import { HeadingNode } from "../types/nodes";
-import applyStyles from "../utils/applyStyles";
 
 export default function HeadingComponent({
   node,
@@ -9,12 +9,17 @@ export default function HeadingComponent({
   children,
 }: NodeComponentProps<HeadingNode>) {
   const { text, level = "h2" } = props;
-  const inlineStyle = applyStyles(style);
+  const nodeStyleObj = processNodeStyles(style);
+
   const Tag = level;
 
   return (
-    <div data-component-id={node.id} className={style.className}>
-      <Tag style={inlineStyle}>{text}</Tag>
+    <div
+      data-component-id={node.id}
+      className={`${style.root?.className} flex h-full w-full items-center justify-center`}
+      style={{ ...nodeStyleObj.root, width: "100%", height: "100%" }}
+    >
+      <Tag style={nodeStyleObj.heading}>{text}</Tag>
       {/* 컨테이너일 경우 이곳에 children이 렌더링 되야 한다. */}
       {children}
     </div>

packages/ui/src/components/Hero.tsx

@@ -1,8 +1,7 @@
-import { NodeComponentProps } from "../types/component";
-import { HeroNode } from "../types/nodes";
 import { useBuilderMode } from "context/builderMode";
 import Image from "next/image";
-import processNodeStyles from "../utils/style";
+import processNodeStyles from "../utils/processNodeStyles";
+import { HeroNode, NodeComponentProps } from "types";
 
 export default function HeroComponent({
   node,
@@ -29,12 +28,20 @@ export default function HeroComponent({
     //TODO - 노드들이 드래그 앤 드롭될때 위치가 자유롭게 변하게 할 수 있어야한다.
     <section
       data-component-id={node.id}
-      className={`${style.className} flex h-full w-full flex-col items-center justify-center gap-2 overflow-hidden`}
-      style={nodeStyleObj.root}
+      className={`${style.root?.className || ""} flex h-full w-full flex-col items-center justify-center gap-2 overflow-hidden`}
+      style={{
+        ...nodeStyleObj.root,
+        // ⚠️ 안전 장치: style 객체에 크기 정보가 있어도 무시하고 강제로 100%로 덮어씁니다.
+        width: "100%",
+        height: "100%",
+      }}
     >
       {/* 배경 이미지 영역 */}
       {image?.url && (
-        <div className={`absolute inset-0 z-0`} style={nodeStyleObj.image}>
+        <div
+          className={`${style.image?.className || ""} absolute inset-0 z-0`}
+          style={nodeStyleObj.image}
+        >
           <Image
             fill={true}
             className={"object-cover"}
@@ -51,15 +58,25 @@ export default function HeroComponent({
         className={"relative top-0 left-0 z-10 flex flex-col items-center p-4"}
       >
         <h1
+          className={style.heading?.className || ""}
           style={nodeStyleObj.heading} // heading 스타일 적용 (폰트 크기, 색상)
         >
           {heading}
         </h1>
-        {subHeading && <p style={nodeStyleObj.subHeading}>{subHeading}</p>}
+
+        {subHeading && (
+          <p
+            className={style.subHeading?.className || ""}
+            style={nodeStyleObj.subHeading}
+          >
+            {subHeading}
+          </p>
+        )}
         {button && (
           <a
             href={button.link || "#"}
             style={nodeStyleObj.button}
+            className={style.button?.className || ""}
             onClick={handleLinkClick}
             //백그라운드 사진 렌더링 필요
           >

packages/ui/src/components/Image.tsx

@@ -1,22 +1,23 @@
 import Image from "next/image";
-import applyStyles from "../utils/applyStyles";
 import { NodeComponentProps } from "../types/component";
 import { ImageNode } from "../types/nodes";
+import processNodeStyles from "utils/processNodeStyles";
 
 export default function ImageComponent({
   node,
   props,
   style,
 }: NodeComponentProps<ImageNode>) {
   const { src, alt = "사용자의 이미지", caption } = props;
-  const inlineStyles = applyStyles(style);
+  const nodeStyleObj = processNodeStyles(style);
 
   return (
     <div
       data-component-id={node.id}
-      className={`${style.className} flex flex-col gap-1`}
+      className={`${style.root?.className} flex flex-col gap-1`}
+      style={{ ...nodeStyleObj.root, width: "100%", height: "100%" }}
     >
-      <Image src={src} alt={alt} style={inlineStyles} />
+      <Image src={src} alt={alt} style={nodeStyleObj.image} />
       {caption && <div>{caption}</div>}
     </div>
   );