video 블록 및 리펙터링

2025-11-27 10:07:59 +09:00
parent 672cca5271
commit 48e13d2a75
223 changed files with 8979 additions and 2125 deletions
@@ -11,6 +11,34 @@ export type SectionPropertiesPanelProps = {
 };

 export function SectionPropertiesPanel({ sectionProps, selectedBlockId, updateBlock }: SectionPropertiesPanelProps) {
+  const backgroundSource: "none" | "url" | "upload" = (() => {
+    const src = sectionProps.backgroundImageSrc?.trim();
+    const type = sectionProps.backgroundImageSourceType;
+
+    if (type === "asset") return "upload";
+    if (type === "externalUrl") return "url";
+
+    if (src && src.startsWith("/api/image/")) return "upload";
+    if (src) return "url";
+
+    return "none";
+  })();
+
+  const positionMode: "preset" | "custom" = sectionProps.backgroundImagePositionMode ?? "preset";
+
+  const backgroundVideoSource: "none" | "url" | "upload" = (() => {
+    const src = sectionProps.backgroundVideoSrc?.trim();
+    const type = sectionProps.backgroundVideoSourceType;
+
+    if (type === "asset") return "upload";
+    if (type === "externalUrl") return "url";
+
+    if (src && src.startsWith("/api/video/")) return "upload";
+    if (src) return "url";
+
+    return "none";
+  })();
+
  return (
    <>
      {/* 섹션 배경: 커스텀 색상 피커만 사용 */}
@@ -28,6 +56,333 @@ export function SectionPropertiesPanel({ sectionProps, selectedBlockId, updateBl
        />
      </div>

+      {/* 섹션 배경 이미지 */}
+      <div className="mt-3 space-y-2 text-xs text-slate-400">
+        <label className="flex flex-col gap-1">
+          <span>배경 이미지 소스</span>
+          <select
+            className="w-full rounded border border-slate-700 bg-slate-900 px-2 py-1 text-[11px] outline-none focus:border-sky-500"
+            aria-label="배경 이미지 소스"
+            value={backgroundSource}
+            onChange={(e) => {
+              const next = e.target.value as "none" | "url" | "upload";
+              if (next === "none") {
+                updateBlock(selectedBlockId, {
+                  backgroundImageSrc: undefined,
+                  backgroundImageSourceType: undefined,
+                  backgroundImageAssetId: null,
+                } as any);
+              } else if (next === "url") {
+                updateBlock(selectedBlockId, {
+                  backgroundImageSourceType: "externalUrl",
+                  backgroundImageAssetId: null,
+                } as any);
+              } else {
+                updateBlock(selectedBlockId, {
+                  backgroundImageSourceType: "asset",
+                } as any);
+              }
+            }}
+          >
+            <option value="none">없음</option>
+            <option value="url">URL</option>
+            <option value="upload">파일 업로드</option>
+          </select>
+        </label>
+
+        {backgroundSource === "url" && (
+          <label className="flex flex-col gap-1">
+            <span>배경 이미지 URL</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="배경 이미지 URL"
+              value={sectionProps.backgroundImageSrc ?? ""}
+              onChange={(e) => {
+                const value = e.target.value;
+                updateBlock(selectedBlockId, {
+                  backgroundImageSrc: value,
+                  backgroundImageSourceType: "externalUrl",
+                  backgroundImageAssetId: null,
+                } as any);
+              }}
+            />
+          </label>
+        )}
+
+        {backgroundSource === "upload" && (
+          <label className="flex flex-col gap-1">
+            <span>배경 이미지 파일 업로드</span>
+            <input
+              type="file"
+              accept="image/*"
+              className="w-full text-[11px] text-slate-300 file:mr-2 file:rounded file:border file:border-slate-700 file:bg-slate-800 file:px-2 file:py-1 file:text-[11px] file:text-slate-100 hover:file:bg-slate-700"
+              aria-label="배경 이미지 파일 업로드"
+              onChange={async (event) => {
+                const file = event.target.files?.[0];
+                if (!file) return;
+
+                try {
+                  const formData = new FormData();
+                  formData.append("file", file);
+
+                  const response = await fetch("/api/image", {
+                    method: "POST",
+                    body: formData,
+                  });
+
+                  if (!response.ok) {
+                    console.error("배경 이미지 업로드 실패", await response.text());
+                    return;
+                  }
+
+                  const data = (await response.json()) as { id: string; servedUrl?: string | null };
+                  const servedUrl = data.servedUrl ?? `/api/image/${data.id}`;
+
+                  updateBlock(selectedBlockId, {
+                    backgroundImageSrc: servedUrl,
+                    backgroundImageSourceType: "asset",
+                    backgroundImageAssetId: data.id,
+                  } as any);
+                } catch (error) {
+                  console.error("배경 이미지 업로드 중 오류", error);
+                } finally {
+                  event.target.value = "";
+                }
+              }}
+            />
+          </label>
+        )}
+        {backgroundSource !== "none" && (
+          <>
+            <label className="flex flex-col gap-1">
+              <span>배경 이미지 위치 모드</span>
+              <select
+                className="w-full rounded border border-slate-700 bg-slate-900 px-2 py-1 text-[11px] outline-none focus:border-sky-500"
+                aria-label="배경 이미지 위치 모드"
+                value={positionMode}
+                onChange={(e) =>
+                  updateBlock(selectedBlockId, {
+                    backgroundImagePositionMode: e.target.value as SectionBlockProps["backgroundImagePositionMode"],
+                  } as any)
+                }
+              >
+                <option value="preset">프리셋</option>
+                <option value="custom">커스텀 (X/Y)</option>
+              </select>
+            </label>
+
+            <label className="flex flex-col gap-1">
+              <span>배경 이미지 크기</span>
+              <select
+                className="w-full rounded border border-slate-700 bg-slate-900 px-2 py-1 text-[11px] outline-none focus:border-sky-500"
+                aria-label="배경 이미지 크기"
+                value={sectionProps.backgroundImageSize ?? "cover"}
+                onChange={(e) =>
+                  updateBlock(selectedBlockId, {
+                    backgroundImageSize: e.target.value as SectionBlockProps["backgroundImageSize"],
+                  } as any)
+                }
+              >
+                <option value="cover">cover</option>
+                <option value="contain">contain</option>
+                <option value="auto">auto</option>
+              </select>
+            </label>
+
+            {positionMode === "preset" && (
+              <label className="flex flex-col gap-1">
+                <span>배경 이미지 위치</span>
+                <select
+                  className="w-full rounded border border-slate-700 bg-slate-900 px-2 py-1 text-[11px] outline-none focus:border-sky-500"
+                  aria-label="배경 이미지 위치"
+                  value={sectionProps.backgroundImagePosition ?? "center"}
+                  onChange={(e) =>
+                    updateBlock(selectedBlockId, {
+                      backgroundImagePosition: e.target.value as SectionBlockProps["backgroundImagePosition"],
+                    } as any)
+                  }
+                >
+                  <option value="center">가운데</option>
+                  <option value="top">위</option>
+                  <option value="bottom">아래</option>
+                  <option value="left">왼쪽</option>
+                  <option value="right">오른쪽</option>
+                </select>
+              </label>
+            )}
+
+            {positionMode === "custom" && (
+              <>
+                <NumericPropertyControl
+                  label="배경 이미지 가로 위치"
+                  unitLabel="(%)"
+                  value={
+                    typeof sectionProps.backgroundImagePositionXPercent === "number"
+                      ? sectionProps.backgroundImagePositionXPercent
+                      : 50
+                  }
+                  min={0}
+                  max={100}
+                  step={1}
+                  presets={[
+                    { id: "left", label: "왼쪽", value: 0 },
+                    { id: "center", label: "가운데", value: 50 },
+                    { id: "right", label: "오른쪽", value: 100 },
+                  ]}
+                  onChangeValue={(next) =>
+                    updateBlock(selectedBlockId, {
+                      backgroundImagePositionMode: "custom",
+                      backgroundImagePositionXPercent: next,
+                    } as any)
+                  }
+                />
+
+                <NumericPropertyControl
+                  label="배경 이미지 세로 위치"
+                  unitLabel="(%)"
+                  value={
+                    typeof sectionProps.backgroundImagePositionYPercent === "number"
+                      ? sectionProps.backgroundImagePositionYPercent
+                      : 50
+                  }
+                  min={0}
+                  max={100}
+                  step={1}
+                  presets={[
+                    { id: "top", label: "위", value: 0 },
+                    { id: "center", label: "가운데", value: 50 },
+                    { id: "bottom", label: "아래", value: 100 },
+                  ]}
+                  onChangeValue={(next) =>
+                    updateBlock(selectedBlockId, {
+                      backgroundImagePositionMode: "custom",
+                      backgroundImagePositionYPercent: next,
+                    } as any)
+                  }
+                />
+              </>
+            )}
+
+            <label className="flex flex-col gap-1">
+              <span>배경 이미지 반복</span>
+              <select
+                className="w-full rounded border border-slate-700 bg-slate-900 px-2 py-1 text-[11px] outline-none focus:border-sky-500"
+                aria-label="배경 이미지 반복"
+                value={sectionProps.backgroundImageRepeat ?? "no-repeat"}
+                onChange={(e) =>
+                  updateBlock(selectedBlockId, {
+                    backgroundImageRepeat: e.target.value as SectionBlockProps["backgroundImageRepeat"],
+                  } as any)
+                }
+              >
+                <option value="no-repeat">반복 없음</option>
+                <option value="repeat">가로/세로 반복</option>
+                <option value="repeat-x">가로 반복</option>
+                <option value="repeat-y">세로 반복</option>
+              </select>
+            </label>
+          </>
+        )}
+      </div>
+
+      {/* 섹션 배경 비디오 */}
+      <div className="mt-3 space-y-2 text-xs text-slate-400">
+        <label className="flex flex-col gap-1">
+          <span>배경 비디오 소스</span>
+          <select
+            className="w-full rounded border border-slate-700 bg-slate-900 px-2 py-1 text-[11px] outline-none focus:border-sky-500"
+            aria-label="배경 비디오 소스"
+            value={backgroundVideoSource}
+            onChange={(e) => {
+              const next = e.target.value as "none" | "url" | "upload";
+              if (next === "none") {
+                updateBlock(selectedBlockId, {
+                  backgroundVideoSrc: undefined,
+                  backgroundVideoSourceType: undefined,
+                  backgroundVideoAssetId: null,
+                } as any);
+              } else if (next === "url") {
+                updateBlock(selectedBlockId, {
+                  backgroundVideoSourceType: "externalUrl",
+                  backgroundVideoAssetId: null,
+                } as any);
+              } else {
+                updateBlock(selectedBlockId, {
+                  backgroundVideoSourceType: "asset",
+                } as any);
+              }
+            }}
+          >
+            <option value="none">없음</option>
+            <option value="url">URL</option>
+            <option value="upload">파일 업로드</option>
+          </select>
+        </label>
+
+        {backgroundVideoSource === "url" && (
+          <label className="flex flex-col gap-1">
+            <span>배경 비디오 URL</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="배경 비디오 URL"
+              value={sectionProps.backgroundVideoSrc ?? ""}
+              onChange={(e) => {
+                const value = e.target.value;
+                updateBlock(selectedBlockId, {
+                  backgroundVideoSrc: value,
+                  backgroundVideoSourceType: "externalUrl",
+                  backgroundVideoAssetId: null,
+                } as any);
+              }}
+            />
+          </label>
+        )}
+
+        {backgroundVideoSource === "upload" && (
+          <label className="flex flex-col gap-1">
+            <span>배경 비디오 파일 업로드</span>
+            <input
+              type="file"
+              accept="video/*"
+              className="w-full text-[11px] text-slate-300 file:mr-2 file:rounded file:border file:border-slate-700 file:bg-slate-800 file:px-2 file:py-1 file:text-[11px] file:text-slate-100 hover:file:bg-slate-700"
+              aria-label="배경 비디오 파일 업로드"
+              onChange={async (event) => {
+                const file = event.target.files?.[0];
+                if (!file) return;
+
+                try {
+                  const formData = new FormData();
+                  formData.append("file", file);
+
+                  const response = await fetch("/api/video", {
+                    method: "POST",
+                    body: formData,
+                  });
+
+                  if (!response.ok) {
+                    console.error("배경 비디오 업로드 실패", await response.text());
+                    return;
+                  }
+
+                  const data = (await response.json()) as { id: string; servedUrl?: string | null };
+                  const servedUrl = data.servedUrl ?? `/api/video/${data.id}`;
+
+                  updateBlock(selectedBlockId, {
+                    backgroundVideoSrc: servedUrl,
+                    backgroundVideoSourceType: "asset",
+                    backgroundVideoAssetId: data.id,
+                  } as any);
+                } catch (error) {
+                  console.error("배경 비디오 업로드 중 오류", error);
+                } finally {
+                  event.target.value = "";
+                }
+              }}
+            />
+          </label>
+        )}
+      </div>
+
      {/* 세로 패딩 슬라이더 (px) - 프리셋 + 자유 슬라이더 */}
      <div className="mt-3 space-y-1">
        <NumericPropertyControl