[#54] Drag & Drop UI 구현

apis/sender.ts

@@ -13,14 +13,8 @@ class Api {
     if (typeof result === "string") {
       return result;
     }
-    if (typeof result === "function" && "dashboardId" in obj) {
-      return result(obj.dashboardId, obj.invitationId);
-    }
-    if (typeof result === "function" && "id" in obj) {
-      return result(obj.id);
-    }
-    if (typeof result === "function" && "method" in obj) {
-      return result(obj.method);
+    if (typeof result === "function") {
+      return result(obj);
     }
   };
 
@@ -47,7 +41,7 @@ class Api {
       },
     });
     const data = await res.json();
-    return { status: res.status, data };
+    return { status: res.status, data, message: data.message };
   };
 
   put: HTTP<"put"> = async (obj) => {
@@ -59,11 +53,11 @@ class Api {
     });
 
     if (res.status === 204) {
-      return { status: res.status, data: null };
+      return { status: res.status, data: null as any };
     }
-
     const data = await res.json();
-    return { status: res.status, data };
+
+    return { status: res.status, data, message: data.message };
   };
 
   delete: HTTP<"delete"> = async (obj) => {

components/Card/Card.module.css

@@ -54,6 +54,9 @@
 }
 
 .cardCountWrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
   padding: 0.4rem 0.6rem;
   width: fit-content;
   height: 2rem;
@@ -92,32 +95,44 @@
   .cardContainer {
     flex-direction: row;
     align-items: center;
+    gap: 2rem;
   }
-  .imageContent {
-    width: 11rem;
+
+  .imageWrapper {
+    width: 100%;
     height: auto;
   }
+
   .allContentContainer {
     align-items: center;
     flex-direction: row;
   }
+
   .cardTagsWrapper {
     justify-content: start;
     max-width: 20rem;
   }
+
   .cardTagCotainer {
     margin-right: 1.6rem;
   }
+
   .cardCountWrapper {
     display: none;
   }
+
   .cardInfoWrapper {
     justify-content: space-between;
     margin-top: 0;
   }
+
+  .imageWrapper {
+    max-width: 50%;
+  }
+
   .imageWrapper img {
-    width: 9.08rem;
-    height: 5.3rem;
+    width: 100%;
+    height: 8em;
   }
 }
 
@@ -127,43 +142,59 @@
     align-items: flex-start;
     width: 100%;
   }
+
   .cardContentContainer {
     width: 100%;
   }
+
   .imageContent {
     width: 26rem;
     height: 15.2rem;
   }
+
   .allContentContainer {
     flex-direction: column;
     align-items: flex-start;
   }
+
   .cardTitleWrapper {
     font-size: 1.4rem;
   }
+
   .cardTagCotainer {
     margin: 0;
     width: 100%;
     gap: 0.8rem;
   }
+
   .dateIcon {
     width: 1.4rem;
     height: 1.4rem;
   }
+
   .date {
     font-size: 1rem;
   }
+
   .cardInfoWrapper {
     width: 100%;
   }
+
   .cardTagsWrapper {
     max-width: 100%;
   }
+
   .cardCountWrapper {
     display: flex;
   }
+
+  .imageWrapper {
+    width: 100%;
+    max-width: 100%;
+  }
+
   .imageWrapper img {
-    width: 26rem;
-    height: 15.2rem;
+    width: 100%;
+    height: 20rem;
   }
 }

components/Card/Card.tsx

@@ -1,19 +1,21 @@
 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";
 import formatDateString from "@/utils/formatDateString";
 import { Dispatch, SetStateAction, useState } from "react";
 import TaskCardModal from "@/modals/TaskCardModal";
+import { Draggable } from "@hello-pangea/dnd";
 
 interface CardProps {
   data: CardData;
+  index: number;
   columnTitle: string;
-  setCardList: Dispatch<SetStateAction<CardData[]>>;
+  setEntireList: Dispatch<SetStateAction<EntireData>>;
 }
 
