diff --git a/src/app/dashboard/[id]/Card/Card.tsx b/src/app/dashboard/[id]/Card/Card.tsx
index e804193..6076e8c 100644
--- a/src/app/dashboard/[id]/Card/Card.tsx
+++ b/src/app/dashboard/[id]/Card/Card.tsx
@@ -1,6 +1,7 @@
 import Image from 'next/image'
 
 import type { Card as CardType } from '@/app/api/useCards'
+import { Avatar } from '@/app/shared/components/common/Avatar'
 
 import { useDragStore } from '../store/useDragStore'
 import Tags from './Tags'
@@ -16,26 +17,48 @@ export default function Card({
   const { setDraggingCard } = useDragStore()
   return (
     <div
+      data-card-id={card.id}
+      data-card-data={JSON.stringify(card)}
       draggable="true"
-      onDragStart={() => setDraggingCard({ cardId: id, columnId: columnId })}
-      className="BG-white Border-section relative w-314 rounded-6 border-solid px-20 py-16"
+      onDragStart={() => setDraggingCard({ cardData: card })}
+      onContextMenu={(e: React.MouseEvent) => e.preventDefault()}
+      className="BG-white Border-section relative rounded-6 border-solid px-20 py-16"
     >
-      Todo Card
       {imageUrl && (
         <Image
           src={imageUrl}
           alt="카드 이미지"
           width={400}
           height={600}
-          className="h-auto w-full rounded-6 object-contain"
+          className="mb-15 h-auto w-full rounded-6 object-contain"
           priority
           draggable="false"
         />
       )}
-      <p>{title}</p>
+      <h3 className="Text-black mb-10 text-16 font-medium leading-relaxed">
+        {title}
+      </h3>
       <Tags tags={tags} />
-      <p>{dueDate}</p>
-      <p>프로필</p>
+      <div className="mt-8 flex content-around items-center">
+        <div className="flex size-full items-center gap-6">
+          <Image
+            src={'/images/calendar.svg'}
+            alt="마감일"
+            width={18}
+            height={18}
+          />
+          <div className="Text-gray mt-4 text-12 font-medium leading-none">
+            {dueDate}
+          </div>
+        </div>
+        <div className="shrink-0">
+          <Avatar
+            nickname={assignee.nickname}
+            imageUrl={assignee.profileImageUrl}
+            size={24}
+          />
+        </div>
+      </div>
     </div>
   )
 }
diff --git a/src/app/dashboard/[id]/Card/Tags.tsx b/src/app/dashboard/[id]/Card/Tags.tsx
index 6bdc294..63addcd 100644
--- a/src/app/dashboard/[id]/Card/Tags.tsx
+++ b/src/app/dashboard/[id]/Card/Tags.tsx
@@ -1,17 +1,29 @@
+import { getColor } from '@/app/shared/lib/getColor'
+
 export default function Tags({ tags }: { tags: string[] }) {
   //태그 컬러 - 랜덤 배정
   //카드 생성 시 - 동일 태그 입력 불가하도록
+  const bgColors = ['#F9EEE3', '#E7F7DB', '#F7DBF0', '#DBE6F7']
+  const textColors = ['#D58D49', '#86D549', '#D549B6', '#4981D5']
+
   return (
-    <div className="flex gap-6">
-      {tags.map((tag) => (
-        <span
-          key={tag}
-          className="inline-block whitespace-nowrap rounded-4 px-9 pb-3 pt-5"
-          style={{ backgroundColor: '#F7DBF0', color: '#D549B6' }}
-        >
-          {tag}
-        </span>
-      ))}
+    <div className="flex flex-wrap gap-6">
+      {tags.map((tag) => {
+        const colorIndex = getColor(tag, bgColors)
+
+        return (
+          <span
+            key={tag}
+            className="inline-block whitespace-nowrap rounded-4 px-9 pb-3 pt-5"
+            style={{
+              backgroundColor: bgColors[colorIndex],
+              color: textColors[colorIndex],
+            }}
+          >
+            {tag}
+          </span>
+        )
+      })}
     </div>
   )
 }
diff --git a/src/app/dashboard/[id]/Column/Column.tsx b/src/app/dashboard/[id]/Column/Column.tsx
index eaf64e5..816cdd1 100644
--- a/src/app/dashboard/[id]/Column/Column.tsx
+++ b/src/app/dashboard/[id]/Column/Column.tsx
@@ -15,6 +15,10 @@ export default function Column({ column }: { column: ColumnType }) {
   const [isDraggingover, setDraggingover] = useState(false)
   const { clearDraggingCard } = useDragStore()
   const cardMutation = useCardMutation()
+  const [openCard, setOpenCard] = useState(false) //card.tsx
+  const [openCreateCard, setOpenCreateCard] = useState(false)
+  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>
@@ -33,20 +37,23 @@ export default function Column({ column }: { column: ColumnType }) {
         e.preventDefault()
         if (isDraggingover) setDraggingover(false)
         const draggingCard = useDragStore.getState().draggingCard
-
         if (!draggingCard) {
           console.log('no dragging card') //TODO - toast 처리 🍞
           return
         }
-        // 동일 컬럼이면 무시
-        if (draggingCard.columnId === id) {
+
+        if (draggingCard.cardData.columnId === id) {
           clearDraggingCard()
           return
         }
-        cardMutation.mutate({ cardId: draggingCard.cardId, columnId: id })
+        cardMutation.mutate({
+          columnId: id,
+          cardData: draggingCard.cardData,
+        })
       }}
+      data-column-id={id}
       className={cn(
-        'BG-gray Border-column flex w-354 shrink-0 flex-col gap-16 p-20',
+        'BG-gray Border-column tablet:w-584 flex w-354 shrink-0 flex-col gap-16 p-20',
         {
           '!border-blue-500': isDraggingover,
         },
@@ -54,8 +61,8 @@ export default function Column({ column }: { column: ColumnType }) {
     >
       <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>
-          <h2 className="mr-12 text-18 font-bold leading-none">{title}</h2>
+          <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}
           </span>
@@ -65,9 +72,13 @@ export default function Column({ column }: { column: ColumnType }) {
           alt="컬럼 설정"
           width={20}
           height={20}
+          onClick={() => setConfigColumn(true)}
         />
       </div>
-      <button className="BG-white Border-btn rounded-6 px-146 py-9">
+      <button
+        className="BG-white Border-btn flex justify-center rounded-6 py-9"
+        onClick={() => setOpenCreateCard(true)}
+      >
         <div className="flex h-22 w-22 items-center justify-center rounded-4 bg-blue-100">
           <Image
             src={'/images/plus.svg'}
diff --git a/src/app/dashboard/[id]/api/useCardMutation.ts b/src/app/dashboard/[id]/api/useCardMutation.ts
index 8c7a875..57b7df4 100644
--- a/src/app/dashboard/[id]/api/useCardMutation.ts
+++ b/src/app/dashboard/[id]/api/useCardMutation.ts
@@ -12,17 +12,22 @@ export const useCardMutation = () => {
   return useMutation({
     // 1. 서버 API 호출
     // cardId: 드래그한 카드 아이디, columnId: dragOver된 타겟 컬럼 아이디
-    mutationFn: ({ cardId, columnId }: { cardId: number; columnId: number }) =>
-      updateCardColumn(cardId, columnId),
+    mutationFn: ({
+      columnId,
+      cardData,
+    }: {
+      columnId: number
+      cardData: Card
+    }) => updateCardColumn(cardData.id, columnId),
 
     // 2. 낙관적 UI 처리 (서버 요청 전에 실행됨)
-    onMutate: async ({ cardId, columnId }) => {
+    onMutate: async ({ columnId, cardData }) => {
       const currentCard = useDragStore.getState().draggingCard
 
       await Promise.all([
         queryClient.cancelQueries({ queryKey: ['columnId', columnId] }),
         queryClient.cancelQueries({
-          queryKey: ['columnId', currentCard?.columnId],
+          queryKey: ['columnId', currentCard?.cardData.columnId],
         }),
       ])
 
@@ -35,47 +40,42 @@ export const useCardMutation = () => {
       // Guard return
       if (
         !currentCard ||
-        currentCard.cardId !== cardId ||
-        currentCard.columnId === columnId
+        currentCard.cardData.id !== cardData.id ||
+        currentCard.cardData.columnId === columnId
       ) {
         console.log('no dragging card || is not a dragging card || same column')
         clearDraggingCard()
         return
       }
 
-      let extractedCard: Card | undefined // B. 에서 사용할 예정(추가할 카드 데이터는 Card여야 해서)
       // A. 이전 컬럼에서 카드 제거 & 카드 추출
       // setQueryData의 콜백함수의 리턴값이 쿼리키 캐시에 저장됨(캐시 업데이트)
       queryClient.setQueryData<CardResponse>(
-        ['columnId', currentCard.columnId],
+        ['columnId', currentCard.cardData.columnId],
         (oldData) => {
           if (!oldData) return
 
           const filtered = oldData.cards.filter((card) => {
-            if (card.id === cardId) extractedCard = card
-            return card.id !== cardId
+            return card.id !== cardData.id
           })
 
           return { ...oldData, cards: filtered }
         },
       )
       // B. 새 컬럼에 카드 추가
-      if (extractedCard) {
-        queryClient.setQueryData<CardResponse>(
-          ['columnId', columnId],
-          (oldData) => {
-            if (!oldData) return
+      queryClient.setQueryData<CardResponse>(
+        ['columnId', columnId],
+        (oldData) => {
+          if (!oldData) return
 
-            const movedCard = { ...extractedCard!, columnId }
-            return {
-              ...oldData,
-              cards: [...oldData.cards, movedCard],
-            }
-          },
-        )
-      } else {
-        console.log('카드가 제거 중에 undefined가 됨')
-      }
+          const movedCard = { ...cardData, columnId: columnId }
+          console.log('Cardcolumn changed', { movedCard })
+          return {
+            ...oldData,
+            cards: [...oldData.cards, movedCard],
+          }
+        },
+      )
 
       clearDraggingCard()
       return { previousData }
diff --git a/src/app/dashboard/[id]/page.tsx b/src/app/dashboard/[id]/page.tsx
index 2f5e7d0..1414dc4 100644
--- a/src/app/dashboard/[id]/page.tsx
+++ b/src/app/dashboard/[id]/page.tsx
@@ -1,21 +1,137 @@
 'use client'
 
 import Image from 'next/image'
+import { useRef } from 'react'
 
 import useColumns from '@/app/api/useColumns'
 
+import { useCardMutation } from './api/useCardMutation'
 import Column from './Column/Column'
+import { useDragStore } from './store/useDragStore'
+import type { Card } from './type/Card'
+
 export default function DashboardID() {
   const dashboard = 15120
   const { data: columns, isLoading, error } = useColumns(dashboard)
+  const { draggingCard, setDraggingCard } = useDragStore()
+  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)
+
+  const handleTouchStart = (e: React.TouchEvent<HTMLDivElement>) => {
+    // 1. 터치 대상 찾기
+    const target = e.target as HTMLElement
+    const cardEl = target.closest('[data-card-data]') as HTMLElement
+    const columnEl = target.closest('[data-column-id]') as HTMLElement | null
+
+    if (!cardEl) return
+    prevColumn.current = columnEl
+    const cardData: Card = JSON.parse(cardEl.dataset.cardData || '{}') // 터치한 카드의 <Card>데이터 가져옴
+    // setDraggingCard({ cardData: cardData }) // 전역상태에, 현재 드래그할 카드 저장(후에 뮤테이션 함수에 전달해서 캐시 업데이트에 사용)
+
+    // 2. 카드 영역 내 터치 좌표 계산 (저장)
+    const touch = e.touches[0]
+    const rect = cardEl.getBoundingClientRect()
+    touchPos.current = {
+      x: touch.clientX - rect.left,
+      y: touch.clientY - rect.top,
+    }
+
+    // 👇 Long press timer 설정
+    longPressTimer.current = window.setTimeout(() => {
+      isLongPressActive.current = true
+      setDraggingCard({ cardData })
+      // 3. 🧱 복제 요소 생성
+      const clone = cardEl.cloneNode(true) as HTMLElement
+      clone.id = 'dragged-clone'
+      clone.style.position = 'fixed'
+      clone.style.left = `${touch.clientX - touchPos.current.x}px`
+      clone.style.top = `${touch.clientY - touchPos.current.y}px`
+      clone.style.pointerEvents = 'none' // pointer-events: none을 드래그 중인 카드에 설정하면 elementFromPoint가 그 카드에 막히지 않고 아래 요소를 탐지할수 있음
+      clone.style.opacity = '0.8'
+      clone.style.zIndex = '9999'
+      clone.style.border = '3px dotted #228DFF'
+      clone.style.width = `${rect.width}px`
+      document.body.appendChild(clone)
+    }, 300)
+  }
+
+  const handleTouchMove = (e: React.TouchEvent) => {
+    if (!isLongPressActive.current) {
+      clearTimeout(longPressTimer.current!)
+      return
+    }
+    // e.preventDefault() // 드래그 중 스크롤 방지 적용 예정..
+    const touch = e.touches[0]
+
+    // 1. 복제 요소 움직이기
+    const touchX = touch.clientX
+    const touchY = touch.clientY
+    const clone = document.getElementById('dragged-clone')
+    if (clone) {
+      clone.style.left = `${touchX - touchPos.current.x}px`
+      clone.style.top = `${touchY - touchPos.current.y}px`
+    }
+
+    // 2. 현재 위치의 컬럼
+    const columnEl = document
+      .elementFromPoint(touchX, touchY)
+      ?.closest('[data-column-id]') as HTMLElement | null
+
+    // 3. 현재 위치의 컬럼의 스타일 변형
+    if (draggingCard && columnEl && columnEl !== prevColumn.current) {
+      columnEl.classList.add('BG-drag-hovered')
+      prevColumn.current?.classList.remove('BG-drag-hovered')
+      prevColumn.current = columnEl
+    }
+  }
+
+  const handleTouchEnd = (e: React.TouchEvent) => {
+    clearTimeout(longPressTimer.current!)
+    if (!isLongPressActive.current || !draggingCard?.cardData) return
+
+    // 1. 🧱 클론 카드 제거
+    const clone = document.getElementById('dragged-clone')
+    if (clone && isLongPressActive) {
+      clone.remove()
+      prevColumn.current?.classList.remove('BG-drag-hovered')
+    }
+    isLongPressActive.current = false
+
+    // 2. 타겟 컬럼 가져오기
+    const touch = e.changedTouches?.[0]
+    const touchX = touch.clientX
+    const touchY = touch.clientY
+    const columnEl = document
+      .elementFromPoint(touchX, touchY)
+      ?.closest('[data-column-id]') as HTMLElement | null
+
+    if (!columnEl) return
+    const columnId = Number(columnEl?.dataset.columnId)
+
+    if (columnId === draggingCard.cardData.columnId) return // 드래그한 카드와 동일한 컬럼이면 동작 취소
+
+    // 3. 타겟 컬럼으로 카드데이터 이동 (useCardMutation.ts - 서버, 캐시 업데이트)
+    cardMutation.mutate({
+      columnId: columnId,
+      cardData: draggingCard?.cardData,
+    })
+  }
+
   if (isLoading) return <p>loading...</p>
   if (error) return <p>error...{error.message}</p>
-
   return (
     <>
       <div className="fixed left-0 h-1080 w-300 bg-gray-100">사이드바</div>
       <div className="ml-300 select-none">
-        <div className="flex">
+        <div
+          className="tablet:flex-col flex"
+          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">
diff --git a/src/app/dashboard/[id]/store/useDragStore.ts b/src/app/dashboard/[id]/store/useDragStore.ts
index 93e41dc..d73c224 100644
--- a/src/app/dashboard/[id]/store/useDragStore.ts
+++ b/src/app/dashboard/[id]/store/useDragStore.ts
@@ -1,11 +1,13 @@
 import { create } from 'zustand'
+
+import { Card } from '../type/Card'
+//여기 드래깅카드 인터페이스도 생략가능할듯(카드만 받게 되었으니까.. 근데 유지보수 고려해서남겨둘까)
 interface draggingCard {
-  cardId: number
-  columnId: number
+  cardData: Card
 }
 interface DragStore {
   draggingCard: draggingCard | null
-  setDraggingCard: (data: { cardId: number; columnId: number }) => void
+  setDraggingCard: (data: { cardData: Card }) => void
   clearDraggingCard: () => void
 }
 export const useDragStore = create<DragStore>((set) => ({
diff --git a/src/app/dashboard/[id]/type/Card.ts b/src/app/dashboard/[id]/type/Card.ts
new file mode 100644
index 0000000..3fb8a30
--- /dev/null
+++ b/src/app/dashboard/[id]/type/Card.ts
@@ -0,0 +1,19 @@
+export interface Assignee {
+  id: number
+  nickname: string
+  profileImageUrl: string | null
+}
+export interface Card {
+  id: number
+  title: string
+  description: string
+  tags: string[]
+  dueDate: string
+  assignee: Assignee
+  imageUrl: string
+  teamId: string
+  dashboardId: number
+  columnId: number
+  createdAt: string
+  updatedAt: string
+}
diff --git a/src/app/globals.css b/src/app/globals.css
index d40de74..cddbd87 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -65,3 +65,7 @@ body {
 .BG-ThemeToggleButton {
   @apply bg-[#FFFFFF] dark:bg-[#D3D3D3];
 }
+
+.BG-drag-hovered {
+  @apply bg-blue-100;
+}
diff --git a/src/app/shared/components/common/Avatar.tsx b/src/app/shared/components/common/Avatar.tsx
index e87b21d..3697174 100644
--- a/src/app/shared/components/common/Avatar.tsx
+++ b/src/app/shared/components/common/Avatar.tsx
@@ -2,9 +2,11 @@
 
 import Image from 'next/image'
 
+import { getColor } from '@/app/shared/lib/getColor'
+
 type AvatarProps = {
   nickname: string
-  imageUrl?: string
+  imageUrl?: string | null
   size?: number
 }
 
@@ -27,16 +29,9 @@ function getInitial(nickname: string): string {
   return '?'
 }
 
-function getColor(nickname: string): string {
-  const hash = nickname
-    .split('')
-    .reduce((acc, char) => acc + char.charCodeAt(0), 0)
-  return customColors[hash % customColors.length]
-}
-
 export function Avatar({ nickname, imageUrl, size = 36 }: AvatarProps) {
   const initial = getInitial(nickname)
-  const bgColor = getColor(nickname)
+  const bgColor = getColor(nickname, customColors)
 
   return imageUrl ? (
     <div
@@ -57,7 +52,7 @@ export function Avatar({ nickname, imageUrl, size = 36 }: AvatarProps) {
         width: size,
         height: size,
         fontSize: size * 0.4,
-        backgroundColor: bgColor,
+        backgroundColor: customColors[bgColor],
       }}
     >
       {initial}
diff --git a/src/app/shared/lib/getColor.ts b/src/app/shared/lib/getColor.ts
new file mode 100644
index 0000000..f92547f
--- /dev/null
+++ b/src/app/shared/lib/getColor.ts
@@ -0,0 +1,5 @@
+export function getColor(text: string, customColors: string[]): number {
+  const hash = text.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0)
+  const index = hash % customColors.length
+  return index
+}
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 174afbe..d36e6c4 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -16,6 +16,11 @@ const config: Config = {
         background: 'var(--background)',
         foreground: 'var(--foreground)',
       },
+      screens: {
+        mobile: { max: '375px' },
+        tablet: { max: '744px' },
+        desktop: { max: '1920px' },
+      },
     },
   },
   plugins: [],