invyone/frontend/components/screen/StyleEditor.tsx

"use client";

import { useState, useEffect } from "react";
import { ComponentStyle } from "@/types/screen";
import { ColorPickerWithTransparent } from "./common/ColorPickerWithTransparent";
import {
  CPSection,
  CPRow,
  CPText,
  CPSelect,
} from "@/components/v2/config-panels/_shared/cp";

interface StyleEditorProps {
  style: ComponentStyle;
  onStyleChange: (style: ComponentStyle) => void;
  className?: string;
}

export default function StyleEditor({ style, onStyleChange, className }: StyleEditorProps) {
  const [localStyle, setLocalStyle] = useState<ComponentStyle>(style || {});

  useEffect(() => {
    setLocalStyle(style || {});
  }, [style]);

  const handleStyleChange = (property: keyof ComponentStyle, value: any) => {
    const newStyle = { ...localStyle, [property]: value };
    setLocalStyle(newStyle);
    onStyleChange(newStyle);
  };

  // 숫자만 입력했을 때 자동으로 px 붙여주기
  const handlePxBlur = (property: keyof ComponentStyle) => {
    const val = localStyle[property];
    if (val && /^\d+(\.\d+)?$/.test(String(val))) {
      handleStyleChange(property, `${val}px`);
    }
  };

  return (
    <div className={className}>
      {/* 테두리 */}
      <CPSection title="테두리">
        <CPRow label="두께">
          <CPText
            mono
            value={localStyle.borderWidth || ""}
            onChange={(v) => handleStyleChange("borderWidth", v)}
            onBlur={() => handlePxBlur("borderWidth")}
            placeholder="1px"
          />
        </CPRow>
        <CPRow label="스타일">
          <CPSelect
            value={localStyle.borderStyle || "solid"}
            onChange={(v) => handleStyleChange("borderStyle", v)}
          >
            <option value="solid">실선</option>
            <option value="dashed">파선</option>
            <option value="dotted">점선</option>
            <option value="none">없음</option>
          </CPSelect>
        </CPRow>
        <CPRow label="색상">
          <ColorPickerWithTransparent
            value={localStyle.borderColor}
            onChange={(value) => handleStyleChange("borderColor", value)}
            defaultColor="#e5e7eb"
            placeholder="#e5e7eb"
          />
        </CPRow>
        <CPRow label="모서리">
          <CPText
            mono
            value={localStyle.borderRadius || ""}
            onChange={(v) => handleStyleChange("borderRadius", v)}
            onBlur={() => handlePxBlur("borderRadius")}
            placeholder="5px"
          />
        </CPRow>
      </CPSection>

      {/* 배경 */}
      <CPSection title="배경">
        <CPRow label="색상">
          <ColorPickerWithTransparent
            value={localStyle.backgroundColor}
            onChange={(value) => handleStyleChange("backgroundColor", value)}
            defaultColor="#ffffff"
            placeholder="#ffffff"
          />
        </CPRow>
        <CPRow label="이미지" help="CSS url() — 고급 사용자 전용">
          <CPText
            value={localStyle.backgroundImage || ""}
            onChange={(v) => handleStyleChange("backgroundImage", v)}
            placeholder="url('image.jpg')"
          />
        </CPRow>
      </CPSection>

      {/* 텍스트 */}
      <CPSection title="텍스트">
        <CPRow label="색상">
          <ColorPickerWithTransparent
            value={localStyle.color}
            onChange={(value) => handleStyleChange("color", value)}
            defaultColor="#000000"
            placeholder="#000000"
          />
        </CPRow>
        <CPRow label="크기">
          <CPText
            mono
            value={localStyle.fontSize || ""}
            onChange={(v) => handleStyleChange("fontSize", v)}
            onBlur={() => handlePxBlur("fontSize")}
            placeholder="14px"
          />
        </CPRow>
        <CPRow label="굵기">
          <CPSelect
            value={localStyle.fontWeight || "normal"}
            onChange={(v) => handleStyleChange("fontWeight", v)}
          >
            <option value="normal">보통</option>
            <option value="bold">굵게</option>
            <option value="100">100</option>
            <option value="400">400</option>
            <option value="500">500</option>
            <option value="600">600</option>
            <option value="700">700</option>
          </CPSelect>
        </CPRow>
        <CPRow label="정렬">
          <CPSelect
            value={localStyle.textAlign || "left"}
            onChange={(v) => handleStyleChange("textAlign", v)}
          >
            <option value="left">왼쪽</option>
            <option value="center">가운데</option>
            <option value="right">오른쪽</option>
            <option value="justify">양쪽</option>
          </CPSelect>
        </CPRow>
      </CPSection>
    </div>
  );
}