(null);
+
+ // 모드에 따라 입력 비활성화
+ const isDisabled = mode === "fill" || mode === "fit";
+ const displayValue = isDisabled ? (mode === "fill" ? "1fr" : "auto") : value;
+
+ useEffect(() => {
+ const handleClickOutside = (e: MouseEvent) => {
+ if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {
+ setIsOpen(false);
+ }
+ };
+ document.addEventListener("mousedown", handleClickOutside);
+ return () => document.removeEventListener("mousedown", handleClickOutside);
+ }, []);
+
+ return (
+
+ {/* 라벨 */}
+
{label}
+
+ {/* 모드 드롭다운 */}
+
+
+ {isOpen && (
+
+ {(Object.keys(MODE_LABELS) as SizingMode[]).map((m) => (
+
+ ))}
+
+ )}
+
+
+ {/* 값 입력 */}
+
onValueChange(Number(e.target.value))}
+ className={cn(
+ "w-16 px-2 py-1.5 text-xs border border-zinc-200 rounded-md text-center",
+ isDisabled && "bg-zinc-100 text-zinc-400 cursor-not-allowed"
+ )}
+ />
+
+ {/* 단위 토글 */}
+ {!isDisabled && (
+
+ )}
+
+ onChange(Number(e.target.value))}
+ className={cn(
+ "w-full h-1 bg-zinc-200 rounded-full appearance-none cursor-pointer accent-[#2563EB]",
+ "[&::-webkit-slider-thumb]:appearance-none",
+ "[&::-webkit-slider-thumb]:w-3.5 [&::-webkit-slider-thumb]:h-3.5",
+ "[&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-white",
+ "[&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-[#2563EB]",
+ "[&::-webkit-slider-thumb]:shadow-md [&::-webkit-slider-thumb]:transition-transform",
+ "hover:[&::-webkit-slider-thumb]:scale-110"
+ )}
+ />
+
+ );
+}
diff --git a/apps/editor/src/widgets/right-sidebar/ui/atoms/TextInput.tsx b/apps/editor/src/widgets/right-sidebar/ui/atoms/TextInput.tsx
new file mode 100644
index 0000000..6c30e80
--- /dev/null
+++ b/apps/editor/src/widgets/right-sidebar/ui/atoms/TextInput.tsx
@@ -0,0 +1,23 @@
+"use client";
+
+interface TextInputProps {
+ id?: string;
+ name?: string;
+ value: string;
+ onChange: (val: string) => void;
+ placeholder?: string;
+}
+
+export default function TextInput({ id, name, value, onChange, placeholder }: TextInputProps) {
+ return (
+ onChange(e.target.value)}
+ placeholder={placeholder}
+ className="flex w-full h-[33px] items-center px-3 py-2 rounded-[6px] border border-[#E4E4E7] bg-white font-inter font-normal text-[14px] leading-none text-zinc-900 placeholder:text-[#A1A1AA] outline-none focus:border-zinc-400 transition-colors"
+ />
+ );
+}
diff --git a/apps/editor/src/widgets/right-sidebar/ui/atoms/ToggleButtonGroup.tsx b/apps/editor/src/widgets/right-sidebar/ui/atoms/ToggleButtonGroup.tsx
new file mode 100644
index 0000000..786cf18
--- /dev/null
+++ b/apps/editor/src/widgets/right-sidebar/ui/atoms/ToggleButtonGroup.tsx
@@ -0,0 +1,50 @@
+"use client";
+
+import { cn } from "@repo/utils";
+
+interface ToggleOption {
+ label: string;
+ value: string;
+}
+
+interface ToggleButtonGroupProps {
+ options: ToggleOption[];
+ value: string | string[];
+ onChange: (val: string) => void;
+ size?: "single" | "small";
+}
+
+export default function ToggleButtonGroup({
+ options,
+ value,
+ onChange,
+ size = "single",
+}: ToggleButtonGroupProps) {
+ const widthClass = size === "small" ? "w-[65px]" : "w-[140px]";
+
+ return (
+
+ {options.map((opt) => {
+ const isActive = Array.isArray(value)
+ ? value.includes(opt.value)
+ : value === opt.value;
+
+ return (
+
+ );
+ })}
+
+ );
+}
diff --git a/apps/editor/src/widgets/right-sidebar/ui/panels/ButtonPanel.tsx b/apps/editor/src/widgets/right-sidebar/ui/panels/ButtonPanel.tsx
new file mode 100644
index 0000000..ad77e53
--- /dev/null
+++ b/apps/editor/src/widgets/right-sidebar/ui/panels/ButtonPanel.tsx
@@ -0,0 +1,40 @@
+"use client";
+
+import { ButtonNode } from "@repo/ui/types/nodes";
+import { useUpdateNode } from "@/stores/useEditorStore";
+import SidebarItem from "../atoms/SidebarItem";
+import TextInput from "../atoms/TextInput";
+import LayoutSection from "../sections/LayoutSection";
+
+interface ButtonPanelProps {
+ node: ButtonNode;
+}
+
+export default function ButtonPanel({ node }: ButtonPanelProps) {
+ const updateNode = useUpdateNode();
+
+ const handlePropChange = (key: string, value: string | number | boolean | object) => {
+ updateNode(node.id, { props: { ...node.props, [key]: value } });
+ };
+
+ return (
+
+ {/* Label Section */}
+
+ handlePropChange("text", val)}
+ placeholder="Enter button text..."
+ />
+
+
+ {/* Common Layout Section */}
+
+
+ {/* Button Specific Sections (State, Hover, Trigger etc.) */}
+
+ Button specialized settings (Hover, Trigger) will be added here.
+
+
+
+
+ updateNode(node.id, { props: { ...node.props, alt: val } })
+ }
+ placeholder="Image description..."
+ />
+
+
+
+ );
+}
diff --git a/apps/editor/src/widgets/right-sidebar/ui/panels/TextPanel.tsx b/apps/editor/src/widgets/right-sidebar/ui/panels/TextPanel.tsx
new file mode 100644
index 0000000..f66f55a
--- /dev/null
+++ b/apps/editor/src/widgets/right-sidebar/ui/panels/TextPanel.tsx
@@ -0,0 +1,161 @@
+"use client";
+
+import { TextNode } from "@repo/ui/types/nodes";
+import { useUpdateNode } from "@/stores/useEditorStore";
+import SidebarItem from "../atoms/SidebarItem";
+import TextInput from "../atoms/TextInput";
+import SelectInput from "../atoms/SelectInput";
+import NumberInput from "../atoms/NumberInput";
+import ColorInput from "../atoms/ColorInput";
+import ToggleButtonGroup from "../atoms/ToggleButtonGroup";
+import ControlRow from "../atoms/ControlRow";
+import AlignPicker from "../atoms/AlignPicker";
+
+interface TextPanelProps {
+ node: TextNode;
+}
+
+export default function TextPanel({ node }: TextPanelProps) {
+ const updateNode = useUpdateNode();
+
+ const handlePropChange = (key: string, value: string | number | boolean | object) => {
+ updateNode(node.id, { props: { ...node.props, [key]: value } });
+ };
+
+ const handleStyleChange = (key: string, value: string | number | boolean | object) => {
+ updateNode(node.id, { style: { ...node.style, [key]: value } });
+ };
+
+ return (
+
+ {/* 1. Text Content - Added as per request */}
+
+ handlePropChange("text", val)}
+ placeholder="Enter text..."
+ />
+
+
+ {/* 2. Font Family */}
+
+ handleStyleChange("fontFamily", val)}
+ />
+
+
+ {/* 3. Size & Weight */}
+
+
+ handleStyleChange("fontSize", `${val}px`)}
+ />
+
+
+ handleStyleChange("fontWeight", val)}
+ />
+
+
+
+ {/* 4. Color */}
+
+ handleStyleChange("color", val)}
+ />
+
+
+ {/* 5. Style (Italic, Underline, Strike) */}
+
+ v !== "" && v !== "none")}
+ options={[
+ { label: "I", value: "italic" },
+ { label: "U", value: "underline" },
+ { label: "S", value: "line-through" },
+ ]}
+ onChange={(val) => {
+ if (val === "italic") {
+ handleStyleChange("fontStyle", node.style.fontStyle === "italic" ? "normal" : "italic");
+ } else {
+ handleStyleChange("textDecoration", node.style.textDecoration === val ? "none" : val);
+ }
+ }}
+ />
+
+
+ {/* 6. Alignment (Horizontal & Vertical) */}
+
+ handleStyleChange("justifyContent", val)}
+ />
+
+
+
+ handleStyleChange("alignItems", val)}
+ />
+
+
+ {/* 7. Line Height & Letter Spacing */}
+
+
+ handleStyleChange("lineHeight", `${val}%`)}
+ />
+
+
+ handleStyleChange("letterSpacing", `${val}px`)}
+ />
+
+
+
+ {/* 8. Heading Level */}
+
+ handlePropChange("level", val)}
+ />
+
+
+ {/* 헤더 */}
+
+
+ {/* 본문 */}
+ {isOpen && (
+
+ {children}
+
+ )}
+