테마 적용

2025-12-09 18:53:21 +09:00
parent 9d8c4538c7
commit 676e58cad7
71 changed files with 3394 additions and 498 deletions
@@ -18,12 +18,12 @@ export function FormSelectPropertiesPanel({ block, selectedBlockId, updateBlock

  return (
    <div className="space-y-3 text-xs">
-      <h3 className="text-[11px] font-semibold text-slate-200">셀렉트 필드</h3>
+      <h3 className="text-[11px] font-semibold text-slate-800 dark:text-slate-200">셀렉트 필드</h3>

      <label className="flex flex-col gap-1">
-        <span className="text-slate-400">라벨 타입</span>
+        <span className="text-slate-500 dark: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"
+          className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
          value={selectProps.labelMode ?? "text"}
          onChange={(e) =>
            updateBlock(selectedBlockId, {
@@ -37,9 +37,9 @@ export function FormSelectPropertiesPanel({ block, selectedBlockId, updateBlock
      </label>

      <label className="flex flex-col gap-1">
-        <span className="text-slate-400">라벨 표시 방식</span>
+        <span className="text-slate-500 dark: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"
+          className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
          value={labelDisplay}
          onChange={(e) =>
            updateBlock(selectedBlockId, {
@@ -53,10 +53,10 @@ export function FormSelectPropertiesPanel({ block, selectedBlockId, updateBlock
      </label>

      {labelDisplay === "visible" && (
-        <label className="flex flex-col gap-1 text-[11px] text-slate-400">
+        <label className="flex flex-col gap-1 text-[11px] text-slate-500 dark: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"
+            className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
            value={selectProps.labelLayout ?? "stacked"}
            onChange={(e) =>
              updateBlock(selectedBlockId, {
@@ -93,9 +93,9 @@ export function FormSelectPropertiesPanel({ block, selectedBlockId, updateBlock
      )}

      <label className="flex flex-col gap-1">
-        <span className="text-slate-400">필드 라벨</span>
+        <span className="text-slate-500 dark:text-slate-400">필드 라벨</span>
        <input
-          className="w-full rounded border border-slate-700 bg-slate-950 px-2 py-1 text-xs outline-none focus:border-sky-500"
+          className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
          value={selectProps.label ?? ""}
          onChange={(e) =>
            updateBlock(selectedBlockId, {
@@ -106,9 +106,9 @@ export function FormSelectPropertiesPanel({ block, selectedBlockId, updateBlock
      </label>

      <label className="flex flex-col gap-1">
-        <span className="text-slate-400">전송 키</span>
+        <span className="text-slate-500 dark:text-slate-400">전송 키</span>
        <input
-          className="w-full rounded border border-slate-700 bg-slate-950 px-2 py-1 text-xs outline-none focus:border-sky-500"
+          className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
          value={selectProps.formFieldName ?? ""}
          onChange={(e) =>
            updateBlock(selectedBlockId, {
@@ -120,10 +120,10 @@ export function FormSelectPropertiesPanel({ block, selectedBlockId, updateBlock

      <div className="space-y-2">
        <div className="flex items-center justify-between">
-          <span className="text-slate-400">옵션</span>
+          <span className="text-slate-500 dark:text-slate-400">옵션</span>
          <button
            type="button"
-            className="rounded border border-slate-700 bg-slate-900 px-2 py-0.5 text-[10px] text-slate-200 hover:bg-slate-800"
+            className="rounded border border-slate-300 bg-white px-2 py-0.5 text-[10px] text-slate-900 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:hover:bg-slate-800"
            onClick={() => {
              const next = Array.isArray((selectProps as any).options)
                ? [...(selectProps as any).options]
@@ -143,9 +143,9 @@ export function FormSelectPropertiesPanel({ block, selectedBlockId, updateBlock
        <div className="space-y-2">
          {(((selectProps as any).options ?? []) as any[]).map((opt, index) => (
            <div key={opt.value ?? index} className="space-y-1 rounded border border-slate-800 p-2">
-              <div className="flex items-center gap-1">
+              <div className="grid grid-cols-[minmax(0,1fr)_minmax(0,1fr)_auto] items-center gap-1">
                <input
-                  className="flex-1 rounded border border-slate-700 bg-slate-950 px-2 py-1 text-[11px] outline-none focus:border-sky-500"
+                  className="flex-1 rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
                  placeholder="라벨"
                  value={opt.label ?? ""}
                  onChange={(e) => {
@@ -160,7 +160,7 @@ export function FormSelectPropertiesPanel({ block, selectedBlockId, updateBlock
                  }}
                />
                <input
-                  className="flex-1 rounded border border-slate-700 bg-slate-950 px-2 py-1 text-[11px] outline-none focus:border-sky-500"
+                  className="flex-1 rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
                  placeholder="값(value)"
                  value={opt.value ?? ""}
                  onChange={(e) => {
@@ -176,7 +176,7 @@ export function FormSelectPropertiesPanel({ block, selectedBlockId, updateBlock
                />
                <button
                  type="button"
-                  className="h-7 w-7 rounded border border-slate-700 bg-slate-950 text-[10px] text-slate-300 hover:bg-red-900/60 hover:border-red-700"
+                  className="h-7 w-7 rounded border border-slate-300 bg-white text-[10px] text-slate-900 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:hover:bg-red-900/60 dark:hover:border-red-700"
                  onClick={() => {
                    const next = (((selectProps as any).options ?? []) as any[]).filter((_, i) => i !== index);
                    updateBlock(selectedBlockId, {
@@ -196,7 +196,7 @@ export function FormSelectPropertiesPanel({ block, selectedBlockId, updateBlock
        <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>
+        <h4 className="text-[11px] font-semibold text-slate-800 dark:text-slate-200">필드 스타일</h4>
        <NumericPropertyControl
          label="셀렉트 텍스트 크기 (px)"
          unitLabel="(px)"
@@ -270,10 +270,10 @@ export function FormSelectPropertiesPanel({ block, selectedBlockId, updateBlock
            } as any);
          }}
        />
-        <label className="flex flex-col gap-1 text-[11px] text-slate-400">
+        <label className="flex flex-col gap-1 text-[11px] text-slate-500 dark: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"
+            className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
            value={selectProps.widthMode ?? "full"}
            onChange={(e) =>
              updateBlock(selectedBlockId, {
@@ -353,7 +353,7 @@ export function FormSelectPropertiesPanel({ block, selectedBlockId, updateBlock
          value={
            selectProps.textColorCustom && selectProps.textColorCustom.trim() !== ""
              ? selectProps.textColorCustom
-              : "#f9fafb"
+              : ""
          }
          onChange={(hex) => {
            updateBlock(selectedBlockId, {
@@ -374,7 +374,7 @@ export function FormSelectPropertiesPanel({ block, selectedBlockId, updateBlock
          value={
            selectProps.fillColorCustom && selectProps.fillColorCustom.trim() !== ""
              ? selectProps.fillColorCustom
-              : TEXT_COLOR_PALETTE[0]?.color ?? "#0ea5e9"
+              : ""
          }
          onChange={(hex) => {
            updateBlock(selectedBlockId, {
@@ -395,7 +395,7 @@ export function FormSelectPropertiesPanel({ block, selectedBlockId, updateBlock
          value={
            selectProps.strokeColorCustom && selectProps.strokeColorCustom.trim() !== ""
              ? selectProps.strokeColorCustom
-              : TEXT_COLOR_PALETTE[0]?.color ?? "#0ea5e9"
+              : ""
          }
          onChange={(hex) => {
            updateBlock(selectedBlockId, {