video 블록 및 리펙터링

2025-11-27 10:07:59 +09:00
parent 672cca5271
commit 48e13d2a75
223 changed files with 8979 additions and 2125 deletions
@@ -8,6 +8,7 @@ export function BlocksSidebar() {
  const addTextBlock = useEditorStore((state) => state.addTextBlock);
  const addButtonBlock = useEditorStore((state) => state.addButtonBlock);
  const addImageBlock = useEditorStore((state) => state.addImageBlock);
+  const addVideoBlock = useEditorStore((state) => (state as any).addVideoBlock);
  const addDividerBlock = useEditorStore((state) => state.addDividerBlock);
  const addListBlock = useEditorStore((state) => state.addListBlock);
  const addSectionBlock = useEditorStore((state) => state.addSectionBlock);
@@ -32,6 +33,7 @@ export function BlocksSidebar() {
  const handleAddText = useCallback(() => addTextBlock(), [addTextBlock]);
  const handleAddButton = useCallback(() => addButtonBlock(), [addButtonBlock]);
  const handleAddImage = useCallback(() => addImageBlock(), [addImageBlock]);
+  const handleAddVideo = useCallback(() => addVideoBlock(), [addVideoBlock]);
  const handleAddDivider = useCallback(() => addDividerBlock(), [addDividerBlock]);
  const handleAddList = useCallback(() => addListBlock(), [addListBlock]);
  const handleAddSection = useCallback(() => addSectionBlock(), [addSectionBlock]);
@@ -91,6 +93,13 @@ export function BlocksSidebar() {
      >
        이미지 블록 추가
      </button>
+      <button
+        type="button"
+        className="w-full rounded border border-slate-700 bg-slate-900 px-3 py-2 text-left text-xs hover:bg-slate-800"
+        onClick={handleAddVideo}
+      >
+        비디오 블록 추가
+      </button>
      <button
        type="button"
        className="w-full rounded border border-slate-700 bg-slate-900 px-3 py-2 text-left text-xs hover:bg-slate-800"
@@ -169,9 +178,13 @@ export function BlocksSidebar() {
                </button>
                <div
                  data-testid="template-preview-hero"
-                  className="shrink-0 flex h-6 w-10 items-stretch gap-[2px] rounded border border-slate-700 bg-slate-900"
+                  className="shrink-0 flex h-6 w-10 rounded border border-slate-700 bg-slate-900 p-[2px]"
                >
-                  <div className="flex-1 bg-slate-700/70" />
+                  <div className="flex h-full w-full flex-col items-center justify-center gap-[2px]">
+                    <div className="h-[2px] w-3/4 bg-slate-700/70" />
+                    <div className="h-[2px] w-1/2 bg-slate-700/50" />
+                    <div className="h-2 w-4 rounded-[1px] bg-slate-700/70 mt-[1px]" />
+                  </div>
                </div>
              </div>
              <p className="text-[10px] text-slate-400 leading-snug">
@@ -190,9 +203,15 @@ export function BlocksSidebar() {
                </button>
                <div
                  data-testid="template-preview-cta"
-                  className="shrink-0 flex h-6 w-10 items-center justify-center gap-[2px] rounded border border-slate-700 bg-slate-900"
+                  className="shrink-0 flex h-6 w-10 rounded border border-slate-700 bg-slate-900 p-[2px]"
                >
-                  <div className="h-2 w-6 rounded bg-slate-700/70" />
+                  <div className="flex h-full w-full items-center gap-[2px]">
+                    <div className="flex-1 flex flex-col justify-center gap-[1px]">
+                      <div className="h-[2px] w-full bg-slate-700/70" />
+                      <div className="h-[2px] w-2/3 bg-slate-700/50" />
+                    </div>
+                    <div className="w-3 h-2 rounded-[1px] bg-slate-700/70" />
+                  </div>
                </div>
              </div>
              <p className="text-[10px] text-slate-400 leading-snug">콜투액션(CTA) 섹션</p>
@@ -214,11 +233,20 @@ export function BlocksSidebar() {
                </button>
                <div
                  data-testid="template-preview-features"
-                  className="shrink-0 flex h-6 w-10 items-stretch gap-[2px] rounded border border-slate-700 bg-slate-900"
+                  className="shrink-0 flex h-6 w-10 items-stretch gap-[2px] rounded border border-slate-700 bg-slate-900 p-[2px]"
                >
-                  <div className="flex-1 bg-slate-700/70" />
-                  <div className="flex-1 bg-slate-700/50" />
-                  <div className="flex-1 bg-slate-700/70" />
+                  <div className="flex-1 flex flex-col gap-[1px]">
+                    <div className="h-[2px] w-full bg-slate-700/70" />
+                    <div className="h-[2px] w-full bg-slate-700/50" />
+                  </div>
+                  <div className="flex-1 flex flex-col gap-[1px]">
+                    <div className="h-[2px] w-full bg-slate-700/70" />
+                    <div className="h-[2px] w-full bg-slate-700/50" />
+                  </div>
+                  <div className="flex-1 flex flex-col gap-[1px]">
+                    <div className="h-[2px] w-full bg-slate-700/70" />
+                    <div className="h-[2px] w-full bg-slate-700/50" />
+                  </div>
                </div>
              </div>
              <p className="text-[10px] text-slate-400 leading-snug">3컬럼 기능 소개 섹션</p>
@@ -235,11 +263,16 @@ export function BlocksSidebar() {
                </button>
                <div
                  data-testid="template-preview-faq"
-                  className="shrink-0 flex h-6 w-10 flex-col justify-center gap-[2px] rounded border border-slate-700 bg-slate-900"
+                  className="shrink-0 flex h-6 w-10 items-start gap-[2px] rounded border border-slate-700 bg-slate-900 p-[2px]"
                >
-                  <div className="h-[2px] w-full bg-slate-700/70" />
-                  <div className="h-[2px] w-full bg-slate-700/40" />
-                  <div className="h-[2px] w-full bg-slate-700/70" />
+                  <div className="w-2 flex flex-col gap-[1px]">
+                    <div className="h-[2px] w-full bg-slate-700/70" />
+                  </div>
+                  <div className="flex-1 flex flex-col gap-[2px]">
+                    <div className="h-[1px] w-full bg-slate-700/50" />
+                    <div className="h-[1px] w-full bg-slate-700/50" />
+                    <div className="h-[1px] w-full bg-slate-700/50" />
+                  </div>
                </div>
              </div>
              <p className="text-[10px] text-slate-400 leading-snug">자주 묻는 질문(FAQ) 섹션</p>
@@ -256,11 +289,21 @@ export function BlocksSidebar() {
                </button>
                <div
                  data-testid="template-preview-pricing"
-                  className="shrink-0 flex h-6 w-10 items-end gap-[2px] rounded border border-slate-700 bg-slate-900"
+                  className="shrink-0 flex h-6 w-10 items-stretch gap-[2px] rounded border border-slate-700 bg-slate-900 p-[2px]"
                >
-                  <div className="h-2 flex-1 bg-slate-700/40" />
-                  <div className="h-4 flex-1 bg-slate-700/70" />
-                  <div className="h-3 flex-1 bg-slate-700/50" />
+                  <div className="flex-1 flex flex-col items-center justify-end gap-[1px] border border-slate-700/30 rounded-[1px]">
+                    <div className="h-[1px] w-1/2 bg-slate-700/70" />
+                    <div className="h-[1px] w-3/4 bg-slate-700/50" />
+                  </div>
+                  <div className="flex-1 flex flex-col items-center justify-end gap-[1px] border border-sky-700/50 bg-sky-900/20 rounded-[1px]">
+                    <div className="h-[1px] w-1/2 bg-sky-500/70" />
+                    <div className="h-[1px] w-3/4 bg-sky-500/50" />
+                    <div className="h-[2px] w-3/4 bg-sky-500/70 mt-[1px] rounded-[1px]" />
+                  </div>
+                  <div className="flex-1 flex flex-col items-center justify-end gap-[1px] border border-slate-700/30 rounded-[1px]">
+                    <div className="h-[1px] w-1/2 bg-slate-700/70" />
+                    <div className="h-[1px] w-3/4 bg-slate-700/50" />
+                  </div>
                </div>
              </div>
              <p className="text-[10px] text-slate-400 leading-snug">요금제/플랜 소개 섹션</p>
@@ -277,11 +320,23 @@ export function BlocksSidebar() {
                </button>
                <div
                  data-testid="template-preview-blog"
-                  className="shrink-0 flex h-6 w-10 items-stretch gap-[2px] rounded border border-slate-700 bg-slate-900"
+                  className="shrink-0 flex h-6 w-10 items-stretch gap-[2px] rounded border border-slate-700 bg-slate-900 p-[2px]"
                >
-                  <div className="flex-1 bg-slate-700/70" />
-                  <div className="flex-1 bg-slate-700/50" />
-                  <div className="flex-1 bg-slate-700/70" />
+                  <div className="flex-1 flex flex-col gap-[1px]">
+                    <div className="h-2 w-full bg-slate-600/50 rounded-[1px]" />
+                    <div className="h-[1px] w-full bg-slate-700/70" />
+                    <div className="h-[1px] w-2/3 bg-slate-700/50" />
+                  </div>
+                  <div className="flex-1 flex flex-col gap-[1px]">
+                    <div className="h-2 w-full bg-slate-600/50 rounded-[1px]" />
+                    <div className="h-[1px] w-full bg-slate-700/70" />
+                    <div className="h-[1px] w-2/3 bg-slate-700/50" />
+                  </div>
+                  <div className="flex-1 flex flex-col gap-[1px]">
+                    <div className="h-2 w-full bg-slate-600/50 rounded-[1px]" />
+                    <div className="h-[1px] w-full bg-slate-700/70" />
+                    <div className="h-[1px] w-2/3 bg-slate-700/50" />
+                  </div>
                </div>
              </div>
              <p className="text-[10px] text-slate-400 leading-snug">블로그 포스트 목록 섹션</p>
@@ -303,10 +358,20 @@ export function BlocksSidebar() {
                </button>
                <div
                  data-testid="template-preview-testimonials"
-                  className="shrink-0 flex h-6 w-10 flex-col justify-center gap-[2px] rounded border border-slate-700 bg-slate-900"
+                  className="shrink-0 flex h-6 w-10 items-stretch gap-[2px] rounded border border-slate-700 bg-slate-900 p-[2px]"
                >
-                  <div className="h-[2px] w-full bg-slate-700/70" />
-                  <div className="h-[2px] w-3/4 bg-slate-700/50" />
+                  <div className="flex-1 flex flex-col justify-between border border-slate-700/30 rounded-[1px] p-[1px]">
+                    <div className="h-[1px] w-full bg-slate-700/50" />
+                    <div className="h-[1px] w-1/2 bg-slate-700/70" />
+                  </div>
+                  <div className="flex-1 flex flex-col justify-between border border-slate-700/30 rounded-[1px] p-[1px]">
+                    <div className="h-[1px] w-full bg-slate-700/50" />
+                    <div className="h-[1px] w-1/2 bg-slate-700/70" />
+                  </div>
+                  <div className="flex-1 flex flex-col justify-between border border-slate-700/30 rounded-[1px] p-[1px]">
+                    <div className="h-[1px] w-full bg-slate-700/50" />
+                    <div className="h-[1px] w-1/2 bg-slate-700/70" />
+                  </div>
                </div>
              </div>
              <p className="text-[10px] text-slate-400 leading-snug">고객 후기(Testimonials) 섹션</p>
@@ -323,11 +388,23 @@ export function BlocksSidebar() {
                </button>
                <div
                  data-testid="template-preview-team"
-                  className="shrink-0 flex h-6 w-10 items-end gap-[2px] rounded border border-slate-700 bg-slate-900"
+                  className="shrink-0 flex h-6 w-10 items-stretch gap-[2px] rounded border border-slate-700 bg-slate-900 p-[2px]"
                >
-                  <div className="h-3 flex-1 bg-slate-700/60" />
-                  <div className="h-4 flex-1 bg-slate-700/80" />
-                  <div className="h-2 flex-1 bg-slate-700/50" />
+                  <div className="flex-1 flex flex-col items-center gap-[1px]">
+                    <div className="h-2 w-2 rounded-full bg-slate-600/80" />
+                    <div className="h-[1px] w-full bg-slate-700/70" />
+                    <div className="h-[1px] w-2/3 bg-slate-700/50" />
+                  </div>
+                  <div className="flex-1 flex flex-col items-center gap-[1px]">
+                    <div className="h-2 w-2 rounded-full bg-slate-600/80" />
+                    <div className="h-[1px] w-full bg-slate-700/70" />
+                    <div className="h-[1px] w-2/3 bg-slate-700/50" />
+                  </div>
+                  <div className="flex-1 flex flex-col items-center gap-[1px]">
+                    <div className="h-2 w-2 rounded-full bg-slate-600/80" />
+                    <div className="h-[1px] w-full bg-slate-700/70" />
+                    <div className="h-[1px] w-2/3 bg-slate-700/50" />
+                  </div>
                </div>
              </div>
              <p className="text-[10px] text-slate-400 leading-snug">팀 소개 섹션</p>
@@ -349,10 +426,14 @@ export function BlocksSidebar() {
                </button>
                <div
                  data-testid="template-preview-footer"
-                  className="shrink-0 flex h-6 w-10 flex-col justify-end gap-[2px] rounded border border-slate-700 bg-slate-900"
+                  className="shrink-0 flex h-6 w-10 items-center justify-between gap-[2px] rounded border border-slate-700 bg-slate-900 p-[2px]"
                >
-                  <div className="h-[2px] w-full bg-slate-700/40" />
-                  <div className="h-[2px] w-3/4 bg-slate-700/70" />
+                  <div className="flex-1 h-[2px] bg-slate-700/70" />
+                  <div className="flex-1 flex flex-col gap-[1px]">
+                    <div className="h-[1px] w-full bg-slate-700/50" />
+                    <div className="h-[1px] w-full bg-slate-700/50" />
+                  </div>
+                  <div className="flex-1 h-[1px] bg-slate-700/40" />
                </div>
              </div>
              <p className="text-[10px] text-slate-400 leading-snug">페이지 푸터 섹션</p>