Merge pull request #156 from hhjin1/card-hj

[Feat, Style] Modal: 카드 상세모달 삭제시 토스트알림 / Card: 프로필이미지 띄우기

Author: gyoyeon-kim

src/components/columnCard/Card.tsx

@@ -19,7 +19,7 @@ export default function Card({
     <div
       onClick={onClick}
       className={`
-        flex flex-col md:flex-row lg:flex-col
+        flex flex-col md:flex-row lg:flex-col cursor-pointer
         items-start rounded-md bg-white border border-gray-200 p-4
         w-[284px] sm:w-full md:w-[544px] md:h-[93px] lg:w-[314px] lg:h-auto
       `}
@@ -97,9 +97,19 @@ export default function Card({
               />
               <span>{dueDate}</span>
             </div>
-            <div className="w-6 h-6 flex items-center justify-center bg-[#A3C4A2] text-white font-bold rounded-full text-xs">
-              {assignee.nickname[0]}
-            </div>
+            {assignee.profileImageUrl ? (
+              <Image
+                src={assignee.profileImageUrl}
+                alt="프로필 이미지"
+                width={24}
+                height={24}
+                className="w-6 h-6 rounded-full object-cover"
+              />
+            ) : (
+              <div className="w-6 h-6 flex items-center justify-center bg-[#A3C4A2] text-white font-bold rounded-full text-xs">
+                {assignee.nickname[0]}
+              </div>
+            )}
           </div>
         </div>
       </div>

src/components/columnCard/Column.tsx

@@ -4,8 +4,8 @@ import Image from "next/image";
 import { CardType } from "@/types/task";
 import TodoModal from "@/components/modalInput/ToDoModal";
 import TodoButton from "@/components/button/TodoButton";
-import ColumnManageModal from "@/components/columncard/ColumnManageModal";
-import ColumnDeleteModal from "@/components/columncard/ColumnDeleteModal";
+import ColumnManageModal from "@/components/columnCard/ColumnManageModal";
+import ColumnDeleteModal from "@/components/columnCard/ColumnDeleteModal";
 import { updateColumn, deleteColumn } from "@/api/columns";
 import { getDashboardMembers, getCardDetail } from "@/api/card";
 import { MemberType } from "@/types/users";

src/components/modalDashboard/CardDetailModal.tsx

@@ -12,6 +12,7 @@ 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;
@@ -65,7 +66,12 @@ export default function CardDetailPage({
     mutationFn: () => deleteCard(card.id),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ["cards"] });
+      toast.success("카드가 삭제되었습니다.");
       onClose();
+
+      setTimeout(() => {
+        router.reload();
+      }, 1500);
     },
   });