TDD,E2E 개선, 미적용 스타일 개선

2025-12-07 09:52:42 +09:00
parent e726f43f7c
commit a5b432fb7b
167 changed files with 7397 additions and 663 deletions
@@ -14,6 +14,7 @@ export function FormCheckboxPropertiesPanel({ block, selectedBlockId, updateBloc
  if (!selectedBlockId || block.id !== selectedBlockId) return null;

  const checkboxProps = block.props as FormCheckboxBlockProps;
+  const groupLabelDisplay = checkboxProps.groupLabelDisplay ?? "visible";

  return (
    <div className="space-y-3 text-xs">
@@ -35,6 +36,78 @@ export function FormCheckboxPropertiesPanel({ block, selectedBlockId, updateBloc
        </select>
      </label>

+      <label className="flex flex-col gap-1">
+        <span className="text-slate-400">그룹 타이틀 표시 방식</span>
+        <select
+          className="w-full rounded border border-slate-700 bg-slate-950 px-2 py-1 text-[11px] outline-none focus:border-sky-500"
+          value={groupLabelDisplay}
+          onChange={(e) =>
+            updateBlock(selectedBlockId, {
+              groupLabelDisplay: e.target.value,
+            } as any)
+          }
+        >
+          <option value="visible">표시 (기본)</option>
+          <option value="hidden">숨김</option>
+        </select>
+      </label>
+
+      {groupLabelDisplay === "visible" && (
+        <label className="flex flex-col gap-1 text-[11px] text-slate-400">
+          <span>레이아웃</span>
+          <select
+            className="w-full rounded border border-slate-700 bg-slate-950 px-2 py-1 text-[11px] outline-none focus:border-sky-500"
+            value={checkboxProps.labelLayout ?? "stacked"}
+            onChange={(e) =>
+              updateBlock(selectedBlockId, {
+                labelLayout: e.target.value,
+              } as any)
+            }
+          >
+            <option value="stacked">세로 (기본)</option>
+            <option value="inline">가로 (인라인)</option>
+          </select>
+        </label>
+      )}
+
+      <label className="flex flex-col gap-1 text-[11px] text-slate-400">
+        <span>옵션 레이아웃</span>
+        <select
+          className="w-full rounded border border-slate-700 bg-slate-950 px-2 py-1 text-[11px] outline-none focus:border-sky-500"
+          value={checkboxProps.optionLayout ?? "stacked"}
+          onChange={(e) =>
+            updateBlock(selectedBlockId, {
+              optionLayout: e.target.value,
+            } as any)
+          }
+        >
+          <option value="stacked">세로 (기본)</option>
+          <option value="inline">가로 (인라인)</option>
+        </select>
+      </label>
+
+      {groupLabelDisplay === "visible" && (checkboxProps.labelLayout ?? "stacked") === "inline" && (
+        <NumericPropertyControl
+          label="라벨/필드 간격 (px)"
+          unitLabel="(px)"
+          value={typeof checkboxProps.labelGapPx === "number" ? checkboxProps.labelGapPx : 8}
+          min={0}
+          max={80}
+          step={2}
+          presets={[
+            { id: "tight", label: "타이트", value: 4 },
+            { id: "normal", label: "보통", value: 8 },
+            { id: "relaxed", label: "느슨", value: 12 },
+            { id: "extra", label: "넓게", value: 16 },
+          ]}
+          onChangeValue={(v) =>
+            updateBlock(selectedBlockId, {
+              labelGapPx: v,
+            } as any)
+          }
+        />
+      )}
+
      <label className="flex flex-col gap-1">
        <span className="text-slate-400">그룹 타이틀</span>
        <input
@@ -320,17 +393,7 @@ export function FormCheckboxPropertiesPanel({ block, selectedBlockId, updateBloc
      </div>

      <label className="inline-flex items-center gap-2">
-        <input
-          type="checkbox"
-          className="h-3 w-3 rounded border border-slate-600 bg-slate-900"
-          checked={Boolean(checkboxProps.required)}
-          onChange={(e) =>
-            updateBlock(selectedBlockId, {
-              required: e.target.checked,
-            } as any)
-          }
-        />
-        <span className="text-slate-400">필수 필드</span>
+        <span className="text-slate-500">필수 여부는 폼 컨트롤러에서 설정합니다.</span>
      </label>

      <div className="mt-3 space-y-2 border-t border-slate-800 pt-3">
@@ -245,6 +245,7 @@ export function FormControllerPanel({ block, blocks, selectedBlockId, updateBloc
                : labelText || fieldId;

              const checked = (formProps.fieldIds ?? []).includes(fieldId);
+              const required = (formProps.requiredFieldIds ?? []).includes(fieldId);

              return (
                <label
@@ -266,7 +267,25 @@ export function FormControllerPanel({ block, blocks, selectedBlockId, updateBloc
                      } as any);
                    }}
                  />
-                  <span>{displayLabel}</span>
+                  <span className="flex-1 truncate">{displayLabel}</span>
+                  <label className="inline-flex items-center gap-1 text-[11px] text-slate-400">
+                    <input
+                      type="checkbox"
+                      className="h-3 w-3 rounded border-slate-600 bg-slate-950"
+                      checked={required}
+                      onChange={(e) => {
+                        const current = formProps.requiredFieldIds ?? [];
+                        const next = e.target.checked
+                          ? Array.from(new Set([...current, fieldId]))
+                          : current.filter((id) => id !== fieldId);
+
+                        updateBlock(selectedBlockId, {
+                          requiredFieldIds: next,
+                        } as any);
+                      }}
+                    />
+                    <span>필수</span>
+                  </label>
                </label>
              );
            })}
@@ -14,6 +14,7 @@ export function FormInputPropertiesPanel({ block, selectedBlockId, updateBlock }
 	if (!selectedBlockId || block.id !== selectedBlockId || block.type !== "formInput") return null;

 	const inputProps = block.props as FormInputBlockProps;
+	const labelDisplay = inputProps.labelDisplay ?? "visible";

 	return (
 		<div className="space-y-3 text-xs">
@@ -45,6 +46,60 @@ export function FormInputPropertiesPanel({ block, selectedBlockId, updateBlock }
 					}
 				/>
 			</label>
+			<label className="flex flex-col gap-1">
+				<span className="text-slate-400">라벨 표시 방식</span>
+				<select
+					className="w-full rounded border border-slate-700 bg-slate-950 px-2 py-1 text-[11px] outline-none focus:border-sky-500"
+					value={labelDisplay}
+					onChange={(e) =>
+						updateBlock(selectedBlockId, {
+							labelDisplay: e.target.value,
+						} as any)
+					}
+				>
+					<option value="visible">표시 (기본)</option>
+					<option value="hidden">숨김</option>
+					<option value="floating">플로팅 라벨</option>
+				</select>
+			</label>
+			{labelDisplay === "visible" && (
+				<label className="flex flex-col gap-1 text-[11px] text-slate-400">
+					<span>레이아웃</span>
+					<select
+						className="w-full rounded border border-slate-700 bg-slate-950 px-2 py-1 text-[11px] outline-none focus:border-sky-500"
+						value={inputProps.labelLayout ?? "stacked"}
+						onChange={(e) =>
+							updateBlock(selectedBlockId, {
+								labelLayout: e.target.value,
+							} as any)
+						}
+					>
+						<option value="stacked">세로 (기본)</option>
+						<option value="inline">가로 (인라인)</option>
+					</select>
+				</label>
+			)}
+			{labelDisplay === "visible" && (inputProps.labelLayout ?? "stacked") === "inline" && (
+				<NumericPropertyControl
+					label="라벨/필드 간격 (px)"
+					unitLabel="(px)"
+					value={typeof inputProps.labelGapPx === "number" ? inputProps.labelGapPx : 8}
+					min={0}
+					max={80}
+					step={2}
+					presets={[
+						{ id: "tight", label: "타이트", value: 4 },
+						{ id: "normal", label: "보통", value: 8 },
+						{ id: "relaxed", label: "느슨", value: 12 },
+						{ id: "extra", label: "넓게", value: 16 },
+					]}
+					onChangeValue={(v) =>
+						updateBlock(selectedBlockId, {
+							labelGapPx: v,
+						} as any)
+					}
+				/>
+			)}
 			{inputProps.labelMode === "image" && (
 				<>
 					<label className="flex flex-col gap-1">
@@ -116,17 +171,7 @@ export function FormInputPropertiesPanel({ block, selectedBlockId, updateBlock }
 				/>
 			</label>
 			<label className="inline-flex items-center gap-2">
-				<input
-					type="checkbox"
-					className="h-3 w-3 rounded border border-slate-600 bg-slate-900"
-					checked={Boolean(inputProps.required)}
-					onChange={(e) =>
-						updateBlock(selectedBlockId, {
-							required: e.target.checked,
-						} as any)
-					}
-				/>
-				<span className="text-slate-400">필수 필드</span>
+				<span className="text-slate-500">필수 여부는 폼 컨트롤러에서 설정합니다.</span>
 			</label>
 			<div className="mt-3 space-y-2 border-t border-slate-800 pt-3">
 				<h4 className="text-[11px] font-semibold text-slate-200">필드 스타일</h4>
@@ -219,42 +264,6 @@ export function FormInputPropertiesPanel({ block, selectedBlockId, updateBlock }
 						<option value="right">오른쪽</option>
 					</select>
 				</label>
-				<label className="flex flex-col gap-1 text-[11px] text-slate-400">
-					<span>레이아웃</span>
-					<select
-						className="w-full rounded border border-slate-700 bg-slate-950 px-2 py-1 text-[11px] outline-none focus:border-sky-500"
-						value={inputProps.labelLayout ?? "stacked"}
-						onChange={(e) =>
-							updateBlock(selectedBlockId, {
-								labelLayout: e.target.value,
-							} as any)
-						}
-					>
-						<option value="stacked">세로 (기본)</option>
-						<option value="inline">가로 (인라인)</option>
-					</select>
-				</label>
-				{(inputProps.labelLayout ?? "stacked") === "inline" && (
-					<NumericPropertyControl
-						label="라벨/필드 간격 (px)"
-						unitLabel="(px)"
-						value={typeof inputProps.labelGapPx === "number" ? inputProps.labelGapPx : 8}
-						min={0}
-						max={80}
-						step={2}
-						presets={[
-							{ id: "tight", label: "타이트", value: 4 },
-							{ id: "normal", label: "보통", value: 8 },
-							{ id: "relaxed", label: "느슨", value: 12 },
-							{ id: "extra", label: "넓게", value: 16 },
-						]}
-						onChangeValue={(v) =>
-							updateBlock(selectedBlockId, {
-								labelGapPx: v,
-							} as any)
-						}
-					/>
-				)}
 				<label className="flex flex-col gap-1 text-[11px] text-slate-400">
 					<span>너비</span>
 					<select
@@ -271,26 +280,24 @@ export function FormInputPropertiesPanel({ block, selectedBlockId, updateBlock }
 						<option value="fixed">고정 값</option>
 					</select>
 				</label>
-				{(inputProps.widthMode ?? "full") === "fixed" && (
-					<NumericPropertyControl
-						label="필드 고정 너비"
-						unitLabel="(px)"
-						value={inputProps.widthPx ?? 240}
-						min={80}
-						max={800}
-						step={10}
-						presets={[
-							{ id: "sm", label: "작게", value: 200 },
-							{ id: "md", label: "보통", value: 280 },
-							{ id: "lg", label: "넓게", value: 360 },
-						]}
-						onChangeValue={(v) => {
-							updateBlock(selectedBlockId, {
-								widthPx: v,
-							} as any);
-						}}
-					/>
-				)}
+				<NumericPropertyControl
+					label="필드 고정 너비"
+					unitLabel="(px)"
+					value={inputProps.widthPx ?? 240}
+					min={80}
+					max={800}
+					step={10}
+					presets={[
+						{ id: "sm", label: "작게", value: 200 },
+						{ id: "md", label: "보통", value: 280 },
+						{ id: "lg", label: "넓게", value: 360 },
+					]}
+					onChangeValue={(v) => {
+						updateBlock(selectedBlockId, {
+							widthPx: v,
+						} as any);
+					}}
+				/>
 				<NumericPropertyControl
 					label="필드 가로 패딩 (px)"
 					unitLabel="(px)"
@@ -14,6 +14,7 @@ export function FormRadioPropertiesPanel({ block, selectedBlockId, updateBlock }
  if (!selectedBlockId || block.id !== selectedBlockId) return null;

  const radioProps = block.props as FormRadioBlockProps;
+  const groupLabelDisplay = radioProps.groupLabelDisplay ?? "visible";

  return (
    <div className="space-y-3 text-xs">
@@ -35,6 +36,78 @@ export function FormRadioPropertiesPanel({ block, selectedBlockId, updateBlock }
        </select>
      </label>

+      <label className="flex flex-col gap-1">
+        <span className="text-slate-400">그룹 타이틀 표시 방식</span>
+        <select
+          className="w-full rounded border border-slate-700 bg-slate-950 px-2 py-1 text-[11px] outline-none focus:border-sky-500"
+          value={groupLabelDisplay}
+          onChange={(e) =>
+            updateBlock(selectedBlockId, {
+              groupLabelDisplay: e.target.value,
+            } as any)
+          }
+        >
+          <option value="visible">표시 (기본)</option>
+          <option value="hidden">숨김</option>
+        </select>
+      </label>
+
+      {groupLabelDisplay === "visible" && (
+        <label className="flex flex-col gap-1 text-[11px] text-slate-400">
+          <span>그룹 타이틀 레이아웃</span>
+          <select
+            className="w-full rounded border border-slate-700 bg-slate-950 px-2 py-1 text-[11px] outline-none focus:border-sky-500"
+            value={radioProps.labelLayout ?? "stacked"}
+            onChange={(e) =>
+              updateBlock(selectedBlockId, {
+                labelLayout: e.target.value,
+              } as any)
+            }
+          >
+            <option value="stacked">세로 (기본)</option>
+            <option value="inline">가로 (인라인)</option>
+          </select>
+        </label>
+      )}
+
+      <label className="flex flex-col gap-1 text-[11px] text-slate-400">
+        <span>옵션 레이아웃</span>
+        <select
+          className="w-full rounded border border-slate-700 bg-slate-950 px-2 py-1 text-[11px] outline-none focus:border-sky-500"
+          value={radioProps.optionLayout ?? "stacked"}
+          onChange={(e) =>
+            updateBlock(selectedBlockId, {
+              optionLayout: e.target.value,
+            } as any)
+          }
+        >
+          <option value="stacked">세로 (기본)</option>
+          <option value="inline">가로 (인라인)</option>
+        </select>
+      </label>
+
+      {groupLabelDisplay === "visible" && (radioProps.labelLayout ?? "stacked") === "inline" && (
+        <NumericPropertyControl
+          label="라벨/필드 간격 (px)"
+          unitLabel="(px)"
+          value={typeof radioProps.labelGapPx === "number" ? radioProps.labelGapPx : 8}
+          min={0}
+          max={80}
+          step={2}
+          presets={[
+            { id: "tight", label: "타이트", value: 4 },
+            { id: "normal", label: "보통", value: 8 },
+            { id: "relaxed", label: "느슨", value: 12 },
+            { id: "extra", label: "넓게", value: 16 },
+          ]}
+          onChangeValue={(v) =>
+            updateBlock(selectedBlockId, {
+              labelGapPx: v,
+            } as any)
+          }
+        />
+      )}
+
      <label className="flex flex-col gap-1">
        <span className="text-slate-400">그룹 타이틀</span>
        <input
@@ -320,17 +393,7 @@ export function FormRadioPropertiesPanel({ block, selectedBlockId, updateBlock }
      </div>

      <label className="inline-flex items-center gap-2">
-        <input
-          type="checkbox"
-          className="h-3 w-3 rounded border border-slate-600 bg-slate-900"
-          checked={Boolean(radioProps.required)}
-          onChange={(e) =>
-            updateBlock(selectedBlockId, {
-              required: e.target.checked,
-            } as any)
-          }
-        />
-        <span className="text-slate-400">필수 필드</span>
+        <span className="text-slate-500">필수 여부는 폼 컨트롤러에서 설정합니다.</span>
      </label>

      <div className="mt-3 space-y-2 border-t border-slate-800 pt-3">
@@ -14,6 +14,7 @@ export function FormSelectPropertiesPanel({ block, selectedBlockId, updateBlock
  if (!selectedBlockId || block.id !== selectedBlockId) return null;

  const selectProps = block.props as FormSelectBlockProps;
+  const labelDisplay = selectProps.labelDisplay ?? "visible";

  return (
    <div className="space-y-3 text-xs">
@@ -35,6 +36,62 @@ export function FormSelectPropertiesPanel({ block, selectedBlockId, updateBlock
        </select>
      </label>

+      <label className="flex flex-col gap-1">
+        <span className="text-slate-400">라벨 표시 방식</span>
+        <select
+          className="w-full rounded border border-slate-700 bg-slate-950 px-2 py-1 text-[11px] outline-none focus:border-sky-500"
+          value={labelDisplay}
+          onChange={(e) =>
+            updateBlock(selectedBlockId, {
+              labelDisplay: e.target.value,
+            } as any)
+          }
+        >
+          <option value="visible">표시 (기본)</option>
+          <option value="hidden">숨김</option>
+        </select>
+      </label>
+
+      {labelDisplay === "visible" && (
+        <label className="flex flex-col gap-1 text-[11px] text-slate-400">
+          <span>레이아웃</span>
+          <select
+            className="w-full rounded border border-slate-700 bg-slate-950 px-2 py-1 text-[11px] outline-none focus:border-sky-500"
+            value={selectProps.labelLayout ?? "stacked"}
+            onChange={(e) =>
+              updateBlock(selectedBlockId, {
+                labelLayout: e.target.value,
+              } as any)
+            }
+          >
+            <option value="stacked">세로 (기본)</option>
+            <option value="inline">가로 (인라인)</option>
+          </select>
+        </label>
+      )}
+
+      {labelDisplay === "visible" && (selectProps.labelLayout ?? "stacked") === "inline" && (
+        <NumericPropertyControl
+          label="라벨/필드 간격 (px)"
+          unitLabel="(px)"
+          value={typeof selectProps.labelGapPx === "number" ? selectProps.labelGapPx : 8}
+          min={0}
+          max={80}
+          step={2}
+          presets={[
+            { id: "tight", label: "타이트", value: 4 },
+            { id: "normal", label: "보통", value: 8 },
+            { id: "relaxed", label: "느슨", value: 12 },
+            { id: "extra", label: "넓게", value: 16 },
+          ]}
+          onChangeValue={(v) =>
+            updateBlock(selectedBlockId, {
+              labelGapPx: v,
+            } as any)
+          }
+        />
+      )}
+
      <label className="flex flex-col gap-1">
        <span className="text-slate-400">필드 라벨</span>
        <input
@@ -136,17 +193,7 @@ export function FormSelectPropertiesPanel({ block, selectedBlockId, updateBlock
      </div>

      <label className="inline-flex items-center gap-2">
-        <input
-          type="checkbox"
-          className="h-3 w-3 rounded border border-slate-600 bg-slate-900"
-          checked={Boolean(selectProps.required)}
-          onChange={(e) =>
-            updateBlock(selectedBlockId, {
-              required: e.target.checked,
-            } as any)
-          }
-        />
-        <span className="text-slate-400">필수 필드</span>
+        <span className="text-slate-500">필수 여부는 폼 컨트롤러에서 설정합니다.</span>
      </label>
      <div className="mt-3 space-y-2 border-t border-slate-800 pt-3">
        <h4 className="text-[11px] font-semibold text-slate-200">필드 스타일</h4>