컴포넌트 잘림현상 수정

2025-10-23 15:06:00 +09:00
parent b104cd94f2
commit 70d2c96c80
10 changed files with 460 additions and 165 deletions
--- a/frontend/lib/registry/components/text-input/TextInputComponent.tsx
+++ b/frontend/lib/registry/components/text-input/TextInputComponent.tsx
@@ -51,6 +51,19 @@ export const TextInputComponent: React.FC<TextInputComponentProps> = ({
  // 숨김 상태 (props에서 전달받은 값 우선 사용)
  const isHidden = props.hidden !== undefined ? props.hidden : component.hidden || componentConfig.hidden || false;

+  // 디버깅: 컴포넌트 설정 확인
+  console.log("👻 텍스트 입력 컴포넌트 상태:", {
+    componentId: component.id,
+    label: component.label,
+    isHidden,
+    componentConfig: componentConfig,
+    readonly: componentConfig.readonly,
+    disabled: componentConfig.disabled,
+    required: componentConfig.required,
+    isDesignMode,
+    willRender: !(isHidden && !isDesignMode),
+  });
+
  // 자동생성된 값 상태
  const [autoGeneratedValue, setAutoGeneratedValue] = useState<string>("");

@@ -134,18 +147,22 @@ export const TextInputComponent: React.FC<TextInputComponentProps> = ({
    }
  }, [testAutoGeneration, isInteractive, component.columnName, component.value, formData, onFormDataChange]);

+  // 실제 화면에서 숨김 처리된 컴포넌트는 렌더링하지 않음
+  if (isHidden && !isDesignMode) {
+    return null;
+  }
+
  // 스타일 계산 (위치는 RealtimePreviewDynamic에서 처리하므로 제외)
  const componentStyle: React.CSSProperties = {
    width: "100%",
    height: "100%",
    ...component.style,
    ...style,
-    // 숨김 기능: 디자인 모드에서는 연하게, 실제 화면에서는 완전히 숨김
-    ...(isHidden && {
-      opacity: isDesignMode ? 0.4 : 0,
-      backgroundColor: isDesignMode ? "#f3f4f6" : "transparent",
-      pointerEvents: isDesignMode ? "auto" : "none",
-      display: isDesignMode ? "block" : "none",
+    // 숨김 기능: 편집 모드에서만 연하게 표시
+    ...(isHidden && isDesignMode && {
+      opacity: 0.4,
+      backgroundColor: "#f3f4f6",
+      pointerEvents: "auto",
    }),
  };

@@ -315,7 +332,7 @@ export const TextInputComponent: React.FC<TextInputComponentProps> = ({
  // 이메일 타입 전용 UI
  if (webType === "email") {
    return (
-      <div className={`relative w-full ${className || ""}`} {...safeDomProps}>
+      <div className={`relative w-full ${className || ""}`} style={componentStyle} {...safeDomProps}>
        {/* 라벨 렌더링 */}
        {component.label && component.style?.labelDisplay !== false && (
          <label className="absolute -top-6 left-0 text-sm font-medium text-slate-600">
@@ -417,7 +434,7 @@ export const TextInputComponent: React.FC<TextInputComponentProps> = ({
  // 전화번호 타입 전용 UI
  if (webType === "tel") {
    return (
-      <div className={`relative w-full ${className || ""}`} {...safeDomProps}>
+      <div className={`relative w-full ${className || ""}`} style={componentStyle} {...safeDomProps}>
        {/* 라벨 렌더링 */}
        {component.label && component.style?.labelDisplay !== false && (
          <label className="absolute -top-6 left-0 text-sm font-medium text-slate-600">
@@ -498,7 +515,7 @@ export const TextInputComponent: React.FC<TextInputComponentProps> = ({
  // URL 타입 전용 UI
  if (webType === "url") {
    return (
-      <div className={`relative w-full ${className || ""}`} {...safeDomProps}>
+      <div className={`relative w-full ${className || ""}`} style={componentStyle} {...safeDomProps}>
        {/* 라벨 렌더링 */}
        {component.label && component.style?.labelDisplay !== false && (
          <label className="absolute -top-6 left-0 text-sm font-medium text-slate-600">
@@ -553,7 +570,7 @@ export const TextInputComponent: React.FC<TextInputComponentProps> = ({
  // textarea 타입인 경우 별도 렌더링
  if (webType === "textarea") {
    return (
-      <div className={`relative w-full ${className || ""}`} {...safeDomProps}>
+      <div className={`relative w-full ${className || ""}`} style={componentStyle} {...safeDomProps}>
        {/* 라벨 렌더링 */}
        {component.label && component.style?.labelDisplay !== false && (
          <label className="absolute -top-6 left-0 text-sm font-medium text-slate-600">
@@ -594,7 +611,7 @@ export const TextInputComponent: React.FC<TextInputComponentProps> = ({
  }

  return (
-    <div className={`relative w-full ${className || ""}`} {...safeDomProps}>
+    <div className={`relative w-full ${className || ""}`} style={componentStyle} {...safeDomProps}>
      {/* 라벨 렌더링 */}
      {component.label && component.style?.labelDisplay !== false && (
        <label className="absolute -top-6 left-0 text-sm font-medium text-slate-600">
@@ -644,7 +661,15 @@ export const TextInputComponent: React.FC<TextInputComponentProps> = ({
        required={componentConfig.required || false}
        readOnly={componentConfig.readonly || (testAutoGeneration.enabled && testAutoGeneration.type !== "none")}
        className={`box-border h-full w-full max-w-full rounded-md border px-3 py-2 text-sm shadow-sm transition-all duration-200 outline-none ${isSelected ? "border-blue-500 ring-2 ring-blue-100" : "border-gray-300"} ${componentConfig.disabled ? "bg-gray-100 text-gray-400" : "bg-white text-gray-900"} placeholder:text-gray-400 focus:border-orange-500 focus:ring-2 focus:ring-orange-100 disabled:cursor-not-allowed`}
-        onClick={handleClick}
+        onClick={(e) => {
+          console.log("🖱️ Input 클릭됨:", {
+            componentId: component.id,
+            disabled: componentConfig.disabled,
+            readOnly: componentConfig.readonly,
+            autoGenEnabled: testAutoGeneration.enabled,
+          });
+          handleClick(e);
+        }}
        onDragStart={onDragStart}
        onDragEnd={onDragEnd}
        onChange={(e) => {
--- a/frontend/lib/registry/components/text-input/TextInputConfigPanel.tsx
+++ b/frontend/lib/registry/components/text-input/TextInputConfigPanel.tsx
@@ -47,41 +47,13 @@ export const TextInputConfigPanel: React.FC<TextInputConfigPanelProps> = ({ conf
        />
      </div>

-      {/* 공통 설정 */}
-      <div className="space-y-2">
-        <Label htmlFor="disabled">비활성화</Label>
-        <Checkbox
-          id="disabled"
-          checked={config.disabled || false}
-          onCheckedChange={(checked) => handleChange("disabled", checked)}
-        />
-      </div>
-
-      <div className="space-y-2">
-        <Label htmlFor="required">필수 입력</Label>
-        <Checkbox
-          id="required"
-          checked={config.required || false}
-          onCheckedChange={(checked) => handleChange("required", checked)}
-        />
-      </div>
-
-      <div className="space-y-2">
-        <Label htmlFor="readonly">읽기 전용</Label>
-        <Checkbox
-          id="readonly"
-          checked={config.readonly || false}
-          onCheckedChange={(checked) => handleChange("readonly", checked)}
-        />
-      </div>
-
      {/* 구분선 */}
      <div className="border-t pt-4">
        <div className="mb-3 text-sm font-medium">고급 기능</div>

        {/* 숨김 기능 */}
        <div className="space-y-2">
-          <Label htmlFor="hidden">숨김 (편집기에서는 연하게, 실제 화면에서는 숨김)</Label>
+          <Label htmlFor="hidden">숨김</Label>
          <Checkbox
            id="hidden"
            checked={config.hidden || false}