Merge remote-tracking branch 'upstream/dev' into card-table

gyoyeon-kim · gyoyeon-kim · commit dee4f2caf940 · 2025-04-02T14:04:06.000+09:00
diff --git a/src/api/card.ts b/src/api/card.ts
@@ -83,25 +83,29 @@ export const getDashboardMembers = async ({
 };
 
 /** 4. 카드 수정 */
-export const updateCard = async ({
-  cardId,
-  columnId,
-  assigneeUserId,
-  title,
-  description,
-  dueDate,
-  tags,
-  imageUrl,
-}: {
-  cardId: number;
-  columnId: number;
-  assigneeUserId: number;
-  title: string;
-  description: string;
-  dueDate: string;
-  tags: string[];
-  imageUrl?: string;
-}) => {
+export const updateCard = async (
+  id: number,
+  data: Partial<CardDetailType>,
+  {
+    cardId,
+    columnId,
+    assigneeUserId,
+    title,
+    description,
+    dueDate,
+    tags,
+    imageUrl,
+  }: {
+    cardId: number;
+    columnId: number;
+    assigneeUserId: number;
+    title: string;
+    description: string;
+    dueDate: string;
+    tags: string[];
+    imageUrl?: string;
+  }
+) => {
   const response = await axiosInstance.put(apiRoutes.cardDetail(cardId), {
     columnId,
     assigneeUserId,
@@ -155,3 +159,11 @@ export const deleteCard = async (cardId: number) => {
   const response = await axiosInstance.delete(url);
   return response.data;
 };
+//카드 수정저장
+export const EditCard = async (
+  cardId: number,
+  data: Partial<CardDetailType>
+) => {
+  const response = await axiosInstance.put(apiRoutes.cardDetail(cardId), data);
+  return response.data;
+};
diff --git a/src/api/columns.ts b/src/api/columns.ts
@@ -21,7 +21,7 @@ export const createColumn = async ({
 
 // 칼럼 목록 조회
 export const getColumns = async ({ dashboardId }: { dashboardId: number }) => {
-  const res = await axiosInstance.get(apiRoutes.columns(), {
+  const res = await axiosInstance.get(apiRoutes.columns(TEAM_ID), {
     params: {
       dashboardId,
     },
@@ -49,3 +49,20 @@ 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(TEAM_ID), {
+    params: {
+      dashboardId,
+    },
+  });
+  console.log("🟦 서버 응답:", res.data);
+  console.log("URL:", apiRoutes.columns(TEAM_ID));
+  console.log("대시보드 ID:", dashboardId);
+  return res.data.data;
+};
diff --git a/src/components/modalDashboard/CardDetail.tsx b/src/components/modalDashboard/CardDetail.tsx
@@ -8,7 +8,7 @@ interface CardDetailProps {
   columnName: string;
 }
 
-export default function CardDetail({ card }: CardDetailProps) {
+export default function CardDetail({ card, columnName }: CardDetailProps) {
   return (
     <div className="p-4 ">
       <h2 className="text-3xl font-semibold mb-5">{card.title}</h2>
@@ -50,9 +50,9 @@ export default function CardDetail({ card }: CardDetailProps) {
       <div className="flex flex-wrap gap-2 mb-2">
         <span
           className="rounded-full bg-violet-200 px-3 py-1 text-sm text-violet-800"
-          title={`상태: ${card.status}`}
+          title={`상태: ${columnName}`}
         >
-          {card.status}
+          {columnName}
         </span>
         <span className="text-2xl font-extralight text-[#D9D9D9]">|</span>
         {card.tags.map((tag, idx) => (
diff --git a/src/components/modalDashboard/CardDetailModal.tsx b/src/components/modalDashboard/CardDetailModal.tsx
@@ -1,14 +1,15 @@
-// CardDetailModal.tsx
-import { useState } from "react";
+import { useMemo, useRef, useState } from "react";
 import { MoreVertical, X } from "lucide-react";
 import CardDetail from "./CardDetail";
 import CommentList from "./CommentList";
 import CardInput from "@/components/modalInput/CardInput";
-import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { createComment } from "@/api/comment";
-import { deleteCard } from "@/api/card";
+import { deleteCard, EditCard } from "@/api/card"; // EditCard API 추가
 import type { CardDetailType } from "@/types/cards";
 import TaskModal from "@/components/modalInput/TaskModal";
+import { useClosePopup } from "@/hooks/useClosePopup";
+import { getColumn } from "@/api/columns";
 
 interface CardDetailModalProps {
   card: CardDetailType;
@@ -17,6 +18,12 @@ interface CardDetailModalProps {
   onClose: () => void;
 }
 
+interface ColumnType {
+  id: number;
+  title: string;
+  status: string;
+}
+
 export default function CardDetailPage({
   card,
   currentUserId,
@@ -28,6 +35,20 @@ export default function CardDetailPage({
   const [showMenu, setShowMenu] = useState(false);
   const [isEditModalOpen, setIsEditModalOpen] = useState(false);
   const queryClient = useQueryClient();
+  const popupRef = useRef(null);
+  useClosePopup(popupRef, () => setShowMenu(false));
+
+  const { data: columns = [] } = useQuery<ColumnType[]>({
+    queryKey: ["columns", dashboardId],
+    queryFn: () => getColumn({ dashboardId, columnId: card.columnId }),
+  });
+
+  const columnName = useMemo(() => {
+    return (
+      columns.find((col) => String(col.id) === String(cardData.columnId))
+        ?.title || "알 수 없음"
+    );
+  }, [columns, cardData.columnId]);
 
   const { mutate: createCommentMutate } = useMutation({
     mutationFn: createComment,
@@ -55,20 +76,27 @@ export default function CardDetailPage({
     });
   };
 
+  const { mutateAsync: updateCardMutate } = useMutation({
+    mutationFn: (data: Partial<CardDetailType>) => EditCard(cardData.id, data),
+    onSuccess: (updatedCard) => {
+      setCardData(updatedCard); // ✅ 서버 응답을 최신 cardData로 설정
+      queryClient.invalidateQueries({ queryKey: ["cards"] }); // 필요시
+    },
+  });
+
   return (
     <>
       <div className="fixed inset-0 bg-black/30 z-50 flex items-center justify-center">
         <div
           className="relative bg-white rounded-lg shadow-lg w-[730px] h-[763px] flex flex-col
-        md:w-[678px] lg:w-[730px]
-        "
+        md:w-[678px] lg:w-[730px]"
         >
-          {/* 오른쪽 상단 메뉴 */}
-          <div className="absolute top-6 right-10 z-30 flex items-center gap-5 mt-3 ">
+          <div className="absolute top-6 right-8.5 z-30 flex items-center gap-3 mt-1">
+            {/* 오른쪽 상단 메뉴 */}
             <div className="relative">
               <button
                 onClick={() => setShowMenu((prev) => !prev)}
-                className="hover:cursor-pointer"
+                className="w-7 h-7 flex items-center justify-center hover:cursor-pointer"
                 title="수정하기"
                 type="button"
               >
@@ -96,19 +124,20 @@ export default function CardDetailPage({
                 </div>
               )}
             </div>
-            <button onClick={onClose} title="메뉴 열기">
-              <X className="w-8 h-8 text-black hover:cursor-pointer" />
+
+            <button onClick={onClose} title="닫기">
+              <X className="w-7 h-7 flex items-center justify-center hover:cursor-pointer" />
             </button>
           </div>
 
           {/* 모달 내부 콘텐츠 */}
-          <div className="p-6 flex gap-6 overflow-y-auto flex-1">
-            <CardDetail card={cardData} columnName={""} />
+          <div className="p-6 flex gap-6 overflow-y-auto flex-1 w-[550px] h-[460px]">
+            <CardDetail card={cardData} columnName={columnName} />
           </div>
 
           {/* 댓글 입력창 */}
           <div className="px-10 pt-2 pb-2">
-            <p className="text-sm font-semibold mb-2">댓글</p>
+            <p className="ml-1 text-sm font-semibold mb-2">댓글</p>
             <div className="w-[450px] h-[110px]">
               <CardInput
                 hasButton
@@ -117,18 +146,19 @@ export default function CardDetailPage({
                 onTextChange={setCommentText}
                 onButtonClick={handleCommentSubmit}
                 placeholder="댓글 작성하기"
-                // buttonClassName="border border-[#D9D9D9] text-[#5534DA] hover:bg-[#F1EFFD]"
               />
             </div>
           </div>
 
           {/* 댓글 목록 */}
-          <div className="px-6 space-y-4 max-h-[200px] overflow-y-auto">
-            <CommentList
-              cardId={card.id}
-              currentUserId={currentUserId}
-              teamId={""}
-            />
+          <div className=" max-h-[100px] ml-7 text-base overflow-y-auto scrollbar-hidden">
+            <div className=" max-h-[50vh]">
+              <CommentList
+                cardId={card.id}
+                currentUserId={currentUserId}
+                teamId={""}
+              />
+            </div>
           </div>
         </div>
       </div>
@@ -137,20 +167,19 @@ export default function CardDetailPage({
       {isEditModalOpen && (
         <TaskModal
           mode="edit"
-          columnId={card.columnId} // ✅ 여기 추가!
+          columnId={card.columnId} // ✅ 여기에 columnId 추가!
           onClose={() => setIsEditModalOpen(false)}
-          onSubmit={(data) => {
-            setCardData((prev) => ({
-              ...prev,
-              status: data.status as "todo" | "in-progress" | "done",
-              assignee: { ...prev.assignee, nickname: data.assignee },
+          onSubmit={async (data) => {
+            await updateCardMutate({
+              status: String(cardData.columnId) || cardData.status,
+              assignee: { ...cardData.assignee, nickname: data.assignee },
               title: data.title,
               description: data.description,
               dueDate: data.deadline,
               tags: data.tags,
               imageUrl: data.image ?? "",
-            }));
-            setIsEditModalOpen(false);
+            });
+            setIsEditModalOpen(false); // 수정 후 모달 닫기
           }}
           initialData={{
             status: cardData.status,
diff --git a/src/components/modalDashboard/CommentList.tsx b/src/components/modalDashboard/CommentList.tsx
@@ -37,16 +37,17 @@ export default function CommentList({
     data?.pages.flatMap((page) => page.comments) ?? [];
 
   return (
-    <div className="flex flex-col gap-4 mt-4">
+    <div className="min-h-[80px] p-2 rounded bg-white shadow-sm">
       {allComments.map((comment) => (
-        <UpdateComment
-          key={comment.id}
-          comment={comment}
-          currentUserId={currentUserId}
-          teamId={""}
-        />
+        <div key={comment.id} className="p-2  last:border-b-0">
+          <UpdateComment
+            comment={comment}
+            currentUserId={currentUserId}
+            teamId={""}
+          />
+        </div>
       ))}
-      <div ref={ref} className="h-6" />
+      <div ref={ref} />
     </div>
   );
 }
diff --git a/src/components/modalDashboard/UpdateComment.tsx b/src/components/modalDashboard/UpdateComment.tsx
@@ -40,33 +40,37 @@ export default function UpdateComment({
   };
 
   return (
-    <div className="flex gap-2 items-start">
+    <div className="flex gap-3 items-start w-full">
+      {/* 프로필 */}
       <ProfileIcon
         userId={comment.author.id}
         nickname={comment.author.nickname}
         profileImageUrl={comment.author.profileImageUrl}
-        imgClassName=""
-        fontClassName=""
+        imgClassName="w-8 h-8"
+        fontClassName="text-sm"
         id={0}
       />
-      <div className="flex flex-col gap-1 w-full">
-        <div className="flex gap-2 items-center">
-          <span className="text-sm font-semibold">
+
+      {/* 댓글 내용 */}
+      <div className="flex flex-col w-full space-y-1">
+        {/* 작성자 + 시간 */}
+        <div className="flex items-center gap-2 text-sm text-gray-600">
+          <span className="font-semibold text-black">
             {comment.author.nickname}
           </span>
-          <span className="text-xs text-gray-500">
-            {formatDate(comment.createdAt)}
-          </span>
+          <span>{formatDate(comment.createdAt)}</span>
         </div>
+
+        {/* 본문 */}
         {isEditing ? (
           <>
             <textarea
-              className="w-full border p-2 rounded text-sm"
+              className="w-full p-2 text-sm"
               value={editedContent}
               onChange={(e) => setEditedContent(e.target.value)}
               aria-label="댓글"
             />
-            <div className="flex gap-2 mt-1 text-xs text-gray-600">
+            <div className="flex gap-2 mt-1 text-sm">
               <button
                 onClick={handleSave}
                 disabled={editedContent === comment.content}
@@ -78,7 +82,9 @@ export default function UpdateComment({
           </>
         ) : (
           <>
-            <p className="text-sm">{comment.content}</p>
+            <p className="text-sm whitespace-pre-wrap break-words">
+              {comment.content}
+            </p>
             {currentUserId === comment.author.id && (
               <div className="flex gap-2 text-xs text-gray-500 mt-1">
                 <button onClick={handleEditToggle}>수정</button>
diff --git a/src/components/modalInput/CardInput.tsx b/src/components/modalInput/CardInput.tsx
@@ -1,5 +1,6 @@
 import { ChangeEvent, useRef } from "react";
 import TextButton from "./TextButton";
+import clsx from "clsx";
 
 export interface CardInputProps {
   value: string;
@@ -33,9 +34,13 @@ export default function CardInput({
         value={value}
         onChange={handleChange}
         placeholder={placeholder}
-        className={`w-full resize-none rounded-md border border-[var(--color-gray3)] focus:border-[var(--primary)] p-2 outline-none bg-white ${small ? "text-sm" : ""}`}
+        className={clsx(
+          "p-4 w-full resize-none rounded-md border border-[var(--color-gray3)] focus:border-[var(--primary)] p-1 outline-none bg-white",
+          small ? "text-sm" : "text-base",
+          className
+        )}
         style={{
-          height: small ? "80px" : "120px", // 고정된 높이 설정
+          height: small ? "110px" : "100px", // 고정된 높이 설정
           overflowY: "auto", // 내용이 넘치면 스크롤 생성
           wordWrap: "break-word",
           whiteSpace: "pre-wrap",
@@ -49,7 +54,7 @@ export default function CardInput({
           color="secondary"
           buttonSize="xs"
           onClick={onButtonClick}
-          className="absolute bottom-3 right-3 z-10 flex items-center justify-center border-gray-300 text-[#5534DA] cursor-pointer"
+          className="absolute bottom-3 right-3 z-10 flex items-center justify-center w-[83px] h-[32px] border-gray-300 text-[#5534DA] cursor-pointer whitespace-nowrap rounded-sm"
         >
           입력
         </TextButton>
diff --git a/src/styles/globals.css b/src/styles/globals.css
diff --git a/src/types/task.ts b/src/types/task.ts
