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

[Refactor, Style] TaskModal: 마감일 필수 설정 제거 / Card: 카드&댓글 삭제 확인 모달 추가, 제목&내용 공백 검사

Author: ozen0718

src/api/card.ts

@@ -54,7 +54,7 @@ export const createCard = async ({
   columnId: number;
   title: string;
   description: string;
-  dueDate: string;
+  dueDate?: string;
   tags: string[];
   imageUrl?: string;
 }) => {

src/components/button/PaginationButton.tsx

@@ -12,11 +12,12 @@ export const PaginationButton: React.FC<PaginationButtonProps> = ({
   ...props
 }) => {
   const baseStyle =
-    "w-[40px] h-[40px] flex justify-center items-center border border-[var(--color-gray3)] rounded-md text-[16px] font-medium transition";
+    "w-[40px] h-[40px] flex justify-center items-center bg-white border border-[var(--color-gray3)] rounded-md text-[16px] font-medium transition";
 
   const enabledTextColor =
     "text-[var(--color-gray1)] bg-white hover:bg-[var(--color-gray5)] cursor-pointer";
-  const disabledTextColor = "text-[var(--color-gray3)] cursor-default";
+  const disabledTextColor =
+    "bg-[var(--color-gray4)] text-[var(--color-gray3)] cursor-default";
   const finalStyle = `${baseStyle} ${disabled ? disabledTextColor : enabledTextColor}`;
 
   return (

src/components/columnCard/Card.tsx

@@ -21,9 +21,11 @@ export default function Card({
     <div
       onClick={onClick}
       className={`
+        relative
         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
+        sm:items-center items-start
+        rounded-md bg-white border border-gray-200 p-4
+        w-[284px] md:w-[510px] md:h-[93px] lg:w-[314px] lg:h-auto
       `}
     >
       {/* 이미지 영역 */}
@@ -48,7 +50,7 @@ export default function Card({
         </div>
       )}
 
-      <div className="flex flex-col justify-between flex-1 w-full">
+      <div className="flex flex-col justify-between w-full">
         {/* 제목 */}
         <h3
           className={`
@@ -64,7 +66,7 @@ export default function Card({
         <div
           className={`
             flex flex-col gap-2 mt-2 whitespace-nowrap
-            sm:max-w-none max-w-[192px] 
+            sm:max-w-none max-w-[190px]
             md:flex-row md:items-center md:justify-between md:mt-1
             lg:flex-col lg:items-start lg:mt-2
             text-sm md:text-xs
@@ -85,37 +87,43 @@ export default function Card({
             })}
           </div>
 
-          {/* 날짜 + 닉네임 */}
-          <div className="flex items-center gap-[29.5px] md:gap-3 sm:pr-4 text-[var(--color-gray1)]">
+          {/* 마감일 */}
+          <div
+            className="flex items-center justify-between
+          lg:gap-37 gap-8 sm:pr-4 text-[var(--color-gray1)]"
+          >
             <div className="flex items-center gap-1">
               <Image
                 src="/svgs/calendar.svg"
                 alt="calendar"
                 width={16}
                 height={16}
               />
-              <span>{dueDate}</span>
+              <span>{dueDate ?? "마감일 없음"}</span>
             </div>
-            {assignee.profileImageUrl ? (
-              <Image
-                src={assignee.profileImageUrl}
-                alt="프로필 이미지"
-                width={22}
-                height={22}
-                className="sm:w-[24px] sm:h-[24px] rounded-full object-cover"
-              />
-            ) : (
-              <div
-                className="sm:w-[24px] sm:h-[24px] w-[22px] h-[22px] rounded-full
-                overflow-hidden flex items-center justify-center"
-              >
-                <RandomProfile
-                  userId={assignee.id}
-                  name={assignee.nickname}
-                  className="sm:w-[24px] sm:h-[24px] w-[22px] h-[22px]"
+            {/* 프로필 아이콘 */}
+            <div className="shrink-0">
+              {assignee.profileImageUrl ? (
+                <Image
+                  src={assignee.profileImageUrl}
+                  alt="프로필 이미지"
+                  width={22}
+                  height={22}
+                  className="sm:w-[24px] sm:h-[24px] rounded-full object-cover shrink-0"
                 />
-              </div>
-            )}
+              ) : (
+                <div
+                  className="sm:w-[24px] sm:h-[24px] w-[22px] h-[22px] rounded-full
+                flex items-center justify-center"
+                >
+                  <RandomProfile
+                    userId={assignee.id}
+                    name={assignee.nickname}
+                    className="sm:w-[24px] sm:h-[24px] w-[22px] h-[22px]"
+                  />
+                </div>
+              )}
+            </div>
           </div>
         </div>
       </div>

src/components/columnCard/Column.tsx

@@ -49,7 +49,7 @@ export default function Column({
     { id: number; userId: number; nickname: string }[]
   >([]);
 
-  const maxColumnTitleLength = 20;
+  const maxColumnTitleLength = 15;
 
   // 카드리스트의 스크롤을 칼럼 영역으로 이동
   const scrollRef = useRef<HTMLDivElement | null>(null);
@@ -130,7 +130,10 @@ export default function Column({
           {/* 왼쪽: 타이틀 + 카드 개수 */}
           <div className="flex items-center gap-2">
             <Image src="/svgs/ellipse.svg" alt="circle" width={8} height={8} />
-            <h2 className="text-black3 text-[16px] md:text-[18px] font-bold">
+            <h2
+              className="text-black3 text-[16px] md:text-[18px] font-bold
+            break-words sm:max-w-none max-w-[90px]"
+            >
               {columnTitle}
             </h2>
             <span

src/components/modal/DeleteCheckModal.tsx

@@ -0,0 +1,116 @@
+import React from "react";
+import { Modal } from "@/components/modal/Modal";
+import { CustomBtn } from "../button/CustomButton";
+import { toast } from "react-toastify";
+
+interface DeleteModalProps {
+  isDeleteModalOpen: boolean;
+  setIsDeleteModalOpen: (open: boolean) => void;
+  isConfirmDeleteModalOpen: boolean;
+  setIsConfirmDeleteModalOpen: (open: boolean) => void;
+  selectedTitle: string | null;
+  selectedCreatedByMe: boolean | null;
+  handleDelete: () => void;
+  handleLeave: () => void;
+}
+
+export const DeleteCheckModal: React.FC<DeleteModalProps> = ({
+  isDeleteModalOpen,
+  setIsDeleteModalOpen,
+  isConfirmDeleteModalOpen,
+  setIsConfirmDeleteModalOpen,
+  selectedTitle,
+  selectedCreatedByMe,
+  handleDelete,
+  handleLeave,
+}) => {
+  return (
+    <>
+      <Modal
+        width="sm:w-[320px] w-[260px]"
+        height="sm:h-[190px] h-[160px]"
+        isOpen={isDeleteModalOpen}
+        onClose={() => setIsDeleteModalOpen(false)}
+        className="flex items-center justify-center text-center"
+      >
+        <div className="flex flex-col items-center gap-1 text-center min-h-[60px]">
+          <div className="text-[var(--primary)] font-medium sm:text-[18px] text-[16px]">
+            {selectedTitle}
+          </div>
+          <div className="text-black3 font-medium sm:text-[18px] text-[16px]">
+            {selectedCreatedByMe
+              ? "대시보드를 삭제하시겠습니까?"
+              : "대시보드에서 나가시겠습니까?"}
+          </div>
+        </div>
+
+        <div className="flex items-center justify-center gap-2">
+          <CustomBtn
+            onClick={() => setIsDeleteModalOpen(false)}
+            className="cursor-pointer border px-3 py-1 rounded-md
+            sm:w-[100px] sm:h-[40px] w-[84px] h-[32px]
+            text-[var(--primary)] border-[var(--color-gray3)]"
+          >
+            취소
+          </CustomBtn>
+          <CustomBtn
+            onClick={() => {
+              if (selectedCreatedByMe) {
+                setIsDeleteModalOpen(false);
+                setIsConfirmDeleteModalOpen(true); // 재확인 모달 오픈
+              } else {
+                handleLeave(); // 탈퇴일 때는 바로 닫힘
+                toast.error("현재 탈퇴 기능이 준비 중입니다.");
+              }
+            }}
+            className="cursor-pointer bg-[var(--primary)] px-3 py-1 rounded-md
+            sm:w-[100px] sm:h-[40px] w-[84px] h-[32px]
+            text-white"
+          >
+            확인
+          </CustomBtn>
+        </div>
+      </Modal>
+
+      <Modal
+        width="sm:w-[320px] w-[260px]"
+        height="sm:h-[190px] h-[160px]"
+        isOpen={isConfirmDeleteModalOpen}
+        onClose={() => setIsConfirmDeleteModalOpen(false)}
+        className="flex items-center justify-center text-center"
+      >
+        <div className="flex flex-col items-center gap-1 text-center min-h-[60px]">
+          <div className="text-red-400 font-medium sm:text-[18px] text-[16px]">
+            삭제 시 복구할 수 없습니다.
+          </div>
+          <div className="text-black3 font-medium sm:text-[18px] text-[16px]">
+            정말 삭제하시겠습니까?
+          </div>
+        </div>
+
+        <div className="flex items-center justify-center gap-2">
+          <CustomBtn
+            onClick={() => setIsConfirmDeleteModalOpen(false)}
+            className="cursor-pointer border px-3 py-1 rounded-md
+            sm:w-[100px] sm:h-[40px] w-[84px] h-[32px]
+            text-[var(--primary)] border-[var(--color-gray3)]"
+          >
+            취소
+          </CustomBtn>
+          <CustomBtn
+            onClick={() => {
+              setIsConfirmDeleteModalOpen(false);
+              handleDelete(); // 진짜 삭제 실행
+              toast.success("대시보드가 삭제되었습니다.");
+            }}
+            className="cursor-pointer bg-[var(--primary)] px-3 py-1 rounded-md
+            sm:w-[100px] sm:h-[40px] w-[84px] h-[32px]
+            text-white"
+          >
+            확인
+          </CustomBtn>
+        </div>
+      </Modal>
+    </>
+  );
+};

src/components/modal/DeleteModal.tsx

@@ -4,105 +4,50 @@ import { CustomBtn } from "../button/CustomButton";
 import { toast } from "react-toastify";
 
 interface DeleteModalProps {
-  isDeleteModalOpen: boolean;
-  setIsDeleteModalOpen: (open: boolean) => void;
-  isConfirmDeleteModalOpen: boolean;
-  setIsConfirmDeleteModalOpen: (open: boolean) => void;
-  selectedTitle: string | null;
-  selectedCreatedByMe: boolean | null;
-  handleDelete: () => void;
-  handleLeave: () => void;
+  isOpen: boolean;
+  title?: string;
+  description?: string;
+  onConfirm: () => void;
+  onCancel: () => void;
 }
 
 export const DeleteModal: React.FC<DeleteModalProps> = ({
-  isDeleteModalOpen,
-  setIsDeleteModalOpen,
-  isConfirmDeleteModalOpen,
-  setIsConfirmDeleteModalOpen,
-  selectedTitle,
-  selectedCreatedByMe,
-  handleDelete,
-  handleLeave,
+  isOpen,
+  title = "이 항목",
+  description,
+  onConfirm,
+  onCancel,
 }) => {
   return (
     <>
       <Modal
         width="sm:w-[320px] w-[260px]"
         height="sm:h-[190px] h-[160px]"
-        isOpen={isDeleteModalOpen}
-        onClose={() => setIsDeleteModalOpen(false)}
+        isOpen={isOpen}
+        onClose={onCancel}
         className="flex items-center justify-center text-center"
       >
-        <div className="flex flex-col items-center gap-1 text-center min-h-[60px]">
-          <div className="text-[var(--primary)] font-medium sm:text-[18px] text-[16px]">
-            {selectedTitle}
-          </div>
-          <div className="text-black3 font-medium sm:text-[18px] text-[16px]">
-            {selectedCreatedByMe
-              ? "대시보드를 삭제하시겠습니까?"
-              : "대시보드에서 나가시겠습니까?"}
-          </div>
+        <div className="flex flex-col items-center gap-2 text-center sm:min-h-[40px] min-h-[30px]">
+          <span className="text-black3 font-medium sm:text-[18px] text-[16px]">
+            {title} 삭제하시겠습니까?
+          </span>
+          {description && (
+            <span className="text-black3 font-medium text-[16px]">
+              {description}
+            </span>
+          )}
         </div>
-
-        <div className="flex items-center justify-center gap-2">
-          <CustomBtn
-            onClick={() => setIsDeleteModalOpen(false)}
-            className="cursor-pointer border px-3 py-1 rounded-md
-            sm:w-[100px] sm:h-[40px] w-[84px] h-[32px]
-            text-[var(--primary)] border-[var(--color-gray3)]"
-          >
-            취소
-          </CustomBtn>
-          <CustomBtn
-            onClick={() => {
-              if (selectedCreatedByMe) {
-                setIsDeleteModalOpen(false);
-                setIsConfirmDeleteModalOpen(true); // 재확인 모달 오픈
-              } else {
-                handleLeave(); // 탈퇴일 때는 바로 닫힘
-                toast.error("현재 탈퇴 기능이 준비 중입니다.");
-              }
-            }}
-            className="cursor-pointer bg-[var(--primary)] px-3 py-1 rounded-md
-            sm:w-[100px] sm:h-[40px] w-[84px] h-[32px]
-            text-white"
-          >
-            확인
-          </CustomBtn>
-        </div>
-      </Modal>
-
-      <Modal
-        width="sm:w-[320px] w-[260px]"
-        height="sm:h-[190px] h-[160px]"
-        isOpen={isConfirmDeleteModalOpen}
-        onClose={() => setIsConfirmDeleteModalOpen(false)}
-        className="flex items-center justify-center text-center"
-      >
-        <div className="flex flex-col items-center gap-1 text-center min-h-[60px]">
-          <div className="text-red-400 font-medium sm:text-[18px] text-[16px]">
-            삭제 시 복구할 수 없습니다.
-          </div>
-          <div className="text-black3 font-medium sm:text-[18px] text-[16px]">
-            정말 삭제하시겠습니까?
-          </div>
-        </div>
-
         <div className="flex items-center justify-center gap-2">
           <CustomBtn
-            onClick={() => setIsConfirmDeleteModalOpen(false)}
+            onClick={onCancel}
             className="cursor-pointer border px-3 py-1 rounded-md
             sm:w-[100px] sm:h-[40px] w-[84px] h-[32px]
             text-[var(--primary)] border-[var(--color-gray3)]"
           >
             취소
           </CustomBtn>
           <CustomBtn
-            onClick={() => {
-              setIsConfirmDeleteModalOpen(false);
-              handleDelete(); // 진짜 삭제 실행
-              toast.success("대시보드가 삭제되었습니다.");
-            }}
+            onClick={onConfirm}
             className="cursor-pointer bg-[var(--primary)] px-3 py-1 rounded-md
             sm:w-[100px] sm:h-[40px] w-[84px] h-[32px]
             text-white"