Merge pull request #122 from hyeonjiroh/feat/#112/mydashboard-page

[fix] #115/할 일 생성 모달 API 연결

Author: jihye5081

src/app/(after-login)/dashboard/[dashboardid]/_components/AddTaskButton.tsx

@@ -1,15 +1,22 @@
 import { useModalStore } from "@/lib/store/useModalStore";
+import { useColumnStore } from "@/lib/store/useColumnStore";
 import Button from "@/components/common/button/Button";
 import Image from "next/image";
 import AddIcon from "../../../../../../public/icon/add_icon.svg";
 
-export default function AddTaskButton() {
+export default function AddTaskButton({ columnId }: { columnId: number }) {
   const { openModal } = useModalStore();
+  const { setSelectedColumnId } = useColumnStore();
+
+  const openCreateTaskModal = () => {
+    setSelectedColumnId(columnId);
+    openModal("createTask");
+  };
 
   return (
     <Button
       variant="whiteGray"
-      onClick={() => openModal("createTask")}
+      onClick={openCreateTaskModal}
       className="flex gap-3 w-full h-[32px] rounded-md tablet:h-[40px] pc:w-[314px]"
     >
       <Image

src/app/(after-login)/dashboard/[dashboardid]/_components/Column.tsx

@@ -76,7 +76,7 @@ export default function Column({ id, title }: DashboardColumn) {
         </div>
         <div className="flex flex-col gap-[10px] flex-grow min-h-0 tablet:gap-4">
           <div>
-            <AddTaskButton />
+            <AddTaskButton columnId={id} />
           </div>
           <div className="flex flex-col gap-[10px] flex-grow min-h-0 overflow-y-auto whitespace-nowrap scrollbar-hide tablet:gap-4">
             {items.map((item, index) => (

src/components/modal/create-task/CreateTaskModal.tsx

@@ -1,37 +1,151 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import Image from "next/image";
 import Modal from "@/components/common/modal/Modal";
 import TagInput from "@/components/common/input/TagInput";
 import Input from "@/components/common/input/Input";
+import DateInput from "@/components/common/input/DateInput";
 import ImageInput from "@/components/common/input/ImageInput";
 import Textarea from "@/components/common/textarea/Textarea";
+import UserIcon from "@/components/common/user-icon/UserIcon";
 import dropdownIcon from "../../../../public/icon/dropdown_icon.svg";
+import { fetchDashboardMember } from "@/lib/apis/membersApi";
+import { DashboardMember } from "@/lib/types";
+import { useDashboardStore } from "@/lib/store/useDashboardStore";
+import { useColumnStore } from "@/lib/store/useColumnStore";
+import checkItem from "../../../../public/icon/check_icon.svg";
+import { createCard } from "@/lib/apis/cardsApi";
 
 export default function CreateDashboardModal() {
+  const { dashboardId } = useDashboardStore();
+  const { selectedColumnId } = useColumnStore();
+  const [assignees, setAssignees] = useState<DashboardMember | null>(null);
+  const [form, setForm] = useState<{ title: string; description: string }>({
+    title: "",
+    description: "",
+  });
+  const [dueDate, setDueDate] = useState<string>("");
+  const [tags, setTags] = useState<string[]>([]);
+  const [imageUrl, setImageUrl] = useState<string | null>(null);
+  const [items, setItems] = useState<DashboardMember[]>([]);
+
   // 해당 폼이 유효성 검사 후 제출 가능해질 때 해당 state 값이 true가 되도록 하기
   const [isFormValid, setIsFormValid] = useState(false);
-
-  // TagInput 컴포넌트에 전달할 state
-  const [tags, setTags] = useState<string[]>([]);
-  const [selectedManager, setSelectedManager] = useState<string | null>(null);
+  // const [selectedColumn, setSelectedColumn] = useState(0);
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
 
-  const managers = ["김경민", "노현지", "이아름", "이재혁", "임지혜"];
+  const accessToken = localStorage.getItem("accessToken") ?? "";
+
+  const fetchMembers = async () => {
+    if (!dashboardId) return;
+
+    try {
+      const res = await fetchDashboardMember({
+        token: accessToken,
+        id: dashboardId,
+        page: 1,
+        size: 20,
+      });
+      console.log("Fetched members:", res.members); // 데이터 확인용
+
+      setItems(res.members);
+    } catch (error) {
+      console.error("Failed to load members:", error);
+    }
+  };
+
+  useEffect(() => {
+    if (dashboardId !== undefined && dashboardId !== null) {
+      fetchMembers();
+    }
+  }, [dashboardId]);
+
+  // useEffect(() => {}, [items]);
+
+  const handleAssigneeSelect = (selectedAssignee: DashboardMember) => {
+    if (!selectedAssignee) {
+      console.error("선택된 담당자가 없습니다.");
+      return;
+    }
+    setAssignees(selectedAssignee); // 선택된 담당자 정보를 assignee 상태로 업데이트
+    setIsDropdownOpen(false);
+  };
+
+  const handleInputChange = (
+    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+  ) => {
+    const { name, value } = e.target;
+    setForm((prev) => ({
+      ...prev,
+      [name]: value, // 변경된 값만 업데이트
+    }));
+  };
+
+  const selected = items.find(
+    (assignee) => assignees?.userId === assignee.userId
+  );
+
+  useEffect(() => {
+    const isNotEmpty =
+      form.title.trim() !== "" &&
+      form.description.trim() !== "" &&
+      assignees !== null &&
+      dueDate.trim() !== "" &&
+      tags.join() !== "";
+    setIsFormValid(isNotEmpty);
+  }, [form.title, form.description, assignees, dueDate, tags]);
 
   // 활성화된 모달 버튼 클릭 시 실행할 함수
-  const buttonClick = () => {
-    alert("Hi"); // 이 부분 바꿔주시면 됩니다
-    setIsFormValid(false); // 이 코드는 배포할 때 문제가 있어서 임시로 넣어놓은 코드라 삭제하시면 됩니다
+  const buttonClick = async () => {
+    if (!dashboardId) return;
+    if (!selectedColumnId) return;
+
+    // 생성된 데이터 값 확인용 입니당
+    console.log("카드 생성 데이터:", {
+      dashboardId,
+      selectedColumnId,
+      assigneeUserId: assignees?.userId,
+      title: form.title,
+      description: form.description,
+      dueDate,
+      tags,
+      imageUrl,
+    });
+
+    try {
+      await createCard({
+        token: accessToken,
+        assigneeUserId: Number(assignees?.userId),
+        dashboardId: Number(dashboardId),
+        columnId: selectedColumnId,
+        title: form.title,
+        description: form.description,
+        dueDate,
+        tags,
+        imageUrl,
+      });
+    } catch (error) {
+      console.error("카드 생성 실패:", error);
+    }
+
+    window.location.reload();
   };
 
+  // dashboardId가 number로 잘나오는지 확인하려고 작성한 코드입니당
+  useEffect(() => {
+    console.log("🔍 dashboardId 값:", dashboardId);
+    console.log("🔍 dashboardId 타입:", typeof dashboardId);
+  }, [dashboardId]);
+
+  if (!selectedColumnId) return;
+
   return (
     <Modal
       button={{
         onConfirm: buttonClick,
         disabled: !isFormValid,
       }}
     >
-      <div className="flex flex-col w-[271px] gap-6 tablet:w-[520px] tablet:gap-8">
+      <div className="relative flex flex-col w-[271px] gap-6 tablet:w-[520px] tablet:gap-8">
         <div className="relative flex flex-col">
           <label className="block mb-2.5 text-lg font-medium text-gray-800 tablet:mb-2 tablet:text-2lg">
             담당자
@@ -41,40 +155,88 @@ export default function CreateDashboardModal() {
             onClick={() => setIsDropdownOpen((prev) => !prev)}
           >
             <div className="flex justify-between">
-              <span>{selectedManager || "이름을 입력해 주세요"}</span>
+              {selected ? (
+                <div className="flex items-center gap-[6px]">
+                  <UserIcon
+                    name={selected.nickname}
+                    img={selected.profileImageUrl}
+                    size="sm"
+                  />
+                  <div className="font-normal text-lg text-gray-800">
+                    {selected.nickname}
+                  </div>
+                </div>
+              ) : (
+                <span className="text-gray-500">담당자 선택</span>
+              )}
               <Image src={dropdownIcon} width={8} height={8} alt="" />
             </div>
           </button>
         </div>
 
         {isDropdownOpen && (
-          <ul className="border border-gray-400 rounded-md">
-            {managers.map((manager) => (
+          <ul className="border border-gray-400 rounded-md w-full tablet:w-[520px] absolute top-[89px] z-10 bg-white">
+            {items.map((assignee) => (
               <li
-                key={manager}
+                key={assignee.userId}
                 className="px-4 py-2 hover:text-violet hover:bg-violet-8 cursor-pointer"
                 onClick={() => {
-                  setSelectedManager(manager);
-                  setIsDropdownOpen(false);
+                  handleAssigneeSelect(assignee);
                 }}
               >
-                {manager}
+                <div className="flex gap-2 items-center">
+                  <div className="relative invert brightness-75 w-4 h-3">
+                    {assignees?.userId === assignee.userId && (
+                      <Image
+                        src={checkItem}
+                        fill
+                        alt="checkIcon"
+                        className="mr-2"
+                      />
+                    )}
+                  </div>
+                  <div className="flex items-center gap-1.5">
+                    <UserIcon
+                      name={assignee.nickname}
+                      img={assignee.profileImageUrl}
+                      size="sm"
+                    />
+                    {assignee.nickname}
+                  </div>
+                </div>
               </li>
             ))}
           </ul>
         )}
-        <Input label="제목" placeholder="제목을 입력해 주세요" required />
+        <Input
+          label="제목"
+          name="title"
+          value={form.title}
+          onChange={handleInputChange}
+          placeholder="제목을 입력해 주세요"
+          required
+        />
         <Textarea
           label="설명"
+          name="description"
+          value={form.description}
+          onChange={handleInputChange}
           placeholder="설명을 입력해 주세요"
           required
           spanClassName="ml-0.5"
           containerClassName="gap-2.5 tablet:gap-2"
           labelClassName="font-medium text-lg tablet:text-2lg"
           textareaClassName="font-normal placeholder:text-gray-500 rounded-md text-md  h-[84px] px-4 py-[13px] tablet:rounded-lg tablet:h-[126px] tablet:py-[15px] tablet:text-lg"
         />
+        <DateInput value={dueDate} onChange={setDueDate} />
         <TagInput label="태그" tags={tags} setTags={setTags} />
-        <ImageInput label="이미지" variant="task" columnId={46355} />
+        <ImageInput
+          label="이미지"
+          variant="task"
+          columnId={selectedColumnId}
+          token={accessToken}
+          onImageUrlChange={(url) => setImageUrl(url)}
+        />
       </div>
     </Modal>
   );

src/lib/apis/cardsApi.ts

@@ -104,3 +104,62 @@ export async function deleteCard({
 
   return null;
 }
+
+export async function createCard({
+  token,
+  assigneeUserId,
+  dashboardId,
+  columnId,
+  title,
+  description,
+  dueDate,
+  tags,
+  imageUrl,
+}: {
+  token: string;
+  assigneeUserId: number;
+  dashboardId: number;
+  columnId: number;
+  title: string;
+  description: string;
+  dueDate: string;
+  tags: string[];
+  imageUrl: string | null;
+}) {
+  type CreateCardPayload = {
+    assigneeUserId: number;
+    dashboardId: number;
+    columnId: number;
+    title: string;
+    description: string;
+    dueDate: string;
+    tags: string[];
+    imageUrl?: string;
+  };
+
+  const payload: CreateCardPayload = {
+    assigneeUserId,
+    dashboardId,
+    columnId,
+    title,
+    description,
+    dueDate,
+    tags,
+  };
+
+  if (imageUrl) {
+    payload.imageUrl = imageUrl;
+  }
+
+  const res = await fetch(`${BASE_URL}/cards`, {
+    method: "POST",
+    headers: {
+      accept: "application/json",
+      Authorization: `Bearer ${token}`,
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify(payload),
+  });
+
+  return await res.json();
+}