이미지 파일 업로드 기능

2025-11-23 19:07:41 +09:00
parent 8ea8a186a0
commit 7a8ad7c057
77 changed files with 3206 additions and 124 deletions
@@ -0,0 +1,134 @@
+"use client";
+
+import { useEditorStore } from "@/features/editor/state/editorStore";
+import type { CanvasPreset, ProjectConfig } from "@/features/editor/state/editorStore";
+import { NumericPropertyControl } from "@/features/editor/components/NumericPropertyControl";
+import { ColorPickerField, TEXT_COLOR_PALETTE } from "@/features/editor/components/ColorPickerField";
+
+export function ProjectPropertiesPanel() {
+  const projectConfig = useEditorStore((state) => (state as any).projectConfig as ProjectConfig);
+  const updateProjectConfig = useEditorStore(
+    (state) => (state as any).updateProjectConfig as (partial: Partial<ProjectConfig>) => void,
+  );
+
+  const handleChangePreset = (preset: CanvasPreset) => {
+    if (preset === "mobile") {
+      updateProjectConfig({ canvasPreset: preset, canvasWidthPx: 390 });
+    } else if (preset === "tablet") {
+      updateProjectConfig({ canvasPreset: preset, canvasWidthPx: 768 });
+    } else if (preset === "desktop") {
+      updateProjectConfig({ canvasPreset: preset, canvasWidthPx: 1200 });
+    } else if (preset === "full") {
+      updateProjectConfig({ canvasPreset: preset, canvasWidthPx: undefined });
+    } else {
+      updateProjectConfig({ canvasPreset: preset });
+    }
+  };
+
+  const handleChangeCanvasWidth = (value: number) => {
+    if (value === 390) {
+      handleChangePreset("mobile");
+    } else if (value === 768) {
+      handleChangePreset("tablet");
+    } else if (value === 1200) {
+      handleChangePreset("desktop");
+    } else {
+      updateProjectConfig({ canvasPreset: "custom", canvasWidthPx: value });
+    }
+  };
+
+  return (
+    <div className="space-y-4 text-xs text-slate-200">
+      <h3 className="text-sm font-medium text-slate-100">프로젝트 설정</h3>
+
+      <div className="space-y-1">
+        <label className="flex flex-col gap-1">
+          <span className="text-slate-400">프로젝트 제목</span>
+          <input
+            className="w-full rounded border border-slate-700 bg-slate-900 px-2 py-1 text-xs outline-none focus:border-sky-500"
+            aria-label="프로젝트 제목"
+            value={projectConfig.title}
+            onChange={(e) => updateProjectConfig({ title: e.target.value })}
+          />
+        </label>
+      </div>
+
+      <div className="space-y-1">
+        <label className="flex flex-col gap-1">
+          <span className="text-slate-400">프로젝트 주소 (slug)</span>
+          <input
+            className="w-full rounded border border-slate-700 bg-slate-900 px-2 py-1 text-xs outline-none focus:border-sky-500"
+            aria-label="프로젝트 주소 (slug)"
+            value={projectConfig.slug}
+            onChange={(e) => updateProjectConfig({ slug: e.target.value })}
+          />
+        </label>
+      </div>
+
+      <div className="space-y-1">
+        <NumericPropertyControl
+          label="캔버스 너비"
+          unitLabel="(px)"
+          value={projectConfig.canvasWidthPx ?? 1024}
+          min={320}
+          max={1920}
+          step={10}
+          presets={[
+            { id: "mobile", label: "모바일 (390px)", value: 390 },
+            { id: "tablet", label: "태블릿 (768px)", value: 768 },
+            { id: "desktop", label: "데스크톱 (1200px)", value: 1200 },
+          ]}
+          onChangeValue={handleChangeCanvasWidth}
+        />
+      </div>
+
+      <div className="space-y-1">
+        <ColorPickerField
+          label="캔버스 배경색"
+          ariaLabelColorInput="캔버스 배경색"
+          ariaLabelHexInput="캔버스 배경색 HEX"
+          value={projectConfig.canvasBgColorHex ?? "#020617"}
+          onChange={(hex) => updateProjectConfig({ canvasBgColorHex: hex })}
+          palette={TEXT_COLOR_PALETTE}
+        />
+      </div>
+
+      <div className="space-y-1">
+        <ColorPickerField
+          label="페이지 배경색"
+          ariaLabelColorInput="페이지 배경색"
+          ariaLabelHexInput="페이지 배경색 HEX"
+          value={projectConfig.bodyBgColorHex ?? "#020617"}
+          onChange={(hex) => updateProjectConfig({ bodyBgColorHex: hex })}
+          palette={TEXT_COLOR_PALETTE}
+        />
+      </div>
+
+      <div className="space-y-1">
+        <label className="flex flex-col gap-1">
+          <span className="text-slate-400">페이지 head HTML</span>
+          <textarea
+            className="w-full rounded border border-slate-700 bg-slate-900 px-2 py-1 text-[11px] font-mono outline-none focus:border-sky-500 min-h-[72px]"
+            aria-label="페이지 head HTML"
+            value={projectConfig.headHtml ?? ""}
+            onChange={(e) => updateProjectConfig({ headHtml: e.target.value })}
+            placeholder="예: &lt;meta name=&quot;description&quot; content=&quot;...&quot; /&gt;"
+          />
+        </label>
+      </div>
+
+      <div className="space-y-1">
+        <label className="flex flex-col gap-1">
+          <span className="text-slate-400">추적 스크립트</span>
+          <textarea
+            className="w-full rounded border border-slate-700 bg-slate-900 px-2 py-1 text-[11px] font-mono outline-none focus:border-sky-500 min-h-[72px]"
+            aria-label="추적 스크립트"
+            value={projectConfig.trackingScript ?? ""}
+            onChange={(e) => updateProjectConfig({ trackingScript: e.target.value })}
+            placeholder="예: &lt;script&gt;/* GA, Pixel 코드 */&lt;/script&gt;"
+          />
+        </label>
+      </div>
+    </div>
+  );
+}