Merge pull request #155 from rover1523/mypage

[Fix] 수정하기 모달에서 수정후 데이터 전송버그 수정

Author: hhjin1

src/components/modalDashboard/CardDetail.tsx

@@ -2,6 +2,9 @@
 import Image from "next/image";
 import { CardDetailType } from "@/types/cards";
 import { ProfileIcon } from "./profelicon";
+import ColorTagChip, {
+  getTagColor,
+} from "@/components/modalInput/chips/ColorTagChip";
 
 interface CardDetailProps {
   card: CardDetailType;
@@ -47,23 +50,22 @@ export default function CardDetail({ card, columnName }: CardDetailProps) {
           </div>
         </div>
       </div>
-      <div className="flex flex-wrap gap-2 mb-2">
+      <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"
           title={`상태: ${columnName}`}
         >
           {columnName}
         </span>
         <span className="text-2xl font-extralight text-[#D9D9D9]">|</span>
-        {card.tags.map((tag, idx) => (
-          <span
-            key={idx}
-            className="rounded-full bg-gray-200 px-3 py-1 text-sm text-gray-700"
-          >
-            {}
-            {tag}
-          </span>
-        ))}
+        {card.tags.map((tag, idx) => {
+          const { textColor, bgColor } = getTagColor(idx);
+          return (
+            <ColorTagChip key={idx} className={`${textColor} ${bgColor}`}>
+              {tag}
+            </ColorTagChip>
+          );
+        })}
       </div>
       <p
         className="text-gray-700 p-2 break-words overflow-auto"

src/components/modalDashboard/CardDetailModal.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/rules-of-hooks */
 import { useMemo, useRef, useState } from "react";
 import { MoreVertical, X } from "lucide-react";
 import CardDetail from "./CardDetail";
@@ -10,6 +11,7 @@ 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";
 
 interface CardDetailModalProps {
   card: CardDetailType;
@@ -36,6 +38,7 @@ export default function CardDetailPage({
   const [isEditModalOpen, setIsEditModalOpen] = useState(false);
   const queryClient = useQueryClient();
   const popupRef = useRef(null);
+  const router = useRouter();
   useClosePopup(popupRef, () => setShowMenu(false));
 
   const { data: columns = [] } = useQuery<ColumnType[]>({
@@ -125,7 +128,13 @@ export default function CardDetailPage({
               )}
             </div>
 
-            <button onClick={onClose} title="닫기">
+            <button
+              onClick={() => {
+                onClose();
+                router.reload(); // ✅ Next.js 방식 리로드
+              }}
+              title="닫기"
+            >
               <X className="w-7 h-7 flex items-center justify-center hover:cursor-pointer" />
             </button>
           </div>
@@ -170,19 +179,24 @@ export default function CardDetailPage({
           columnId={card.columnId} // ✅ 여기에 columnId 추가!
           onClose={() => setIsEditModalOpen(false)}
           onSubmit={async (data) => {
+            const matchedColumn = columns.find(
+              (col) => col.title === data.status
+            ); // title → id
+
             await updateCardMutate({
-              status: String(cardData.columnId) || cardData.status,
+              columnId: matchedColumn?.id, // ✅ columnId로 넘기기!
               assignee: { ...cardData.assignee, nickname: data.assignee },
               title: data.title,
               description: data.description,
               dueDate: data.deadline,
               tags: data.tags,
               imageUrl: data.image ?? "",
             });
-            setIsEditModalOpen(false); // 수정 후 모달 닫기
+
+            setIsEditModalOpen(false);
           }}
           initialData={{
-            status: cardData.status,
+            status: columnName,
             assignee: cardData.assignee.nickname,
             title: cardData.title,
             description: cardData.description,