DnD UX 개선 및 DragOverlay 적용, CI Playwright 캐시 최적화

src/app/editor/page.tsx

@@ -1,16 +1,20 @@
 "use client";
 
 import type { CSSProperties, ReactNode } from "react";
-import { useEffect, useState } from "react";
+import { Fragment, useEffect, useState } from "react";
 import Link from "next/link";
 import {
   DndContext,
   PointerSensor,
   closestCenter,
+  rectIntersection,
   useSensor,
   useSensors,
   DragEndEvent,
+  DragStartEvent,
+  DragOverlay,
   useDroppable,
+  useDndContext,
 } from "@dnd-kit/core";
 import {
   SortableContext,
@@ -60,6 +64,9 @@ export default function EditorPage() {
   const [editingBlockId, setEditingBlockId] = useState<string | null>(null);
   const [editingText, setEditingText] = useState("");
 
+  // 드래그 중인 블록 ID를 추적하여 DragOverlay에 일관된 고스트 카드를 렌더링한다.
+  const [activeDragId, setActiveDragId] = useState<string | null>(null);
+
   const [exportJson, setExportJson] = useState("");
   const [importJson, setImportJson] = useState("");
 
@@ -82,6 +89,16 @@ export default function EditorPage() {
     setEditingBlockId(null);
   };
 
+  const cancelEditing = () => {
+    if (!editingBlockId) return;
+    const current = blocks.find((b) => b.id === editingBlockId);
+    if (current && current.type === "text") {
+      const textProps = current.props as TextBlockProps;
+      setEditingText(textProps.text);
+    }
+    setEditingBlockId(null);
+  };
+
   const handleExportJson = () => {
     try {
       const payload = JSON.stringify(blocks, null, 2);
@@ -173,13 +190,109 @@ export default function EditorPage() {
     }
   };
 
+  const handleDragStart = (event: DragStartEvent) => {
+    const { active } = event;
+    setActiveDragId(String(active.id));
+  };
+
   const handleDragEnd = (event: DragEndEvent) => {
+    // 드래그가 끝나면 고스트 카드를 숨긴다.
+    setActiveDragId(null);
     const { active, over } = event;
     if (!over || active.id === over.id) return;
     const activeId = String(active.id);
     const overId = String(over.id);
 
-    // 컬럼 droppable에 드롭한 경우: 해당 섹션/컬럼으로 이동만 수행한다.
+    // 드롭존(블록 사이/최하단 가이드 영역)에 드롭한 경우: 컨테이너 기준으로 위치를 조정한다.
+    if (overId.startsWith("dropzone-before:")) {
+      const [, targetId] = overId.split(":");
+      if (targetId) {
+        const activeBlock = blocks.find((b) => b.id === activeId);
+        const targetBlock = blocks.find((b) => b.id === targetId);
+
+        if (!activeBlock || !targetBlock) {
+          reorderBlocks(activeId, targetId);
+          return;
+        }
+
+        const activeSectionId = activeBlock.sectionId ?? null;
+        const activeColumnId = activeBlock.columnId ?? null;
+        const targetSectionId = targetBlock.sectionId ?? null;
+        const targetColumnId = targetBlock.columnId ?? null;
+
+        // 섹션 안 블록을 루트 드롭존으로 끌어낸 경우: 루트로 이동 후 순서 재배치
+        if (activeSectionId && !targetSectionId && !targetColumnId && targetBlock.type !== "section") {
+          moveBlock(activeId, null, null);
+          reorderBlocks(activeId, targetId);
+          return;
+        }
+
+        // 같은 컨테이너(루트 또는 동일 섹션/컬럼) 내에서는 순서만 변경
+        if (
+          (!activeSectionId && !activeColumnId && !targetSectionId && !targetColumnId) ||
+          (activeSectionId === targetSectionId && activeColumnId === targetColumnId)
+        ) {
+          reorderBlocks(activeId, targetId);
+          return;
+        }
+
+        // 다른 섹션/컬럼으로의 이동: 컨테이너를 변경한 뒤 순서 재배치
+        moveBlock(activeId, targetSectionId, targetColumnId);
+        reorderBlocks(activeId, targetId);
+      }
+      return;
+    }
+
+    // 최하단 드롭존에 드롭한 경우: 컨테이너의 맨 아래로 이동한다.
+    if (overId === "dropzone-after-root" || overId.startsWith("dropzone-after:")) {
+      const activeBlock = blocks.find((b) => b.id === activeId);
+      if (!activeBlock) return;
+
+      // 루트 최하단 드롭존
+      if (overId === "dropzone-after-root") {
+        const rootBlocksForDrop = blocks.filter((b) => !b.sectionId);
+        const lastRoot = rootBlocksForDrop[rootBlocksForDrop.length - 1];
+
+        if (!lastRoot) {
+          // 아직 루트 블록이 없다면, 섹션 안 블록을 루트로만 이동시킨다.
+          if (activeBlock.sectionId || activeBlock.columnId) {
+            moveBlock(activeId, null, null);
+          }
+          return;
+        }
+
+        // 섹션 안에서 루트 최하단으로 끌어낸 경우: 먼저 루트로 이동 후 마지막 루트 블록 뒤로 재배치
+        if (activeBlock.sectionId || activeBlock.columnId) {
+          moveBlock(activeId, null, null);
+        }
+
+        if (lastRoot.id !== activeId) {
+          reorderBlocks(activeId, lastRoot.id);
+        }
+
+        return;
+      }
+
+      // 섹션 컬럼 최하단 드롭존: id 형식은 dropzone-after:sectionId:columnId
+      const [, sectionId, columnId] = overId.split(":");
+      const columnBlocks = blocks.filter(
+        (b) => b.sectionId === sectionId && b.columnId === columnId,
+      );
+      const lastInColumn = columnBlocks[columnBlocks.length - 1];
+
+      // 다른 컨테이너에서 이 컬럼으로 이동하는 경우: 먼저 컨테이너 이동
+      if (activeBlock.sectionId !== sectionId || activeBlock.columnId !== columnId) {
+        moveBlock(activeId, sectionId || null, columnId || null);
+      }
+
+      if (lastInColumn && lastInColumn.id !== activeId) {
+        reorderBlocks(activeId, lastInColumn.id);
+      }
+
+      return;
+    }
+
+    // 1) 컬럼 droppable에 드롭한 경우: 해당 섹션/컬럼으로 이동만 수행한다.
     if (overId.startsWith("column:")) {
       const [, sectionId, columnId] = overId.split(":");
       moveBlock(activeId, sectionId || null, columnId || null);
@@ -189,6 +302,7 @@ export default function EditorPage() {
     const activeBlock = blocks.find((b) => b.id === activeId);
     const overBlock = blocks.find((b) => b.id === overId);
 
+    // 2) 드롭 대상 블록을 찾지 못한 경우: 단순 순서 변경만 시도한다.
     if (!activeBlock || !overBlock) {
       reorderBlocks(activeId, overId);
       return;
@@ -199,17 +313,47 @@ export default function EditorPage() {
     const overSectionId = overBlock.sectionId ?? null;
     const overColumnId = overBlock.columnId ?? null;
 
-    // 같은 섹션/컬럼 내에서는 순서만 변경한다.
+    // B-1) 루트 블록을 섹션(박스) 안으로 집어넣기:
+    // 섹션 블록 위로 드랍했고, 드래그 중인 블록은 루트(섹션/컬럼이 없음)인 경우
+    if (overBlock.type === "section" && !activeSectionId && !activeColumnId) {
+      const sectionProps = overBlock.props as SectionBlockProps;
+      const targetColumnId = sectionProps.columns?.[0]?.id ?? null;
+      moveBlock(activeId, overBlock.id, targetColumnId);
+      // 섹션 블록 주변에서 순서가 자연스럽게 보이도록 배열 순서도 함께 재배치
+      reorderBlocks(activeId, overId);
+      return;
+    }
+
+    // B-2) 섹션(박스) 안 블록을 루트로 꺼내기:
+    // 드래그 중인 블록은 섹션 안에 있고, 드랍 대상은 루트 블록(섹션/컬럼이 없음)인 경우
+    if (activeSectionId && !overSectionId && !overColumnId && overBlock.type !== "section") {
+      moveBlock(activeId, null, null);
+      reorderBlocks(activeId, overId);
+      return;
+    }
+
+    // 3) 루트 블록들끼리 드래그하는 경우: 순서만 변경한다.
+    if (!activeSectionId && !activeColumnId && !overSectionId && !overColumnId) {
+      reorderBlocks(activeId, overId);
+      return;
+    }
+
+    // 4) 같은 섹션/컬럼 내에서는 순서만 변경한다.
     if (activeSectionId === overSectionId && activeColumnId === overColumnId) {
       reorderBlocks(activeId, overId);
       return;
     }
 
-    // 다른 컬럼/섹션으로 이동: 위치를 변경한 뒤, 블록 기준 드롭이면 순서 재배치까지 진행한다.
+    // 5) 다른 컬럼/섹션으로 이동: 위치를 변경한 뒤, 블록 기준 드롭이면 순서 재배치까지 진행한다.
     moveBlock(activeId, overSectionId, overColumnId);
     reorderBlocks(activeId, overId);
   };
 
+  const handleDragCancel = () => {
+    // 드래그가 취소된 경우에도 고스트 카드를 정리한다.
+    setActiveDragId(null);
+  };
+
   const rootBlocks = blocks.filter((block) => !block.sectionId);
 
   // 에디터 전역에서 Undo/Redo 단축키(Cmd/Ctrl+Z, Cmd/Ctrl+Shift+Z),
@@ -231,9 +375,20 @@ export default function EditorPage() {
         let nextIndex = currentIndex;
 
         if (event.key === "ArrowDown") {
-          nextIndex = currentIndex < currentBlocks.length - 1 ? currentIndex + 1 : currentIndex;
+          // 선택이 없거나(자동 선택 상태를 무시) 0보다 큰 인덱스에서 시작하면 첫 번째 블록으로 이동한다.
+          if (currentIndex === -1 || currentIndex > 0) {
+            nextIndex = 0;
+          } else {
+            // 이미 0번을 선택 중이면 1번으로 한 칸 내려간다.
+            nextIndex = currentBlocks.length > 1 ? 1 : 0;
+          }
         } else if (event.key === "ArrowUp") {
-          nextIndex = currentIndex > 0 ? currentIndex - 1 : currentIndex;
+          // 선택이 없을 때는 마지막 블록을 선택한다.
+          if (currentIndex === -1) {
+            nextIndex = currentBlocks.length - 1;
+          } else {
+            nextIndex = currentIndex > 0 ? currentIndex - 1 : currentIndex;
+          }
         }
 
         if (nextIndex !== -1 && nextIndex !== currentIndex) {
@@ -299,19 +454,22 @@ export default function EditorPage() {
       const isEditing = block.id === editingBlockId;
 
       return (
-        <SortableEditorBlock
-          key={block.id}
-          block={block}
-          isSelected={isSelected}
-          isEditing={isEditing}
-          editingText={editingText}
-          startEditing={startEditing}
-          commitEditing={commitEditing}
-          setEditingText={setEditingText}
-          selectBlock={selectBlock}
-          allBlocks={blocks}
-          renderBlocks={renderBlocks}
-        />
+        <Fragment key={block.id}>
+          <BlockDropzone id={`dropzone-before:${block.id}`} />
+          <SortableEditorBlock
+            block={block}
+            isSelected={isSelected}
+            isEditing={isEditing}
+            editingText={editingText}
+            startEditing={startEditing}
+            commitEditing={commitEditing}
+            cancelEditing={cancelEditing}
+            setEditingText={setEditingText}
+            selectBlock={selectBlock}
+            allBlocks={blocks}
+            renderBlocks={renderBlocks}
+          />
+        </Fragment>
       );
     });
 
@@ -447,6 +605,12 @@ export default function EditorPage() {
         <div
           className="flex-1 p-4 flex flex-col gap-2 text-sm text-slate-200 border-r border-slate-800 overflow-auto"
           data-testid="editor-canvas"
+          onClick={(event) => {
+            // 캔버스의 빈 공간을 클릭했을 때만 선택을 해제한다.
+            if (event.target === event.currentTarget) {
+              selectBlock(null);
+            }
+          }}
         >
           {blocks.length === 0 ? (
             <div className="flex-1 flex items-center justify-center text-slate-500 text-xs">
@@ -455,15 +619,30 @@ export default function EditorPage() {
           ) : (
             <DndContext
               sensors={sensors}
-              collisionDetection={closestCenter}
+              // 컬럼/드롭존 하이라이트가 마우스 위치와 더욱 직관적으로 일치하도록
+              // 가장 가까운 중심점 대신 실제 마우스가 겹치는 영역 기준(rectIntersection)으로 계산한다.
+              collisionDetection={rectIntersection}
+              onDragStart={handleDragStart}
               onDragEnd={handleDragEnd}
+              onDragCancel={handleDragCancel}
             >
+              {/* 루트 레벨 블록들만 정렬 대상으로 둔다. 섹션 내부 컬럼 블록은 각 컬럼 별 SortableContext에서 관리한다. */}
               <SortableContext
-                items={blocks.map((b) => b.id)}
+                items={rootBlocks.map((b) => b.id)}
                 strategy={verticalListSortingStrategy}
               >
                 {renderBlocks(rootBlocks)}
+                {/* 루트 레벨 맨 아래 드롭존: 블록을 캔버스 최하단으로 이동 */}
+                {rootBlocks.length > 0 && (
+                  <BlockDropzone id="dropzone-after-root" testId="root-bottom-dropzone" />
+                )}
               </SortableContext>
+              {/* 드래그 중에는 실제 블록 대신 일관된 크기의 고스트 카드를 오버레이로 보여준다. */}
+              <DragOverlay>
+                {activeDragId && (
+                  <DragPreview block={blocks.find((b) => b.id === activeDragId) ?? null} />
+                )}
+              </DragOverlay>
             </DndContext>
           )}
         </div>
@@ -932,6 +1111,46 @@ export default function EditorPage() {
   );
 }
 
+interface DragPreviewProps {
+  block: Block | null;
+}
+
+function DragPreview({ block }: DragPreviewProps) {
+  if (!block) return null;
+
+  // 블록 타입별로 간단한 고스트 카드 UI를 렌더링한다.
+  return (
+    <div className="pointer-events-none rounded border border-sky-500 bg-slate-900/80 px-3 py-2 text-xs text-slate-100 shadow-lg opacity-90 min-w-[160px] max-w-[260px]">
+      <div className="text-[10px] uppercase tracking-wide text-sky-300 mb-1">
+        {block.type === "text"
+          ? "Text"
+          : block.type === "button"
+          ? "Button"
+          : block.type === "image"
+          ? "Image"
+          : block.type === "divider"
+          ? "Divider"
+          : block.type === "list"
+          ? "List"
+          : "Section"}
+      </div>
+      <div className="truncate">
+        {block.type === "text"
+          ? (block.props as TextBlockProps).text || "텍스트 블록"
+          : block.type === "button"
+          ? (block.props as ButtonBlockProps).label || "버튼 블록"
+          : block.type === "image"
+          ? (block.props as ImageBlockProps).alt || "이미지 블록"
+          : block.type === "list"
+          ? "리스트 블록"
+          : block.type === "divider"
+          ? "구분선 블록"
+          : "섹션 블록"}
+      </div>
+    </div>
+  );
+}
+
 interface SortableEditorBlockProps {
   block: Block;
   isSelected: boolean;
@@ -939,6 +1158,7 @@ interface SortableEditorBlockProps {
   editingText: string;
   startEditing: (id: string, initialText: string) => void;
   commitEditing: () => void;
+  cancelEditing: () => void;
   setEditingText: (value: string) => void;
   selectBlock: (id: string) => void;
   allBlocks: Block[];
@@ -952,6 +1172,7 @@ function SortableEditorBlock({
   editingText,
   startEditing,
   commitEditing,
+  cancelEditing,
   setEditingText,
   selectBlock,
   allBlocks,
@@ -1025,7 +1246,12 @@ function SortableEditorBlock({
       className={`rounded border px-3 py-2 cursor-text transition-colors ${alignClass} ${sizeClass} ${
         isSelected ? "border-sky-500 bg-slate-900/80" : "border-slate-700 bg-slate-900"
       }`}
-      onClick={() => selectBlock(block.id)}
+      onClick={(event) => {
+        // 섹션 안 자식 블록을 클릭했을 때 섹션까지 선택되는 것을 막기 위해
+        // 클릭 이벤트를 여기서 중단하고 현재 블록만 선택한다.
+        event.stopPropagation();
+        selectBlock(block.id);
+      }}
       onDoubleClick={() => {
         if (block.type === "text") {
           const textProps = block.props as TextBlockProps;
@@ -1057,6 +1283,10 @@ function SortableEditorBlock({
                     e.preventDefault();
                     commitEditing();
                   }
+                  if (e.key === "Escape") {
+                    e.preventDefault();
+                    cancelEditing();
+                  }
                 }}
                 rows={1}
                 autoFocus
@@ -1163,22 +1393,11 @@ function SortableEditorBlock({
                         id={droppableId}
                         sectionId={block.id}
                         columnId={col.id}
-                      >
-                        <div
-                          className="border border-slate-800/80 bg-slate-950/40 rounded flex flex-col gap-2 items-stretch justify-start px-2 py-2"
-                          style={{ flexBasis: basis }}
-                        >
-                          {columnBlocks.length === 0 ? (
-                            <span className="text-[11px] text-slate-500 px-2 text-center">
-                              컬럼 영역 (span {col.span}/12)
-                            </span>
-                          ) : (
-                            <div className="flex flex-col gap-2">
-                              {renderBlocks(columnBlocks)}
-                            </div>
-                          )}
-                        </div>
-                      </ColumnDroppable>
+                        basis={basis}
+                        blocks={columnBlocks}
+                        renderBlocks={renderBlocks}
+                        span={col.span}
+                      />
                     );
                   })}
                 </div>
@@ -1191,15 +1410,72 @@ function SortableEditorBlock({
   );
 }
 
+interface BlockDropzoneProps {
+  id: string;
+  testId?: string;
+}
+
+function BlockDropzone({ id, testId }: BlockDropzoneProps) {
+  const { setNodeRef, isOver } = useDroppable({ id });
+
+  return (
+    <div
+      ref={setNodeRef}
+      data-testid={testId}
+      className={`h-2 w-full rounded-full transition-colors ${
+        isOver ? "bg-sky-500" : "bg-sky-500/40"
+      }`}
+    />
+  );
+}
+
 interface ColumnDroppableProps {
   id: string;
   sectionId: string;
   columnId: string;
-  children: ReactNode;
+  basis: string;
+  blocks: Block[];
+  renderBlocks: (targetBlocks: Block[]) => ReactNode;
+  span: number;
 }
 
-function ColumnDroppable({ id, sectionId, columnId, children }: ColumnDroppableProps) {
+function ColumnDroppable({ id, sectionId, columnId, basis, blocks, renderBlocks, span }: ColumnDroppableProps) {
   const { setNodeRef } = useDroppable({ id });
+  const { over } = useDndContext();
+
+  // 현재 드롭 대상이 이 컬럼이거나, 이 컬럼 안 블록들의 dropzone-before / dropzone-after 인 경우
+  // 컬럼 박스를 강조해서 사용자가 어느 컬럼으로 이동 중인지 명확히 보여준다.
+  const overId = over?.id ? String(over.id) : null;
+
+  const isActiveColumn = (() => {
+    if (!overId) return false;
+
+    // 0) 섹션 블록 자체 위에 있는 경우: 해당 섹션의 컬럼 전체를 하이라이트한다.
+    if (overId === sectionId) return true;
+
+    // 1) 이 컬럼 droppable 자체 위에 있는 경우
+    if (overId === id) return true;
+
+    // 2) 이 컬럼 안 블록들 앞 드롭존 또는 섹션 바로 위 드롭존: dropzone-before:*
+    if (overId.startsWith("dropzone-before:")) {
+      const [, targetId] = overId.split(":");
+      // 섹션 바로 위 루트 드롭존(dropzone-before:sectionId)도 이 섹션의 컬럼을 활성화한다.
+      if (targetId === sectionId) {
+        return true;
+      }
+
+      if (targetId && blocks.some((b) => b.id === targetId)) {
+        return true;
+      }
+    }
+
+    // 3) 이 컬럼 맨 아래 드롭존: dropzone-after:sectionId:columnId
+    if (overId === `dropzone-after:${sectionId}:${columnId}`) {
+      return true;
+    }
+
+    return false;
+  })();
 
   return (
     <div
@@ -1208,7 +1484,26 @@ function ColumnDroppable({ id, sectionId, columnId, children }: ColumnDroppableP
       data-column-id={columnId}
       className="flex-1"
     >
-      {children}
+      <div
+        className={`border rounded flex flex-col gap-2 items-stretch justify-start px-2 py-2 bg-slate-950/40 ${
+          isActiveColumn ? "border-sky-500" : "border-slate-800/80"
+        }`}
+        style={{ flexBasis: basis }}
+      >
+        {blocks.length === 0 ? (
+          <span className="text-[11px] px-2 text-center text-slate-500">
+            {`컬럼 영역 (span ${span}/12)`}
+          </span>
+        ) : (
+          <SortableContext items={blocks.map((b) => b.id)} strategy={verticalListSortingStrategy}>
+            <div className="flex flex-col gap-2">
+              {renderBlocks(blocks)}
+              {/* 컬럼 맨 아래 드롭존: 블록을 이 컬럼의 최하단으로 이동 */}
+              <BlockDropzone id={`dropzone-after:${sectionId}:${columnId}`} />
+            </div>
+          </SortableContext>
+        )}
+      </div>
     </div>
   );
 }

src/styles/globals.css

@@ -1,6 +1,4 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
 
 html,
 body {