From 7239a6cc47e16eea5e790a65ca96e08c83bdc0aa Mon Sep 17 00:00:00 2001
From: jyn <spdlqjdkslel1226@naver.com>
Date: Sat, 21 Jun 2025 04:47:16 +0900
Subject: [PATCH 01/16] =?UTF-8?q?=E2=9C=A8=20feat:=20=EC=B9=B4=EB=93=9C=20?=
 =?UTF-8?q?=EC=83=81=EC=84=B8=20=EB=AA=A8=EB=8B=AC=20=EC=83=81=EB=8B=A8=20?=
 =?UTF-8?q?UI=20=EB=B0=8F=20=EB=B0=98=EC=9D=91=ED=98=95=20=EA=B5=AC?=
 =?UTF-8?q?=ED=98=84=20=EC=99=84=EB=A3=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

📝 TODO:
- 담당자 옆 아바타에 반응형 사이즈 적용 필요
- 카드 수정 모달의 컬럼 선택 값을 form 데이터와 연결 필요
---
 src/app/features/dashboard_Id/Card/Card.tsx   |  18 +++
 .../dashboard_Id/Card/ColumnTitle.tsx         |   2 +-
 .../Card/cardFormModals/ModifyCardForm.tsx    |   7 +-
 .../Card/cardModal/CardContent.tsx            | 142 +++++++++++++-----
 .../Card/cardModal/CardContentCopy.tsx        | 110 ++++++++++++++
 .../dashboard_Id/Card/cardModal/CardModal.tsx |   2 +-
 .../dashboard_Id/api/usePutCardMutation.ts    |   2 +-
 7 files changed, 240 insertions(+), 43 deletions(-)
 create mode 100644 src/app/features/dashboard_Id/Card/cardModal/CardContentCopy.tsx

diff --git a/src/app/features/dashboard_Id/Card/Card.tsx b/src/app/features/dashboard_Id/Card/Card.tsx
index 24218ae..948bbb8 100644
--- a/src/app/features/dashboard_Id/Card/Card.tsx
+++ b/src/app/features/dashboard_Id/Card/Card.tsx
@@ -6,6 +6,8 @@ import { Avatar } from '@/app/shared/components/common/Avatar'
 import { useDragStore } from '../store/useDragStore'
 import type { Card as CardType } from '../type/Card.type'
 import type { Column as ColumnType } from '../type/Column.type'
+import CreateCardModal from './cardFormModals/CreateCardModal'
+import ModifyCardForm from './cardFormModals/ModifyCardForm'
 import CardContent from './cardModal/CardContent'
 import CardModal from './cardModal/CardModal'
 import Tags from './Tags'
