diff --git a/frontend/src/components/dashboard/dashboard-edit/CardEditView.tsx b/frontend/src/components/dashboard/dashboard-edit/CardEditView.tsx
index a4e8aaf0..119eba60 100644
--- a/frontend/src/components/dashboard/dashboard-edit/CardEditView.tsx
+++ b/frontend/src/components/dashboard/dashboard-edit/CardEditView.tsx
@@ -1,7 +1,8 @@
 import { useNavigate } from 'react-router-dom';
 
 import { ButtonGroup } from '@/components/shared';
-import { useEditCard } from '@/hooks/dashboard';
+import { useDragAndDropCard, useEditCard } from '@/hooks/dashboard';
+import { useEditCardContext } from '@/hooks/dashboard/useEditCardContext';
 
 import { CardEditViewTabs } from './CardEditViewTabs';
 
@@ -10,6 +11,11 @@ export const CardEditView = () => {
 
   const { isDirty } = useEditCard();
 
+  const { isOverList } = useEditCardContext();
+
+  const { handleListDragEnter, handleListDragLeave, handleListDrop } =
+    useDragAndDropCard();
+
   const handleCancel = () => {
     navigate(-1);
   };
@@ -19,7 +25,13 @@ export const CardEditView = () => {
   };
 
   return (
-    <section className="bg-special-card-bg flex h-full w-[800px] shrink-0 flex-col pt-20 pr-5 pl-12.5">
+    <section
+      className="bg-special-card-bg relative flex h-full w-[800px] shrink-0 flex-col pt-20 pr-5 pl-12.5 select-none"
+      onDragEnter={handleListDragEnter}
+      onDragOver={(e) => e.preventDefault()}
+      onDragLeave={handleListDragLeave}
+      onDrop={handleListDrop}
+    >
       <header className="flex items-center justify-between pr-5">
         <h1 className="title-large-bold text-grey-900">카드 편집</h1>
         <ButtonGroup>
@@ -32,6 +44,14 @@ export const CardEditView = () => {
         </ButtonGroup>
       </header>
       <CardEditViewTabs />
+      {isOverList && (
+        <>
+          <div className="bg-grey-500 text-grey-0 absolute top-0 right-0 bottom-0 left-0 flex items-center justify-center opacity-50"></div>
+          <p className="headline-medium-bold text-grey-0 absolute top-1/2 right-0 bottom-0 left-0 text-center">
+            삭제하려면 여기에 놓으세요
+          </p>
+        </>
+      )}
     </section>
   );
 };
diff --git a/frontend/src/components/dashboard/dashboard-edit/CardEditViewCard.tsx b/frontend/src/components/dashboard/dashboard-edit/CardEditViewCard.tsx
index b3c308be..3c81d649 100644
--- a/frontend/src/components/dashboard/dashboard-edit/CardEditViewCard.tsx
+++ b/frontend/src/components/dashboard/dashboard-edit/CardEditViewCard.tsx
@@ -2,10 +2,11 @@ import { useCallback, useMemo } from 'react';
 
 import { EditCardWrapper } from '@/components/shared';
 import {
+  DASHBOARD_EDIT_AREA,
   DASHBOARD_METRIC_CARDS,
   type MetricCardCode,
 } from '@/constants/dashboard';
-import { useEditCard } from '@/hooks/dashboard';
+import { useDragAndDropCard, useEditCard } from '@/hooks/dashboard';
 
 import { EditCardContent } from './EditCardContent';
 
@@ -15,6 +16,7 @@ interface CardEditViewCardProps {
 
 export const CardEditViewCard = ({ cardCode }: CardEditViewCardProps) => {
   const { addCard, removeCard, isAdded } = useEditCard();
+  const { handleDragStart, handleDragEnd } = useDragAndDropCard();
 
   const card = useMemo(() => DASHBOARD_METRIC_CARDS[cardCode], [cardCode]);
 
@@ -35,7 +37,20 @@ export const CardEditViewCard = ({ cardCode }: CardEditViewCardProps) => {
   const { period, sizeX, sizeY } = card;
 
   return (
-    <li style={{ gridColumn: `span ${sizeX}` }}>
+    <li
+      style={{ gridColumn: `span ${sizeX}` }}
+      draggable={!memoisedIsAdded}
+      onDragStart={(e) =>
+        handleDragStart(e, DASHBOARD_EDIT_AREA.LIST, {
+          cardCode,
+          colNo: -1,
+          rowNo: -1,
+        })
+      }
+      onDragEnd={handleDragEnd}
+      className="translate-x-0 cursor-grab active:cursor-grabbing"
+      onClick={handleAddCard}
+    >
       <EditCardWrapper
         isAdded={memoisedIsAdded}
         period={period}
diff --git a/frontend/src/components/dashboard/dashboard-edit/CardEditViewTabs.tsx b/frontend/src/components/dashboard/dashboard-edit/CardEditViewTabs.tsx
index 1ed067e9..947be33d 100644
--- a/frontend/src/components/dashboard/dashboard-edit/CardEditViewTabs.tsx
+++ b/frontend/src/components/dashboard/dashboard-edit/CardEditViewTabs.tsx
@@ -8,7 +8,7 @@ import { CardEditViewTabContentGroup } from './CardEditViewTabContentGroup';
 export const CardEditViewTabs = memo(() => {
   const dashboardMetrics = useMemo(() => Object.values(DASHBOARD_METRICS), []);
   return (
-    <Tabs defaultValue={dashboardMetrics[0].tab} className="h-full">
+    <Tabs defaultValue={dashboardMetrics[0].tab} className="overflow-hidden">
       <TabsList className="mx-0 mt-10 gap-1000" variant="line">
         {dashboardMetrics.map(({ tab }) => (
           <TabsTrigger
diff --git a/frontend/src/components/dashboard/dashboard-edit/DashboardEditLayout.tsx b/frontend/src/components/dashboard/dashboard-edit/DashboardEditLayout.tsx
index 1aea0b19..5fcff163 100644
--- a/frontend/src/components/dashboard/dashboard-edit/DashboardEditLayout.tsx
+++ b/frontend/src/components/dashboard/dashboard-edit/DashboardEditLayout.tsx
@@ -4,7 +4,7 @@ import { MiniView } from './MiniView';
 
 export const DashboardEditLayout = () => {
   return (
-    <div className="flex size-full overflow-y-hidden">
+    <div className="flex size-full">
       <EditCardProvider>
         <MiniView />
         <CardEditView />
diff --git a/frontend/src/components/dashboard/dashboard-edit/EditCardProvider.tsx b/frontend/src/components/dashboard/dashboard-edit/EditCardProvider.tsx
index 6b7ed297..5663b64d 100644
--- a/frontend/src/components/dashboard/dashboard-edit/EditCardProvider.tsx
+++ b/frontend/src/components/dashboard/dashboard-edit/EditCardProvider.tsx
@@ -1,23 +1,41 @@
-import { type PropsWithChildren, useState } from 'react';
+import { type PropsWithChildren, useRef, useState } from 'react';
 
-import {
-  GRID_COL_SIZE,
-  GRID_ROW_SIZE,
-  type MetricCardCode,
-} from '@/constants/dashboard';
 import { EditCardContext } from '@/constants/dashboard/editCardContext';
-
-const EMPTY_GRID: (MetricCardCode | null)[][] = Array.from(
-  { length: GRID_ROW_SIZE + 1 },
-  () => Array.from({ length: GRID_COL_SIZE + 1 }, () => null),
-);
+import type { DashboardCard, DragState, GhostState } from '@/types/dashboard';
 
 export const EditCardProvider = ({ children }: PropsWithChildren) => {
-  const initGrid = EMPTY_GRID; // TODO: 초기 그리드 상태 서버에서 받아오기
-  const [grid, setGrid] = useState<(MetricCardCode | null)[][]>(EMPTY_GRID);
+  // TODO: 초기 그리드 상태 서버에서 받아오기
+  const initPlacedCards: DashboardCard[] = [];
+
+  // 카드 그리드 상태
+  const [placedCards, setPlacedCards] =
+    useState<DashboardCard[]>(initPlacedCards);
+
+  // 드래그앤드랍 관련 상태
+  const [dragState, setDragState] = useState<DragState | null>(null);
+  const [ghost, setGhost] = useState<GhostState | null>(null);
+  const [tempLayout, setTempLayout] = useState<DashboardCard[] | null>(null);
+  const [isOverList, setIsOverList] = useState(false);
+
+  const gridRef = useRef<HTMLDivElement>(null);
 
   return (
-    <EditCardContext.Provider value={{ initGrid, grid, setGrid }}>
+    <EditCardContext.Provider
+      value={{
+        initPlacedCards,
+        placedCards,
+        setPlacedCards,
+        gridRef,
+        dragState,
+        setDragState,
+        ghost,
+        setGhost,
+        tempLayout,
+        setTempLayout,
+        isOverList,
+        setIsOverList,
+      }}
+    >
       {children}
     </EditCardContext.Provider>
   );
diff --git a/frontend/src/components/dashboard/dashboard-edit/MiniView.tsx b/frontend/src/components/dashboard/dashboard-edit/MiniView.tsx
index 0e9f63f6..b6bc31f3 100644
--- a/frontend/src/components/dashboard/dashboard-edit/MiniView.tsx
+++ b/frontend/src/components/dashboard/dashboard-edit/MiniView.tsx
@@ -1,34 +1,56 @@
 import { useLocation } from 'react-router-dom';
 
-import { useEditCard } from '@/hooks/dashboard';
+import { GRID_COL_SIZE, GRID_ROW_SIZE } from '@/constants/dashboard';
+import { useDragAndDropCard, useEditCardContext } from '@/hooks/dashboard';
 
 import { MiniViewActiveCard } from './MiniViewActiveCard';
 import { MiniViewEmptyCard } from './MiniViewEmptyCard';
+import { MiniViewGhost } from './MiniViewGhost';
 
 export const MiniView = () => {
   const searchParams = new URLSearchParams(useLocation().search);
   const title = searchParams.get('tab') || '알 수 없음';
 
-  const { cards, emptyCellCount } = useEditCard();
+  const { gridRef, dragState, tempLayout, placedCards } = useEditCardContext();
+  const { handleGridDragOver, handleGridDragLeave, handleGridDrop } =
+    useDragAndDropCard();
 
   return (
-    <section className="flex min-w-120 grow flex-col p-6.25 pt-20">
+    <section className="flex min-w-120 grow flex-col overflow-y-auto p-6.25 pt-20">
       <header className="mb-20 pl-5">
         <h1 className="title-large-bold text-grey-900">{title}</h1>
       </header>
-      <div className="grid grow grid-cols-3 grid-rows-3 gap-5">
-        {Array.from({ length: emptyCellCount }).map((_, index) => (
-          <MiniViewEmptyCard key={`grid-${index}`} />
-        ))}
+      <div
+        className="relative mx-auto min-h-181 min-w-137.5"
+        ref={gridRef}
+        onDragOver={handleGridDragOver}
+        onDragLeave={handleGridDragLeave}
+        onDrop={handleGridDrop}
+      >
+        {/* 그리드 셀 가이드라인 */}
+        <div className="grid h-full grow grid-cols-3 grid-rows-3 gap-5">
+          {Array.from({ length: GRID_ROW_SIZE * GRID_COL_SIZE }).map(
+            (_, index) => (
+              <MiniViewEmptyCard key={`grid-${index}`} />
+            ),
+          )}
+        </div>
+
         {/* 활성 카드 */}
-        {cards.map((card) => (
-          <MiniViewActiveCard
-            key={`mini-${card.cardCode}`}
-            cardCode={card.cardCode}
-            posX={card.colNo}
-            posY={card.rowNo}
-          />
-        ))}
+        {(tempLayout || placedCards).map((card) => {
+          const isDragging = dragState?.draggingCard.cardCode === card.cardCode;
+          return (
+            <MiniViewActiveCard
+              key={`mini-${card.cardCode}`}
+              cardCode={card.cardCode}
+              colNo={card.colNo}
+              rowNo={card.rowNo}
+              isDragging={isDragging}
+            />
+          );
+        })}
+
+        <MiniViewGhost />
       </div>
     </section>
   );
diff --git a/frontend/src/components/dashboard/dashboard-edit/MiniViewActiveCard.tsx b/frontend/src/components/dashboard/dashboard-edit/MiniViewActiveCard.tsx
index fe092432..7e516767 100644
--- a/frontend/src/components/dashboard/dashboard-edit/MiniViewActiveCard.tsx
+++ b/frontend/src/components/dashboard/dashboard-edit/MiniViewActiveCard.tsx
@@ -5,23 +5,34 @@ import { XIcon } from 'lucide-react';
 import { PeriodTag } from '@/components/shared';
 import { Button } from '@/components/shared/shadcn-ui';
 import {
+  DASHBOARD_EDIT_AREA,
   DASHBOARD_METRIC_CARDS,
   type MetricCardCode,
 } from '@/constants/dashboard';
-import { CDN_BASE_URL } from '@/constants/shared/cdnBaseUrl';
-import { useEditCard } from '@/hooks/dashboard';
+import { CDN_BASE_URL } from '@/constants/shared';
+import {
+  useDragAndDropCard,
+  useEditCard,
+  useGridCellSize,
+} from '@/hooks/dashboard';
+import { cn } from '@/utils/shared';
 
 interface MiniViewActiveCardProps {
   cardCode: MetricCardCode;
-  posX: number;
-  posY: number;
+  colNo: number;
+  rowNo: number;
+  isDragging: boolean;
 }
 export const MiniViewActiveCard = ({
   cardCode,
-  posX,
-  posY,
+  colNo,
+  rowNo,
+  isDragging,
 }: MiniViewActiveCardProps) => {
   const { removeCard } = useEditCard();
+  const { handleDragStart, handleDragEnd } = useDragAndDropCard();
+  const { getGridPosition, getGridCardSize } = useGridCellSize();
+
   const card = DASHBOARD_METRIC_CARDS[cardCode];
 
   const handleRemove = useCallback(
@@ -35,21 +46,39 @@ export const MiniViewActiveCard = ({
   }
   const { label, type, period, sizeX, sizeY } = card;
 
+  const { topInPixel, leftInPixel } = getGridPosition(rowNo, colNo);
+  const { widthInPixel, heightInPixel } = getGridCardSize(sizeX, sizeY);
+
   return (
     <div
-      className="rounded-400 bg-grey-0 relative border-none"
+      draggable
+      onDragStart={(e) =>
+        handleDragStart(e, DASHBOARD_EDIT_AREA.GRID, {
+          cardCode,
+          colNo,
+          rowNo,
+        })
+      }
+      onDragEnd={handleDragEnd}
+      className={cn(
+        'rounded-300 bg-grey-0 absolute top-0 left-0 cursor-grab border-none transition-all duration-200 select-none active:cursor-grabbing',
+        isDragging ? 'opacity-0' : 'opacity-100',
+      )}
       style={{
-        gridColumn: `${posX} / span ${sizeX}`,
-        gridRow: `${posY} / span ${sizeY}`,
+        translate: `${leftInPixel}px ${topInPixel}px`,
+        width: widthInPixel,
+        height: heightInPixel,
       }}
     >
-      <div className="flex h-full flex-col items-center justify-center">
+      <div className="relative flex h-full flex-col items-center justify-center p-4">
         <img
           src={`${CDN_BASE_URL}/assets/images/${type}.svg`}
           alt={`${label} 미니 뷰`}
-          className="size-15"
+          draggable={false}
         />
-        <p className="body-small-medium text-grey-900 mt-200 mb-100">{label}</p>
+        <p className="body-small-medium text-grey-900 mt-200 mb-100 text-center break-keep">
+          {label}
+        </p>
         <PeriodTag isAdded period={period} />
       </div>
       {/* 상단 삭제 버튼 */}
diff --git a/frontend/src/components/dashboard/dashboard-edit/MiniViewGhost.tsx b/frontend/src/components/dashboard/dashboard-edit/MiniViewGhost.tsx
new file mode 100644
index 00000000..36f76e6e
--- /dev/null
+++ b/frontend/src/components/dashboard/dashboard-edit/MiniViewGhost.tsx
@@ -0,0 +1,35 @@
+import { DASHBOARD_METRIC_CARDS } from '@/constants/dashboard';
+import { useEditCardContext, useGridCellSize } from '@/hooks/dashboard';
+import { cn } from '@/utils/shared';
+
+export const MiniViewGhost = () => {
+  const { dragState, ghost, isOverList } = useEditCardContext();
+  const { getGridPosition, getGridCardSize } = useGridCellSize();
+
+  if (!dragState || !ghost || isOverList) {
+    return null;
+  }
+
+  const draggingCardDef =
+    DASHBOARD_METRIC_CARDS[dragState.draggingCard.cardCode];
+
+  const { topInPixel, leftInPixel } = getGridPosition(ghost.rowNo, ghost.colNo);
+  const { widthInPixel, heightInPixel } = getGridCardSize(
+    draggingCardDef.sizeX,
+    draggingCardDef.sizeY,
+  );
+
+  return (
+    <div
+      className={cn(
+        'rounded-400 pointer-events-none absolute top-0 left-0 shadow-[2px_2px_8px_0_rgba(0,0,0,0.15)_inset] transition-all duration-200',
+        ghost.isValid ? 'bg-grey-200' : 'bg-others-negative opacity-40',
+      )}
+      style={{
+        translate: `${leftInPixel}px ${topInPixel}px`,
+        width: widthInPixel,
+        height: heightInPixel,
+      }}
+    />
+  );
+};
diff --git a/frontend/src/components/shared/edit-card-wrapper/PlusIconButton.tsx b/frontend/src/components/shared/edit-card-wrapper/PlusIconButton.tsx
index bd993c78..5f7247f4 100644
--- a/frontend/src/components/shared/edit-card-wrapper/PlusIconButton.tsx
+++ b/frontend/src/components/shared/edit-card-wrapper/PlusIconButton.tsx
@@ -10,7 +10,10 @@ interface PlusIconButtonProps {
 export const PlusIconButton = ({ onClickAddButton }: PlusIconButtonProps) => {
   return (
     <Button
-      onClick={onClickAddButton}
+      onClick={(e) => {
+        e.stopPropagation();
+        onClickAddButton?.();
+      }}
       className="rounded-unlimit border-grey-200 bg-grey-100 text-grey-900 hover:border-grey-900 active:bg-grey-900 active:text-grey-50 flex size-6.5 items-center justify-center border"
     >
       <Plus className="size-4" />
diff --git a/frontend/src/components/shared/edit-card-wrapper/TrashCanIconButton.tsx b/frontend/src/components/shared/edit-card-wrapper/TrashCanIconButton.tsx
index ed835da0..f4588df8 100644
--- a/frontend/src/components/shared/edit-card-wrapper/TrashCanIconButton.tsx
+++ b/frontend/src/components/shared/edit-card-wrapper/TrashCanIconButton.tsx
@@ -12,7 +12,10 @@ export const TrashCanIconButton = ({
 }: TrashCanIconButtonProps) => {
   return (
     <Button
-      onClick={onClickDeleteButton}
+      onClick={(e) => {
+        e.stopPropagation();
+        onClickDeleteButton?.();
+      }}
       className="rounded-unlimit hover:text-others-negative border-grey-200 bg-grey-100 text-grey-900 active:bg-grey-900 active:text-grey-50 flex size-6.5 items-center justify-center border"
     >
       <Trash2 className="size-4" />
diff --git a/frontend/src/constants/dashboard/dashboardEditArea.ts b/frontend/src/constants/dashboard/dashboardEditArea.ts
new file mode 100644
index 00000000..6389056e
--- /dev/null
+++ b/frontend/src/constants/dashboard/dashboardEditArea.ts
@@ -0,0 +1,15 @@
+import type { ValueOf } from '@/utils/shared';
+
+export const DIRECTIONS = {
+  DOWN: { dx: 0, dy: 1 },
+  RIGHT: { dx: 1, dy: 0 },
+  UP: { dx: 0, dy: -1 },
+  LEFT: { dx: -1, dy: 0 },
+};
+
+export const DASHBOARD_EDIT_AREA = {
+  LIST: 'list',
+  GRID: 'grid',
+} as const;
+
+export type DashboardEditArea = ValueOf<typeof DASHBOARD_EDIT_AREA>;
diff --git a/frontend/src/constants/dashboard/dashboardMetricCards.ts b/frontend/src/constants/dashboard/dashboardMetricCards.ts
index 8f26d706..764e33a4 100644
--- a/frontend/src/constants/dashboard/dashboardMetricCards.ts
+++ b/frontend/src/constants/dashboard/dashboardMetricCards.ts
@@ -288,7 +288,7 @@ export const DASHBOARD_METRIC_CARDS = {
   },
   WTH_05_07: {
     code: 'WTH_05_07',
-    label: '강수 유뮤 판매채널별 주문건수 비율',
+    label: '강수 유무 판매채널별 주문건수 비율',
     period: PERIOD_PRESETS.recentMonths6_12.recent12Months,
     type: CHART_TYPE.RAIN,
     sizeX: 1,
diff --git a/frontend/src/constants/dashboard/editCardContext.ts b/frontend/src/constants/dashboard/editCardContext.ts
index 9ec4dcce..8b48dbf3 100644
--- a/frontend/src/constants/dashboard/editCardContext.ts
+++ b/frontend/src/constants/dashboard/editCardContext.ts
@@ -1,11 +1,31 @@
-import { createContext, type Dispatch, type SetStateAction } from 'react';
+import {
+  createContext,
+  type Dispatch,
+  type RefObject,
+  type SetStateAction,
+} from 'react';
 
-import type { MetricCardCode } from './dashboardMetricCards';
+import type { DashboardCard, DragState, GhostState } from '@/types/dashboard';
 
 interface EditCardContextType {
-  initGrid: (MetricCardCode | null)[][];
-  grid: (MetricCardCode | null)[][];
-  setGrid: Dispatch<SetStateAction<(MetricCardCode | null)[][]>>;
+  initPlacedCards: DashboardCard[];
+
+  placedCards: DashboardCard[];
+  setPlacedCards: Dispatch<SetStateAction<DashboardCard[]>>;
+
+  gridRef: RefObject<HTMLDivElement | null>;
+
+  dragState: DragState | null;
+  setDragState: Dispatch<SetStateAction<DragState | null>>;
+
+  ghost: GhostState | null;
+  setGhost: Dispatch<SetStateAction<GhostState | null>>;
+
+  tempLayout: DashboardCard[] | null;
+  setTempLayout: Dispatch<SetStateAction<DashboardCard[] | null>>;
+
+  isOverList: boolean;
+  setIsOverList: Dispatch<SetStateAction<boolean>>;
 }
 
 export const EditCardContext = createContext<EditCardContextType | undefined>(
diff --git a/frontend/src/constants/dashboard/index.ts b/frontend/src/constants/dashboard/index.ts
index a63210d8..a91b39b8 100644
--- a/frontend/src/constants/dashboard/index.ts
+++ b/frontend/src/constants/dashboard/index.ts
@@ -17,5 +17,10 @@ export {
   isMetricCardCode,
   type MetricCardCode,
 } from './dashboardMetricCards';
+export {
+  DIRECTIONS,
+  DASHBOARD_EDIT_AREA,
+  type DashboardEditArea,
+} from './dashboardEditArea';
 export { METRIC_TREND, type MetricTrend } from './metricTrend';
 export { GRID_ROW_SIZE, GRID_COL_SIZE } from './dashboardGridSize';
diff --git a/frontend/src/hooks/dashboard/index.ts b/frontend/src/hooks/dashboard/index.ts
index 336119fa..f7775c73 100644
--- a/frontend/src/hooks/dashboard/index.ts
+++ b/frontend/src/hooks/dashboard/index.ts
@@ -1,3 +1,6 @@
 export { useDashboardTabsContext } from './useDashboardTabsContext';
 export { useDashboardTabsDialog } from './useDashboardTabsDialog';
 export { useEditCard } from './useEditCard';
+export { useEditCardContext } from './useEditCardContext';
+export { useGridCellSize } from './useGridCellSize';
+export { useDragAndDropCard } from './useDragAndDropCard';
diff --git a/frontend/src/hooks/dashboard/useDragAndDropCard.ts b/frontend/src/hooks/dashboard/useDragAndDropCard.ts
new file mode 100644
index 00000000..69068ea8
--- /dev/null
+++ b/frontend/src/hooks/dashboard/useDragAndDropCard.ts
@@ -0,0 +1,402 @@
+import { useCallback } from 'react';
+
+import {
+  DASHBOARD_EDIT_AREA,
+  DASHBOARD_METRIC_CARDS,
+  type DashboardEditArea,
+  DIRECTIONS,
+  GRID_COL_SIZE,
+  GRID_ROW_SIZE,
+} from '@/constants/dashboard';
+import type { DashboardCard } from '@/types/dashboard';
+import { getConflictingCards } from '@/utils/dashboard';
+
+import { useThrottle } from '../shared/useThrottle';
+
+import { useEditCardContext } from './useEditCardContext';
+import { useGridCellSize } from './useGridCellSize';
+
+export const useDragAndDropCard = () => {
+  const {
+    placedCards,
+    setPlacedCards,
+    gridRef,
+    dragState,
+    setDragState,
+    ghost,
+    setGhost,
+    tempLayout,
+    setTempLayout,
+    setIsOverList,
+  } = useEditCardContext();
+  const { getGridPosition, getGridCardSize } = useGridCellSize();
+
+  /**
+   * 중심점 기준 진입 방향 계산 함수
+   * @param draggingCenterX 드래그 중인 카드의 중심 X 좌표 (픽셀 단위)
+   * @param draggingCenterY 드래그 중인 카드의 중심 Y 좌표 (픽셀 단위)
+   * @param conflictCard 충돌한 카드 정보
+   * @returns 진입 방향에 따른 밀어내기 우선순위 배열 [{dx, dy}, ...]
+   */
+  const getPushDirectionPriority = useCallback(
+    (
+      draggingCenterX: number,
+      draggingCenterY: number,
+      conflictCard: DashboardCard,
+    ) => {
+      // 충돌한 요소의 중심
+      const conflictCardDef = DASHBOARD_METRIC_CARDS[conflictCard.cardCode];
+      const { topInPixel, leftInPixel } = getGridPosition(
+        conflictCard.rowNo,
+        conflictCard.colNo,
+      );
+      const { widthInPixel, heightInPixel } = getGridCardSize(
+        conflictCardDef.sizeX,
+        conflictCardDef.sizeY,
+      );
+      const conflictCenterX = leftInPixel + widthInPixel / 2;
+      const conflictCenterY = topInPixel + heightInPixel / 2;
+
+      // 드래그 중인 카드의 중심과 충돌 카드의 중심을 비교하여 진입 방향 계산
+      const dx = draggingCenterX - conflictCenterX;
+      const dy = draggingCenterY - conflictCenterY;
+
+      const absDx = Math.abs(dx) / conflictCardDef.sizeX;
+      const absDy = Math.abs(dy) / conflictCardDef.sizeY;
+
+      // 진입방향 반대를 밀어내기 우선순위로 설정
+      const { LEFT, RIGHT, UP, DOWN } = DIRECTIONS;
+      if (absDx > absDy) {
+        if (dx > 0) {
+          // 우측 진입 -> 좌로 밀기 우선
+          return [LEFT, DOWN, UP, RIGHT];
+        } else {
+          // 좌측 진입 -> 우로 밀기 우선
+          return [RIGHT, DOWN, UP, LEFT];
+        }
+      } else {
+        if (dy > 0) {
+          // 하단 진입 -> 위로 밀기 우선
+          return [UP, RIGHT, LEFT, DOWN];
+        } else {
+          // 상단 진입 -> 아래로 밀기 우선
+          return [DOWN, RIGHT, LEFT, UP];
+        }
+      }
+    },
+    [getGridCardSize, getGridPosition],
+  );
+
+  /**
+   * 카드 밀어내기 재귀 알고리즘
+   * @param currentLayout 현재까지 계산된 전체 카드 배치
+   * @param currentCard 방금 이동시켜서 주변을 밀어내야 할 주체 카드
+   * @param movedCards 한 번 이동한 적이 있는 카드의 코드 Set (무한 루프 방지)
+   * @param draggingCenterX 드래그 중인 카드의 중심 X 좌표 (픽셀 단위)
+   * @param draggingCenterY 드래그 중인 카드의 중심 Y 좌표 (픽셀 단위)
+   * @returns 밀어내기 결과 레이아웃과 유효 여부 {cards, isValid}
+   */
+  const getPushedLayout = useCallback(
+    (
+      currentLayout: DashboardCard[],
+      currentCard: DashboardCard,
+      movedCards: Set<string> = new Set(),
+      draggingCenterX: number,
+      draggingCenterY: number,
+    ): { cards: DashboardCard[]; isValid: boolean } => {
+      // 현재 조작 중인 카드를 이동 완료 목록에 추가
+      movedCards.add(currentCard.cardCode);
+
+      // 현재 레이아웃에서 movedCard 위치 업데이트
+      let nextLayout = currentLayout.map((card) =>
+        card.cardCode === currentCard.cardCode ? currentCard : card,
+      );
+
+      // 충돌되는 카드 찾기
+      const conflicts = getConflictingCards(currentCard, nextLayout);
+
+      for (const conflictCard of conflicts) {
+        // 진입방향에 따른 밀어냄 방향 우선순위
+        const pushDirections = getPushDirectionPriority(
+          draggingCenterX,
+          draggingCenterY,
+          conflictCard,
+        );
+
+        for (const { dx, dy } of pushDirections) {
+          if (movedCards.has(conflictCard.cardCode)) {
+            continue; // 이미 이동한 카드면 패스
+          }
+
+          // 충돌 카드의 다음 좌표 계산
+          let conflictNextX = conflictCard.colNo;
+          let conflictNextY = conflictCard.rowNo;
+
+          const conflictCardDef = DASHBOARD_METRIC_CARDS[conflictCard.cardCode];
+          const currentCardDef = DASHBOARD_METRIC_CARDS[currentCard.cardCode];
+
+          if (dx > 0) {
+            // 현재 카드의 우측으로 밀어냄
+            conflictNextX = currentCard.colNo + currentCardDef.sizeX;
+          } else if (dx < 0) {
+            // 현재 카드의 좌측으로 밀어냄
+            conflictNextX = currentCard.colNo - conflictCardDef.sizeX;
+          }
+
+          if (dy > 0) {
+            // 현재 카드의 하단으로 밀어냄
+            conflictNextY = currentCard.rowNo + currentCardDef.sizeY;
+          } else if (dy < 0) {
+            // 현재 카드의 상단으로 밀어냄
+            conflictNextY = currentCard.rowNo - conflictCardDef.sizeY;
+          }
+
+          // 그리드 밖으로 나간다면 무효
+          if (
+            conflictNextX < 1 ||
+            conflictNextX + conflictCardDef.sizeX - 1 > GRID_COL_SIZE ||
+            conflictNextY < 1 ||
+            conflictNextY + conflictCardDef.sizeY - 1 > GRID_ROW_SIZE
+          ) {
+            continue;
+          }
+
+          const movedConflictCard: DashboardCard = {
+            cardCode: conflictCard.cardCode,
+            colNo: conflictNextX,
+            rowNo: conflictNextY,
+          };
+
+          // 충돌된 카드 위치가 변했을 때 재귀적으로 밀어내기
+          const pushedResult = getPushedLayout(
+            nextLayout,
+            movedConflictCard,
+            new Set(movedCards),
+            draggingCenterX,
+            draggingCenterY,
+          );
+
+          if (pushedResult.isValid) {
+            nextLayout = pushedResult.cards;
+            break; // 유효한 방향을 찾았으므로 다른 방향 시도 중단
+          }
+        }
+      }
+
+      // 최종 충돌 검사
+      const isFinalConflict =
+        getConflictingCards(currentCard, nextLayout).length > 0;
+
+      return { cards: nextLayout, isValid: !isFinalConflict };
+    },
+    [getPushDirectionPriority],
+  );
+
+  /**
+   * 현재 마우스 위치를 기반으로 카드가 가장 가까운 그리드 셀에 붙도록 좌표 계산
+   * 카드의 크기를 고려하여, 카드의 중심이 가장 가까운 셀의 중심에 오도록 함
+   * @param clientX 마우스의 X 좌표 (픽셀 단위)
+   * @param clientY 마우스의 Y 좌표 (픽셀 단위)
+   * @returns 계산된 그리드 좌표 {row, col}
+   */
+  const calculateGridPos = useCallback(
+    (clientX: number, clientY: number) => {
+      if (!gridRef.current || !dragState) {
+        return { row: 0, col: 0 };
+      }
+
+      // 드래그 중인 카드의 크기 계산 (픽셀단위)
+      const draggingCardDef =
+        DASHBOARD_METRIC_CARDS[dragState.draggingCard.cardCode];
+      const cardSizeX = draggingCardDef.sizeX;
+      const cardSizeY = draggingCardDef.sizeY;
+      const { widthInPixel, heightInPixel } = getGridCardSize(
+        cardSizeX,
+        cardSizeY,
+      );
+
+      // 드래그 중인 카드의 중심점 (픽셀단위)
+      const cardRect = gridRef.current.getBoundingClientRect();
+      const draggingCenterX =
+        clientX - cardRect.left - dragState.centerOffset.x;
+      const draggingCenterY = clientY - cardRect.top - dragState.centerOffset.y;
+
+      // 카드의 중심이 가장 가까운 셀의 중심에 오도록
+      let minDistance = Infinity;
+      let closest = { row: 0, col: 0 };
+      // 각 그리드 셀마다 맨하탄 거리 계산
+      for (let r = 1; r <= GRID_ROW_SIZE - cardSizeY + 1; r++) {
+        for (let c = 1; c <= GRID_COL_SIZE - cardSizeX + 1; c++) {
+          // 그리드 셀의 중심 좌표
+          const { topInPixel, leftInPixel } = getGridPosition(r, c);
+          const centerX = leftInPixel + widthInPixel / 2;
+          const centerY = topInPixel + heightInPixel / 2;
+
+          const dist =
+            Math.abs(draggingCenterX - centerX) +
+            Math.abs(draggingCenterY - centerY);
+
+          if (dist < minDistance) {
+            minDistance = dist;
+            closest = { row: r, col: c };
+          }
+        }
+      }
+      return closest;
+    },
+    [dragState, getGridCardSize, getGridPosition, gridRef],
+  );
+
+  /*************** 이벤트 핸들러 ****************/
+
+  const handleGridDragOverFn = useCallback(
+    (clientX: number, clientY: number) => {
+      if (!gridRef.current || !dragState) {
+        return;
+      }
+
+      const { row, col } = calculateGridPos(clientX, clientY);
+
+      // Ghost 위치가 변했을 때만 계산
+      if (ghost?.colNo === col && ghost?.rowNo === row) {
+        return;
+      }
+
+      // 시뮬레이션을 위한 레이아웃 구성
+      const ghostCard: DashboardCard = {
+        cardCode: dragState.draggingCard.cardCode,
+        colNo: col,
+        rowNo: row,
+      };
+      const currentLayout =
+        dragState.sourceArea === DASHBOARD_EDIT_AREA.LIST
+          ? [...placedCards, ghostCard] // 리스트에서 새로 추가하는 경우
+          : placedCards;
+
+      // 드래그 중인 카드의 중심점 (픽셀단위)
+      const rect = gridRef.current?.getBoundingClientRect();
+      const draggingCenterX = clientX - rect.left - dragState.centerOffset.x;
+      const draggingCenterY = clientY - rect.top - dragState.centerOffset.y;
+
+      // 밀어내기 시뮬레이션 수행
+      const pushedResult = getPushedLayout(
+        currentLayout,
+        ghostCard,
+        new Set(),
+        draggingCenterX,
+        draggingCenterY,
+      );
+
+      // 밀어내기 결과 레이아웃 반영
+      setTempLayout(pushedResult.cards);
+
+      // ghost 유효 여부 결정
+      setGhost({ rowNo: row, colNo: col, isValid: pushedResult.isValid });
+    },
+    [
+      calculateGridPos,
+      dragState,
+      getPushedLayout,
+      ghost?.colNo,
+      ghost?.rowNo,
+      gridRef,
+      placedCards,
+      setGhost,
+      setTempLayout,
+    ],
+  );
+  const handleGridDragOverThrottled = useThrottle(handleGridDragOverFn, 100);
+
+  const handleGridDragOver = (e: React.DragEvent) => {
+    e.preventDefault();
+    const clientX = e.clientX;
+    const clientY = e.clientY;
+
+    handleGridDragOverThrottled(clientX, clientY);
+  };
+
+  const handleGridDrop = (e: React.DragEvent) => {
+    e.preventDefault();
+
+    if (ghost?.isValid && tempLayout) {
+      setPlacedCards(tempLayout);
+    }
+    handleDragEnd();
+  };
+
+  const handleGridDragLeave = (e: React.DragEvent) => {
+    const relatedTarget =
+      e.relatedTarget || window.document.elementFromPoint(e.clientX, e.clientY);
+
+    if (!e.currentTarget.contains(relatedTarget as Node)) {
+      // 영역 외부로 나갔을 때만 처리 (자식 요소로 이동할 때는 무시)
+      setGhost(null);
+    }
+  };
+
+  const handleListDragEnter = () => {
+    if (dragState?.sourceArea === DASHBOARD_EDIT_AREA.GRID) {
+      setIsOverList(true);
+    }
+  };
+
+  const handleListDragLeave = (e: React.DragEvent) => {
+    const relatedTarget =
+      e.relatedTarget || window.document.elementFromPoint(e.clientX, e.clientY);
+
+    if (!e.currentTarget.contains(relatedTarget as Node)) {
+      // 영역 외부로 나갔을 때만 처리 (자식 요소로 이동할 때는 무시)
+      setIsOverList(false);
+    }
+  };
+
+  const handleListDrop = (e: React.DragEvent) => {
+    e.preventDefault();
+
+    // 카드 삭제
+    if (dragState?.sourceArea === DASHBOARD_EDIT_AREA.GRID) {
+      setPlacedCards((prev) =>
+        prev.filter((c) => c.cardCode !== dragState.draggingCard.cardCode),
+      );
+    }
+    handleDragEnd();
+  };
+
+  const handleDragStart = (
+    e: React.DragEvent,
+    sourceArea: DashboardEditArea,
+    draggingCard: DashboardCard,
+  ) => {
+    e.dataTransfer.effectAllowed = 'move';
+
+    const cardRect = e.currentTarget.getBoundingClientRect();
+    setDragState({
+      sourceArea,
+      draggingCard,
+      centerOffset: {
+        // 카드 중심에서 마우스 포인터까지의 상대 좌표 (픽셀 단위)
+        x: e.clientX - cardRect.left - cardRect.width / 2,
+        y: e.clientY - cardRect.top - cardRect.height / 2,
+      },
+    });
+  };
+
+  const handleDragEnd = () => {
+    // 드래그 상태 초기화
+    setDragState(null);
+    setGhost(null);
+    setTempLayout(null);
+    setIsOverList(false);
+  };
+
+  return {
+    handleGridDragOver,
+    handleGridDrop,
+    handleGridDragLeave,
+    handleListDragEnter,
+    handleListDragLeave,
+    handleListDrop,
+    handleDragStart,
+    handleDragEnd,
+  };
+};
diff --git a/frontend/src/hooks/dashboard/useEditCard.ts b/frontend/src/hooks/dashboard/useEditCard.ts
index 7246384f..65d148c6 100644
--- a/frontend/src/hooks/dashboard/useEditCard.ts
+++ b/frontend/src/hooks/dashboard/useEditCard.ts
@@ -4,37 +4,30 @@ import { toast } from 'sonner';
 
 import type { MetricCardCode } from '@/constants/dashboard';
 import {
-  addCardOnGrid,
   getAvailablePositionOnGrid,
-  hasCardOnGrid,
-  removeCardFromGrid,
-} from '@/utils/dashboard';
-import {
-  cloneGrid,
-  countEmptyCellsOnGrid,
-  getCardListFromGrid,
+  isCardPlaced,
   isSameGrid,
-} from '@/utils/dashboard/editCard';
+} from '@/utils/dashboard';
 
 import { useEditCardContext } from './useEditCardContext';
 
 export const useEditCard = () => {
-  const { initGrid, grid, setGrid } = useEditCardContext();
+  const { initPlacedCards, placedCards, setPlacedCards } = useEditCardContext();
 
   const isDirty = useMemo(
-    (): boolean => !isSameGrid(grid, initGrid),
-    [grid, initGrid],
+    (): boolean => !isSameGrid(placedCards, initPlacedCards),
+    [placedCards, initPlacedCards],
   );
 
   const isAdded = useCallback(
-    (cardCode: MetricCardCode): boolean => hasCardOnGrid(grid, cardCode),
-    [grid],
+    (cardCode: MetricCardCode): boolean => isCardPlaced(placedCards, cardCode),
+    [placedCards],
   );
 
   const addCard = useCallback(
-    (code: MetricCardCode, sizeX: number, sizeY: number) => {
-      setGrid((prev) => {
-        if (hasCardOnGrid(prev, code)) {
+    (cardCode: MetricCardCode, sizeX: number, sizeY: number) => {
+      setPlacedCards((prev) => {
+        if (isCardPlaced(prev, cardCode)) {
           return prev;
         }
 
@@ -44,41 +37,33 @@ export const useEditCard = () => {
           return prev;
         }
 
-        const newGrid = cloneGrid(prev);
-        addCardOnGrid(newGrid, position, sizeX, sizeY, code);
-        return newGrid;
+        return [
+          ...prev,
+          { cardCode, rowNo: position.row, colNo: position.col },
+        ];
       });
     },
-    [setGrid],
+    [setPlacedCards],
   );
 
   const removeCard = useCallback(
-    (code: MetricCardCode) => {
-      setGrid((prev) => {
-        if (!hasCardOnGrid(prev, code)) {
+    (cardCode: MetricCardCode) => {
+      setPlacedCards((prev) => {
+        if (!isCardPlaced(prev, cardCode)) {
           return prev;
         }
 
-        const newGrid = cloneGrid(prev);
-        removeCardFromGrid(newGrid, code);
-
-        return newGrid;
+        return prev.filter((c) => c.cardCode !== cardCode);
       });
     },
-    [setGrid],
+    [setPlacedCards],
   );
 
-  const cards = useMemo(() => getCardListFromGrid(grid), [grid]);
-
-  const emptyCellCount = useMemo(() => countEmptyCellsOnGrid(grid), [grid]);
-
   return {
-    grid,
+    placedCards,
     isDirty,
     addCard,
     removeCard,
-    cards,
-    emptyCellCount,
     isAdded,
   };
 };
diff --git a/frontend/src/hooks/dashboard/useGridCellSize.ts b/frontend/src/hooks/dashboard/useGridCellSize.ts
new file mode 100644
index 00000000..bbbdc05c
--- /dev/null
+++ b/frontend/src/hooks/dashboard/useGridCellSize.ts
@@ -0,0 +1,38 @@
+import { useCallback } from 'react';
+
+import { GRID_COL_SIZE, GRID_ROW_SIZE } from '@/constants/dashboard';
+
+export const useGridCellSize = () => {
+  const GRID_HEIGHT_SIZE = 724;
+  const GRID_WIDTH_SIZE = 550;
+  const GRID_GAP_SIZE = 20;
+
+  const cellColSize =
+    (GRID_WIDTH_SIZE - GRID_GAP_SIZE * (GRID_COL_SIZE - 1)) / GRID_COL_SIZE;
+  const cellRowSize =
+    (GRID_HEIGHT_SIZE - GRID_GAP_SIZE * (GRID_ROW_SIZE - 1)) / GRID_ROW_SIZE;
+
+  const getGridPosition = useCallback(
+    (rowNo: number, colNo: number) => {
+      const leftInPixel = (colNo - 1) * (cellColSize + GRID_GAP_SIZE);
+      const topInPixel = (rowNo - 1) * (cellRowSize + GRID_GAP_SIZE);
+
+      return { topInPixel, leftInPixel };
+    },
+    [cellColSize, cellRowSize],
+  );
+
+  const getGridCardSize = useCallback(
+    (sizeX: number, sizeY: number) => {
+      const widthInPixel = sizeX * cellColSize + (sizeX - 1) * GRID_GAP_SIZE;
+      const heightInPixel = sizeY * cellRowSize + (sizeY - 1) * GRID_GAP_SIZE;
+      return { widthInPixel, heightInPixel };
+    },
+    [cellColSize, cellRowSize],
+  );
+
+  return {
+    getGridPosition,
+    getGridCardSize,
+  };
+};
diff --git a/frontend/src/hooks/ingredient/useMenusManagement.ts b/frontend/src/hooks/ingredient/useMenusManagement.ts
index 73d18e93..042b8740 100644
--- a/frontend/src/hooks/ingredient/useMenusManagement.ts
+++ b/frontend/src/hooks/ingredient/useMenusManagement.ts
@@ -24,7 +24,7 @@ export const useMenusManagement = ({ menus }: UseMenusManagementParams) => {
       pagination.setCurrentPage(1);
     };
     resetCurrentPageNumber();
-  }, [categoryMenus.selectedCategory]);
+  }, [categoryMenus.selectedCategory, pagination]);
 
   // selectedCategory는 맨 처음 마운트 될 땐 null 값으로 설정됨
   // -> 서버에서 데이터 가져오면 그걸 기반으로 첫 번째 카테고리를 선택된 카테고리로 설정해줘야함
@@ -40,7 +40,7 @@ export const useMenusManagement = ({ menus }: UseMenusManagementParams) => {
     ) {
       setFirstCategory();
     }
-  }, [categoryMenus.categories]);
+  }, [categoryMenus, categoryMenus.categories]);
 
   return {
     ...categoryMenus,
diff --git a/frontend/src/hooks/shared/useThrottle.ts b/frontend/src/hooks/shared/useThrottle.ts
new file mode 100644
index 00000000..d8e1450f
--- /dev/null
+++ b/frontend/src/hooks/shared/useThrottle.ts
@@ -0,0 +1,33 @@
+import { useEffect, useMemo, useRef } from 'react';
+
+import { throttle } from '@/utils/shared';
+
+/**
+ * @param fn - 스로틀링 할 함수
+ * @param throttleMs - 스로틀링 간격 (millisecond 단위), 기본값 50ms
+ */
+export function useThrottle<T extends unknown[]>(
+  fn: (...args: T) => void,
+  throttleMs = 50,
+) {
+  // 실행할 함수의 최신 참조
+  const fnRef = useRef(fn);
+  useEffect(() => {
+    fnRef.current = fn;
+  }, [fn]);
+
+  // 스로틀 인스턴스를 한 번만 생성
+  const throttledFn = useMemo(() => {
+    // eslint-disable-next-line react-hooks/refs
+    return throttle((...args: T) => {
+      fnRef.current(...args);
+    }, throttleMs);
+  }, [throttleMs]);
+
+  // 타이머 클리어
+  useEffect(() => {
+    return () => throttledFn.cancel();
+  }, [throttledFn]);
+
+  return throttledFn;
+}
diff --git a/frontend/src/types/dashboard/dashboardCard.ts b/frontend/src/types/dashboard/dashboardCard.ts
index 8aa32307..23801753 100644
--- a/frontend/src/types/dashboard/dashboardCard.ts
+++ b/frontend/src/types/dashboard/dashboardCard.ts
@@ -1,7 +1,17 @@
-import type { MetricCardCode } from '@/constants/dashboard';
+import type { DashboardEditArea, MetricCardCode } from '@/constants/dashboard';
 
 export interface DashboardCard {
   cardCode: MetricCardCode;
   rowNo: number;
   colNo: number;
 }
+export interface DragState {
+  sourceArea: DashboardEditArea;
+  draggingCard: DashboardCard;
+  centerOffset: { x: number; y: number };
+}
+export interface GhostState {
+  rowNo: number;
+  colNo: number;
+  isValid: boolean;
+}
diff --git a/frontend/src/types/dashboard/index.ts b/frontend/src/types/dashboard/index.ts
index aa857d6b..92b2767c 100644
--- a/frontend/src/types/dashboard/index.ts
+++ b/frontend/src/types/dashboard/index.ts
@@ -1,4 +1,4 @@
-export type { DashboardCard } from './dashboardCard';
+export type { DashboardCard, DragState, GhostState } from './dashboardCard';
 export type { Dashboard } from './dashboard';
 export type {
   GetDashboardListResponseDto,
diff --git a/frontend/src/utils/dashboard/editCard.ts b/frontend/src/utils/dashboard/editCard.ts
index a7ceddb4..8732570c 100644
--- a/frontend/src/utils/dashboard/editCard.ts
+++ b/frontend/src/utils/dashboard/editCard.ts
@@ -1,12 +1,11 @@
 import {
+  DASHBOARD_METRIC_CARDS,
   GRID_COL_SIZE,
   GRID_ROW_SIZE,
   type MetricCardCode,
 } from '@/constants/dashboard';
 import type { DashboardCard } from '@/types/dashboard';
 
-type Grid = (MetricCardCode | null)[][];
-
 interface GridPosition {
   row: number;
   col: number;
@@ -14,32 +13,68 @@ interface GridPosition {
 
 const INVALID_POSITION: GridPosition = { row: -1, col: -1 };
 
-export const cloneGrid = (grid: Grid): Grid => grid.map((row) => [...row]);
+const getGridFromPlacedCards = (placedCards: DashboardCard[]) => {
+  const grid: (MetricCardCode | null)[][] = Array.from(
+    { length: GRID_ROW_SIZE + 1 },
+    () => Array(GRID_COL_SIZE + 1).fill(null),
+  );
 
-export const isSameGrid = (grid1: Grid, grid2: Grid): boolean => {
-  for (let r = 1; r <= GRID_ROW_SIZE; r++) {
-    for (let c = 1; c <= GRID_COL_SIZE; c++) {
-      if (grid1[r][c] !== grid2[r][c]) {
-        return false;
+  placedCards.forEach(({ cardCode, rowNo, colNo }) => {
+    const cardDef = DASHBOARD_METRIC_CARDS[cardCode];
+    if (cardDef) {
+      for (let r = rowNo; r < rowNo + cardDef.sizeY; r++) {
+        for (let c = colNo; c < colNo + cardDef.sizeX; c++) {
+          grid[r][c] = cardCode;
+        }
       }
     }
+  });
+
+  return grid;
+};
+
+export const isSameGrid = (
+  placedCardList1: DashboardCard[],
+  placedCardList2: DashboardCard[],
+): boolean => {
+  if (placedCardList1.length !== placedCardList2.length) {
+    return false;
+  }
+
+  // 카드 배치 비교를 위해 카드 코드를 키로 하는 맵 생성
+  const placedCardMap1 = new Map<string, DashboardCard>();
+  const placedCardMap2 = new Map<string, DashboardCard>();
+
+  placedCardList1.forEach((card) => placedCardMap1.set(card.cardCode, card));
+  placedCardList2.forEach((card) => placedCardMap2.set(card.cardCode, card));
+
+  for (const [cardCode, placedCard1] of placedCardMap1.entries()) {
+    const matchingPlacedCard2 = placedCardMap2.get(cardCode);
+    if (
+      !matchingPlacedCard2 ||
+      placedCard1.rowNo !== matchingPlacedCard2.rowNo ||
+      placedCard1.colNo !== matchingPlacedCard2.colNo
+    ) {
+      return false;
+    }
   }
   return true;
 };
 
-export const hasCardOnGrid = (grid: Grid, cardCode: MetricCardCode) => {
-  for (let r = 1; r <= GRID_ROW_SIZE; r++) {
-    for (let c = 1; c <= GRID_COL_SIZE; c++) {
-      if (grid[r][c] === cardCode) {
-        return true;
-      }
+export const isCardPlaced = (
+  placedCards: DashboardCard[],
+  cardCode: MetricCardCode,
+) => {
+  for (const card of placedCards) {
+    if (card.cardCode === cardCode) {
+      return true;
     }
   }
   return false;
 };
 
-export const isAreaAvailableOnGrid = (
-  grid: Grid,
+const isAreaAvailableOnGrid = (
+  grid: (MetricCardCode | null)[][],
   row: number,
   col: number,
   sizeX: number,
@@ -56,10 +91,12 @@ export const isAreaAvailableOnGrid = (
 };
 
 export const getAvailablePositionOnGrid = (
-  grid: Grid,
+  placedCards: DashboardCard[],
   sizeX: number,
   sizeY: number,
 ): GridPosition => {
+  const grid = getGridFromPlacedCards(placedCards);
+
   for (let r = 1; r <= GRID_ROW_SIZE; r++) {
     for (let c = 1; c <= GRID_COL_SIZE; c++) {
       if (isAreaAvailableOnGrid(grid, r, c, sizeX, sizeY)) {
@@ -70,53 +107,54 @@ export const getAvailablePositionOnGrid = (
   return INVALID_POSITION;
 };
 
-export const addCardOnGrid = (
-  grid: Grid,
-  position: GridPosition,
-  sizeX: number,
-  sizeY: number,
-  cardCode: MetricCardCode,
+const isOverlapping = (
+  row1: number,
+  col1: number,
+  width1: number,
+  height1: number,
+  row2: number,
+  col2: number,
+  width2: number,
+  height2: number,
 ) => {
-  for (let r = position.row; r < position.row + sizeY; r++) {
-    for (let c = position.col; c < position.col + sizeX; c++) {
-      grid[r][c] = cardCode;
-    }
-  }
-};
+  const xStart1 = col1; // 첫번째 카드의 시작 x좌표
+  const xEnd1 = col1 + width1 - 1; // 첫번째 카드의 끝 x좌표
+  const yStart1 = row1; // 첫번째 카드의 시작 y좌표
+  const yEnd1 = row1 + height1 - 1; // 첫번째 카드의 끝 y좌표
 
-export const removeCardFromGrid = (grid: Grid, cardCode: MetricCardCode) => {
-  for (let r = 1; r <= GRID_ROW_SIZE; r++) {
-    for (let c = 1; c <= GRID_COL_SIZE; c++) {
-      if (grid[r][c] === cardCode) {
-        grid[r][c] = null;
-      }
-    }
-  }
-};
+  const xStart2 = col2;
+  const xEnd2 = col2 + width2 - 1;
+  const yStart2 = row2;
+  const yEnd2 = row2 + height2 - 1;
 
-export const getCardListFromGrid = (grid: Grid): DashboardCard[] => {
-  const cardList: DashboardCard[] = [];
-  const cardSet = new Set<string>();
-  for (let r = 1; r <= GRID_ROW_SIZE; r++) {
-    for (let c = 1; c <= GRID_COL_SIZE; c++) {
-      const code = grid[r][c];
-      if (code !== null && !cardSet.has(code)) {
-        cardList.push({ cardCode: code, rowNo: r, colNo: c });
-        cardSet.add(code);
-      }
-    }
-  }
-  return cardList;
+  const isYOverlapping = yEnd1 >= yStart2 && yEnd2 >= yStart1;
+  const isXOverlapping = xEnd1 >= xStart2 && xEnd2 >= xStart1;
+
+  return isYOverlapping && isXOverlapping;
 };
 
-export const countEmptyCellsOnGrid = (grid: Grid) => {
-  let count = 0;
-  for (let r = 1; r <= GRID_ROW_SIZE; r++) {
-    for (let c = 1; c <= GRID_COL_SIZE; c++) {
-      if (grid[r][c] === null) {
-        count++;
-      }
+export const getConflictingCards = (
+  ghostCard: DashboardCard,
+  placedCards: DashboardCard[],
+) => {
+  return placedCards.filter((c) => {
+    if (c.cardCode === ghostCard.cardCode) {
+      return false; // 자기 자신과는 충돌하지 않음
     }
-  }
-  return count;
+
+    const cDef = DASHBOARD_METRIC_CARDS[c.cardCode];
+    const ghostCardDef = DASHBOARD_METRIC_CARDS[ghostCard.cardCode];
+
+    return isOverlapping(
+      // row, col, sizeX, sizeY
+      ghostCard.rowNo,
+      ghostCard.colNo,
+      ghostCardDef.sizeX,
+      ghostCardDef.sizeY,
+      c.rowNo,
+      c.colNo,
+      cDef.sizeX,
+      cDef.sizeY,
+    );
+  });
 };
diff --git a/frontend/src/utils/dashboard/index.ts b/frontend/src/utils/dashboard/index.ts
index e62c2988..da5bf546 100644
--- a/frontend/src/utils/dashboard/index.ts
+++ b/frontend/src/utils/dashboard/index.ts
@@ -1,9 +1,7 @@
 export { getMetricTrend } from './getMetricTrend';
 export {
   getAvailablePositionOnGrid,
-  addCardOnGrid,
-  hasCardOnGrid,
-  isAreaAvailableOnGrid,
-  removeCardFromGrid,
+  isCardPlaced,
   isSameGrid,
+  getConflictingCards,
 } from './editCard';
diff --git a/frontend/src/utils/shared/index.ts b/frontend/src/utils/shared/index.ts
index df454ca4..f5da895c 100644
--- a/frontend/src/utils/shared/index.ts
+++ b/frontend/src/utils/shared/index.ts
@@ -50,3 +50,4 @@ export {
   getBarWidth,
   getLabelContentText,
 } from './bar-chart';
+export { throttle } from './throttle';
diff --git a/frontend/src/utils/shared/throttle.ts b/frontend/src/utils/shared/throttle.ts
new file mode 100644
index 00000000..91b7332a
--- /dev/null
+++ b/frontend/src/utils/shared/throttle.ts
@@ -0,0 +1,53 @@
+type ThrottledFunction<T extends unknown[]> = ((...args: T) => void) & {
+  cancel: () => void;
+};
+
+export function throttle<T extends unknown[]>(
+  fn: (...args: T) => void,
+  throttleMs = 50,
+): ThrottledFunction<T> {
+  let pendingAt = 0;
+  let timeoutId: ReturnType<typeof setTimeout> | null = null;
+  let savedArgs: T | null = null;
+
+  const throttled = ((...args: T) => {
+    const now = Date.now();
+    const remain = throttleMs - (now - pendingAt);
+
+    // 이전 호출이 아직 유효한 경우
+    savedArgs = args;
+
+    // 실행
+    if (remain <= 0 || pendingAt === 0) {
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+        timeoutId = null;
+      }
+      pendingAt = now;
+      fn(...args);
+      savedArgs = null;
+    }
+    // 타이머 설정
+    else if (!timeoutId) {
+      timeoutId = setTimeout(() => {
+        pendingAt = Date.now();
+        timeoutId = null;
+        if (savedArgs) {
+          fn(...savedArgs);
+          savedArgs = null;
+        }
+      }, remain);
+    }
+  }) as ThrottledFunction<T>;
+
+  throttled.cancel = () => {
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+      timeoutId = null;
+    }
+    pendingAt = 0;
+    savedArgs = null;
+  };
+
+  return throttled;
+}