-const Card = ({ data, columnTitle, setCardList }: CardProps) => {
+const Card = ({ data, index, columnTitle, setEntireList }: CardProps) => {
   const [isCardModalOpen, setIsCardModalOpen] = useState(false);
   const { slicedTagList, etc } = tagSlicer(data.tags);
 
@@ -22,60 +24,70 @@ const Card = ({ data, columnTitle, setCardList }: CardProps) => {
   };
 
   return (
-    <>
-      <div className={styles.cardContainer} onClick={handleCardModalToggle}>
-        {/* 카드 이미지 */}
-        {data.imageUrl && (
-          <div className={styles.imageWrapper}>
-            <Image width={274} height={160} className={styles.imageContent} src={data.imageUrl} alt="카드" />
-          </div>
-        )}
-        {/* 카드 내용 */}
-        <div className={styles.cardContentContainer}>
-          {/* 카드 제목 */}
-          <span className={styles.cardTitleWrapper}>{data.title}</span>
-          <div className={styles.allContentContainer}>
-            {/* 카드 태그들 */}
-            <div className={styles.cardTagContainer}>
-              <div className={styles.cardTagsWrapper}>
-                {slicedTagList.map((tag: string) => (
-                  <ChipTag size="sm" key={tag}>
-                    {tag}
-                  </ChipTag>
-                ))}
+    <Draggable draggableId={String(data.id)} index={index}>
+      {(provided) => (
+        <>
+          <article
+            {...provided.draggableProps}
+            {...provided.dragHandleProps}
+            ref={provided.innerRef}
+            className={styles.cardContainer}
+            onClick={handleCardModalToggle}
+          >
+            {/* 카드 이미지 */}
+            {data.imageUrl && (
+              <div className={styles.imageWrapper}>
+                <Image width={274} height={160} className={styles.imageContent} src={data.imageUrl} alt="카드" />
               </div>
-              {etc > 0 && (
-                <div className={styles.cardCountWrapper}>
-                  <span>그 외 {etc}개</span>
+            )}
+            {/* 카드 내용 */}
+            <div className={styles.cardContentContainer}>
+              {/* 카드 제목 */}
+              <span className={styles.cardTitleWrapper}>{data.title}</span>
+              <div className={styles.allContentContainer}>
+                {/* 카드 태그들 */}
+                <div className={styles.cardTagContainer}>
+                  <div className={styles.cardTagsWrapper}>
+                    {slicedTagList.map((tag: string) => (
+                      <ChipTag size="sm" key={tag}>
+                        {tag}
+                      </ChipTag>
+                    ))}
+                  </div>
+                  {etc > 0 && (
+                    <div className={styles.cardCountWrapper}>
+                      <span>그 외 {etc}개</span>
+                    </div>
+                  )}
+                </div>
+                {/* 카드 하단 날짜, 지정자 */}
+                <div className={styles.cardInfoWrapper}>
+                  <div className={styles.dateWrapper}>
+                    <Image
+                      className={styles.dateIcon}
+                      src="/icons/icon-calendar.svg"
+                      alt="Calendar Icon"
+                      width={20}
+                      height={20}
+                    />
+                    <span className={styles.date}>{formatDateString(data.dueDate, "KOREA", "yyyy.MM.dd")}</span>
+                  </div>
+                  <ProfileIcon member={data.assignee} size="sm" />
                 </div>
-              )}
-            </div>
-            {/* 카드 하단 날짜, 지정자 */}
-            <div className={styles.cardInfoWrapper}>
-              <div className={styles.dateWrapper}>
-                <Image
-                  className={styles.dateIcon}
-                  src="/icons/icon-calendar.svg"
-                  alt="Calendar Icon"
-                  width={20}
-                  height={20}
-                />
-                <span className={styles.date}>{formatDateString(data.dueDate, "KOREA", "yyyy.MM.dd")}</span>
               </div>
-              <ProfileIcon member={data.assignee} size="sm" />
             </div>
-          </div>
-        </div>
-      </div>
-      {isCardModalOpen && (
-        <TaskCardModal
-          data={data}
-          columnTitle={columnTitle}
-          handleModalClose={handleCardModalToggle}
-          setCardList={setCardList}
-        />
+          </article>
+          {isCardModalOpen && (
+            <TaskCardModal
+              data={data}
+              columnTitle={columnTitle}
+              handleModalClose={handleCardModalToggle}
+              setEntireList={setEntireList}
+            />
+          )}
+        </>
       )}
-    </>
+    </Draggable>
   );
 };
 

components/Chips/ChipColor/ChipColor.tsx

@@ -12,7 +12,7 @@ interface ChipColorProps {
 const ChipColor = ({ size, color, onClick, isSelected }: ChipColorProps) => {
   return (
     <>
-      <button
+      <div
         className={clsx(
           style.container,
           { [style.large]: size === "lg" },
@@ -26,7 +26,7 @@ const ChipColor = ({ size, color, onClick, isSelected }: ChipColorProps) => {
       >
         {/* 크기에 따라 check.svg 변경 */}
         {isSelected ? <Image width={22} height={22} src="/icons/icon-check.svg" alt="선택된 태그" /> : null}
-      </button>
+      </div>
     </>
   );
 };

components/Chips/ChipColors/ChipColors.tsx

@@ -3,13 +3,6 @@ import style from "./ChipColors.module.css";
 import ChipColor from "../ChipColor/ChipColor";
 import { ColorType } from "@/types/api.type";
 
-// interface ChipColorProps {
-//   size: string;
-//   color: "green" | "purple" | "orange" | "blue" | "pink";
-//   onClick?: () => void;
-//   isSelected: boolean;
-// }
-
 interface ChipColorsProps {
   selectedColor: ColorType;
   setSelectedColor: Dispatch<SetStateAction<ColorType>>;

components/Chips/ChipTodo/ChipTodo.module.css

@@ -40,7 +40,7 @@
 
 /* 화이트 버전일 때 */
 .white {
-  background-color: white;
+  background-color: var(--gray10);
 }
 
 .whiteText {

components/Column/Column.module.css

@@ -2,11 +2,9 @@
   display: flex;
   flex-direction: column;
   padding: 2rem;
-  width: 35.4rem;
-  height: auto;
-  border-right: 1px solid var(--gray20);
+  border-right: 0.1rem solid var(--gray20);
   background-color: var(--gray10);
-  cursor: pointer;
+  width: 36rem;
 }
 
 .headerContainer {
@@ -36,7 +34,7 @@
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
-  border: 1px solid var(--gray30);
+  border: 0.1rem solid var(--gray30);
   width: 100%;
   height: 4rem;
   background: var(--white);
@@ -49,7 +47,7 @@
     flex-direction: column;
   }
   .totalContainer {
-    width: 58.4rem;
+    width: 100%;
     border-bottom: 1px solid var(--gray20);
     border-right: none;
   }
@@ -61,7 +59,7 @@
   }
   .totalContainer {
     flex-direction: column;
-    width: 30.8rem;
+    width: 100%;
     margin-bottom: 1.2rem;
     stroke-width: 1px;
     stroke: var(--gray-gray_EEEEEE, #eee);