any 타입 제거

Card detail01

Author: MINJI121

src/components/columnCard/Card.tsx

@@ -45,7 +45,6 @@ export default function Card({
         </div>
       )}
 
-      {/* 텍스트 콘텐츠 영역 */}
       <div className="flex flex-col justify-between flex-1 w-full">
         {/* 제목 */}
         <h3

src/components/columnCard/CardList.tsx

@@ -5,6 +5,7 @@ import {
   PointerSensor,
   useSensor,
   useSensors,
+  DragEndEvent,
 } from "@dnd-kit/core";
 import {
   SortableContext,
@@ -101,7 +102,7 @@ export default function CardList({
     return () => observer.disconnect();
   }, [fetchMoreCards, hasMore]);
 
-  const handleDragEnd = (event: any) => {
+  const handleDragEnd = (event: DragEndEvent) => {
     const { active, over } = event;
 
     if (!over || active.id === over.id) return;

src/components/modalDashboard/CardDetail.tsx

@@ -1,4 +1,3 @@
-// CardDetail.tsx
 import Image from "next/image";
 import { CardDetailType } from "@/types/cards";
 import { ProfileIcon } from "./profelicon";
@@ -13,13 +12,12 @@ interface CardDetailProps {
 
 export default function CardDetail({ card, columnName }: CardDetailProps) {
   return (
-    <div className="p-4 ">
-      <h2 className="text-3xl font-semibold mb-5">{card.title}</h2>
-      {/* 작성자 정보 추가 */}
+    <div className="p-4">
+      {/* 담당자 정보 박스 */}
       <div className="absolute w-[181px] h-[155px] lg:[200px] top-20 right-10 rounded-lg p-3.5 bg-white border border-[#D9D9D9]">
         <div className="mb-3">
           <p className="text-sm font-semibold text-gray-800 mb-1">담당자</p>
-          <div className="flex items-center  gap-2">
+          <div className="flex items-center gap-2">
             <ProfileIcon
               userId={card.assignee.id}
               nickname={card.assignee.nickname}
@@ -28,7 +26,6 @@ export default function CardDetail({ card, columnName }: CardDetailProps) {
               imgClassName="w-6 h-6"
               fontClassName="text-sm"
             />
-
             <span className="text-sm text-gray-700">
               {card.assignee.nickname}
             </span>
@@ -50,6 +47,8 @@ export default function CardDetail({ card, columnName }: CardDetailProps) {
           </div>
         </div>
       </div>
+
+      {/* 상태 + 태그 */}
       <div className="flex items-center gap-2 mb-2">
         <span
           className="rounded-full bg-violet-200 px-3 py-1 text-sm text-violet-800"
@@ -67,25 +66,28 @@ export default function CardDetail({ card, columnName }: CardDetailProps) {
           );
         })}
       </div>
+
+      {/* 설명 */}
       <p
-        className="text-gray-700 p-2 break-words overflow-auto"
-        style={{
-          width: "470px",
-          height: "70px",
-          whiteSpace: "pre-wrap", // 줄바꿈 유지 + 자동 줄바꿈
-          wordBreak: "break-word", // 긴 단어도 줄바꿈
-        }}
+        className="
+          text-gray-700 p-2 break-words overflow-auto
+          w-full max-w-[470px] md:max-w-[349px]
+          whitespace-pre-wrap word-break break-words
+          h-[70px]
+        "
       >
         {card.description}
       </p>
+
+      {/* 이미지 */}
       {card.imageUrl && (
-        <div className="md:w-420px lg:w-445px">
+        <div className="md:w-[420px] lg:w-[445px]">
           <Image
             src={card.imageUrl}
             alt="카드 이미지"
             width={420}
             height={226}
-            className="rounded-lg object-cover lg:w-[445px] lg:h-[260px] w-[420px] h-[246px] "
+            className="rounded-lg object-cover lg:w-[445px] lg:h-[260px] w-[420px] h-[246px]"
           />
         </div>
       )}

src/components/modalDashboard/CardDetailModal.tsx

@@ -5,13 +5,14 @@ import CommentList from "./CommentList";
 import CardInput from "@/components/modalInput/CardInput";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { createComment } from "@/api/comment";
-import { deleteCard, EditCard } from "@/api/card"; // EditCard API 추가
+import { deleteCard, EditCard } from "@/api/card";
 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;
@@ -66,7 +67,6 @@ export default function CardDetailPage({
       queryClient.invalidateQueries({ queryKey: ["cards"] });
       toast.success("카드가 삭제되었습니다.");
       onClose();
-
       setTimeout(() => {
         router.reload();
       }, 1500);
@@ -90,21 +90,25 @@ export default function CardDetailPage({
   const { mutateAsync: updateCardMutate } = useMutation({
     mutationFn: (data: Partial<CardDetailType>) => EditCard(cardData.id, data),
     onSuccess: (updatedCard) => {
-      setCardData(updatedCard); // ✅ 서버 응답을 최신 cardData로 설정
-      queryClient.invalidateQueries({ queryKey: ["cards"] }); // 필요시
+      setCardData(updatedCard);
+      queryClient.invalidateQueries({ queryKey: ["cards"] });
     },
   });
 
   return (
     <>
-      <div className="fixed inset-0 bg-black/30 z-50 flex items-center justify-center">
+      <div className="fixed inset-0 bg-black/30 z-50 flex items-center justify-center px-4 sm:px-6">
         <div
-          className="relative bg-white rounded-lg shadow-lg w-[730px] h-[763px] flex flex-col
-        md:w-[678px] lg:w-[730px]"
+          className="
+      relative bg-white rounded-lg shadow-lg flex flex-col
+      w-[327px] h-[710px]
+      md:w-[678px] md:h-[766px]
+      lg:w-[730px] lg:h-[763px]
+    "
         >
-          <div className="absolute top-6 right-8.5 z-30 flex items-center gap-3 mt-1">
-            {/* 오른쪽 상단 메뉴 */}
-            <div className="relative">
+          <div className="flex justify-between items-center px-6 pt-6 pb-2">
+            <h2 className="font-24sb">{cardData.title}</h2>
+            <div className="flex items-center gap-3 relative" ref={popupRef}>
               <button
                 onClick={() => setShowMenu((prev) => !prev)}
                 className="w-7 h-7 flex items-center justify-center hover:cursor-pointer"
@@ -114,7 +118,7 @@ export default function CardDetailPage({
                 <MoreVertical className="w-8 h-8 text-black cursor-pointer" />
               </button>
               {showMenu && (
-                <div className="absolute right-0.5 p-2 w-27 bg-white border border-[#D9D9D9] z-40 rounded-lg">
+                <div className="absolute right-0 top-10 p-2 w-27 bg-white border border-[#D9D9D9] z-40 rounded-lg">
                   <button
                     className="block w-full px-4 py-2 text-base text-gray-800 hover:bg-[#F1EFFD] hover:text-[#5534DA] rounded-sm cursor-pointer"
                     type="button"
@@ -134,22 +138,20 @@ export default function CardDetailPage({
                   </button>
                 </div>
               )}
+              <button onClick={handleClose} title="닫기">
+                <X className="w-7 h-7 flex items-center justify-center hover:cursor-pointer" />
+              </button>
             </div>
-
-            <button onClick={handleClose} title="닫기">
-              <X className="w-7 h-7 flex items-center justify-center hover:cursor-pointer" />
-            </button>
           </div>
 
-          {/* 모달 내부 콘텐츠 */}
-          <div className="p-6 flex gap-6 overflow-y-auto flex-1 w-[550px] h-[460px]">
+          {/* 콘텐츠 (스크롤 없음) */}
+          <div className="px-6 pb-4 flex flex-col gap-6 flex-1 overflow-hidden">
+            {/* 카드 상세 */}
             <CardDetail card={cardData} columnName={columnName} />
-          </div>
 
-          {/* 댓글 입력창 */}
-          <div className="px-10 pt-2 pb-2">
-            <p className="ml-1 text-sm font-semibold mb-2">댓글</p>
-            <div className="w-[450px] h-[110px]">
+            {/* 댓글 입력 */}
+            <div className="w-full max-w-[450px]">
+              <p className="text-sm font-semibold mb-2">댓글</p>
               <CardInput
                 hasButton
                 small
@@ -159,11 +161,9 @@ export default function CardDetailPage({
                 placeholder="댓글 작성하기"
               />
             </div>
-          </div>
 
-          {/* 댓글 목록 */}
-          <div className=" max-h-[100px] ml-7 text-base overflow-y-auto scrollbar-hidden">
-            <div className=" max-h-[50vh]">
+            {/* 댓글 리스트 (스크롤 가능) */}
+            <div className="w-full max-w-[450px] text-base max-h-[180px] overflow-y-auto scrollbar-hidden">
               <CommentList
                 cardId={card.id}
                 currentUserId={currentUserId}
@@ -174,27 +174,25 @@ export default function CardDetailPage({
         </div>
       </div>
 
-      {/* TaskModal 수정 모드 */}
+      {/* 수정 모달 */}
       {isEditModalOpen && (
         <TaskModal
           mode="edit"
-          columnId={card.columnId} // ✅ 여기에 columnId 추가!
+          columnId={card.columnId}
           onClose={() => setIsEditModalOpen(false)}
           onSubmit={async (data) => {
             const matchedColumn = columns.find(
               (col) => col.title === data.status
-            ); // title → id
-
+            );
             await updateCardMutate({
-              columnId: matchedColumn?.id, // ✅ columnId로 넘기기!
+              columnId: matchedColumn?.id,
               assignee: { ...cardData.assignee, nickname: data.assignee },
               title: data.title,
               description: data.description,
               dueDate: data.deadline,
               tags: data.tags,
               imageUrl: data.image || undefined,
             });
-
             setIsEditModalOpen(false);
             router.reload();
           }}

src/pages/mydashboard.tsx

@@ -21,6 +21,7 @@ import {
   PointerSensor,
   useSensor,
   useSensors,
+  DragEndEvent,
 } from "@dnd-kit/core";
 import {
   SortableContext,
@@ -119,7 +120,7 @@ export default function MyDashboardPage() {
     setSelectedDashboardId(null);
   };
 
-  const handleDragEnd = (event: any) => {
+  const handleDragEnd = (event: DragEndEvent) => {
     const { active, over } = event;
     if (!over || active.id === over.id) return;