[FEAT] 드래그 앤 드롭 디테일한 기능 추가 및 디자인 요구사항 반영

frontend/package.json

@@ -15,6 +15,7 @@
     "ci": "pnpm install --frozen-lockfile"
   },
   "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
     "@tanstack/react-query": "^5.64.2",
     "@tanstack/react-query-devtools": "^5.64.2",
     "lottie-react": "^2.4.1",

frontend/src/components/Tooltip/Tooltip.styled.ts

@@ -2,7 +2,7 @@ import { styled } from 'styled-components';
 
 export const TooltipLayout = styled.div`
   position: absolute;
-  top: 0;
+  top: -8px;
   left: 50%;
   transform: translateX(-50%);
 

frontend/src/pages/PlanPage/PlanPage.styled.ts

@@ -3,11 +3,20 @@ import styled from 'styled-components';
 export const PlanPageLayout = styled.section`
   position: relative;
   height: inherit;
+  display: flex;
+  flex-direction: column;
+`;
+
+export const StickyHeader = styled.div`
+  position: sticky;
+`;
 
+export const ScrollableContent = styled.div`
   display: flex;
   flex-direction: column;
   gap: 2.4rem;
-  overflow-y: scroll;
+  padding-top: 2.4rem;
+  overflow-y: auto;
 `;
 
 export const HorizontalLine = styled.div`

frontend/src/pages/PlanPage/components/PlanHeader/PlanHeader.styled.ts

@@ -0,0 +1,5 @@
+import styled from 'styled-components';
+
+export const StickyHeader = styled.div`
+  position: sticky;
+`;

frontend/src/pages/PlanPage/components/PlanHeader/index.tsx

@@ -1,9 +1,10 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { useNavigate } from 'react-router';
 
 import useCancelPlanMutation from '../../hooks/useCancelPlanMutation';
 import usePlanInfoQuery from '../../hooks/usePlanInfoQuery';
 import HomeModal from '../HomeModal';
+import * as S from './PlanHeader.styled';
 
 import Header from '@/components/Header';
 
@@ -27,7 +28,7 @@ const PlanHeader = () => {
   };
 
   return (
-    <>
+    <S.StickyHeader>
       <Header>
         <Header.Left>
           <Header.HomeButton onClick={open} />
@@ -44,7 +45,7 @@ const PlanHeader = () => {
           onConfirm={handleConfirm}
         />
       )}
-    </>
+    </S.StickyHeader>
   );
 };
 

frontend/src/pages/PlanPage/components/TimeBlockContent/PlanContent/PlanContent.styled.ts

@@ -1,15 +1,9 @@
 import styled from 'styled-components';
 
 export const PlanContent = styled.div`
+  position: relative;
   display: flex;
   flex-direction: column;
   gap: 2.4rem;
   padding-bottom: 8rem;
 `;
-
-export const TimeBlockSection = styled.section`
-  display: flex;
-  flex-direction: column;
-  padding: 0 2.4rem;
-  position: relative;
-`;

frontend/src/pages/PlanPage/components/TimeBlockContent/PlanContent/TimeBlockSection/TimeBlockSection.styled.ts

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+
+export const TimeBlockSection = styled.section`
+  display: flex;
+  flex-direction: column;
+  padding: 0 2.4rem;
+`;

frontend/src/pages/PlanPage/components/TimeBlockContent/PlanContent/TimeBlockSection/index.tsx

@@ -0,0 +1,27 @@
+import { useDroppable } from '@dnd-kit/core';
+
+import * as S from './TimeBlockSection.styled';
+
+import { Path } from '@/api/plan';
+
+interface TimeBlockSectionProps {
+  path: Path;
+  children: React.ReactNode;
+}
+
+const TimeBlockSection = ({ path, children }: TimeBlockSectionProps) => {
+  const { setNodeRef } = useDroppable({
+    id: path.pathId,
+    data: {
+      pathId: path.pathId,
+    },
+  });
+
+  return (
+    <S.TimeBlockSection key={path.pathId} ref={setNodeRef}>
+      {children}
+    </S.TimeBlockSection>
+  );
+};
+
+export default TimeBlockSection;

frontend/src/pages/PlanPage/components/TimeBlockContent/PlanContent/index.tsx

@@ -1,150 +1,76 @@
-import { TouchEvent, useEffect, useRef, useState } from 'react';
+import {
+  DndContext,
+  DragOverlay,
+  PointerSensor,
+  closestCenter,
+  useSensor,
+  useSensors,
+} from '@dnd-kit/core';
+import { useRef } from 'react';
 
 import TimeBlockContent from '..';
 import * as S from './PlanContent.styled';
+import TimeBlockSection from './TimeBlockSection';
 import TimeBlockHeader from '../../TimeBlockHeader';
+import TimeBlockItem from '../TimeBlockList/TimeBlockItem';
 
-import { Path, PathTodo } from '@/api/plan';
+import { Path } from '@/api/plan';
 import PlanTooltip from '@/components/PlanTooltip';
