[Feat Fix Refector] 카드수정모달: 담당자 선택 가능하게 변경

[Feat Fix Refector] 담당자 선택 갱신 수정

Author: MINJI121

src/api/card.ts

@@ -1,8 +1,19 @@
 import axiosInstance from "./axiosInstance";
-import type { CardDetailType } from "@/types/cards"; // Dashboard 타입 import
+import type { CardDetailType } from "@/types/cards";
 import { apiRoutes } from "@/api/apiRoutes";
 import { TEAM_ID } from "@/constants/team";
 
+/** 카드 수정용 타입 */
+export interface EditCardPayload {
+  columnId?: number;
+  assigneeUserId?: number;
+  title?: string;
+  description?: string;
+  dueDate?: string;
+  tags?: string[];
+  imageUrl?: string;
+}
+
 /** 1. 카드 이미지 업로드 */
 export const uploadCardImage = async ({
   columnId,
@@ -83,43 +94,12 @@ export const getDashboardMembers = async ({
 };
 
 /** 4. 카드 수정 */
-export const updateCard = async (
-  id: number,
-  data: Partial<CardDetailType>,
-  {
-    cardId,
-    columnId,
-    assigneeUserId,
-    title,
-    description,
-    dueDate,
-    tags,
-    imageUrl,
-  }: {
-    cardId: number;
-    columnId: number;
-    assigneeUserId: number;
-    title: string;
-    description: string;
-    dueDate: string;
-    tags: string[];
-    imageUrl?: string;
-  }
-) => {
-  const response = await axiosInstance.put(apiRoutes.cardDetail(cardId), {
-    columnId,
-    assigneeUserId,
-    title,
-    description,
-    dueDate,
-    tags,
-    imageUrl,
-  });
-
+export const EditCard = async (cardId: number, data: EditCardPayload) => {
+  const response = await axiosInstance.put(apiRoutes.cardDetail(cardId), data);
   return response.data;
 };
 
-// 카드 목록 조회
+/** 5. 카드 목록 조회 */
 export const getCardsByColumn = async ({
   columnId,
   cursorId,
@@ -140,10 +120,9 @@ export const getCardsByColumn = async ({
   return res.data;
 };
 
-// 카드 상세 조회
+/** 6. 카드 상세 조회 */
 export async function getCardDetail(cardId: number): Promise<CardDetailType> {
   try {
-    // apiRoutes를 사용하여 URL 동적 생성
     const url = apiRoutes.cardDetail(cardId);
     const response = await axiosInstance.get(url);
     return response.data as CardDetailType;
@@ -153,17 +132,9 @@ export async function getCardDetail(cardId: number): Promise<CardDetailType> {
   }
 }
 
-// 카드 삭제
+/** 7. 카드 삭제 */
 export const deleteCard = async (cardId: number) => {
   const url = apiRoutes.cardDetail(cardId);
   const response = await axiosInstance.delete(url);
   return response.data;
 };
-//카드 수정저장
-export const EditCard = async (
-  cardId: number,
-  data: Partial<CardDetailType>
-) => {
-  const response = await axiosInstance.put(apiRoutes.cardDetail(cardId), data);
-  return response.data;
-};

src/components/modalDashboard/CardDetail.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import Image from "next/image";
 import { CardDetailType } from "@/types/cards";
 import { ColumnNameTag } from "../modalInput/chips/ColumnNameTag";
@@ -14,17 +14,20 @@ interface CardDetailProps {
 
 export default function CardDetail({ card, columnName }: CardDetailProps) {
   const [isImageModalOpen, setIsImageModalOpen] = useState(false);
+  const [currentCard, setCurrentCard] = useState<CardDetailType>(card);
+
+  useEffect(() => {
+    setCurrentCard(card);
+  }, [card]);
 
   return (
     <div className="flex flex-col gap-5 w-full">
+      {/* 상태 + 태그 */}
       <div className="flex flex-wrap items-center gap-5">
-        {/* 칼럼 이름 태그 */}
         <ColumnNameTag label={columnName} />
-        {/* 구분선 */}
         <div className="w-[1px] h-[20px] bg-[var(--color-gray3)]" />
-        {/* 카드 태그 */}
         <div className="flex flex-wrap gap-[6px]">
-          {card.tags.map((tag, idx) => {
+          {currentCard.tags.map((tag, idx) => {
             const { textColor, bgColor } = getTagColor(idx);
             return (
               <ColorTagChip key={idx} className={`${textColor} ${bgColor}`}>
@@ -35,39 +38,52 @@ export default function CardDetail({ card, columnName }: CardDetailProps) {
         </div>
       </div>
 
-      {/* 내용 */}
-      <p
-        className="
-          text-black font-normal sm:text-[16px] text-[14px] overflow-auto pr-1
-          w-full lg:max-w-[445px] sm:max-w-[420px] max-w-[295px]
-          min-h-0 sm:max-h-[100px] max-h-[80px]
-          whitespace-pre-wrap word-break break-words
-          "
-      >
-        {card.description}
+      {/* 설명 */}
+      <p className="text-black font-normal sm:text-[16px] text-[14px] overflow-auto pr-1 w-full lg:max-w-[445px] sm:max-w-[420px] max-w-[295px] min-h-0 sm:max-h-[100px] max-h-[80px] whitespace-pre-wrap word-break break-words">
+        {currentCard.description}
       </p>
 
+      {/* 담당자 */}
+      <div className="flex items-center gap-2 text-sm text-[var(--color-gray1)]">
+        <span className="font-medium">담당자:</span>
+        {currentCard.assignee.profileImageUrl ? (
+          <Image
+            src={currentCard.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-medium rounded-full text-xs">
+            {currentCard.assignee.nickname[0]}
+          </div>
+        )}
+        <span>{currentCard.assignee.nickname}</span>
+      </div>
+
       {/* 이미지 */}
-      {card.imageUrl && (
+      {currentCard.imageUrl && (
         <div
           className="md:w-[420px] lg:w-[445px] cursor-pointer"
           onClick={() => setIsImageModalOpen(true)}
         >
           <Image
-            src={card.imageUrl}
+            src={currentCard.imageUrl}
             alt="카드 이미지"
             width={290}
             height={168}
             className="rounded-lg object-cover
-            lg:w-[445px] md:w-[420px]
-            lg:h-[280px] md:h-[240px]
-            sm:max-h-none max-h-[180px]"
+              lg:w-[445px] md:w-[420px]
+              lg:h-[280px] md:h-[240px]
+              sm:max-h-none max-h-[180px]"
           />
         </div>
       )}
-      {isImageModalOpen && (
+
+      {isImageModalOpen && currentCard.imageUrl && (
         <PopupImageModal
-          imageUrl={card.imageUrl!}
+          imageUrl={currentCard.imageUrl}
           onClose={() => setIsImageModalOpen(false)}
         />
       )}