ONAANDALL/frontend
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[cm] feat: 대시보드 패널 헤더에 드래그 핸들러 적용

Browse Source
This commit is contained in:
chanii8
2026-02-06 16:33:49 +09:00
parent c9b2ef35b7
commit 355e0ef1e4
13 changed files with 237 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/cm/src/pages/dashboard/lib/hooks/use-panel-order.ts
+20 -17
View File
@@ -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;
apps/cm/src/pages/dashboard/ui/banner-list.tsx
+8
View File
@@ -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 }}
apps/cm/src/pages/dashboard/ui/dashboard-page.tsx
+68 -42
View File
@@ -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>
);
apps/cm/src/pages/dashboard/ui/datastatus-list.tsx
+7 -1
View File
@@ -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>
apps/cm/src/pages/dashboard/ui/fo-fclt-cnt-rt.tsx
+13 -2
View File
@@ -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">
apps/cm/src/pages/dashboard/ui/fo-wqlt-Infl-effl.tsx
+13 -2
View File
@@ -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 }}>
apps/cm/src/pages/dashboard/ui/notice-list.tsx
+13 -2
View File
@@ -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>
apps/cm/src/pages/dashboard/ui/reuse-chart.tsx
+13 -2
View File
@@ -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">
apps/cm/src/pages/dashboard/ui/reuse-status.tsx
+13 -2
View File
@@ -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">
apps/cm/src/pages/dashboard/ui/sn-old-ppl.tsx
+13 -2
View File
@@ -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 }}>
apps/cm/src/pages/dashboard/ui/sn-ppl-status.tsx
+13 -3
View File
@@ -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 }}>
apps/cm/src/pages/dashboard/ui/sortable-panel.tsx
+36 -10
View File
@@ -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;
}
apps/cm/src/pages/dashboard/ui/support-list.tsx
+7 -1
View File
@@ -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}