[FIX] drag & drop 후 정렬 변경 (#360)

* fix: drag & drop 후 정렬 변경 * refactor: isSameParentFolder parameter 변경(동일한 값)
Kernel360 · Oct 31, 2024 · 67f9ca6 · 67f9ca6
1 parent 36f4912
commit 67f9ca6
Show file tree

Hide file tree

Showing 5 changed files with 76 additions and 32 deletions.
diff --git a/frontend/techpick/src/components/FolderTree/FolderDropZone.tsx b/frontend/techpick/src/components/FolderTree/FolderDropZone.tsx
@@ -21,6 +21,7 @@ export function FolderDropZone({ children }: PropsWithChildren) {
     selectedFolderList,
     setSelectedFolderList,
     setIsDragging,
+    setFocusFolderId,
   } = useTreeStore();
   const mouseSensor = useSensor(MouseSensor, {
     activationConstraint: {
@@ -41,7 +42,9 @@ export function FolderDropZone({ children }: PropsWithChildren) {
     const { active } = event;
 
     if (!selectedFolderList.includes(Number(active.id))) {
+      setFocusFolderId(Number(event.active.id));
       setSelectedFolderList([Number(event.active.id)]);
+
       return;
     }
   };

diff --git a/frontend/techpick/src/components/FolderTree/FolderInfoItem.tsx b/frontend/techpick/src/components/FolderTree/FolderInfoItem.tsx
@@ -13,12 +13,19 @@ import {
 import type { FolderMapType } from '@/types';
 
 export const FolderInfoItem = ({ id, name }: FolderInfoItemProps) => {
-  const { treeDataMap, selectedFolderList, setSelectedFolderList, isDragging } =
-    useTreeStore();
+  const {
+    treeDataMap,
+    selectedFolderList,
+    setSelectedFolderList,
+    isDragging,
+    setFocusFolderId,
+    focusFolderId,
+  } = useTreeStore();
 
   const isSelected = selectedFolderList.includes(id);
 
   const selectSingleFolder = (id: number) => {
+    setFocusFolderId(id);
     setSelectedFolderList([id]);
   };
 
@@ -27,16 +34,16 @@ export const FolderInfoItem = ({ id, name }: FolderInfoItemProps) => {
     selectedList: number[],
     treeDataMap: FolderMapType
   ) => {
-    if (!isSameParentFolder(id, selectedList[0], treeDataMap)) {
+    if (!focusFolderId || !isSameParentFolder(id, focusFolderId, treeDataMap)) {
       selectSingleFolder(id);
       return;
     }
 
-    const newSelectedList = getSelectedFolderRange(
-      id,
-      selectedList,
-      treeDataMap
-    );
+    const newSelectedList = getSelectedFolderRange({
+      startFolderId: focusFolderId,
+      endFolderId: id,
+      treeDataMap,
+    });
     setSelectedFolderList(newSelectedList);
   };
 

diff --git a/frontend/techpick/src/components/FolderTree/folderInfoItem.util.ts b/frontend/techpick/src/components/FolderTree/folderInfoItem.util.ts
@@ -13,30 +13,35 @@ export const isSameParentFolder = (
   );
 };
 
-export const getSelectedFolderRange = (
-  id: number,
-  selectedList: number[],
-  treeDataMap: FolderMapType
-) => {
-  const parentFolderInfo = treeDataMap[treeDataMap[id].parentFolderId];
-  const lastSelectedIndex = parentFolderInfo.childFolderList.findIndex(
-    (item) => item === selectedList[0]
+// 여기서 selectedFolderId
+export const getSelectedFolderRange = ({
+  startFolderId,
+  endFolderId,
+  treeDataMap,
+}: GetSelectedFolderRangePayload) => {
+  const parentFolderInfo = treeDataMap[treeDataMap[endFolderId].parentFolderId];
+  const firstSelectedIndex = parentFolderInfo.childFolderList.findIndex(
+    (childFolderId) => childFolderId === startFolderId
   );
-  const currentIndex = parentFolderInfo.childFolderList.findIndex(
-    (item) => item === id
+  const endSelectedIndex = parentFolderInfo.childFolderList.findIndex(
+    (childFolderId) => childFolderId === endFolderId
   );
 
-  if (!hasIndex(lastSelectedIndex) || !hasIndex(currentIndex)) return [];
+  if (!hasIndex(firstSelectedIndex) || !hasIndex(endSelectedIndex)) return [];
 
-  const start = Math.min(lastSelectedIndex, currentIndex);
-  const end = Math.max(lastSelectedIndex, currentIndex);
+  const start = Math.min(firstSelectedIndex, endSelectedIndex);
+  const end = Math.max(firstSelectedIndex, endSelectedIndex);
 
-  const newSelectedFolderList = parentFolderInfo.childFolderList
-    .slice(start, end + 1)
-    .filter((selectedItem) => selectedItem !== selectedList[0]);
+  const newSelectedFolderList = parentFolderInfo.childFolderList.slice(
+    start,
+    end + 1
+  );
 
-  /**
-   * shift click을 여러번 해도 처음 선택한 기준점이 바뀌지 않게 합니다.
-   */
-  return [selectedList[0], ...newSelectedFolderList];
+  return newSelectedFolderList;
 };
+
+interface GetSelectedFolderRangePayload {
+  startFolderId: number;
+  endFolderId: number;
+  treeDataMap: FolderMapType;
+}
diff --git a/frontend/techpick/src/stores/dndTreeStore/dndTreeStore.ts b/frontend/techpick/src/stores/dndTreeStore/dndTreeStore.ts
@@ -20,6 +20,7 @@ type MoveFolderPayload = {
 type TreeState = {
   treeDataMap: FolderMapType;
   selectedFolderList: SelectedFolderListType;
+  focusFolderId: number | null;
   from: Active | null;
   to: Over | null;
   isDragging: boolean;
@@ -31,7 +32,6 @@ type TreeAction = {
   updateFolder: () => void;
   deleteFolder: () => void;
   moveFolder: ({ from, to, selectedFolderList }: MoveFolderPayload) => void;
-  focusFolder: () => void;
   movePick: () => void;
   setTreeMap: (newTreeDate: FolderMapType) => void;
   setSelectedFolderList: (
@@ -40,12 +40,14 @@ type TreeAction = {
   setFrom: (newFrom: Active) => void;
   setTo: (newTo: Over) => void;
   setIsDragging: (isDragging: boolean) => void;
+  setFocusFolderId: (newFolderId: number) => void;
   filterByParentId: (parentId: UniqueIdentifier) => FolderType[];
 };
 
 const initialState: TreeState = {
   treeDataMap: {},
   selectedFolderList: [],
+  focusFolderId: null,
   from: null,
   to: null,
   isDragging: false,
@@ -112,8 +114,11 @@ export const useTreeStore = create<TreeState & TreeAction>()(
         });
       });
     },
-
-    focusFolder: () => {},
+    setFocusFolderId: (newFolderId) => {
+      set((state) => {
+        state.focusFolderId = newFolderId;
+      });
+    },
     movePick: () => {},
     setTreeMap: (newTreeDate) => {
       set((state) => {

diff --git a/frontend/techpick/src/stores/dndTreeStore/treeMockDate.ts b/frontend/techpick/src/stores/dndTreeStore/treeMockDate.ts
@@ -5,7 +5,7 @@ export const mockFolders: FolderMapType = {
     id: -1,
     name: 'Root',
     parentFolderId: 0,
-    childFolderList: [1, 2, 3, 4, 5],
+    childFolderList: [1, 2, 3, 4, 5, 6, 7, 8, 9],
   },
   '1': {
     id: 1,
@@ -37,4 +37,28 @@ export const mockFolders: FolderMapType = {
     parentFolderId: -1,
     childFolderList: [],
   },
+  '6': {
+    id: 6,
+    name: 'Projects',
+    parentFolderId: -1,
+    childFolderList: [],
+  },
+  '7': {
+    id: 7,
+    name: 'Notes',
+    parentFolderId: -1,
+    childFolderList: [],
+  },
+  '8': {
+    id: 8,
+    name: 'Archives',
+    parentFolderId: -1,
+    childFolderList: [],
+  },
+  '9': {
+    id: 9,
+    name: 'Favorites',
+    parentFolderId: -1,
+    childFolderList: [],
+  },
 };