cm:sn-old-ppl 초기화 외

apps/cm/src/pages/dashboard/api/sn-service.ts

@@ -1,31 +1,69 @@
 // apps/cm/src/pages/dashboard/api/sn-service.ts
 import { client } from "@/shared/api";
-import { createStore } from "zustand/vanilla";
+import { create } from "zustand";
 import { ENDPOINT } from "@/shared/config";
 import type { PplLengthContent, SewerageService } from "../model/sn-interface";
+import type { OldPplChartData } from "../model/sn-interface";
 
 export type SnState = {
   snStatus: PplLengthContent[] | null;
 };
-
 export type SnStateActions = {
   setSnStatus: (snStatus: PplLengthContent[] | null) => void;
 };
-
 export type SnStore = SnState & SnStateActions;
 
-export const defaultInitState: SnState = {
-  snStatus: null,
+const initialOldPplChartData: OldPplChartData={     
+  labels: [
+        "금강",
+        "한강",
+        "낙동강",
+        "영산강"
+    ],
+    datasets: [
+        {
+            label: "20-25년",
+            data: [
+                1140,
+                3181,
+                3100,
+                1662
+            ],
+            backgroundColor: "#3B82F6",
+            borderRadius: 4
+        },
+        {
+            label: "25-30년",
+            data: [
+                1391,
+                3615,
+                1814,
+                1411
+            ],
+            backgroundColor: "#EF4444",
+            borderRadius: 4
+        },
+        {
+            label: "30년이상",
+            data: [
+                2014,
+                10303,
+                9831,
+                2000
+            ],
+            backgroundColor: "#F87171",
+            borderRadius: 4
+        }
+    ]
 };
-
-export const createSnStore = (initState: SnState = defaultInitState) =>
-  createStore<SnStore>()((set) => ({
-    ...initState,
-    setSnStatus: (snStatus) => set(() => ({ snStatus })),
-  }));
-
-// 전역으로 공유할 store 인스턴스
-// export const snStore = createSnStore();
+type OldPplStoreState = {
+  chartData: OldPplChartData;
+  setChartData: (chartData: OldPplChartData) => void;
+};
+export const useOldPplStore = create<OldPplStoreState>((set) => ({
+  chartData: initialOldPplChartData,
+  setChartData: (chartData) => set(() => ({ chartData })),
+}));
 
 export class SewerageApiService implements SewerageService {
   // 기간별 관로 총길이
@@ -43,6 +81,7 @@ export class SewerageApiService implements SewerageService {
       ...item,
       sumPrlgVl: Number(item.sumPrlgVl),
     }));
+    
     return list;
   }
 

apps/cm/src/pages/dashboard/lib/korea-basin-map.tsx

@@ -6,80 +6,17 @@ import React, { useEffect, useRef, useState } from "react";
 import { useStore } from "zustand";
 import styles from "./korea-basin-map.module.css"; // 추가
 import { basinStore } from "../api/fo-service";
+import { basinKeyMap,MANUAL_LABEL_POS  } from "../model/map-data";
+import { BASIN_DATA, BASIN_IDS,svcInfo } from "../model/map-data";
 // import { operFcltStore } from "../api/fo-service";
-import {
-  Tabs,
-  // TabsContent,
-  TabsList,
-  TabsTrigger,
-} from "@common/components";
+// import {Button} from "@common/components";
 
 const SVG_URL = "/images/region_map.svg"; // public 폴더에 region_map.svg 위치 필요
 
