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

Merge branch 'main' of https://www.onasys.co.kr:3000/ONAANDALL/frontend

Browse Source
This commit is contained in:
mind-one001
2026-04-14 09:50:51 +09:00
parent f9b3b367fc 6a3124ed60
commit ea5db79bb6
17 changed files with 527 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/cm/package.json
+3
View File
@@ -12,6 +12,9 @@
"@common/assets": "workspace:*",
"@common/components": "workspace:*",
"@common/config": "workspace:*",
"@dnd-kit/core": "^6.3.1",
"@dnd-kit/sortable": "^10.0.0",
"@dnd-kit/utilities": "^3.2.2",
"@fontsource-variable/noto-sans-kr": "^5.2.5",
"@frontend-opensource/use-react-hooks": "^1.1.4",
"@fullcalendar/core": "^6.1.17",
apps/cm/src/pages/dashboard/lib/hooks/use-dnd-sensors.ts
+16
View File
@@ -0,0 +1,16 @@
import {
KeyboardSensor,
PointerSensor,
useSensor,
useSensors,
} from "@dnd-kit/core";
import { sortableKeyboardCoordinates } from "@dnd-kit/sortable";
export function useDndSensors() {
return useSensors(
useSensor(PointerSensor),
useSensor(KeyboardSensor, {
coordinateGetter: sortableKeyboardCoordinates,
}),
);
}
apps/cm/src/pages/dashboard/lib/hooks/use-panel-order.ts
+59
View File
@@ -0,0 +1,59 @@
import { useState, useEffect } from "react";
import { arrayMove } from "@dnd-kit/sortable";
import type { DragEndEvent } from "@dnd-kit/core";
import type { PanelItem } from "../../model/types";
interface UsePanelOrderProps {
initialPanels: PanelItem[];
storageKey: string;
}
export function usePanelOrder({
initialPanels,
storageKey,
}: UsePanelOrderProps) {
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);
}
}
setIsInitialized(true);
}, [storageKey]);
const handleDragEnd = (event: DragEndEvent) => {
const { active, over } = event;
if (over && active.id !== over.id) {
setPanels((items) => {
const oldIndex = items.findIndex((item) => item.id === active.id);
const newIndex = items.findIndex((item) => item.id === over.id);
const newItems = arrayMove(items, oldIndex, newIndex);
// localStorage에 저장
localStorage.setItem(
storageKey,
JSON.stringify(newItems.map((item) => item.id)),
);
return newItems;
});
}
};
return { panels, handleDragEnd };
}
apps/cm/src/pages/dashboard/model/panel-config.tsx
+71
View File
@@ -0,0 +1,71 @@
import FoFcltCntRt from "@/pages/dashboard/ui/fo-fclt-cnt-rt";
import SnPplStatus from "@/pages/dashboard/ui/sn-ppl-status";
import ReuseChart from "@/pages/dashboard/ui/reuse-chart";
import FoWqltInflEffl from "@/pages/dashboard/ui/fo-wqlt-Infl-effl";
import SnOldPpl from "@/pages/dashboard/ui/sn-old-ppl";
import ReuseStatus from "@/pages/dashboard/ui/reuse-status";
import SupportList from "@/pages/dashboard/ui/support-list";
import DataStatusList from "@/pages/dashboard/ui/datastatus-list";
import NoticeList from "@/pages/dashboard/ui/notice-list";
import BannerList from "@/pages/dashboard/ui/banner-list";
import type { PanelItem } from "./types";
export function getInitialTopPanels(): PanelItem[] {
return [
{
id: "panel-1",
component: <FoFcltCntRt />,
className: "",
},
{
id: "panel-2",
component: <SnPplStatus />,
className: "",
},
{
id: "panel-3",
component: <ReuseChart />,
className: "",
},
{
id: "panel-4",
component: <FoWqltInflEffl />,
className: "",
},
{
id: "panel-5",
component: <SnOldPpl />,
className: "",
},
{
id: "panel-6",
component: <ReuseStatus />,
className: "",
},
];
}
export function getInitialBottomPanels(): PanelItem[] {
return [
{
id: "panel-7",
component: <SupportList />,
className: "",
},
{
id: "panel-8",
component: <DataStatusList />,
className: "",
},
{
id: "panel-9",
component: <NoticeList />,
className: "",
},
{
id: "panel-10",
component: <BannerList />,
className: "",
},
];
}
apps/cm/src/pages/dashboard/model/types.ts
+7
View File
@@ -0,0 +1,7 @@
export interface PanelItem {
id: string;
component: React.ReactNode;
className?: string;
}
export type PanelType = "top" | "bottom";
apps/cm/src/pages/dashboard/ui/banner-list.tsx
+34 -17
View File
@@ -1,10 +1,15 @@
"use client";
import { useRef } from "react";
import { useRef, useState, useEffect } from "react";
import { useQuery } from "@tanstack/react-query";
import { ENDPOINT } from "@/shared/config";
import { getImageUrlByAtflCd, getBannerList, type Banner } from "../api/banner-service";
import {
getImageUrlByAtflCd,
getBannerList,
type Banner,
} from "../api/banner-service";
import { getCookie } from "@/shared/lib";
import { useDragHandle } from "./sortable-panel";
import {
Carousel,
@@ -21,7 +26,13 @@ type BannerImageProps = {
};
const BannerList: React.FC = () => {
const siteId = getCookie("site-id-key") ?? "";
const { dragHandleProps, isDragging } = useDragHandle();
const [siteId, setSiteId] = useState<string>("");
useEffect(() => {
const id = getCookie("site-id-key") ?? "";
setSiteId(id);
}, []);
const BannerImage = ({ atflCd, lnkgUrlAddr }: BannerImageProps) => {
const { data: imageUrl, isLoading } = useQuery({
@@ -91,6 +102,19 @@ const BannerList: React.FC = () => {
return maybe.status ?? maybe.response?.status;
};
// siteId가 없을 때
if (!siteId) {
return (
<div className="card card-border">
<div className="relative flex h-[240px] w-full items-center justify-center bg-accent">
<div className="text-sm text-muted-foreground">
사이트 ID가 없습니다
</div>
</div>
</div>
);
}
// 401 에러 처리
if (bannerError) {
const is401Error =
@@ -133,21 +157,14 @@ const BannerList: React.FC = () => {
);
}
// siteId가 없을 때
if (!siteId) {
return (
<div className="card card-border">
<div className="relative flex h-[240px] w-full items-center justify-center bg-accent">
<div className="text-sm text-muted-foreground">
사이트 ID가 없습니다
</div>
</div>
</div>
);
}
return (
<div className="card card-border" style={{ height: "230px" }}>
<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
+168 -94
View File
@@ -6,6 +6,8 @@ import { tokenManager } from "@/entities/auth/lib/token-manager";
import { client } from "@/shared/api";
import { ENDPOINT } from "@/shared/config";
import { KoreaBasinMap } from "../lib/korea-basin-map";
import { useDndSensors } from "../lib/hooks/use-dnd-sensors";
import { usePanelOrder } from "../lib/hooks/use-panel-order";
import {
Chart as ChartJS,
CategoryScale,
@@ -18,18 +20,15 @@ import {
Tooltip,
ArcElement,
} from "chart.js";
import SnPplStatus from "./sn-ppl-status";
import SnOldPpl from "./sn-old-ppl";
import FoFcltCntRt from "./fo-fclt-cnt-rt";
import FoWqltInflEffl from "./fo-wqlt-Infl-effl";
import ReuseChart from "./reuse-chart";
import ReuseStatus from "./reuse-status";
import NoticeList from "./notice-list";
import BannerList from "./banner-list";
import SupportList from "./support-list";
import DataStatusList from "./datastatus-list";
import { DndContext, closestCenter } from "@dnd-kit/core";
import { SortableContext, rectSortingStrategy } from "@dnd-kit/sortable";
import {
getInitialTopPanels,
getInitialBottomPanels,
} from "../model/panel-config";
import MyPostList from "./mypost-list";
import ScheduleList from "./schedule-list";
import { SortablePanel } from "./sortable-panel";
// Chart.js 등록
ChartJS.register(
@@ -41,7 +40,7 @@ ChartJS.register(
Filler,
Legend,
Tooltip,
ArcElement
ArcElement,
);
interface UserInfo {
@@ -54,7 +53,29 @@ interface UserInfo {
function DashboardPage() {
const [userInfo, setUserInfo] = useState<UserInfo | null>(null);
const [error, setError] = useState("");
const router = useRouter();
const [isMounted, setIsMounted] = useState(false);
const router = useRouter();
// dnd-kit 센서 설정
const sensors = useDndSensors();
// 패널 순서 관리
const { panels: topPanels, handleDragEnd: handleTopDragEnd } = usePanelOrder({
initialPanels: getInitialTopPanels(),
storageKey: "dashboard-top-panels-order",
});
const { panels: bottomPanels, handleDragEnd: handleBottomDragEnd } =
usePanelOrder({
initialPanels: getInitialBottomPanels(),
storageKey: "dashboard-bottom-panels-order",
});
// 클라이언트에서만 드래그 기능 활성화 (hydration 문제 방지)
useEffect(() => {
setIsMounted(true);
}, []);
useEffect(() => {
const fetchUserInfo = async () => {
console.log("fetchUserInfo called");
@@ -115,96 +136,149 @@ function DashboardPage() {
return (
<div className="p-2 sm:p-4 md:p-6">
<div className="flex flex-col gap-1">
{/* 첫번째 라인 */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-8 gap-1">
{/* 첫번쨰 열 */}
<div className="col-span-1 md:col-span-1 lg:col-span-1 xl:col-span-2 h-250 !p-0">
{/* 전국 하수처리시설 개소수 및 가동률 */}
<FoFcltCntRt />
{/* 오수관로 및 우수관로 현황 */}
<SnPplStatus />
{/* 하수처리수 재이용 (m³) */}
<ReuseChart />
{/* 첫번째 라인 - 좌측 6개 패널(2x3) + 우측 지도/사용자 정보 */}
<div className="flex flex-col gap-1 lg:flex-row">
{/* 좌측: 드래그 가능한 6개 패널 (2x3 그리드, 화면의 50%) */}
<div className="w-full lg:w-1/2">
{isMounted ? (
<DndContext
sensors={sensors}
collisionDetection={closestCenter}
onDragEnd={handleTopDragEnd}
>
<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>
{/* 두번쨰 열 */}
<div className="col-span-1 md:col-span-1 lg:col-span-1 xl:col-span-2 h-250 !p-0">
{/* 수계별 유입ㆍ방류수질 분석 */}
<FoWqltInflEffl />
{/* 우측: 고정된 지도와 사용자 정보 (화면의 50%) */}
<div className="flex w-full gap-1 lg:w-1/2">
{/* 지도영역 - 고정 (드래그 불가) */}
<div className="flex-1">
<KoreaBasinMap />
</div>
{/* 노후하수관로현황 */}
<SnOldPpl />
{/* 물재이용 현황 (재이용량, m³) */}
<ReuseStatus />
</div>
{/* 지도영역 */}
<div className="col-span-1 md:col-span-2 lg:col-span-1 xl:col-span-3">
<KoreaBasinMap />
</div>
{/* 사용자 정보 카드 */}
<div className="col-span-1 md:col-span-2 lg:col-span-1 xl:col-span-1 !p-0">
{error && <div className="mb-4 text-red-500">{error}</div>}
{userInfo ? (
<div className="card card_border login_info_box" style={{ minHeight: "150px", height: "auto" }}>
<div className="login_header" style={{ paddingLeft: "10px", paddingRight: "10px" }}>
<div className="login_avatar">
<Image
src="/images/icon_loginID.png"
alt="프로필"
width={40}
height={40}
onError={(e) => {
const target = e.target as HTMLImageElement;
target.src = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='18' fill='%23e1e5e9'/%3E%3Ctext x='20' y='26' font-size='20' text-anchor='middle' fill='%23999'%3E%3F%3C/text%3E%3C/svg%3E";
}}
/>
</div>
<div className="login_user_info">
<div className="user_name">{userInfo.userName || "-"}</div>
<div className="user_status">온라인</div>
<div className="user_status text-xs sm:text-sm">
<b>2FA 활성화:</b>{" "}
{userInfo.twoFactorEnabled ? "예" : "아니오"}
{/* 사용자 정보 카드 - 고정 (드래그 불가) */}
<div className="flex w-full flex-col gap-1 !p-0 lg:w-[300px]">
{error && <div className="mb-4 text-red-500">{error}</div>}
{userInfo ? (
<div
className="card card_border login_info_box"
style={{ minHeight: "150px", height: "auto" }}
>
<div
className="login_header"
style={{ paddingLeft: "10px", paddingRight: "10px" }}
>
<div className="login_avatar">
<Image
src="/images/icon_loginID.png"
alt="프로필"
width={40}
height={40}
onError={(e) => {
const target = e.target as HTMLImageElement;
target.src =
"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='18' fill='%23e1e5e9'/%3E%3Ctext x='20' y='26' font-size='20' text-anchor='middle' fill='%23999'%3E%3F%3C/text%3E%3C/svg%3E";
}}
/>
</div>
<div className="login_user_info">
<div className="user_name">
{userInfo.userName || "-"}
</div>
<div className="user_status">온라인</div>
<div className="user_status text-xs sm:text-sm">
<b>2FA 활성화:</b>{" "}
{userInfo.twoFactorEnabled ? "예" : "아니오"}
</div>
</div>
</div>
<div
className="login_actions"
style={{ paddingLeft: "10px", paddingRight: "10px" }}
>
<button
className="login_btn text-xs sm:text-sm"
onClick={handleLogout}
>
로그아웃
</button>
<button
className="signup_btn text-xs sm:text-sm"
onClick={handleChangePassword}
>
마이페이지
</button>
</div>
</div>
</div>
<div className="login_actions" style={{ paddingLeft: "10px", paddingRight: "10px" }}>
<button className="login_btn text-xs sm:text-sm" onClick={handleLogout}>로그아웃</button>
<button className="signup_btn text-xs sm:text-sm" onClick={handleChangePassword}>마이페이지</button>
</div>
) : (
!error && <div>사용자 정보를 불러오는 중...</div>
)}
<ScheduleList />
<MyPostList />
</div>
) : (
!error && <div>사용자 정보를 불러오는 중...</div>
)}
<ScheduleList />
<MyPostList />
</div>
</div>
{/* 두번째 라인 */}
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-1">
<div className="card card-border" style={{ height: "250px" }}>
<SupportList />
</div>
<div className="card card-border" style={{ height: "250px" }}>
<DataStatusList />
</div>
<div className="card card-border" style={{ height: "250px" }}>
<NoticeList />
</div>
{/* 배너 영역 */}
<div className="card card-border" style={{ height: "250px" }}>
<BannerList />
</div>
</div>
{/* 두번째 라인 - 드래그 가능한 4개 패널 */}
{isMounted ? (
<DndContext
sensors={sensors}
collisionDetection={closestCenter}
onDragEnd={handleBottomDragEnd}
>
<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
+64
View File
@@ -0,0 +1,64 @@
import { useSortable } from "@dnd-kit/sortable";
import { CSS } from "@dnd-kit/utilities";
import { createContext, useContext } from "react";
interface SortablePanelProps {
id: string;
children: React.ReactNode;
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,
listeners,
setNodeRef,
transform,
transition,
isDragging,
} = useSortable({ id });
const style = {
transform: CSS.Transform.toString(transform),
transition,
opacity: isDragging ? 0.5 : 1,
};
const contextValue: DragHandleContextValue = {
dragHandleProps: { ...attributes, ...listeners },
isDragging,
};
return (
<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}