[Feature/fix card modal] zustand사용 제거, 카드수정, 생성 모달 병합

src/app/(protected)/dashboard/[id]/page.tsx

@@ -6,21 +6,17 @@ import Chip from "@/components/common/chip/Chip";
 import Column from "@/components/column/Column";
 import MyButton from "@/components/common/Button";
 import { getColumns } from "@/features/columns/api";
-import { useColumnId } from "@/features/columns/store";
 import { ColumnData } from "@/features/dashboard/types";
-import CreateCardModal from "@/components/modal/cardModal/CreateCardModal";
 import CreateColumnModal from "@/components/modal/columnModal/CreateColumnModal";
 
 export default function DashboardId() {
   const { id } = useParams();
   const dashboardId = Number(id);
 
-  const [modal, setModal] = useState<null | "card" | "column">(null);
+  const [modal, setModal] = useState<null | "column">(null);
   const [isKebabOpen, setIsKebabOpen] = useState<number | null>(null);
   const [columns, setColumns] = useState<ColumnData[]>([]);
   const [isLoading, setIsLoading] = useState(true);
-  // Zustand 스토어에서 함수 가져오기
-  const { setColumnIdData, setStatus } = useColumnId();
 
   useEffect(() => {
     if (!dashboardId) return;
@@ -30,31 +26,16 @@ export default function DashboardId() {
         setIsLoading(true);
         const response = await getColumns(dashboardId);
         const columnsData = Array.isArray(response) ? response : response?.data || [];
-
         setColumns(columnsData);
-
-        const statusMap = Object.fromEntries(columnsData.map((c) => [c.title, c.id]));
-        setStatus(statusMap);
       } catch (error) {
-        console.error("컬럼 목록 조회 실패:", error);
+        console.error("컬럼 목록 조회 실패", error);
         setColumns([]);
       } finally {
         setIsLoading(false);
       }
     })();
   }, [dashboardId]);
 
-  // 카드 추가 버튼 클릭 시 - zustand에 정보 저장하고 모달 열기
-  const handleAddCard = (columnId: number, columnTitle: string) => {
-    console.log("카드 추가 클릭 - 컬럼 ID:", columnId, "대시보드 ID:", dashboardId);
-
-    // Zustand에 현재 선택된 컬럼과 대시보드 정보 저장
-    setColumnIdData(dashboardId, columnId, columnTitle);
-
-    // 카드 생성 모달 열기
-    setModal("card");
-  };
-
   const handleAddColumn = () => {
     setModal("column");
   };
@@ -74,12 +55,12 @@ export default function DashboardId() {
           key={item.id}
           status={item.title}
           cards={item.cards ?? []}
-          onAddCard={() => handleAddCard(item.id, item.title)}
           kebabIndex={isKebabOpen === i}
           isKebabOpen={() => setIsKebabOpen((prev) => (prev === i ? null : i))}
           dashboardId={dashboardId}
           columnId={item.id}
           setColumns={setColumns}
+          columns={columns}
         />
       ))}
 
