[FEAT] 마우스로 드래그 앤 드랍 가능하게 변경 및 Dnd 관련 로직 및 컴포넌트 한 폴더로 이동 (#28)

* refactor: Dnd 관련 로직 한 폴더로 이동

* refactor: props를 context로 교체

* refactor: Dnd 관련 폴더로 pointerWithinWithClosestCenter 이동

* chore: lint에서 ! assertion 허용

* feat: drag-select 기능 구현 (아직 DragOverlay 관련 로직 미구현)

* chore: lint script warn 이상만 찍히게 변경

* feat: DragSelect 적용

* feat: 사용하지 않는 SelectProvider 제거

* feat: getAbsoluteCoordinates 로직 수정

* fix: DragSelectOverlay 초기값 null로 변경

* design: 마우스 selection 색 변경

* feat: NonSelectArea 구현 및 적용

* chore: DragSelectOverlay will-change 속성 추가

* feat: DragSelect에서 함수 분리 및 스크롤 될 때도 영역 계산

* fix: NonDragSelectArea에서 drag-select 방지

* feat: drag-select 내부에서 사용하는 data context 추가

* feat: useDragSelect hook 구현 및 drag-select 내부에 적용

* feat: 사용하지 않는 drag-select 관련 컴포넌트 제거

* refactor: NonDragSelectArea에서 side-effect 발생 로직 제거

* feat: drag-select 기능 컴포넌트에 적용

* feat: Context로 element를 넘기기 및 DragSelectOver가로 길이 지정

* refactor: 타입명 수정

* refactor: DragSelectOverlay 스타일 외부에서 커스텀하게 변경

* fix: getBoudingClientRect시 container 기준으로 계산

* feat: drag-select로 기능 적용

* feat: distance 추가해서 이벤트 시작 로직 구현

* docs: drag-select 문서 작성

* chore: 주석 제거

* refactor: DragSelectContext 함수 분리

Author: dmdgpdi

biome.json

@@ -30,7 +30,8 @@
         "all": true,
         "noBarrelFile": "error",
         "noReExportAll": "error"
-      }
+      },
+      "style": { "noNonNullAssertion": "info" }
     }
   },
   "javascript": {

techpick/package.json

@@ -7,7 +7,7 @@
     "dev:https": "dotenv -e .env.development -- bash -c 'yarn next dev -H $NEXT_PUBLIC_DOMAIN -p 3000 --experimental-https'",
     "build": "next build",
     "start": "next start",
-    "lint": "biome lint ./src",
+    "lint": "biome lint --diagnostic-level=warn ./src",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "test": "yarn jest",

techpick/src/app/(signed)/folders/[folderId]/page.css.ts

@@ -0,0 +1,8 @@
+import { style } from '@vanilla-extract/css';
+
+export const dragSelectOverlayStyle = style({
+  backgroundColor: 'rgba(0, 123, 255, 0.3)',
+  border: '1px solid rgba(0, 123, 255, 0.8)',
+  pointerEvents: 'none',
+  willChange: 'left, top, width, height',
+});

techpick/src/app/(signed)/folders/[folderId]/page.tsx

@@ -6,20 +6,59 @@ import { PickContentLayout } from '@/components/PickContentLayout';
 import { PickDraggableInfiniteScrollList } from '@/components/PickDraggableInfiniteScrollList';
 import { useClearSelectedPickIdsOnMount } from '@/hooks/useClearSelectedPickIdsOnMount';
 import { useResetPickFocusOnOutsideClick } from '@/hooks/useResetPickFocusOnOutsideClick';
+import { DragSelectContext } from '@/libs/@drag-select/DragSelectContext';
+import { DragSelectOverlay } from '@/libs/@drag-select/DragSelectOverlay';
+import type { DragSelectMoveEvent } from '@/libs/@drag-select/type';
+import { usePickStore } from '@/stores/pickStore';
+import { isPickInfoObject } from '@/utils/isPickInfoObject';
 import { useParams } from 'next/navigation';
+import { useEffect, useRef, useState } from 'react';
+import { dragSelectOverlayStyle } from './page.css';
 
 export default function FolderDetailPage() {
   const { folderId: stringFolderId } = useParams<{ folderId: string }>();
   const folderId = Number(stringFolderId);
   useResetPickFocusOnOutsideClick();
   useClearSelectedPickIdsOnMount();
+  const setSelectedPickIdList = usePickStore(
+    (state) => state.setSelectedPickIdList,
+  );
+  const setFocusedPickId = usePickStore((state) => state.setFocusedPickId);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [container, setContainer] = useState<HTMLElement | null>(null);
+
+  useEffect(() => {
+    setContainer(containerRef.current);
+  }, []);
+
+  const onDragSelectEnd = ({ dragSelectItems }: DragSelectMoveEvent) => {
+    const selectedPickIdList: number[] = [];
+
+    for (const dragSelectItem of dragSelectItems) {
+      const pickInfo = dragSelectItem.data?.pickInfo;
+      if (isPickInfoObject(pickInfo)) {
+        selectedPickIdList.push(pickInfo.id);
+      }
+    }
+
+    setSelectedPickIdList(selectedPickIdList);
+    if (selectedPickIdList[0]) {
+      setFocusedPickId(selectedPickIdList[0]);
+    }
+  };
 
   return (
-    <FolderContentLayout>
-      <FolderContentHeader folderId={folderId} />
-      <PickContentLayout>
-        <PickDraggableInfiniteScrollList folderId={folderId} />
-      </PickContentLayout>
+    <FolderContentLayout ref={containerRef}>
+      <DragSelectContext
+        container={container!}
+        onDragSelectEnd={onDragSelectEnd}
+      >
+        <FolderContentHeader folderId={folderId} />
+        <PickContentLayout>
+          <PickDraggableInfiniteScrollList folderId={folderId} />
+        </PickContentLayout>
+        <DragSelectOverlay className={dragSelectOverlayStyle} />
+      </DragSelectContext>
     </FolderContentLayout>
   );
 }

techpick/src/app/(signed)/layout.tsx

@@ -2,7 +2,7 @@ import { getBasicFolders } from '@/apis/folder/getBasicFolders';
 import { getFolders } from '@/apis/folder/getFolders';
 import { getTagList } from '@/apis/tag/getTagList';
 import { FeedbackToolbar } from '@/components/FeedbackToolbar';
-import { FolderAndPickDndContextProvider } from '@/components/FolderAndPickDndContextProvider';
+import { FolderAndPickDndContextProvider } from '@/components/FolderAndPickDndContextProvider/FolderAndPickDndContextProvider';
 import { MobileNavigationBar } from '@/components/MobileNavigationBar';
 import ShortcutKey from '@/components/ShortcutKey';
 import { SideNavigationBar } from '@/components/SideNavigationBar/SideNavigationBar';

techpick/src/app/layout.css.ts

@@ -1,5 +1,10 @@
 import { style } from '@vanilla-extract/css';
+import { globalStyle } from '@vanilla-extract/css';
 
 export const preventOverscrollBehaviorY = style({
   overscrollBehaviorY: 'none',
 });
+
+globalStyle('::selection', {
+  backgroundColor: '#e0edfb',
+});

techpick/src/components/DndMonitorContext.tsx

@@ -0,0 +1,15 @@
+'use client';
+
+import { memo } from 'react';
+import { useFolderToFolderDndMonitor } from './useFolderToFolderDndMonitor';
+import { usePickToFolderDndMonitor } from './usePickToFolderDndMonitor';
+import { usePickToPickDndMonitor } from './usePickToPickDndMonitor';
+import { useRecommendPickToFolderDndMonitor } from './useRecommendPickToFolderDndMonitor';
+
+export const DndMonitorContext = memo(function DndMonitorContext() {
+  usePickToPickDndMonitor();
+  useFolderToFolderDndMonitor();
+  usePickToFolderDndMonitor();
+  useRecommendPickToFolderDndMonitor();
+  return null;
+});

techpick/src/components/FolderAndPickDndContextProvider/DndMonitorContext.tsx

@@ -1,5 +1,4 @@
 'use client';
-
 import { useGetDragOverStyle } from '@/hooks/useGetDragOverStyle';
 import { useFetchFolders } from '@/queries/useFetchFolders';
 import { usePickStore } from '@/stores/pickStore';
@@ -13,24 +12,26 @@ import {
   type DragStartEvent,
   useDndMonitor,
 } from '@dnd-kit/core';
-import { useState } from 'react';
+import { memo, useState } from 'react';
+import { useElementClickPosition } from '../useElementClickPosition';
 import { FolderItemOverlay } from './FolderItemOverlay';
 import { PickCarouselCardOverlay } from './PickCarouselCardOverlay';
 import { PickDragOverlayShadowList } from './PickDragOverlayShadowList';
 import { PickRecordOverlay } from './PickRecordOverlay';
 import { dragCountStyle, stackedOverlayStyle } from './dragOverlay.css';
 
-export function DargOverlay({ elementClickPosition }: DargOverlayProps) {
+export const DargOverlay = memo(function DragOverlay() {
+  const { elementClickPosition } = useElementClickPosition();
   const isPickDragging = usePickStore((state) => state.isDragging);
   const draggingPickInfo = usePickStore((state) => state.draggingPickInfo);
   const selectedPickIdList = usePickStore((state) => state.selectedPickIdList);
   const [draggingObjectType, setDraggingObjectType] =
     useState<DraggingObjectType>(null);
   const [draggingRecommendPickInfo, setDraggingRecommendPickInfo] =
     useState<RecommendPickType | null>(null);
-  const { data: folderRecord } = useFetchFolders();
   const [draggingFolderInfo, setDraggingFolderInfo] =
     useState<FolderType | null>(null);
+  const { data: folderRecord } = useFetchFolders();
 
   const onDragStart = (event: DragStartEvent) => {
     const { active } = event;
@@ -66,15 +67,15 @@ export function DargOverlay({ elementClickPosition }: DargOverlayProps) {
     isDragging: isPickDragging,
     scale: 0.7,
   });
-  const { overlayStyle: folderOverlayStyle } = useGetDragOverStyle({
-    elementClickPosition,
-    isDragging: draggingObjectType === 'folder',
-  });
   const { overlayStyle: recommendPickOverlayStyle } = useGetDragOverStyle({
     elementClickPosition,
     isDragging: draggingObjectType === 'recommendPick',
     scale: 0.4,
   });
+  const { overlayStyle: folderOverlayStyle } = useGetDragOverStyle({
+    elementClickPosition,
+    isDragging: draggingObjectType === 'folder',
+  });
   const selectedPickListCount = selectedPickIdList.length - 1;
   const shadowCount = Math.min(selectedPickListCount, 5);
 
@@ -94,28 +95,21 @@ export function DargOverlay({ elementClickPosition }: DargOverlayProps) {
     );
   }
 
-  if (draggingObjectType === 'folder' && draggingFolderInfo) {
+  if (draggingObjectType === 'recommendPick' && draggingRecommendPickInfo) {
     return (
-      <DragOverlayPrimitive style={folderOverlayStyle}>
-        <FolderItemOverlay name={draggingFolderInfo.name} />
+      <DragOverlayPrimitive style={recommendPickOverlayStyle}>
+        <PickCarouselCardOverlay recommendPick={draggingRecommendPickInfo} />
       </DragOverlayPrimitive>
     );
   }
 
-  if (draggingObjectType === 'recommendPick' && draggingRecommendPickInfo) {
+  if (draggingObjectType === 'folder' && draggingFolderInfo) {
     return (
-      <DragOverlayPrimitive style={recommendPickOverlayStyle}>
-        <PickCarouselCardOverlay recommendPick={draggingRecommendPickInfo} />
+      <DragOverlayPrimitive style={{ ...folderOverlayStyle }}>
+        <FolderItemOverlay name={draggingFolderInfo.name} />
       </DragOverlayPrimitive>
     );
   }
-}
-
-interface DargOverlayProps {
-  elementClickPosition: {
-    x: number;
-    y: number;
-  };
-}
+});
 
 type DraggingObjectType = 'recommendPick' | 'pick' | 'folder' | null;

…c/components/DragOverlay/DragOverlay.tsx …textProvider/DragOverlay/DragOverlay.tsxtechpick/src/components/DragOverlay/DragOverlay.tsx renamed to techpick/src/components/FolderAndPickDndContextProvider/DragOverlay/DragOverlay.tsx techpick/src/components/DragOverlay/DragOverlay.tsx renamed to techpick/src/components/FolderAndPickDndContextProvider/DragOverlay/DragOverlay.tsx

@@ -1,5 +1,5 @@
 import { FolderOpen as FolderOpenIcon } from 'lucide-react';
-import { NavigationItem } from '../SideNavigationBar/NavigationItem';
+import { NavigationItem } from '../../SideNavigationBar/NavigationItem';
 import { folderItemOverlay } from './folderItemOverlay.css';
 
 export function FolderItemOverlay({ name }: FolderItemOverlayProps) {