Merge branch 'page/dragdrop'

harigari · Jan 4, 2024 · ce73577 · ce73577
2 parents 0741f7c + 46fcc53
commit ce73577
Show file tree

Hide file tree

Showing 22 changed files with 530 additions and 246 deletions.
diff --git a/components/Buttons/Button/Button.module.css b/components/Buttons/Button/Button.module.css
@@ -53,7 +53,7 @@
 }
 /* 플러스 아이콘 */
 .plus_icon {
-  width: 31.4rem;
+  width: 100%;
   height: 4rem;
   border-radius: 0.6rem;
 }
@@ -86,12 +86,11 @@
 }
 @media (min-width: 768px) and (max-width: 1200px) {
   .add_column {
-    width: 54.4rem;
+    width: 100%;
     height: 7rem;
   }
 
   .plus_icon {
-    width: 54.4rem;
     height: 4rem;
   }
 
@@ -118,12 +117,11 @@
   }
 
   .add_column {
-    width: 28.4rem;
+    width: 100%;
     height: 6rem;
   }
 
   .plus_icon {
-    width: 28.4rem;
     height: 3.2rem;
   }
 

diff --git a/components/Card/Card.module.css b/components/Card/Card.module.css
@@ -95,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;
   }
 }
 
@@ -130,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;
   }
 }
diff --git a/components/Card/Card.tsx b/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>
   );
 };
 

diff --git a/components/Column/Column.module.css b/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);