[Fix] TaskModal: 분리 전으로 롤백

[Fix] TaskModal: 분리 전으로 롤백

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,11 +19,8 @@ export const createColumn = async ({
   return res.data;
 };
 
-export const getColumns = async ({
-  dashboardId,
-}: {
-  dashboardId: number;
-}): Promise<ColumnType[]> => {
+// 칼럼 목록 조회
+export const getColumns = async ({ dashboardId }: { dashboardId: number }) => {
   const res = await axiosInstance.get(apiRoutes.columns(), {
     params: {
       dashboardId,
@@ -32,7 +29,8 @@ export const getColumns = async ({
 
   return res.data;
 };
-//  칼럼 수정
+
+// 칼럼 수정
 export const updateColumn = async ({
   columnId,
   title,
@@ -46,8 +44,22 @@ 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,6 +1,7 @@
+// Column.tsx
 import { useEffect, useState, useRef } from "react";
 import Image from "next/image";
-import { CardType, ColumnType } from "@/types/task";
+import { CardType } from "@/types/task";
 import TaskModal from "@/components/modalInput/TaskModal";
 import { TodoButton, ShortTodoButton } from "@/components/button/TodoButton";
 import ColumnDeleteModal from "@/components/columnCard/ColumnDeleteModal";
@@ -23,7 +24,6 @@ type ColumnProps = {
   createdByMe: boolean;
   columnDelete: (columnId: number) => void;
   fetchColumnsAndCards: () => void;
-  columns: ColumnType[];
 };
 
 export default function Column({
@@ -34,7 +34,6 @@ export default function Column({
   createdByMe,
   columnDelete,
   fetchColumnsAndCards,
-  columns,
 }: ColumnProps) {
   const { canEditColumns } = useDashboardPermission(dashboardId, createdByMe);
 
@@ -57,8 +56,10 @@ export default function Column({
 
   const maxColumnTitleLength = 15;
 
+  // 카드리스트의 스크롤을 칼럼 영역으로 이동
   const scrollRef = useRef<HTMLDivElement | null>(null);
 
+  // ✅ 멤버 불러오기
   useEffect(() => {
     const fetchMembers = async () => {
       try {
@@ -85,6 +86,7 @@ export default function Column({
       toast.error("칼럼 제목을 입력해 주세요.");
       return;
     }
+    setIsColumnModalOpen(false);
 
     try {
       const updated = await updateColumn({ columnId, title: newTitle });
@@ -131,17 +133,23 @@ 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={() => {
@@ -191,8 +199,9 @@ 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" }}
@@ -208,7 +217,7 @@ export default function Column({
         </div>
       </div>
 
-      {/* 카드 생성 */}
+      {/* 카드 생성 모달 */}
       {isTaskModalOpen && (
         <TaskModal
           mode="create"
@@ -217,18 +226,14 @@ export default function Column({
           dashboardId={dashboardId}
           columnId={columnId}
           members={members}
-          columns={columns}
           initialData={{
             status: columnTitle,
           }}
-          onSubmit={() => {
-            fetchColumnsAndCards();
-            setIsTaskModalOpen(false);
-          }}
+          onSubmit={fetchColumnsAndCards}
         />
       )}
 
-      {/* 칼럼 수정 */}
+      {/* 칼럼 관리 모달 */}
       {isColumnModalOpen && (
         <FormModal
           title="칼럼 이름 수정"
@@ -260,25 +265,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}
-          columns={columns}
+          createdByMe={createdByMe}
         />
       )}
     </div>

src/components/modalDashboard/CardDetailModal.tsx

@@ -12,7 +12,6 @@ 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;
@@ -21,8 +20,6 @@ interface CardDetailModalProps {
   createdByMe: boolean;
   onClose: () => void;
   onChangeCard?: () => void;
-  columns: ColumnType[];
-  currentUserId?: number;
 }
 
 export default function CardDetailPage({
@@ -31,7 +28,6 @@ export default function CardDetailPage({
   createdByMe,
   onClose,
   onChangeCard,
-  columns,
 }: CardDetailModalProps) {
   const { canEditCards } = useDashboardPermission(dashboardId, createdByMe);
   const { cardData, setCardData, columnName, members } = useCardDetailState(
@@ -153,7 +149,6 @@ export default function CardDetailPage({
         </div>
       </div>
 
-      {/* 수정 모달 */}
       {isEditModalOpen && (
         <TaskModal
           isOpen={true}
@@ -162,7 +157,6 @@ export default function CardDetailPage({
           cardId={cardData.id}
           dashboardId={dashboardId}
           members={members}
-          columns={columns}
           onClose={() => setIsEditModalOpen(false)}
           onSubmit={async () => {
             try {
@@ -177,8 +171,7 @@ export default function CardDetailPage({
             }
           }}
           initialData={{
-            status:
-              columns.find((col) => col.id === cardData.columnId)?.title ?? "",
+            status: columnName,
             assignee: cardData.assignee.nickname,
             title: cardData.title,
             description: cardData.description,

src/components/modalDashboard/UpdateComment.tsx

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

src/components/modalDashboard/formatDate.ts

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

src/components/modalInput/AssigneeSelect.tsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import RandomProfile from "@/components/common/RandomProfile";
+import RandomProfile from "../common/RandomProfile";
 
 interface User {
   id: number;

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",
+          boxSizing: "border-box", // padding과 border를 높이에 포함
         }}
       />
       {hasButton && (

src/components/modalInput/ModalImage.tsx

@@ -8,7 +8,7 @@ interface ModalImageProps {
   label: string;
   columnId: number;
   defaultImageUrl?: string;
-  onImageSelect: (imageUrl: string) => void;
+  onImageSelect: (imageUrl: string) => void; // ✅ string만 넘김
 }
 
 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,6 +35,7 @@ export default function ModalTextarea({
     }
   };
 
+  // ✅ 초기 defaultValue 기준으로 height 조절
   useEffect(() => {
     const textarea = textareaRef.current;
     if (textarea) {
@@ -47,7 +48,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-[14px] sm:text-[18px]"
+        className="font-medium text-black3 text-[16px] sm:text-[18px]"
       >
         {label} {required && <span className="text-[var(--primary)]"> *</span>}
       </label>
@@ -70,7 +71,7 @@ export default function ModalTextarea({
           onChange={handleTextareaChange}
           className={`
             w-full resize-none rounded-md border-none px-4 py-3
-            text-black3 text-[14px] sm:text-[16px] font:normal
+            text-black3 text-[16px] sm:text-[18px] font:normal
             outline-none bg-transparent overflow-hidden
             ${small ? "h-[50px]" : "min-h-[110px]"}
           `}