-import { ERROR_MESSAGE } from '@/constants/message';
-import useToast from '@/hooks/useToast';
-import useUpdatePathTodoMutation from '@/pages/PlanPage/hooks/useUpdatePathTodoMutation';
-
-const LONG_PRESS_DURATION = 300;
-
-export interface DraggingTodo {
-  todo: PathTodo;
-  x: number;
-  y: number;
-  offsetX: number;
-  offsetY: number;
-}
+import { useDragAndDrop } from '@/pages/PlanPage/hooks/useDragAndDrop';
 
 interface PlanContentProps {
   paths?: Path[];
 }
 
 const PlanContent = ({ paths }: PlanContentProps) => {
-  const [draggingTodo, setDraggingTodo] = useState<DraggingTodo | null>(null);
-  const timeBlockRefs = useRef(new Map<number, HTMLElement>());
-  const longPressTimeoutRef = useRef<NodeJS.Timeout | null>(null);
-
-  const { mutateAsync: updatePathTodo } = useUpdatePathTodoMutation();
-  const { toast } = useToast();
-
-  const handleTouchStart = (e: TouchEvent<HTMLElement>, todo: PathTodo) => {
-    const touch = e.touches[0];
-    const targetElement = e.currentTarget;
-
-    // 터치한 위치와 block의 위치 차이 계산하여 보정
-    const offsetX = touch.pageX - targetElement.offsetLeft;
-    const offsetY = touch.pageY - targetElement.offsetTop;
-
-    longPressTimeoutRef.current = setTimeout(() => {
-      setDraggingTodo({
-        todo,
-        x: touch.pageX - offsetX,
-        y: touch.pageY - offsetY,
-        offsetX,
-        offsetY,
-      });
-    }, LONG_PRESS_DURATION);
-  };
-
-  const handleTouchMove = (e: React.TouchEvent<HTMLDivElement>) => {
-    if (longPressTimeoutRef.current) {
-      clearTimeout(longPressTimeoutRef.current); // 스크롤 시 터치 취소
-      longPressTimeoutRef.current = null;
-    }
-
-    if (!draggingTodo) return;
-
-    const touch = e.touches[0];
-
-    setDraggingTodo((prev) =>
-      prev
-        ? {
-            ...prev,
-            x: touch.pageX - prev.offsetX,
-            y: touch.pageY - prev.offsetY,
-          }
-        : null,
-    );
-  };
-
-  const handleTouchEnd = async (e: React.TouchEvent<HTMLElement>) => {
-    e.stopPropagation();
-
-    if (longPressTimeoutRef.current) {
-      clearTimeout(longPressTimeoutRef.current);
-      longPressTimeoutRef.current = null;
-    }
-
-    if (!draggingTodo) return;
-
-    e.preventDefault();
-
-    const touch = e.changedTouches[0];
-
-    for (const [pathId, timeBlockRef] of timeBlockRefs.current) {
-      const rect = timeBlockRef.getBoundingClientRect();
-      const isValidTargetBlock = touch.clientY >= rect.top && touch.clientY <= rect.bottom;
-
-      if (isValidTargetBlock) {
-        await updatePathTodo(
-          { todoId: draggingTodo.todo.todoId, newPathId: pathId },
-          {
-            onError: () => {
-              toast({ message: ERROR_MESSAGE.UPDATE_PATH_TODO });
-            },
-          },
-        );
-
-        break;
-      }
-    }
-
-    setDraggingTodo(null);
-  };
-
-  useEffect(() => {
-    const handleGlobalTouchEnd = (e: globalThis.TouchEvent) => {
-      if (!draggingTodo) return;
-
-      e.preventDefault();
-    };
-
-    document.addEventListener('touchend', handleGlobalTouchEnd);
-
-    return () => document.removeEventListener('touchend', handleGlobalTouchEnd);
-  }, [draggingTodo]);
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const { draggingTodo, hoveredPathId, handleDragStart, handleDragEnd, handleDragOver } =
+    useDragAndDrop({ paths, containerRef });
+
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        distance: 8,
+        delay: 300,
+      },
+    }),
+  );
 
   return (
-    <S.PlanContent>
-      {paths?.map((path, idx) => (
-        <S.TimeBlockSection
-          key={path.pathId}
-          ref={(node) => {
-            if (node && timeBlockRefs.current.get(path.pathId) !== node) {
-              timeBlockRefs.current.set(path.pathId, node);
-            } else if (node === null) {
-              timeBlockRefs.current.delete(path.pathId);
-            }
-          }}
-          onTouchEnd={handleTouchEnd}
-          onTouchCancel={handleTouchEnd}
-        >
-          {idx === 0 && <PlanTooltip />}
-          <TimeBlockHeader path={path} />
-          <TimeBlockContent
-            path={path}
-            draggingTodo={draggingTodo}
-            onTouchStart={handleTouchStart}
-            onTouchMove={handleTouchMove}
-          />
-        </S.TimeBlockSection>
-      ))}
-    </S.PlanContent>
+    <DndContext
+      sensors={sensors}
+      collisionDetection={closestCenter}
+      onDragStart={handleDragStart}
+      onDragEnd={handleDragEnd}
+      onDragOver={handleDragOver}
+    >
+      <S.PlanContent ref={containerRef}>
+        <PlanTooltip />
+        {paths?.map((path) => {
+          const shouldShowPreview = hoveredPathId === path.pathId && draggingTodo;
+          const todosWithPreview = shouldShowPreview
+            ? [...path.todos, { ...draggingTodo }]
+            : path.todos;
+
+          return (
+            <TimeBlockSection key={path.pathId} path={path}>
+              <TimeBlockHeader path={path} />
+              <TimeBlockContent
+                path={{ ...path, todos: todosWithPreview }}
+                draggingTodo={draggingTodo}
+              />
+            </TimeBlockSection>
+          );
+        })}
+      </S.PlanContent>
+
+      {/* 드래그 오버레이 */}
+      {draggingTodo && (
+        <DragOverlay dropAnimation={null}>
+          <TimeBlockItem todo={draggingTodo} draggingTodo={draggingTodo} isDragOverlay={true} />
+        </DragOverlay>
+      )}
+    </DndContext>
   );
 };