develop <-- Feature/dashboard & 🐛fix: useCardMutation에 InfiniteData타입 반영

src/app/dashboard/[id]/page.tsx

@@ -147,17 +147,17 @@ export default function DashboardID() {
     <>
       <div className="select-none">
         <div
-          className="mobile:flex-row tablet:flex-col flex min-h-[calc(100vh-100px)]"
+          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} dashboardId={dashboardId} />
-          ))}
-          <div className="BG-gray Border-column p-20">
+          ))}{' '}
+          <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 flex items-center gap-12 whitespace-nowrap rounded-8 px-85 pb-20 pt-24 text-18 font-bold"
+              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"
               onClick={handleCreateColumn}
             >
               <span>새로운 컬럼 추가하기</span>

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
@@ -31,64 +36,80 @@ 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: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 className="tablet:w-full">
+          {/* 할 일 제목 */}
+          <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 && <Tags 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>
           <CardContent
             onClose={() => setOpenCard(false)}
+            openModifyModal={() => setOpenModifyCard(true)}
             card={card}
             column={column}
           />
         </CardModal>
       )}
+
+      {/* 카드 수정 모달 */}
+      {openModifyCard && (
+        <CreateCardModal>
+          <ModifyCardForm
+            onClose={() => setOpenModifyCard(false)}
+            currentColumn={currentColumn}
+            card={card}
+          />
+        </CreateCardModal>
+      )}
     </div>
   )
 }

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>

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={() => {

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'
 

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,13 +121,18 @@ 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="화살표"
                 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',
                 )}
               />
@@ -228,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 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: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"
@@ -283,7 +293,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}
         >

src/app/features/dashboard_Id/Card/cardFormModals/CreateCardModal.tsx

@@ -1,15 +1,20 @@
 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(
     <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>,