-  // 2. 유역 키를 매핑하는 로직 (예: "한강" -> "han")
-export const basinKeyMap: { [key: string]: string } = {
-  "한강": "han",
-  "금강": "geum",
-  "낙동강": "nakdong",
-  "영산강": "yeongsan",
-};
-// --- 라벨 좌표(수동 고정값) : inset 적용 영역 기준 퍼센트 또는 px 사용 ---
-//  - 퍼센트: { x:0~1, y:0~1 }  (권장: 반응형에 유리)
-//  - 픽셀:   { px:number, py:number } (inset 좌상단 원점 기준)
-const MANUAL_LABEL_POS = {
-  han: { x: 0.52, y: 0.14 },
-  geum: { x: 0.28, y: 0.47 },
-  nakdong: { x: 0.64, y: 0.47 },
-  yeongsan: { x: 0.18, y: 0.77 },
-};
-
-const BASIN_DATA = {
-  han: {
-    name: "한강",
-    colTitle: "시설수",
-    rows: [
-      ["500m³ 미만", 100000000],
-      ["500m³ 이상", 100000000],
-    ],
-  },
-  geum: {
-    name: "금강",
-    colTitle: "시설수",
-    rows: [
-      ["500m³ 미만", 100000000],
-      ["500m³ 이상", 100000000],
-    ],
-  },
-  nakdong: {
-    name: "낙동강",
-    colTitle: "시설수",
-    rows: [
-      ["500m³ 미만", 100000000],
-      ["500m³ 이상", 100000000],
-    ],
-  },
-  yeongsan: {
-    name: "영산강",
-    colTitle: "시설수",
-    rows: [
-      ["500m³ 미만", 100000000],
-      ["500m³ 이상", 100000000],
-    ],
-  },
-};
-
-const BASIN_IDS = [
-  { key: "han", labels: ["한강", "han"] },
-  { key: "geum", labels: ["금강", "geum"] },
-  { key: "nakdong", labels: ["낙동강", "nakdong"] },
-  { key: "yeongsan", labels: ["영산강", "yeongsan"] },
-];
-
 function fmt(n: number) {
   return new Intl.NumberFormat("ko-KR").format(n);
 }
 
-
 export function KoreaBasinMap() {
   const stageRef = useRef<HTMLDivElement>(null);
   const svgLayerRef = useRef<HTMLDivElement>(null);
@@ -87,8 +24,8 @@ export function KoreaBasinMap() {
   const popupRef = useRef<HTMLDivElement>(null);
   const badgeRef = useRef<HTMLDivElement>(null);
   const rowsRef = useRef<HTMLTableSectionElement>(null);
-  const colTitleRef = useRef<HTMLTableCellElement>(null);
-  const [tab, setTab] = useState("물재이용");
+  const colTitleRef = useRef<HTMLTableCellElement>(null);  
+  // const [services, setServices] = useState(svcInfo);
   const { selectedBasin, setSelectedBasin } = useStore(basinStore);
   // const { operFcltStatus, setSelectedBasin } = useStore(operFcltStore);
   const selectedBasinKey = basinKeyMap[selectedBasin];
@@ -395,27 +332,32 @@ export function KoreaBasinMap() {
     };
   }, []);
 
