Merge pull request #98 from part3-4team-Taskify/modalInputApi

[Feat] 할일 생성모달 Api 연결

Author: MINJI121

src/api/axiosInstance.ts

@@ -1,18 +1,13 @@
 import axios from "axios";
 
-// 👉 디버깅용 로그 출력
 console.log("🔐 BASE_URL:", process.env.NEXT_PUBLIC_BASE_URL);
 console.log("🔐 API_TOKEN:", process.env.NEXT_PUBLIC_API_TOKEN);
 
 const axiosInstance = axios.create({
   baseURL: process.env.NEXT_PUBLIC_BASE_URL,
 });
 
-// 👉 Authorization 헤더 자동 설정
-axiosInstance.defaults.headers.common["Authorization"] =
-  `Bearer ${process.env.NEXT_PUBLIC_API_TOKEN}`;
-
-// 👉 요청 보낼 때마다 토큰 자동 추가
+// ✅ Authorization 헤더 자동 추가
 axiosInstance.interceptors.request.use((config) => {
   const token = localStorage.getItem("accessToken");
   if (token) {

src/api/card.ts

@@ -0,0 +1,86 @@
+import axiosInstance from "./axiosInstance";
+
+/** 1. 카드 이미지 업로드 */
+export const uploadCardImage = async ({
+  teamId,
+  columnId,
+  imageFile,
+}: {
+  teamId: string;
+  columnId: number;
+  imageFile: File;
+}): Promise<string> => {
+  const formData = new FormData();
+  formData.append("image", imageFile);
+
+  const response = await axiosInstance.post(
+    `/${teamId}/columns/${columnId}/card-image`,
+    formData,
+    {
+      headers: {
+        "Content-Type": "multipart/form-data",
+      },
+    }
+  );
+
+  return response.data.imageUrl;
+};
+
+/** 2. 카드 생성 */
+export const createCard = async ({
+  teamId,
+  assigneeUserId,
+  dashboardId,
+  columnId,
+  title,
+  description,
+  dueDate,
+  tags,
+  imageUrl,
+}: {
+  teamId: string;
+  assigneeUserId: number;
+  dashboardId: number;
+  columnId: number;
+  title: string;
+  description: string;
+  dueDate: string;
+  tags: string[];
+  imageUrl?: string;
+}) => {
+  const response = await axiosInstance.post(`/${teamId}/cards`, {
+    assigneeUserId,
+    dashboardId,
+    columnId,
+    title,
+    description,
+    dueDate,
+    tags,
+    imageUrl,
+  });
+
+  return response.data;
+};
+
+/** 3. 대시보드 멤버 조회 (담당자용) */
+export const getDashboardMembers = async ({
+  teamId,
+  dashboardId,
+  page = 1,
+  size = 20,
+}: {
+  teamId: string;
+  dashboardId: number;
+  page?: number;
+  size?: number;
+}) => {
+  const res = await axiosInstance.get(`/${teamId}/members`, {
+    params: {
+      page,
+      size,
+      dashboardId,
+    },
+  });
+
+  return res.data.members;
+};

src/components/columnCard/Column.tsx

@@ -1,5 +1,4 @@
-// components/column/Column.tsx
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import Image from "next/image";
 import { CardType } from "@/types/task";
 import Card from "./Card";
@@ -8,6 +7,7 @@ import TodoButton from "@/components/button/TodoButton";
 import ColumnManageModal from "@/components/columnCard/ColumnManageModal";
 import ColumnDeleteModal from "@/components/columnCard/ColumnDeleteModal";
 import { updateColumn, deleteColumn } from "@/api/dashboards";
+import { getDashboardMembers } from "@/api/card";
 
 type ColumnProps = {
   columnId: number;
@@ -29,6 +29,34 @@ export default function Column({
   const [isTodoModalOpen, setIsTodoModalOpen] = useState(false);
   const [columnTitle, setColmnTitle] = useState(title);
 
+  const [members, setMembers] = useState<
+    { id: number; userId: number; nickname: string }[]
+  >([]);
+
+  // ✅ 멤버 불러오기
+  useEffect(() => {
+    const fetchMembers = async () => {
+      try {
+        const result = await getDashboardMembers({
+          teamId,
+          dashboardId,
+        });
+
+        const parsed = result.map((m: any) => ({
+          id: m.id,
+          userId: m.userId,
+          nickname: m.nickname || m.email,
+        }));
+
+        setMembers(parsed);
+      } catch (error) {
+        console.error("멤버 불러오기 실패:", error);
+      }
+    };
+
+    fetchMembers();
+  }, [teamId, dashboardId]);
+
   const handleEditColumn = async (newTitle: string) => {
     if (!newTitle.trim()) {
       alert("칼럼 이름을 입력해주세요.");
@@ -51,7 +79,7 @@ export default function Column({
       await deleteColumn({ teamId, columnId });
       setIsDeleteModalOpen(false);
       alert("칼럼이 삭제되었습니다.");
-      // 👉 부모에서 상태를 관리 중이라면 삭제 후 다시 데이터를 불러오거나, 상태 업데이트 필요!
+      // :point_right: 부모에서 상태를 관리 중이라면 삭제 후 다시 데이터를 불러오거나, 상태 업데이트 필요!
     } catch (error) {
       console.error("칼럼 삭제 실패:", error);
       alert("칼럼 삭제에 실패했습니다.");
@@ -99,10 +127,12 @@ export default function Column({
       {/* Todo 모달 */}
       {isTodoModalOpen && (
         <TodoModal
-          isOpen={isTodoModalOpen} // todo todomodal에서 타입정의 추가하기 (isOpen, teamId, dashboardId)
+          isOpen={isTodoModalOpen}
           onClose={() => setIsTodoModalOpen(false)}
           teamId={teamId}
           dashboardId={dashboardId}
+          columnId={columnId}
+          members={members} // ✅ 멤버 넘겨줌
         />
       )}
 

src/components/modalInput/AssigneeSelect.tsx

@@ -1,41 +1,32 @@
 import { useState } from "react";
-import clsx from "clsx";
-import Image from "next/image";
 
 interface AssigneeSelectProps {
   value: string;
   onChange: (value: string) => void;
+  users: string[]; // users는 string[]이어야 합니다.
   label?: string;
   required?: boolean;
 }
 
-const ASSIGNEES = ["배유철", "배동석", "이지은"];
-
-function getInitial(name: string) {
-  return name.charAt(0).toUpperCase();
-}
-
-function getColor(index: number) {
-  const colors = ["bg-[#A0E6FF]", "bg-[#FFD29D]", "bg-[#C2A1FF]"];
-  return colors[index % colors.length];
-}
-
 export default function AssigneeSelect({
   value,
   onChange,
+  users,
   label,
   required,
 }: AssigneeSelectProps) {
   const [isOpen, setIsOpen] = useState(false);
   const [filter, setFilter] = useState("");
 
-  const filtered = ASSIGNEES.filter((name) => name.includes(filter));
+  const filtered = users.filter((name) =>
+    name.toLowerCase().includes(filter.toLowerCase() || "")
+  );
 
   return (
     <div className="inline-flex flex-col items-start gap-2.5 w-full max-w-[520px]">
       {label && (
         <p className="font-18m text-[var(--color-black)]">
-          {label}{" "}
+          {label}
           {required && <span className="text-[var(--color-purple)]">*</span>}
         </p>
       )}
@@ -46,22 +37,19 @@ export default function AssigneeSelect({
           onClick={() => setIsOpen(!isOpen)}
         >
           <div className="flex items-center gap-2">
-            <span
-              className={clsx(
-                "w-6 h-6 rounded-full text-xs text-white flex items-center justify-center",
-                getColor(ASSIGNEES.indexOf(value))
-              )}
-            >
-              {getInitial(value)}
-            </span>
-            <span className="font-18r">{value || "이름을 입력해주세요"}</span>
+            {value ? (
+              <>
+                <span className="w-6 h-6 rounded-full text-xs text-white flex items-center justify-center bg-[#A0E6FF]">
+                  {value.charAt(0).toUpperCase()}
+                </span>
+                <span className="font-18r">{value}</span>
+              </>
+            ) : (
+              <span className="font-18r text-[var(--color-gray2)]">
+                이름을 입력해주세요
+              </span>
+            )}
           </div>
-          <Image
-            src="/svgs/arrow-down.svg"
-            width={20}
-            height={20}
-            alt="dropdown"
-          />
         </div>
 
         {isOpen && (
@@ -76,17 +64,7 @@ export default function AssigneeSelect({
                 }}
                 className="px-4 py-2 cursor-pointer hover:bg-[var(--color-gray1)] flex items-center justify-between"
               >
-                <div className="flex items-center gap-2">
-                  <span
-                    className={clsx(
-                      "w-6 h-6 rounded-full text-xs text-white flex items-center justify-center",
-                      getColor(idx)
-                    )}
-                  >
-                    {getInitial(name)}
-                  </span>
-                  <span className="text-sm">{name}</span>
-                </div>
+                <span className="text-sm">{name}</span>
                 {value === name && (
                   <span className="text-[var(--primary)]">✔</span>
                 )}

src/components/modalInput/ModalImage.tsx

@@ -1,32 +1,50 @@
 import Image from "next/image";
 import { ChangeEvent, useRef, useState } from "react";
-
 import AddButton from "./AddButton";
+import { uploadCardImage } from "@/api/card";
 
 interface ModalImageProps {
   label: string;
-  onImageSelect: (imageUrl: File) => void;
+  teamId: string;
+  columnId: number;
+  onImageSelect: (imageUrl: string) => void;
 }
 
-export default function ModalImage({ label, onImageSelect }: ModalImageProps) {
+export default function ModalImage({
+  label,
+  teamId,
+  columnId,
+  onImageSelect,
+}: ModalImageProps) {
   const [backgroundImage, setBackgroundImage] = useState<string | null>(null);
   const fileInputRef = useRef<HTMLInputElement | null>(null);
 
   const handleFileInputClick = () => {
     fileInputRef.current?.click();
   };
 
-  const handleFileChange = (e: ChangeEvent<HTMLInputElement>) => {
-    const selectedFile = e.target.files?.[0];
+  const handleFileChange = async (e: ChangeEvent<HTMLInputElement>) => {
+    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);
 
-    if (selectedFile) {
-      const reader = new FileReader();
-      reader.onload = (event) => {
-        const imageSrc = event.target?.result as string;
-        setBackgroundImage(imageSrc);
-        onImageSelect(selectedFile);
-      };
-      reader.readAsDataURL(selectedFile);
+    try {
+      const imageUrl = await uploadCardImage({
+        teamId,
+        columnId,
+        imageFile: file, // ✅ File만 넘김
+      });
+      onImageSelect(imageUrl); // 부모로 전달
+    } catch (error) {
+      console.error("이미지 업로드 실패:", error);
+      alert("이미지 업로드에 실패했어요.");
     }
   };
 
@@ -67,6 +85,7 @@ export default function ModalImage({ label, onImageSelect }: ModalImageProps) {
           type="file"
           ref={fileInputRef}
           className="hidden"
+          accept="image/*"
           onChange={handleFileChange}
         />
       </button>

src/components/modalInput/ModalInput.tsx

@@ -31,7 +31,6 @@ export default function ModalInput({
 }: ModalInputProps) {
   const [tagInput, setTagInput] = useState<string>("");
   const [tags, setTags] = useState<Tag[]>([]);
-
   const [isCalendarOpen, setIsCalendarOpen] = useState(false);
   const [selectedDate, setSelectedDate] = useState(defaultValue);
 
@@ -78,10 +77,12 @@ export default function ModalInput({
     onValueChange(updatedTags.map((tag) => tag.text));
   };
 
+  // ✅ 마감일 포맷 수정 (YYYY-MM-DD HH:mm)
   const handleDateChange = (date: moment.Moment | string) => {
     if (moment.isMoment(date)) {
-      setSelectedDate(date.format("YYYY.MM.DD"));
-      onValueChange([date.format("YYYY.MM.DD")]);
+      const formatted = date.format("YYYY-MM-DD HH:mm"); // ← 이 줄이 핵심!
+      setSelectedDate(formatted);
+      onValueChange([formatted]);
     } else {
       setSelectedDate(date);
       onValueChange([date]);