[FE] 대시보드 지표 카드 드래그앤드롭 편집 기능 구현

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,11 @@ export const CardEditView = () => {
         </ButtonGroup>
       </header>
       <CardEditViewTabs />
+      {isOverList && (
+        <div className="bg-others-negative text-grey-0 absolute top-0 right-0 bottom-0 left-0 flex items-center justify-center opacity-50">
+          DROP TO DELETE
+        </div>
+      )}
     </section>
   );
 };

frontend/src/components/dashboard/dashboard-edit/CardEditViewCard.tsx

@@ -2,16 +2,19 @@ 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 } from '@/hooks/dashboard/useDragAndDropCard';
 
 interface CardEditViewCardProps {
   cardCode: MetricCardCode;
 }
 export const CardEditViewCard = ({ cardCode }: CardEditViewCardProps) => {
   const { addCard, removeCard, isAdded } = useEditCard();
+  const { handleDragStart, handleDragEnd } = useDragAndDropCard();
 
   const card = useMemo(() => DASHBOARD_METRIC_CARDS[cardCode], [cardCode]);
 
@@ -32,7 +35,20 @@ export const CardEditViewCard = ({ cardCode }: CardEditViewCardProps) => {
   const { code, label, type, 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}

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>
   );

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">
       <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>
   );

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,40 @@ export const MiniViewActiveCard = ({
   }
   const { label, type, period, sizeX, sizeY } = card;
 
+  const { rowPx, colPx } = getGridPosition(rowNo, colNo);
+  const { widthPx, heightPx } = 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 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}`,
+        left: colPx,
+        top: rowPx,
+        width: widthPx,
+        height: heightPx,
       }}
     >
-      <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>
       {/* 상단 삭제 버튼 */}

frontend/src/components/dashboard/dashboard-edit/MiniViewGhost.tsx

@@ -0,0 +1,36 @@
+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 { rowPx, colPx } = getGridPosition(ghost.rowNo, ghost.colNo);
+  const { widthPx, heightPx } = getGridCardSize(
+    draggingCardDef.sizeX,
+    draggingCardDef.sizeY,
+  );
+
+  return (
+    <div
+      className={cn(
+        'rounded-400 pointer-events-none absolute 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={{
+        left: colPx,
+        top: rowPx,
+        width: widthPx,
+        height: heightPx,
+      }}
+    />
+  );
+};

frontend/src/components/shared/edit-card-wrapper/PlusIconButton.tsx

@@ -8,7 +8,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" />

frontend/src/components/shared/edit-card-wrapper/TrashCanIconButton.tsx

@@ -10,7 +10,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" />

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

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,