+  // const handleSvcInfoClick = (clickedSvcId: string) => {
+  //   setServices(prevServices =>
+  //     prevServices.map(svc => ({
+  //       ...svc,
+  //       active: svc.svcId === clickedSvcId,
+  //     }))
+  //   );
+  // };
   // 스타일은 필요에 따라 tailwind, css 등으로 커스터마이즈하세요.
   return (
     <div className="col-span-3 !p-0 relative z-10" style={{ height: "765px", background: "rgba(255, 255, 255, 0.6)" }}>
       <div className="card card-border" style={{ height: "100%" }}>
         <div className="card-header text-foreground">
           <h3 className="text-2xl font-medium">유역별 정보</h3>
-          <Tabs value={tab} onValueChange={setTab} className="border-0">
-            <div className="flex justify-center">
-              <TabsList className="mx-auto border-0 pt-0 pb-0 pl-0 pr-0">
-                <TabsTrigger value="물재이용">
-                  물재이용 
-                </TabsTrigger>
-                <TabsTrigger value="하수관로">
-                  하수관로
-                </TabsTrigger>
-                <TabsTrigger value="운영실태">
-                  운영실태
-                </TabsTrigger>
-              </TabsList>
-            </div>
-          </Tabs>
+          {/*
+            {services.map((svc) => (
+              <Button
+                key={svc.name}
+                className="h-[3.2rem]"
+                color={svc.active ? "primary" : "white"}
+                onClick={() => handleSvcInfoClick(svc.svcId)}
+              >
+                {svc.name}
+              </Button>
+            ))}
+          */}
         </div>
         <div id="mapArea" style={{height: "calc(100% - 40px)"}}> 
           <div

apps/cm/src/pages/dashboard/model/map-data.ts

@@ -0,0 +1,65 @@
+export const basinKeyMap: { [key: string]: string } = {
+  "한강": "han",
+  "금강": "geum",
+  "낙동강": "nakdong",
+  "영산강": "yeongsan",
+};
+
+// --- 라벨 좌표(수동 고정값) : inset 적용 영역 기준 퍼센트 또는 px 사용 ---
+//  - 퍼센트: { x:0~1, y:0~1 }  (권장: 반응형에 유리)
+//  - 픽셀:   { px:number, py:number } (inset 좌상단 원점 기준)
+export const MANUAL_LABEL_POS = {
+  han: { x: 0.52, y: 0.14 },
+  geum: { x: 0.28, y: 0.47 },
+  nakdong: { x: 0.64, y: 0.47 },
+  yeongsan: { x: 0.18, y: 0.77 },
+};
+
+export const BASIN_DATA = {
+  han: {
+    name: "한강",
+    colTitle: "시설수",
+    rows: [
+      ["500m³ 미만", 100000000],
+      ["500m³ 이상", 100000000],
+    ],
+  },
+  geum: {
+    name: "금강",
+    colTitle: "시설수",
+    rows: [
+      ["500m³ 미만", 100000000],
+      ["500m³ 이상", 100000000],
+    ],
+  },
+  nakdong: {
+    name: "낙동강",
+    colTitle: "시설수",
+    rows: [
+      ["500m³ 미만", 100000000],
+      ["500m³ 이상", 100000000],
+    ],
+  },
+  yeongsan: {
+    name: "영산강",
+    colTitle: "시설수",
+    rows: [
+      ["500m³ 미만", 100000000],
+      ["500m³ 이상", 100000000],
+    ],
+  },
+};
+
+export const BASIN_IDS = [
+  { key: "han", labels: ["한강", "han"] },
+  { key: "geum", labels: ["금강", "geum"] },
+  { key: "nakdong", labels: ["낙동강", "nakdong"] },
+  { key: "yeongsan", labels: ["영산강", "yeongsan"] },
+];
+
+export const svcInfo = [
+    {svcId: "wr", active: true, name:"물재이용"},
+    {svcId: "sn", active: false, name:"하수관로"},
+    {svcId: "fo", active: false, name:"운영실태"},
+]
+    

apps/cm/src/pages/dashboard/model/sn-interface.ts

@@ -1,3 +1,4 @@
+import { basinKeyMap } from "../model/map-data";
 export interface PplLengthContent {
   zoneNm: string;
   sumPrlgVl: number;
@@ -6,4 +7,56 @@ export interface PplLengthContent {
 export interface SewerageService {
   getPplLength(ymdFrom: string, ymdTo: string, useCd: string): Promise<PplLengthContent[]>;
   getPplUseLength(ymdFrom: string, ymdTo: string, useCd: string): Promise<PplLengthContent[]>;
+}
+
+export interface ChartDataSet {
+  label: string;
+  data: (number | undefined)[];
+  backgroundColor: string;
+  borderRadius?: number;
+}
+export interface OldPplChartData {
+  labels: string[];
+  datasets: ChartDataSet[];
+}
+
+type SnOldPplItem = {
+  name: string;
+  colTitle: string[];
+  rows: number[];
+};
+
+type SnOldPplLength = {
+  [key: string]: SnOldPplItem;
+};
+
+export function buildSnOldPplLength(
+  chartData: {
+    labels: string[];
+    datasets: { label: string; data: number[] }[];
+  },
+  totalLengths: number[]
+): SnOldPplLength {
+  const colTitle = ["총길이", ...chartData.datasets.map((ds) => ds.label)];
+
+  const result: SnOldPplLength = {};
+
+  chartData.labels.forEach((basinName, index) => {
+    const key = basinKeyMap[basinName]; // geum, han, nakdong, yeongsan
+    if (!key) return; // 매핑 안되면 스킵
+    const total = totalLengths[index] ?? 0;
+    const datasetValues = chartData.datasets.map(
+      (ds) => ds.data[index] ?? 0,
+    );
+    result[key] = {
+      name: basinName,
+      colTitle,
+      rows: [
+        total,          // 총길이 (undefined면 0)
+      ...datasetValues, // 각 연차 데이터 (undefined면 0)
+      ],
+    };
+  });
+
+  return result;
 }

apps/cm/src/pages/dashboard/ui/dashboard-page.tsx

@@ -17,7 +17,6 @@ import {
   Tooltip,
   ArcElement,
 } from "chart.js";
-// import { Doughnut } from "react-chartjs-2";
 import SnPplStatus from "./sn-ppl-status";
 import SnOldPpl from "./sn-old-ppl";
 import FoFcltCntRt from "./fo-fclt-cnt-rt";

apps/cm/src/pages/dashboard/ui/dashboard-page2.tsx

@@ -1,303 +0,0 @@
-"use client";
-import { useEffect, useState } from "react";
-import { useRouter } from "next/navigation";
-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 {
-  Chart as ChartJS,
-  CategoryScale,
-  LinearScale,
-  PointElement,
-  LineElement,
-  BarElement,
-  Filler,
-  Legend,
-  Tooltip,
-  ArcElement,
-} from "chart.js";
-import { Doughnut } from "react-chartjs-2";
-
-// Chart.js 등록
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  PointElement,
-  LineElement,
-  BarElement,
-  Filler,
-  Legend,
-  Tooltip,
-  ArcElement
-);
-
-interface UserInfo {
-  email?: string;
-  userId?: string;
-  userName?: string;
-  twoFactorEnabled?: boolean;
-}
-
-function DashboardPage() {
-  const [userInfo, setUserInfo] = useState<UserInfo | null>(null);
-  const [error, setError] = useState("");
-  const router = useRouter();
-
-  useEffect(() => {
-    const fetchUserInfo = async () => {
-      console.log("fetchUserInfo called");
-
-      try {
-        // tokenManager를 통해 토큰 확인
-        const accessToken = tokenManager.getToken("Authorization");
-        const userId = tokenManager.getToken("token-id");
-
-        if (!accessToken || !userId) {
-          console.log("No tokens found, redirecting to login");
-          setError("로그인이 필요합니다.");
-          router.push("/auth/login");
-          return;
-        }
-
-        console.log("Fetching user info with userId:", userId);
-
-        // client를 사용하여 API 호출 (자동 토큰 처리)
-        const response = await client.get(
-          `${ENDPOINT.USER_SERVICE.USERS}/${userId}`,
-        );
-
-        if (response.data) {
-          console.log("User info received:", response.data);
-          setUserInfo(response.data);
-        } else {
-          setError("사용자 정보를 불러올 수 없습니다.");
-        }
-      } catch (error) {
-        console.error("Error fetching user info:", error);
-        if (error instanceof Error && error.message.includes("401")) {
-          setError("인증이 만료되었습니다. 다시 로그인해주세요.");
-          tokenManager.clearAuthToken();
-          router.push("/auth/login");
-        } else {
-          setError("네트워크 오류가 발생했습니다.");
-        }
-      }
-    };
-
-    fetchUserInfo();
-  }, [router]);
-
-  const handleLogout = () => {
-    console.log("Logging out...");
-    // localStorage 정리
-    localStorage.removeItem("tempToken");
-    // tokenManager를 통해 쿠키 정리
-    tokenManager.clearAuthToken();
-    router.push("/auth/logout");
-  };
-
-  const handleChangePassword = () => {
-    router.push("/otp?next=change-password");
-  };
-
-  return (
-    <div className="p-6">
-      <div className="flex flex-col gap-1">
-        {/* 첫번째 라인 */}
-        <div className="grid grid-cols-8 gap-1">
-          {/* 첫번쨰 열 */}
-          <div className="col-span-2 h-250 !p-0">
-            {/* 전국 하수처리시설 가동률 */}
-            <div className="card card-border">
-              <div className="card-header text-foreground">
-                <h3 className="text-2xl font-medium">전국 하수처리시설 가동률</h3>
-              </div>
-              <div className="h-60 p-4">
-                <Doughnut
-                  data={{
-                    datasets: [{
-                      data: [75, 25], // 75% 가동률
-                      backgroundColor: ['#00DFE5', '#f5f5f5'],
-                      borderWidth: 0
-                    }]
-                  }}
-                  options={{
-                    responsive: true,
-                    maintainAspectRatio: false,
-                    cutout: '70%',
-                    circumference: 180, // 반원
-                    rotation: -90, // 왼쪽에서 시작
-                    plugins: {
-                      legend: {
-                        display: false
-                      },
-                      tooltip: {
-                        enabled: false
-                      }
-                    }
-                  }}
-                  plugins={[{
-                    id: 'centerText',
-                    afterDraw: (chart) => {
-                      const ctx = chart.ctx;
-                      const centerX = chart.width / 2;
-                      const centerY = chart.height / 2;
-                      
-                      // 가동률 텍스트
-                      ctx.save();
-                      ctx.font = 'bold 24px Arial';
-                      ctx.fillStyle = '#00DFE5';
-                      ctx.textAlign = 'center';
-                      ctx.textBaseline = 'middle';
-                      ctx.fillText('75%', centerX, centerY + 10);
-                      
-                      // 라벨 텍스트
-                      ctx.font = '12px Arial';
-                      ctx.fillStyle = '#666';
-                      ctx.fillText('가동률', centerX, centerY + 30);
-                      ctx.restore();
-                    }
-                  }]}
-                />
-              </div>
-            </div>
-
-            {/* 오수관로 및 우수관로 현황 */}
-            <div className="card card-border">
-              <div className="card-header text-foreground">
-                <h3 className="text-2xl font-medium">오수관로 및 우수관로 현황</h3>
-              </div>
-              <div className="h-60 p-4"></div>
-            </div>
-
-            {/* 하수처리수 재이용 */}
-            <div className="card card-border">
-              <div className="card-header text-foreground">
-                <h3 className="text-2xl font-medium">하수처리수 재이용</h3>
-              </div>
-              <div className="h-60 p-4"></div>
-            </div>
-          </div>
-
-          {/* 두번쨰 열 */}
-          <div className="col-span-2 h-250 !p-0">
-            {/* 하수처리시설(개소) */}
-            <div className="card card-border">
-              <div className="card-header text-foreground">
-                <h3 className="text-2xl font-medium">하수처리시설(개소)</h3>
-              </div>
-              <div className="grid grid-cols-2 gap-1 h-60 !p-0">
-                <div className="card card-border">
-                  <div className="card-header text-foreground text-center">
-                  <h3 className="text-l font-medium" style={{textAlign: "center", width: "100%"}}>500㎥ 미만(개소)</h3>
-                  </div>
-                  <div style={{fontSize: "38px", textAlign: "center", fontWeight: "600", lineHeight: "1.2", color: "#0ec58a", padding: "2px 0"}}>3,567  <span style={{fontSize: "14px", color: "#000000"}}>개소</span></div>
-                </div>
-                <div className="card card-border">
-                  <div className="card-header text-foreground text-center">
-                    <h3 className="text-l font-medium" style={{textAlign: "center", width: "100%"}}>500㎥ 이상(개소)</h3>
-                  </div>
-                  <div style={{fontSize: "38px", textAlign: "center", fontWeight: "600", lineHeight: "1.2", color: "#0ec58a", padding: "2px 0"}}>767  <span style={{fontSize: "14px", color: "#000000"}}>개소</span></div>
-                </div>
-                <div className="col-span-2" style={{width: "100%", textAlign: "right"}}>기준년월 : 2025.09 </div>
-              </div>
-            </div>
-            
-            {/* 노후하수관로현황 */}
-            <div className="card card-border">
-              <div className="card-header text-foreground">
-                <h3 className="text-2xl font-medium">노후하수관로현황</h3>
-              </div>
-              <div className="h-70 p-4">
-              </div>
-            </div>
-
-            {/* 재이용시설(개소) */}
-            <div className="card card-border">
-              <div className="card-header text-foreground">
-                <h3 className="text-2xl font-medium">재이용시설(개소)</h3>
-              </div>
-              <div className="h-70 p-4">
-              </div>
-            </div>
-          </div>
-          
-          {/* 지도영역 */}
-          <div className="col-span-3 h-200 !p-0 relative z-10">
-            <div className="card card-border">
-              <div className="card-header text-foreground">
-                <h3 className="text-2xl font-medium">유역별 정보</h3>
-              </div>
-              <KoreaBasinMap />
-            </div>
-          </div>
-
-          {/* 사용자 정보 카드 */}
-          <div className="card card-border col-span-1 h-80 p-10">
-            <h2 className="mb-6 text-2xl">사용자 정보</h2>
-            {error && <div className="mb-4 text-red-500">{error}</div>}
-            {userInfo ? (
-              <div className="mb-4">
-                <div>
-                  <b>아이디:</b> {userInfo.userId}
-                </div>
-                <div>
-                  <b>이메일:</b> {userInfo.email || userInfo.userId}
-                </div>
-                <div>
-                  <b>이름:</b> {userInfo.userName || "-"}
-                </div>
-                <div>
-                  <b>2FA 활성화:</b>{" "}
-                  {userInfo.twoFactorEnabled ? "예" : "아니오"}
-                </div>
-              </div>
-            ) : (
-              !error && <div>사용자 정보를 불러오는 중...</div>
-            )}
-            <button className="btn mb-2 w-full" onClick={handleLogout}>
-              로그아웃
-            </button>
-            <button className="btn w-full" onClick={handleChangePassword}>
-              패스워드 변경
-            </button>
-          </div>
-        </div>
-
-        {/* 두번째 라인 */}
-        <div className="grid grid-cols-4 gap-1">
-          <div className="card card-border"id="grouping-statistics">
-            <div className="card-header text-foreground">
-              <h3 className="text-2xl font-medium">지원현황</h3>
-            </div>
-            <div className="h-70 p-4">
-              
-            </div>
-          </div>
-          <div className="card card-border">
-            <div className="card-header text-foreground">
-              <h3 className="text-2xl font-medium">자료관 자료현황</h3>
-            </div>
-            <div className="h-70 p-4">
-            </div>
-          </div>
-          <div className="card card-border">
-            <div className="card-header text-foreground">
-              <h3 className="text-2xl font-medium">공지사항</h3>
-            </div>
-            <div className="h-70 p-4">
-            </div>
-          </div>
-
-          {/* 배너 영역 */}
-          <div className="card card-border">
-
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export { DashboardPage };

apps/cm/src/pages/dashboard/ui/sn-old-ppl.tsx

@@ -15,15 +15,10 @@ import {
 } from "chart.js";
 import { Bar } from "react-chartjs-2";
 import { Button } from "@common/components";
-import type { PplLengthContent } from "../model/sn-interface";
-import { SewerageApi } from "../api/sn-service";
+import type { PplLengthContent, ChartDataSet } from "../model/sn-interface";
+import { SewerageApi, useOldPplStore } from "../api/sn-service";
+
 
-interface ChartDataSet {
-  label: string;
-  data: (number | undefined)[];
-  backgroundColor: string;
-  borderRadius?: number;
-}
 // ChartJS 컴포넌트 등록
 ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend);
 
@@ -31,13 +26,11 @@ export default function SnOldPpl() {
   const [oldPpl2025Data, setOldPpl2025Data] = useState<PplLengthContent[]>([]);
   const [oldPpl2530Data, setOldPpl2530Data] = useState<PplLengthContent[]>([]);
   const [oldPpl30Data, setOldPpl30Data] = useState<PplLengthContent[]>([]);
-  const [chartData, setChartData] = useState<{
-    labels: string[];
-    datasets: ChartDataSet[];
-  }>({ labels: [], datasets: [] });
+  const {chartData, setChartData}  = useOldPplStore();
 
   useEffect(() => {
     const currentYear = new Date().getFullYear();
+
     const ranges = {
       "20-25년": { from: `${currentYear - 25 + 1}0101`, to: `${currentYear - 20}1231`, setter: setOldPpl2025Data },
       "25-30년": { from: `${currentYear - 30 + 1}0101`, to: `${currentYear - 25}1231`, setter: setOldPpl2530Data },