🎨 style: 반응형 및 스타일 점검

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

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

@@ -11,6 +11,7 @@ import ModifyCardForm from './cardFormModals/ModifyCardForm'
 import CardContent from './cardModal/CardContent'
 import CardModal from './cardModal/CardModal'
 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: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>

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,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}
         >

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}
         >

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"