담당자 드롭다운 프로필이미지

ozen0718 · ozen0718 · commit 2303e023f1d2 · 2025-04-15T00:05:48.000+09:00
diff --git a/src/api/members.ts b/src/api/members.ts
@@ -1,21 +1,47 @@
 import axiosInstance from "./axiosInstance";
 import { apiRoutes } from "./apiRoutes";
 
-// 대시보드 멤버 목록 조회
-export const getMembers = async ({ dashboardId }: { dashboardId: number }) => {
+// 멤버 타입 정의
+export interface Member {
+  id: number;
+  userId: number;
+  email: string;
+  nickname: string;
+  profileImageUrl: string | null;
+  isOwner: boolean;
+  createdAt?: string;
+  updatedAt?: string;
+}
+
+// 🔹 대시보드 멤버 목록 조회
+export const getMembers = async ({
+  dashboardId,
+}: {
+  dashboardId: number;
+}): Promise<Member[]> => {
   if (!dashboardId) {
-    console.error("dashboardID가 없습니다.");
+    console.error("dashboardId가 없습니다.");
+    return [];
+  }
+
+  try {
+    const response = await axiosInstance.get(apiRoutes.members(), {
+      params: {
+        dashboardId,
+      },
+    });
+
+    const members: Member[] = response.data.members || [];
+
+    console.log("✅ getMembers 응답 데이터:", members); // 디버깅용 로그
+    return members;
+  } catch (error) {
+    console.error("🚨 getMembers API 실패:", error);
     return [];
   }
-  const response = await axiosInstance.get(apiRoutes.members(), {
-    params: {
-      dashboardId,
-    },
-  });
-  return response.data.members || [];
 };
 
-// 대시보드 멤버 삭제
+// 🔹 대시보드 멤버 삭제
 export const deleteMembers = async (memberId: number) => {
   const response = await axiosInstance.delete(apiRoutes.memberDetail(memberId));
   return response.data;
diff --git a/src/components/columnCard/Column.tsx b/src/components/columnCard/Column.tsx
@@ -46,7 +46,12 @@ export default function Column({
   const [isCardDetailModalOpen, setIsCardDetailModalOpen] = useState(false);
   const [selectedCard, setSelectedCard] = useState<CardDetailType | null>(null);
   const [members, setMembers] = useState<
-    { id: number; userId: number; nickname: string }[]
+    {
+      id: number;
+      userId: number;
+      nickname: string;
+      profileImageUrl: string | null;
+    }[]
   >([]);
 
   const maxColumnTitleLength = 15;
@@ -64,6 +69,7 @@ export default function Column({
           id: m.id,
           userId: m.userId,
           nickname: m.nickname || m.email,
+          profileImageUrl: m.profileImageUrl,
         }));
 
         setMembers(parsed);
diff --git a/src/components/modalDashboard/CardDetailModal.tsx b/src/components/modalDashboard/CardDetailModal.tsx
@@ -1,4 +1,3 @@
-import { useRef } from "react";
 import clsx from "clsx";
 import { MoreVertical, X } from "lucide-react";
 import CardDetail from "./CardDetail";
@@ -12,6 +11,7 @@ import { TEAM_ID } from "@/constants/team";
 import { useDashboardPermission } from "@/hooks/useDashboardPermission";
 import { useCardDetailState } from "@/hooks/useCardDetailState";
 import { useCardDetail } from "@/hooks/useCardDetail";
+import { getCardDetail } from "@/api/card";
 import type { CardDetailType } from "@/types/cards";
 
 interface CardDetailModalProps {
@@ -162,24 +162,16 @@ export default function CardDetailPage({
           dashboardId={dashboardId}
           members={members}
           onClose={() => setIsEditModalOpen(false)}
-          onSubmit={(updatedData) => {
-            onChangeCard?.();
-            setCardData((prev) => ({
-              ...prev,
-              title: updatedData.title,
-              description: updatedData.description,
-              dueDate: updatedData.deadline ?? "",
-              tags: updatedData.tags,
-              imageUrl: updatedData.image ?? "",
-              assignee: {
-                ...prev.assignee,
-                nickname: updatedData.assignee,
-              },
-              columnId:
-                columns.find((col) => col.title === updatedData.status)?.id ??
-                prev.columnId,
-            }));
-            setIsEditModalOpen(false);
+          onSubmit={async () => {
+            try {
+              const updatedCard = await getCardDetail(cardData.id);
+              setCardData(updatedCard);
+              onChangeCard?.();
+            } catch (error) {
+              toast.error("카드 정보를 불러오는 데 실패했습니다.");
+            } finally {
+              setIsEditModalOpen(false);
+            }
           }}
           initialData={{
             status: columnName,
diff --git a/src/components/modalDashboard/CardProfileIcon.tsx b/src/components/modalDashboard/CardProfileIcon.tsx
@@ -21,6 +21,7 @@ export const ProfileIcon: React.FC<ProfileIconProps> = ({
   <>
     {profileImageUrl ? (
       <Image
+        key={profileImageUrl}
         src={profileImageUrl}
         alt="유저 프로필 아이콘"
         width={26}
diff --git a/src/components/modalDashboard/Representative.tsx b/src/components/modalDashboard/Representative.tsx
@@ -20,6 +20,7 @@ export const Representative = ({ card }: RepresentativeProps) => {
           <p className="font-12sb text-black3 mb-[4px]">담당자</p>
           <div className="flex items-center gap-2">
             <ProfileIcon
+              key={card.assignee.profileImageUrl}
               userId={card.assignee.id}
               nickname={card.assignee.nickname}
               profileImageUrl={card.assignee.profileImageUrl ?? ""}
diff --git a/src/components/modalInput/AssigneeSelect.tsx b/src/components/modalInput/AssigneeSelect.tsx
@@ -1,9 +1,10 @@
 import { useState } from "react";
-import RandomProfile from "@/components/common/RandomProfile";
 
 interface User {
   id: number;
-  name: string;
+  userId: number;
+  nickname: string;
+  profileImageUrl: string | null;
 }
 
 interface AssigneeSelectProps {
@@ -23,11 +24,10 @@ export default function AssigneeSelect({
 }: AssigneeSelectProps) {
   const [isOpen, setIsOpen] = useState(false);
   const [filter, setFilter] = useState("");
-  const selectedUser = users.find((u) => u.name === value);
 
-  // 유저 필터링
+  const selectedUser = users.find((u) => u.nickname === value);
   const filtered = users.filter((user) =>
-    user.name.toLowerCase().includes(filter.toLowerCase())
+    user.nickname.toLowerCase().includes(filter.toLowerCase())
   );
 
   return (
@@ -40,21 +40,25 @@ export default function AssigneeSelect({
       )}
 
       <div className="relative w-full">
-        {/* 선택된 담당자 */}
+        {/* 선택된 담당자 표시 */}
         <div
           className="flex items-center justify-between h-[48px] px-4 border border-[var(--color-gray3)] rounded-md cursor-pointer focus-within:border-[var(--primary)]"
           onClick={() => setIsOpen(!isOpen)}
         >
           <div className="flex items-center gap-2">
-            {value ? (
+            {selectedUser ? (
               <>
-                <RandomProfile
-                  name={value}
-                  userId={selectedUser?.id ?? 0}
-                  className="w-[26px] h-[26px]"
-                />
+                {selectedUser.profileImageUrl ? (
+                  <img
+                    src={selectedUser.profileImageUrl}
+                    alt={`${selectedUser.nickname} 프로필`}
+                    className="w-[26px] h-[26px] rounded-full object-cover"
+                  />
+                ) : (
+                  <div className="w-[26px] h-[26px] rounded-full bg-gray-300" />
+                )}
                 <span className="font-normal text-[14px] sm:text-[16px]">
-                  {value}
+                  {selectedUser.nickname}
                 </span>
               </>
             ) : (
@@ -65,35 +69,34 @@ export default function AssigneeSelect({
           </div>
         </div>
 
-        {/* 드롭다운 */}
+        {/* 드롭다운 목록 */}
         {isOpen && (
-          <ul
-            className="absolute z-10 top-full left-0 mt-1
-          w-full max-h-[200px] overflow-y-auto
-          bg-white border border-[var(--color-gray3)] rounded-md shadow-lg"
-          >
-            {filtered.map((user, idx) => (
+          <ul className="absolute z-10 top-full left-0 mt-1 w-full max-h-[200px] overflow-y-auto bg-white border border-[var(--color-gray3)] rounded-md shadow-lg">
+            {filtered.map((user) => (
               <li
-                key={idx}
+                key={user.userId}
                 onClick={() => {
-                  onChange(user.name);
+                  onChange(user.nickname);
                   setIsOpen(false);
                   setFilter("");
                 }}
-                className="flex items-center justify-between
-                px-4 py-2 cursor-pointer hover:bg-gray-100"
+                className="flex items-center justify-between px-4 py-2 cursor-pointer hover:bg-gray-100"
               >
                 <div className="flex items-center gap-2">
-                  <RandomProfile
-                    name={user.name}
-                    userId={user.id}
-                    className="w-[26px] h-[26px]"
-                  />
+                  {user.profileImageUrl ? (
+                    <img
+                      src={user.profileImageUrl}
+                      alt={`${user.nickname} 프로필`}
+                      className="w-[26px] h-[26px] rounded-full object-cover"
+                    />
+                  ) : (
+                    <div className="w-[26px] h-[26px] rounded-full bg-gray-300" />
+                  )}
                   <span className="font-normal text-black3 sm:text-[16px] text-[14px]">
-                    {user.name}
+                    {user.nickname}
                   </span>
                 </div>
-                {value === user.name && (
+                {value === user.nickname && (
                   <span className="text-[var(--primary)]">✔</span>
                 )}
               </li>
diff --git a/src/components/modalInput/TaskModal.tsx b/src/components/modalInput/TaskModal.tsx
@@ -17,6 +17,7 @@ interface TaskModalProps {
     id: number;
     userId: number;
     nickname: string;
+    profileImageUrl: string | null;
   }[];
   columnId: number;
   dashboardId: number;
@@ -60,7 +61,7 @@ export default function TaskModal({
     onClose,
     onSubmit,
   });
-
+  console.log("🔍 members in TaskModal", members);
   return (
     <div className="fixed inset-0 flex items-center justify-center bg-black/35 z-50">
       <div className="sm:w-[584px] w-[327px] h-[calc(var(--vh)_*_90)] rounded-lg bg-white p-4 sm:p-8 shadow-lg flex flex-col gap-4 sm:gap-8 overflow-y-auto">
@@ -69,6 +70,7 @@ export default function TaskModal({
         </h2>
 
         <div className="flex flex-col gap-4 sm:gap-8">
+          {/* 상태 및 담당자 */}
           <div className="flex flex-col sm:flex-row gap-4 text-black3 font-normal text-[14px] sm:text-[16px]">
             <StatusSelect
               label="상태"
@@ -81,7 +83,7 @@ export default function TaskModal({
               label="담당자"
               value={formData.assignee}
               required
-              users={members.map((m) => ({ id: m.id, name: m.nickname }))}
+              users={members} // ✅ 전체 멤버 데이터 전달
               onChange={(value) => handleChange("assignee", value)}
             />
           </div>
diff --git a/src/hooks/useCardDetail.ts b/src/hooks/useCardDetail.ts
@@ -1,5 +1,4 @@
-// src/hooks/useCardDetail.ts
-import { useState, useRef, useMemo } from "react";
+import { useState, useRef } from "react";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { deleteCard } from "@/api/card";
 import { toast } from "react-toastify";
diff --git a/src/hooks/useTaskForm.ts b/src/hooks/useTaskForm.ts
@@ -27,7 +27,6 @@ export function useTaskForm({
   initialData,
   members,
   dashboardId,
-  columnId,
   cardId,
   updatedColumnId,
   onClose,