@@ -93,12 +74,6 @@ export default function DashboardId() {
           <Chip variant="add" />
         </MyButton>
       </div>
-
-      {/* 모달들 */}
-      {modal === "card" && (
-        <CreateCardModal isOpen setIsOpen={closeModal} setColumns={setColumns} />
-      )}
-
       {modal === "column" && (
         <CreateColumnModal isOpen setIsOpen={closeModal} setColumns={setColumns} />
       )}

src/components/card/Card.tsx

@@ -18,8 +18,12 @@ type CardWithAssignee = Omit<CardData, "tags"> & {
     nickname: string;
     profileImageUrl?: string;
   };
+  columns?: ColumnData[];
   setColumns?: React.Dispatch<React.SetStateAction<ColumnData[]>>;
+  dashboardId?: number;
   columnId?: number;
+  cardId?: number;
+  status: string;
 };
 
 export default function Card({
@@ -29,7 +33,11 @@ export default function Card({
   imageUrl,
   assignee,
   setColumns,
+  dashboardId,
   columnId,
+  cardId,
+  status,
+  columns,
 }: CardWithAssignee) {
   const [isOpen, setIsOpen] = useState(false);
 
@@ -130,7 +138,11 @@ export default function Card({
             isOpen
             setIsOpen={setIsOpen}
             setColumns={setColumns}
+            dashboardId={dashboardId}
             columnId={columnId}
+            cardId={cardId}
+            status={status}
+            columns={columns}
           />
         </div>
       )}

src/components/column/Column.tsx

@@ -4,13 +4,13 @@ import { useState, useEffect, useRef } from "react";
 
 import DeleteColumnModal from "@/components/modal/columnModal/DeleteColumnModal";
 import ManageColumnModal from "@/components/modal/columnModal/ManageColumnModal";
+import CreateCardModal from "@/components/modal/cardModal/CardModal";
 import Card from "@/components/card/Card";
 import Chip from "@/components/common/chip/Chip";
 import KebabModal from "@/components/modal/KebabModal";
 import MyButton from "@/components/common/Button";
 import Button from "@/components/common/Button";
 import { ColumnProps } from "@/features/dashboard/types";
-import { useColumnId } from "@/features/columns/store";
 import { getCards } from "@/features/cards/api";
 import type { CardData } from "@/features/dashboard/types";
 
@@ -23,10 +23,9 @@ export default function Column({
   columnId,
   dashboardId,
   setColumns,
+  columns,
 }: ColumnProps) {
-  const [modal, setModal] = useState<null | "manage" | "delete">(null);
-  const { setColumnIdData } = useColumnId();
-
+  const [modal, setModal] = useState<null | "manage" | "delete" | "card">(null);
   const loader = useRef<HTMLDivElement | null>(null);
   const [loading, setLoading] = useState(false);
   const [cursorId, setCursorId] = useState<number | undefined>(undefined);
@@ -87,7 +86,6 @@ export default function Column({
 
   const handleClickCard = (cardId: number) => {
     if (dashboardId == null || columnId == null) return;
-    setColumnIdData(dashboardId, columnId, status, cardId);
   };
 
   return (
@@ -102,7 +100,6 @@ export default function Column({
         // pc
         "pc:w-[354px] pc:flex-shrink-0 pc:border-r pc:border-b-0",
       )}
-      onClick={() => console.log("컬럼클릭시 id 숫자", columnId)}
     >
       {/* 컬럼 헤더 */}
       <div className="relative mb-[21px] flex items-center justify-between">
@@ -134,7 +131,12 @@ export default function Column({
       {/* 카드 추가 버튼 */}
       <div className="dark:bg-dark-700 mb-4 bg-white">
         <MyButton
-          onClick={onAddCard ?? (() => {})}
+          onClick={
+            onAddCard ??
+            (() => {
+              setModal("card");
+            })
+          }
           color="buttonBasic"
           className="flex h-10 w-full items-center justify-center"
         >
@@ -146,14 +148,32 @@ export default function Column({
       <div className="flex flex-col gap-[15px]">
         {cards?.map((card) => (
           <div key={card.id} onClick={() => card.id && handleClickCard(card.id)}>
-            <Card {...card} setColumns={setColumns} columnId={columnId} />
+            <Card
+              {...card}
+              setColumns={setColumns}
+              dashboardId={dashboardId}
+              columnId={columnId}
+              cardId={card.id}
+              status={status}
+              columns={columns}
+            />
           </div>
         ))}
         {hasMore && <div ref={loader} className="h-6" />}
         {loading && <p className="text-center text-sm text-gray-500">불러오는 중...</p>}
       </div>
 
       {/* 수정하기, 삭제하기 모달 관리  */}
+      {modal === "card" && (
+        <CreateCardModal
+          isOpen
+          setIsOpen={() => setModal(null)}
+          setColumns={setColumns}
+          dashboardId={dashboardId}
+          columnId={columnId}
+          mode="create"
+        />
+      )}
       {modal === "manage" && columnId !== null && (
         <ManageColumnModal
           isOpen

src/components/form/DatePicker.tsx

@@ -51,6 +51,7 @@ export default function CalendarCommon({ value, onChange }: CalendarCommonProps)
         withPortal
         portalId="dp-portal-root"
         popperPlacement="bottom"
+        placeholderText="날짜를 선택하세요"
         popperModifiers={[
           offset(8),
           shift({ padding: 8 }),