@@ -20,6 +22,9 @@ export default function Card({
   const { id, imageUrl, title, tags, dueDate, assignee } = card
   const { setDraggingCard } = useDragStore()
   const [openCard, setOpenCard] = useState(false) //card.tsx
+  const [openModifyCard, setOpenModifyCard] = useState(false)
+  const { title: columnTitle, id: columnId } = column
+  const currentColumn = { columnTitle, columnId }
 
   return (
     <div
@@ -84,11 +89,24 @@ export default function Card({
         <CardModal>
           <CardContent
             onClose={() => setOpenCard(false)}
+            openModifyModal={() => setOpenModifyCard(true)}
             card={card}
             column={column}
           />
         </CardModal>
       )}
+
+      {/* 카드 수정 모달 */}
+      {openModifyCard && (
+        <CreateCardModal>
+          <ModifyCardForm
+            onClose={() => setOpenModifyCard(false)}
+            // columnId={column.id}
+            currentColumn={currentColumn}
+            card={card}
+          />
+        </CreateCardModal>
+      )}
     </div>
   )
 }
diff --git a/src/app/features/dashboard_Id/Card/ColumnTitle.tsx b/src/app/features/dashboard_Id/Card/ColumnTitle.tsx
index 9311ac5..810fdbd 100644
--- a/src/app/features/dashboard_Id/Card/ColumnTitle.tsx
+++ b/src/app/features/dashboard_Id/Card/ColumnTitle.tsx
@@ -2,7 +2,7 @@ export default function ColumnTitle({ title }: { title: string }) {
   return (
     <div className="BG-lightblue flex w-fit items-center gap-6 rounded-16 px-10 py-4">
       <div className="size-6 rounded-25 bg-[#228DFF]"></div>
-      <div className="Text-deepblue pb-4 pt-6 text-14 font-medium leading-none">
+      <div className="Text-deepblue whitespace-nowrap pb-4 pt-6 text-14 font-medium leading-none">
         {title}
       </div>
     </div>
diff --git a/src/app/features/dashboard_Id/Card/cardFormModals/ModifyCardForm.tsx b/src/app/features/dashboard_Id/Card/cardFormModals/ModifyCardForm.tsx
index 61ca09d..cc486dd 100644
--- a/src/app/features/dashboard_Id/Card/cardFormModals/ModifyCardForm.tsx
+++ b/src/app/features/dashboard_Id/Card/cardFormModals/ModifyCardForm.tsx
@@ -78,7 +78,6 @@ export default function ModifyCardForm({
   // React Hook Form 과 tags 값 연결
   useEffect(() => {
     setValue('tags', tags)
-    console.log(tags)
   }, [tags, tags.length, setValue])
 
   // 상태(컬럼) 선택 시 / assignee 선택 시 드롭다운 닫기
@@ -125,7 +124,11 @@ export default function ModifyCardForm({
 
   // ✅ JSX
   return (
-    <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-32">
+    <form
+      onSubmit={handleSubmit(onSubmit)}
+      className="flex flex-col gap-32"
+      onClick={(e) => e.stopPropagation()}
+    >
       <h2 className="Text-black text-24 font-bold">할 일 수정</h2>
 
       <div className="flex gap-32">
diff --git a/src/app/features/dashboard_Id/Card/cardModal/CardContent.tsx b/src/app/features/dashboard_Id/Card/cardModal/CardContent.tsx
index ef9b563..5ab566a 100644
--- a/src/app/features/dashboard_Id/Card/cardModal/CardContent.tsx
+++ b/src/app/features/dashboard_Id/Card/cardModal/CardContent.tsx
@@ -1,32 +1,41 @@
 import Image from 'next/image'
 import { useState } from 'react'
 
+import { Avatar } from '@/app/shared/components/common/Avatar'
 import Dropdown from '@/app/shared/components/common/Dropdown/Dropdown'
 
 import { Card } from '../../type/Card.type'
 import { Column } from '../../type/Column.type'
 import CreateCardModal from '../cardFormModals/CreateCardModal'
 import ModifyCardForm from '../cardFormModals/ModifyCardForm'
+import ColumnTitle from '../ColumnTitle'
 import Tags from '../Tags'
-interface CardContentProps {
-  onClose: () => void
-  card: Card
-  column: Column
-}
+
 export default function CardContent({
   onClose,
+  openModifyModal,
   card,
   column,
-}: CardContentProps) {
-  const { id, imageUrl, title, tags, dueDate, assignee } = card
+}: {
+  onClose: () => void
+  openModifyModal: () => void
+  card: Card
+  column: Column
+}) {
+  // const { id, imageUrl, title, tags, dueDate, assignee, description } = card
   const [openModifyCard, setOpenModifyCard] = useState(false)
-  const { title: columnTitle, id: columnId } = column
-  const currentColumn = { columnTitle, columnId }
+  // const { title: columnTitle, id: columnId } = column
+  // const currentColumn = { columnTitle, columnId }
 
   return (
-    <>
-      <h2 className="Text-black bt-24 text-24 font-bold">{title}</h2>
-      <div className="flex items-center gap-24">
+    // <div className="relative">
+    <div>
+      <h2 className="Text-black mb-24 text-24 font-bold mobile:mt-40 mobile:text-20">
+        {card.title}
+      </h2>
+
+      {/* 카드 우측 상단의 케밥 버튼, X 버튼 */}
+      <div className="absolute right-38 top-30 flex items-center gap-24 mobile:right-16 mobile:top-16 mobile:gap-16 tablet:right-32 tablet:top-24">
         <Dropdown
           width="w-6"
           align="right"
@@ -36,46 +45,103 @@ export default function CardContent({
               alt="드롭 옵션 보기"
               width={28}
               height={28}
+              className="mobile:size-20"
             />
           }
         >
-          {/* 드롭다운 내부 메뉴 아이템 */}
-          <div
-            className="Text-black cursor-pointer whitespace-nowrap rounded-6 px-22 py-11 text-center text-14 font-medium hover:bg-[#dbf0ff] hover:text-[#228DFF] dark:hover:bg-[#02406d]"
-            onClick={() => setOpenModifyCard(true)}
+          {/* 트리거의(케밥) 드롭다운 - 수정하기, 삭제하기 */}
+          <button
+            className="Text-black w-full whitespace-nowrap rounded-6 px-22 py-11 text-center text-14 font-medium hover:bg-[#dbf0ff] hover:text-[#228DFF] dark:hover:bg-[#02406d]"
+            onClick={(e) => {
+              e.stopPropagation() // 클릭 이벤트가 부모 컴포넌트(Card)까지 번지지 않도록 (Card-> onClick->isOpen 주의)
+              openModifyModal()
+              onClose()
+            }}
           >
             수정하기
-          </div>
-          <div className="Text-black cursor-pointer whitespace-nowrap rounded-6 px-22 py-11 text-center text-14 font-medium hover:bg-[#dbf0ff] hover:text-[#228DFF] dark:hover:bg-[#02406d]">
+          </button>
+          <button className="Text-black w-full whitespace-nowrap rounded-6 px-22 py-11 text-center text-14 font-medium hover:bg-[#dbf0ff] hover:text-[#228DFF] dark:hover:bg-[#02406d]">
             삭제하기
-          </div>
+          </button>
         </Dropdown>
-        <Image
-          src={'/images/close.svg'}
-          alt="카드 닫기"
-          width={32}
-          height={32}
-          onClick={() => {
+        {/* X 버튼 (카드 닫기)*/}
+        <button
+          onClick={(e) => {
+            e.stopPropagation() //
             onClose()
-            console.log('sdfadfdsgreggsfds')
           }}
-        />
+        >
+          <Image
+            src="/images/close.svg"
+            alt="카드 닫기"
+            width={32}
+            height={32}
+            className="mobile:size-24"
+          />
+        </button>
       </div>
 
+      {/* 카드 상단 */}
       <div>
-        그리드로 관리하기 / 컬럼명은 따로 컴포넌트로 만들어 빼기
-        <div>{column.title}</div>
-        <Tags tags={tags} />
-        <p>설명~~~~~~~~</p>
-        <div>
-          <div>{assignee.nickname}</div>
-          <div>{dueDate}</div>
+        <div className="flex gap-14 mobile:flex-col-reverse mobile:gap-16">
+          {/* 컬럼명 / 태그 // 설명 // 이미지 */}
+          <div className="w-470 mobile:w-295 tablet:w-420">
+            <div className="mb-16 flex items-start gap-20 mobile:gap-12">
+              <ColumnTitle title={column.title} />
+              <div className="mt-6 h-20 w-1 bg-[#D9D9D9]"></div>
+              <Tags tags={card.tags} />
+            </div>
+            <p
+              className={
+                'font-regular Text-black mb-16 text-14 mobile:mb-32 mobile:text-12'
+              }
+            >
+              {card.description}
+            </p>
+            <Image
+              alt="카드 이미지"
+              src={card.imageUrl}
+              width={420}
+              height={300}
+              className="mb-24 h-auto w-full rounded-6 object-contain"
+              priority
+            />
+          </div>
+          {/* 담당자 / 마감일 박스 */}
+          <div>
+            <div className="Border-section flex w-200 flex-col gap-16 rounded-8 px-16 py-14 mobile:w-full mobile:flex-row mobile:py-9 tablet:w-181">
+              <div className="mobile:w-135">
+                <span className="Text-black moblie:mb-0 mb-6 block text-12 font-semibold">
+                  담당자
+                </span>
+                <div className="flex items-center gap-8">
+                  <Avatar
+                    size={34}
+                    name={card.assignee.nickname}
+                    imageUrl={card.assignee.profileImageUrl}
+                  />
+                  <span className="regular Text-black block pt-1 text-14 leading-none mobile:text-12">
+                    {card.assignee.nickname}
+                  </span>
+                </div>
+              </div>
+              <div>
+                <span className="Text-black mb-6 block text-12 font-semibold mobile:mb-8">
+                  마감일
+                </span>
+                <span className="regular Text-black block pt-1 text-14 leading-none mobile:text-12">
+                  {card.dueDate}
+                </span>
+              </div>
+            </div>
+          </div>
         </div>
+        <div></div>
       </div>
-      <div> 이미지 있으면 이미지</div>
+
       <div>댓글 컴포넌트</div>
 
-      {/* 카드 수정 모달 */}
+      {/* 카드 수정 모달
       {openModifyCard && (
         <CreateCardModal>
           <ModifyCardForm
@@ -85,7 +151,7 @@ export default function CardContent({
             card={card}
           />
         </CreateCardModal>
-      )}
-    </>
+      )} */}
+    </div>
   )
 }
diff --git a/src/app/features/dashboard_Id/Card/cardModal/CardContentCopy.tsx b/src/app/features/dashboard_Id/Card/cardModal/CardContentCopy.tsx
new file mode 100644
index 0000000..933b48c
--- /dev/null
+++ b/src/app/features/dashboard_Id/Card/cardModal/CardContentCopy.tsx
@@ -0,0 +1,110 @@
+// import { useModalStore } from '@store/useModalStore'
+// import Image from 'next/image'
+// import { useState } from 'react'
+
+// import Dropdown from '@/app/shared/components/common/Dropdown/Dropdown'
+
+// import { Card } from '../../type/Card.type'
+// import { Column } from '../../type/Column.type'
+// import CreateCardModal from '../cardFormModals/CreateCardModal'
+// import ModifyCardForm from '../cardFormModals/ModifyCardForm'
+// import Tags from '../Tags'
+// interface CardContentProps {
+//   onClose: () => void
+//   card: Card
+//   column: Column
+// }
+// export default function CardContent({
+//   onClose,
+//   card,
+//   column,
+// }: CardContentProps) {
+//   const { id, imageUrl, title, tags, dueDate, assignee } = card
+//   const [openModifyCard, setOpenModifyCard] = useState(false)
+//   const { title: columnTitle, id: columnId } = column
+//   const currentColumn = { columnTitle, columnId }
+//   const { modalType, closeModal } = useModalStore()
+
+//   const handleBackdropClick = (e: React.MouseEvent<HTMLDivElement>) => {
+//     if (e.target === e.currentTarget) {
+//       closeModal()
+//     }
+//   }
+
+//   if (!modalType) return null
+
+//   return (
+//     <>
+//       <div
+//         className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50"
+//         onClick={handleBackdropClick}
+//       >
+//         <div className="BG-white h-auto w-584 rounded-16 p-32">
+//           <h2 className="Text-black mb-24 text-24 font-bold">초대하기</h2>
+
+//           <h2 className="Text-black bt-24 text-24 font-bold">{title}</h2>
+//           <div className="flex items-center gap-24">
+//             <Dropdown
+//               width="w-6"
+//               align="right"
+//               trigger={
+//                 <Image
+//                   src="/images/drop-more.svg"
+//                   alt="드롭 옵션 보기"
+//                   width={28}
+//                   height={28}
+//                 />
+//               }
+//             >
+//               {/* 드롭다운 내부 메뉴 아이템 */}
+//               <div
+//                 className="Text-black cursor-pointer whitespace-nowrap rounded-6 px-22 py-11 text-center text-14 font-medium hover:bg-[#dbf0ff] hover:text-[#228DFF] dark:hover:bg-[#02406d]"
+//                 onClick={() => setOpenModifyCard(true)}
+//               >
+//                 수정하기
+//               </div>
+//               <div className="Text-black cursor-pointer whitespace-nowrap rounded-6 px-22 py-11 text-center text-14 font-medium hover:bg-[#dbf0ff] hover:text-[#228DFF] dark:hover:bg-[#02406d]">
+//                 삭제하기
+//               </div>
+//             </Dropdown>
+//             <Image
+//               src={'/images/close.svg'}
+//               alt="카드 닫기"
+//               width={32}
+//               height={32}
+//               onClick={() => {
+//                 onClose()
+//                 console.log('sdfadfdsgreggsfds')
+//               }}
+//             />
+//           </div>
+
+//           <div>
+//             그리드로 관리하기 / 컬럼명은 따로 컴포넌트로 만들어 빼기
+//             <div>{column.title}</div>
+//             <Tags tags={tags} />
+//             <p>설명~~~~~~~~</p>
+//             <div>
+//               <div>{assignee.nickname}</div>
+//               <div>{dueDate}</div>
+//             </div>
+//           </div>
+//           <div> 이미지 있으면 이미지</div>
+//           <div>댓글 컴포넌트</div>
+
+//           {/* 카드 수정 모달 */}
+//           {openModifyCard && (
+//             <CreateCardModal>
+//               <ModifyCardForm
+//                 onClose={() => setOpenModifyCard(false)}
+//                 // columnId={column.id}
+//                 currentColumn={currentColumn}
+//                 card={card}
+//               />
+//             </CreateCardModal>
+//           )}
+//         </div>
+//       </div>
+//     </>
+//   )
+// }
diff --git a/src/app/features/dashboard_Id/Card/cardModal/CardModal.tsx b/src/app/features/dashboard_Id/Card/cardModal/CardModal.tsx
index 9f8b32b..bef9e45 100644
--- a/src/app/features/dashboard_Id/Card/cardModal/CardModal.tsx
+++ b/src/app/features/dashboard_Id/Card/cardModal/CardModal.tsx
@@ -9,7 +9,7 @@ export default function CardModal({ children }: ModalProps) {
 
   return createPortal(
     <div className="fixed inset-0 flex items-center justify-center bg-black/40">
-      <div className="BG-white min-h-764 w-730 overflow-y-scroll rounded-16 p-32 shadow-lg [mask-image:radial-gradient(white_100%,transparent_100%)]">
+      <div className="BG-white relative max-h-764 min-h-764 w-730 overflow-auto overflow-y-scroll rounded-16 px-18 py-30 shadow-lg [mask-image:radial-gradient(white_100%,transparent_100%)] mobile:w-327 mobile:p-16 tablet:w-678 tablet:px-32 tablet:py-24">
         {children}
       </div>
     </div>,
diff --git a/src/app/features/dashboard_Id/api/usePutCardMutation.ts b/src/app/features/dashboard_Id/api/usePutCardMutation.ts
index 0eb536a..cc8fc10 100644
--- a/src/app/features/dashboard_Id/api/usePutCardMutation.ts
+++ b/src/app/features/dashboard_Id/api/usePutCardMutation.ts
@@ -18,7 +18,7 @@ export function usePutCardMutation() {
       payload: CardModifyFormData
     }) => putCard(payload, cardId),
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['cardId'] }) //'columnId' 쿼리 invalidate - 카드가 stale 상태임을 알리고 다시 fetch 하도록 유도함
+      queryClient.invalidateQueries({ queryKey: ['columnId'] }) //'columnId' 쿼리 invalidate - 카드가 stale 상태임을 알리고 다시 fetch 하도록 유도함
     },
     onError: (error) => {
       if (axios.isAxiosError(error)) {

From 14d0c65861a66b104aa3515f965726440d6084ff Mon Sep 17 00:00:00 2001
From: jyn <spdlqjdkslel1226@naver.com>
Date: Sat, 21 Jun 2025 18:48:24 +0900
Subject: [PATCH 02/16] =?UTF-8?q?=E2=9C=A8=20feat:=20=EB=8C=93=EA=B8=80=20?=
 =?UTF-8?q?=EC=83=9D=EC=84=B1,=EC=88=98=EC=A0=95=20=EC=99=84=EC=84=B1=20/?=
 =?UTF-8?q?=20useIsMobile=EA=B3=B5=ED=86=B5=20=ED=95=A8=EC=88=98=20?=
 =?UTF-8?q?=EC=83=9D=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Card/cardFormModals/ModifyCardForm.tsx    |  16 +--
 .../Card/cardModal/CardContent.tsx            | 108 +++++++++++-------
 .../dashboard_Id/Card/cardModal/Comment.tsx   |  50 ++++++++
 .../Card/cardModal/CommentForm.tsx            |  64 +++++++++++
 .../Card/cardModal/CommentModifyForm.tsx      |  62 ++++++++++
 .../dashboard_Id/Card/cardModal/Comments.tsx  |  24 ++++
 .../dashboard_Id/api/fetchComments.ts         |  16 +++
 .../features/dashboard_Id/api/postComment.ts  |  14 +++
 .../features/dashboard_Id/api/putComment.ts   |  15 +++
 .../dashboard_Id/api/useCommentsQuery.ts      |  11 ++
 .../api/usePostCommentMutation.ts             |  24 ++++
 .../dashboard_Id/api/usePutCardMutation.ts    |   4 +-
 .../api/usePutCommentsMutation.ts             |  30 +++++
 .../dashboard_Id/type/Comment.type.ts         |  17 +++
 .../dashboard_Id/type/CommentFormData.type.ts |  20 ++++
 src/app/globals.css                           |   2 +-
 src/app/shared/hooks/useIsmobile.ts           |  17 +++
 17 files changed, 440 insertions(+), 54 deletions(-)
 create mode 100644 src/app/features/dashboard_Id/Card/cardModal/Comment.tsx
 create mode 100644 src/app/features/dashboard_Id/Card/cardModal/CommentForm.tsx
 create mode 100644 src/app/features/dashboard_Id/Card/cardModal/CommentModifyForm.tsx
 create mode 100644 src/app/features/dashboard_Id/Card/cardModal/Comments.tsx
 create mode 100644 src/app/features/dashboard_Id/api/fetchComments.ts
 create mode 100644 src/app/features/dashboard_Id/api/postComment.ts
 create mode 100644 src/app/features/dashboard_Id/api/putComment.ts
 create mode 100644 src/app/features/dashboard_Id/api/useCommentsQuery.ts
 create mode 100644 src/app/features/dashboard_Id/api/usePostCommentMutation.ts
 create mode 100644 src/app/features/dashboard_Id/api/usePutCommentsMutation.ts
 create mode 100644 src/app/features/dashboard_Id/type/Comment.type.ts
 create mode 100644 src/app/features/dashboard_Id/type/CommentFormData.type.ts
 create mode 100644 src/app/shared/hooks/useIsmobile.ts

diff --git a/src/app/features/dashboard_Id/Card/cardFormModals/ModifyCardForm.tsx b/src/app/features/dashboard_Id/Card/cardFormModals/ModifyCardForm.tsx
index cc486dd..14dbcd3 100644
--- a/src/app/features/dashboard_Id/Card/cardFormModals/ModifyCardForm.tsx
+++ b/src/app/features/dashboard_Id/Card/cardFormModals/ModifyCardForm.tsx
@@ -63,14 +63,14 @@ export default function ModifyCardForm({
     formState: { errors, isValid, isSubmitting, isDirty },
   } = useForm<CardFormData>({
     defaultValues: {
-      assigneeUserId: card.assignee.id,
+      assigneeUserId: card.assignee?.id,
       dashboardId: card.dashboardId,
       columnId: card.columnId,
       title: card.title,
       description: card.description,
-      dueDate: card.dueDate,
-      tags: card.tags,
-      imageUrl: card.imageUrl,
+      dueDate: card.dueDate ? card.dueDate : '',
+      tags: card.tags ? card.tags : [],
+      imageUrl: card.imageUrl ? card.imageUrl : '',
     },
     mode: 'onChange', // isValid와 isDirty가 입력 즉시 반영되도록
   })
@@ -191,9 +191,11 @@ export default function ModifyCardForm({
                   id="assigneeUserId"
                   type="text"
                 />
-                <div className="BG-white absolute left-16 top-1/2 -translate-y-1/2">
-                  <MyAssignee assignee={selectedAssignee} />
-                </div>
+                {selectedAssignee && (
+                  <div className="BG-white absolute left-16 top-1/2 -translate-y-1/2">
+                    <MyAssignee assignee={selectedAssignee} />
+                  </div>
+                )}
                 <Image
                   src="/images/arrow-dropdown.svg"
                   alt="화살표"
diff --git a/src/app/features/dashboard_Id/Card/cardModal/CardContent.tsx b/src/app/features/dashboard_Id/Card/cardModal/CardContent.tsx
index 5ab566a..e11266d 100644
--- a/src/app/features/dashboard_Id/Card/cardModal/CardContent.tsx
+++ b/src/app/features/dashboard_Id/Card/cardModal/CardContent.tsx
@@ -3,6 +3,7 @@ import { useState } from 'react'
 
 import { Avatar } from '@/app/shared/components/common/Avatar'
 import Dropdown from '@/app/shared/components/common/Dropdown/Dropdown'
+import { useIsMobile } from '@/app/shared/hooks/useIsmobile'
 
 import { Card } from '../../type/Card.type'
 import { Column } from '../../type/Column.type'
@@ -10,6 +11,8 @@ import CreateCardModal from '../cardFormModals/CreateCardModal'
 import ModifyCardForm from '../cardFormModals/ModifyCardForm'
 import ColumnTitle from '../ColumnTitle'
 import Tags from '../Tags'
+import CommentForm from './CommentForm'
+import Comments from './Comments'
 
 export default function CardContent({
   onClose,
@@ -26,6 +29,7 @@ export default function CardContent({
   const [openModifyCard, setOpenModifyCard] = useState(false)
   // const { title: columnTitle, id: columnId } = column
   // const currentColumn = { columnTitle, columnId }
+  const isMobile = useIsMobile()
 
   return (
     // <div className="relative">
@@ -88,50 +92,73 @@ export default function CardContent({
           <div className="w-470 mobile:w-295 tablet:w-420">
             <div className="mb-16 flex items-start gap-20 mobile:gap-12">
               <ColumnTitle title={column.title} />
-              <div className="mt-6 h-20 w-1 bg-[#D9D9D9]"></div>
-              <Tags tags={card.tags} />
+              <div className="mt-6 h-20 w-1 bg-[#D9D9D9] dark:bg-[#454545]"></div>
+              {card.tags && <Tags tags={card.tags} />}
             </div>
-            <p
-              className={
-                'font-regular Text-black mb-16 text-14 mobile:mb-32 mobile:text-12'
-              }
-            >
-              {card.description}
-            </p>
-            <Image
-              alt="카드 이미지"
-              src={card.imageUrl}
-              width={420}
-              height={300}
-              className="mb-24 h-auto w-full rounded-6 object-contain"
-              priority
-            />
+            {card.description && (
+              <p
+                className={
+                  'font-regular Text-black mb-16 text-14 mobile:mb-32 mobile:text-12'
+                }
+              >
+                {card.description}
+              </p>
+            )}
+            {card.imageUrl && (
+              <Image
+                alt="카드 이미지"
+                src={card.imageUrl}
+                width={420}
+                height={300}
+                className="mb-24 h-auto w-full rounded-6 object-contain"
+                priority
+              />
+            )}
           </div>
           {/* 담당자 / 마감일 박스 */}
           <div>
             <div className="Border-section flex w-200 flex-col gap-16 rounded-8 px-16 py-14 mobile:w-full mobile:flex-row mobile:py-9 tablet:w-181">
-              <div className="mobile:w-135">
+              <div className="mobile:w-120">
                 <span className="Text-black moblie:mb-0 mb-6 block text-12 font-semibold">
                   담당자
                 </span>
-                <div className="flex items-center gap-8">
-                  <Avatar
-                    size={34}
-                    name={card.assignee.nickname}
-                    imageUrl={card.assignee.profileImageUrl}
-                  />
-                  <span className="regular Text-black block pt-1 text-14 leading-none mobile:text-12">
-                    {card.assignee.nickname}
-                  </span>
-                </div>
+                {card.assignee && (
+                  <div className="flex items-center gap-8">
+                    {isMobile ? (
+                      <>
+                        <Avatar
+                          size={24}
+                          name={card.assignee.nickname}
+                          imageUrl={card.assignee.profileImageUrl}
+                        />
+                        <span className="regular Text-black block pt-1 text-14 leading-none mobile:text-12">
+                          {card.assignee.nickname}
+                        </span>
+                      </>
+                    ) : (
+                      <>
+                        <Avatar
+                          size={32}
+                          name={card.assignee.nickname}
+                          imageUrl={card.assignee.profileImageUrl}
+                        />
+                        <span className="regular Text-black block pt-1 text-14 leading-none mobile:text-12">
+                          {card.assignee.nickname}
+                        </span>
+                      </>
+                    )}
+                  </div>
+                )}
               </div>
               <div>
                 <span className="Text-black mb-6 block text-12 font-semibold mobile:mb-8">
                   마감일
                 </span>
-                <span className="regular Text-black block pt-1 text-14 leading-none mobile:text-12">
-                  {card.dueDate}
-                </span>
+                {card.dueDate && (
+                  <span className="regular Text-black block pt-1 text-14 leading-none mobile:text-12">
+                    {card.dueDate}
+                  </span>
+                )}
               </div>
             </div>
           </div>
@@ -139,19 +166,12 @@ export default function CardContent({
         <div></div>
       </div>
 
-      <div>댓글 컴포넌트</div>
-
-      {/* 카드 수정 모달
-      {openModifyCard && (
-        <CreateCardModal>
-          <ModifyCardForm
-            onClose={() => setOpenModifyCard(false)}
-            // columnId={column.id}
-            currentColumn={currentColumn}
-            card={card}
-          />
-        </CreateCardModal>
-      )} */}
+      <CommentForm
+        cardId={card.id}
+        columnId={card.columnId}
+        dashboardId={card.dashboardId}
+      />
+      <Comments cardId={card.id} />
     </div>
   )
 }
diff --git a/src/app/features/dashboard_Id/Card/cardModal/Comment.tsx b/src/app/features/dashboard_Id/Card/cardModal/Comment.tsx
new file mode 100644
index 0000000..519f0db
--- /dev/null
+++ b/src/app/features/dashboard_Id/Card/cardModal/Comment.tsx
@@ -0,0 +1,50 @@
+import { format } from 'date-fns'
+import { useState } from 'react'
+
+import { Avatar } from '@/app/shared/components/common/Avatar'
+import { useIsMobile } from '@/app/shared/hooks/useIsmobile'
+
+import { Comment as CommentType } from '../../type/Comment.type'
+import CommentModifyForm from './CommentModifyForm'
+
+export default function Comment({ comment }: { comment: CommentType }) {
+  const isMobile = useIsMobile()
+  const [modifyComment, setModifyComment] = useState(false)
+
+  return (
+    <div key={comment.id} className="flex gap-10 mobile:gap-8 tablet:gap-12">
+      {isMobile ? (
+        <Avatar
+          size={24}
+          name={comment.author.nickname}
+          imageUrl={comment.author.profileImageUrl}
+        />
+      ) : (
+        <Avatar
+          size={32}
+          name={comment.author.nickname}
+          imageUrl={comment.author.profileImageUrl}
+        />
+      )}
+      <div className="flex flex-col gap-4">
+        <div className="flex items-center gap-8">
+          <span className="Text-black inline-block text-14 font-semibold">
+            {comment.author.nickname}
+          </span>
+          <span className="Text-gray-light inline-block text-12">
+            {format(new Date(comment.createdAt), 'yyyy.MM.dd HH:mm')}
+          </span>
+        </div>
+        {modifyComment ? (
+          <CommentModifyForm commentId={comment.id} content={comment.content} />
+        ) : (
+          <p className="text-14">{comment.content}</p>
+        )}
+        <div className="Text-gray-light active:Text-btn flex gap-14 text-12 font-normal underline underline-offset-2 mobile:gap-8 tablet:gap-12">
+          <button onClick={() => setModifyComment(true)}>수정</button>
+          <button>삭제</button>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/src/app/features/dashboard_Id/Card/cardModal/CommentForm.tsx b/src/app/features/dashboard_Id/Card/cardModal/CommentForm.tsx
new file mode 100644
index 0000000..bae8193
--- /dev/null
+++ b/src/app/features/dashboard_Id/Card/cardModal/CommentForm.tsx
@@ -0,0 +1,64 @@
+import { useForm } from 'react-hook-form'
+
+import { usePostCommentMutation } from '../../api/usePostCommentMutation'
+import { CommentFormData } from '../../type/CommentFormData.type'
+
+export default function CommentForm({
+  cardId,
+  columnId,
+  dashboardId,
+}: {
+  cardId: number
+  columnId: number
+  dashboardId: number
+}) {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isValid, isSubmitting },
+  } = useForm<CommentFormData>({
+    mode: 'onChange',
+  })
+
+  // 폼 제출 핸들러 함수
+  const { mutate: createComment, isPending } = usePostCommentMutation()
+
+  function onSubmit(data: CommentFormData) {
+    const payload = {
+      ...data,
+      cardId,
+      columnId,
+      dashboardId,
+    }
+    console.log(payload)
+    createComment(payload)
+  }
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)} className="mb-24 w-450">
+      <label
+        htmlFor={'content'}
+        className="Text-black mb-4 text-16 font-medium"
+      >
+        댓글
+      </label>
+      <div className="relative">
+        <textarea
+          {...register('content', {
+            required: '댓글 내용을 작성해주세요',
+          })}
+          className="Text-black h-110 w-full resize-none rounded-6 border border-[#D9D9D9] p-16 text-14 placeholder-gray-400 dark:border-[#747474]"
+          id="content"
+          placeholder="댓글 작성하기"
+        />
+
+        <button
+          type="submit"
+          className="Text-blue absolute bottom-19 right-12 h-32 w-83 rounded-4 border border-[#D9D9D9] py-7 text-center text-12 font-medium dark:border-[#747474]"
+        >
+          입력
+        </button>
+      </div>
+    </form>
+  )
+}
diff --git a/src/app/features/dashboard_Id/Card/cardModal/CommentModifyForm.tsx b/src/app/features/dashboard_Id/Card/cardModal/CommentModifyForm.tsx
new file mode 100644
index 0000000..3baaad7
--- /dev/null
+++ b/src/app/features/dashboard_Id/Card/cardModal/CommentModifyForm.tsx
@@ -0,0 +1,62 @@
+import { Form, useForm } from 'react-hook-form'
+
+import { usePostCommentMutation } from '../../api/usePostCommentMutation'
+import { usePutCommentMutation } from '../../api/usePutCommentsMutation'
+import { PutCommentForm } from '../../type/CommentFormData.type'
+import Input from '../cardFormModals/input/Input'
+
+export default function CommentModifyForm({
+  commentId,
+  content,
+}: {
+  commentId: number
+  content: string
+}) {
+  const {
+    register,
+    handleSubmit,
+    setValue,
+    formState: { errors, isValid, isSubmitting },
+  } = useForm<PutCommentForm>({
+    defaultValues: {
+      content: content,
+    },
+  })
+
+  // 폼 제출 핸들러 함수
+  const { mutate: createComment, isPending } = usePutCommentMutation()
+
+  function onSubmit(data: PutCommentForm) {
+    console.log(data)
+    console.log(commentId)
+    createComment({ payload: data, commentId }) //useMutation은 하나의 인자만 허용. 객체 하나로 묶어서 전달하는거 자꾸 까먹음..
+  }
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)} className="mb-24 w-450">
+      <label
+        htmlFor={'content'}
+        className="Text-black mb-4 text-16 font-medium"
+      >
+        댓글
+      </label>
+      <div className="relative">
+        <textarea
+          {...register('content', {
+            required: '댓글 내용을 작성해주세요',
+          })}
+          className="Text-black h-110 w-full resize-none rounded-6 border border-[#D9D9D9] p-16 text-14 placeholder-gray-400 dark:border-[#747474]"
+          id="content"
+          placeholder={content ? content : '댓글 작성하기'}
+        />
+
+        <button
+          type="submit"
+          className="Text-blue absolute bottom-19 right-12 h-32 w-83 rounded-4 border border-[#D9D9D9] py-7 text-center text-12 font-medium dark:border-[#747474]"
+        >
+          입력
+        </button>
+      </div>
+    </form>
+  )
+}
diff --git a/src/app/features/dashboard_Id/Card/cardModal/Comments.tsx b/src/app/features/dashboard_Id/Card/cardModal/Comments.tsx
new file mode 100644
index 0000000..9cbc7a6
--- /dev/null
+++ b/src/app/features/dashboard_Id/Card/cardModal/Comments.tsx
@@ -0,0 +1,24 @@
+import { format } from 'date-fns'
+import { useState } from 'react'
+
+import { Avatar } from '@/app/shared/components/common/Avatar'
+
+import useCommentsQuery from '../../api/useCommentsQuery'
+import { Comment as CommentType } from '../../type/Comment.type'
+import Comment from './Comment'
+
+export default function Comments({ cardId }: { cardId: number }) {
+  const { data, isLoading, error } = useCommentsQuery(cardId)
+  const comments = data?.comments
+
+  //   if (isLoading) return <p>loading...</p>
+  //   if (error) return <p>error...{error.message}</p>
+
+  return (
+    <div className="flex w-450 flex-col gap-20">
+      {comments?.map((comment: CommentType) => (
+        <Comment key={comment.id} comment={comment} />
+      ))}
+    </div>
+  )
+}
diff --git a/src/app/features/dashboard_Id/api/fetchComments.ts b/src/app/features/dashboard_Id/api/fetchComments.ts
new file mode 100644
index 0000000..cadf7a8
--- /dev/null
+++ b/src/app/features/dashboard_Id/api/fetchComments.ts
@@ -0,0 +1,16 @@
+import api from '@/app/shared/lib/testAxios'
+
+// import api from '@/app/shared/lib/axios'
+import { CommentsResponse } from '../type/Comment.type'
+
+export async function fetchComments(cardId: number): Promise<CommentsResponse> {
+  //   if (!cardId) {
+  //     throw new Error('cardId가 유효하지 않습니다.')
+  //   }
+
+  const res = await api.get<CommentsResponse>(
+    `/${process.env.NEXT_PUBLIC_TEAM_ID}/comments?size=10&cardId=${cardId}`,
+  )
+
+  return res.data
+}
diff --git a/src/app/features/dashboard_Id/api/postComment.ts b/src/app/features/dashboard_Id/api/postComment.ts
new file mode 100644
index 0000000..0a9417f
--- /dev/null
+++ b/src/app/features/dashboard_Id/api/postComment.ts
@@ -0,0 +1,14 @@
+// import api from '@/app/shared/lib/axios'
+import api from '@/app/shared/lib/testAxios'
+
+import { CommentResponse, PutCommentForm } from '../type/CommentFormData.type'
+
+export async function postComment(
+  payload: PutCommentForm,
+): Promise<CommentResponse> {
+  const res = await api.post(
+    `/${process.env.NEXT_PUBLIC_TEAM_ID}/comments`,
+    payload,
+  )
+  return res.data
+}
diff --git a/src/app/features/dashboard_Id/api/putComment.ts b/src/app/features/dashboard_Id/api/putComment.ts
new file mode 100644
index 0000000..c4b742b
--- /dev/null
+++ b/src/app/features/dashboard_Id/api/putComment.ts
@@ -0,0 +1,15 @@
+import api from '@/app/shared/lib/testAxios'
+
+// import api from '@/app/shared/lib/axios'
+import { CommentResponse, PutCommentForm } from '../type/CommentFormData.type'
+
+export async function putComment(
+  payload: PutCommentForm,
+  commentId: number,
+): Promise<CommentResponse> {
+  const res = await api.put(
+    `/${process.env.NEXT_PUBLIC_TEAM_ID}/comments/${commentId}`,
+    payload,
+  )
+  return res.data
+}
diff --git a/src/app/features/dashboard_Id/api/useCommentsQuery.ts b/src/app/features/dashboard_Id/api/useCommentsQuery.ts
new file mode 100644
index 0000000..2a1c28f
--- /dev/null
+++ b/src/app/features/dashboard_Id/api/useCommentsQuery.ts
@@ -0,0 +1,11 @@
+import { useQuery } from '@tanstack/react-query'
+
+import { CommentsResponse } from '../type/Comment.type'
+import { fetchComments } from './fetchComments'
+
+export default function useCommentsQuery(cardId: number) {
+  return useQuery<CommentsResponse>({
+    queryKey: ['comments', cardId],
+    queryFn: () => fetchComments(cardId),
+  })
+}
diff --git a/src/app/features/dashboard_Id/api/usePostCommentMutation.ts b/src/app/features/dashboard_Id/api/usePostCommentMutation.ts
new file mode 100644
index 0000000..ebb51d7
--- /dev/null
+++ b/src/app/features/dashboard_Id/api/usePostCommentMutation.ts
@@ -0,0 +1,24 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+import axios from 'axios'
+
+import { postComment } from './postComment'
+
+// ✅ 댓글 생성 컴포넌트에서 사용 (CommentForm.tsx)
+export function usePostCommentMutation() {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: postComment,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['comments'] }) // 댓글 목록 캐시가 stale 상태임을 알리고 다시 fetch 하도록 유도함
+    },
+    onError: (error) => {
+      if (axios.isAxiosError(error)) {
+        const message = error.response?.data?.message
+        console.error('댓글 생성 실패:', message ?? '알 수 없는 에러')
+      } else {
+        console.error('댓글 생성 실패:', error)
+      }
+    },
+  })
+}
diff --git a/src/app/features/dashboard_Id/api/usePutCardMutation.ts b/src/app/features/dashboard_Id/api/usePutCardMutation.ts
index cc8fc10..68312e7 100644
--- a/src/app/features/dashboard_Id/api/usePutCardMutation.ts
+++ b/src/app/features/dashboard_Id/api/usePutCardMutation.ts
@@ -23,9 +23,9 @@ export function usePutCardMutation() {
     onError: (error) => {
       if (axios.isAxiosError(error)) {
         const message = error.response?.data?.message
-        console.error('카드 생성 실패:', message ?? '알 수 없는 에러')
+        console.error('카드 수정 실패:', message ?? '알 수 없는 에러')
       } else {
-        console.error('카드 생성 실패:', error)
+        console.error('카드 수정 실패:', error)
       }
     },
   })
diff --git a/src/app/features/dashboard_Id/api/usePutCommentsMutation.ts b/src/app/features/dashboard_Id/api/usePutCommentsMutation.ts
new file mode 100644
index 0000000..6d3764e
--- /dev/null
+++ b/src/app/features/dashboard_Id/api/usePutCommentsMutation.ts
@@ -0,0 +1,30 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+import axios from 'axios'
+
+import { CommentResponse, PutCommentForm } from '../type/CommentFormData.type'
+import { putComment } from './putComment'
+
+interface PostCommentArgs {
+  commentId: number
+  payload: PutCommentForm
+}
+
+// ✅ 카드 생성 모달에서 사용 (CreateCardForm.tsx)
+export function usePutCommentMutation() {
+  const queryClient = useQueryClient()
+
+  return useMutation<CommentResponse, Error, PostCommentArgs>({
+    mutationFn: ({ payload, commentId }) => putComment(payload, commentId),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['comments'] }) //'columnId' 쿼리 invalidate - 카드가 stale 상태임을 알리고 다시 fetch 하도록 유도함
+    },
+    onError: (error) => {
+      if (axios.isAxiosError(error)) {
+        const message = error.response?.data?.message
+        console.error('댓글 수정 실패:', message ?? '알 수 없는 에러')
+      } else {
+        console.error('댓글 수정 실패:', error)
+      }
+    },
+  })
+}
diff --git a/src/app/features/dashboard_Id/type/Comment.type.ts b/src/app/features/dashboard_Id/type/Comment.type.ts
new file mode 100644
index 0000000..8eec086
--- /dev/null
+++ b/src/app/features/dashboard_Id/type/Comment.type.ts
@@ -0,0 +1,17 @@
+export interface Auth {
+  profileImageUrl: string
+  nickname: string
+  id: number
+}
+export interface Comment {
+  id: number
+  content: string
+  createdAt: string
+  updatedAt: number
+  cardId: number
+  author: Auth
+}
+export interface CommentsResponse {
+  cursorId: number | null
+  comments: Comment[] | []
+}
diff --git a/src/app/features/dashboard_Id/type/CommentFormData.type.ts b/src/app/features/dashboard_Id/type/CommentFormData.type.ts
new file mode 100644
index 0000000..2176eb8
--- /dev/null
+++ b/src/app/features/dashboard_Id/type/CommentFormData.type.ts
@@ -0,0 +1,20 @@
+import { Auth } from './Comment.type'
+
+export interface CommentFormData {
+  content: string
+  cardId: number
+  columnId: number
+  dashboardId: number
+}
+export interface CommentResponse {
+  id: number
+  content: string
+  createdAt: number
+  updatedAt: number
+  cardId: number
+  author: Auth
+}
+
+export interface PutCommentForm {
+  content: string
+}
diff --git a/src/app/globals.css b/src/app/globals.css
index 71a8f3e..e4d5a47 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -70,7 +70,7 @@ body {
   @apply border border-[#D9D9D9] dark:border-[#747474];
 }
 .Border-section {
-  @apply border border-[#D9D9D9] dark:border-[#000000];
+  @apply border border-[#D9D9D9] dark:border-[#454545];
 }
 .Border-column {
   @apply border-r border-[#EEEEEE] dark:border-[#262626];
diff --git a/src/app/shared/hooks/useIsmobile.ts b/src/app/shared/hooks/useIsmobile.ts
new file mode 100644
index 0000000..9e99100
--- /dev/null
+++ b/src/app/shared/hooks/useIsmobile.ts
@@ -0,0 +1,17 @@
+import { useEffect, useState } from 'react'
+
+export function useIsMobile(breakpoint = 375) {
+  const [isMobile, setIsMobile] = useState(false)
+
+  useEffect(() => {
+    function handleResize() {
+      setIsMobile(window.innerWidth <= breakpoint)
+    }
+
+    handleResize() // 초기 실행
+    window.addEventListener('resize', handleResize)
+    return () => window.removeEventListener('resize', handleResize)
+  }, [breakpoint])
+
+  return isMobile
+}

From aa087ad4d83dde0ddffc2a2565008501ab28c900 Mon Sep 17 00:00:00 2001
From: jyn <spdlqjdkslel1226@naver.com>
Date: Sat, 21 Jun 2025 20:06:13 +0900
Subject: [PATCH 03/16] =?UTF-8?q?=E2=9C=A8=20feat:=20=EB=8C=93=EA=B8=80=20?=
 =?UTF-8?q?=EC=82=AD=EC=A0=9C=20=EA=B8=B0=EB=8A=A5=20=EC=99=84=EC=84=B1,?=
 =?UTF-8?q?=20Avatar=EC=97=90=20shrink-0=ED=81=B4=EB=9E=98=EC=8A=A4=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../dashboard_Id/Card/cardModal/Comment.tsx   | 20 +++++---
 .../Card/cardModal/CommentForm.tsx            |  7 ++-
 .../Card/cardModal/CommentModifyForm.tsx      | 50 ++++++++++---------
 .../dashboard_Id/api/deleteComment.ts         | 11 ++++
 src/app/features/dashboard_Id/api/putCard.ts  |  5 +-
 .../api/useDeleteCommentMutation.ts           | 17 +++++++
 .../dashboard_Id/api/usePutCardMutation.ts    |  2 +-
 .../features/dashboard_Id/type/ApiResponse.ts |  3 ++
 src/app/shared/components/common/Avatar.tsx   |  4 +-
 9 files changed, 82 insertions(+), 37 deletions(-)
 create mode 100644 src/app/features/dashboard_Id/api/deleteComment.ts
 create mode 100644 src/app/features/dashboard_Id/api/useDeleteCommentMutation.ts
 create mode 100644 src/app/features/dashboard_Id/type/ApiResponse.ts

diff --git a/src/app/features/dashboard_Id/Card/cardModal/Comment.tsx b/src/app/features/dashboard_Id/Card/cardModal/Comment.tsx
index 519f0db..a681885 100644
--- a/src/app/features/dashboard_Id/Card/cardModal/Comment.tsx
+++ b/src/app/features/dashboard_Id/Card/cardModal/Comment.tsx
@@ -4,12 +4,14 @@ import { useState } from 'react'
 import { Avatar } from '@/app/shared/components/common/Avatar'
 import { useIsMobile } from '@/app/shared/hooks/useIsmobile'
 
+import { useDeleteCommentMutation } from '../../api/useDeleteCommentMutation'
 import { Comment as CommentType } from '../../type/Comment.type'
 import CommentModifyForm from './CommentModifyForm'
 
 export default function Comment({ comment }: { comment: CommentType }) {
   const isMobile = useIsMobile()
   const [modifyComment, setModifyComment] = useState(false)
+  const { mutate: deleteComment, isPending } = useDeleteCommentMutation()
 
   return (
     <div key={comment.id} className="flex gap-10 mobile:gap-8 tablet:gap-12">
@@ -26,7 +28,7 @@ export default function Comment({ comment }: { comment: CommentType }) {
           imageUrl={comment.author.profileImageUrl}
         />
       )}
-      <div className="flex flex-col gap-4">
+      <div className="flex flex-col gap-4 mobile:w-250">
         <div className="flex items-center gap-8">
           <span className="Text-black inline-block text-14 font-semibold">
             {comment.author.nickname}
@@ -36,14 +38,20 @@ export default function Comment({ comment }: { comment: CommentType }) {
           </span>
         </div>
         {modifyComment ? (
-          <CommentModifyForm commentId={comment.id} content={comment.content} />
+          <CommentModifyForm
+            onClose={() => setModifyComment(false)}
+            commentId={comment.id}
+            content={comment.content}
+          />
         ) : (
           <p className="text-14">{comment.content}</p>
         )}
-        <div className="Text-gray-light active:Text-btn flex gap-14 text-12 font-normal underline underline-offset-2 mobile:gap-8 tablet:gap-12">
-          <button onClick={() => setModifyComment(true)}>수정</button>
-          <button>삭제</button>
-        </div>
+        {!modifyComment && (
+          <div className="Text-gray-light active:Text-btn flex gap-14 text-12 font-normal underline underline-offset-2 mobile:gap-8 tablet:gap-12">
+            <button onClick={() => setModifyComment(true)}>수정</button>
+            <button onClick={() => deleteComment(comment.id)}>삭제</button>
+          </div>
+        )}
       </div>
     </div>
   )
diff --git a/src/app/features/dashboard_Id/Card/cardModal/CommentForm.tsx b/src/app/features/dashboard_Id/Card/cardModal/CommentForm.tsx
index bae8193..08cc66f 100644
--- a/src/app/features/dashboard_Id/Card/cardModal/CommentForm.tsx
+++ b/src/app/features/dashboard_Id/Card/cardModal/CommentForm.tsx
@@ -15,6 +15,7 @@ export default function CommentForm({
   const {
     register,
     handleSubmit,
+    reset,
     formState: { errors, isValid, isSubmitting },
   } = useForm<CommentFormData>({
     mode: 'onChange',
@@ -32,10 +33,14 @@ export default function CommentForm({
     }
     console.log(payload)
     createComment(payload)
+    reset()
   }
 
   return (
-    <form onSubmit={handleSubmit(onSubmit)} className="mb-24 w-450">
+    <form
+      onSubmit={handleSubmit(onSubmit)}
+      className="mb-24 w-450 mobile:w-295 tablet:w-420"
+    >
       <label
         htmlFor={'content'}
         className="Text-black mb-4 text-16 font-medium"
diff --git a/src/app/features/dashboard_Id/Card/cardModal/CommentModifyForm.tsx b/src/app/features/dashboard_Id/Card/cardModal/CommentModifyForm.tsx
index 3baaad7..03c1b1b 100644
--- a/src/app/features/dashboard_Id/Card/cardModal/CommentModifyForm.tsx
+++ b/src/app/features/dashboard_Id/Card/cardModal/CommentModifyForm.tsx
@@ -1,21 +1,21 @@
-import { Form, useForm } from 'react-hook-form'
+import { useForm } from 'react-hook-form'
 
-import { usePostCommentMutation } from '../../api/usePostCommentMutation'
 import { usePutCommentMutation } from '../../api/usePutCommentsMutation'
 import { PutCommentForm } from '../../type/CommentFormData.type'
-import Input from '../cardFormModals/input/Input'
 
 export default function CommentModifyForm({
+  onClose,
   commentId,
   content,
 }: {
+  onClose: () => void
   commentId: number
   content: string
 }) {
   const {
     register,
     handleSubmit,
-    setValue,
+
     formState: { errors, isValid, isSubmitting },
   } = useForm<PutCommentForm>({
     defaultValues: {
@@ -30,31 +30,35 @@ export default function CommentModifyForm({
     console.log(data)
     console.log(commentId)
     createComment({ payload: data, commentId }) //useMutation은 하나의 인자만 허용. 객체 하나로 묶어서 전달하는거 자꾸 까먹음..
+    onClose()
   }
 
   return (
-    <form onSubmit={handleSubmit(onSubmit)} className="mb-24 w-450">
-      <label
-        htmlFor={'content'}
-        className="Text-black mb-4 text-16 font-medium"
-      >
-        댓글
-      </label>
-      <div className="relative">
-        <textarea
-          {...register('content', {
-            required: '댓글 내용을 작성해주세요',
-          })}
-          className="Text-black h-110 w-full resize-none rounded-6 border border-[#D9D9D9] p-16 text-14 placeholder-gray-400 dark:border-[#747474]"
-          id="content"
-          placeholder={content ? content : '댓글 작성하기'}
-        />
-
+    <form
+      onSubmit={handleSubmit(onSubmit)}
+      className="relative flex gap-10 mobile:flex-col"
+    >
+      <textarea
+        {...register('content', {
+          required: '댓글 내용을 작성해주세요',
+        })}
+        className="Text-black h-110 w-450 resize-none rounded-6 border border-[#D9D9D9] p-16 text-14 placeholder-gray-400 dark:border-[#747474] mobile:w-250 mobile:w-295 tablet:w-420"
+        id="content"
+        placeholder={content ? content : '댓글 작성하기'}
+      />
+      <div className="flex flex-col mobile:flex-row">
+        <button
+          type="submit"
+          className="Text-gray-light h-28 w-50 rounded-4 border border-[#D9D9D9] py-5 text-center text-12 font-medium dark:border-[#747474]"
+          onClick={onClose}
+        >
+          취소
+        </button>
         <button
           type="submit"
-          className="Text-blue absolute bottom-19 right-12 h-32 w-83 rounded-4 border border-[#D9D9D9] py-7 text-center text-12 font-medium dark:border-[#747474]"
+          className="Text-blue h-28 w-50 rounded-4 border border-[#D9D9D9] py-5 text-center text-12 font-medium dark:border-[#747474]"
         >
-          입력
+          수정
         </button>
       </div>
     </form>
diff --git a/src/app/features/dashboard_Id/api/deleteComment.ts b/src/app/features/dashboard_Id/api/deleteComment.ts
new file mode 100644
index 0000000..edb504e
--- /dev/null
+++ b/src/app/features/dashboard_Id/api/deleteComment.ts
@@ -0,0 +1,11 @@
+import api from '@/app/shared/lib/testAxios'
+
+// import api from '@/app/shared/lib/axios'
+import { ApiResponse } from '../type/ApiResponse'
+
+export async function deleteComment(commentId: number): Promise<ApiResponse> {
+  const res = await api.delete(
+    `/${process.env.NEXT_PUBLIC_TEAM_ID}/comments/${commentId}`,
+  )
+  return res.data
+}
diff --git a/src/app/features/dashboard_Id/api/putCard.ts b/src/app/features/dashboard_Id/api/putCard.ts
index 3cd2f65..af7da3f 100644
--- a/src/app/features/dashboard_Id/api/putCard.ts
+++ b/src/app/features/dashboard_Id/api/putCard.ts
@@ -1,12 +1,9 @@
 import api from '@/app/shared/lib/testAxios'
 
+import { ApiResponse } from '../type/ApiResponse'
 // import api from '@/app/shared/lib/axios'
 import { CardModifyFormData } from '../type/CardFormData.type'
 
-interface ApiResponse {
-  message: string
-}
-
 export async function putCard(
   payload: CardModifyFormData,
   cardId: number,
diff --git a/src/app/features/dashboard_Id/api/useDeleteCommentMutation.ts b/src/app/features/dashboard_Id/api/useDeleteCommentMutation.ts
new file mode 100644
index 0000000..921b199
--- /dev/null
+++ b/src/app/features/dashboard_Id/api/useDeleteCommentMutation.ts
@@ -0,0 +1,17 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+
+import { deleteComment } from './deleteComment'
+
+export function useDeleteCommentMutation() {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: (commentId: number) => deleteComment(commentId),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['comments'] }) // 댓글 리스트 캐시 무효화
+    },
+    onError: (error) => {
+      console.error('댓글 삭제 실패:', error)
+    },
+  })
+}
diff --git a/src/app/features/dashboard_Id/api/usePutCardMutation.ts b/src/app/features/dashboard_Id/api/usePutCardMutation.ts
index 68312e7..1c82da8 100644
--- a/src/app/features/dashboard_Id/api/usePutCardMutation.ts
+++ b/src/app/features/dashboard_Id/api/usePutCardMutation.ts
@@ -5,7 +5,7 @@ import { CardModifyFormData } from '../type/CardFormData.type'
 import { postCard } from './postCard'
 import { putCard } from './putCard'
 
-// ✅ 카드 생성 모달에서 사용 (CreateCardForm.tsx)
+// ✅ 카드 수정 모달에서 사용 (CreateCardForm.tsx)
 export function usePutCardMutation() {
   const queryClient = useQueryClient()
 
diff --git a/src/app/features/dashboard_Id/type/ApiResponse.ts b/src/app/features/dashboard_Id/type/ApiResponse.ts
new file mode 100644
index 0000000..d6b3593
--- /dev/null
+++ b/src/app/features/dashboard_Id/type/ApiResponse.ts
@@ -0,0 +1,3 @@
+export interface ApiResponse {
+  message: string
+}
diff --git a/src/app/shared/components/common/Avatar.tsx b/src/app/shared/components/common/Avatar.tsx
index 056e2ae..eceb44a 100644
--- a/src/app/shared/components/common/Avatar.tsx
+++ b/src/app/shared/components/common/Avatar.tsx
@@ -51,7 +51,7 @@ export function Avatar({ size = 36, name, imageUrl }: AvatarProps) {
 
   return profileImageUrl.current ? (
     <div
-      className="relative overflow-hidden rounded-full"
+      className="relative shrink-0 overflow-hidden rounded-full"
       style={{ width: size, height: size }}
     >
       <Image
@@ -63,7 +63,7 @@ export function Avatar({ size = 36, name, imageUrl }: AvatarProps) {
     </div>
   ) : (
     <div
-      className="flex items-center justify-center rounded-full font-semibold text-white"
+      className="flex shrink-0 items-center justify-center rounded-full font-semibold text-white"
       style={{
         width: size,
         height: size,

From 136344995507121d9043bd95fe867990b01f868c Mon Sep 17 00:00:00 2001
From: jyn <spdlqjdkslel1226@naver.com>
Date: Sat, 21 Jun 2025 20:14:04 +0900
Subject: [PATCH 04/16] =?UTF-8?q?=E2=9C=A8=20feat:=20=EC=B9=B4=EB=93=9C=20?=
 =?UTF-8?q?=EC=82=AD=EC=A0=9C=20=EA=B8=B0=EB=8A=A5=20=EC=99=84=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../dashboard_Id/Card/cardModal/CardContent.tsx | 10 +++++++++-
 src/app/features/dashboard_Id/api/deleteCard.ts | 11 +++++++++++
 .../dashboard_Id/api/useDeleteCardMutation.ts   | 17 +++++++++++++++++
 3 files changed, 37 insertions(+), 1 deletion(-)
 create mode 100644 src/app/features/dashboard_Id/api/deleteCard.ts
 create mode 100644 src/app/features/dashboard_Id/api/useDeleteCardMutation.ts

diff --git a/src/app/features/dashboard_Id/Card/cardModal/CardContent.tsx b/src/app/features/dashboard_Id/Card/cardModal/CardContent.tsx
index e11266d..235028c 100644
--- a/src/app/features/dashboard_Id/Card/cardModal/CardContent.tsx
+++ b/src/app/features/dashboard_Id/Card/cardModal/CardContent.tsx
@@ -5,6 +5,7 @@ import { Avatar } from '@/app/shared/components/common/Avatar'
 import Dropdown from '@/app/shared/components/common/Dropdown/Dropdown'
 import { useIsMobile } from '@/app/shared/hooks/useIsmobile'
 
+import { useDeleteCardMutation } from '../../api/useDeleteCardMutation'
 import { Card } from '../../type/Card.type'
 import { Column } from '../../type/Column.type'
 import CreateCardModal from '../cardFormModals/CreateCardModal'
@@ -30,6 +31,7 @@ export default function CardContent({
   // const { title: columnTitle, id: columnId } = column
   // const currentColumn = { columnTitle, columnId }
   const isMobile = useIsMobile()
+  const { mutate: deleteCard, isPending } = useDeleteCardMutation()
 
   return (
     // <div className="relative">
@@ -64,7 +66,13 @@ export default function CardContent({
           >
             수정하기
           </button>
-          <button className="Text-black w-full whitespace-nowrap rounded-6 px-22 py-11 text-center text-14 font-medium hover:bg-[#dbf0ff] hover:text-[#228DFF] dark:hover:bg-[#02406d]">
+          <button
+            className="Text-black w-full whitespace-nowrap rounded-6 px-22 py-11 text-center text-14 font-medium hover:bg-[#dbf0ff] hover:text-[#228DFF] dark:hover:bg-[#02406d]"
+            onClick={(e) => {
+              e.stopPropagation()
+              deleteCard(card.id)
+            }}
+          >
             삭제하기
           </button>
         </Dropdown>
diff --git a/src/app/features/dashboard_Id/api/deleteCard.ts b/src/app/features/dashboard_Id/api/deleteCard.ts
new file mode 100644
index 0000000..e7cb706
--- /dev/null
+++ b/src/app/features/dashboard_Id/api/deleteCard.ts
@@ -0,0 +1,11 @@
+import api from '@/app/shared/lib/testAxios'
+
+// import api from '@/app/shared/lib/axios'
+import { ApiResponse } from '../type/ApiResponse'
+
+export async function deleteCard(cardId: number): Promise<ApiResponse> {
+  const res = await api.delete(
+    `/${process.env.NEXT_PUBLIC_TEAM_ID}/cards/${cardId}`,
+  )
+  return res.data
+}
diff --git a/src/app/features/dashboard_Id/api/useDeleteCardMutation.ts b/src/app/features/dashboard_Id/api/useDeleteCardMutation.ts
new file mode 100644
index 0000000..69aa2a0
--- /dev/null
+++ b/src/app/features/dashboard_Id/api/useDeleteCardMutation.ts
@@ -0,0 +1,17 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+
+import { deleteCard } from './deleteCard'
+
+export function useDeleteCardMutation() {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: (cardId: number) => deleteCard(cardId),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['columnId'] }) // 카드 목록 캐시 무효화
+    },
+    onError: (error) => {
+      console.error('카드 삭제 실패:', error)
+    },
+  })
+}

From 3bd923b6fbf31174161289e712cab725b4bda021 Mon Sep 17 00:00:00 2001
From: jyn <spdlqjdkslel1226@naver.com>
Date: Sat, 21 Jun 2025 20:55:41 +0900
Subject: [PATCH 05/16] =?UTF-8?q?=E2=9C=A8=20feat:=20=EB=AA=A8=EB=8B=AC=20?=
 =?UTF-8?q?=EC=9E=88=EC=9D=84=EB=95=8C=20=EB=B0=B0=EA=B2=BD=20=EC=8A=A4?=
 =?UTF-8?q?=ED=81=AC=EB=A1=A4=20=EB=A7=89=EB=8A=94=20useLockBodyScroll=20?=
 =?UTF-8?q?=ED=9B=85=20=EC=9E=91=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Card/cardFormModals/CreateCardModal.tsx      |  5 +++++
 .../dashboard_Id/Card/cardModal/CardModal.tsx    |  5 +++++
 src/app/shared/hooks/useLockBodyScroll.ts        | 16 ++++++++++++++++
 3 files changed, 26 insertions(+)
 create mode 100644 src/app/shared/hooks/useLockBodyScroll.ts

diff --git a/src/app/features/dashboard_Id/Card/cardFormModals/CreateCardModal.tsx b/src/app/features/dashboard_Id/Card/cardFormModals/CreateCardModal.tsx
index 2d8c868..66ffc66 100644
--- a/src/app/features/dashboard_Id/Card/cardFormModals/CreateCardModal.tsx
+++ b/src/app/features/dashboard_Id/Card/cardFormModals/CreateCardModal.tsx
@@ -1,10 +1,15 @@
 import { createPortal } from 'react-dom'
 
+import { useLockBodyScroll } from '@/app/shared/hooks/useLockBodyScroll'
+
 interface ModalProps {
   children: React.ReactNode
 }
 export default function CreateCardModal({ children }: ModalProps) {
   const modalRoot = document.getElementById('modal-root')
+
+  useLockBodyScroll()
+
   if (!modalRoot) return null
 
   return createPortal(
diff --git a/src/app/features/dashboard_Id/Card/cardModal/CardModal.tsx b/src/app/features/dashboard_Id/Card/cardModal/CardModal.tsx
index bef9e45..11b3353 100644
--- a/src/app/features/dashboard_Id/Card/cardModal/CardModal.tsx
+++ b/src/app/features/dashboard_Id/Card/cardModal/CardModal.tsx
@@ -1,10 +1,15 @@
 import { createPortal } from 'react-dom'
 
+import { useLockBodyScroll } from '@/app/shared/hooks/useLockBodyScroll'
+
 interface ModalProps {
   children: React.ReactNode
 }
 export default function CardModal({ children }: ModalProps) {
   const modalRoot = document.getElementById('modal-root')
+
+  useLockBodyScroll()
+
   if (!modalRoot) return null
 
   return createPortal(
diff --git a/src/app/shared/hooks/useLockBodyScroll.ts b/src/app/shared/hooks/useLockBodyScroll.ts
new file mode 100644
index 0000000..4f5c82c
--- /dev/null
+++ b/src/app/shared/hooks/useLockBodyScroll.ts
@@ -0,0 +1,16 @@
+import { useEffect } from 'react'
+
+// 모달 띄웠을때 배경 스크롤 막기
+// 사용법: 모달 생성 컴포넌트에 가서, useLockBodyScroll()
+// overflow: hidden을 적용해서 바디 스크롤 막음
+// 컴포넌트 언마운트 시 원래 상태로 복원
+export function useLockBodyScroll() {
+  useEffect(() => {
+    const originalStyle = window.getComputedStyle(document.body).overflow
+    document.body.style.overflow = 'hidden'
+
+    return () => {
+      document.body.style.overflow = originalStyle
+    }
+  }, [])
+}

From 1e0becfb736a0b660574a8104eddfd8e1985a5cd Mon Sep 17 00:00:00 2001
From: jyn <spdlqjdkslel1226@naver.com>
Date: Sun, 22 Jun 2025 00:03:05 +0900
Subject: [PATCH 06/16] =?UTF-8?q?=F0=9F=90=9B=F0=9F=90=B0:=20=EC=BD=94?=
 =?UTF-8?q?=EB=93=9C=EB=9E=98=EB=B9=97=20=EB=A6=AC=EB=B7=B0=20=EB=B0=98?=
 =?UTF-8?q?=EC=98=81,=20=EB=AE=A4=ED=85=8C=EC=9D=B4=EC=85=98=20=ED=95=A8?=
 =?UTF-8?q?=EC=88=98=EC=AA=BD=EC=97=90=20=20=ED=86=A0=EC=8A=A4=ED=8A=B8=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Card/cardModal/CardContent.tsx            | 33 ++++++-------------
 .../Card/cardModal/CommentModifyForm.tsx      |  4 +--
 .../dashboard_Id/Card/cardModal/Comments.tsx  |  7 ++--
 .../dashboard_Id/api/fetchComments.ts         |  4 ---
 .../dashboard_Id/api/useDeleteCardMutation.ts |  3 ++
 .../features/dashboard_Id/api/usePostCard.ts  |  4 +++
 .../dashboard_Id/api/usePutCardMutation.ts    |  3 ++
 .../api/usePutCommentsMutation.ts             |  4 +--
 .../dashboard_Id/api/useUploadCardImage.ts    |  4 ++-
 .../dashboard_Id/hooks/useInfiniteScroll.ts   |  0
 .../dashboard_Id/type/Comment.type.ts         |  2 +-
 src/app/shared/hooks/useIsmobile.ts           |  9 ++++-
 12 files changed, 40 insertions(+), 37 deletions(-)
 create mode 100644 src/app/features/dashboard_Id/hooks/useInfiniteScroll.ts

diff --git a/src/app/features/dashboard_Id/Card/cardModal/CardContent.tsx b/src/app/features/dashboard_Id/Card/cardModal/CardContent.tsx
index 235028c..3d56ae0 100644
--- a/src/app/features/dashboard_Id/Card/cardModal/CardContent.tsx
+++ b/src/app/features/dashboard_Id/Card/cardModal/CardContent.tsx
@@ -132,29 +132,16 @@ export default function CardContent({
                 </span>
                 {card.assignee && (
                   <div className="flex items-center gap-8">
-                    {isMobile ? (
-                      <>
-                        <Avatar
-                          size={24}
-                          name={card.assignee.nickname}
-                          imageUrl={card.assignee.profileImageUrl}
-                        />
-                        <span className="regular Text-black block pt-1 text-14 leading-none mobile:text-12">
-                          {card.assignee.nickname}
-                        </span>
-                      </>
-                    ) : (
-                      <>
-                        <Avatar
-                          size={32}
-                          name={card.assignee.nickname}
-                          imageUrl={card.assignee.profileImageUrl}
-                        />
-                        <span className="regular Text-black block pt-1 text-14 leading-none mobile:text-12">
-                          {card.assignee.nickname}
-                        </span>
-                      </>
-                    )}
+                    <>
+                      <Avatar
+                        size={isMobile ? 24 : 32}
+                        name={card.assignee.nickname}
+                        imageUrl={card.assignee.profileImageUrl}
+                      />
+                      <span className="regular Text-black block pt-1 text-14 leading-none mobile:text-12">
+                        {card.assignee.nickname}
+                      </span>
+                    </>
                   </div>
                 )}
               </div>
diff --git a/src/app/features/dashboard_Id/Card/cardModal/CommentModifyForm.tsx b/src/app/features/dashboard_Id/Card/cardModal/CommentModifyForm.tsx
index 03c1b1b..379012b 100644
--- a/src/app/features/dashboard_Id/Card/cardModal/CommentModifyForm.tsx
+++ b/src/app/features/dashboard_Id/Card/cardModal/CommentModifyForm.tsx
@@ -42,13 +42,13 @@ export default function CommentModifyForm({
         {...register('content', {
           required: '댓글 내용을 작성해주세요',
         })}
-        className="Text-black h-110 w-450 resize-none rounded-6 border border-[#D9D9D9] p-16 text-14 placeholder-gray-400 dark:border-[#747474] mobile:w-250 mobile:w-295 tablet:w-420"
+        className="Text-black h-110 w-450 resize-none rounded-6 border border-[#D9D9D9] p-16 text-14 placeholder-gray-400 dark:border-[#747474] mobile:w-250 tablet:w-420"
         id="content"
         placeholder={content ? content : '댓글 작성하기'}
       />
       <div className="flex flex-col mobile:flex-row">
         <button
-          type="submit"
+          type="button"
           className="Text-gray-light h-28 w-50 rounded-4 border border-[#D9D9D9] py-5 text-center text-12 font-medium dark:border-[#747474]"
           onClick={onClose}
         >
diff --git a/src/app/features/dashboard_Id/Card/cardModal/Comments.tsx b/src/app/features/dashboard_Id/Card/cardModal/Comments.tsx
index 9cbc7a6..5456354 100644
--- a/src/app/features/dashboard_Id/Card/cardModal/Comments.tsx
+++ b/src/app/features/dashboard_Id/Card/cardModal/Comments.tsx
@@ -1,5 +1,6 @@
 import { format } from 'date-fns'
 import { useState } from 'react'
+import { toast } from 'sonner'
 
 import { Avatar } from '@/app/shared/components/common/Avatar'
 
@@ -11,9 +12,9 @@ export default function Comments({ cardId }: { cardId: number }) {
   const { data, isLoading, error } = useCommentsQuery(cardId)
   const comments = data?.comments
 
-  //   if (isLoading) return <p>loading...</p>
-  //   if (error) return <p>error...{error.message}</p>
-
+  if (error) {
+    toast.error(error?.message || '문제가 발생했습니다.')
+  }
   return (
     <div className="flex w-450 flex-col gap-20">
       {comments?.map((comment: CommentType) => (
diff --git a/src/app/features/dashboard_Id/api/fetchComments.ts b/src/app/features/dashboard_Id/api/fetchComments.ts
index cadf7a8..dfb5499 100644
--- a/src/app/features/dashboard_Id/api/fetchComments.ts
+++ b/src/app/features/dashboard_Id/api/fetchComments.ts
@@ -4,10 +4,6 @@ import api from '@/app/shared/lib/testAxios'
 import { CommentsResponse } from '../type/Comment.type'
 
 export async function fetchComments(cardId: number): Promise<CommentsResponse> {
-  //   if (!cardId) {
-  //     throw new Error('cardId가 유효하지 않습니다.')
-  //   }
-
   const res = await api.get<CommentsResponse>(
     `/${process.env.NEXT_PUBLIC_TEAM_ID}/comments?size=10&cardId=${cardId}`,
   )
diff --git a/src/app/features/dashboard_Id/api/useDeleteCardMutation.ts b/src/app/features/dashboard_Id/api/useDeleteCardMutation.ts
index 69aa2a0..dd6f8db 100644
--- a/src/app/features/dashboard_Id/api/useDeleteCardMutation.ts
+++ b/src/app/features/dashboard_Id/api/useDeleteCardMutation.ts
@@ -1,4 +1,5 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { toast } from 'sonner'
 
 import { deleteCard } from './deleteCard'
 
@@ -8,9 +9,11 @@ export function useDeleteCardMutation() {
   return useMutation({
     mutationFn: (cardId: number) => deleteCard(cardId),
     onSuccess: () => {
+      toast.success('카드가 삭제되었습니다')
       queryClient.invalidateQueries({ queryKey: ['columnId'] }) // 카드 목록 캐시 무효화
     },
     onError: (error) => {
+      toast.error('카드 삭제를 실패했습니다.')
       console.error('카드 삭제 실패:', error)
     },
   })
diff --git a/src/app/features/dashboard_Id/api/usePostCard.ts b/src/app/features/dashboard_Id/api/usePostCard.ts
index 81f982e..ec809e4 100644
--- a/src/app/features/dashboard_Id/api/usePostCard.ts
+++ b/src/app/features/dashboard_Id/api/usePostCard.ts
@@ -1,5 +1,6 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query'
 import axios from 'axios'
+import { toast } from 'sonner'
 
 import { postCard } from './postCard'
 
@@ -10,9 +11,12 @@ export function usePostCard() {
   return useMutation({
     mutationFn: postCard,
     onSuccess: () => {
+      toast.success('할 일이 추가되었습니다.')
       queryClient.invalidateQueries({ queryKey: ['columnId'] }) //'columnId' 쿼리 invalidate - 카드 리스트가 stale 상태임을 알리고 다시 fetch 하도록 유도함
     },
     onError: (error) => {
+      toast.error('카드 생성 실패')
+
       if (axios.isAxiosError(error)) {
         const message = error.response?.data?.message
         console.error('카드 생성 실패:', message ?? '알 수 없는 에러')
diff --git a/src/app/features/dashboard_Id/api/usePutCardMutation.ts b/src/app/features/dashboard_Id/api/usePutCardMutation.ts
index 1c82da8..cd1ec3f 100644
--- a/src/app/features/dashboard_Id/api/usePutCardMutation.ts
+++ b/src/app/features/dashboard_Id/api/usePutCardMutation.ts
@@ -1,5 +1,6 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query'
 import axios from 'axios'
+import { toast } from 'sonner'
 
 import { CardModifyFormData } from '../type/CardFormData.type'
 import { postCard } from './postCard'
@@ -18,9 +19,11 @@ export function usePutCardMutation() {
       payload: CardModifyFormData
     }) => putCard(payload, cardId),
     onSuccess: () => {
+      toast.success('할 일 카드가 수정되었습니다.')
       queryClient.invalidateQueries({ queryKey: ['columnId'] }) //'columnId' 쿼리 invalidate - 카드가 stale 상태임을 알리고 다시 fetch 하도록 유도함
     },
     onError: (error) => {
+      toast.error('카드 수정 실패')
       if (axios.isAxiosError(error)) {
         const message = error.response?.data?.message
         console.error('카드 수정 실패:', message ?? '알 수 없는 에러')
diff --git a/src/app/features/dashboard_Id/api/usePutCommentsMutation.ts b/src/app/features/dashboard_Id/api/usePutCommentsMutation.ts
index 6d3764e..3d93c48 100644
--- a/src/app/features/dashboard_Id/api/usePutCommentsMutation.ts
+++ b/src/app/features/dashboard_Id/api/usePutCommentsMutation.ts
@@ -4,7 +4,7 @@ import axios from 'axios'
 import { CommentResponse, PutCommentForm } from '../type/CommentFormData.type'
 import { putComment } from './putComment'
 
-interface PostCommentArgs {
+interface PutCommentArgs {
   commentId: number
   payload: PutCommentForm
 }
@@ -13,7 +13,7 @@ interface PostCommentArgs {
 export function usePutCommentMutation() {
   const queryClient = useQueryClient()
 
-  return useMutation<CommentResponse, Error, PostCommentArgs>({
+  return useMutation<CommentResponse, Error, PutCommentArgs>({
     mutationFn: ({ payload, commentId }) => putComment(payload, commentId),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['comments'] }) //'columnId' 쿼리 invalidate - 카드가 stale 상태임을 알리고 다시 fetch 하도록 유도함
diff --git a/src/app/features/dashboard_Id/api/useUploadCardImage.ts b/src/app/features/dashboard_Id/api/useUploadCardImage.ts
index 580923b..4c1074f 100644
--- a/src/app/features/dashboard_Id/api/useUploadCardImage.ts
+++ b/src/app/features/dashboard_Id/api/useUploadCardImage.ts
@@ -10,10 +10,12 @@ export function useUploadCardImage() {
     mutationFn: ({ columnId, file }: { columnId: number; file: File }) =>
       postCardImages(columnId, file),
     onError: (error: AxiosError<{ message: string }>) => {
+      toast.error(
+        '이미지 업로드 중 오류가 발생했습니다. 크기가 작은 파일을 시도해주세요.',
+      )
       const message =
         error?.response?.data?.message ?? // 서버가 준 에러메세지
         '이미지 업로드 중 오류가 발생했습니다. 크기가 작은 파일을 시도해주세요.' // 없으면 이 내용으로
-      toast.error(message)
     },
   })
 }
diff --git a/src/app/features/dashboard_Id/hooks/useInfiniteScroll.ts b/src/app/features/dashboard_Id/hooks/useInfiniteScroll.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/features/dashboard_Id/type/Comment.type.ts b/src/app/features/dashboard_Id/type/Comment.type.ts
index 8eec086..96e597d 100644
--- a/src/app/features/dashboard_Id/type/Comment.type.ts
+++ b/src/app/features/dashboard_Id/type/Comment.type.ts
@@ -7,7 +7,7 @@ export interface Comment {
   id: number
   content: string
   createdAt: string
-  updatedAt: number
+  updatedAt: string
   cardId: number
   author: Auth
 }
diff --git a/src/app/shared/hooks/useIsmobile.ts b/src/app/shared/hooks/useIsmobile.ts
index 9e99100..f7ffff4 100644
--- a/src/app/shared/hooks/useIsmobile.ts
+++ b/src/app/shared/hooks/useIsmobile.ts
@@ -1,9 +1,16 @@
 import { useEffect, useState } from 'react'
 
 export function useIsMobile(breakpoint = 375) {
-  const [isMobile, setIsMobile] = useState(false)
+  const [isMobile, setIsMobile] = useState(() => {
+    if (typeof window !== 'undefined') {
+      return window.innerWidth <= breakpoint
+    }
+    return false
+  })
 
   useEffect(() => {
+    if (typeof window === 'undefined') return
+
     function handleResize() {
       setIsMobile(window.innerWidth <= breakpoint)
     }

From 4797529e22008c0e87433bd79765e59eff7ed280 Mon Sep 17 00:00:00 2001
From: jyn <spdlqjdkslel1226@naver.com>
Date: Sun, 22 Jun 2025 03:14:44 +0900
Subject: [PATCH 07/16] =?UTF-8?q?=E2=9C=A8=20feat:=20=EB=AC=B4=ED=95=9C?=
 =?UTF-8?q?=EC=8A=A4=ED=81=AC=EB=A1=A4-=EC=B9=B4=EB=93=9C=EB=A6=AC?=
 =?UTF-8?q?=EC=8A=A4=ED=8A=B8,=20=EC=B9=B4=EB=93=9C=EB=AA=A8=EB=8B=AC=20?=
 =?UTF-8?q?=EB=82=B4=20=EB=8C=93=EA=B8=80=EB=A6=AC=EC=8A=A4=ED=8A=B8?=
 =?UTF-8?q?=EC=97=90=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/features/dashboard_Id/Card/Card.tsx   |  1 -
 .../Card/cardModal/CardContent.tsx            | 18 +++----
 .../dashboard_Id/Card/cardModal/CardModal.tsx |  4 +-
 .../dashboard_Id/Card/cardModal/Comments.tsx  | 51 +++++++++++++------
 .../features/dashboard_Id/Column/Column.tsx   | 45 ++++++++++++----
 .../features/dashboard_Id/api/fetchCards.ts   | 22 ++++++--
 .../dashboard_Id/api/fetchComments.ts         | 20 ++++++--
 src/app/features/dashboard_Id/api/useCards.ts | 12 -----
 .../dashboard_Id/api/useCommentsQuery.ts      | 11 ----
 .../dashboard_Id/api/useInfiniteCards.ts      | 29 +++++++++++
 .../dashboard_Id/api/useInfiniteComments.ts   | 29 +++++++++++
 .../dashboard_Id/api/useUploadCardImage.ts    |  5 +-
 .../dashboard_Id/hooks/useInfiniteScroll.ts   | 39 ++++++++++++++
 13 files changed, 214 insertions(+), 72 deletions(-)
 delete mode 100644 src/app/features/dashboard_Id/api/useCards.ts
 delete mode 100644 src/app/features/dashboard_Id/api/useCommentsQuery.ts
 create mode 100644 src/app/features/dashboard_Id/api/useInfiniteCards.ts
 create mode 100644 src/app/features/dashboard_Id/api/useInfiniteComments.ts

diff --git a/src/app/features/dashboard_Id/Card/Card.tsx b/src/app/features/dashboard_Id/Card/Card.tsx
index 948bbb8..efb94f8 100644
--- a/src/app/features/dashboard_Id/Card/Card.tsx
+++ b/src/app/features/dashboard_Id/Card/Card.tsx
@@ -101,7 +101,6 @@ export default function Card({
         <CreateCardModal>
           <ModifyCardForm
             onClose={() => setOpenModifyCard(false)}
-            // columnId={column.id}
             currentColumn={currentColumn}
             card={card}
           />
diff --git a/src/app/features/dashboard_Id/Card/cardModal/CardContent.tsx b/src/app/features/dashboard_Id/Card/cardModal/CardContent.tsx
index 3d56ae0..20115e2 100644
--- a/src/app/features/dashboard_Id/Card/cardModal/CardContent.tsx
+++ b/src/app/features/dashboard_Id/Card/cardModal/CardContent.tsx
@@ -1,5 +1,5 @@
 import Image from 'next/image'
-import { useState } from 'react'
+import { useRef, useState } from 'react'
 
 import { Avatar } from '@/app/shared/components/common/Avatar'
 import Dropdown from '@/app/shared/components/common/Dropdown/Dropdown'
@@ -8,8 +8,6 @@ import { useIsMobile } from '@/app/shared/hooks/useIsmobile'
 import { useDeleteCardMutation } from '../../api/useDeleteCardMutation'
 import { Card } from '../../type/Card.type'
 import { Column } from '../../type/Column.type'
-import CreateCardModal from '../cardFormModals/CreateCardModal'
-import ModifyCardForm from '../cardFormModals/ModifyCardForm'
 import ColumnTitle from '../ColumnTitle'
 import Tags from '../Tags'
 import CommentForm from './CommentForm'
@@ -26,16 +24,16 @@ export default function CardContent({
   card: Card
   column: Column
 }) {
-  // const { id, imageUrl, title, tags, dueDate, assignee, description } = card
-  const [openModifyCard, setOpenModifyCard] = useState(false)
-  // const { title: columnTitle, id: columnId } = column
-  // const currentColumn = { columnTitle, columnId }
   const isMobile = useIsMobile()
   const { mutate: deleteCard, isPending } = useDeleteCardMutation()
 
+  const modalScrollRef = useRef<HTMLDivElement>(null)
+
   return (
-    // <div className="relative">
-    <div>
+    <div
+      className="BG-white relative max-h-764 min-h-764 w-730 overflow-auto overflow-y-scroll rounded-16 px-18 py-30 shadow-lg [mask-image:radial-gradient(white_100%,transparent_100%)] mobile:w-327 mobile:p-16 tablet:w-678 tablet:px-32 tablet:py-24"
+      ref={modalScrollRef}
+    >
       <h2 className="Text-black mb-24 text-24 font-bold mobile:mt-40 mobile:text-20">
         {card.title}
       </h2>
@@ -166,7 +164,7 @@ export default function CardContent({
         columnId={card.columnId}
         dashboardId={card.dashboardId}
       />
-      <Comments cardId={card.id} />
+      <Comments cardId={card.id} scrollRef={modalScrollRef} />
     </div>
   )
 }
diff --git a/src/app/features/dashboard_Id/Card/cardModal/CardModal.tsx b/src/app/features/dashboard_Id/Card/cardModal/CardModal.tsx
index 11b3353..c494164 100644
--- a/src/app/features/dashboard_Id/Card/cardModal/CardModal.tsx
+++ b/src/app/features/dashboard_Id/Card/cardModal/CardModal.tsx
@@ -14,9 +14,7 @@ export default function CardModal({ children }: ModalProps) {
 
   return createPortal(
     <div className="fixed inset-0 flex items-center justify-center bg-black/40">
-      <div className="BG-white relative max-h-764 min-h-764 w-730 overflow-auto overflow-y-scroll rounded-16 px-18 py-30 shadow-lg [mask-image:radial-gradient(white_100%,transparent_100%)] mobile:w-327 mobile:p-16 tablet:w-678 tablet:px-32 tablet:py-24">
-        {children}
-      </div>
+      <div>{children}</div>
     </div>,
     modalRoot,
   )
diff --git a/src/app/features/dashboard_Id/Card/cardModal/Comments.tsx b/src/app/features/dashboard_Id/Card/cardModal/Comments.tsx
index 5456354..ed8ae50 100644
--- a/src/app/features/dashboard_Id/Card/cardModal/Comments.tsx
+++ b/src/app/features/dashboard_Id/Card/cardModal/Comments.tsx
@@ -1,25 +1,46 @@
-import { format } from 'date-fns'
-import { useState } from 'react'
 import { toast } from 'sonner'
 
-import { Avatar } from '@/app/shared/components/common/Avatar'
-
-import useCommentsQuery from '../../api/useCommentsQuery'
+import { useInfiniteComments } from '../../api/useInfiniteComments'
+import { useInfiniteScroll } from '../../hooks/useInfiniteScroll'
 import { Comment as CommentType } from '../../type/Comment.type'
 import Comment from './Comment'
 
-export default function Comments({ cardId }: { cardId: number }) {
-  const { data, isLoading, error } = useCommentsQuery(cardId)
-  const comments = data?.comments
+export default function Comments({
+  cardId,
+  scrollRef,
+}: {
+  cardId: number
+  scrollRef: React.RefObject<HTMLElement>
+}) {
+  const {
+    data,
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage,
+    isLoading,
+    isError,
+  } = useInfiniteComments(cardId)
+
+  useInfiniteScroll(fetchNextPage, hasNextPage, isFetchingNextPage, scrollRef)
 
-  if (error) {
-    toast.error(error?.message || '문제가 발생했습니다.')
+  if (isError) {
+    toast.error('댓글 불러오기 실패')
   }
   return (
-    <div className="flex w-450 flex-col gap-20">
-      {comments?.map((comment: CommentType) => (
-        <Comment key={comment.id} comment={comment} />
-      ))}
-    </div>
+    <>
+      <div className="flex w-450 flex-col gap-20">
+        {data?.pages.map((page) =>
+          page?.comments.map((comment: CommentType) => (
+            <Comment key={comment.id} comment={comment} />
+          )),
+        )}
+      </div>
+      {/* 무한 스크롤 관련 */}
+      {isFetchingNextPage && (
+        <p className="text-center text-sm text-gray-400">
+          댓글을 불러오는 중...
+        </p>
+      )}
+    </>
   )
 }
diff --git a/src/app/features/dashboard_Id/Column/Column.tsx b/src/app/features/dashboard_Id/Column/Column.tsx
index 5e45ef7..6f4076c 100644
--- a/src/app/features/dashboard_Id/Column/Column.tsx
+++ b/src/app/features/dashboard_Id/Column/Column.tsx
@@ -1,18 +1,31 @@
 import Image from 'next/image'
 import { useState } from 'react'
+import { toast } from 'sonner'
 
 import { cn } from '@/app/shared/lib/cn'
 
 import { useCardMutation } from '../api/useCardMutation'
-import useCards from '../api/useCards'
+import { useInfiniteCards } from '../api/useInfiniteCards'
 import Card from '../Card/Card'
 import CreateCardForm from '../Card/cardFormModals/CreateCardForm'
 import CreateCardModal from '../Card/cardFormModals/CreateCardModal'
+import { useInfiniteScroll } from '../hooks/useInfiniteScroll'
 import { useDragStore } from '../store/useDragStore'
 import type { Column as ColumnType } from '../type/Column.type'
 export default function Column({ column }: { column: ColumnType }) {
   const { id, title }: { id: number; title: string } = column
-  const { data, isLoading, error } = useCards(id)
+
+  const {
+    data,
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage,
+    isLoading,
+    isError,
+  } = useInfiniteCards(id)
+
+  useInfiniteScroll(fetchNextPage, hasNextPage, isFetchingNextPage)
+
   const [isDraggingover, setDraggingover] = useState(false)
   const { draggingCard, clearDraggingCard } = useDragStore()
   const cardMutation = useCardMutation()
@@ -21,8 +34,8 @@ export default function Column({ column }: { column: ColumnType }) {
   const [openCreateColumn, setOpenCreateColumn] = useState(false) //page.tsx
   const [oepnConfigColumn, setConfigColumn] = useState(false)
 
-  if (isLoading) return <p>loading...</p>
-  if (error) return <p>error...{error.message}</p>
+  if (isLoading) return <p>loading...</p> // 스켈레톤 적용???⭐️
+  if (isError) return toast.error('할 일 불러오기 실패')
 
   return (
     <div
@@ -63,7 +76,7 @@ export default function Column({ column }: { column: ColumnType }) {
           <div className="BG-blue mb-7 mr-8 size-8 rounded-25"></div>
           <h2 className="mb-3 mr-12 h-21 text-18 font-bold">{title}</h2>
           <span className="Text-gray block size-20 rounded-4 bg-[#EEEEEE] pt-3 text-center text-12 font-medium leading-tight dark:bg-[#2E2E2E]">
-            {data?.totalCount}
+            {data?.pages[0]?.totalCount ?? 0}
           </span>
         </div>
         <Image
@@ -88,10 +101,11 @@ export default function Column({ column }: { column: ColumnType }) {
           />
         </div>
       </button>
-      {data?.cards.map((card) => (
-        <Card key={card.id} card={card} column={column} />
-      ))}
-
+      {data?.pages.map((page) =>
+        page.cards.map((card) => (
+          <Card key={card.id} card={card} column={column} />
+        )),
+      )}
       {/* 카드 생성 모달 */}
       {openCreateCard && (
         <CreateCardModal>
@@ -101,6 +115,19 @@ export default function Column({ column }: { column: ColumnType }) {
           />
         </CreateCardModal>
       )}
+
+      {/* 무한 스크롤 관련 */}
+      {isFetchingNextPage && (
+        <p className="text-center text-sm text-gray-400">
+          카드를 불러오는 중...
+        </p>
+      )}
+
+      {!hasNextPage && (
+        <p className="py-4 text-center text-sm text-gray-300">
+          모든 카드를 불러왔습니다
+        </p>
+      )}
     </div>
   )
 }
diff --git a/src/app/features/dashboard_Id/api/fetchCards.ts b/src/app/features/dashboard_Id/api/fetchCards.ts
index ab717ad..fe04c9c 100644
--- a/src/app/features/dashboard_Id/api/fetchCards.ts
+++ b/src/app/features/dashboard_Id/api/fetchCards.ts
@@ -3,12 +3,24 @@ import api from '@/app/shared/lib/testAxios'
 // import api from '@/app/shared/lib/axios'
 import { CardResponse } from '../type/Card.type'
 
-export async function fetchCards(
-  columnId: number,
-  size: number = 10,
-): Promise<CardResponse> {
+export async function fetchCards({
+  columnId,
+  size = 6,
+  cursorId,
+}: {
+  columnId: number
+  size?: number
+  cursorId?: number | null
+}): Promise<CardResponse> {
   const res = await api.get<CardResponse>(
-    `/${process.env.NEXT_PUBLIC_TEAM_ID}/cards?size=${size}&columnId=${columnId}`,
+    `/${process.env.NEXT_PUBLIC_TEAM_ID}/cards`,
+    {
+      params: {
+        columnId,
+        size,
+        ...(cursorId ? { cursorId } : {}), // 첫 페이지는 cursor 생략
+      },
+    },
   )
   return res.data
 }
diff --git a/src/app/features/dashboard_Id/api/fetchComments.ts b/src/app/features/dashboard_Id/api/fetchComments.ts
index dfb5499..dfa2e39 100644
--- a/src/app/features/dashboard_Id/api/fetchComments.ts
+++ b/src/app/features/dashboard_Id/api/fetchComments.ts
@@ -3,10 +3,24 @@ import api from '@/app/shared/lib/testAxios'
 // import api from '@/app/shared/lib/axios'
 import { CommentsResponse } from '../type/Comment.type'
 
-export async function fetchComments(cardId: number): Promise<CommentsResponse> {
+export async function fetchComments({
+  cardId,
+  size = 5,
+  cursorId,
+}: {
+  cardId: number
+  size?: number
+  cursorId?: number | null
+}): Promise<CommentsResponse> {
   const res = await api.get<CommentsResponse>(
-    `/${process.env.NEXT_PUBLIC_TEAM_ID}/comments?size=10&cardId=${cardId}`,
+    `/${process.env.NEXT_PUBLIC_TEAM_ID}/comments`,
+    {
+      params: {
+        size,
+        ...(cursorId ? { cursorId } : {}), // 첫 페이지는 cursor 생략
+        cardId,
+      },
+    },
   )
-
   return res.data
 }
diff --git a/src/app/features/dashboard_Id/api/useCards.ts b/src/app/features/dashboard_Id/api/useCards.ts
deleted file mode 100644
index 1edb746..0000000
--- a/src/app/features/dashboard_Id/api/useCards.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-//size일단 10으로 하고, 나중에 커서아이디 받아서 무한 스크롤 구현해야 함.
-import { useQuery } from '@tanstack/react-query'
-
-import { CardResponse } from '../type/Card.type'
-import { fetchCards } from './fetchCards'
-
-export default function useCards(columnId: number) {
-  return useQuery<CardResponse>({
-    queryKey: ['columnId', columnId],
-    queryFn: () => fetchCards(columnId),
-  })
-}
diff --git a/src/app/features/dashboard_Id/api/useCommentsQuery.ts b/src/app/features/dashboard_Id/api/useCommentsQuery.ts
deleted file mode 100644
index 2a1c28f..0000000
--- a/src/app/features/dashboard_Id/api/useCommentsQuery.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { useQuery } from '@tanstack/react-query'
-
-import { CommentsResponse } from '../type/Comment.type'
-import { fetchComments } from './fetchComments'
-
-export default function useCommentsQuery(cardId: number) {
-  return useQuery<CommentsResponse>({
-    queryKey: ['comments', cardId],
-    queryFn: () => fetchComments(cardId),
-  })
-}
diff --git a/src/app/features/dashboard_Id/api/useInfiniteCards.ts b/src/app/features/dashboard_Id/api/useInfiniteCards.ts
new file mode 100644
index 0000000..7b92d22
--- /dev/null
+++ b/src/app/features/dashboard_Id/api/useInfiniteCards.ts
@@ -0,0 +1,29 @@
+// //size일단 10으로 하고, 나중에 커서아이디 받아서 무한 스크롤 구현해야 함.
+// import { useQuery } from '@tanstack/react-query'
+
+// import { CardResponse } from '../type/Card.type'
+// import { fetchCards } from './fetchCards'
+
+// export default function useCards(columnId: number) {
+//   return useQuery<CardResponse>({
+//     queryKey: ['columnId', columnId],
+//     queryFn: () => fetchCards(columnId),
+//   })
+// }
+import { useInfiniteQuery } from '@tanstack/react-query'
+
+import { CardResponse } from '../type/Card.type'
+import { fetchCards } from './fetchCards'
+
+export function useInfiniteCards(columnId: number) {
+  return useInfiniteQuery<CardResponse>({
+    queryKey: ['cards', columnId],
+    queryFn: ({ pageParam = null }) =>
+      fetchCards({ columnId, cursorId: pageParam as number }),
+    getNextPageParam: (lastPage) => {
+      // 마지막 카드의 id를 다음 cursor로 사용
+      return lastPage.cards.length === 0 ? undefined : lastPage.cursorId
+    },
+    initialPageParam: null,
+  })
+}
diff --git a/src/app/features/dashboard_Id/api/useInfiniteComments.ts b/src/app/features/dashboard_Id/api/useInfiniteComments.ts
new file mode 100644
index 0000000..433a7f2
--- /dev/null
+++ b/src/app/features/dashboard_Id/api/useInfiniteComments.ts
@@ -0,0 +1,29 @@
+// import { useQuery } from '@tanstack/react-query'
+
+// import { CommentsResponse } from '../type/Comment.type'
+// import { fetchComments } from './fetchComments'
+
+// export default function useCommentsQuery(cardId: number) {
+//   return useQuery<CommentsResponse>({
+//     queryKey: ['comments', cardId],
+//     queryFn: () => fetchComments(cardId),
+//   })
+// }
+
+import { useInfiniteQuery } from '@tanstack/react-query'
+
+import { CommentsResponse } from '../type/Comment.type'
+import { fetchComments } from './fetchComments'
+
+export function useInfiniteComments(cardId: number) {
+  return useInfiniteQuery<CommentsResponse>({
+    queryKey: ['comments', cardId],
+    queryFn: ({ pageParam = null }) =>
+      fetchComments({ cardId, cursorId: pageParam as number }),
+    getNextPageParam: (lastPage) => {
+      // 마지막 카드의 id를 다음 cursor로 사용
+      return lastPage.comments.length === 0 ? undefined : lastPage.cursorId
+    },
+    initialPageParam: null,
+  })
+}
diff --git a/src/app/features/dashboard_Id/api/useUploadCardImage.ts b/src/app/features/dashboard_Id/api/useUploadCardImage.ts
index 4c1074f..ebd1480 100644
--- a/src/app/features/dashboard_Id/api/useUploadCardImage.ts
+++ b/src/app/features/dashboard_Id/api/useUploadCardImage.ts
@@ -13,9 +13,8 @@ export function useUploadCardImage() {
       toast.error(
         '이미지 업로드 중 오류가 발생했습니다. 크기가 작은 파일을 시도해주세요.',
       )
-      const message =
-        error?.response?.data?.message ?? // 서버가 준 에러메세지
-        '이미지 업로드 중 오류가 발생했습니다. 크기가 작은 파일을 시도해주세요.' // 없으면 이 내용으로
+      const message = error?.response?.data?.message // 서버가 준 에러메세지
+      console.error('이미지 업로드 실패:', message ?? '알 수 없는 에러')
     },
   })
 }
diff --git a/src/app/features/dashboard_Id/hooks/useInfiniteScroll.ts b/src/app/features/dashboard_Id/hooks/useInfiniteScroll.ts
index e69de29..e86b9b2 100644
--- a/src/app/features/dashboard_Id/hooks/useInfiniteScroll.ts
+++ b/src/app/features/dashboard_Id/hooks/useInfiniteScroll.ts
@@ -0,0 +1,39 @@
+import { useCallback, useEffect } from 'react'
+
+/**
+ * 범용 무한스크롤 훅
+ *
+ * @param fetchNextPage - 다음 페이지를 가져오는 함수
+ * @param hasNextPage - 다음 페이지가 있는지 여부
+ * @param isFetchingNextPage - 다음 페이지를 가져오는 중인지 여부
+ * @param targetRef - (선택) 스크롤 대상이 되는 ref (모달 등 특정 영역에만 작동하고 싶을 때)
+ */
+export const useInfiniteScroll = (
+  fetchNextPage: () => void,
+  hasNextPage: boolean,
+  isFetchingNextPage: boolean,
+  targetRef?: React.RefObject<HTMLElement>, // optional
+) => {
+  const handleScroll = useCallback(() => {
+    const el = targetRef?.current ?? window
+    const scrollTop = targetRef?.current?.scrollTop ?? window.scrollY
+    const scrollHeight =
+      targetRef?.current?.scrollHeight ?? document.documentElement.scrollHeight
+    const clientHeight = targetRef?.current?.clientHeight ?? window.innerHeight
+
+    const scrollPercentage = (scrollTop + clientHeight) / scrollHeight
+    const isNearBottom = scrollPercentage >= 0.8
+
+    if (isNearBottom && hasNextPage && !isFetchingNextPage) {
+      fetchNextPage()
+    }
+  }, [fetchNextPage, hasNextPage, isFetchingNextPage, targetRef])
+
+  useEffect(() => {
+    const el = targetRef?.current ?? window
+    el.addEventListener('scroll', handleScroll, { passive: true })
+    return () => {
+      el.removeEventListener('scroll', handleScroll)
+    }
+  }, [handleScroll, targetRef])
+}

From fe9355f77a920bb421f007e4e5aca8af37d55402 Mon Sep 17 00:00:00 2001
From: jyn <spdlqjdkslel1226@naver.com>
Date: Sun, 22 Jun 2025 03:19:41 +0900
Subject: [PATCH 08/16] =?UTF-8?q?=F0=9F=90=9B=20fix:=20=EC=A3=BC=EC=84=9D?=
 =?UTF-8?q?=20=EC=A0=9C=EA=B1=B0=20=EB=B0=8F=20=EC=BF=BC=EB=A6=AC=ED=82=A4?=
 =?UTF-8?q?=20=EC=A0=95=EC=A0=95(-->=EC=BA=90=EC=8B=9C=20=EC=97=85?=
 =?UTF-8?q?=EB=8D=B0=EC=9D=B4=ED=8A=B8=20=EB=8B=A4=EC=8B=9C=20=EC=A0=95?=
 =?UTF-8?q?=EC=83=81=EC=A0=81=EC=9C=BC=EB=A1=9C=20=EC=9E=91=EB=8F=99)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../features/dashboard_Id/api/useInfiniteCards.ts  | 14 +-------------
 .../dashboard_Id/api/useInfiniteComments.ts        | 12 ------------
 .../dashboard_Id/api/usePutCardMutation.ts         |  1 -
 3 files changed, 1 insertion(+), 26 deletions(-)

diff --git a/src/app/features/dashboard_Id/api/useInfiniteCards.ts b/src/app/features/dashboard_Id/api/useInfiniteCards.ts
index 7b92d22..2c14bd3 100644
--- a/src/app/features/dashboard_Id/api/useInfiniteCards.ts
+++ b/src/app/features/dashboard_Id/api/useInfiniteCards.ts
@@ -1,15 +1,3 @@
-// //size일단 10으로 하고, 나중에 커서아이디 받아서 무한 스크롤 구현해야 함.
-// import { useQuery } from '@tanstack/react-query'
-
-// import { CardResponse } from '../type/Card.type'
-// import { fetchCards } from './fetchCards'
-
-// export default function useCards(columnId: number) {
-//   return useQuery<CardResponse>({
-//     queryKey: ['columnId', columnId],
-//     queryFn: () => fetchCards(columnId),
-//   })
-// }
 import { useInfiniteQuery } from '@tanstack/react-query'
 
 import { CardResponse } from '../type/Card.type'
@@ -17,7 +5,7 @@ import { fetchCards } from './fetchCards'
 
 export function useInfiniteCards(columnId: number) {
   return useInfiniteQuery<CardResponse>({
-    queryKey: ['cards', columnId],
+    queryKey: ['columnId', columnId],
     queryFn: ({ pageParam = null }) =>
       fetchCards({ columnId, cursorId: pageParam as number }),
     getNextPageParam: (lastPage) => {
diff --git a/src/app/features/dashboard_Id/api/useInfiniteComments.ts b/src/app/features/dashboard_Id/api/useInfiniteComments.ts
index 433a7f2..2efef41 100644
--- a/src/app/features/dashboard_Id/api/useInfiniteComments.ts
+++ b/src/app/features/dashboard_Id/api/useInfiniteComments.ts
@@ -1,15 +1,3 @@
-// import { useQuery } from '@tanstack/react-query'
-
-// import { CommentsResponse } from '../type/Comment.type'
-// import { fetchComments } from './fetchComments'
-
-// export default function useCommentsQuery(cardId: number) {
-//   return useQuery<CommentsResponse>({
-//     queryKey: ['comments', cardId],
-//     queryFn: () => fetchComments(cardId),
-//   })
-// }
-
 import { useInfiniteQuery } from '@tanstack/react-query'
 
 import { CommentsResponse } from '../type/Comment.type'
diff --git a/src/app/features/dashboard_Id/api/usePutCardMutation.ts b/src/app/features/dashboard_Id/api/usePutCardMutation.ts
index cd1ec3f..cf50064 100644
--- a/src/app/features/dashboard_Id/api/usePutCardMutation.ts
+++ b/src/app/features/dashboard_Id/api/usePutCardMutation.ts
@@ -3,7 +3,6 @@ import axios from 'axios'
 import { toast } from 'sonner'
 
 import { CardModifyFormData } from '../type/CardFormData.type'
-import { postCard } from './postCard'
 import { putCard } from './putCard'
 
 // ✅ 카드 수정 모달에서 사용 (CreateCardForm.tsx)

From 5101caa89e288554b058b6945e635a1bee244fa5 Mon Sep 17 00:00:00 2001
From: jyn <spdlqjdkslel1226@naver.com>
Date: Sun, 22 Jun 2025 04:24:26 +0900
Subject: [PATCH 09/16] =?UTF-8?q?=F0=9F=8E=A8=20styel:=20=ED=8F=BC=20?=
 =?UTF-8?q?=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=88=98=EC=A0=95=EC=A4=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../dashboard_Id/Card/cardFormModals/CreateCardForm.tsx   | 2 +-
 .../dashboard_Id/Card/cardFormModals/CreateCardModal.tsx  | 2 +-
 .../dashboard_Id/Card/cardFormModals/ModifyCardForm.tsx   | 8 ++++----
 src/app/globals.css                                       | 7 +++++--
 4 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/app/features/dashboard_Id/Card/cardFormModals/CreateCardForm.tsx b/src/app/features/dashboard_Id/Card/cardFormModals/CreateCardForm.tsx
index 2ab4290..d6f95fc 100644
--- a/src/app/features/dashboard_Id/Card/cardFormModals/CreateCardForm.tsx
+++ b/src/app/features/dashboard_Id/Card/cardFormModals/CreateCardForm.tsx
@@ -126,7 +126,7 @@ export default function CreateCardForm({
                 width={26}
                 height={24}
                 className={cn(
-                  'pointer-events-none absolute right-0 top-1/2 -translate-y-1/2 transition-transform duration-300',
+                  'pointer-events-none absolute right-0 top-1/2 -translate-y-1/2 transition-transform duration-300 mobile:right-8',
                   isOpen && 'rotate-180',
                 )}
               />
diff --git a/src/app/features/dashboard_Id/Card/cardFormModals/CreateCardModal.tsx b/src/app/features/dashboard_Id/Card/cardFormModals/CreateCardModal.tsx
index 66ffc66..affa568 100644
--- a/src/app/features/dashboard_Id/Card/cardFormModals/CreateCardModal.tsx
+++ b/src/app/features/dashboard_Id/Card/cardFormModals/CreateCardModal.tsx
@@ -14,7 +14,7 @@ export default function CreateCardModal({ children }: ModalProps) {
 
   return createPortal(
     <div className="fixed inset-0 flex items-center justify-center bg-black/40">
-      <div className="BG-white h-970 w-584 overflow-y-scroll rounded-16 p-32 shadow-lg [mask-image:radial-gradient(white_100%,transparent_100%)]">
+      <div className="BG-white h-970 w-584 overflow-y-scroll rounded-16 p-32 shadow-lg [mask-image:radial-gradient(white_100%,transparent_100%)] mobile:h-766 mobile:w-327 mobile:px-16 mobile:py-24">
         {children}
       </div>
     </div>,
diff --git a/src/app/features/dashboard_Id/Card/cardFormModals/ModifyCardForm.tsx b/src/app/features/dashboard_Id/Card/cardFormModals/ModifyCardForm.tsx
index 14dbcd3..eb7b032 100644
--- a/src/app/features/dashboard_Id/Card/cardFormModals/ModifyCardForm.tsx
+++ b/src/app/features/dashboard_Id/Card/cardFormModals/ModifyCardForm.tsx
@@ -131,7 +131,7 @@ export default function ModifyCardForm({
     >
       <h2 className="Text-black text-24 font-bold">할 일 수정</h2>
 
-      <div className="flex gap-32">
+      <div className="flex gap-32 mobile:flex-col">
         {/* 컬럼 선택 */}
         <Controller
           name="columnId"
@@ -144,13 +144,13 @@ export default function ModifyCardForm({
                   onClick={() => setIsOpenColumn((prev) => !prev)}
                   value={selectedColumn?.columnTitle ?? ''}
                   readOnly
-                  className="Input-readOnly w-217"
+                  className="Input-readOnly-217"
                   id="columnId"
                   type="text"
                   placeholder={currentColumn.columnTitle}
                 />
                 {/* 인풋에 보이는 선택된 컬럼 & 오른쪽 화살표 */}
-                <div className="absolute left-16 top-1/2 -translate-y-1/2">
+                <div className="absolute left-16 top-1/2 -translate-y-1/2 mobile:left-11">
                   <ColumnTitle title={selectedColumn.columnTitle} />
                 </div>
                 <Image
@@ -187,7 +187,7 @@ export default function ModifyCardForm({
                   onClick={() => setIsOpen((prev) => !prev)}
                   // value={selectedAssignee?.nickname ?? ''}
                   readOnly
-                  className="Input-readOnly w-217"
+                  className="Input-readOnly-217"
                   id="assigneeUserId"
                   type="text"
                 />
diff --git a/src/app/globals.css b/src/app/globals.css
index e4d5a47..678f151 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -104,8 +104,11 @@ body {
 }
 
 .Input {
-  @apply w-520 rounded-6 border border-[#D9D9D9] px-16 py-11 pt-14 text-14 text-[#333236] placeholder-gray-400 focus:border-[#44aeff] focus:outline-none dark:border-[#747474] dark:text-[#FFFFFF] dark:focus:border-[#3474a5];
+  @apply w-520 rounded-6 border border-[#D9D9D9] px-16 py-11 pt-14 text-14 text-[#333236] placeholder-gray-400 focus:border-[#44aeff] focus:outline-none dark:border-[#747474] dark:text-[#FFFFFF] dark:focus:border-[#3474a5] mobile:w-280;
 }
 .Input-readOnly {
-  @apply w-520 cursor-pointer rounded-6 border border-[#D9D9D9] px-16 py-11 pt-14 text-14 text-[#333236] placeholder-gray-400 caret-transparent focus:border-[#44aeff] focus:outline-none dark:border-[#747474] dark:text-[#FFFFFF] dark:focus:border-[#3474a5];
+  @apply w-520 cursor-pointer rounded-6 border border-[#D9D9D9] px-16 py-11 pt-14 text-14 text-[#333236] placeholder-gray-400 caret-transparent focus:border-[#44aeff] focus:outline-none dark:border-[#747474] dark:text-[#FFFFFF] dark:focus:border-[#3474a5] mobile:w-280;
+}
+.Input-readOnly-217 {
+  @apply w-217 cursor-pointer rounded-6 border border-[#D9D9D9] px-16 py-11 pt-14 text-14 text-[#333236] placeholder-gray-400 caret-transparent focus:border-[#44aeff] focus:outline-none dark:border-[#747474] dark:text-[#FFFFFF] dark:focus:border-[#3474a5] mobile:w-280;
 }

From aa2232d8a0f8b9dfd8477c0ff2daa9ae6becb1dd Mon Sep 17 00:00:00 2001
From: jyn <spdlqjdkslel1226@naver.com>
Date: Sun, 22 Jun 2025 11:25:43 +0900
Subject: [PATCH 10/16] =?UTF-8?q?=F0=9F=8E=A8=20style:=20=EB=B0=98?=
 =?UTF-8?q?=EC=9D=91=ED=98=95=20=EC=9E=91=EC=97=85=EC=A4=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/images/modify-pen.svg                  |   3 +
 src/app/dashboard/[id]/page.tsx               |   6 +-
 src/app/features/dashboard_Id/Card/Card.tsx   |  93 ++++++++-------
 .../features/dashboard_Id/Card/TagsInCard.tsx |  45 +++++++
 .../Card/cardFormModals/AssigneeList.tsx      |   5 +-
 .../Card/cardFormModals/ColumnList.tsx        |   2 +-
 .../Card/cardFormModals/CreateCardForm.tsx    |  10 +-
 .../Card/cardFormModals/ModifyCardForm.tsx    |  95 ++++++++-------
 .../Card/cardModal/CardContent.tsx            |   4 +
 .../Card/cardModal/CardContentCopy.tsx        | 110 ------------------
 .../features/dashboard_Id/Column/Column.tsx   |   2 +-
 src/app/shared/components/ThemeToggle.tsx     |   2 +-
 12 files changed, 171 insertions(+), 206 deletions(-)
 create mode 100644 public/images/modify-pen.svg
 create mode 100644 src/app/features/dashboard_Id/Card/TagsInCard.tsx
 delete mode 100644 src/app/features/dashboard_Id/Card/cardModal/CardContentCopy.tsx

diff --git a/public/images/modify-pen.svg b/public/images/modify-pen.svg
new file mode 100644
index 0000000..0d89c27
--- /dev/null
+++ b/public/images/modify-pen.svg
@@ -0,0 +1,3 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.50481 25.6249C5.18471 25.6249 4.91639 25.5167 4.69984 25.3001C4.48328 25.0836 4.375 24.8152 4.375 24.4951V22.3293C4.375 22.0245 4.4335 21.7339 4.5505 21.4577C4.66748 21.1814 4.82853 20.9407 5.03366 20.7356L20.863 4.91347C21.052 4.74178 21.2607 4.60911 21.4891 4.51547C21.7175 4.42182 21.957 4.375 22.2077 4.375C22.4583 4.375 22.701 4.41948 22.936 4.50844C23.1709 4.59738 23.3789 4.73879 23.56 4.93269L25.0865 6.47834C25.2804 6.65943 25.4186 6.8678 25.5011 7.10347C25.5837 7.33912 25.6249 7.57476 25.6249 7.81041C25.6249 8.06176 25.582 8.30164 25.4962 8.53003C25.4103 8.75845 25.2738 8.96717 25.0865 9.15619L9.26434 24.9663C9.05922 25.1714 8.81853 25.3325 8.54228 25.4494C8.26601 25.5664 7.97546 25.6249 7.67062 25.6249H5.50481ZM21.9399 9.61775L23.75 7.81966L22.1803 6.24997L20.3822 8.06006L21.9399 9.61775Z" fill="white"/>
+</svg>
diff --git a/src/app/dashboard/[id]/page.tsx b/src/app/dashboard/[id]/page.tsx
index 0e79228..bb2a373 100644
--- a/src/app/dashboard/[id]/page.tsx
+++ b/src/app/dashboard/[id]/page.tsx
@@ -141,14 +141,14 @@ export default function DashboardID() {
     <>
       <div className="select-none">
         <div
-          className="flex min-h-[calc(100vh-100px)] mobile:flex-row tablet:flex-col"
+          className="flex min-h-[calc(100vh-100px)] mobile:flex-col tablet:flex-col"
           onTouchStart={handleTouchStart}
           onTouchMove={handleTouchMove}
           onTouchEnd={handleTouchEnd}
         >
           {columns?.map((column) => <Column key={column.id} column={column} />)}
-          <div className="BG-gray Border-column p-20">
-            <button className="BG-white Border-btn flex items-center gap-12 whitespace-nowrap rounded-8 px-85 pb-20 pt-24 text-18 font-bold">
+          <div className="BG-gray Border-column p-20 mobile:w-308 mobile:border-t-2 tablet:w-584 tablet:border-t-2">
+            <button className="BG-white Border-btn m flex justify-center gap-12 whitespace-nowrap rounded-8 px-85 pb-20 pt-24 text-18 font-bold mobile:flex mobile:w-full mobile:justify-center mobile:px-50 mobile:py-20 mobile:text-16 tablet:flex tablet:w-full tablet:items-center">
               <span>새로운 컬럼 추가하기</span>
               <div className="flex h-22 w-22 items-center justify-center rounded-4 bg-blue-100">
                 <Image
diff --git a/src/app/features/dashboard_Id/Card/Card.tsx b/src/app/features/dashboard_Id/Card/Card.tsx
index efb94f8..9616e4b 100644
--- a/src/app/features/dashboard_Id/Card/Card.tsx
+++ b/src/app/features/dashboard_Id/Card/Card.tsx
@@ -10,7 +10,8 @@ import CreateCardModal from './cardFormModals/CreateCardModal'
 import ModifyCardForm from './cardFormModals/ModifyCardForm'
 import CardContent from './cardModal/CardContent'
 import CardModal from './cardModal/CardModal'
-import Tags from './Tags'
+// import Tags from './Tags'
+import TagsInCard from './TagsInCard'
 
 export default function Card({
   card,
@@ -36,54 +37,58 @@ export default function Card({
       className="BG-white Border-section relative rounded-6 border-solid px-20 py-16"
       onClick={() => setOpenCard(true)}
     >
-      {imageUrl && (
-        <Image
-          src={imageUrl}
-          alt="카드 이미지"
-          width={400}
-          height={600}
-          className="mb-15 h-auto w-full rounded-6 object-contain"
-          priority
-          draggable="false"
-        />
-      )}
-
-      {/* 할 일 제목 */}
-      <h3 className="Text-black mb-10 text-16 font-medium leading-relaxed">
-        {title}
-      </h3>
-
-      {/* 태그 */}
-      {tags.length !== 0 && <Tags tags={tags} />}
-
-      {/* 마감일 & 담당자 */}
-      <div className="mt-8 flex content-around items-center">
-        {/* :마감일 */}
-        <div className="flex size-full items-center gap-6">
+      <div className="mobile:flex-col tablet:flex tablet:w-full tablet:items-center tablet:justify-start tablet:gap-20">
+        {imageUrl && (
           <Image
-            src={'/images/calendar.svg'}
-            alt="마감일"
-            width={18}
-            height={18}
+            src={imageUrl}
+            alt="카드 이미지"
+            width={400}
+            height={600}
+            className="mb-15 h-auto w-full rounded-6 object-contain mobile:mb-4 mobile:h-auto mobile:w-260 tablet:m-0 tablet:h-68 tablet:max-w-fit"
+            priority
+            draggable="false"
           />
-          {dueDate && (
-            <div className="Text-gray mt-4 text-12 font-medium leading-none">
-              {dueDate.split(' ')[0]}
+        )}
+        <div>
+          {/* 할 일 제목 */}
+          <h3 className="Text-black mb-10 text-16 font-medium leading-relaxed mobile:mb-6">
+            {title}
+          </h3>
+
+          <div className="tablet:flex tablet:flex-wrap tablet:items-center">
+            {/* 태그 */}
+            {tags.length !== 0 && <TagsInCard tags={tags} />}
+
+            {/* 마감일 & 담당자 */}
+            <div className="mt-8 flex content-around items-center mobile:mt-6 tablet:m-0 tablet:w-full tablet:justify-between">
+              {/* :마감일 */}
+              <div className="flex size-full items-center gap-6 tablet:mr-10 tablet:w-90">
+                <Image
+                  src={'/images/calendar.svg'}
+                  alt="마감일"
+                  width={18}
+                  height={18}
+                />
+                {dueDate && (
+                  <div className="Text-gray mt-4 text-12 font-medium leading-none">
+                    {dueDate.split(' ')[0]}
+                  </div>
+                )}
+              </div>
+              {/* :담당자 */}
+              {assignee && (
+                <div className="shrink-0">
+                  <Avatar
+                    size={24}
+                    name={assignee.nickname}
+                    imageUrl={assignee.profileImageUrl}
+                  />
+                </div>
+              )}
             </div>
-          )}
-        </div>
-        {/* :담당자 */}
-        {assignee && (
-          <div className="shrink-0">
-            <Avatar
-              size={24}
-              name={assignee.nickname}
-              imageUrl={assignee.profileImageUrl}
-            />
           </div>
-        )}
+        </div>
       </div>
-
       {/* 카드 모달 */}
       {openCard && (
         <CardModal>
diff --git a/src/app/features/dashboard_Id/Card/TagsInCard.tsx b/src/app/features/dashboard_Id/Card/TagsInCard.tsx
new file mode 100644
index 0000000..cb3fe76
--- /dev/null
+++ b/src/app/features/dashboard_Id/Card/TagsInCard.tsx
@@ -0,0 +1,45 @@
+import { useTheme } from 'next-themes'
+
+import { getColor } from '@/app/shared/lib/getColor'
+
+export default function Tags({ tags }: { tags: string[] }) {
+  //태그 컬러 - 랜덤 배정
+  //카드 생성 시 - 동일 태그 입력 불가하도록
+  const bgColors = ['#F9EEE3', '#E7F7DB', '#F7DBF0', '#DBE6F7']
+  const bgColorsDark = ['#774212', '#366712', '#711E5C', '#0F3167']
+  const textColors = ['#D58D49', '#86D549', '#D549B6', '#4981D5']
+
+  const { resolvedTheme } = useTheme()
+  const isDark = resolvedTheme === 'dark'
+
+  return (
+    <div className="flex flex-wrap gap-6 tablet:mr-16">
+      {tags.map((tag) => {
+        // const colorIndex = getColor(tag, bgColors.length)
+        // getColors함수 사용하면 NaN값이 떠서 작동을 안함.. 원래 문제 없었는데 이유를 모르겠음.
+        const hash = tag
+          .split('')
+          .reduce((acc, char) => acc + char.charCodeAt(0), 0)
+        const colorIndex = hash % 4
+
+        const backgroundColor = isDark
+          ? bgColorsDark[colorIndex]
+          : bgColors[colorIndex]
+        const textColor = isDark ? bgColors[colorIndex] : textColors[colorIndex]
+
+        return (
+          <span
+            key={tag}
+            className="inline-block whitespace-nowrap rounded-4 px-9 pb-3 pt-5"
+            style={{
+              backgroundColor: backgroundColor,
+              color: textColor,
+            }}
+          >
+            {tag}
+          </span>
+        )
+      })}
+    </div>
+  )
+}
diff --git a/src/app/features/dashboard_Id/Card/cardFormModals/AssigneeList.tsx b/src/app/features/dashboard_Id/Card/cardFormModals/AssigneeList.tsx
index d0f3f5a..9915e85 100644
--- a/src/app/features/dashboard_Id/Card/cardFormModals/AssigneeList.tsx
+++ b/src/app/features/dashboard_Id/Card/cardFormModals/AssigneeList.tsx
@@ -28,12 +28,13 @@ export default function AssigneeList({
   const assignees = getDashboardMembers(members)
 
   return (
-    <div className="BG-white Border-btn Text-gray absolute left-0 top-full z-10 mt-4 w-full rounded-6 text-14">
+    <div className="BG-white Text-gray absolute left-0 top-full z-10 mt-4 w-full rounded-6 border border-[#D9D9D9] text-14 dark:border-[#747474]">
       {assignees.map((assignee: Assignee, index: number) => (
         <div
           className={cn(
             'BG-Input-hovered w-full cursor-pointer px-16 py-11 pt-14 placeholder-gray-400 caret-transparent',
-            index !== 0 && 'border-t',
+            index !== 0 &&
+              'border-t border-[#D9D9D9] text-14 dark:border-[#747474]',
           )}
           key={assignee.id}
           onClick={() => {
diff --git a/src/app/features/dashboard_Id/Card/cardFormModals/ColumnList.tsx b/src/app/features/dashboard_Id/Card/cardFormModals/ColumnList.tsx
index 4f9c1ce..d5c0442 100644
--- a/src/app/features/dashboard_Id/Card/cardFormModals/ColumnList.tsx
+++ b/src/app/features/dashboard_Id/Card/cardFormModals/ColumnList.tsx
@@ -1,4 +1,4 @@
-import { ControllerRenderProps } from 'react-hook-form'
+import { ControllerRenderProps, UseFormSetValue } from 'react-hook-form'
 
 import { cn } from '@/app/shared/lib/cn'
 
diff --git a/src/app/features/dashboard_Id/Card/cardFormModals/CreateCardForm.tsx b/src/app/features/dashboard_Id/Card/cardFormModals/CreateCardForm.tsx
index d6f95fc..8e7e709 100644
--- a/src/app/features/dashboard_Id/Card/cardFormModals/CreateCardForm.tsx
+++ b/src/app/features/dashboard_Id/Card/cardFormModals/CreateCardForm.tsx
@@ -14,6 +14,7 @@ import { usePostCard } from '../../api/usePostCard'
 import { useUploadCardImage } from '../../api/useUploadCardImage'
 import { Assignee } from '../../type/Card.type'
 import type { CardFormData } from '../../type/CardFormData.type'
+import MyAssignee from '../MyAssignee'
 import TagsCanDelete from '../TagsCanDelete'
 // import AssigneeList, { Assignee } from './AssigneeList'
 import AssigneeList from './AssigneeList'
@@ -120,6 +121,11 @@ export default function CreateCardForm({
                 type="text"
                 placeholder="담당자를 선택해 주세요"
               />
+              {selectedAssignee && (
+                <div className="absolute left-16 top-1/2 -translate-y-1/2 bg-[#FFFFFF] dark:bg-[#3B3B3B]">
+                  <MyAssignee assignee={selectedAssignee} />
+                </div>
+              )}
               <Image
                 src="/images/arrow-dropdown.svg"
                 alt="화살표"
@@ -230,7 +236,7 @@ export default function CreateCardForm({
         {/* 이미지 미리보기 or 업로드 버튼 */}
         <label
           htmlFor="imageUrl"
-          className="flex size-76 items-center justify-center rounded-6 bg-[#F5F5F5]"
+          className="flex size-76 items-center justify-center overflow-hidden rounded-6 border-[#747474] bg-[#F5F5F5] dark:border dark:bg-[#3B3B3B]"
         >
           {preview ? (
             <Image
@@ -283,7 +289,7 @@ export default function CreateCardForm({
           취소
         </button>
         <button
-          className="BG-blue w-full rounded-8 border-solid py-14 text-16 font-medium text-[#FFFFFF]"
+          className="BG-blue w-full rounded-8 border-solid py-14 text-16 font-medium text-[#FFFFFF] disabled:bg-gray-300 dark:disabled:bg-[#464646]"
           type="submit"
           disabled={!isValid || isPending || isSubmitting}
         >
diff --git a/src/app/features/dashboard_Id/Card/cardFormModals/ModifyCardForm.tsx b/src/app/features/dashboard_Id/Card/cardFormModals/ModifyCardForm.tsx
index eb7b032..a20e716 100644
--- a/src/app/features/dashboard_Id/Card/cardFormModals/ModifyCardForm.tsx
+++ b/src/app/features/dashboard_Id/Card/cardFormModals/ModifyCardForm.tsx
@@ -3,7 +3,7 @@ import 'react-datepicker/dist/react-datepicker.css'
 import { format } from 'date-fns'
 import Image from 'next/image'
 import { useParams } from 'next/navigation'
-import { useEffect, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import DatePicker from 'react-datepicker'
 import { Controller, useForm } from 'react-hook-form'
 
@@ -36,7 +36,7 @@ export default function ModifyCardForm({
   card: Card
 }) {
   const [preview, setPreview] = useState<string | null>(card.imageUrl) // 이미지 URl 임시 저장
-  const [tags, setTags] = useState<string[]>(card.tags) // 태그 목록 임시 저장
+  const [tags, setTags] = useState<string[]>(card.tags) // 태그 목록 임시 저장]
   const [tagInput, setTagInput] = useState('') // 작성중인 태그
   const { mutate: uploadImage, isPending: isUploading } = useUploadCardImage()
 
@@ -77,7 +77,7 @@ export default function ModifyCardForm({
 
   // React Hook Form 과 tags 값 연결
   useEffect(() => {
-    setValue('tags', tags)
+    setValue('tags', tags, { shouldDirty: true })
   }, [tags, tags.length, setValue])
 
   // 상태(컬럼) 선택 시 / assignee 선택 시 드롭다운 닫기
@@ -111,7 +111,7 @@ export default function ModifyCardForm({
   function onSubmit(data: CardModifyFormData) {
     const payload: CardModifyFormData = {
       ...data,
-      columnId: columnId,
+      columnId: selectedColumn.columnId,
     }
 
     if (!data.dueDate) delete payload.dueDate
@@ -142,7 +142,6 @@ export default function ModifyCardForm({
                 <input
                   {...field}
                   onClick={() => setIsOpenColumn((prev) => !prev)}
-                  value={selectedColumn?.columnTitle ?? ''}
                   readOnly
                   className="Input-readOnly-217"
                   id="columnId"
@@ -185,14 +184,14 @@ export default function ModifyCardForm({
                 <input
                   {...field}
                   onClick={() => setIsOpen((prev) => !prev)}
-                  // value={selectedAssignee?.nickname ?? ''}
                   readOnly
                   className="Input-readOnly-217"
                   id="assigneeUserId"
                   type="text"
+                  placeholder={selectedAssignee ? '' : '담당자를 선택해 주세요'}
                 />
                 {selectedAssignee && (
-                  <div className="BG-white absolute left-16 top-1/2 -translate-y-1/2">
+                  <div className="absolute left-16 top-1/2 -translate-y-1/2 bg-[#FFFFFF] dark:bg-[#3B3B3B]">
                     <MyAssignee assignee={selectedAssignee} />
                   </div>
                 )}
@@ -304,42 +303,54 @@ export default function ModifyCardForm({
       <div>
         <h3 className="mb-8">이미지</h3>
         {/* 이미지 미리보기 or 업로드 버튼 */}
-        <label
-          htmlFor="imageUrl"
-          className="flex size-76 items-center justify-center rounded-6 bg-[#F5F5F5]"
-        >
-          {preview ? (
-            <Image
-              src={preview}
-              alt="미리보기"
-              width={76}
-              height={76}
-              className="size-full object-cover"
-            />
-          ) : (
-            <Image
-              src="/images/plus.svg"
-              width={28}
-              height={28}
-              alt="플러스 아이콘"
-            />
-          )}
-        </label>
-
-        {/* ❌ 이미지 제거 버튼 (이미지가 있을 경우만 표시) */}
-        {preview && (
-          <button
-            type="button"
-            className="mt-2 size-20 rounded-20 bg-blue-300 text-15 font-bold"
-            onClick={() => {
-              setPreview(null)
-              setValue('imageUrl', '') // 또는 null
-            }}
+        <div className="relative">
+          <label
+            htmlFor="imageUrl"
+            className="flex size-76 items-center justify-center overflow-hidden rounded-6 border-[#747474] bg-[#F5F5F5] dark:border dark:border-[#747474] dark:bg-[#3B3B3B]"
           >
-            X
-          </button>
-        )}
+            {preview ? (
+              <Image
+                src={preview}
+                alt="미리보기"
+                width={76}
+                height={76}
+                className="size-full object-cover"
+              />
+            ) : (
+              <Image
+                src="/images/plus.svg"
+                width={28}
+                height={28}
+                alt="플러스 아이콘"
+              />
+            )}
+          </label>
 
+          {/* ❌ 이미지 제거 버튼 (이미지가 있을 경우만 표시) */}
+          {preview && (
+            <button
+              type="button"
+              className="Text-gray absolute bottom-0 left-83 text-12 font-medium"
+              onClick={() => {
+                setPreview(null)
+                setValue('imageUrl', '') // 또는 null
+              }}
+            >
+              삭제
+            </button>
+          )}
+          {/* 이미지 수정 가능 표시  */}
+          {preview === card.imageUrl && (
+            <div className="pointer-events-none absolute left-0 top-0 flex size-76 items-center justify-center rounded-6 bg-black/60">
+              <Image
+                src="/images/modify-pen.svg"
+                width={30}
+                height={30}
+                alt="이미지 수정펜"
+              />
+            </div>
+          )}
+        </div>
         {/* 파일 입력 필드 (실제 input은 숨겨져 있음) */}
         <input
           id="imageUrl"
@@ -359,7 +370,7 @@ export default function ModifyCardForm({
           취소
         </button>
         <button
-          className="BG-blue w-full rounded-8 border-solid py-14 text-16 font-medium text-[#FFFFFF] disabled:bg-gray-300"
+          className="BG-blue w-full rounded-8 border-solid py-14 text-16 font-medium text-[#FFFFFF] disabled:bg-gray-300 dark:disabled:bg-[#464646]"
           type="submit"
           disabled={!isValid || !isDirty || isPending || isSubmitting}
         >
diff --git a/src/app/features/dashboard_Id/Card/cardModal/CardContent.tsx b/src/app/features/dashboard_Id/Card/cardModal/CardContent.tsx
index 20115e2..9156e92 100644
--- a/src/app/features/dashboard_Id/Card/cardModal/CardContent.tsx
+++ b/src/app/features/dashboard_Id/Card/cardModal/CardContent.tsx
@@ -1,4 +1,5 @@
 import Image from 'next/image'
+import { useTheme } from 'next-themes'
 import { useRef, useState } from 'react'
 
 import { Avatar } from '@/app/shared/components/common/Avatar'
@@ -29,6 +30,9 @@ export default function CardContent({
 
   const modalScrollRef = useRef<HTMLDivElement>(null)
 
+  const { resolvedTheme } = useTheme()
+  const isDark = resolvedTheme === 'dark'
+
   return (
     <div
       className="BG-white relative max-h-764 min-h-764 w-730 overflow-auto overflow-y-scroll rounded-16 px-18 py-30 shadow-lg [mask-image:radial-gradient(white_100%,transparent_100%)] mobile:w-327 mobile:p-16 tablet:w-678 tablet:px-32 tablet:py-24"
diff --git a/src/app/features/dashboard_Id/Card/cardModal/CardContentCopy.tsx b/src/app/features/dashboard_Id/Card/cardModal/CardContentCopy.tsx
deleted file mode 100644
index 933b48c..0000000
--- a/src/app/features/dashboard_Id/Card/cardModal/CardContentCopy.tsx
+++ /dev/null
@@ -1,110 +0,0 @@
-// import { useModalStore } from '@store/useModalStore'
-// import Image from 'next/image'
-// import { useState } from 'react'
-
-// import Dropdown from '@/app/shared/components/common/Dropdown/Dropdown'
-
-// import { Card } from '../../type/Card.type'
-// import { Column } from '../../type/Column.type'
-// import CreateCardModal from '../cardFormModals/CreateCardModal'
-// import ModifyCardForm from '../cardFormModals/ModifyCardForm'
-// import Tags from '../Tags'
-// interface CardContentProps {
-//   onClose: () => void
-//   card: Card
-//   column: Column
-// }
-// export default function CardContent({
-//   onClose,
-//   card,
-//   column,
-// }: CardContentProps) {
-//   const { id, imageUrl, title, tags, dueDate, assignee } = card
-//   const [openModifyCard, setOpenModifyCard] = useState(false)
-//   const { title: columnTitle, id: columnId } = column
-//   const currentColumn = { columnTitle, columnId }
-//   const { modalType, closeModal } = useModalStore()
-
-//   const handleBackdropClick = (e: React.MouseEvent<HTMLDivElement>) => {
-//     if (e.target === e.currentTarget) {
-//       closeModal()
-//     }
-//   }
-
-//   if (!modalType) return null
-
-//   return (
-//     <>
-//       <div
-//         className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50"
-//         onClick={handleBackdropClick}
-//       >
-//         <div className="BG-white h-auto w-584 rounded-16 p-32">
-//           <h2 className="Text-black mb-24 text-24 font-bold">초대하기</h2>
-
-//           <h2 className="Text-black bt-24 text-24 font-bold">{title}</h2>
-//           <div className="flex items-center gap-24">
-//             <Dropdown
-//               width="w-6"
-//               align="right"
-//               trigger={
-//                 <Image
-//                   src="/images/drop-more.svg"
-//                   alt="드롭 옵션 보기"
-//                   width={28}
-//                   height={28}
-//                 />
-//               }
-//             >
-//               {/* 드롭다운 내부 메뉴 아이템 */}
-//               <div
-//                 className="Text-black cursor-pointer whitespace-nowrap rounded-6 px-22 py-11 text-center text-14 font-medium hover:bg-[#dbf0ff] hover:text-[#228DFF] dark:hover:bg-[#02406d]"
-//                 onClick={() => setOpenModifyCard(true)}
-//               >
-//                 수정하기
-//               </div>
-//               <div className="Text-black cursor-pointer whitespace-nowrap rounded-6 px-22 py-11 text-center text-14 font-medium hover:bg-[#dbf0ff] hover:text-[#228DFF] dark:hover:bg-[#02406d]">
-//                 삭제하기
-//               </div>
-//             </Dropdown>
-//             <Image
-//               src={'/images/close.svg'}
-//               alt="카드 닫기"
-//               width={32}
-//               height={32}
-//               onClick={() => {
-//                 onClose()
-//                 console.log('sdfadfdsgreggsfds')
-//               }}
-//             />
-//           </div>
-
-//           <div>
-//             그리드로 관리하기 / 컬럼명은 따로 컴포넌트로 만들어 빼기
-//             <div>{column.title}</div>
-//             <Tags tags={tags} />
-//             <p>설명~~~~~~~~</p>
-//             <div>
-//               <div>{assignee.nickname}</div>
-//               <div>{dueDate}</div>
-//             </div>
-//           </div>
-//           <div> 이미지 있으면 이미지</div>
-//           <div>댓글 컴포넌트</div>
-
-//           {/* 카드 수정 모달 */}
-//           {openModifyCard && (
-//             <CreateCardModal>
-//               <ModifyCardForm
-//                 onClose={() => setOpenModifyCard(false)}
-//                 // columnId={column.id}
-//                 currentColumn={currentColumn}
-//                 card={card}
-//               />
-//             </CreateCardModal>
-//           )}
-//         </div>
-//       </div>
-//     </>
-//   )
-// }
diff --git a/src/app/features/dashboard_Id/Column/Column.tsx b/src/app/features/dashboard_Id/Column/Column.tsx
index 6f4076c..f099f7c 100644
--- a/src/app/features/dashboard_Id/Column/Column.tsx
+++ b/src/app/features/dashboard_Id/Column/Column.tsx
@@ -65,7 +65,7 @@ export default function Column({ column }: { column: ColumnType }) {
       }}
       data-column-id={id}
       className={cn(
-        'BG-gray Border-column flex w-354 shrink-0 flex-col gap-16 p-20 tablet:w-584',
+        'BG-gray Border-column flex w-354 shrink-0 flex-col gap-16 p-20 mobile:w-308 tablet:w-584',
         {
           'BG-drag-hovered': isDraggingover,
         },
diff --git a/src/app/shared/components/ThemeToggle.tsx b/src/app/shared/components/ThemeToggle.tsx
index d5d7ab5..53a68ab 100644
--- a/src/app/shared/components/ThemeToggle.tsx
+++ b/src/app/shared/components/ThemeToggle.tsx
@@ -15,7 +15,7 @@ export default function ThemeToggle() {
   return (
     <>
       <button
-        className="BG-ThemeToggle relative flex h-30 w-60 rounded-25 bg-[url('/images/darkmode.svg')] bg-center bg-no-repeat"
+        className="BG-ThemeToggle relative flex h-30 w-60 shrink-0 rounded-25 bg-[url('/images/darkmode.svg')] bg-center bg-no-repeat"
         onClick={() => setTheme(isDark ? 'light' : 'dark')}
       >
         <div

From 1df18762ebfdd839bd81a3e6c2b918fa225f4463 Mon Sep 17 00:00:00 2001
From: jyn <spdlqjdkslel1226@naver.com>
Date: Sun, 22 Jun 2025 11:51:56 +0900
Subject: [PATCH 11/16] =?UTF-8?q?=F0=9F=8E=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/features/dashboard_Id/Card/Card.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/app/features/dashboard_Id/Card/Card.tsx b/src/app/features/dashboard_Id/Card/Card.tsx
index 9616e4b..a11ed77 100644
--- a/src/app/features/dashboard_Id/Card/Card.tsx
+++ b/src/app/features/dashboard_Id/Card/Card.tsx
@@ -37,7 +37,7 @@ export default function Card({
       className="BG-white Border-section relative rounded-6 border-solid px-20 py-16"
       onClick={() => setOpenCard(true)}
     >
-      <div className="mobile:flex-col tablet:flex tablet:w-full tablet:items-center tablet:justify-start tablet:gap-20">
+      <div className="mobile:flex-col tablet:flex tablet:w-full tablet:items-center tablet:gap-20">
         {imageUrl && (
           <Image
             src={imageUrl}
@@ -49,7 +49,7 @@ export default function Card({
             draggable="false"
           />
         )}
-        <div>
+        <div className="tablet:w-full">
           {/* 할 일 제목 */}
           <h3 className="Text-black mb-10 text-16 font-medium leading-relaxed mobile:mb-6">
             {title}
@@ -58,7 +58,6 @@ export default function Card({
           <div className="tablet:flex tablet:flex-wrap tablet:items-center">
             {/* 태그 */}
             {tags.length !== 0 && <TagsInCard tags={tags} />}
-
             {/* 마감일 & 담당자 */}
             <div className="mt-8 flex content-around items-center mobile:mt-6 tablet:m-0 tablet:w-full tablet:justify-between">
               {/* :마감일 */}

From 6028ed303f0f13f730f2b3f909f34caa07e71a11 Mon Sep 17 00:00:00 2001
From: jyn <spdlqjdkslel1226@naver.com>
Date: Sun, 22 Jun 2025 11:56:48 +0900
Subject: [PATCH 12/16] =?UTF-8?q?=F0=9F=8E=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/features/dashboard_Id/Card/Card.tsx   |  5 ++-
 .../features/dashboard_Id/Card/TagsInCard.tsx | 45 -------------------
 2 files changed, 3 insertions(+), 47 deletions(-)
 delete mode 100644 src/app/features/dashboard_Id/Card/TagsInCard.tsx

diff --git a/src/app/features/dashboard_Id/Card/Card.tsx b/src/app/features/dashboard_Id/Card/Card.tsx
index a11ed77..386a627 100644
--- a/src/app/features/dashboard_Id/Card/Card.tsx
+++ b/src/app/features/dashboard_Id/Card/Card.tsx
@@ -10,7 +10,7 @@ import CreateCardModal from './cardFormModals/CreateCardModal'
 import ModifyCardForm from './cardFormModals/ModifyCardForm'
 import CardContent from './cardModal/CardContent'
 import CardModal from './cardModal/CardModal'
-// import Tags from './Tags'
+import Tags from './Tags'
 import TagsInCard from './TagsInCard'
 
 export default function Card({
@@ -57,7 +57,8 @@ export default function Card({
 
           <div className="tablet:flex tablet:flex-wrap tablet:items-center">
             {/* 태그 */}
-            {tags.length !== 0 && <TagsInCard tags={tags} />}
+            {tags.length !== 0 && <Tags tags={tags} />}
+
             {/* 마감일 & 담당자 */}
             <div className="mt-8 flex content-around items-center mobile:mt-6 tablet:m-0 tablet:w-full tablet:justify-between">
               {/* :마감일 */}
diff --git a/src/app/features/dashboard_Id/Card/TagsInCard.tsx b/src/app/features/dashboard_Id/Card/TagsInCard.tsx
deleted file mode 100644
index cb3fe76..0000000
--- a/src/app/features/dashboard_Id/Card/TagsInCard.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import { useTheme } from 'next-themes'
-
-import { getColor } from '@/app/shared/lib/getColor'
-
-export default function Tags({ tags }: { tags: string[] }) {
-  //태그 컬러 - 랜덤 배정
-  //카드 생성 시 - 동일 태그 입력 불가하도록
-  const bgColors = ['#F9EEE3', '#E7F7DB', '#F7DBF0', '#DBE6F7']
-  const bgColorsDark = ['#774212', '#366712', '#711E5C', '#0F3167']
-  const textColors = ['#D58D49', '#86D549', '#D549B6', '#4981D5']
-
-  const { resolvedTheme } = useTheme()
-  const isDark = resolvedTheme === 'dark'
-
-  return (
-    <div className="flex flex-wrap gap-6 tablet:mr-16">
-      {tags.map((tag) => {
-        // const colorIndex = getColor(tag, bgColors.length)
-        // getColors함수 사용하면 NaN값이 떠서 작동을 안함.. 원래 문제 없었는데 이유를 모르겠음.
-        const hash = tag
-          .split('')
-          .reduce((acc, char) => acc + char.charCodeAt(0), 0)
-        const colorIndex = hash % 4
-
-        const backgroundColor = isDark
-          ? bgColorsDark[colorIndex]
-          : bgColors[colorIndex]
-        const textColor = isDark ? bgColors[colorIndex] : textColors[colorIndex]
-
-        return (
-          <span
-            key={tag}
-            className="inline-block whitespace-nowrap rounded-4 px-9 pb-3 pt-5"
-            style={{
-              backgroundColor: backgroundColor,
-              color: textColor,
-            }}
-          >
-            {tag}
-          </span>
-        )
-      })}
-    </div>
-  )
-}

From 6779629c534447ec27a1d8fcd8cec08643e604d0 Mon Sep 17 00:00:00 2001
From: jyn <spdlqjdkslel1226@naver.com>
Date: Sun, 22 Jun 2025 14:03:02 +0900
Subject: [PATCH 13/16] =?UTF-8?q?=F0=9F=AB=A7=20modify:=20=EC=8A=A4?=
 =?UTF-8?q?=ED=83=80=EC=9D=BC=20=EC=88=98=EC=A0=95=20=EB=B0=8F=20=EC=BD=94?=
 =?UTF-8?q?=EB=93=9C=20=EC=A0=90=EA=B2=80=EC=A4=91..?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/images/close-darkmode.svg              |  3 +
 public/images/drop-more-darkmode.svg          |  3 +
 .../Card/cardFormModals/CreateCardForm.tsx    | 72 ++++++++++---------
 .../Card/cardFormModals/ModifyCardForm.tsx    |  7 +-
 .../Card/cardModal/CardContent.tsx            | 48 +++++++++----
 .../features/dashboard_Id/api/deleteCard.ts   |  5 +-
 .../dashboard_Id/api/deleteComment.ts         |  5 +-
 .../dashboard_Id/api/fetchComments.ts         |  5 +-
 .../features/dashboard_Id/api/postComment.ts  |  5 +-
 .../features/dashboard_Id/api/putComment.ts   |  5 +-
 10 files changed, 93 insertions(+), 65 deletions(-)
 create mode 100644 public/images/close-darkmode.svg
 create mode 100644 public/images/drop-more-darkmode.svg

diff --git a/public/images/close-darkmode.svg b/public/images/close-darkmode.svg
new file mode 100644
index 0000000..2d4b644
--- /dev/null
+++ b/public/images/close-darkmode.svg
@@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16 17.4051L9.23585 24.1692C9.05125 24.3538 8.8192 24.4482 8.53972 24.4525C8.26025 24.4568 8.02394 24.3624 7.83078 24.1692C7.6376 23.976 7.54102 23.7418 7.54102 23.4666C7.54102 23.1914 7.6376 22.9573 7.83078 22.7641L14.5949 16L7.83078 9.23585C7.64616 9.05125 7.55172 8.8192 7.54745 8.53972C7.54316 8.26025 7.6376 8.02394 7.83078 7.83078C8.02394 7.6376 8.25812 7.54102 8.53332 7.54102C8.80852 7.54102 9.04269 7.6376 9.23585 7.83078L16 14.5949L22.7641 7.83078C22.9487 7.64616 23.1808 7.55172 23.4602 7.54745C23.7397 7.54316 23.976 7.6376 24.1692 7.83078C24.3624 8.02394 24.4589 8.25812 24.4589 8.53332C24.4589 8.80852 24.3624 9.04269 24.1692 9.23585L17.4051 16L24.1692 22.7641C24.3538 22.9487 24.4482 23.1808 24.4525 23.4602C24.4568 23.7397 24.3624 23.976 24.1692 24.1692C23.976 24.3624 23.7418 24.4589 23.4666 24.4589C23.1914 24.4589 22.9573 24.3624 22.7641 24.1692L16 17.4051Z" fill="#EAEAEA"/>
+</svg>
diff --git a/public/images/drop-more-darkmode.svg b/public/images/drop-more-darkmode.svg
new file mode 100644
index 0000000..c87e1a7
--- /dev/null
+++ b/public/images/drop-more-darkmode.svg
@@ -0,0 +1,3 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14 22.4807C13.5187 22.4807 13.1068 22.3094 12.7641 21.9667C12.4214 21.624 12.25 21.212 12.25 20.7308C12.25 20.2495 12.4214 19.8375 12.7641 19.4948C13.1068 19.1521 13.5187 18.9808 14 18.9808C14.4812 18.9808 14.8932 19.1521 15.2359 19.4948C15.5786 19.8375 15.7499 20.2495 15.7499 20.7308C15.7499 21.212 15.5786 21.624 15.2359 21.9667C14.8932 22.3094 14.4812 22.4807 14 22.4807ZM14 15.75C13.5187 15.75 13.1068 15.5786 12.7641 15.2359C12.4214 14.8932 12.25 14.4812 12.25 14C12.25 13.5188 12.4214 13.1068 12.7641 12.7641C13.1068 12.4214 13.5187 12.25 14 12.25C14.4812 12.25 14.8932 12.4214 15.2359 12.7641C15.5786 13.1068 15.7499 13.5188 15.7499 14C15.7499 14.4812 15.5786 14.8932 15.2359 15.2359C14.8932 15.5786 14.4812 15.75 14 15.75ZM14 9.0192C13.5187 9.0192 13.1068 8.84785 12.7641 8.50514C12.4214 8.16245 12.25 7.75048 12.25 7.26923C12.25 6.788 12.4214 6.37603 12.7641 6.03332C13.1068 5.69063 13.5187 5.51929 14 5.51929C14.4812 5.51929 14.8932 5.69063 15.2359 6.03332C15.5786 6.37603 15.7499 6.788 15.7499 7.26923C15.7499 7.75048 15.5786 8.16245 15.2359 8.50514C14.8932 8.84785 14.4812 9.0192 14 9.0192Z" fill="#EAEAEA"/>
+</svg>
diff --git a/src/app/features/dashboard_Id/Card/cardFormModals/CreateCardForm.tsx b/src/app/features/dashboard_Id/Card/cardFormModals/CreateCardForm.tsx
index 8e7e709..c813b1b 100644
--- a/src/app/features/dashboard_Id/Card/cardFormModals/CreateCardForm.tsx
+++ b/src/app/features/dashboard_Id/Card/cardFormModals/CreateCardForm.tsx
@@ -234,42 +234,46 @@ export default function CreateCardForm({
       <div>
         <h3 className="mb-8">이미지</h3>
         {/* 이미지 미리보기 or 업로드 버튼 */}
-        <label
-          htmlFor="imageUrl"
-          className="flex size-76 items-center justify-center overflow-hidden rounded-6 border-[#747474] bg-[#F5F5F5] dark:border dark:bg-[#3B3B3B]"
-        >
-          {preview ? (
-            <Image
-              src={preview}
-              alt="미리보기"
-              width={76}
-              height={76}
-              className="size-full object-cover"
-            />
-          ) : (
-            <Image
-              src="/images/plus.svg"
-              width={28}
-              height={28}
-              alt="플러스 아이콘"
-            />
-          )}
-        </label>
-
-        {/* ❌ 이미지 제거 버튼 (이미지가 있을 경우만 표시) */}
-        {preview && (
-          <button
-            type="button"
-            className="mt-2 size-20 rounded-20 bg-blue-300 text-15 font-bold"
-            onClick={() => {
-              setPreview(null)
-              setValue('imageUrl', '') // 또는 null
-            }}
+        <div className="relative">
+          <label
+            htmlFor="imageUrl"
+            className="flex size-76 items-center justify-center overflow-hidden rounded-6 border-[#747474] bg-[#F5F5F5] dark:border dark:bg-[#3B3B3B]"
           >
-            X
-          </button>
-        )}
+            {preview ? (
+              <Image
+                src={preview}
+                alt="미리보기"
+                width={76}
+                height={76}
+                className="size-full object-cover"
+              />
+            ) : isUploading ? (
+              ''
+            ) : (
+              <Image
+                src="/images/plus.svg"
+                width={28}
+                height={28}
+                className="size-28"
+                alt="플러스 아이콘"
+              />
+            )}
+          </label>
 
+          {/* ❌ 이미지 제거 버튼 (이미지가 있을 경우만 표시) */}
+          {preview && !isUploading && (
+            <button
+              type="button"
+              className="Text-gray absolute bottom-0 left-83 text-12 font-medium"
+              onClick={() => {
+                setPreview(null)
+                setValue('imageUrl', '') // 또는 null
+              }}
+            >
+              삭제
+            </button>
+          )}
+        </div>
         {/* 파일 입력 필드 (실제 input은 숨겨져 있음) */}
         <input
           id="imageUrl"
diff --git a/src/app/features/dashboard_Id/Card/cardFormModals/ModifyCardForm.tsx b/src/app/features/dashboard_Id/Card/cardFormModals/ModifyCardForm.tsx
index a20e716..ffe4dac 100644
--- a/src/app/features/dashboard_Id/Card/cardFormModals/ModifyCardForm.tsx
+++ b/src/app/features/dashboard_Id/Card/cardFormModals/ModifyCardForm.tsx
@@ -158,7 +158,7 @@ export default function ModifyCardForm({
                   width={26}
                   height={24}
                   className={cn(
-                    'pointer-events-none absolute right-0 top-1/2 -translate-y-1/2 transition-transform duration-300',
+                    'pointer-events-none absolute right-0 top-1/2 -translate-y-1/2 transition-transform duration-300 mobile:-right-65',
                     isOpenColumn && 'rotate-180',
                   )}
                 />
@@ -201,7 +201,7 @@ export default function ModifyCardForm({
                   width={26}
                   height={24}
                   className={cn(
-                    'pointer-events-none absolute right-0 top-1/2 -translate-y-1/2 transition-transform duration-300',
+                    'pointer-events-none absolute right-0 top-1/2 -translate-y-1/2 transition-transform duration-300 mobile:-right-65',
                     isOpen && 'rotate-180',
                   )}
                 />
@@ -316,11 +316,14 @@ export default function ModifyCardForm({
                 height={76}
                 className="size-full object-cover"
               />
+            ) : isUploading ? (
+              ''
             ) : (
               <Image
                 src="/images/plus.svg"
                 width={28}
                 height={28}
+                className="size-28"
                 alt="플러스 아이콘"
               />
             )}
diff --git a/src/app/features/dashboard_Id/Card/cardModal/CardContent.tsx b/src/app/features/dashboard_Id/Card/cardModal/CardContent.tsx
index 9156e92..f6f1e87 100644
--- a/src/app/features/dashboard_Id/Card/cardModal/CardContent.tsx
+++ b/src/app/features/dashboard_Id/Card/cardModal/CardContent.tsx
@@ -48,13 +48,23 @@ export default function CardContent({
           width="w-6"
           align="right"
           trigger={
-            <Image
-              src="/images/drop-more.svg"
-              alt="드롭 옵션 보기"
-              width={28}
-              height={28}
-              className="mobile:size-20"
-            />
+            isDark ? (
+              <Image
+                src="/images/drop-more-darkmode.svg"
+                alt="드롭 옵션 보기"
+                width={28}
+                height={28}
+                className="mobile:size-20"
+              />
+            ) : (
+              <Image
+                src="/images/drop-more.svg"
+                alt="드롭 옵션 보기"
+                width={28}
+                height={28}
+                className="mobile:size-20"
+              />
+            )
           }
         >
           {/* 트리거의(케밥) 드롭다운 - 수정하기, 삭제하기 */}
@@ -85,13 +95,23 @@ export default function CardContent({
             onClose()
           }}
         >
-          <Image
-            src="/images/close.svg"
-            alt="카드 닫기"
-            width={32}
-            height={32}
-            className="mobile:size-24"
-          />
+          {isDark ? (
+            <Image
+              src="/images/close-darkmode.svg"
+              alt="드롭 옵션 보기"
+              width={28}
+              height={28}
+              className="mobile:size-20"
+            />
+          ) : (
+            <Image
+              src="/images/close.svg"
+              alt="드롭 옵션 보기"
+              width={28}
+              height={28}
+              className="mobile:size-20"
+            />
+          )}
         </button>
       </div>
 
diff --git a/src/app/features/dashboard_Id/api/deleteCard.ts b/src/app/features/dashboard_Id/api/deleteCard.ts
index e7cb706..b6adfa1 100644
--- a/src/app/features/dashboard_Id/api/deleteCard.ts
+++ b/src/app/features/dashboard_Id/api/deleteCard.ts
@@ -1,10 +1,9 @@
-import api from '@/app/shared/lib/testAxios'
+import authHttpClient from '@/app/shared/lib/axios'
 
-// import api from '@/app/shared/lib/axios'
 import { ApiResponse } from '../type/ApiResponse'
 
 export async function deleteCard(cardId: number): Promise<ApiResponse> {
-  const res = await api.delete(
+  const res = await authHttpClient.delete(
     `/${process.env.NEXT_PUBLIC_TEAM_ID}/cards/${cardId}`,
   )
   return res.data
diff --git a/src/app/features/dashboard_Id/api/deleteComment.ts b/src/app/features/dashboard_Id/api/deleteComment.ts
index edb504e..b4ec240 100644
--- a/src/app/features/dashboard_Id/api/deleteComment.ts
+++ b/src/app/features/dashboard_Id/api/deleteComment.ts
@@ -1,10 +1,9 @@
-import api from '@/app/shared/lib/testAxios'
+import authHttpClient from '@/app/shared/lib/axios'
 
-// import api from '@/app/shared/lib/axios'
 import { ApiResponse } from '../type/ApiResponse'
 
 export async function deleteComment(commentId: number): Promise<ApiResponse> {
-  const res = await api.delete(
+  const res = await authHttpClient.delete(
     `/${process.env.NEXT_PUBLIC_TEAM_ID}/comments/${commentId}`,
   )
   return res.data
diff --git a/src/app/features/dashboard_Id/api/fetchComments.ts b/src/app/features/dashboard_Id/api/fetchComments.ts
index dfa2e39..c2f2284 100644
--- a/src/app/features/dashboard_Id/api/fetchComments.ts
+++ b/src/app/features/dashboard_Id/api/fetchComments.ts
@@ -1,6 +1,5 @@
-import api from '@/app/shared/lib/testAxios'
+import authHttpClient from '@/app/shared/lib/axios'
 
-// import api from '@/app/shared/lib/axios'
 import { CommentsResponse } from '../type/Comment.type'
 
 export async function fetchComments({
@@ -12,7 +11,7 @@ export async function fetchComments({
   size?: number
   cursorId?: number | null
 }): Promise<CommentsResponse> {
-  const res = await api.get<CommentsResponse>(
+  const res = await authHttpClient.get<CommentsResponse>(
     `/${process.env.NEXT_PUBLIC_TEAM_ID}/comments`,
     {
       params: {
diff --git a/src/app/features/dashboard_Id/api/postComment.ts b/src/app/features/dashboard_Id/api/postComment.ts
index 0a9417f..33394ba 100644
--- a/src/app/features/dashboard_Id/api/postComment.ts
+++ b/src/app/features/dashboard_Id/api/postComment.ts
@@ -1,12 +1,11 @@
-// import api from '@/app/shared/lib/axios'
-import api from '@/app/shared/lib/testAxios'
+import authHttpClient from '@/app/shared/lib/axios'
 
 import { CommentResponse, PutCommentForm } from '../type/CommentFormData.type'
 
 export async function postComment(
   payload: PutCommentForm,
 ): Promise<CommentResponse> {
-  const res = await api.post(
+  const res = await authHttpClient.post(
     `/${process.env.NEXT_PUBLIC_TEAM_ID}/comments`,
     payload,
   )
diff --git a/src/app/features/dashboard_Id/api/putComment.ts b/src/app/features/dashboard_Id/api/putComment.ts
index c4b742b..bb2965b 100644
--- a/src/app/features/dashboard_Id/api/putComment.ts
+++ b/src/app/features/dashboard_Id/api/putComment.ts
@@ -1,13 +1,12 @@
-import api from '@/app/shared/lib/testAxios'
+import authHttpClient from '@/app/shared/lib/axios'
 
-// import api from '@/app/shared/lib/axios'
 import { CommentResponse, PutCommentForm } from '../type/CommentFormData.type'
 
 export async function putComment(
   payload: PutCommentForm,
   commentId: number,
 ): Promise<CommentResponse> {
-  const res = await api.put(
+  const res = await authHttpClient.put(
     `/${process.env.NEXT_PUBLIC_TEAM_ID}/comments/${commentId}`,
     payload,
   )

From 6f4d5f59c1ce2f54e9e6f70f0fb00dc8b37f37af Mon Sep 17 00:00:00 2001
From: jyn <spdlqjdkslel1226@naver.com>
Date: Sun, 22 Jun 2025 14:03:45 +0900
Subject: [PATCH 14/16] =?UTF-8?q?=F0=9F=90=9B=20fix:=20=EB=AC=B4=ED=95=9C?=
 =?UTF-8?q?=EC=8A=A4=ED=81=AC=EB=A1=A4=20=EC=A0=81=EC=9A=A9=EC=97=90=20?=
 =?UTF-8?q?=EB=94=B0=EB=A5=B8,=20=EB=93=9C=EB=9E=98=EA=B7=B8=EC=95=A4?=
 =?UTF-8?q?=EB=93=9C=EB=A1=AD=20=EB=AE=A4=ED=85=8C=EC=9D=B4=EC=85=98=20?=
 =?UTF-8?q?=ED=95=A8=EC=88=98=20=EC=88=98=EC=A0=95=20=ED=95=84=EC=9A=94?=
 =?UTF-8?q?=ED=95=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/features/dashboard_Id/api/useCardMutation.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/app/features/dashboard_Id/api/useCardMutation.ts b/src/app/features/dashboard_Id/api/useCardMutation.ts
index 90dfc25..6cc4f6d 100644
--- a/src/app/features/dashboard_Id/api/useCardMutation.ts
+++ b/src/app/features/dashboard_Id/api/useCardMutation.ts
@@ -53,6 +53,7 @@ export const useCardMutation = () => {
         ['columnId', currentCard.cardData.columnId],
         (oldData) => {
           if (!oldData) return
+          console.log('oldData', oldData)
 
           const filtered = oldData.cards.filter((card) => {
             return card.id !== cardData.id

From 5ea58c87e42da62b1b48d3bad6ded608afdb8294 Mon Sep 17 00:00:00 2001
From: jyn <spdlqjdkslel1226@naver.com>
Date: Sun, 22 Jun 2025 17:20:04 +0900
Subject: [PATCH 15/16] =?UTF-8?q?=F0=9F=90=9B=20fix:=20useInfiniteQuery=20?=
 =?UTF-8?q?(=EB=AC=B4=ED=95=9C=EC=8A=A4=ED=81=AC=EB=A1=A4)=EC=A0=81?=
 =?UTF-8?q?=EC=9A=A9=20=ED=9B=84=20=EC=BA=90=EC=8B=9C=20=EA=B5=AC=EC=A1=B0?=
 =?UTF-8?q?=20=EB=B3=80=EA=B2=BD=20(InfiniteData)=20=EB=B0=98=EC=98=81?=
 =?UTF-8?q?=ED=95=98=EC=97=AC=20=EB=82=99=EA=B4=80=EC=A0=81=20=EC=97=85?=
 =?UTF-8?q?=EB=8D=B0=EC=9D=B4=ED=8A=B8=20=ED=95=A8=EC=88=98=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/dashboard/[id]/page.tsx               |   1 +
 .../api/useCardMutation.original.ts           | 102 ++++++++++++++++++
 .../dashboard_Id/api/useCardMutation.ts       |  41 ++++---
 3 files changed, 132 insertions(+), 12 deletions(-)
 create mode 100644 src/app/features/dashboard_Id/api/useCardMutation.original.ts

diff --git a/src/app/dashboard/[id]/page.tsx b/src/app/dashboard/[id]/page.tsx
index eb9b91d..2061dd6 100644
--- a/src/app/dashboard/[id]/page.tsx
+++ b/src/app/dashboard/[id]/page.tsx
@@ -5,6 +5,7 @@ import { useParams } from 'next/navigation'
 import { useEffect, useRef } from 'react'
 
 import { useCardMutation } from '@/app/features/dashboard_Id/api/useCardMutation'
+// import { useCardMutation } from '@/app/features/dashboard_Id/api/useCardMutation'
 import useColumns from '@/app/features/dashboard_Id/api/useColumns'
 import Column from '@/app/features/dashboard_Id/Column/Column'
 import ColumnModalRenderer from '@/app/features/dashboard_Id/components/ColumnModalRenderer'
diff --git a/src/app/features/dashboard_Id/api/useCardMutation.original.ts b/src/app/features/dashboard_Id/api/useCardMutation.original.ts
new file mode 100644
index 0000000..6cc4f6d
--- /dev/null
+++ b/src/app/features/dashboard_Id/api/useCardMutation.original.ts
@@ -0,0 +1,102 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+
+import { useDragStore } from '../store/useDragStore'
+import { Card, CardResponse } from '../type/Card.type'
+import { updateCardColumn } from './updateCardColumn'
+
+export const useCardMutation = () => {
+  const queryClient = useQueryClient()
+  const { clearDraggingCard } = useDragStore()
+
+  return useMutation({
+    // 1. 서버 API 호출
+    // cardId: 드래그한 카드 아이디, columnId: dragOver된 타겟 컬럼 아이디
+    mutationFn: ({
+      columnId,
+      cardData,
+    }: {
+      columnId: number
+      cardData: Card
+    }) => updateCardColumn(cardData.id, columnId),
+
+    // 2. 낙관적 UI 처리 (서버 요청 전에 실행됨)
+    onMutate: async ({ columnId, cardData }) => {
+      const currentCard = useDragStore.getState().draggingCard
+
+      await Promise.all([
+        queryClient.cancelQueries({ queryKey: ['columnId', columnId] }),
+        queryClient.cancelQueries({
+          queryKey: ['columnId', currentCard?.cardData.columnId],
+        }),
+      ])
+
+      // 업데이트 이전 데이터 챙겨뒀다가 롤백할때 사용
+      const previousData = queryClient.getQueryData<CardResponse>([
+        'columnId',
+        columnId,
+      ])
+
+      // Guard return
+      if (
+        !currentCard ||
+        currentCard.cardData.id !== cardData.id ||
+        currentCard.cardData.columnId === columnId
+      ) {
+        console.log('no dragging card || is not a dragging card || same column')
+        clearDraggingCard()
+        return
+      }
+
+      // A. 이전 컬럼에서 카드 제거 & 카드 추출
+      // setQueryData의 콜백함수의 리턴값이 쿼리키 캐시에 저장됨(캐시 업데이트)
+      queryClient.setQueryData<CardResponse>(
+        ['columnId', currentCard.cardData.columnId],
+        (oldData) => {
+          if (!oldData) return
+          console.log('oldData', oldData)
+
+          const filtered = oldData.cards.filter((card) => {
+            return card.id !== cardData.id
+          })
+          return { ...oldData, cards: filtered }
+        },
+      )
+      // B. 새 컬럼에 카드 추가
+      queryClient.setQueryData<CardResponse>(
+        ['columnId', columnId],
+        (oldData) => {
+          if (!oldData) return
+
+          const movedCard = { ...cardData, columnId: columnId }
+          console.log('Cardcolumn changed', { movedCard })
+          return {
+            ...oldData,
+            cards: [...oldData.cards, movedCard],
+          }
+        },
+      )
+
+      clearDraggingCard()
+
+      return { previousData }
+    },
+
+    // 3. 에러 발생 시 롤백
+    onError: (error, variables, context) => {
+      if (context?.previousData) {
+        queryClient.setQueryData<CardResponse>(
+          ['columnId', variables.columnId],
+          context.previousData,
+        )
+      }
+      console.error('카드 이동 실패:', error)
+    },
+
+    // 4. 성공 시 서버 기준으로 다시 데이터 불러오도록 유도함.
+    onSuccess: (_data, variables) => {
+      queryClient.invalidateQueries({
+        queryKey: ['columnId', variables.columnId],
+      })
+    },
+  })
+}
diff --git a/src/app/features/dashboard_Id/api/useCardMutation.ts b/src/app/features/dashboard_Id/api/useCardMutation.ts
index 6cc4f6d..7563294 100644
--- a/src/app/features/dashboard_Id/api/useCardMutation.ts
+++ b/src/app/features/dashboard_Id/api/useCardMutation.ts
@@ -1,4 +1,8 @@
-import { useMutation, useQueryClient } from '@tanstack/react-query'
+import {
+  InfiniteData,
+  useMutation,
+  useQueryClient,
+} from '@tanstack/react-query'
 
 import { useDragStore } from '../store/useDragStore'
 import { Card, CardResponse } from '../type/Card.type'
@@ -49,30 +53,43 @@ export const useCardMutation = () => {
 
       // A. 이전 컬럼에서 카드 제거 & 카드 추출
       // setQueryData의 콜백함수의 리턴값이 쿼리키 캐시에 저장됨(캐시 업데이트)
-      queryClient.setQueryData<CardResponse>(
+      queryClient.setQueryData<InfiniteData<CardResponse>>(
         ['columnId', currentCard.cardData.columnId],
         (oldData) => {
           if (!oldData) return
           console.log('oldData', oldData)
 
-          const filtered = oldData.cards.filter((card) => {
-            return card.id !== cardData.id
+          // 첫 페이지에만 낙관적으로 추가한다고 가정 (pages[0])
+          const updatedPages = oldData.pages.map((page, index) => {
+            if (index !== 0) return page
+            //첫페이지면 캐시 업데이트
+            return {
+              ...page,
+              cards: page.cards.filter((card) => card.id !== cardData.id),
+            }
           })
-          return { ...oldData, cards: filtered }
+          return { ...oldData, pages: updatedPages }
         },
       )
       // B. 새 컬럼에 카드 추가
-      queryClient.setQueryData<CardResponse>(
+      queryClient.setQueryData<InfiniteData<CardResponse>>(
         ['columnId', columnId],
         (oldData) => {
           if (!oldData) return
 
-          const movedCard = { ...cardData, columnId: columnId }
-          console.log('Cardcolumn changed', { movedCard })
-          return {
-            ...oldData,
-            cards: [...oldData.cards, movedCard],
-          }
+          const movedCard = { ...cardData, columnId }
+
+          const updatedPages = oldData.pages.map((page, i) => {
+            if (i === 0) {
+              return {
+                ...page,
+                cards: [...page.cards, movedCard],
+              }
+            }
+            return page
+          })
+
+          return { ...oldData, pages: updatedPages }
         },
       )
 

From 1c145775f1183bcdec526893f0939cf727d20978 Mon Sep 17 00:00:00 2001
From: jyn <spdlqjdkslel1226@naver.com>
Date: Sun, 22 Jun 2025 17:34:10 +0900
Subject: [PATCH 16/16] =?UTF-8?q?=F0=9F=AB=A7=20modify:=20useCardMutation.?=
 =?UTF-8?q?original=ED=8C=8C=EC=9D=BC=20=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/dashboard/[id]/page.tsx               |   1 -
 .../api/useCardMutation.original.ts           | 102 ------------------
 2 files changed, 103 deletions(-)
 delete mode 100644 src/app/features/dashboard_Id/api/useCardMutation.original.ts

diff --git a/src/app/dashboard/[id]/page.tsx b/src/app/dashboard/[id]/page.tsx
index 2061dd6..eb9b91d 100644
--- a/src/app/dashboard/[id]/page.tsx
+++ b/src/app/dashboard/[id]/page.tsx
@@ -5,7 +5,6 @@ import { useParams } from 'next/navigation'
 import { useEffect, useRef } from 'react'
 
 import { useCardMutation } from '@/app/features/dashboard_Id/api/useCardMutation'
-// import { useCardMutation } from '@/app/features/dashboard_Id/api/useCardMutation'
 import useColumns from '@/app/features/dashboard_Id/api/useColumns'
 import Column from '@/app/features/dashboard_Id/Column/Column'
 import ColumnModalRenderer from '@/app/features/dashboard_Id/components/ColumnModalRenderer'
diff --git a/src/app/features/dashboard_Id/api/useCardMutation.original.ts b/src/app/features/dashboard_Id/api/useCardMutation.original.ts
deleted file mode 100644
index 6cc4f6d..0000000
--- a/src/app/features/dashboard_Id/api/useCardMutation.original.ts
+++ /dev/null
@@ -1,102 +0,0 @@
-import { useMutation, useQueryClient } from '@tanstack/react-query'
-
-import { useDragStore } from '../store/useDragStore'
-import { Card, CardResponse } from '../type/Card.type'
-import { updateCardColumn } from './updateCardColumn'
-
-export const useCardMutation = () => {
-  const queryClient = useQueryClient()
-  const { clearDraggingCard } = useDragStore()
-
-  return useMutation({
-    // 1. 서버 API 호출
-    // cardId: 드래그한 카드 아이디, columnId: dragOver된 타겟 컬럼 아이디
-    mutationFn: ({
-      columnId,
-      cardData,
-    }: {
-      columnId: number
-      cardData: Card
-    }) => updateCardColumn(cardData.id, columnId),
-
-    // 2. 낙관적 UI 처리 (서버 요청 전에 실행됨)
-    onMutate: async ({ columnId, cardData }) => {
-      const currentCard = useDragStore.getState().draggingCard
-
-      await Promise.all([
-        queryClient.cancelQueries({ queryKey: ['columnId', columnId] }),
-        queryClient.cancelQueries({
-          queryKey: ['columnId', currentCard?.cardData.columnId],
-        }),
-      ])
-
-      // 업데이트 이전 데이터 챙겨뒀다가 롤백할때 사용
-      const previousData = queryClient.getQueryData<CardResponse>([
-        'columnId',
-        columnId,
-      ])
-
-      // Guard return
-      if (
-        !currentCard ||
-        currentCard.cardData.id !== cardData.id ||
-        currentCard.cardData.columnId === columnId
-      ) {
-        console.log('no dragging card || is not a dragging card || same column')
-        clearDraggingCard()
-        return
-      }
-
-      // A. 이전 컬럼에서 카드 제거 & 카드 추출
-      // setQueryData의 콜백함수의 리턴값이 쿼리키 캐시에 저장됨(캐시 업데이트)
-      queryClient.setQueryData<CardResponse>(
-        ['columnId', currentCard.cardData.columnId],
-        (oldData) => {
-          if (!oldData) return
-          console.log('oldData', oldData)
-
-          const filtered = oldData.cards.filter((card) => {
-            return card.id !== cardData.id
-          })
-          return { ...oldData, cards: filtered }
-        },
-      )
-      // B. 새 컬럼에 카드 추가
-      queryClient.setQueryData<CardResponse>(
-        ['columnId', columnId],
-        (oldData) => {
-          if (!oldData) return
-
-          const movedCard = { ...cardData, columnId: columnId }
-          console.log('Cardcolumn changed', { movedCard })
-          return {
-            ...oldData,
-            cards: [...oldData.cards, movedCard],
-          }
-        },
-      )
-
-      clearDraggingCard()
-
-      return { previousData }
-    },
-
-    // 3. 에러 발생 시 롤백
-    onError: (error, variables, context) => {
-      if (context?.previousData) {
-        queryClient.setQueryData<CardResponse>(
-          ['columnId', variables.columnId],
-          context.previousData,
-        )
-      }
-      console.error('카드 이동 실패:', error)
-    },
-
-    // 4. 성공 시 서버 기준으로 다시 데이터 불러오도록 유도함.
-    onSuccess: (_data, variables) => {
-      queryClient.invalidateQueries({
-        queryKey: ['columnId', variables.columnId],
-      })
-    },
-  })
-}