feat: 짝수 아이템은 다른 짝수 아이템 앞으로 이동 금지 기능 추가

suMin-97 · Aug 5, 2024 · 0c3a5fc · 0c3a5fc
1 parent 55e5414
commit 0c3a5fc
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 10 deletions.
diff --git a/src/components/Board.tsx b/src/components/Board.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import styled from 'styled-components';
 import { DragDropContext, OnDragEndResponder, OnDragUpdateResponder } from 'react-beautiful-dnd';
 import DroppableColumn from './DroppableColumn';
@@ -10,6 +10,7 @@ export const Board = () => {
   const enabled = useAnimationEnabled();
   const {
     columnCount,
+    columnItemCounts,
     handleColumnCountUp,
     handleColumnCountDown,
     itemsContainer,
@@ -35,15 +36,37 @@ export const Board = () => {
     [itemsContainer, isForbidden, setIsForbidden],
   );
 
-  const onDragUpdate: OnDragUpdateResponder = useCallback((result) => {
-    const { source, destination } = result;
+  const onDragUpdate: OnDragUpdateResponder = useCallback(
+    (result) => {
+      const { source, destination } = result;
 
-    if (source.droppableId === 'Column-1' && destination?.droppableId === 'Column-3') {
-      setIsForbidden(true);
-    } else {
-      setIsForbidden(false);
-    }
-  }, []);
+      if (!destination) {
+        setIsForbidden(false);
+        return;
+      }
+
+      const isSameColumn = source.droppableId === destination.droppableId;
+      const isSameLocation = isSameColumn && source.index === destination.index;
+      const isLastItemInDestination =
+        columnItemCounts[destination.droppableId] === destination.index + (isSameColumn ? 1 : 0);
+      const isOddIndexToOddIndex = source.index % 2 === 1 && destination.index % 2 === 1;
+      const isColumn1ToColumn3 =
+        source.droppableId === 'Column-1' && destination.droppableId === 'Column-3';
+
+      if (isColumn1ToColumn3) {
+        setIsForbidden(true);
+      } else if (isSameLocation) {
+        setIsForbidden(false);
+      } else if (isLastItemInDestination) {
+        setIsForbidden(false);
+      } else if (isOddIndexToOddIndex) {
+        setIsForbidden(true);
+      } else {
+        setIsForbidden(false);
+      }
+    },
+    [columnItemCounts],
+  );
 
   if (!enabled) {
     return null;

diff --git a/src/hooks/useColumnCounterWithItems.ts b/src/hooks/useColumnCounterWithItems.ts
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { ItemsContainer } from '@/types';
 import { getItemsContainer } from '@/utils';
 
@@ -17,14 +17,24 @@ export const useColumnCounterWithItems = () => {
       setColumnCount(columnCount + 1);
     }
   };
+
   const handleColumnCountDown = () => {
     if (1 < columnCount && columnCount <= 4) {
       setColumnCount(columnCount - 1);
     }
   };
 
+  const columnItemCounts = useMemo(() => {
+    const counts: Record<string, number> = {};
+    Object.keys(itemsContainer).forEach((key) => {
+      counts[key] = itemsContainer[key].length;
+    });
+    return counts;
+  }, [itemsContainer]);
+
   return {
     columnCount,
+    columnItemCounts,
     handleColumnCountUp,
     handleColumnCountDown,
     itemsContainer,