✨ Feat: 대시보드 상세 페이지 - 드래그 앤 드롭

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

@@ -2,12 +2,24 @@ import Image from 'next/image'
 
 import type { Card } from '@/app/api/useCards'
 
+import { useDragStore } from '../store/useDragStore'
 import Tags from './Tags'
 
-export default function Card({ card }: { card: Card }) {
-  const { imageUrl, title, tags, dueDate, assignee } = card
+export default function Card({
+  card,
+  columnId,
+}: {
+  card: Card
+  columnId: number
+}) {
+  const { id, imageUrl, title, tags, dueDate, assignee } = card
+  const { setDraggingCard } = useDragStore()
   return (
-    <div className="BG-white Border-section relative w-314 rounded-6 border-solid px-20 py-16">
+    <div
+      draggable="true"
+      onDragStart={() => setDraggingCard({ cardId: id, columnId: columnId })}
+      className="BG-white Border-section relative w-314 rounded-6 border-solid px-20 py-16"
+    >
       Todo Card
       {imageUrl && (
         <Image
@@ -17,6 +29,7 @@ export default function Card({ card }: { card: Card }) {
           height={600}
           className="h-auto w-full rounded-6 object-contain"
           priority
+          draggable="false"
         />
       )}
       <p>{title}</p>

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

@@ -1,18 +1,48 @@
 import Image from 'next/image'
+import { useState } from 'react'
 
 import useCards from '@/app/api/useCards'
 import type { Column } from '@/app/api/useColumns'
+import { cn } from '@/app/shared/lib/cn'
 
+import { useCardMutation } from '../api/useCardMutation'
 import Card from '../Card/Card'
+import { useDragStore } from '../store/useDragStore'
 export default function Column({ column }: { column: Column }) {
   const { id, title }: { id: number; title: string } = column
   const { data, isLoading, error } = useCards(id)
+  const [isDraggingover, setDraggingover] = useState(false)
+  const { clearDraggingCard } = useDragStore()
+  const cardMutation = useCardMutation()
 
   if (isLoading) return <p>loading...</p>
   if (error) return <p>error...{error.message}</p>
 
   return (
-    <div className="BG-gray Border-column flex w-354 shrink-0 flex-col gap-16 p-20">
+    <div
+      onDragOver={(e) => {
+        e.preventDefault() //브라우저 기본은 드롭 비허용. 이걸 막아줘야 drop 가능
+        if (!isDraggingover) setDraggingover(true) //dragOver 이벤트 발생하는 내내 setState 실행 방지(처음 false일때만 setDraggingOver실행)
+      }}
+      onDragLeave={(e) => {
+        e.preventDefault()
+        if (isDraggingover) setDraggingover(false)
+      }}
+      onDrop={(e) => {
+        e.preventDefault()
+        if (isDraggingover) setDraggingover(false)
+        const draggingCard = useDragStore.getState().draggingCard
+        if (!draggingCard) return //null 방지
+        cardMutation.mutate({ cardId: draggingCard.cardId, columnId: id })
+        clearDraggingCard()
+      }}
+      className={cn(
+        'BG-gray Border-column flex w-354 shrink-0 flex-col gap-16 p-20',
+        {
+          '!border-blue-500': isDraggingover,
+        },
+      )}
+    >
       <div className="mb-24 flex items-center justify-between">
         <div className="flex items-center">
           <div className="mb-7 mr-8 size-8 rounded-25 bg-blue-500"></div>
@@ -38,7 +68,9 @@ export default function Column({ column }: { column: Column }) {
           />
         </div>
       </button>
-      {data?.cards.map((card) => <Card key={card.id} card={card} />)}
+      {data?.cards.map((card) => (
+        <Card key={card.id} card={card} columnId={id} />
+      ))}
     </div>
   )
 }

src/app/dashboard/[id]/api/updateCardColumn.ts

@@ -0,0 +1,12 @@
+import axiosClient from '@/app/api/axiosClient'
+
+// 카드 이동 - 해당 카드의 컬럼ID를 변경하는 방식(PUT)
+export async function updateCardColumn(
+  cardId: number,
+  columnId: number,
+): Promise<{ success: boolean }> {
+  const res = await axiosClient.put<{ success: boolean }>(`/cards/${cardId}`, {
+    columnId: columnId,
+  })
+  return res.data
+}

src/app/dashboard/[id]/api/useCardMutation.ts

@@ -0,0 +1,60 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+
+import type { CardResponse } from '@/app/api/useCards'
+
+import { updateCardColumn } from './updateCardColumn'
+
+export const useCardMutation = () => {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    // 1. 서버 API 호출
+    mutationFn: ({ cardId, columnId }: { cardId: number; columnId: number }) =>
+      updateCardColumn(cardId, columnId),
+
+    // 2. 낙관적 UI 처리 (서버 요청 전에 실행됨)
+    onMutate: async ({ cardId, columnId }) => {
+      await queryClient.cancelQueries({ queryKey: ['columnId'] })
+
+      // 업데이트 이전 데이터 챙겨뒀다가 롤백할때 사용
+      const previousData = queryClient.getQueryData<CardResponse>([
+        'columnId',
+        columnId,
+      ])
+
+      // 낙관적 업데이트(캐시 업데이트)
+      queryClient.setQueryData<CardResponse>(
+        ['columnId', columnId],
+        (oldCards) => {
+          if (!oldCards) return undefined
+          return {
+            ...oldCards,
+            cards: oldCards.cards.map((card) =>
+              card.id === cardId ? { ...card, columnId: columnId } : card,
+            ),
+          }
+        },
+      )
+
+      return { previousData }
+    },
+
+    // 3. 에러 발생 시 롤백
+    onError: (error, variables, context) => {
+      if (context?.previousData) {
+        queryClient.setQueryData<CardResponse>(
+          ['columnId', variables.columnId],
+          context.previousData,
+        )
+      }
+      console.error('카드 이동 실패:', error)
+    },
+
+    // 4. 성공 시 서버 기준으로 다시 데이터 불러오도록 유도함.
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ['columnId'],
+      })
+    },
+  })
+}

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

@@ -14,7 +14,7 @@ export default function DashboardID() {
   return (
     <>
       <div className="fixed left-0 h-1080 w-300 bg-gray-100">사이드바</div>
-      <div className="ml-300">
+      <div className="ml-300 select-none">
         <div className="flex">
           {columns?.map((column) => <Column key={column.id} column={column} />)}
           <div className="BG-gray Border-column p-20">

src/app/dashboard/[id]/store/useDragStore.ts

@@ -0,0 +1,12 @@
+import { create } from 'zustand'
+
+interface DragStore {
+  draggingCard: { cardId: number; columnId: number } | null
+  setDraggingCard: (data: { cardId: number; columnId: number }) => void
+  clearDraggingCard: () => void
+}
+export const useDragStore = create<DragStore>((set) => ({
+  draggingCard: null,
+  setDraggingCard: (data) => set({ draggingCard: data }),
+  clearDraggingCard: () => set({ draggingCard: null }),
+}))