[Feat] MyDashboard페이지 D&D 위치변경 저장

[Feat] MyDashboard페이지 D&D 위치변경 저장

Author: MINJI121

package-lock.json

@@ -16,6 +16,7 @@
     "axios": "^1.8.3",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
+    "dexie": "^4.0.11",
     "lodash": "^4.17.21",
     "lucide-react": "^0.485.0",
     "moment": "^2.30.1",

package.json

@@ -0,0 +1,12 @@
+import Dexie from "dexie";
+
+// DB 인스턴스 생성
+export const db = new Dexie("DashboardOrderDB");
+
+// 테이블 구조 정의
+db.version(1).stores({
+  dashboardOrders: "&teamId", // teamId를 키로 사용
+});
+
+// 테이블 객체 export
+export const dashboardOrdersTable = db.table("dashboardOrders");

src/lib/dashboardOrderDB.ts

@@ -29,6 +29,7 @@ import {
   arrayMove,
 } from "@dnd-kit/sortable";
 import SortableCardButton from "@/components/button/SortableCardButton";
+import { dashboardOrdersTable } from "@/lib/dashboardOrderDB";
 
 interface Dashboard {
   id: number;
@@ -57,7 +58,7 @@ export default function MyDashboardPage() {
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
   const [isConfirmDeleteModalOpen, setIsConfirmDeleteModalOpen] =
     useState(false);
-  const itemsPerPage = 6; // 버튼 포함 6개
+  const itemsPerPage = 6;
 
   const sensors = useSensors(
     useSensor(PointerSensor, {
@@ -81,7 +82,18 @@ export default function MyDashboardPage() {
   const fetchDashboards = async () => {
     try {
       const res = await getDashboards({});
-      setDashboardList(res.dashboards);
+      const localOrder = await dashboardOrdersTable.get(TEAM_ID);
+
+      let orderedList = res.dashboards;
+      if (localOrder?.order) {
+        orderedList = res.dashboards
+          .slice()
+          .sort(
+            (a, b) =>
+              localOrder.order.indexOf(a.id) - localOrder.order.indexOf(b.id)
+          );
+      }
+      setDashboardList(orderedList);
     } catch (error) {
       console.error("대시보드 불러오기 실패:", error);
     }
@@ -122,7 +134,7 @@ export default function MyDashboardPage() {
     setSelectedDashboardId(null);
   };
 
-  const handleDragEnd = (event: DragEndEvent) => {
+  const handleDragEnd = async (event: DragEndEvent) => {
     const { active, over } = event;
     if (!over || active.id === over.id) return;
 
@@ -131,6 +143,12 @@ export default function MyDashboardPage() {
 
     const newOrder = arrayMove(dashboardList, oldIndex, newIndex);
     setDashboardList(newOrder);
+
+    //D&D 로컬 순서 저장
+    await dashboardOrdersTable.put({
+      teamId: TEAM_ID,
+      order: newOrder.map((d) => d.id),
+    });
   };
 
   if (!isInitialized || !user) {