Merge pull request #195 from part3-4team-Taskify/minji

[Refactor] Column, Card: 칼럼 삭제, 카드 생성, 삭제, 수정 즉시 반영 / 마감일 빠른 순 정렬

Author: ozen0718

src/components/columnCard/CardList.tsx

@@ -102,6 +102,10 @@ export default function CardList({
     return () => observer.disconnect();
   }, [fetchMoreCards, hasMore]);
 
+  useEffect(() => {
+    setCards(initialTasks);
+  }, [initialTasks]);
+
   const handleDragEnd = (event: DragEndEvent) => {
     const { active, over } = event;
 
@@ -114,18 +118,25 @@ export default function CardList({
     setCards(newOrder);
   };
 
+  // 마감일 빠른 순 정렬
+  const sortedCards = [...cards].sort((a, b) => {
+    const dateA = a.dueDate ? new Date(a.dueDate).getTime() : Infinity;
+    const dateB = b.dueDate ? new Date(b.dueDate).getTime() : Infinity;
+    return dateA - dateB;
+  });
+
   return (
     <DndContext
       sensors={sensors}
       collisionDetection={closestCenter}
       onDragEnd={handleDragEnd}
     >
       <SortableContext
-        items={cards.map((card) => card.id)}
+        items={sortedCards.map((card) => card.id)}
         strategy={verticalListSortingStrategy}
       >
         <div className="grid gap-3 w-full grid-cols-1">
-          {cards.map((card) => (
+          {sortedCards.map((card) => (
             <SortableCard key={card.id} card={card} onClick={onCardClick} />
           ))}
           {hasMore && <div ref={observerRef} className="h-20" />}

src/components/columnCard/Column.tsx

@@ -20,13 +20,17 @@ type ColumnProps = {
   title?: string;
   tasks?: CardType[];
   dashboardId: number;
+  columnDelete: (columnId: number) => void;
+  fetchColumnsAndCards: () => void;
 };
 
 export default function Column({
   columnId,
   title = "new Task",
   tasks = [],
   dashboardId,
+  columnDelete,
+  fetchColumnsAndCards,
 }: ColumnProps) {
   const [columnTitle, setColumnTitle] = useState(title);
   const [isColumnModalOpen, setIsColumnModalOpen] = useState(false);
@@ -61,25 +65,26 @@ export default function Column({
 
   const handleEditColumn = async (newTitle: string) => {
     if (!newTitle.trim()) {
-      toast.error("칼럼 이름을 입력해주세요.");
+      toast.error("칼럼 제목을 입력해주세요.");
       return;
     }
 
     try {
       const updated = await updateColumn({ columnId, title: newTitle });
       setColumnTitle(updated.title);
       setIsColumnModalOpen(false);
-      toast.success("칼럼이 변경되었습니다.");
+      toast.success("칼럼 제목이 변경되었습니다.");
     } catch (error) {
-      console.error("칼럼 이름 수정 실패:", error);
-      toast.error("칼럼 변경에 실패했습니다.");
+      console.error("칼럼 제목 수정 실패:", error);
+      toast.error("칼럼 제목 변경에 실패했습니다.");
     }
   };
 
   const handleDeleteColumn = async () => {
     try {
       await deleteColumn({ columnId });
       setIsDeleteModalOpen(false);
+      if (columnDelete) columnDelete(columnId);
       toast.success("칼럼이 삭제되었습니다.");
     } catch (error) {
       console.error("칼럼 삭제 실패:", error);
@@ -158,6 +163,7 @@ export default function Column({
           dashboardId={dashboardId}
           columnId={columnId}
           members={members}
+          updateCard={fetchColumnsAndCards}
         />
       )}
 
@@ -190,6 +196,7 @@ export default function Column({
             setIsCardDetailModalOpen(false);
             setSelectedCard(null);
           }}
+          updateCard={fetchColumnsAndCards}
         />
       )}
     </div>

src/components/modalDashboard/CardDetail.tsx

@@ -70,7 +70,7 @@ export default function CardDetail({ card, columnName }: CardDetailProps) {
       {/* 설명 */}
       <p
         className="
-          text-gray-700 p-2 break-words overflow-auto
+          text-gray-700 p-2 overflow-auto
           w-full max-w-[470px] md:max-w-[349px]
           whitespace-pre-wrap word-break break-words
           h-[70px]

src/components/modalDashboard/CardDetailModal.tsx

@@ -10,14 +10,14 @@ import type { CardDetailType } from "@/types/cards";
 import TaskModal from "@/components/modalInput/TaskModal";
 import { useClosePopup } from "@/hooks/useClosePopup";
 import { getColumn } from "@/api/columns";
-import { useRouter } from "next/router";
 import { toast } from "react-toastify";
 
 interface CardDetailModalProps {
   card: CardDetailType;
   currentUserId: number;
   dashboardId: number;
   onClose: () => void;
+  updateCard: () => void;
 }
 
 interface ColumnType {
@@ -31,14 +31,14 @@ export default function CardDetailPage({
   currentUserId,
   dashboardId,
   onClose,
+  updateCard,
 }: CardDetailModalProps) {
   const [cardData, setCardData] = useState<CardDetailType>(card);
   const [commentText, setCommentText] = useState("");
   const [showMenu, setShowMenu] = useState(false);
   const [isEditModalOpen, setIsEditModalOpen] = useState(false);
   const queryClient = useQueryClient();
   const popupRef = useRef(null);
-  const router = useRouter();
   useClosePopup(popupRef, () => setShowMenu(false));
 
   const { data: columns = [] } = useQuery<ColumnType[]>({
@@ -67,9 +67,7 @@ export default function CardDetailPage({
       queryClient.invalidateQueries({ queryKey: ["cards"] });
       toast.success("카드가 삭제되었습니다.");
       onClose();
-      setTimeout(() => {
-        router.reload();
-      }, 1500);
+      if (updateCard) updateCard();
     },
   });
 
@@ -194,7 +192,7 @@ export default function CardDetailPage({
               imageUrl: data.image || undefined,
             });
             setIsEditModalOpen(false);
-            router.reload();
+            if (updateCard) updateCard();
           }}
           initialData={{
             status: columnName,

src/components/modalInput/CardInput.tsx

@@ -35,7 +35,7 @@ export default function CardInput({
         onChange={handleChange}
         placeholder={placeholder}
         className={clsx(
-          "p-4 w-full resize-none rounded-md border border-[var(--color-gray3)] focus:border-[var(--primary)] p-1 outline-none bg-white",
+          "p-4 w-full resize-none rounded-md border border-[var(--color-gray3)] focus:border-[var(--primary)] outline-none bg-white",
           small ? "text-sm" : "text-base",
           className
         )}

src/components/modalInput/ToDoModal.tsx

@@ -5,12 +5,12 @@ import ModalInput from "@/components/modalInput/ModalInput";
 import ModalTextarea from "@/components/modalInput/ModalTextarea";
 import ModalImage from "@/components/modalInput/ModalImage";
 import TextButton from "@/components/modalInput/TextButton";
-import { useRouter } from "next/router";
 import { toast } from "react-toastify";
 
 interface TaskModalProps {
   isOpen: boolean;
   onClose: () => void;
+  updateCard: () => void;
   teamId: string;
   dashboardId: number;
   columnId: number;
@@ -31,6 +31,7 @@ interface TaskData {
 
 export default function TaskModal({
   onClose,
+  updateCard,
   dashboardId,
   columnId,
   members,
@@ -44,8 +45,6 @@ export default function TaskModal({
     image: "",
   });
 
-  const router = useRouter();
-
   const handleChange = (field: keyof TaskData, value: string | string[]) => {
     setFormData((prev) => ({
       ...prev,
@@ -81,9 +80,9 @@ export default function TaskModal({
         tags: formData.tags,
         imageUrl: formData.image || undefined,
       });
-
-      router.reload(); // 카드 생성 후 새로고침
       onClose();
+      if (updateCard) updateCard();
+      toast.success("카드가 생성되었습니다.");
     } catch (err) {
       console.error("카드 생성 실패:", err);
       toast.error("카드 생성에 실패했습니다.");

src/components/table/member/MemberList.tsx

@@ -25,11 +25,6 @@ const MemberList: React.FC<HeaderBebridgeProps> = ({ dashboardId }) => {
     currentPage * itemsPerPage
   );
 
-  /* 멤버 삭제 모달 */
-  const openModal = () => {
-    setIsModalOpen(true);
-  };
-
   const closeModal = () => {
     setIsModalOpen(false);
   };

src/pages/dashboard/[dashboardId]/index.tsx

@@ -60,40 +60,39 @@ export default function Dashboard() {
     }
   };
 
-  // 대시보드 및 칼럼/카드 데이터 패칭
+  // 칼럼/카드 데이터 패칭
+  const fetchColumnsAndCards = async () => {
+    try {
+      const numericDashboardId = Number(dashboardId);
+
+      // 칼럼 목록 조회
+      const columnRes = await getColumns({
+        dashboardId: numericDashboardId,
+      });
+      setColumns(columnRes.data);
+
+      // 각 칼럼에 대한 카드 목록 조회
+      const columnTasks: { [columnId: number]: CardType[] } = {};
+
+      await Promise.all(
+        columnRes.data.map(async (column: ColumnType) => {
+          const cardRes = await getCardsByColumn({
+            columnId: column.id,
+          });
+          columnTasks[column.id] = cardRes.cards;
+        })
+      );
+
+      setTasksByColumn(columnTasks);
+    } catch (err) {
+      console.error("❌ 칼럼 또는 카드 로딩 에러:", err);
+    }
+  };
+
   useEffect(() => {
     if (!isReady || !dashboardId || !isInitialized || !user) return;
 
     fetchDashboards();
-
-    const fetchColumnsAndCards = async () => {
-      try {
-        const numericDashboardId = Number(dashboardId);
-
-        // 칼럼 목록 조회
-        const columnRes = await getColumns({
-          dashboardId: numericDashboardId,
-        });
-        setColumns(columnRes.data);
-
-        // 각 칼럼에 대한 카드 목록 조회
-        const columnTasks: { [columnId: number]: CardType[] } = {};
-
-        await Promise.all(
-          columnRes.data.map(async (column: ColumnType) => {
-            const cardRes = await getCardsByColumn({
-              columnId: column.id,
-            });
-            columnTasks[column.id] = cardRes.cards;
-          })
-        );
-
-        setTasksByColumn(columnTasks);
-      } catch (err) {
-        console.error("❌ 칼럼 또는 카드 로딩 에러:", err);
-      }
-    };
-
     fetchColumnsAndCards();
   }, [isReady, dashboardId, isInitialized, user]);
 
@@ -130,6 +129,8 @@ export default function Dashboard() {
                 title={col.title}
                 tasks={tasksByColumn[col.id] || []}
                 dashboardId={Number(dashboardId)}
+                columnDelete={fetchColumnsAndCards}
+                fetchColumnsAndCards={fetchColumnsAndCards}
               />
             ))}
             {/* ColumnsButton: 모바일/태블릿에서는 하단 고정, 데스크탑에서는 원래 위치 */}