Merge pull request #101 from part3-4team-Taskify/modalInputApi2

[feat] 할일 수정모달 api연결

Author: MINJI121

src/api/card.ts

@@ -84,3 +84,38 @@ export const getDashboardMembers = async ({
 
   return res.data.members;
 };
+
+/** 4. 카드 수정 */
+export const updateCard = async ({
+  teamId,
+  cardId,
+  columnId,
+  assigneeUserId,
+  title,
+  description,
+  dueDate,
+  tags,
+  imageUrl,
+}: {
+  teamId: string;
+  cardId: number;
+  columnId: number;
+  assigneeUserId: number;
+  title: string;
+  description: string;
+  dueDate: string;
+  tags: string[];
+  imageUrl?: string;
+}) => {
+  const response = await axiosInstance.put(`/${teamId}/cards/${cardId}`, {
+    columnId,
+    assigneeUserId,
+    title,
+    description,
+    dueDate,
+    tags,
+    imageUrl,
+  });
+
+  return response.data;
+};

src/components/modalInput/ModalImage.tsx

@@ -1,24 +1,33 @@
 import Image from "next/image";
-import { ChangeEvent, useRef, useState } from "react";
+import { ChangeEvent, useEffect, useRef, useState } from "react";
 import AddButton from "./AddButton";
 import { uploadCardImage } from "@/api/card";
 
 interface ModalImageProps {
   label: string;
   teamId: string;
   columnId: number;
-  onImageSelect: (imageUrl: string) => void;
+  defaultImageUrl?: string;
+  onImageSelect: (imageUrl: string) => void; // ✅ string만 넘김
 }
 
 export default function ModalImage({
   label,
   teamId,
   columnId,
+  defaultImageUrl,
   onImageSelect,
 }: ModalImageProps) {
   const [backgroundImage, setBackgroundImage] = useState<string | null>(null);
   const fileInputRef = useRef<HTMLInputElement | null>(null);
 
+  // 기존 이미지 표시
+  useEffect(() => {
+    if (defaultImageUrl) {
+      setBackgroundImage(defaultImageUrl);
+    }
+  }, [defaultImageUrl]);
+
   const handleFileInputClick = () => {
     fileInputRef.current?.click();
   };
@@ -27,21 +36,22 @@ export default function ModalImage({
     const file = e.target.files?.[0];
     if (!file) return;
 
-    // 이미지 미리보기
+    // 미리보기용
     const reader = new FileReader();
     reader.onload = (event) => {
       const imageSrc = event.target?.result as string;
       setBackgroundImage(imageSrc);
     };
     reader.readAsDataURL(file);
 
+    // ✅ 업로드 후 URL 전달
     try {
       const imageUrl = await uploadCardImage({
         teamId,
         columnId,
-        imageFile: file, // ✅ File만 넘김
+        imageFile: file,
       });
-      onImageSelect(imageUrl); // 부모로 전달
+      onImageSelect(imageUrl);
     } catch (error) {
       console.error("이미지 업로드 실패:", error);
       alert("이미지 업로드에 실패했어요.");
@@ -64,7 +74,7 @@ export default function ModalImage({
               src={backgroundImage}
               fill
               alt="Selected Image"
-              className="rounded-md"
+              className="rounded-md object-cover"
               unoptimized
             />
             <div className="z-10 flex w-[76px] h-[76px] items-center justify-center rounded-md bg-[var(--color-black4)] opacity-0 transition-opacity duration-200 ease-in-out group-hover:opacity-60">

src/components/modalInput/TaskModal.tsx

@@ -11,23 +11,25 @@ interface TaskModalProps {
   onClose: () => void;
   onSubmit: (data: TaskData) => void;
   initialData?: Partial<TaskData>;
+  members: { nickname: string }[]; // ✅ 담당자 목록 받기
 }
 
-interface TaskData {
+export interface TaskData {
   status: string;
   assignee: string;
   title: string;
   description: string;
   deadline: string;
   tags: string[];
-  image?: File;
+  image?: string; // ✅ 이미지 URL
 }
 
 export default function TaskModal({
   mode = "create",
   onClose,
   onSubmit,
   initialData = {},
+  members,
 }: TaskModalProps) {
   const [formData, setFormData] = useState<TaskData>({
     status: initialData.status || "",
@@ -36,19 +38,23 @@ export default function TaskModal({
     description: initialData.description || "",
     deadline: initialData.deadline || "",
     tags: initialData.tags || [],
-    image: initialData.image,
+    image: initialData.image || "",
   });
 
-  const handleChange = (
-    field: keyof TaskData,
-    value: string | string[] | File
-  ) => {
+  const handleChange = (field: keyof TaskData, value: string | string[]) => {
     setFormData((prev) => ({
       ...prev,
       [field]: value,
     }));
   };
 
+  const isFormValid =
+    formData.assignee &&
+    formData.status &&
+    formData.title &&
+    formData.description &&
+    formData.deadline;
+
   return (
     <div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-30 p-4 z-50">
       <div className="w-full max-w-[584px] h-auto max-h-[90vh] rounded-lg bg-white p-4 sm:p-8 shadow-lg flex flex-col gap-4 sm:gap-8 overflow-y-auto">
@@ -69,6 +75,7 @@ export default function TaskModal({
             <AssigneeSelect
               label="담당자"
               value={formData.assignee}
+              users={members.map((m) => m.nickname)} // ✅ 드롭다운용
               required
               onChange={(value) => handleChange("assignee", value)}
             />
@@ -104,7 +111,10 @@ export default function TaskModal({
 
           <ModalImage
             label="이미지"
-            onImageSelect={(file) => handleChange("image", file)}
+            teamId={""} // ✅ 부모에서 넘겨줘야 함
+            columnId={0}
+            defaultImageUrl={formData.image}
+            onImageSelect={(url) => handleChange("image", url)}
           />
         </div>
 
@@ -123,6 +133,7 @@ export default function TaskModal({
             buttonSize="md"
             onClick={() => onSubmit(formData)}
             className="w-full sm:w-[256px] h-[54px] bg-[var(--primary)] text-white rounded-lg"
+            disabled={!isFormValid}
           >
             {mode === "edit" ? "수정" : "생성"}
           </TextButton>