[#54] Drag & Drop UI 구현

components/Card/Card.tsx

@@ -1,5 +1,5 @@
 import ProfileIcon from "@/components/Members/ProfileIcon";
-import { CardData } from "@/types/api.type";
+import { CardData, EntireData } from "@/types/api.type";
 import Image from "next/image";
 import ChipTag from "../Chips/ChipTag/ChipTag";
 import styles from "./Card.module.css";
@@ -12,10 +12,10 @@ interface CardProps {
   data: CardData;
   index: number;
   columnTitle: string;
-  setCardList: Dispatch<SetStateAction<CardData[]>>;
+  setEntireList: Dispatch<SetStateAction<EntireData>>;
 }
 
-const Card = ({ data, index, columnTitle, setCardList }: CardProps) => {
+const Card = ({ data, index, columnTitle, setEntireList }: CardProps) => {
   const [isCardModalOpen, setIsCardModalOpen] = useState(false);
   const { slicedTagList, etc } = tagSlicer(data.tags);
 
@@ -82,7 +82,7 @@ const Card = ({ data, index, columnTitle, setCardList }: CardProps) => {
               data={data}
               columnTitle={columnTitle}
               handleModalClose={handleCardModalToggle}
-              setCardList={setCardList}
+              setEntireList={setEntireList}
             />
           )}
         </>

components/Column/Column.tsx

@@ -73,8 +73,6 @@ export const Column = ({
   });
 
   //  카드리스트 가져오기
-  const [cardList, setCardList] = useState<CardData[]>([]);
-
   const getComments = async () => {
     const { id, size, cursorId } = pagination;
     let response;
@@ -91,7 +89,6 @@ export const Column = ({
     setPagination((prevValue) => {
       return { ...prevValue, cursorId: cursor };
     });
-    setCardList((prevValue) => [...prevValue, ...cards]);
     setEntireList((prev) => ({
       ...prev,
       cards: { ...prev.cards, [columnId]: [...(prev.cards[columnId] ?? []), ...cards] },
@@ -168,41 +165,38 @@ export const Column = ({
 
   return (
     <>
-      <div className={style.totalContainer}>
-        {/* 칼럼 상단 */}
-        <div className={style.headerContainer}>
-          <div className={style.todoWrapper}>
-            <ChipTodo size="sm" color="white">
-              {title}
-            </ChipTodo>
-            <ChipNum>{totalCount}</ChipNum>
-          </div>
-          <button onClick={handleSettingModalToggle}>
-            <Image width={24} height={24} src="/icons/icon-settings.svg" alt="칼럼 설정하기" />
-          </button>
-        </div>
-
-        <div className={style.contentContainer}>
-          {/* 컴포넌트로 바꾸기 */}
-          <Button buttonType="plus_icon" color="white" onClick={handleCreateModalToggle}>
-            <ChipPlus size="lg" />
-          </Button>
-          <Droppable droppableId={String(columnId)}>
-            {(provided) => (
-              <div {...provided.droppableProps} ref={provided.innerRef}>
-                {entireList.cards[columnId]?.map((card, index) => (
-                  <Card key={card.id} columnTitle={title} data={card} index={index} setCardList={setCardList} />
-                ))}
-                {provided.placeholder}
+      <Droppable droppableId={String(columnId)}>
+        {(provided) => (
+          <div {...provided.droppableProps} ref={provided.innerRef} className={style.totalContainer}>
+            {/* 칼럼 상단 */}
+            <div className={style.headerContainer}>
+              <div className={style.todoWrapper}>
+                <ChipTodo size="sm" color="white">
+                  {title}
+                </ChipTodo>
+                <ChipNum>{totalCount}</ChipNum>
               </div>
-            )}
-          </Droppable>
-          <p ref={myRef}></p>
-        </div>
-      </div>
+              <button onClick={handleSettingModalToggle}>
+                <Image width={24} height={24} src="/icons/icon-settings.svg" alt="칼럼 설정하기" />
+              </button>
+            </div>
 
+            <div className={style.contentContainer}>
+              {/* 컴포넌트로 바꾸기 */}
+              <Button buttonType="plus_icon" color="white" onClick={handleCreateModalToggle}>
+                <ChipPlus size="lg" />
+              </Button>
+              {entireList.cards[columnId]?.map((card, index) => (
+                <Card key={card.id} columnTitle={title} data={card} index={index} setEntireList={setEntireList} />
+              ))}
+              <p ref={myRef}></p>
+            </div>
+            {provided.placeholder}
+          </div>
+        )}
+      </Droppable>
       {isSettingModalOpen && (
-        <ModalWrapper size="md">
+        <ModalWrapper size="md" handleModalClose={handleSettingModalToggle}>
           <form className={stylesFromSingle.form} onSubmit={handleModifyColumn} noValidate>
             <div className={stylesFromSingle.modal}>
               <div className={stylesFromSingle.modalTitle}>컬럼 관리</div>
@@ -236,7 +230,6 @@ export const Column = ({
       )}
       {isCreateModalOpen && (
         <MultiInputModal
-          setCardList={setCardList}
           setEntireList={setEntireList}
           title="할 일 생성"
           buttonText="생성"

modals/EditInputModal.tsx

@@ -3,7 +3,7 @@ import Input from "@/components/Input/Input";
 import InputWrapper from "@/components/Input/InputWrapper";
 import useDropdownController from "@/hooks/useDropdownController";
 import useInputController from "@/hooks/useInputController";
-import { CardData, ColumnData, Member } from "@/types/api.type";
+import { CardData, ColumnData, EntireData, Member } from "@/types/api.type";
 import formatDateString from "@/utils/formatDateString";
 import { getAccessTokenFromDocument } from "@/utils/getAccessToken";
 import Image from "next/image";
@@ -49,7 +49,7 @@ const findColumnId = (columnList: ColumnData[], value: string | undefined) => {
 interface EditInputModalProp {
   title: string;
   buttonText: string;
-  setCardList: Dispatch<SetStateAction<CardData[]>>;
+  setEntireList: Dispatch<SetStateAction<EntireData>>;
   handleModalClose: () => void;
   initialvalue: CardData;
   columnTitle: string;
@@ -59,7 +59,7 @@ const EditInputModal = ({
   title,
   buttonText,
   handleModalClose,
-  setCardList,
+  setEntireList,
   initialvalue,
   columnTitle,
 }: EditInputModalProp) => {
@@ -134,11 +134,14 @@ const EditInputModal = ({
     e.preventDefault();
 
     if (imageFile === null) {
-      const cardUpdateRes = await putData({ path: "card", id: initialvalue.id, data, accessToken });
+      const cardNoImageRes = await putData({ path: "card", id: initialvalue.id, data, accessToken });
 
-      if (cardUpdateRes?.status === 200) {
+      if (cardNoImageRes?.status === 200) {
         handleModalClose();
-        setCardList((prev) => prev.map((v) => (v.id === cardUpdateRes.data.id ? cardUpdateRes.data : v)));
+        setEntireList((prev) => ({
+          ...prev,
+          columns: { ...prev.columns, [cardNoImageRes.data.id]: cardNoImageRes.data },
+        }));
       }
     }
 
@@ -147,11 +150,14 @@ const EditInputModal = ({
 
       const dataWithImage = { ...data, imageUrl };
 
-      const cardRes = await putData({ path: "card", id: initialvalue.id, data: dataWithImage, accessToken });
+      const cardWithImageRes = await putData({ path: "card", id: initialvalue.id, data: dataWithImage, accessToken });
 
-      if (cardRes?.status === 200) {
+      if (cardWithImageRes?.status === 200) {
         handleModalClose();
-        setCardList((prev) => prev.map((v) => (v.id === cardRes.data.id ? cardRes.data : v)));
+        setEntireList((prev) => ({
+          ...prev,
+          columns: { ...prev.columns, [cardWithImageRes.data.id]: cardWithImageRes.data },
+        }));
       }
     }
   };

modals/MultiInputModal.tsx

@@ -22,7 +22,6 @@ interface MultiInputModalProp {
   buttonText: string;
   columnId: number;
   dashboardId: number;
-  setCardList: Dispatch<SetStateAction<CardData[]>>;
   setEntireList: Dispatch<SetStateAction<EntireData>>;
   assigneeList: Member[];
   handleModalClose: () => void;
@@ -33,7 +32,6 @@ const MultiInputModal = ({
   buttonText,
   handleModalClose,
   columnId,
-  setCardList,
   setEntireList,
   dashboardId,
   assigneeList,

modals/TaskCardModal.tsx

@@ -1,7 +1,7 @@
 import useApi from "@/hooks/useApi";
 import EditInputModal from "@/modals/EditInputModal";
 import CommentList from "@/modals/components/Comment/CommentList";
-import { CardData } from "@/types/api.type";
+import { CardData, EntireData } from "@/types/api.type";
 import { getAccessTokenFromDocument } from "@/utils/getAccessToken";
 import Image from "next/image";
 import { Dispatch, FocusEvent, FormEvent, SetStateAction, useRef, useState } from "react";
@@ -15,11 +15,11 @@ import AssigneeAndDueDateInfo from "./components/AssigneeAndDueDateInfo/Assignee
 interface TaskCardInfoProps {
   columnTitle: string;
   data: CardData;
-  setCardList: Dispatch<SetStateAction<CardData[]>>;
+  setEntireList: Dispatch<SetStateAction<EntireData>>;
   handleModalClose: () => void;
 }
 
-const TaskCardModal = ({ data, columnTitle, setCardList, handleModalClose }: TaskCardInfoProps) => {
+const TaskCardModal = ({ data, columnTitle, setEntireList, handleModalClose }: TaskCardInfoProps) => {
   const [isKebabOpen, setIsKebabOpen] = useState(false);
   const [isCardModifyModalOpen, setCardModifyModalOpen] = useState(false);
   const [isCardDeleteModalOpen, setCardDeleteModalOpen] = useState(false);
@@ -62,10 +62,15 @@ const TaskCardModal = ({ data, columnTitle, setCardList, handleModalClose }: Tas
     if (res?.status === 204) {
       handleDeleteModalToggle();
       handleModalClose();
-      setCardList((prevValue) => {
-        const newCardList = prevValue.filter((card) => card.id !== data.id);
-        return newCardList;
-      });
+      setEntireList(
+        (prev) => (
+          delete prev.columns[data.columnId],
+          {
+            ...prev,
+            columnOrder: prev.columnOrder.filter((id) => id !== data.columnId),
+          }
+        )
+      );
     }
   };
 
@@ -94,7 +99,7 @@ const TaskCardModal = ({ data, columnTitle, setCardList, handleModalClose }: Tas
                 title="할 일 수정"
                 columnTitle={columnTitle}
                 buttonText="수정"
-                setCardList={setCardList}
+                setEntireList={setEntireList}
                 handleModalClose={handleModifyModalToggle}
               />
             )}

pages/dashboard/[boardId]/index.tsx

@@ -15,7 +15,8 @@ import { getAccessTokenFromCookie } from "@/utils/getAccessToken";
 import { GetServerSidePropsContext, InferGetServerSidePropsType } from "next";
 import { FormEvent, useCallback, useEffect, useState } from "react";
 import style from "./dashboard.module.css";
-import { DragDropContext } from "@hello-pangea/dnd";
+import { DragDropContext, DropResult } from "@hello-pangea/dnd";
+import { useRouter } from "next/router";
 
 export const getServerSideProps = async (context: GetServerSidePropsContext) => {
   const accessToken = getAccessTokenFromCookie(context) as string;
@@ -102,18 +103,37 @@ const Dashboard = ({
     }
   };
 
-  const [mounted, setMounted] = useState(false);
+  const [mount, setMount] = useState(false);
+  const router = useRouter();
 
   useEffect(() => {
-    setMounted(true);
+    setMount(true);
     setEntireList(entireData);
-  }, [entireData]);
-
-  const onDragEnd = useCallback(() => {}, []);
-
-  if (!mounted) return null;
-
-  console.log(entireList);
+  }, [router.query.boardId]);
+
+  const onDragEnd = useCallback((result: DropResult) => {
+    const { destination, source, draggableId } = result;
+    if (!destination) return;
+    if (destination.droppableId === source.droppableId) return;
+    if (destination.droppableId === source.droppableId && source.index === destination.index) return;
+
+    console.log(entireList);
+    console.log(source.droppableId, destination.droppableId);
+    const dragStartColumnId = Number(source.droppableId);
+    const startCardList = entireList.cards[dragStartColumnId];
+    const movingCard = startCardList.splice(source.index, 1);
+
+    const dragEndColumnId = Number(destination.droppableId);
+    const endCardList = entireList.cards[dragEndColumnId];
+    endCardList.splice(destination.index, 0, ...movingCard);
+
+    setEntireList((prev) => ({
+      ...prev,
+      cards: { ...prev.cards, [dragStartColumnId]: startCardList, [dragEndColumnId]: endCardList },
+    }));
+  }, []);
+
+  if (!mount) return;
   return (
     <>
       {/* 대시보드에 맞는 레이아웃으로 설정-헤더 수정 */}
@@ -150,7 +170,7 @@ const Dashboard = ({
       </MenuLayout>
 
       {isCreateModal && (
-        <ModalWrapper size="md">
+        <ModalWrapper size="md" handleModalClose={handleCreateNewColumnModalToggle}>
           <form className={stylesFromSingle.form} onSubmit={handleSubmit} noValidate>
             <div className={stylesFromSingle.modal}>
               <div className={stylesFromSingle.modalTitle}>새 컬럼 생성</div>