[Fix] 카드, 칼럼 상태 변경 오류 해결

[Fix] 카드, 칼럼 상태 변경오류 해결

Author: MINJI121

src/api/columns.ts

@@ -3,7 +3,7 @@ import axiosInstance from "./axiosInstance";
 import { apiRoutes } from "./apiRoutes";
 import { TEAM_ID } from "@/constants/team";
 
-// 칼럼 생성
+//  칼럼 생성
 export const createColumn = async ({
   title,
   dashboardId,
@@ -19,8 +19,11 @@ export const createColumn = async ({
   return res.data;
 };
 
-// 칼럼 목록 조회
-export const getColumns = async ({ dashboardId }: { dashboardId: number }) => {
+export const getColumns = async ({
+  dashboardId,
+}: {
+  dashboardId: number;
+}): Promise<ColumnType[]> => {
   const res = await axiosInstance.get(apiRoutes.columns(), {
     params: {
       dashboardId,
@@ -29,8 +32,7 @@ export const getColumns = async ({ dashboardId }: { dashboardId: number }) => {
 
   return res.data;
 };
-
-// 칼럼 수정
+//  칼럼 수정
 export const updateColumn = async ({
   columnId,
   title,
@@ -44,22 +46,8 @@ export const updateColumn = async ({
   return res.data;
 };
 
-// 칼럼 삭제
+//  칼럼 삭제
 export const deleteColumn = async ({ columnId }: { columnId: number }) => {
   const res = await axiosInstance.delete(apiRoutes.columnDetail(columnId));
   return res;
 };
-
-export const getColumn = async ({
-  dashboardId,
-}: {
-  dashboardId: number;
-  columnId: number;
-}) => {
-  const res = await axiosInstance.get(apiRoutes.columns(), {
-    params: {
-      dashboardId,
-    },
-  });
-  return res.data.data;
-};

src/components/columnCard/Column.tsx

@@ -1,7 +1,6 @@
-// Column.tsx
 import { useEffect, useState, useRef } from "react";
 import Image from "next/image";
-import { CardType } from "@/types/task";
+import { CardType, ColumnType } from "@/types/task";
 import TaskModal from "@/components/modalInput/TaskModal";
 import { TodoButton, ShortTodoButton } from "@/components/button/TodoButton";
 import ColumnDeleteModal from "@/components/columnCard/ColumnDeleteModal";
@@ -24,6 +23,7 @@ type ColumnProps = {
   createdByMe: boolean;
   columnDelete: (columnId: number) => void;
   fetchColumnsAndCards: () => void;
+  columns: ColumnType[];
 };
 
 export default function Column({
@@ -34,6 +34,7 @@ export default function Column({
   createdByMe,
   columnDelete,
   fetchColumnsAndCards,
+  columns,
 }: ColumnProps) {
   const { canEditColumns } = useDashboardPermission(dashboardId, createdByMe);
 
@@ -56,10 +57,8 @@ export default function Column({
 
   const maxColumnTitleLength = 15;
 
-  // 카드리스트의 스크롤을 칼럼 영역으로 이동
   const scrollRef = useRef<HTMLDivElement | null>(null);
 
-  // ✅ 멤버 불러오기
   useEffect(() => {
     const fetchMembers = async () => {
       try {
@@ -86,7 +85,6 @@ export default function Column({
       toast.error("칼럼 제목을 입력해 주세요.");
       return;
     }
-    setIsColumnModalOpen(false);
 
     try {
       const updated = await updateColumn({ columnId, title: newTitle });
@@ -133,23 +131,17 @@ export default function Column({
       {/* 칼럼 헤더 */}
       <div className="shrink-0 mb-2">
         <div className="flex items-center justify-between">
-          {/* 왼쪽: 타이틀 + 카드 개수 */}
+          {/* 타이틀 + 개수 */}
           <div className="flex items-center gap-2">
             <Image src="/svgs/ellipse.svg" alt="circle" width={8} height={8} />
-            <h2
-              className="text-black3 text-[16px] md:text-[18px] font-bold
-            break-words sm:max-w-none max-w-[90px]"
-            >
+            <h2 className="text-black3 text-[16px] md:text-[18px] font-bold break-words sm:max-w-none max-w-[90px]">
               {columnTitle}
             </h2>
-            <span
-              className="flex items-center justify-center leading-none
-            w-[20px] h-[20px] bg-white text-[var(--primary)] font-14m rounded-[4px]"
-            >
+            <span className="flex items-center justify-center leading-none w-[20px] h-[20px] bg-white text-[var(--primary)] font-14m rounded-[4px]">
               {tasks.length}
             </span>
           </div>
-          {/* 오른쪽: 생성 버튼 + 설정 버튼 */}
+          {/* 버튼 */}
           <div className="flex items-center gap-2">
             <div
               onClick={() => {
@@ -199,9 +191,8 @@ export default function Column({
         </div>
       </div>
 
-      {/* 스크롤바 컨테이너 */}
+      {/* 카드 리스트 */}
       <div className="flex flex-col lg:pl-[21px] overflow-y-auto w-full lg:w-[357px] rounded-md bg-[#F5F2FC]">
-        {/* 카드 리스트 */}
         <div
           className="flex-1 overflow-y-auto overflow-x-hidden"
           style={{ scrollbarGutter: "stable" }}
@@ -217,7 +208,7 @@ export default function Column({
         </div>
       </div>
 
-      {/* 카드 생성 모달 */}
+      {/* 카드 생성 */}
       {isTaskModalOpen && (
         <TaskModal
           mode="create"
@@ -226,14 +217,18 @@ export default function Column({
           dashboardId={dashboardId}
           columnId={columnId}
           members={members}
+          columns={columns}
           initialData={{
             status: columnTitle,
           }}
-          onSubmit={fetchColumnsAndCards}
+          onSubmit={() => {
+            fetchColumnsAndCards();
+            setIsTaskModalOpen(false);
+          }}
         />
       )}
 
-      {/* 칼럼 관리 모달 */}
+      {/* 칼럼 수정 */}
       {isColumnModalOpen && (
         <FormModal
           title="칼럼 이름 수정"
@@ -265,25 +260,25 @@ export default function Column({
         />
       )}
 
-      {/* 칼럼 삭제 확인 모달 */}
       <ColumnDeleteModal
         isOpen={isDeleteModalOpen}
         onClose={() => setIsDeleteModalOpen(false)}
         onDelete={handleDeleteColumn}
       />
 
-      {/* 카드 상세 모달 */}
+      {/* 카드 상세 */}
       {isCardDetailModalOpen && selectedCard && (
         <CardDetailModal
           card={selectedCard}
           currentUserId={selectedCard.assignee.id}
           dashboardId={dashboardId}
+          createdByMe={createdByMe}
           onClose={() => {
             setIsCardDetailModalOpen(false);
             setSelectedCard(null);
           }}
           onChangeCard={fetchColumnsAndCards}
-          createdByMe={createdByMe}
+          columns={columns}
         />
       )}
     </div>

src/components/modalDashboard/CardDetailModal.tsx

@@ -12,13 +12,16 @@ import { useCardDetailState } from "@/hooks/useCardDetailState";
 import { useCardDetail } from "@/hooks/useCardDetail";
 import { getCardDetail } from "@/api/card";
 import type { CardDetailType } from "@/types/cards";
+import type { ColumnType } from "@/types/task";
 
 interface CardDetailModalProps {
   card: CardDetailType;
   dashboardId: number;
   createdByMe: boolean;
   onClose: () => void;
   onChangeCard?: () => void;
+  columns: ColumnType[];
+  currentUserId?: number;
 }
 
 export default function CardDetailPage({
@@ -27,6 +30,7 @@ export default function CardDetailPage({
   createdByMe,
   onClose,
   onChangeCard,
+  columns,
 }: CardDetailModalProps) {
   const { canEditCards } = useDashboardPermission(dashboardId, createdByMe);
   const { cardData, setCardData, columnName, members } = useCardDetailState(
@@ -148,6 +152,7 @@ export default function CardDetailPage({
         </div>
       </div>
 
+      {/* 수정 모달 */}
       {isEditModalOpen && (
         <TaskModal
           isOpen={true}
@@ -156,6 +161,7 @@ export default function CardDetailPage({
           cardId={cardData.id}
           dashboardId={dashboardId}
           members={members}
+          columns={columns}
           onClose={() => setIsEditModalOpen(false)}
           onSubmit={async () => {
             try {
@@ -170,7 +176,8 @@ export default function CardDetailPage({
             }
           }}
           initialData={{
-            status: columnName,
+            status:
+              columns.find((col) => col.id === cardData.columnId)?.title ?? "",
             assignee: cardData.assignee.nickname,
             title: cardData.title,
             description: cardData.description,

src/components/modalDashboard/UpdateComment.tsx

@@ -1,4 +1,3 @@
-// ✅ UpdateComment.tsx
 import { useState } from "react";
 import { useQueryClient } from "@tanstack/react-query";
 import { deleteComment, updateComment } from "@/api/comment";

src/components/modalDashboard/formatDate.ts

@@ -1,5 +1,3 @@
-// src/utils/formatDate.ts (혹은 components 폴더 내)
-
 export default function formatDate(
   dateString: string,
   includeTime: boolean = true,

src/components/modalInput/CardInput.tsx

@@ -41,10 +41,10 @@ export default function CardInput({
           className
         )}
         style={{
-          overflowY: "auto", // 내용이 넘치면 스크롤 생성
+          overflowY: "auto",
           wordWrap: "break-word",
           whiteSpace: "pre-wrap",
-          boxSizing: "border-box", // padding과 border를 높이에 포함
+          boxSizing: "border-box",
         }}
       />
       {hasButton && (

src/components/modalInput/ModalImage.tsx

@@ -8,7 +8,7 @@ interface ModalImageProps {
   label: string;
   columnId: number;
   defaultImageUrl?: string;
-  onImageSelect: (imageUrl: string) => void; // ✅ string만 넘김
+  onImageSelect: (imageUrl: string) => void;
 }
 
 export default function ModalImage({
@@ -43,7 +43,7 @@ export default function ModalImage({
     };
     reader.readAsDataURL(file);
 
-    // ✅ 업로드 후 URL 전달
+    // 업로드 후 URL 전달
     try {
       const imageUrl = await uploadCardImage({
         columnId,

src/components/modalInput/ModalTextarea.tsx

@@ -6,7 +6,7 @@ interface ModalTextareaProps {
   required?: boolean;
   isButton: boolean;
   small?: boolean;
-  defaultValue?: string; // ✅ 추가됨
+  defaultValue?: string;
   onTextChange: (value: string) => void;
   onButtonClick?: () => void;
 }
@@ -35,7 +35,6 @@ export default function ModalTextarea({
     }
   };
 
-  // ✅ 초기 defaultValue 기준으로 height 조절
   useEffect(() => {
     const textarea = textareaRef.current;
     if (textarea) {
@@ -48,7 +47,7 @@ export default function ModalTextarea({
     <div className="inline-flex flex-col items-start gap-2.5 w-full">
       <label
         htmlFor="comment"
-        className="font-medium text-black3 text-[16px] sm:text-[18px]"
+        className="font-medium text-black3 text-[14px] sm:text-[18px]"
       >
         {label} {required && <span className="text-[var(--primary)]"> *</span>}
       </label>
@@ -71,7 +70,7 @@ export default function ModalTextarea({
           onChange={handleTextareaChange}
           className={`
             w-full resize-none rounded-md border-none px-4 py-3
-            text-black3 text-[16px] sm:text-[18px] font:normal
+            text-black3 text-[14px] sm:text-[16px] font:normal
             outline-none bg-transparent overflow-hidden
             ${small ? "h-[50px]" : "min-h-[110px]"}
           `}

src/components/modalInput/TaskModal.tsx

@@ -5,7 +5,7 @@ import TextButton from "@/components/modalInput/TextButton";
 import StatusSelect from "@/components/modalInput/StatusSelect";
 import AssigneeSelect from "@/components/modalInput/AssigneeSelect";
 import { useTaskForm } from "@/hooks/useTaskForm";
-import { useColumnStatus } from "@/hooks/useColumnStatus";
+import { ColumnType } from "@/types/task";
 
 interface TaskModalProps {
   mode?: "create" | "edit";
@@ -22,6 +22,7 @@ interface TaskModalProps {
   columnId: number;
   dashboardId: number;
   cardId?: number;
+  columns: ColumnType[];
 }
 
 export interface TaskData {
@@ -43,24 +44,34 @@ export default function TaskModal({
   columnId,
   dashboardId,
   cardId,
+  columns,
 }: TaskModalProps) {
-  const updatedColumnId = useColumnStatus(
-    dashboardId,
-    columnId,
-    initialData.status || ""
-  );
-
-  const { formData, handleChange, isFormValid, handleSubmit } = useTaskForm({
+  const {
+    formData,
+    handleChange,
+    isFormValid,
+    handleSubmit: baseHandleSubmit,
+  } = useTaskForm({
     mode,
     initialData,
     members,
     dashboardId,
     columnId,
     cardId,
-    updatedColumnId,
+    columns,
     onClose,
     onSubmit,
   });
+
+  const updatedColumnId =
+    columns?.find(
+      (col) => col.title.toLowerCase() === formData.status?.toLowerCase()
+    )?.id ?? columnId;
+
+  const handleSubmit = () => {
+    baseHandleSubmit(updatedColumnId);
+  };
+
   return (
     <div className="fixed inset-0 flex items-center justify-center bg-black/35 z-50">
       <div className="sm:w-[584px] w-[320px] 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">
@@ -77,7 +88,6 @@ export default function TaskModal({
               required
               onChange={(value) => handleChange("status", value)}
             />
-
             <AssigneeSelect
               label="담당자"
               value={formData.assignee}