✨ Feat: 카드 수정 모달 구현

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

@@ -2,11 +2,12 @@
 
 import Image from 'next/image'
 import { useParams } from 'next/navigation'
-import { useRef } from 'react'
+import { useEffect, useRef } from 'react'
 
 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 { useColumnsStore } from '@/app/features/dashboard_Id/store/useColumnsStore'
 import { useDragStore } from '@/app/features/dashboard_Id/store/useDragStore'
 import { Card } from '@/app/features/dashboard_Id/type/Card.type'
 
@@ -17,12 +18,23 @@ export default function DashboardID() {
   // const { data: columns, isLoading, error } = useColumns(id)
 
   const { draggingCard, setDraggingCard } = useDragStore()
+  const { setColumns } = useColumnsStore()
   const cardMutation = useCardMutation()
   const touchPos = useRef({ x: 0, y: 0 })
   const prevColumn = useRef<HTMLElement | null>(null)
   const longPressTimer = useRef<number | null>(null)
   const isLongPressActive = useRef(false)
 
+  useEffect(() => {
+    if (columns) {
+      const transformed = columns.map((column) => ({
+        columnId: column.id,
+        columnTitle: column.title,
+      }))
+      setColumns(transformed)
+    }
+  }, [columns, setColumns])
+
   const handleTouchStart = (e: React.TouchEvent<HTMLDivElement>) => {
     // 1. 터치 대상 찾기
     const target = e.target as HTMLElement
@@ -127,9 +139,9 @@ export default function DashboardID() {
   if (error) return <p>error...{error.message}</p>
   return (
     <>
-      <div className="ml-300 select-none">
+      <div className="select-none">
         <div
-          className="flex min-h-[calc(100vh-100px)] tablet:flex-col"
+          className="flex min-h-[calc(100vh-100px)] mobile:flex-row tablet:flex-col"
           onTouchStart={handleTouchStart}
           onTouchMove={handleTouchMove}
           onTouchEnd={handleTouchEnd}

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

@@ -1,20 +1,26 @@
 import Image from 'next/image'
+import { useState } from 'react'
 
 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 CardContent from './cardModal/CardContent'
+import CardModal from './cardModal/CardModal'
 import Tags from './Tags'
 
 export default function Card({
   card,
-  columnId,
+  column,
 }: {
   card: CardType
-  columnId: number
+  column: ColumnType
 }) {
   const { id, imageUrl, title, tags, dueDate, assignee } = card
   const { setDraggingCard } = useDragStore()
+  const [openCard, setOpenCard] = useState(false) //card.tsx
+
   return (
     <div
       data-card-id={id}
@@ -23,6 +29,7 @@ export default function Card({
       onDragStart={() => setDraggingCard({ cardData: card })}
       onContextMenu={(e: React.MouseEvent) => e.preventDefault()}
       className="BG-white Border-section relative rounded-6 border-solid px-20 py-16"
+      onClick={() => setOpenCard(true)}
     >
       {imageUrl && (
         <Image
@@ -42,36 +49,46 @@ export default function Card({
       </h3>
 
       {/* 태그 */}
-      <Tags tags={tags} />
+      {tags.length !== 0 && <Tags tags={tags} />}
 
       {/* 마감일 & 담당자 */}
       <div className="mt-8 flex content-around items-center">
         {/* :마감일 */}
-        {dueDate && (
-          <div className="flex size-full items-center gap-6">
-            <Image
-              src={'/images/calendar.svg'}
-              alt="마감일"
-              width={18}
-              height={18}
-            />
+        <div className="flex size-full items-center gap-6">
+          <Image
+            src={'/images/calendar.svg'}
+            alt="마감일"
+            width={18}
+            height={18}
+          />
+          {dueDate && (
             <div className="Text-gray mt-4 text-12 font-medium leading-none">
-              {dueDate}
+              {dueDate.split(' ')[0]}
             </div>
-          </div>
-        )}
-
+          )}
+        </div>
         {/* :담당자 */}
         {assignee && (
           <div className="shrink-0">
             <Avatar
-              nickname={assignee.nickname}
-              imageUrl={assignee.profileImageUrl}
               size={24}
+              name={assignee.nickname}
+              imageUrl={assignee.profileImageUrl}
             />
           </div>
         )}
       </div>
+
+      {/* 카드 모달 */}
+      {openCard && (
+        <CardModal>
+          <CardContent
+            onClose={() => setOpenCard(false)}
+            card={card}
+            column={column}
+          />
+        </CardModal>
+      )}
     </div>
   )
 }

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

@@ -0,0 +1,10 @@
+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">
+        {title}
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,18 @@
+import { Avatar } from '@/app/shared/components/common/Avatar'
+
+import { Assignee } from '../type/Card.type'
+
+export default function MyAssignee({ assignee }: { assignee: Assignee }) {
+  return (
+    <div className="flex items-center gap-6">
+      <Avatar
+        size={26}
+        name={assignee.nickname}
+        imageUrl={assignee.profileImageUrl}
+      />
+      <span className="regular Text-black block pt-1 text-16 leading-none">
+        {assignee.nickname}
+      </span>
+    </div>
+  )
+}

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

@@ -1,23 +1,39 @@
+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">
       {tags.map((tag) => {
-        const colorIndex = getColor(tag, bgColors.length)
+        // 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: bgColors[colorIndex],
-              color: textColors[colorIndex],
+              backgroundColor: backgroundColor,
+              color: textColor,
             }}
           >
             {tag}

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

@@ -0,0 +1,49 @@
+import { useTheme } from 'next-themes'
+
+import { getColor } from '@/app/shared/lib/getColor'
+
+export default function TagsCanDelete({
+  tags,
+  setTags,
+}: {
+  tags: string[]
+  setTags: React.Dispatch<React.SetStateAction<string[]>>
+}) {
+  //태그 컬러 - 랜덤 배정
+  //카드 생성 시 - 동일 태그 입력 불가하도록
+  const bgColors = ['#F9EEE3', '#E7F7DB', '#F7DBF0', '#DBE6F7']
+  const textColors = ['#D58D49', '#86D549', '#D549B6', '#4981D5']
+
+  const { resolvedTheme } = useTheme()
+  const isDark = resolvedTheme === 'dark'
+
+  return (
+    <div className="flex flex-wrap gap-6">
+      {tags.map((tag) => {
+        const hash = tag
+          .split('')
+          .reduce((acc, char) => acc + char.charCodeAt(0), 0)
+        const colorIndex = hash % 4
+
+        const backgroundColor = isDark
+          ? textColors[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,
+            }}
+            onClick={() => setTags(tags.filter((t) => t !== tag))}
+          >
+            {tag}
+          </span>
+        )
+      })}
+    </div>
+  )
+}

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

@@ -1,15 +1,14 @@
 import { ControllerRenderProps } from 'react-hook-form'
 
+import { Avatar } from '@/app/shared/components/common/Avatar'
 import { cn } from '@/app/shared/lib/cn'
 
 import getDashboardMembers from '../../lib/getDashboardMembers'
+import { Assignee } from '../../type/Card.type'
 import { CardFormData } from '../../type/CardFormData.type'
 import { Member } from '../../type/Member.type'
+import MyAssignee from '../MyAssignee'
 
-export interface Assignee {
-  userId: number
-  nickname: string
-}
 interface AssigneeListProps {
   members: Member[] | undefined
   setAssignee: (assignee: Assignee) => void
@@ -36,13 +35,13 @@ export default function AssigneeList({
             'BG-Input-hovered w-full cursor-pointer px-16 py-11 pt-14 placeholder-gray-400 caret-transparent',
             index !== 0 && 'border-t',
           )}
-          key={assignee.userId}
+          key={assignee.id}
           onClick={() => {
             setAssignee(assignee) // 담당자 업데이트
-            controlField.onChange(assignee.userId) // 리액트 훅에는 .userId 값 연결
+            controlField.onChange(assignee.id) // 리액트 훅에는 .userId 값 연결
           }}
         >
-          {assignee.nickname}
+          <MyAssignee assignee={assignee} />
         </div>
       ))}
     </div>

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

@@ -0,0 +1,44 @@
+import { ControllerRenderProps } from 'react-hook-form'
+
+import { cn } from '@/app/shared/lib/cn'
+
+import { SimpleColumn, useColumnsStore } from '../../store/useColumnsStore'
+import { CardFormData } from '../../type/CardFormData.type'
+import ColumnTitle from '../ColumnTitle'
+
+interface ColumnListProps {
+  setColumn: (selectedColumn: SimpleColumn) => void
+  controlField: ControllerRenderProps<CardFormData, 'columnId'>
+}
+
+// ✅ ColumnList 컴포넌트: 컬럼 목록을 보여주는 드롭다운 리스트
+// 1. 컬럼 목록을 클릭하면:
+//    - setColumn(column) 실행 → 선택된 담당자 객체를 부모 컴포넌트 하에 관리 (ex. UI에서 닉네임 표시용)
+//    - controlField.onChange(column.columnId) 실행 → react-hook-form에 columnId 값을 전달 (form 제출에는 Id 데이터만 전달함)
+
+export default function ColumnList({
+  setColumn,
+  controlField,
+}: ColumnListProps) {
+  const { ColumnsInDashboard } = useColumnsStore() // 컬럼 목록 데이터는 store에서 불러옴
+
+  return (
+    <div className="BG-white Border-btn absolute left-0 top-full z-10 mt-4 w-full rounded-6">
+      {ColumnsInDashboard.map((column, index) => (
+        <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',
+          )}
+          key={column.columnId}
+          onClick={() => {
+            setColumn(column) // 담당자 업데이트
+            controlField.onChange(column.columnId) // controlField: 폼의 'columnId' 필드와 연결되어 있음. .columnId 값으로 업데이트
+          }}
+        >
+          <ColumnTitle title={column.columnTitle} />
+        </div>
+      ))}
+    </div>
+  )
+}