From b4ae4de609d8e24bbc68aaffdbe994147376ae8e Mon Sep 17 00:00:00 2001
From: hyeonjiroh <sonamu6509@naver.com>
Date: Sun, 30 Mar 2025 11:11:45 +0900
Subject: [PATCH 1/9] feat: Connect comment form with comment post API

---
 src/components/common/modal/Modal.tsx         |  2 +-
 src/components/common/textarea/Textarea.tsx   |  2 +-
 .../modal/add-column/AddColumnModal.tsx       |  2 +-
 .../modal/task-detail/CommentList.tsx         |  3 +
 .../modal/task-detail/TaskCommentSection.tsx  | 73 +++++++++++++++++++
 .../modal/task-detail/TaskDetailModal.tsx     | 18 +++--
 src/lib/apis/commentsApi.ts                   | 59 +++++++++++++++
 7 files changed, 150 insertions(+), 9 deletions(-)
 create mode 100644 src/components/modal/task-detail/CommentList.tsx
 create mode 100644 src/components/modal/task-detail/TaskCommentSection.tsx
 create mode 100644 src/lib/apis/commentsApi.ts

diff --git a/src/components/common/modal/Modal.tsx b/src/components/common/modal/Modal.tsx
index 65898eb..6a6b5e4 100644
--- a/src/components/common/modal/Modal.tsx
+++ b/src/components/common/modal/Modal.tsx
@@ -45,7 +45,7 @@ export default function Modal({
     <div className="flex justify-center items-center fixed top-0 left-0 w-full h-full p-6 bg-black/70 z-50">
       <div
         className={clsx(
-          "flex flex-col max-h-[80vh] px-4 rounded border-none bg-white",
+          "flex flex-col max-h-[96vh] px-4 rounded border-none bg-white",
           isPage
             ? "gap-2 max-w-[327px] py-4 tablet:px-8 tablet:gap-6 tablet:max-w-[1200px] tablet:py-6"
             : "gap-8 max-w-[327px] py-6 tablet:max-w-[1200px] tablet:p-8"
diff --git a/src/components/common/textarea/Textarea.tsx b/src/components/common/textarea/Textarea.tsx
index 8abf919..b8eacb8 100644
--- a/src/components/common/textarea/Textarea.tsx
+++ b/src/components/common/textarea/Textarea.tsx
@@ -5,7 +5,7 @@ interface TextareaProps extends ComponentPropsWithoutRef<"textarea"> {
   containerClassName: string;
   labelClassName: string;
   textareaClassName: string;
-  spanClassName: string;
+  spanClassName?: string;
 }
 
 const Textarea = ({
diff --git a/src/components/modal/add-column/AddColumnModal.tsx b/src/components/modal/add-column/AddColumnModal.tsx
index ce60d77..9fac3b6 100644
--- a/src/components/modal/add-column/AddColumnModal.tsx
+++ b/src/components/modal/add-column/AddColumnModal.tsx
@@ -52,7 +52,7 @@ export default function CreateDashboardModal() {
   const buttonClick = async () => {
     if (!dashboardId) return;
 
-    postColumn({
+    await postColumn({
       token: TOKEN_1,
       title: inputValue,
       dashboardId: Number(dashboardId),
diff --git a/src/components/modal/task-detail/CommentList.tsx b/src/components/modal/task-detail/CommentList.tsx
new file mode 100644
index 0000000..ff8ebf1
--- /dev/null
+++ b/src/components/modal/task-detail/CommentList.tsx
@@ -0,0 +1,3 @@
+export default function CommentList() {
+  return <div>코멘트</div>;
+}
diff --git a/src/components/modal/task-detail/TaskCommentSection.tsx b/src/components/modal/task-detail/TaskCommentSection.tsx
new file mode 100644
index 0000000..3d9e064
--- /dev/null
+++ b/src/components/modal/task-detail/TaskCommentSection.tsx
@@ -0,0 +1,73 @@
+import { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+import { useDashboardStore } from "@/lib/store/useDashboardStore";
+import { postComment } from "@/lib/apis/commentsApi";
+import { TOKEN_1 } from "@/lib/constants/tokens";
+import Button from "@/components/common/button/Button";
+import Textarea from "@/components/common/textarea/Textarea";
+import CommentList from "./CommentList";
+
+export default function TaskCommentSection({
+  cardId,
+  columnId,
+}: {
+  cardId: number;
+  columnId: number;
+}) {
+  const [inputValue, setInputValue] = useState("");
+  const [isFormValid, setIsFormValid] = useState(false);
+  const { dashboardId } = useDashboardStore();
+  const router = useRouter();
+
+  useEffect(() => {
+    const trimmedValue = inputValue.trim();
+    setIsFormValid(trimmedValue !== "");
+  }, [inputValue]);
+
+  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setInputValue(e.target.value);
+  };
+
+  const buttonClick = async () => {
+    if (!dashboardId) return;
+
+    await postComment({
+      token: TOKEN_1,
+      content: inputValue,
+      cardId: cardId,
+      columnId: columnId,
+      dashboardId: Number(dashboardId),
+    });
+
+    setInputValue("");
+    router.refresh();
+  };
+
+  if (!dashboardId) return;
+
+  return (
+    <div className="flex flex-col gap-4 tablet:gap-6">
+      <div className="relative">
+        <Textarea
+          label="댓글"
+          value={inputValue}
+          containerClassName="gap-1"
+          labelClassName="font-medium text-md tablet:text-lg"
+          textareaClassName="h-[70px] p-4 rounded-md tablet:h-[110px]"
+          placeholder="댓글 작성하기"
+          onChange={handleChange}
+        />
+        <Button
+          variant="whiteViolet"
+          radius="sm"
+          onClick={buttonClick}
+          className="w-[84px] max-h-[28px] absolute bottom-3 right-3 font-medium text-xs leading-[18px] tablet:w-[78px] tablet:h-[32px]"
+          disabled={!isFormValid}
+        >
+          등록
+        </Button>
+      </div>
+      <CommentList />
+    </div>
+  );
+}
diff --git a/src/components/modal/task-detail/TaskDetailModal.tsx b/src/components/modal/task-detail/TaskDetailModal.tsx
index b9062d8..bfd0f9b 100644
--- a/src/components/modal/task-detail/TaskDetailModal.tsx
+++ b/src/components/modal/task-detail/TaskDetailModal.tsx
@@ -6,6 +6,7 @@ import { TOKEN_1 } from "@/lib/constants/tokens";
 import Modal from "@/components/common/modal/Modal";
 import TaskInfoSection from "./TaskInfoSection";
 import TaskContentSection from "./TaskContentSection";
+import TaskCommentSection from "./TaskCommentSection";
 
 export default function TaskDetailModal() {
   const { selectedTaskId } = useTaskStore();
@@ -28,10 +29,16 @@ export default function TaskDetailModal() {
   if (!selectedTaskId) return;
   if (!data) return;
 
-  const { id, title, description, tags, dueDate, assignee, imageUrl } = data;
-
-  // vercel 배포를 위해 임시로 작성한 코드
-  console.log(`${id} 값은 코멘트 api 요청할 때 사용하시면 됩니다!`);
+  const {
+    id,
+    title,
+    description,
+    tags,
+    dueDate,
+    assignee,
+    imageUrl,
+    columnId,
+  } = data;
 
   return (
     <Modal taskTitle={title}>
@@ -44,8 +51,7 @@ export default function TaskDetailModal() {
             tags={tags}
             imageUrl={imageUrl}
           />
-          {/* 코멘트 부분 여기에 추가해주시면 됩니다 */}
-          <div></div>
+          <TaskCommentSection cardId={id} columnId={columnId} />
         </div>
       </div>
     </Modal>
diff --git a/src/lib/apis/commentsApi.ts b/src/lib/apis/commentsApi.ts
new file mode 100644
index 0000000..595347f
--- /dev/null
+++ b/src/lib/apis/commentsApi.ts
@@ -0,0 +1,59 @@
+import { BASE_URL } from "@/lib/constants/urls";
+
+export async function postComment({
+  token,
+  content,
+  cardId,
+  columnId,
+  dashboardId,
+}: {
+  token: string;
+  content: string;
+  cardId: number;
+  columnId: number;
+  dashboardId: number;
+}) {
+  const res = await fetch(`${BASE_URL}/comments`, {
+    method: "POST",
+    headers: {
+      Accept: "application/json",
+      Authorization: `Bearer ${token}`,
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({
+      content,
+      cardId,
+      columnId,
+      dashboardId,
+    }),
+  });
+
+  return res.json();
+}
+
+export async function fetchCommentList({
+  token,
+  size,
+  cursorId,
+  columnId,
+}: {
+  token: string;
+  size: number;
+  cursorId: number | null;
+  columnId: number;
+}) {
+  let query = `size=${size}&columnId=${columnId}`;
+  if (cursorId !== null) {
+    query += `&cursorId=${cursorId}`;
+  }
+
+  const res = await fetch(`${BASE_URL}/cards?${query}`, {
+    headers: {
+      Accept: "application/json",
+      Authorization: `Bearer ${token}`,
+    },
+    cache: "no-store",
+  });
+
+  return res.json();
+}

From cf0446b1b17c966cb1ffe59b76b96eecc204bc20 Mon Sep 17 00:00:00 2001
From: hyeonjiroh <sonamu6509@naver.com>
Date: Sun, 30 Mar 2025 11:36:36 +0900
Subject: [PATCH 2/9] feat: Implement infinite scroll for comment list

---
 src/components/common/modal/Modal.tsx         |  2 +-
 .../modal/task-detail/CommentCard.tsx         | 12 ++++
 .../modal/task-detail/CommentList.tsx         | 64 ++++++++++++++++++-
 .../modal/task-detail/TaskCommentSection.tsx  |  2 +-
 src/lib/apis/commentsApi.ts                   |  8 +--
 src/lib/types.ts                              | 13 ++++
 6 files changed, 93 insertions(+), 8 deletions(-)
 create mode 100644 src/components/modal/task-detail/CommentCard.tsx

diff --git a/src/components/common/modal/Modal.tsx b/src/components/common/modal/Modal.tsx
index 6a6b5e4..51c0435 100644
--- a/src/components/common/modal/Modal.tsx
+++ b/src/components/common/modal/Modal.tsx
@@ -45,7 +45,7 @@ export default function Modal({
     <div className="flex justify-center items-center fixed top-0 left-0 w-full h-full p-6 bg-black/70 z-50">
       <div
         className={clsx(
-          "flex flex-col max-h-[96vh] px-4 rounded border-none bg-white",
+          "flex flex-col max-h-[92vh] px-4 rounded border-none bg-white",
           isPage
             ? "gap-2 max-w-[327px] py-4 tablet:px-8 tablet:gap-6 tablet:max-w-[1200px] tablet:py-6"
             : "gap-8 max-w-[327px] py-6 tablet:max-w-[1200px] tablet:p-8"
diff --git a/src/components/modal/task-detail/CommentCard.tsx b/src/components/modal/task-detail/CommentCard.tsx
new file mode 100644
index 0000000..2c2e18b
--- /dev/null
+++ b/src/components/modal/task-detail/CommentCard.tsx
@@ -0,0 +1,12 @@
+import { Comment } from "@/lib/types";
+
+export default function CommentCard({ id, content, author }: Comment) {
+  return (
+    <div>
+      <div>{id}</div>
+      <div>{content}</div>
+      <div>{author.nickname}</div>
+      <div>{author.profileImageUrl}</div>
+    </div>
+  );
+}
diff --git a/src/components/modal/task-detail/CommentList.tsx b/src/components/modal/task-detail/CommentList.tsx
index ff8ebf1..290f075 100644
--- a/src/components/modal/task-detail/CommentList.tsx
+++ b/src/components/modal/task-detail/CommentList.tsx
@@ -1,3 +1,63 @@
-export default function CommentList() {
-  return <div>코멘트</div>;
+import { useEffect, useState, useRef } from "react";
+import { useIntersection } from "@/lib/hooks/useIntersection";
+import { Comment } from "@/lib/types";
+import { fetchCommentList } from "@/lib/apis/commentsApi";
+import { TOKEN_1 } from "@/lib/constants/tokens";
+import CommentCard from "./CommentCard";
+
+const PAGE_SIZE = 3;
+
+export default function CommentList({ id }: { id: number }) {
+  const [items, setItems] = useState<Comment[]>([]);
+  const [cursorId, setCursorId] = useState<number | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isLast, setIsLast] = useState(false);
+  const observerRef = useRef<HTMLDivElement | null>(null);
+
+  const handleLoad = async () => {
+    if (isLoading || isLast) return;
+    setIsLoading(true);
+
+    try {
+      const { comments: newComments, cursorId: nextCursorId } =
+        await fetchCommentList({
+          token: TOKEN_1,
+          size: PAGE_SIZE,
+          cursorId,
+          cardId: id,
+        });
+
+      setItems((prev) => [...prev, ...newComments]);
+      setCursorId(nextCursorId);
+
+      if (newComments.length < PAGE_SIZE || nextCursorId === null) {
+        setIsLast(true);
+      }
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    handleLoad();
+  }, []);
+
+  useIntersection({
+    target: observerRef,
+    onIntersect: handleLoad,
+    disabled: isLast,
+  });
+
+  return (
+    <div>
+      {items.map((item, index) => (
+        <div
+          key={item.id}
+          ref={index === items.length - 1 ? observerRef : null}
+        >
+          <CommentCard {...item} />
+        </div>
+      ))}
+    </div>
+  );
 }
diff --git a/src/components/modal/task-detail/TaskCommentSection.tsx b/src/components/modal/task-detail/TaskCommentSection.tsx
index 3d9e064..9cba6d3 100644
--- a/src/components/modal/task-detail/TaskCommentSection.tsx
+++ b/src/components/modal/task-detail/TaskCommentSection.tsx
@@ -67,7 +67,7 @@ export default function TaskCommentSection({
           등록
         </Button>
       </div>
-      <CommentList />
+      <CommentList id={cardId} />
     </div>
   );
 }
diff --git a/src/lib/apis/commentsApi.ts b/src/lib/apis/commentsApi.ts
index 595347f..c2f3a42 100644
--- a/src/lib/apis/commentsApi.ts
+++ b/src/lib/apis/commentsApi.ts
@@ -35,19 +35,19 @@ export async function fetchCommentList({
   token,
   size,
   cursorId,
-  columnId,
+  cardId,
 }: {
   token: string;
   size: number;
   cursorId: number | null;
-  columnId: number;
+  cardId: number;
 }) {
-  let query = `size=${size}&columnId=${columnId}`;
+  let query = `size=${size}&cardId=${cardId}`;
   if (cursorId !== null) {
     query += `&cursorId=${cursorId}`;
   }
 
-  const res = await fetch(`${BASE_URL}/cards?${query}`, {
+  const res = await fetch(`${BASE_URL}/comments?${query}`, {
     headers: {
       Accept: "application/json",
       Authorization: `Bearer ${token}`,
diff --git a/src/lib/types.ts b/src/lib/types.ts
index 8711659..e9c0d55 100644
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -117,3 +117,16 @@ export interface Invitation {
   createdAt: string;
   updatedAt: string;
 }
+
+export interface Comment {
+  id: number;
+  content: string;
+  createdAt: string;
+  updatedAt: string;
+  cardId: number;
+  author: {
+    id: number;
+    nickname: string;
+    profileImageUrl: string | null;
+  };
+}

From c72c153002751ab2ecfa91f0f160f2191e5f3766 Mon Sep 17 00:00:00 2001
From: hyeonjiroh <sonamu6509@naver.com>
Date: Sun, 30 Mar 2025 13:20:31 +0900
Subject: [PATCH 3/9] feat: Complete layout for CommentCard component

---
 .../modal/task-detail/CommentCard.tsx         | 47 ++++++++++++++++---
 .../modal/task-detail/CommentList.tsx         |  2 +-
 .../modal/task-detail/TaskCommentSection.tsx  |  2 +-
 3 files changed, 43 insertions(+), 8 deletions(-)

diff --git a/src/components/modal/task-detail/CommentCard.tsx b/src/components/modal/task-detail/CommentCard.tsx
index 2c2e18b..b0500bc 100644
--- a/src/components/modal/task-detail/CommentCard.tsx
+++ b/src/components/modal/task-detail/CommentCard.tsx
@@ -1,12 +1,47 @@
 import { Comment } from "@/lib/types";
+import UserIcon from "@/components/common/user-icon/UserIcon";
+import { useIsMobile } from "@/lib/hooks/useCheckViewport";
+import { formatDate } from "@/lib/utils/dateUtils";
+
+export default function CommentCard({
+  id,
+  content,
+  author,
+  createdAt,
+}: Comment) {
+  const isMobile = useIsMobile();
+  const date = formatDate(createdAt, true);
 
-export default function CommentCard({ id, content, author }: Comment) {
   return (
-    <div>
-      <div>{id}</div>
-      <div>{content}</div>
-      <div>{author.nickname}</div>
-      <div>{author.profileImageUrl}</div>
+    <div className=" flex gap-2 pb-2 border-b border-gray-400 tablet:gap-3 tablet:pb-3">
+      <UserIcon
+        name={author.nickname}
+        img={author.profileImageUrl}
+        size={isMobile ? "sm" : "md"}
+      />
+      <div className="flex flex-col gap-2 tablet:gap-[10px] pc:gap-[6px]">
+        <div>
+          <div className="flex gap-2 items-center">
+            <div className="font-semibold text-xs text-gray-800 tablet:text-md">
+              {author.nickname}
+            </div>
+            <div className="font-normal text-[10px] text-gray-500 tablet:text-xs">
+              {date}
+            </div>
+          </div>
+          <div className="font-normal text-xs text-gray-800 tablet:text-md">
+            {content}
+          </div>
+        </div>
+        <div className="flex gap-2 tablet:gap-3 pc:gap-[14px]">
+          <div className="font-normal text-[10px] text-gray-500 underline tablet:text-xs">
+            수정
+          </div>
+          <div className="font-normal text-[10px] text-gray-500 underline tablet:text-xs">
+            삭제
+          </div>
+        </div>
+      </div>
     </div>
   );
 }
diff --git a/src/components/modal/task-detail/CommentList.tsx b/src/components/modal/task-detail/CommentList.tsx
index 290f075..0950880 100644
--- a/src/components/modal/task-detail/CommentList.tsx
+++ b/src/components/modal/task-detail/CommentList.tsx
@@ -49,7 +49,7 @@ export default function CommentList({ id }: { id: number }) {
   });
 
   return (
-    <div>
+    <div className="flex flex-col gap-2">
       {items.map((item, index) => (
         <div
           key={item.id}
diff --git a/src/components/modal/task-detail/TaskCommentSection.tsx b/src/components/modal/task-detail/TaskCommentSection.tsx
index 9cba6d3..50ef8c1 100644
--- a/src/components/modal/task-detail/TaskCommentSection.tsx
+++ b/src/components/modal/task-detail/TaskCommentSection.tsx
@@ -46,7 +46,7 @@ export default function TaskCommentSection({
   if (!dashboardId) return;
 
   return (
-    <div className="flex flex-col gap-4 tablet:gap-6">
+    <div className="flex flex-col gap-4 w-[290px] tablet:gap-6 tablet:w-[420px] pc:w-[445px]">
       <div className="relative">
         <Textarea
           label="댓글"

From e6cf3fe3f86b4ea2c16a57c8ed60717ef91b01ff Mon Sep 17 00:00:00 2001
From: hyeonjiroh <sonamu6509@naver.com>
Date: Sun, 30 Mar 2025 13:35:09 +0900
Subject: [PATCH 4/9] feat: Refresh comment list after posting using key
 re-render

---
 .../modal/task-detail/TaskCommentSection.tsx          | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/components/modal/task-detail/TaskCommentSection.tsx b/src/components/modal/task-detail/TaskCommentSection.tsx
index 50ef8c1..e432392 100644
--- a/src/components/modal/task-detail/TaskCommentSection.tsx
+++ b/src/components/modal/task-detail/TaskCommentSection.tsx
@@ -1,5 +1,4 @@
 import { useEffect, useState } from "react";
-import { useRouter } from "next/navigation";
 import { useDashboardStore } from "@/lib/store/useDashboardStore";
 import { postComment } from "@/lib/apis/commentsApi";
 import { TOKEN_1 } from "@/lib/constants/tokens";
@@ -16,8 +15,8 @@ export default function TaskCommentSection({
 }) {
   const [inputValue, setInputValue] = useState("");
   const [isFormValid, setIsFormValid] = useState(false);
+  const [commentListKey, setCommentListKey] = useState(0);
   const { dashboardId } = useDashboardStore();
-  const router = useRouter();
 
   useEffect(() => {
     const trimmedValue = inputValue.trim();
@@ -33,14 +32,14 @@ export default function TaskCommentSection({
 
     await postComment({
       token: TOKEN_1,
-      content: inputValue,
+      content: inputValue.trim(),
       cardId: cardId,
       columnId: columnId,
       dashboardId: Number(dashboardId),
     });
 
     setInputValue("");
-    router.refresh();
+    setCommentListKey((prev) => prev + 1); // key 값 변경해서 CommentList 다시 마운트
   };
 
   if (!dashboardId) return;
@@ -53,7 +52,7 @@ export default function TaskCommentSection({
           value={inputValue}
           containerClassName="gap-1"
           labelClassName="font-medium text-md tablet:text-lg"
-          textareaClassName="h-[70px] p-4 rounded-md tablet:h-[110px]"
+          textareaClassName="h-[70px] p-4 rounded-md text-xs tablet:h-[110px] tablet:text-md"
           placeholder="댓글 작성하기"
           onChange={handleChange}
         />
@@ -67,7 +66,7 @@ export default function TaskCommentSection({
           등록
         </Button>
       </div>
-      <CommentList id={cardId} />
+      <CommentList id={cardId} key={commentListKey} />
     </div>
   );
 }

From 314035bbf97a07cb31b610bdba11c74dcf967e05 Mon Sep 17 00:00:00 2001
From: hyeonjiroh <sonamu6509@naver.com>
Date: Sun, 30 Mar 2025 13:56:52 +0900
Subject: [PATCH 5/9] feat: Add comment delete functionality

---
 .../modal/task-detail/CommentCard.tsx         | 27 +++++--
 .../modal/task-detail/CommentList.tsx         | 10 ++-
 .../modal/task-detail/TaskCommentSection.tsx  |  6 +-
 src/lib/apis/commentsApi.ts                   | 70 +++++++++++++++----
 4 files changed, 92 insertions(+), 21 deletions(-)

diff --git a/src/components/modal/task-detail/CommentCard.tsx b/src/components/modal/task-detail/CommentCard.tsx
index b0500bc..843e479 100644
--- a/src/components/modal/task-detail/CommentCard.tsx
+++ b/src/components/modal/task-detail/CommentCard.tsx
@@ -1,17 +1,33 @@
 import { Comment } from "@/lib/types";
-import UserIcon from "@/components/common/user-icon/UserIcon";
+import { putComment, deleteComment } from "@/lib/apis/commentsApi";
+import { TOKEN_1 } from "@/lib/constants/tokens";
 import { useIsMobile } from "@/lib/hooks/useCheckViewport";
 import { formatDate } from "@/lib/utils/dateUtils";
+import UserIcon from "@/components/common/user-icon/UserIcon";
+
+type CommentCardProps = Comment & {
+  onChange: () => void;
+};
 
 export default function CommentCard({
   id,
   content,
   author,
   createdAt,
-}: Comment) {
+  onChange,
+}: CommentCardProps) {
   const isMobile = useIsMobile();
   const date = formatDate(createdAt, true);
 
+  const handleDeleteComment = () => {
+    deleteComment({
+      token: TOKEN_1,
+      commentId: id,
+    });
+
+    onChange();
+  };
+
   return (
     <div className=" flex gap-2 pb-2 border-b border-gray-400 tablet:gap-3 tablet:pb-3">
       <UserIcon
@@ -34,10 +50,13 @@ export default function CommentCard({
           </div>
         </div>
         <div className="flex gap-2 tablet:gap-3 pc:gap-[14px]">
-          <div className="font-normal text-[10px] text-gray-500 underline tablet:text-xs">
+          <div className="font-normal text-[10px] text-gray-500 underline cursor-pointer tablet:text-xs">
             수정
           </div>
-          <div className="font-normal text-[10px] text-gray-500 underline tablet:text-xs">
+          <div
+            onClick={handleDeleteComment}
+            className="font-normal text-[10px] text-gray-500 underline cursor-pointer tablet:text-xs"
+          >
             삭제
           </div>
         </div>
diff --git a/src/components/modal/task-detail/CommentList.tsx b/src/components/modal/task-detail/CommentList.tsx
index 0950880..238cc4d 100644
--- a/src/components/modal/task-detail/CommentList.tsx
+++ b/src/components/modal/task-detail/CommentList.tsx
@@ -7,7 +7,13 @@ import CommentCard from "./CommentCard";
 
 const PAGE_SIZE = 3;
 
-export default function CommentList({ id }: { id: number }) {
+export default function CommentList({
+  id,
+  onChange,
+}: {
+  id: number;
+  onChange: () => void;
+}) {
   const [items, setItems] = useState<Comment[]>([]);
   const [cursorId, setCursorId] = useState<number | null>(null);
   const [isLoading, setIsLoading] = useState(false);
@@ -55,7 +61,7 @@ export default function CommentList({ id }: { id: number }) {
           key={item.id}
           ref={index === items.length - 1 ? observerRef : null}
         >
-          <CommentCard {...item} />
+          <CommentCard {...item} onChange={onChange} />
         </div>
       ))}
     </div>
diff --git a/src/components/modal/task-detail/TaskCommentSection.tsx b/src/components/modal/task-detail/TaskCommentSection.tsx
index e432392..8a8c544 100644
--- a/src/components/modal/task-detail/TaskCommentSection.tsx
+++ b/src/components/modal/task-detail/TaskCommentSection.tsx
@@ -66,7 +66,11 @@ export default function TaskCommentSection({
           등록
         </Button>
       </div>
-      <CommentList id={cardId} key={commentListKey} />
+      <CommentList
+        id={cardId}
+        key={commentListKey}
+        onChange={() => setCommentListKey((prev) => prev + 1)}
+      />
     </div>
   );
 }
diff --git a/src/lib/apis/commentsApi.ts b/src/lib/apis/commentsApi.ts
index c2f3a42..123e495 100644
--- a/src/lib/apis/commentsApi.ts
+++ b/src/lib/apis/commentsApi.ts
@@ -1,5 +1,32 @@
 import { BASE_URL } from "@/lib/constants/urls";
 
+export async function fetchCommentList({
+  token,
+  size,
+  cursorId,
+  cardId,
+}: {
+  token: string;
+  size: number;
+  cursorId: number | null;
+  cardId: number;
+}) {
+  let query = `size=${size}&cardId=${cardId}`;
+  if (cursorId !== null) {
+    query += `&cursorId=${cursorId}`;
+  }
+
+  const res = await fetch(`${BASE_URL}/comments?${query}`, {
+    headers: {
+      Accept: "application/json",
+      Authorization: `Bearer ${token}`,
+    },
+    cache: "no-store",
+  });
+
+  return res.json();
+}
+
 export async function postComment({
   token,
   content,
@@ -31,29 +58,44 @@ export async function postComment({
   return res.json();
 }
 
-export async function fetchCommentList({
+export async function putComment({
   token,
-  size,
-  cursorId,
-  cardId,
+  content,
+  commentId,
 }: {
   token: string;
-  size: number;
-  cursorId: number | null;
-  cardId: number;
+  content: string;
+  commentId: number;
 }) {
-  let query = `size=${size}&cardId=${cardId}`;
-  if (cursorId !== null) {
-    query += `&cursorId=${cursorId}`;
-  }
-
-  const res = await fetch(`${BASE_URL}/comments?${query}`, {
+  const res = await fetch(`${BASE_URL}/comments/${commentId}`, {
+    method: "PUT",
     headers: {
       Accept: "application/json",
       Authorization: `Bearer ${token}`,
+      "Content-Type": "application/json",
     },
-    cache: "no-store",
+    body: JSON.stringify({
+      content,
+    }),
   });
 
   return res.json();
 }
+
+export async function deleteComment({
+  token,
+  commentId,
+}: {
+  token: string;
+  commentId: number;
+}) {
+  await fetch(`${BASE_URL}/comments/${commentId}`, {
+    method: "DELETE",
+    headers: {
+      Accept: "application/json",
+      Authorization: `Bearer ${token}`,
+    },
+  });
+
+  return null;
+}

From 31d41398f267e80093ecfb1e0b2f5cc3e4a60d0e Mon Sep 17 00:00:00 2001
From: hyeonjiroh <sonamu6509@naver.com>
Date: Sun, 30 Mar 2025 14:26:55 +0900
Subject: [PATCH 6/9] feat: Add comment edit functionality

---
 .../modal/editColumn/EditColumnModal.tsx      |  2 +-
 .../modal/task-detail/CommentCard.tsx         | 78 ++++++++++++++++---
 2 files changed, 69 insertions(+), 11 deletions(-)

diff --git a/src/components/modal/editColumn/EditColumnModal.tsx b/src/components/modal/editColumn/EditColumnModal.tsx
index abe051f..44f0496 100644
--- a/src/components/modal/editColumn/EditColumnModal.tsx
+++ b/src/components/modal/editColumn/EditColumnModal.tsx
@@ -56,7 +56,7 @@ export default function CreateDashboardModal() {
   const handleEditClick = async () => {
     if (!selectedColumnId) return;
 
-    putColumn({
+    await putColumn({
       token: TOKEN_1,
       title: inputValue,
       columnId: Number(selectedColumnId),
diff --git a/src/components/modal/task-detail/CommentCard.tsx b/src/components/modal/task-detail/CommentCard.tsx
index 843e479..d7c79ed 100644
--- a/src/components/modal/task-detail/CommentCard.tsx
+++ b/src/components/modal/task-detail/CommentCard.tsx
@@ -1,9 +1,12 @@
+import { useEffect, useState } from "react";
 import { Comment } from "@/lib/types";
 import { putComment, deleteComment } from "@/lib/apis/commentsApi";
 import { TOKEN_1 } from "@/lib/constants/tokens";
 import { useIsMobile } from "@/lib/hooks/useCheckViewport";
 import { formatDate } from "@/lib/utils/dateUtils";
 import UserIcon from "@/components/common/user-icon/UserIcon";
+import Button from "@/components/common/button/Button";
+import Textarea from "@/components/common/textarea/Textarea";
 
 type CommentCardProps = Comment & {
   onChange: () => void;
@@ -16,9 +19,36 @@ export default function CommentCard({
   createdAt,
   onChange,
 }: CommentCardProps) {
+  const [isEditMode, setIsEditMode] = useState(false);
+  const [inputValue, setInputValue] = useState(content);
+  const [isFormValid, setIsFormValid] = useState(false);
   const isMobile = useIsMobile();
   const date = formatDate(createdAt, true);
 
+  useEffect(() => {
+    const trimmedValue = inputValue.trim();
+    setIsFormValid(trimmedValue !== "");
+  }, [inputValue]);
+
+  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setInputValue(e.target.value);
+  };
+
+  const handleEditMode = () => {
+    setIsEditMode(!isEditMode);
+  };
+
+  const handleEditComment = async () => {
+    await putComment({
+      token: TOKEN_1,
+      content: inputValue.trim(),
+      commentId: id,
+    });
+
+    setInputValue("");
+    onChange();
+  };
+
   const handleDeleteComment = () => {
     deleteComment({
       token: TOKEN_1,
@@ -30,12 +60,14 @@ export default function CommentCard({
 
   return (
     <div className=" flex gap-2 pb-2 border-b border-gray-400 tablet:gap-3 tablet:pb-3">
-      <UserIcon
-        name={author.nickname}
-        img={author.profileImageUrl}
-        size={isMobile ? "sm" : "md"}
-      />
-      <div className="flex flex-col gap-2 tablet:gap-[10px] pc:gap-[6px]">
+      <div className="shrink-0">
+        <UserIcon
+          name={author.nickname}
+          img={author.profileImageUrl}
+          size={isMobile ? "sm" : "md"}
+        />
+      </div>
+      <div className="flex flex-col gap-2 w-full tablet:gap-[10px] pc:gap-[6px]">
         <div>
           <div className="flex gap-2 items-center">
             <div className="font-semibold text-xs text-gray-800 tablet:text-md">
@@ -45,12 +77,38 @@ export default function CommentCard({
               {date}
             </div>
           </div>
-          <div className="font-normal text-xs text-gray-800 tablet:text-md">
-            {content}
-          </div>
+          {isEditMode ? (
+            <div className="relative">
+              <Textarea
+                label=""
+                value={inputValue}
+                containerClassName="gap-1"
+                labelClassName="font-medium text-md tablet:text-lg"
+                textareaClassName="h-[70px] p-4 rounded-md text-xs tablet:h-[110px] tablet:text-md"
+                placeholder="댓글 작성하기"
+                onChange={handleChange}
+              />
+              <Button
+                variant="whiteViolet"
+                radius="sm"
+                onClick={handleEditComment}
+                className="w-[84px] max-h-[28px] absolute bottom-3 right-3 font-medium text-xs leading-[18px] tablet:w-[78px] tablet:h-[32px]"
+                disabled={!isFormValid}
+              >
+                등록
+              </Button>
+            </div>
+          ) : (
+            <div className="font-normal text-xs text-gray-800 tablet:text-md">
+              {content}
+            </div>
+          )}
         </div>
         <div className="flex gap-2 tablet:gap-3 pc:gap-[14px]">
-          <div className="font-normal text-[10px] text-gray-500 underline cursor-pointer tablet:text-xs">
+          <div
+            onClick={handleEditMode}
+            className="font-normal text-[10px] text-gray-500 underline cursor-pointer tablet:text-xs"
+          >
             수정
           </div>
           <div

From f26f7440038b14369d148789642b922e0d5f8488 Mon Sep 17 00:00:00 2001
From: hyeonjiroh <sonamu6509@naver.com>
Date: Sun, 30 Mar 2025 14:44:05 +0900
Subject: [PATCH 7/9] feat: Add task delete functionality

---
 src/components/common/modal/MenuButton.tsx | 23 +++++++++++++++++++++-
 src/lib/apis/cardsApi.ts                   | 18 +++++++++++++++++
 2 files changed, 40 insertions(+), 1 deletion(-)

diff --git a/src/components/common/modal/MenuButton.tsx b/src/components/common/modal/MenuButton.tsx
index 8908684..7fee588 100644
--- a/src/components/common/modal/MenuButton.tsx
+++ b/src/components/common/modal/MenuButton.tsx
@@ -1,17 +1,35 @@
 import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { deleteCard } from "@/lib/apis/cardsApi";
+import { TOKEN_1 } from "@/lib/constants/tokens";
 import { useModalStore } from "@/lib/store/useModalStore";
 import Image from "next/image";
 import MenuButtonIcon from "../../../../public/icon/menu_icon.svg";
+import { useTaskStore } from "@/lib/store/useTaskStore";
 
 export default function MenuButton() {
   const [isOpen, setIsOpen] = useState(false);
   const { openModal, closeModal } = useModalStore();
+  const { selectedTaskId } = useTaskStore();
+  const router = useRouter();
 
   const openModifyModal = () => {
     closeModal();
     openModal("editTask");
   };
 
+  const handleDelete = async () => {
+    if (!selectedTaskId) return;
+
+    await deleteCard({
+      token: TOKEN_1,
+      cardId: selectedTaskId,
+    });
+
+    closeModal();
+    window.location.reload();
+  };
+
   return (
     <div
       onClick={() => setIsOpen((prev) => !prev)}
@@ -30,7 +48,10 @@ export default function MenuButton() {
           >
             수정하기
           </button>
-          <button className="w-[81px] h-8 rounded font-normal text-md text-gray-800 hover:text-violet hover:bg-violet-8">
+          <button
+            onClick={handleDelete}
+            className="w-[81px] h-8 rounded font-normal text-md text-gray-800 hover:text-violet hover:bg-violet-8"
+          >
             삭제하기
           </button>
         </div>
diff --git a/src/lib/apis/cardsApi.ts b/src/lib/apis/cardsApi.ts
index 342ccf9..d19a563 100644
--- a/src/lib/apis/cardsApi.ts
+++ b/src/lib/apis/cardsApi.ts
@@ -44,3 +44,21 @@ export async function fetchTaskCardDetail({
 
   return res.json();
 }
+
+export async function deleteCard({
+  token,
+  cardId,
+}: {
+  token: string;
+  cardId: number;
+}) {
+  await fetch(`${BASE_URL}/cards/${cardId}`, {
+    method: "DELETE",
+    headers: {
+      Accept: "application/json",
+      Authorization: `Bearer ${token}`,
+    },
+  });
+
+  return null;
+}

From 3e24b0c0a087ebbbe0c640998a80c1e432533175 Mon Sep 17 00:00:00 2001
From: hyeonjiroh <sonamu6509@naver.com>
Date: Sun, 30 Mar 2025 14:55:09 +0900
Subject: [PATCH 8/9] chore: Remove unused router object declaration

---
 src/components/common/modal/MenuButton.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/common/modal/MenuButton.tsx b/src/components/common/modal/MenuButton.tsx
index 7fee588..f4213bd 100644
--- a/src/components/common/modal/MenuButton.tsx
+++ b/src/components/common/modal/MenuButton.tsx
@@ -11,7 +11,6 @@ export default function MenuButton() {
   const [isOpen, setIsOpen] = useState(false);
   const { openModal, closeModal } = useModalStore();
   const { selectedTaskId } = useTaskStore();
-  const router = useRouter();
 
   const openModifyModal = () => {
     closeModal();

From 213d82e3d81f1c8b836443de364e81d7e90a49bb Mon Sep 17 00:00:00 2001
From: hyeonjiroh <sonamu6509@naver.com>
Date: Sun, 30 Mar 2025 14:58:42 +0900
Subject: [PATCH 9/9] chore: Remove unused useRouter import

---
 src/components/common/modal/MenuButton.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/common/modal/MenuButton.tsx b/src/components/common/modal/MenuButton.tsx
index f4213bd..9c0103a 100644
--- a/src/components/common/modal/MenuButton.tsx
+++ b/src/components/common/modal/MenuButton.tsx
@@ -1,5 +1,4 @@
 import { useState } from "react";
-import { useRouter } from "next/navigation";
 import { deleteCard } from "@/lib/apis/cardsApi";
 import { TOKEN_1 } from "@/lib/constants/tokens";
 import { useModalStore } from "@/lib/store/useModalStore";