diff --git a/apps/cm/src/pages/dashboard/lib/hooks/use-panel-order.ts b/apps/cm/src/pages/dashboard/lib/hooks/use-panel-order.ts
index 8842e43db..412774210 100644
--- a/apps/cm/src/pages/dashboard/lib/hooks/use-panel-order.ts
+++ b/apps/cm/src/pages/dashboard/lib/hooks/use-panel-order.ts
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { arrayMove } from "@dnd-kit/sortable";
 import type { DragEndEvent } from "@dnd-kit/core";
 import type { PanelItem } from "../../model/types";
@@ -12,25 +12,28 @@ export function usePanelOrder({
   initialPanels,
   storageKey,
 }: UsePanelOrderProps) {
-  const [panels, setPanels] = useState<PanelItem[]>(() => {
-    if (typeof window !== "undefined") {
-      const saved = localStorage.getItem(storageKey);
-      if (saved) {
-        try {
-          const savedIds = JSON.parse(saved);
-          const restoredPanels = savedIds
-            .map((id: string) => initialPanels.find((p) => p.id === id))
-            .filter(Boolean);
-          if (restoredPanels.length === initialPanels.length) {
-            return restoredPanels;
-          }
-        } catch {
-          return initialPanels;
+  const [panels, setPanels] = useState<PanelItem[]>(initialPanels);
+  const [isInitialized, setIsInitialized] = useState(false);
+
+  useEffect(() => {
+    if (isInitialized) return;
+
+    const saved = localStorage.getItem(storageKey);
+    if (saved) {
+      try {
+        const savedIds = JSON.parse(saved);
+        const restoredPanels = savedIds
+          .map((id: string) => initialPanels.find((p) => p.id === id))
+          .filter(Boolean);
+        if (restoredPanels.length === initialPanels.length) {
+          setPanels(restoredPanels);
         }
+      } catch {
+        setPanels(initialPanels);
       }
     }
-    return initialPanels;
-  });
+    setIsInitialized(true);
+  }, [storageKey]);
 
   const handleDragEnd = (event: DragEndEvent) => {
     const { active, over } = event;
diff --git a/apps/cm/src/pages/dashboard/ui/banner-list.tsx b/apps/cm/src/pages/dashboard/ui/banner-list.tsx
index d3ae54610..6404faa85 100644
--- a/apps/cm/src/pages/dashboard/ui/banner-list.tsx
+++ b/apps/cm/src/pages/dashboard/ui/banner-list.tsx
@@ -9,6 +9,7 @@ import {
   type Banner,
 } from "../api/banner-service";
 import { getCookie } from "@/shared/lib";
+import { useDragHandle } from "./sortable-panel";
 
 import {
   Carousel,
@@ -25,6 +26,7 @@ type BannerImageProps = {
 };
 
 const BannerList: React.FC = () => {
+  const { dragHandleProps, isDragging } = useDragHandle();
   const [siteId, setSiteId] = useState<string>("");
 
   useEffect(() => {
@@ -157,6 +159,12 @@ const BannerList: React.FC = () => {
 
   return (
     <div className="card card-border" style={{ height: "230px" }}>
+      {/* 드래그 핸들 - 배너 위에 오버레이 */}
+      <div 
+        className={`absolute inset-0 z-10 cursor-grab active:cursor-grabbing ${isDragging ? 'bg-black/20' : 'bg-transparent'}`}
+        {...dragHandleProps}
+        title="배너를 드래그하여 패널 순서 변경"
+      />
       <Carousel
         plugins={[plugin.current]}
         opts={{ loop: true }}
diff --git a/apps/cm/src/pages/dashboard/ui/dashboard-page.tsx b/apps/cm/src/pages/dashboard/ui/dashboard-page.tsx
index 41e855c01..9d5e9179a 100644
--- a/apps/cm/src/pages/dashboard/ui/dashboard-page.tsx
+++ b/apps/cm/src/pages/dashboard/ui/dashboard-page.tsx
@@ -53,6 +53,7 @@ interface UserInfo {
 function DashboardPage() {
   const [userInfo, setUserInfo] = useState<UserInfo | null>(null);
   const [error, setError] = useState("");
+  const [isMounted, setIsMounted] = useState(false);
   const router = useRouter();
 
   // dnd-kit 센서 설정
@@ -70,6 +71,11 @@ function DashboardPage() {
       storageKey: "dashboard-bottom-panels-order",
     });
 
+  // 클라이언트에서만 드래그 기능 활성화 (hydration 문제 방지)
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
+
   useEffect(() => {
     const fetchUserInfo = async () => {
       console.log("fetchUserInfo called");
@@ -134,28 +140,38 @@ function DashboardPage() {
         <div className="flex flex-col gap-1 lg:flex-row">
           {/* 좌측: 드래그 가능한 6개 패널 (2x3 그리드, 화면의 50%) */}
           <div className="w-full lg:w-1/2">
-            <DndContext
-              sensors={sensors}
-              collisionDetection={closestCenter}
-              onDragEnd={handleTopDragEnd}
-            >
-              <SortableContext
-                items={topPanels.map((p) => p.id)}
-                strategy={rectSortingStrategy}
+            {isMounted ? (
+              <DndContext
+                sensors={sensors}
+                collisionDetection={closestCenter}
+                onDragEnd={handleTopDragEnd}
               >
-                <div className="grid grid-cols-2 gap-1">
-                  {topPanels.map((panel) => (
-                    <SortablePanel
-                      key={panel.id}
-                      id={panel.id}
-                      className={panel.className}
-                    >
-                      {panel.component}
-                    </SortablePanel>
-                  ))}
-                </div>
-              </SortableContext>
-            </DndContext>
+                <SortableContext
+                  items={topPanels.map((p) => p.id)}
+                  strategy={rectSortingStrategy}
+                >
+                  <div className="grid grid-cols-2 gap-1">
+                    {topPanels.map((panel) => (
+                      <SortablePanel
+                        key={panel.id}
+                        id={panel.id}
+                        className={panel.className}
+                      >
+                        {panel.component}
+                      </SortablePanel>
+                    ))}
+                  </div>
+                </SortableContext>
+              </DndContext>
+            ) : (
+              <div className="grid grid-cols-2 gap-1">
+                {topPanels.map((panel) => (
+                  <div key={panel.id} className={panel.className}>
+                    {panel.component}
+                  </div>
+                ))}
+              </div>
+            )}
           </div>
 
           {/* 우측: 고정된 지도와 사용자 정보 (화면의 50%) */}
@@ -231,28 +247,38 @@ function DashboardPage() {
         </div>
 
         {/* 두번째 라인 - 드래그 가능한 4개 패널 */}
-        <DndContext
-          sensors={sensors}
-          collisionDetection={closestCenter}
-          onDragEnd={handleBottomDragEnd}
-        >
-          <SortableContext
-            items={bottomPanels.map((p) => p.id)}
-            strategy={rectSortingStrategy}
+        {isMounted ? (
+          <DndContext
+            sensors={sensors}
+            collisionDetection={closestCenter}
+            onDragEnd={handleBottomDragEnd}
           >
-            <div className="grid grid-cols-1 gap-1 sm:grid-cols-2 lg:grid-cols-4">
-              {bottomPanels.map((panel) => (
-                <SortablePanel
-                  key={panel.id}
-                  id={panel.id}
-                  className="card card-border"
-                >
-                  <div style={{ height: "250px" }}>{panel.component}</div>
-                </SortablePanel>
-              ))}
-            </div>
-          </SortableContext>
-        </DndContext>
+            <SortableContext
+              items={bottomPanels.map((p) => p.id)}
+              strategy={rectSortingStrategy}
+            >
+              <div className="grid grid-cols-1 gap-1 sm:grid-cols-2 lg:grid-cols-4">
+                {bottomPanels.map((panel) => (
+                  <SortablePanel
+                    key={panel.id}
+                    id={panel.id}
+                    className="card card-border"
+                  >
+                    <div style={{ height: "250px" }}>{panel.component}</div>
+                  </SortablePanel>
+                ))}
+              </div>
+            </SortableContext>
+          </DndContext>
+        ) : (
+          <div className="grid grid-cols-1 gap-1 sm:grid-cols-2 lg:grid-cols-4">
+            {bottomPanels.map((panel) => (
+              <div key={panel.id} className="card card-border">
+                <div style={{ height: "250px" }}>{panel.component}</div>
+              </div>
+            ))}
+          </div>
+        )}
       </div>
     </div>
   );
diff --git a/apps/cm/src/pages/dashboard/ui/datastatus-list.tsx b/apps/cm/src/pages/dashboard/ui/datastatus-list.tsx
index bae89e338..74e10afea 100644
--- a/apps/cm/src/pages/dashboard/ui/datastatus-list.tsx
+++ b/apps/cm/src/pages/dashboard/ui/datastatus-list.tsx
@@ -5,6 +5,7 @@ import { useQuery } from "@tanstack/react-query";
 import { ENDPOINT } from "@/shared/config";
 import { getDataStatusList, type DataStatus } from "../api/datastatus-service";
 import type { PageableList } from "@/shared/model";
+import { useDragHandle } from "./sortable-panel";
 
 import {
   Carousel,
@@ -35,6 +36,7 @@ const getRegionInfo = (regionName: string) => {
 };
 
 const DataStatusList: React.FC = () => {
+  const { dragHandleProps, isDragging } = useDragHandle();
   const plugin = useRef(
     Autoplay({ delay: 3000, stopOnInteraction: true })
   );
@@ -106,7 +108,11 @@ const DataStatusList: React.FC = () => {
 
   return (
     <>
-      <div className="card_title bottomline">
+      <div 
+        className={`card_title bottomline cursor-grab active:cursor-grabbing ${isDragging ? 'opacity-50' : ''}`}
+        {...dragHandleProps}
+        title="헤더를 드래그하여 패널 순서 변경"
+      >
         <div className="leftArea">
           <h4>자료현황</h4>
         </div>
diff --git a/apps/cm/src/pages/dashboard/ui/fo-fclt-cnt-rt.tsx b/apps/cm/src/pages/dashboard/ui/fo-fclt-cnt-rt.tsx
index 2a0264e43..5db22db6e 100644
--- a/apps/cm/src/pages/dashboard/ui/fo-fclt-cnt-rt.tsx
+++ b/apps/cm/src/pages/dashboard/ui/fo-fclt-cnt-rt.tsx
@@ -9,8 +9,10 @@ import { Doughnut } from "react-chartjs-2";
 import type { Chart as ChartJS } from "chart.js";
 // import type { mapOperFcltItem, mapBasinData } from "../model/fo-interface";
 import { OperationApi, operFcltStore, basinStore } from "../api/fo-service";
+import { useDragHandle } from "./sortable-panel";
 
 const FoFcltCntRt: React.FC = () => {
+  const { dragHandleProps, isDragging } = useDragHandle();
   const [year, setYear] = useState<string | null>(null);
   const { selectedBasin, setSelectedBasin } = useStore(basinStore);
   const operFcltStatus = useStore(operFcltStore, (state) => state.operFcltStatus);
@@ -57,9 +59,18 @@ const FoFcltCntRt: React.FC = () => {
 
   return (
     <div className="card card-border" style={{ height: "250px" }}>
-      <div className="card-header text-foreground">
+      <div 
+        className={`card-header text-foreground cursor-grab active:cursor-grabbing ${isDragging ? 'opacity-50' : ''}`}
+        {...dragHandleProps}
+        title="헤더를 드래그하여 패널 순서 변경"
+      >
         <h3 className="text-2xl font-medium">수계별 시설운영 개소수 및 가동률</h3>
-        <BasinSelect selectedBasin={selectedBasin} onValueChange={onBasinChange} />
+        <div 
+          onPointerDown={(e) => e.stopPropagation()}
+          onClick={(e) => e.stopPropagation()}
+        >
+          <BasinSelect selectedBasin={selectedBasin} onValueChange={onBasinChange} />
+        </div>
       </div>
       <div className="h-70 p-4">
         <div className="flex gap-2 h-full">
diff --git a/apps/cm/src/pages/dashboard/ui/fo-wqlt-Infl-effl.tsx b/apps/cm/src/pages/dashboard/ui/fo-wqlt-Infl-effl.tsx
index 4c01fbdd0..6b416c5ed 100644
--- a/apps/cm/src/pages/dashboard/ui/fo-wqlt-Infl-effl.tsx
+++ b/apps/cm/src/pages/dashboard/ui/fo-wqlt-Infl-effl.tsx
@@ -14,6 +14,7 @@ import {
 import type { OperWqltContent } from "../model/fo-interface";
 import { OperationApi, basinStore } from "../api/fo-service";
 import { defaultInitOperWqltState } from "../api/fo-service";
+import { useDragHandle } from "./sortable-panel";
 
 // Chart.js 등록
 ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend);
@@ -21,6 +22,7 @@ ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, T
 type WaterQualityType = 'BOD' | 'TOC' | 'SS' | 'TP' | 'TN';
 
 const FoWqltInflEffl: React.FC = () => {
+  const { dragHandleProps, isDragging } = useDragHandle();
   const { selectedBasin, setSelectedBasin } = useStore(basinStore);
   const [selectedTab, setSelectedTab] = useState<WaterQualityType>('BOD');  
   const [wqltData, setWqltData] = useState<OperWqltContent[]>([]);
@@ -195,9 +197,18 @@ const FoWqltInflEffl: React.FC = () => {
 
   return (
     <div className="card card-border" style={{ height: "250px" }}>
-      <div className="card-header text-foreground">
+      <div 
+        className={`card-header text-foreground cursor-grab active:cursor-grabbing ${isDragging ? 'opacity-50' : ''}`}
+        {...dragHandleProps}
+        title="헤더를 드래그하여 패널 순서 변경"
+      >
         <h3 className="text-2xl font-medium">수계별 유입ㆍ방류수질 분석</h3>
-        <BasinSelect  selectedBasin={selectedBasin} onValueChange={onBasinChange}  />
+        <div 
+          onPointerDown={(e) => e.stopPropagation()}
+          onClick={(e) => e.stopPropagation()}
+        >
+          <BasinSelect  selectedBasin={selectedBasin} onValueChange={onBasinChange}  />
+        </div>
       </div>
       <div className="h-70 p-0 flex items-center justify-center">
         <div style={{ width: "100%", maxWidth: 400, height: 180 }}>
diff --git a/apps/cm/src/pages/dashboard/ui/notice-list.tsx b/apps/cm/src/pages/dashboard/ui/notice-list.tsx
index 86e21a4a3..b69e5ae0d 100644
--- a/apps/cm/src/pages/dashboard/ui/notice-list.tsx
+++ b/apps/cm/src/pages/dashboard/ui/notice-list.tsx
@@ -10,9 +10,11 @@ import {
   noticePostTableColumns,
 } from "../model/table-columns";
 import { Button } from "@common/components";
+import { useDragHandle } from "./sortable-panel";
 
 
 const NoticeList: React.FC = () => {
+    const { dragHandleProps, isDragging } = useDragHandle();
     const router = useRouter();
     const noticePostQuery = useQuery({
         queryKey: [ENDPOINT.BOARD_SERVICE.POSTS],
@@ -51,9 +53,18 @@ const NoticeList: React.FC = () => {
 
   return (
     <div className="card card-border !p-0"  style={{ height: "220px" }}>
-      <div className="card-header !m-0 !border-none text-foreground">
+      <div 
+        className={`card-header !m-0 !border-none text-foreground cursor-grab active:cursor-grabbing ${isDragging ? 'opacity-50' : ''}`}
+        {...dragHandleProps}
+        title="헤더를 드래그하여 패널 순서 변경"
+      >
         <h3 className="text-2xl font-medium">공지사항</h3>
-        <Button className="h-[3.2rem]" onClick={handleMoreClick}>더보기</Button>
+        <div 
+          onPointerDown={(e) => e.stopPropagation()}
+          onClick={(e) => e.stopPropagation()}
+        >
+          <Button className="h-[3.2rem]" onClick={handleMoreClick}>더보기</Button>
+        </div>
       </div>
       {noticePostTableComponent}
     </div>
diff --git a/apps/cm/src/pages/dashboard/ui/reuse-chart.tsx b/apps/cm/src/pages/dashboard/ui/reuse-chart.tsx
index edcc19b97..55d9e6abb 100644
--- a/apps/cm/src/pages/dashboard/ui/reuse-chart.tsx
+++ b/apps/cm/src/pages/dashboard/ui/reuse-chart.tsx
@@ -8,6 +8,7 @@ import { Line } from 'react-chartjs-2';
 import { Button } from "@common/components";
 import type { ReuseStatusContent } from "../model/fo-interface";
 import { OperationApi, reuseStore } from "../api/fo-service";
+import { useDragHandle } from "./sortable-panel";
 import {
   Chart as ChartJS,
   CategoryScale,
@@ -36,6 +37,7 @@ ChartJS.register(
 
 
 const ReuseChart: React.FC = () => {  
+  const { dragHandleProps, isDragging } = useDragHandle();
   const [activeIndex, setActiveIndex] = useState(0);
   const intervalRef = useRef<NodeJS.Timeout | null>(null);
   const reuseStatusData = useStore(
@@ -183,9 +185,18 @@ const ReuseChart: React.FC = () => {
 
   return (
     <div className="card card-border" style={{ height: "250px" }}>
-      <div className="card-header text-foreground">
+      <div 
+        className={`card-header text-foreground cursor-grab active:cursor-grabbing ${isDragging ? 'opacity-50' : ''}`}
+        {...dragHandleProps}
+        title="헤더를 드래그하여 패널 순서 변경"
+      >
         <h3 className="text-2xl font-medium">{chartItems[activeIndex]?.title}</h3>
-        <Button  className="h-[3.2rem]" onClick={handleMoreClick}>더보기</Button>
+        <div 
+          onPointerDown={(e) => e.stopPropagation()}
+          onClick={(e) => e.stopPropagation()}
+        >
+          <Button  className="h-[3.2rem]" onClick={handleMoreClick}>더보기</Button>
+        </div>
       </div>
       <div className="relative" style={{ maxWidth: 400, height: 180, marginLeft: 20 }}>
         <div className="h-full">
diff --git a/apps/cm/src/pages/dashboard/ui/reuse-status.tsx b/apps/cm/src/pages/dashboard/ui/reuse-status.tsx
index d1e7c4c15..6c596eba9 100644
--- a/apps/cm/src/pages/dashboard/ui/reuse-status.tsx
+++ b/apps/cm/src/pages/dashboard/ui/reuse-status.tsx
@@ -7,8 +7,10 @@ import { useStore } from "zustand";
 import { Button } from "@common/components";
 import type { ReuseStatusContent } from "../model/fo-interface";
 import { OperationApi, reuseStore} from "../api/fo-service";
+import { useDragHandle } from "./sortable-panel";
 
 const ReuseStatus: React.FC = () => {
+  const { dragHandleProps, isDragging } = useDragHandle();
   // const [reuseStatusData, setReuseStatusData] = useState<ReuseStatusContent[]>([]);
   const reuseStatusData = useStore(
     reuseStore,
@@ -32,9 +34,18 @@ const ReuseStatus: React.FC = () => {
 
   return (
     <div className="card card-border" style={{ height: "250px" }}>
-      <div className="card-header text-foreground">
+      <div 
+        className={`card-header text-foreground cursor-grab active:cursor-grabbing ${isDragging ? 'opacity-50' : ''}`}
+        {...dragHandleProps}
+        title="헤더를 드래그하여 패널 순서 변경"
+      >
         <h3 className="text-2xl font-medium">물재이용 현황 (재이용량, m³)</h3>
-        <Button  className="h-[3.2rem]" onClick={handleMoreClick}>더보기</Button>
+        <div 
+          onPointerDown={(e) => e.stopPropagation()}
+          onClick={(e) => e.stopPropagation()}
+        >
+          <Button  className="h-[3.2rem]" onClick={handleMoreClick}>더보기</Button>
+        </div>
       </div>
       <div className="h-70 p-4">
         <div className="w-full h-full flex items-center justify-center">
diff --git a/apps/cm/src/pages/dashboard/ui/sn-old-ppl.tsx b/apps/cm/src/pages/dashboard/ui/sn-old-ppl.tsx
index b1a34139c..fa502e7c5 100644
--- a/apps/cm/src/pages/dashboard/ui/sn-old-ppl.tsx
+++ b/apps/cm/src/pages/dashboard/ui/sn-old-ppl.tsx
@@ -17,12 +17,14 @@ import { Bar } from "react-chartjs-2";
 import { Button } from "@common/components";
 import type { PplLengthContent, ChartDataSet, OldPplChartData } from "../model/sn-interface";
 import { SewerageApi, useOldPplStore,useMapOldPplStore, transformChartDataToMapData } from "../api/sn-service";
+import { useDragHandle } from "./sortable-panel";
 
 
 // ChartJS 컴포넌트 등록
 ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend);
 
 export default function SnOldPpl() {
+  const { dragHandleProps, isDragging } = useDragHandle();
   const [oldPplLenData, setOldPplLenData] = useState<PplLengthContent[]>([]);
   const {chartData, setChartData}  = useOldPplStore();
   const {setMapData}  = useMapOldPplStore();
@@ -170,9 +172,18 @@ export default function SnOldPpl() {
 
   return (
     <div className="card card-border" style={{ height: "250px" }}>
-      <div className="card-header text-foreground">
+      <div 
+        className={`card-header text-foreground cursor-grab active:cursor-grabbing ${isDragging ? 'opacity-50' : ''}`}
+        {...dragHandleProps}
+        title="헤더를 드래그하여 패널 순서 변경"
+      >
         <h3 className="text-2xl font-medium">노후 하수관로 현황</h3>
-        <Button  className="h-[3.2rem]" onClick={handleMoreClick}>더보기</Button>
+        <div 
+          onPointerDown={(e) => e.stopPropagation()}
+          onClick={(e) => e.stopPropagation()}
+        >
+          <Button  className="h-[3.2rem]" onClick={handleMoreClick}>더보기</Button>
+        </div>
       </div>
       <div className="h-70 p-0 flex items-center justify-center">
         <div style={{ width: "100%", maxWidth: 400, height: 180 }}>
diff --git a/apps/cm/src/pages/dashboard/ui/sn-ppl-status.tsx b/apps/cm/src/pages/dashboard/ui/sn-ppl-status.tsx
index 014f592c4..022430da0 100644
--- a/apps/cm/src/pages/dashboard/ui/sn-ppl-status.tsx
+++ b/apps/cm/src/pages/dashboard/ui/sn-ppl-status.tsx
@@ -17,6 +17,7 @@ import { Bar } from "react-chartjs-2";
 import { Button } from "@common/components";
 import type { PplLengthContent } from "../model/sn-interface";
 import { SewerageApi,useUsePplStore } from "../api/sn-service";
+import { useDragHandle } from "./sortable-panel";
 
 interface ChartDataSet {
   label: string;
@@ -29,6 +30,7 @@ interface ChartDataSet {
 ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend);
 
 export default function SnPplStatus() {
+  const { dragHandleProps, isDragging } = useDragHandle();
   const {chartData, setChartData}  = useUsePplStore();
   const [usgPplLenData, setUsgPplLenData]  = useState<PplLengthContent[]>([]);
   
@@ -157,10 +159,18 @@ export default function SnPplStatus() {
   };
   return (
     <div className="card card-border" style={{ height: "250px" }}>
-      <div className="card-header text-foreground">
+      <div 
+        className={`card-header text-foreground cursor-grab active:cursor-grabbing ${isDragging ? 'opacity-50' : ''}`}
+        {...dragHandleProps}
+        title="헤더를 드래그하여 패널 순서 변경"
+      >
         <h3 className="text-2xl font-medium">오수관로 및 우수관로 현황</h3>
-        
-        <Button className="h-[3.2rem]" onClick={handleMoreClick}>더보기</Button>
+        <div 
+          onPointerDown={(e) => e.stopPropagation()}
+          onClick={(e) => e.stopPropagation()}
+        >
+          <Button className="h-[3.2rem]" onClick={handleMoreClick}>더보기</Button>
+        </div>
       </div>
       <div className="h-60 p-4">
         <div style={{ width: "100%", maxWidth: 400, height: 180 }}>
diff --git a/apps/cm/src/pages/dashboard/ui/sortable-panel.tsx b/apps/cm/src/pages/dashboard/ui/sortable-panel.tsx
index ce9d2c949..1fb891980 100644
--- a/apps/cm/src/pages/dashboard/ui/sortable-panel.tsx
+++ b/apps/cm/src/pages/dashboard/ui/sortable-panel.tsx
@@ -1,5 +1,6 @@
 import { useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
+import { createContext, useContext } from "react";
 
 interface SortablePanelProps {
   id: string;
@@ -7,6 +8,13 @@ interface SortablePanelProps {
   className?: string;
 }
 
+interface DragHandleContextValue {
+  dragHandleProps: React.HTMLAttributes<HTMLElement>;
+  isDragging: boolean;
+}
+
+const DragHandleContext = createContext<DragHandleContextValue | null>(null);
+
 export function SortablePanel({ id, children, className }: SortablePanelProps) {
   const {
     attributes,
@@ -21,18 +29,36 @@ export function SortablePanel({ id, children, className }: SortablePanelProps) {
     transform: CSS.Transform.toString(transform),
     transition,
     opacity: isDragging ? 0.5 : 1,
-    cursor: isDragging ? "grabbing" : "grab",
+  };
+
+  const contextValue: DragHandleContextValue = {
+    dragHandleProps: { ...attributes, ...listeners },
+    isDragging,
   };
 
   return (
-    <div
-      ref={setNodeRef}
-      style={style}
-      {...attributes}
-      {...listeners}
-      className={className}
-    >
-      {children}
-    </div>
+    <DragHandleContext.Provider value={contextValue}>
+      <div
+        ref={setNodeRef}
+        style={style}
+        className={className}
+      >
+        {children}
+      </div>
+    </DragHandleContext.Provider>
   );
 }
+
+export function useDragHandle() {
+  const context = useContext(DragHandleContext);
+  
+  // Context가 없을 때 (서버 렌더링 또는 isMounted = false) 기본값 반환
+  if (!context) {
+    return {
+      dragHandleProps: {},
+      isDragging: false,
+    };
+  }
+  
+  return context;
+}
diff --git a/apps/cm/src/pages/dashboard/ui/support-list.tsx b/apps/cm/src/pages/dashboard/ui/support-list.tsx
index f62cce9b1..f37dad7eb 100644
--- a/apps/cm/src/pages/dashboard/ui/support-list.tsx
+++ b/apps/cm/src/pages/dashboard/ui/support-list.tsx
@@ -7,8 +7,10 @@ import { useDataTable } from "@/shared/lib";
 import type { PageableList } from "@/shared/model";
 import { supportTableColumns } from "../model/support-columns";
 import { getSupportList, type Support } from "../api/support-service";
+import { useDragHandle } from "./sortable-panel";
 
 const SupportList: React.FC = () => {
+  const { dragHandleProps, isDragging } = useDragHandle();
   const supportQuery = useQuery<PageableList<Support>>({
     queryKey: [ENDPOINT.IC_SERVICE.GROUPING_STATISTICS],
     queryFn: async () => {
@@ -29,7 +31,11 @@ const SupportList: React.FC = () => {
 
   return (
     <div className="card card-border !p-0" style={{ height: "220px" }}>
-      <div className="card-header !m-0 !border-none text-foreground">
+      <div 
+        className={`card-header !m-0 !border-none text-foreground cursor-grab active:cursor-grabbing ${isDragging ? 'opacity-50' : ''}`}
+        {...dragHandleProps}
+        title="헤더를 드래그하여 패널 순서 변경"
+      >
         <h3 className="text-2xl font-medium">지원현황</h3>
       </div>
       {supportTableComponent}