feat: 입력 > 02. 하수관로 시설별 설치 현황관리 버튼 추가

- tab 6. 시설별 현황 관리 탭에서만 필요한 버튼

.gitignore

@@ -23,4 +23,6 @@ apps/fo/.next/**/*
 .qodo
 
 pnpm-lock.yaml
-settings.json
+settings.json
+.npmrc
+.cursor

apps/cm/.env.example

@@ -1,7 +1,14 @@
 # apps/cs/src/shared/config/env.ts 참고
-NEXT_PUBLIC_PORT=3000
-NEXT_PUBLIC_PROXY_HOST=http://localhost:3000
-NEXT_PUBLIC_SITE_ID=CS
-NEXT_PUBLIC_SUB_DOMAIN=http://localhost:3000
-NEXT_PUBLIC_SERVER_API_URL=http://192.168.0.102:8000
-NEXT_PUBLIC_TINY_API_KEY=t9nc4z6inquvvd5pq1vea8wcp7lb01qmqseh6egms9vpaju2
+NEXT_PUBLIC_PORT=3001
+NEXT_PUBLIC_PROXY_HOST=http://localhost:3001
+NEXT_PUBLIC_SITE_ID=CM
+NEXT_PUBLIC_SUB_DOMAIN=http://localhost:13000
+# NEXT_PUBLIC_SERVER_API_URL=http://localhost:8000
+NEXT_PUBLIC_SERVER_API_URL=http://dev.onasys.co.kr:8000
+NEXT_PUBLIC_LINK_BACKEND_API_HOST=http://rsone.iptime.org:10014
+NEXT_PUBLIC_TINY_API_KEY=t9nc4z6inquvvd5pq1vea8wcp7lb01qmqseh6egms9vpaju2
+
+NEXT_PUBLIC_SERVER_API_URL2=http://con.mind-one.co.kr:11083
+NEXT_PUBLIC_SERVER_API_URL3=https://apigateway.apps.rsonesoft.com
+NEXT_PUBLIC_SN=https://devlion.hasuon.co.kr
+NEXT_PUBLIC_WR=https://devtiger.hasuon.co.kr

apps/cm/.env.local

@@ -1,11 +0,0 @@
-# apps/cs/src/shared/config/env.ts 참고
-NEXT_PUBLIC_PORT=3000
-NEXT_PUBLIC_PROXY_HOST=http://localhost:3000
-NEXT_PUBLIC_SITE_ID=CS
-NEXT_PUBLIC_SUB_DOMAIN=http://localhost:13000
-NEXT_PUBLIC_SERVER_API_URL=http://dev.onasys.co.kr:8000
-NEXT_PUBLIC_LINK_BACKEND_API_HOST=http://rsone.iptime.org:10014
-NEXT_PUBLIC_TINY_API_KEY=t9nc4z6inquvvd5pq1vea8wcp7lb01qmqseh6egms9vpaju2
-
-# NEXT_PUBLIC_SERVER_API_URL2=http://con.mind-one.co.kr:11083/
-NEXT_PUBLIC_SERVER_API_URL2=http://192.168.1.222:8883/

apps/cm/.env.production

@@ -1,7 +0,0 @@
-# apps/cs/src/shared/config/env.ts 참고
-NEXT_PUBLIC_PORT=3000
-NEXT_PUBLIC_PROXY_HOST=http://localhost:3000
-NEXT_PUBLIC_SITE_ID=CS
-NEXT_PUBLIC_SUB_DOMAIN=http://localhost:3000
-NEXT_PUBLIC_SERVER_API_URL=http://192.168.0.102:8000
-NEXT_PUBLIC_TINY_API_KEY=t9nc4z6inquvvd5pq1vea8wcp7lb01qmqseh6egms9vpaju2

apps/cm/app/api/proxy/[...url]/route.ts

@@ -36,9 +36,15 @@ async function handler(
   }
 
   try {
-    if (!isRefreshHandler) {
-      body = await request.json();
-      console.log(`[Proxy] Request body:`, body);
+    // GET 요청이 아닐 때만 body 파싱
+    if (method !== "GET" && !isRefreshHandler) {
+      try {
+        body = await request.json();
+        console.log(`[Proxy] Request body:`, body);
+      } catch {
+        // body가 없을 수 있음
+        body = {};
+      }
     }
 
     const targetUrl = `${SERVER_API_URL}/${params.url.join("/")}`;
@@ -47,7 +53,7 @@ async function handler(
     const result = await fetch(targetUrl, {
       method,
       headers,
-      body: JSON.stringify(body),
+      body: method !== "GET" ? JSON.stringify(body) : undefined,
     });
 
     console.log(`[Proxy] Response status: ${result.status}`);
@@ -55,12 +61,14 @@ async function handler(
 
     // 2FA 관련 엔드포인트인 경우 응답 본문도 확인
     const is2FAEndpoint = params.url.includes("2fa") || params.url.includes("auth");
+    // 배너 API는 인증 없이 호출 가능
+    const isBannerEndpoint = params.url.includes("bnrs");
     let responseData = {};
     
-    if (is2FAEndpoint) {
+    if (is2FAEndpoint || isBannerEndpoint) {
       try {
         responseData = await result.json();
-        console.log(`[Proxy] 2FA Response data:`, responseData);
+        console.log(`[Proxy] ${is2FAEndpoint ? '2FA' : 'Banner'} Response data:`, responseData);
       } catch {
         // JSON 파싱 실패 시 빈 객체 사용
         console.log(`[Proxy] Failed to parse JSON response`);
@@ -74,15 +82,15 @@ async function handler(
     console.log(`[Proxy] Tokens - accessToken: ${!!accessToken}, userId: ${!!userId}, refreshToken: ${!!refreshToken}`);
     console.log(`[Proxy] Available headers:`, Array.from(result.headers.keys()));
 
-    // 2FA 엔드포인트이고 실패한 경우 실제 오류 메시지 반환
-    if (!result.ok && is2FAEndpoint) {
-      console.log(`[Proxy] 2FA endpoint failed, returning actual error`);
+    // 2FA 또는 배너 엔드포인트이고 실패한 경우 실제 오류 메시지 반환
+    if (!result.ok && (is2FAEndpoint || isBannerEndpoint)) {
+      console.log(`[Proxy] ${is2FAEndpoint ? '2FA' : 'Banner'} endpoint failed, returning actual error`);
       return NextResponse.json(responseData, { status: result.status });
     }
 
-    // 2FA 엔드포인트이고 성공한 경우 (토큰이 헤더에 없을 수 있음)
-    if (result.ok && is2FAEndpoint) {
-      console.log(`[Proxy] 2FA endpoint succeeded, returning response data`);
+    // 2FA 또는 배너 엔드포인트이고 성공한 경우 (토큰이 헤더에 없을 수 있음)
+    if (result.ok && (is2FAEndpoint || isBannerEndpoint)) {
+      console.log(`[Proxy] ${is2FAEndpoint ? '2FA' : 'Banner'} endpoint succeeded, returning response data`);
       return NextResponse.json(responseData, { status: result.status });
     }
 
@@ -143,3 +151,11 @@ export async function PUT(
   const params = await props.params;
   return handler(request, params, "PUT");
 }
+
+export async function GET(
+  request: Request,
+  props: { params: Promise<{ url: string[] }> },
+) {
+  const params = await props.params;
+  return handler(request, params, "GET");
+}

apps/cm/eslint.config.mjs

@@ -12,6 +12,11 @@ const compat = new FlatCompat({
 const eslintConfig = [
   ...compat.extends("next/core-web-vitals", "next/typescript"),
   {
+    languageOptions: {
+      parserOptions: {
+        tsconfigRootDir: __dirname,
+      },
+    },
     rules: {
       "react-hooks/exhaustive-deps": "off",
     },

apps/cm/middleware.ts

@@ -14,8 +14,8 @@ const serverApiUrl =
   const serverApiUrl2 =
   process.env.NEXT_PUBLIC_SERVER_API_URL2 ?? serverApiUrl;
 
-  // const serverApiUrl3 =
-  // process.env.NEXT_PUBLIC_SERVER_API_URL3 ?? serverApiUrl;
+  const serverApiUrl3 =
+  process.env.NEXT_PUBLIC_SERVER_API_URL3 ?? serverApiUrl;
 
   // const serverApiUrl4 =
   // process.env.NEXT_PUBLIC_SERVER_API_URL4 ?? serverApiUrl;
@@ -58,8 +58,7 @@ export function middleware(req: NextRequest) {
     const userId = req.cookies.get(AUTH_USER_ID)?.value;
 
     // const decodedQuery = toDecodedQueryString(searchParams);
-    const newUrl = `${serverApiUrl2}${pathname.replace("/server/", "")}${searchParams ? `?${searchParams}` : ""}`;
-    // const newUrl = `${serverApiUrl2}${pathname}`;
+    const newUrl = `${serverApiUrl2}${pathname.replace("/server/", "/")}${searchParams ? `?${searchParams}` : ""}`;
 
     if (token) requestHeaders.set(CLAIM_NAME, token);
     if (userId) requestHeaders.set(AUTH_USER_ID, userId);
@@ -96,7 +95,7 @@ export function middleware(req: NextRequest) {
     const token = req.cookies.get(CLAIM_NAME)?.value;
     const userId = req.cookies.get(AUTH_USER_ID)?.value;
     // const newUrl = `${serverApiUrl2}${pathname.replace("/server/", "")}`;
-    const newUrl = `${serverApiUrl2}${pathname.replace("/server/", "")}${searchParams ? `?${searchParams}` : ""}`;
+    const newUrl = `${serverApiUrl2}${pathname.replace("/server/", "/")}${searchParams ? `?${searchParams}` : ""}`;
 
     if (token) requestHeaders.set(CLAIM_NAME, token);
     if (userId) requestHeaders.set(AUTH_USER_ID, userId);
@@ -110,11 +109,12 @@ export function middleware(req: NextRequest) {
     });
   }
 
-  if (pathname.startsWith("/ic-service")) {
+  if (pathname.startsWith("/server/ic-service")) {
     const requestHeaders = new Headers(req.headers);
     const token = req.cookies.get(CLAIM_NAME)?.value;
     const userId = req.cookies.get(AUTH_USER_ID)?.value;
-    const newUrl = `${serverApiUrl5}${pathname}`;
+
+    const newUrl = `${serverApiUrl3}${pathname.replace("/server/", "/")}`;
 
     if (token) requestHeaders.set(CLAIM_NAME, token);
     if (userId) requestHeaders.set(AUTH_USER_ID, userId);
@@ -128,11 +128,12 @@ export function middleware(req: NextRequest) {
     });
   }
 
-  if (pathname.startsWith("/dc-service")) {
+  if (pathname.startsWith("/server/dc-service")) {
     const requestHeaders = new Headers(req.headers);
     const token = req.cookies.get(CLAIM_NAME)?.value;
     const userId = req.cookies.get(AUTH_USER_ID)?.value;
-    const newUrl = `${serverApiUrl5}${pathname}`;
+
+    const newUrl = `${serverApiUrl3}${pathname.replace("/server/", "/")}${searchParams ? `?${searchParams}` : ""}`;
 
     if (token) requestHeaders.set(CLAIM_NAME, token);
     if (userId) requestHeaders.set(AUTH_USER_ID, userId);
@@ -161,7 +162,7 @@ export function middleware(req: NextRequest) {
 
   if (pathname.startsWith("/server")) {
     const queryParams = searchParams.toString();
-    const newUrl = `${serverApiUrl}${pathname.replace("/server", "")}${
+    const newUrl = `${serverApiUrl}${pathname.replace("/server", "/")}${
       queryParams ? `?${queryParams}` : ""
     }`;
 

apps/cm/next.config.ts

@@ -3,10 +3,22 @@ import type { NextConfig } from "next";
 const subDomain =
   process.env.NEXT_PUBLIC_SUB_DOMAIN || "http://localhost:13000";
 
-const backendUrl = process.env.NEXT_PUBLIC_SERVER_API_URL || "http://192.168.0.102:8000";
-
 const nextConfig: NextConfig = {
   output: "standalone",
+  experimental: {
+    proxyTimeout: 600000,
+  },
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
+  typescript: {
+    ignoreBuildErrors: true,
+  },
+  logging: {
+    fetches: {
+      fullUrl: true,
+    },
+  },  
   async rewrites() {
     return {
       beforeFiles: [
@@ -27,10 +39,6 @@ const nextConfig: NextConfig = {
           source: "/cms/:path*",
           destination: `${subDomain}/cms/:path*`,
         },
-        {
-          source: "/user-service/:path*",
-          destination: `${backendUrl}/user-service/:path*`,
-        },
       ],
       fallback: [],
     };

apps/cm/src/app/styles/components.css

@@ -73,12 +73,32 @@
   padding: 0 !important;
 }
 
+.card_paddingnone {
+  padding: 0 !important;
+}
+
 .card_nomargin {
   width: 100%;
   margin: 0 !important;
   padding: 0 !important;
 }
 
+.card_title {
+  padding: 1rem;
+  margin-bottom: 1rem;
+}
+
+.card_title .leftArea {
+  display: flex;
+  align-items: center;
+}
+
+.card_title h4 {
+  margin: 0;
+  font-size: 1.5rem;
+  font-weight: 600;
+}
+
 .topline {
   border-top: 1px solid #ccc;
 }
@@ -127,3 +147,300 @@
     border-bottom-color: #3f4042;
   }
 }
+
+/* 자료현황 스타일 */
+.mid_info_area {
+  padding: 10px 5px;
+  height: 220px;
+  position: relative;
+  margin-top: 0;
+}
+
+.mi_list_swiper {
+  height: 100%;
+  width: 100%;
+}
+
+.mi_list {
+  height: 100%;
+}
+
+.ml_box {
+  position: relative;
+  width: 90%;
+  max-width: 90%;
+  height: 150px;
+  padding: 12px;
+  margin: 0 8px;
+  display: flex;
+  border-radius: 12px;
+  background: #f8f9fa;
+  border: 1px solid #e9ecef;
+  box-sizing: border-box;
+  transition: all 0.3s ease;
+}
+
+.ml_box:hover {
+  background: #e3f2fd;
+  border-color: #2196f3;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.mb_section {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  width: 100%;
+}
+
+.tit {
+  display: flex;
+  align-items: center;
+  margin-bottom: 12px;
+}
+
+.tit i {
+  font-size: 20px;
+  margin-right: 10px;
+  color: #2196f3;
+}
+
+.tt {
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.info_row {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  align-items: center;
+}
+
+.info_item {
+  text-align: center;
+  width: 100%;
+}
+
+.info_label {
+  font-size: 12px;
+  color: #666;
+  margin-bottom: 4px;
+}
+
+.info_value {
+  font-size: 18px;
+  font-weight: bold;
+  color: #2196f3;
+  line-height: 1;
+}
+
+/* Swiper 네비게이션 스타일 */
+.mi_list_swiper .swiper-button-next,
+.mi_list_swiper .swiper-button-prev {
+  color: #2196f3;
+  width: 30px;
+  height: 30px;
+  margin-top: -15px;
+}
+
+.mi_list_swiper .swiper-button-next:after,
+.mi_list_swiper .swiper-button-prev:after {
+  font-size: 16px;
+}
+
+.mi_list_swiper .swiper-pagination {
+  bottom: 5px;
+}
+
+.mi_list_swiper .swiper-pagination-bullet {
+  background: #2196f3;
+  opacity: 0.3;
+}
+
+.mi_list_swiper .swiper-pagination-bullet-active {
+  opacity: 1;
+}
+
+/* 특별시 스타일 */
+.ml_box.special-city {
+  background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
+  border-color: #ff4757;
+  color: white;
+}
+
+.ml_box.special-city .tt {
+  color: white;
+  font-weight: 700;
+}
+
+.ml_box.special-city .info_label {
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.ml_box.special-city .info_value {
+  color: white;
+}
+
+.ml_box.special-city:hover {
+  background: linear-gradient(135deg, #ff5252, #ff7979);
+  transform: translateY(-3px);
+  box-shadow: 0 6px 12px rgba(255, 107, 107, 0.3);
+}
+
+/* 광역시 스타일 */
+.ml_box.metropolitan-city {
+  background: linear-gradient(135deg, #4facfe, #00f2fe);
+  border-color: #2196f3;
+  color: white;
+}
+
+.ml_box.metropolitan-city .tt {
+  color: white;
+  font-weight: 600;
+}
+
+.ml_box.metropolitan-city .info_label {
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.ml_box.metropolitan-city .info_value {
+  color: white;
+}
+
+.ml_box.metropolitan-city:hover {
+  background: linear-gradient(135deg, #2196f3, #21cbf3);
+  transform: translateY(-3px);
+  box-shadow: 0 6px 12px rgba(33, 150, 243, 0.3);
+}
+
+/* 광역도 스타일 */
+.ml_box.province {
+  background: linear-gradient(135deg, #a8edea, #fed6e3);
+  border-color: #00bcd4;
+  color: #333;
+}
+
+.ml_box.province .tt {
+  color: #333;
+  font-weight: 600;
+}
+
+.ml_box.province .info_label {
+  color: #666;
+}
+
+.ml_box.province .info_value {
+  color: #00bcd4;
+}
+
+.ml_box.province:hover {
+  background: linear-gradient(135deg, #00bcd4, #26c6da);
+  color: white;
+  transform: translateY(-3px);
+  box-shadow: 0 6px 12px rgba(0, 188, 212, 0.3);
+}
+
+.ml_box.province:hover .tt,
+.ml_box.province:hover .info_label,
+.ml_box.province:hover .info_value {
+  color: white;
+}
+
+/* 네이버 스타일 로그인 박스 */
+.login_info_box {
+  padding: 20px;
+  background: #fff;
+  border: 1px solid #e1e5e9;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.login_header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+  padding-bottom: 5px;
+  border-bottom: 1px solid #f0f0f0;
+  width: 100%;
+}
+
+.login_avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  overflow: hidden;
+  margin-right: 12px;
+  border: 2px solid #e1e5e9;
+}
+
+.login_avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.login_user_info {
+  flex: 1;
+}
+
+.user_name {
+  font-size: 14px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 2px;
+}
+
+.user_status {
+  font-size: 12px;
+  color: #03c75a;
+  font-weight: 500;
+}
+
+.login_actions {
+  width: 100%;
+  display: flex;
+  gap: 8px;
+}
+
+.login_btn {
+  flex: 1;
+  height: 40px;
+  background: #03c75a;
+  color: #fff;
+  border: none;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.login_btn:hover {
+  background: #02b351;
+  transform: translateY(-1px);
+}
+
+.signup_btn {
+  flex: 1;
+  height: 40px;
+  background: #fff;
+  color: #03c75a;
+  border: 1px solid #03c75a;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.signup_btn:hover {
+  background: #03c75a;
+  color: #fff;
+  transform: translateY(-1px);
+}

apps/cm/src/entities/auth/lib/token-manager.ts

@@ -1,4 +1,4 @@
-import { AUTH_USER_ID, CLAIM_NAME } from "@/shared/config";
+import { ACCESS_TOKEN, AUTH_USER_ID, CLAIM_NAME, REFRESH_TOKEN } from "@/shared/config";
 import { getCookie, setCookie, removeCookie } from "@/shared/lib";
 
 export class TokenManager {
@@ -76,6 +76,8 @@ export class TokenManager {
 
     this.removeToken(CLAIM_NAME);
     this.removeToken(AUTH_USER_ID);
+    this.removeToken(REFRESH_TOKEN);
+    this.removeToken(ACCESS_TOKEN);
   }
 }
 

apps/cm/src/entities/post/api/post-service.ts

@@ -45,7 +45,7 @@ export class PostApiService implements PostService {
     params?: MyPostParams,
   ): Promise<MyPostList> {
     const response = await client.get<MyPostList>(
-      `${ENDPOINT.BOARD_SERVICE.POSTS}/mypost`,
+      `${ENDPOINT.BOARD_SERVICE.MY_POSTS}`,
       { params },
     );
     return response.data;

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

@@ -0,0 +1,54 @@
+import { client } from "@/shared/api";
+import { ENDPOINT } from "@/shared/config";
+
+export interface Banner {
+  bnrSn: number;
+  bnrTypeCd: string;
+  bnrTypeNm: string;
+  bnrTtl: string;
+  lnkgUrlAddr: string;
+  useYn: string;
+  atflCd: string;
+  mdfcnDt: string;
+  mdfr: string;
+  mdfrNm: string;
+}
+
+export const getBannerList = async (siteId: string) => {
+  const response = await client.get<Banner[]>(
+    `${ENDPOINT.CMS_SERVICE.BANNERS}/${siteId}`,
+  );
+  return response.data;
+};
+
+export const getImageUrlByAtflCd = async (atflCd: string): Promise<string> => {
+  try {
+    const response = await client.get<Blob>(
+      `${ENDPOINT.ATTACH_SERVICE.IMAGES}/atflCd/${atflCd}`,
+      {
+        responseType: "blob",
+      },
+    );
+    const blob = response.data;
+    const url = URL.createObjectURL(blob);
+    return url;
+  } catch (error: unknown) {
+    const err = error as
+      | { status?: number; message?: string; response?: { status?: number } }
+      | Error
+      | undefined;
+    const status = err && typeof err === "object" && "status" in err
+      ? err.status
+      : err && typeof err === "object" && "response" in err && err.response
+        ? err.response.status
+        : undefined;
+    const message = err instanceof Error
+      ? err.message
+      : err && typeof err === "object" && "message" in err
+        ? String(err.message)
+        : String(error);
+    
+    
+    return "";
+  }
+};

apps/cm/src/pages/dashboard/api/banner.ts

@@ -1,34 +0,0 @@
-import { client } from "@/shared/api";
-import { ENDPOINT } from "@/shared/config";
-
-export interface Banner {
-  bnrSn: number;
-  bnrTypeCd: string;
-  bnrTypeNm: string;
-  bnrTtl: string;
-  lnkgUrlAddr: string;
-  useYn: string;
-  atflCd: string;
-  mdfcnDt: string;
-  mdfr: string;
-  mdfrNm: string;
-}
-
-export const getBannerList = async (siteId: string) => {
-  const response = await client.get<Banner[]>(
-    `${ENDPOINT.CMS_SERVICE.BANNERS}/${siteId}`,
-  );
-  return response.data;
-};
-
-export const getImageUrlByAtflCd = async (atflCd: string): Promise<string> => {
-  if (!atflCd) return "";
-  const response = await client.get<Blob>(
-    `${ENDPOINT.ATTACH_SERVICE.IMAGES}/atflCd/${atflCd}`,
-    {
-      responseType: "blob",
-    },
-  );
-  const blob = response.data;
-  return URL.createObjectURL(blob);
-};

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

@@ -1,14 +0,0 @@
-import { client } from "@/shared/api";
-import { ENDPOINT } from "@/shared/config";
-import type { Dashboard, DashboardService } from "../model/dashboard-interface";
-
-export class DashboardApiService implements DashboardService {
-  public async getDashboard(): Promise<Dashboard> {
-    const response = await client.get<Dashboard>(
-      ENDPOINT.CMS_SERVICE.DASHBOARD,
-    );
-    return response.data;
-  }
-}
-
-export const DashboardApi = new DashboardApiService();

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

@@ -0,0 +1,48 @@
+import { client } from "@/shared/api";
+import { ENDPOINT } from "@/shared/config";
+import type { PageableList } from "@/shared/model";
+
+export interface DataStatus {
+  ctpvgnsvycnt: number;
+  filecnt: number;
+  ctpvnm: string;
+}
+
+export const getDataStatusList = async (): Promise<PageableList<DataStatus>> => {
+  const response = await client.get<DataStatus[]>(
+    `${ENDPOINT.DC_SERVICE.DATA_STATUS}`,
+  );
+  const data = response.data;
+
+  console.log("getDataStatusList data:", data);
+
+  return {
+    content: data as DataStatus[],
+    pageable: {
+      sort: {
+        sorted: false,
+        unsorted: true,
+        empty: true,
+      },
+      offset: 0,
+      pageNumber: 0,
+      pageSize: data.length as number,
+      paged: false,
+      unpaged: true,
+    },
+    sort: {
+      sorted: false,
+      unsorted: true,
+      empty: true,
+    },
+    totalPages: 1,
+    totalElements: data.length,
+    number: 0,
+    numberOfElements: data.length,
+    size: data.length,
+    first: true,
+    last: true,
+    empty: data.length === 0,
+  };
+};
+  

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

@@ -1,9 +1,49 @@
 // apps/cm/src/pages/dashboard/api/fo-service.ts
 import { client } from "@/shared/api";
 import { createStore } from "zustand/vanilla";
+import { create } from "zustand";
 import { ENDPOINT } from "@/shared/config";
 import type { OperWqltContent, OperFcltContent, ReuseStatusContent, OperationService   
 } from "../model/fo-interface";
+import type { mapOperFcltItem, mapOperFcltType } from "../model/fo-interface";
+import type { ReuseMapContent, mapReuseMapType } from "../model/fo-interface";
+
+// 기준년도 조회
+export type YearState = {
+  year: string | null;
+};
+export type YearStateActions = {
+  setYear: (year: string | null) => void;
+};
+export type YearStore = YearState & YearStateActions;
+
+export const defaultYearInitState: YearState = {
+  year: null,
+};
+export const createYearStore = (initState: YearState = defaultYearInitState) =>
+  createStore<YearStore>()((set) => ({
+    ...initState,
+    setYear: (year) => set(() => ({ year })),
+  }));
+export const yearStore = createYearStore();
+
+// 유역
+export type BasinState = {
+  selectedBasin: string;
+};
+export type BasinStateActions = {
+  setSelectedBasin: (selectedBasin: string ) => void;
+};
+export type BasinStore = BasinState & BasinStateActions;
+export const defaultBasinInitState: BasinState = {
+  selectedBasin: "한강",
+};
+export const createBasinStore = (initState: BasinState = defaultBasinInitState) =>
+  createStore<BasinStore>()((set) => ({
+    ...initState,
+    setSelectedBasin: (selectedBasin) => set(() => ({ selectedBasin })),
+  }));
+export const basinStore = createBasinStore();
 
 //수계별 시설운영 개소수 및 가동률
 export type OperFcltState = {
@@ -13,7 +53,34 @@ export type OperFcltStateActions = {
   setOperFcltStatus: (operFcltStatus: OperFcltContent[] | null) => void;
 };
 export type OperFcltStore = OperFcltState & OperFcltStateActions;
+// const initialOperFclt: OperFcltContent[]= [
+//         {
+//             "cnt": 710,
+//             "fctCpc": 2911609.0,
+//             "rvbsn": "금강",
+//             "gubun": "R"
+//         },
+//         {
+//             "cnt": 1032,
+//             "fctCpc": 7506047.0,
+//             "rvbsn": "낙동강",
+//             "gubun": "R"
+//         },
+//         {
+//             "cnt": 1261,
+//             "fctCpc": 2061610.0,
+//             "rvbsn": "영산강",
+//             "gubun": "R"
+//         },
+//         {
+//             "cnt": 983,
+//             "fctCpc": 1.3229809E7,
+//             "rvbsn": "한강",
+//             "gubun": "R"
+//         }
+//     ];    
 export const defaultInitOperFcltState: OperFcltState = {
+  // operFcltStatus: initialOperFclt,
   operFcltStatus: null,
 };
 export const createOperFcltStore = (initState: OperFcltState = defaultInitOperFcltState) =>
@@ -21,6 +88,74 @@ export const createOperFcltStore = (initState: OperFcltState = defaultInitOperFc
     ...initState,
     setOperFcltStatus: (operFcltStatus) => set(() => ({ operFcltStatus })),
   }));
+export const operFcltStore = createOperFcltStore();
+
+export const initailMapOperFcltData: mapOperFcltType = {
+    colTitle: {cnt:"개소수",rt:"가동률"}, //헤더 영역
+    data: [ 
+      {name: "금강", cnt: 710, rt: 100,},
+      {name: "한강", cnt: 983, rt: 100,},
+      {name: "낙동강", cnt: 1032, rt: 100,},
+      {name: "영산강", cnt: 1261, rt: 100,},
+    ]
+};
+type mapOperFcltState = {
+  mapOperFclt: mapOperFcltItem[];
+  setMapOperFclt: (mapOperFclt: mapOperFcltItem[]) => void;
+};
+export const useMapOperFcltStore = create<mapOperFcltState>((set) => ({
+  mapOperFclt: initailMapOperFcltData.data,
+  setMapOperFclt: (newMapOperFclt) => set({ mapOperFclt: newMapOperFclt }),
+}));
+
+export const initailMapReuseMapData: mapReuseMapType = {
+    colTitle:  {reuseAmnt: "하수재이용량",cnt  : "시설수" }, //헤더 영역
+    data: [ 
+      {name: "금강", reuseAmnt: 17099, cnt: 3181},
+      {name: "한강", reuseAmnt: 17099, cnt: 3181},
+      {name: "낙동강", reuseAmnt: 14745, cnt: 3100},
+      {name: "영산강", reuseAmnt: 5073, cnt: 1662},
+    ]
+};
+type mapReuseMapState = {
+  mapData: ReuseMapContent[];
+  setMapData: (mapData: ReuseMapContent[]) => void;
+};
+export const useMapReuseMapStore = create<mapReuseMapState>((set) => ({
+  mapData: initailMapReuseMapData.data,
+  setMapData: (newMapOperFclt) => set({ mapData: newMapOperFclt }),
+}));
+
+/**
+ * OperFcltContent[]를 지도 팝업 데이터 형태인 mapOperFcltItem[]으로 변환합니다.
+ * @param data API 응답 데이터
+ * @returns 유역별 개소수 및 가동률이 계산된 데이터
+ */
+function transformToMapData(data: OperFcltContent[]): mapOperFcltItem[] {
+  const basinData = new Map<string, { operatingCpc: number; totalCpc: number; count: number }>();
+
+  // 1. 유역별로 가동/전체 용량 및 개소수 집계
+  for (const item of data) {
+    if (!item.rvbsn) continue;
+
+    const basin = basinData.get(item.rvbsn) || { operatingCpc: 0, totalCpc: 0, count: 0 };
+    
+    basin.totalCpc += item.fctCpc;
+    if (item.gubun === 'R') {
+      basin.operatingCpc += item.fctCpc;
+      basin.count = item.cnt; // 'R' 구분 데이터의 개소수를 사용
+    }
+    basinData.set(item.rvbsn, basin);
+  }
+
+  // 2. mapOperFcltItem 형태로 변환
+  const result: mapOperFcltItem[] = [];
+  for (const [name, { operatingCpc, totalCpc, count }] of basinData.entries()) {
+    const rt = totalCpc > 0 ? Math.round((operatingCpc / totalCpc) * 100) : 0;
+    result.push({ name, cnt: count, rt });
+  }
+  return result;
+}
 
 //수계별 유입ㆍ방류수질 분석
 export type OperWqltState = {
@@ -50,6 +185,12 @@ const initialWqltData: OperWqltContent[] = [
 export const defaultInitOperWqltState: OperWqltState = {
   operWqltStatus: initialWqltData,
 };
+export const createOperWqltStore = (initState: OperWqltState = defaultInitOperWqltState) =>
+  createStore<OperWqltStore>()((set) => ({
+    ...initState,
+    setOperWqltStatus: (operWqltStatus) => set(() => ({ operWqltStatus })),
+  }));
+export const operWqltStore = createOperWqltStore();
 
 // 물재이용 현황
 export type ReuseState = {
@@ -73,29 +214,47 @@ export const createReuseStore = (initState: ReuseState = defaultInitReuseState)
     ...initState,
     setReuseStatus: (reuseStatus) => set(() => ({ reuseStatus })),
   }));
-
-// 기준년도 조회
-export type YearState = {
-  year: string | null;
-};
-export type YearStateActions = {
-  setYear: (year: string | null) => void;
-};
-export type YearStore = YearState & YearStateActions;
-
-export const defaultYearInitState: YearState = {
-  year: null,
-};
-export const createYearStore = (initState: YearState = defaultYearInitState) =>
-  createStore<YearStore>()((set) => ({
-    ...initState,
-    setYear: (year) => set(() => ({ year })),
-  }));
-
-// 전역으로 공유할 store 인스턴스
-export const operFcltStore = createOperFcltStore();
 export const reuseStore = createReuseStore();
-export const yearStore = createYearStore();
+
+/**
+ * 두 객체 또는 배열의 깊은 비교를 수행합니다.
+ * @param obj1 비교할 첫 번째 객체
+ * @param obj2 비교할 두 번째 객체
+ * @returns 두 객체의 내용이 같으면 true, 그렇지 않으면 false
+ */
+// function deepEqual(obj1: any, obj2: any): boolean {
+//   if (obj1 === obj2) {
+//     return true;
+//   }
+
+//   if (obj1 == null || typeof obj1 !== 'object' || obj2 == null || typeof obj2 !== 'object') {
+//     return false;
+//   }
+
+//   const keys1 = Object.keys(obj1);
+//   const keys2 = Object.keys(obj2);
+
+//   if (keys1.length !== keys2.length) {
+//     return false;
+//   }
+
+//   for (const key of keys1) {
+//     if (!keys2.includes(key) || !deepEqual(obj1[key], obj2[key])) {
+//       return false;
+//     }
+//   }
+
+//   // 배열인 경우 순서와 내용이 모두 동일한지 확인
+//   if (Array.isArray(obj1) && Array.isArray(obj2)) {
+//       if (obj1.length !== obj2.length) return false;
+//       for (let i = 0; i < obj1.length; i++) {
+//           if (!deepEqual(obj1[i], obj2[i])) return false;
+//       }
+//   }
+
+//   return true;
+// }
+
 
 export class OperationApiService implements OperationService {
 
@@ -121,6 +280,7 @@ export class OperationApiService implements OperationService {
   // 수계별 시설운영 개소수 및 가동률
   public async getDashOperCntRt(year: string): Promise<OperFcltContent[]> {
     const { operFcltStatus, setOperFcltStatus } = operFcltStore.getState();
+    const { setMapOperFclt } = useMapOperFcltStore.getState();
     // 간단한 캐싱: 데이터가 이미 있으면 API 호출 생략
     if (operFcltStatus && operFcltStatus.length > 0) {
       return operFcltStatus;
@@ -143,10 +303,11 @@ export class OperationApiService implements OperationService {
     }));
 
     setOperFcltStatus(list);
+    setMapOperFclt(transformToMapData(list));
     return list;
   }
 
-  // 수계별 시설운영 개소수 및 가동률
+  // 수계별 유입ㆍ방류수질 분석
   public async getDashOperWqlt(year: string): Promise<OperWqltContent[]> {
     
     const response = await client.get<{
@@ -191,8 +352,25 @@ export class OperationApiService implements OperationService {
     return list;
   }
 
-  
+  // 수계별 하수재이용량, 시설수
+  public async getReuseMap(year: string): Promise<ReuseMapContent[]> {
+    
+    const response = await client.get<{
+      status: number;
+      data: ReuseMapContent[];
+      count: number;
+    }>(ENDPOINT.OPERATION_SERVICE.REUSE_MAP, {
+      params: {
+        year,
+      },
+    });
+
+    const list = (response.data.data ?? []).map((item) => ({
+      ...item,
+    }));
+
+    return list;
+  }
 }
 
 export const OperationApi = new OperationApiService();
-

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

@@ -0,0 +1,66 @@
+import { client } from "@/shared/api";
+import { ENDPOINT } from "@/shared/config";
+import type { PageableList } from "@/shared/model";
+
+export interface ScheduleParams {
+  siteId?: string;
+  schdlTtl?: string;
+  schdlSeCd?: string;
+  schdlBgngYmd?: string;
+  schdlEndYmd?: string;
+  reptYn?: string;
+  commSchdlYn?: string;
+}
+
+export interface Schedule {
+  schdlSn: number;
+  siteId: string;
+  schdlTtl: string;
+  schdlSeCd: string;
+  schdlSeNm?: string;
+  schdlBgngDt: string;
+  schdlEndDt: string;
+  reptYn: string;
+  commSchdlYn: string;
+  schdlCn?: string;
+  actualDate?: string;
+  atflCd?: string | null;
+}
+
+
+export const getScheduleList = async (params?: ScheduleParams): Promise<PageableList<Schedule>> => {
+  const response = await client.get<Schedule[]>(
+    ENDPOINT.CMS_SERVICE.SCHEDULES,
+    { params },
+  );
+  const data = response.data;
+
+  return {
+    content: data as Schedule[],
+    pageable: {
+      sort: {
+        sorted: false,
+        unsorted: true,
+        empty: true,
+      },
+      offset: 0,
+      pageNumber: 0,
+      pageSize: data.length as number,
+      paged: false,
+      unpaged: true,
+    },
+    sort: {
+      sorted: false,
+      unsorted: true,
+      empty: true,
+    },
+    totalPages: 1,
+    totalElements: data.length,
+    number: 0,
+    numberOfElements: data.length,
+    size: data.length,
+    first: true,
+    last: true,
+    empty: data.length === 0,
+  };
+};

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

@@ -1,31 +1,124 @@
 // 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, mapPplOldType, mapPplOldItem } 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 initialUsePplChartData: OldPplChartData = {
+  labels: ["금강", "한강", "낙동강", "영산강"],
+  datasets: [
+    {
+      label: "기타",
+      data: [1966, 15480, 6957, 1937],
+      backgroundColor: "rgba(255, 178, 150, 0.9)"
+    },
+    {
+      label: "오수관로",
+      data: [8074, 15879, 16337, 5671],
+      backgroundColor: "rgba(180, 240, 190, 0.95)"
+    },
+    {
+      label: "우수관로",
+      data: [4838, 12893, 10492, 4281],
+      backgroundColor: "rgba(170, 210, 245, 0.95)"
+    }
+  ]
 };
+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
+    }
+  ]
+};
+type OldPplStoreState = {
+  chartData: OldPplChartData;
+  setChartData: (chartData: OldPplChartData) => void;
+};
+export const useOldPplStore = create<OldPplStoreState>((set) => ({
+  chartData: initialOldPplChartData,
+  setChartData: (chartData) => set(() => ({ chartData })),
+}));
+export const useUsePplStore = create<OldPplStoreState>((set) => ({
+  chartData: initialUsePplChartData,
+  setChartData: (chartData) => set(() => ({ chartData })),
+}));
+
+export const initailMapOldPplData: mapPplOldType = {
+  colTitle: { totalLen: "총길이", pplLen2025: "20~25년", pplLen2530: "25~30년", pplLen30: "30년 이상" }, //헤더 영역
+  data: [
+    { name: "금강", totalLen: 4545, pplLen2025: 1140, pplLen2530: 1391, pplLen30: 2014 },
+    { name: "한강", totalLen: 17099, pplLen2025: 3181, pplLen2530: 3615, pplLen30: 10303 },
+    { name: "낙동강", totalLen: 14745, pplLen2025: 3100, pplLen2530: 1814, pplLen30: 9831 },
+    { name: "영산강", totalLen: 5073, pplLen2025: 1662, pplLen2530: 1411, pplLen30: 2000 },
+  ]
+};
+type mapPplOldState = {
+  mapData: mapPplOldItem[];
+  setMapData: (mapData: mapPplOldItem[]) => void;
+};
+export const useMapOldPplStore = create<mapPplOldState>((set) => ({
+  mapData: initailMapOldPplData.data,
+  setMapData: (newMapData) => set({ mapData: newMapData }),
+}));
+
+/**
+ * OldPplChartData를 지도 팝업 데이터 형태인 mapPplOldItem[]으로 변환합니다.
+ * @param chartData 차트 데이터
+ * @returns 유역별 노후관로 현황 데이터
+ */
+export function transformChartDataToMapData(chartData: OldPplChartData): mapPplOldItem[] {
+  const mapData: mapPplOldItem[] = [];
+  const { labels, datasets } = chartData;
+
+  const pplLen2025Data = datasets.find(d => d.label === '20-25년')?.data || [];
+  const pplLen2530Data = datasets.find(d => d.label === '25-30년')?.data || [];
+  const pplLen30Data = datasets.find(d => d.label === '30년이상')?.data || [];
+
+  labels.forEach((label, index) => {
+    const pplLen2025 = pplLen2025Data[index] || 0;
+    const pplLen2530 = pplLen2530Data[index] || 0;
+    const pplLen30 = pplLen30Data[index] || 0;
+    const totalLen = pplLen2025 + pplLen2530 + pplLen30;
+
+    mapData.push({
+      name: label,
+      totalLen,
+      pplLen2025,
+      pplLen2530,
+      pplLen30,
+    });
+  });
+
+  return mapData;
+}
 
-export const createSnStore = (initState: SnState = defaultInitState) =>
-  createStore<SnStore>()((set) => ({
-    ...initState,
-    setSnStatus: (snStatus) => set(() => ({ snStatus })),
-  }));
 
-// 전역으로 공유할 store 인스턴스
-// export const snStore = createSnStore();
 
 export class SewerageApiService implements SewerageService {
   // 기간별 관로 총길이
@@ -43,6 +136,7 @@ export class SewerageApiService implements SewerageService {
       ...item,
       sumPrlgVl: Number(item.sumPrlgVl),
     }));
+
     return list;
   }
 
@@ -64,6 +158,32 @@ export class SewerageApiService implements SewerageService {
     }));
     return list;
   }
+
+  // 유역별 용도별 관로 길이(km) MV조회 : usgCd - SBA004 오수관, SBA003 우수관
+  public async getMvUsgPplLength(): Promise<PplLengthContent[]> {
+    const response = await client.get<{
+      PplLengthList: PplLengthContent[];
+    }>(ENDPOINT.SEWERAGE_SERVICE.MV_USG_PPL_LENGTH);
+
+    const list = (response.data.PplLengthList ?? []).map((item) => ({
+      ...item,
+      sumPrlgVl: Number(item.sumPrlgVl),
+    }));
+    return list;
+  }
+  // 유역별 노후도별 관로 길이(km) MV조회 : yearGroup - 20년~25년미만,25년~30년미만,30년이상
+  public async getMvOldPplLength(): Promise<PplLengthContent[]> {
+    const response = await client.get<{
+      PplLengthList: PplLengthContent[];
+    }>(ENDPOINT.SEWERAGE_SERVICE.MV_OLD_PPL_LENGTH);
+
+    const list = (response.data.PplLengthList ?? []).map((item) => ({
+      ...item,
+      sumPrlgVl: Number(item.sumPrlgVl),
+    }));
+    return list;
+  }
+
 }
 
 export const SewerageApi = new SewerageApiService();

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

@@ -0,0 +1,53 @@
+import { client } from "@/shared/api";
+import { ENDPOINT } from "@/shared/config";
+import type { PageableList } from "@/shared/model";
+
+export interface Support {
+  total: number;
+  ongoing: number;
+  han: number;
+  youngsang: number;
+  geum: number;
+  nakdong: number;
+  completed: number;
+  type: string;
+}
+
+export const getSupportList = async (): Promise<PageableList<Support>> => {
+  const response = await client.get<Support[]>(
+    `${ENDPOINT.IC_SERVICE.GROUPING_STATISTICS}`,
+  );
+  const data = response.data;
+
+  console.log("getSupportList data:", data);
+
+  return {
+    content: data as Support[],
+    pageable: {
+      sort: {
+        sorted: false,
+        unsorted: true,
+        empty: true,
+      },
+      offset: 0,
+      pageNumber: 0,
+      pageSize: data.length as number,
+      paged: false,
+      unpaged: true,
+    },
+    sort: {
+      sorted: false,
+      unsorted: true,
+      empty: true,
+    },
+    totalPages: 1,
+    totalElements: data.length,
+    number: 0,
+    numberOfElements: data.length,
+    size: data.length,
+    first: true,
+    last: true,
+    empty: data.length === 0,
+  };
+};
+  

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

@@ -1,84 +1,210 @@
-import React, { useEffect, useRef } from "react";
+"use client";
+/**
+ * 유역 지도
+ */
+import React, { useCallback, 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 } from "../model/map-data";
+import { svcInfo } from "../model/map-data";
+import type { mapOperFcltType, mapReuseMapType} from "../model/fo-interface";
+import type { mapPplOldType } from "../model/sn-interface";
+import { useMapOperFcltStore, OperationApi, useMapReuseMapStore } from "../api/fo-service";
+import { useMapOldPplStore } from "../api/sn-service";
+import {Button} from "@common/components";
 
 const SVG_URL = "/images/region_map.svg"; // public 폴더에 region_map.svg 위치 필요
 
-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);
 }
 
+const mapOperFcltData: mapOperFcltType = {
+    colTitle: {cnt:"개소수",rt:"가동률"}, //헤더 영역
+    data: [ 
+      {name: "금강", cnt: 710, rt: 100,},
+      {name: "한강", cnt: 983, rt: 100,},
+      {name: "낙동강", cnt: 1032, rt: 100,},
+      {name: "영산강", cnt: 1261, rt: 100,},
+    ]
+};
+const mapPplOldData: mapPplOldType = {
+    colTitle:  {totalLen: "총길이",pplLen2025: "20~25년",pplLen2530: "25~30년",pplLen30  : "30년 이상" }, //헤더 영역
+    data: [ 
+      {name: "금강", totalLen: 4545, pplLen2025: 1140, pplLen2530: 1391, pplLen30  : 2014},
+      {name: "한강", totalLen: 17099, pplLen2025: 3181, pplLen2530: 3615, pplLen30  : 10303},
+      {name: "낙동강", totalLen: 14745, pplLen2025: 3100, pplLen2530: 1814, pplLen30  : 9831},
+      {name: "영산강", totalLen: 5073, pplLen2025: 1662, pplLen2530: 1411, pplLen30  : 2000},
+    ]
+};
+const mapReuseMapData: mapReuseMapType = {
+    colTitle:  {reuseAmnt: "하수재이용량",cnt  : "시설수" }, //헤더 영역
+    data: [ 
+      {name: "금강", reuseAmnt: 17099, cnt: 3181},
+      {name: "한강", reuseAmnt: 17099, cnt: 3181},
+      {name: "낙동강", reuseAmnt: 14745, cnt: 3100},
+      {name: "영산강", reuseAmnt: 5073, cnt: 1662},
+    ]
+};
+
 export function KoreaBasinMap() {
   const stageRef = useRef<HTMLDivElement>(null);
   const svgLayerRef = useRef<HTMLDivElement>(null);
   const labelsLayerRef = useRef<HTMLDivElement>(null);
   const popupRef = useRef<HTMLDivElement>(null);
-  const badgeRef = useRef<HTMLDivElement>(null);
-  const rowsRef = useRef<HTMLTableSectionElement>(null);
-  const colTitleRef = useRef<HTMLTableCellElement>(null);
+  const [services, setServices] = useState(svcInfo);
+  const [popupContent, setPopupContent] = useState<{ title: string; items: { header: string; data: string }[] }>({
+    title: '',
+    items: [],
+  });
+  const { selectedBasin, setSelectedBasin } = useStore(basinStore);
+  const selectedBasinKey = basinKeyMap[selectedBasin];
+  const {mapOperFclt}  = useMapOperFcltStore();
+  const {mapData: mapPplOld}  = useMapOldPplStore();
+  const {setMapData: setMapReuseMapData}  = useMapReuseMapStore();
+  mapOperFcltData.data = mapOperFclt;
+  mapPplOldData.data = mapPplOld;
+  // mapReuseMapData.data =   mapReuseMap;
+  let standardYear = '2024';
+  useEffect(() => {   
+    const fetchData = async () => {
+      try {
+        standardYear = await OperationApi.getStandardYear();
+        const mapReuseMapRslt = await OperationApi.getReuseMap(standardYear);
+        setMapReuseMapData(mapReuseMapRslt);
+        mapReuseMapData.data = mapReuseMapRslt;
+      } catch (e) {
+        console.error("하수재이용량 map 데이터 조회 실패", e);
+      }
+    };
+    fetchData();
+  }, []);
+  // 유역정보 
+  const showFor = useCallback((g: SVGGElement) => {
+    const activeService = services.find(s => s.active);
+    if (!activeService) return;
+
+    const key = (g as SVGGElement & { dataset: { key: string; label: string } }).dataset.key;
+    const basinName = BASIN_DATA[key as keyof typeof BASIN_DATA]?.name || (g as SVGGElement & { dataset: { label: string } }).dataset.label;
+    
+    const newPopupContent: { title: string; items: { header: string; data: string }[] } = { title: '', items: [] };
+
+    if (activeService.svcId === 'fo') { // 운영실태
+      const item = mapOperFcltData.data.find(d => d.name === basinName);
+      newPopupContent.title = `${standardYear}년도 ${basinName}유역 시설운영 현황`;
+      newPopupContent.items.push({
+        header: mapOperFcltData.colTitle.cnt,
+        data: item ? `${fmt(item.cnt)}개소` : '-',
+      });
+      newPopupContent.items.push({
+        header: mapOperFcltData.colTitle.rt,
+        data: item ? `${item.rt}%` : '-',
+      });
+    } else if (activeService.svcId === 'sn') { // 하수관로
+      const item = mapPplOldData.data.find(d => d.name === basinName);
+      newPopupContent.title = `${standardYear}년도 ${basinName}유역 노후하수관로 현황`;
+      const colTitles = mapPplOldData.colTitle;
+      newPopupContent.items.push({
+        header: colTitles.totalLen,
+        data: item ? `${fmt(item.totalLen)}km` : '-',
+      });
+      newPopupContent.items.push({
+        header: colTitles.pplLen2025,
+        data: item ? `${fmt(item.pplLen2025)}km` : '-',
+      });
+      newPopupContent.items.push({
+        header: colTitles.pplLen2530,
+        data: item ? `${fmt(item.pplLen2530)}km` : '-',
+      });
+      newPopupContent.items.push({
+        header: colTitles.pplLen30,
+        data: item ? `${fmt(item.pplLen30)}km` : '-',
+      });
+    } else if (activeService.svcId === 'wr') { // 물재이용
+      const item = mapReuseMapData.data.find(d => d.name === basinName);
+      newPopupContent.title = `${standardYear}년도 ${basinName}유역 물재이용 현황`;
+      newPopupContent.items.push({
+        header: mapReuseMapData.colTitle.reuseAmnt,
+        data: item ? `${fmt(item.reuseAmnt)}m³` : '-',
+      });
+      newPopupContent.items.push({
+        header: mapReuseMapData.colTitle.cnt,
+        data: item ? `${fmt(item.cnt)}개소` : '-',
+      });
+    }
+
+    setPopupContent(newPopupContent);
+
+    if (!stageRef.current) return;
+    const sRect = stageRef.current.getBoundingClientRect(),
+      r = g.getBoundingClientRect();
+    const cx = (r.left + r.right) / 2 - sRect.left;
+    const ty = r.top - sRect.top;
+    if (popupRef.current) {
+      popupRef.current.style.left = cx + "px";
+      popupRef.current.style.top = ty + 6 + "px";
+      popupRef.current.style.opacity = "1";
+      popupRef.current.style.visibility = "visible";
+      if (styles.show) {
+        popupRef.current.classList.add(styles.show);
+      }
+    }
+
+    if (popupRef.current) {
+      const pRect = popupRef.current.getBoundingClientRect();
+      const x = Math.max(
+        12 + pRect.width / 2,
+        Math.min(cx, sRect.width - 12 - pRect.width / 2),
+      );
+      popupRef.current.style.left = x + "px";
+    }
+  }, [services, mapOperFclt]);
+
+  // selectedBasinKey prop이 변경될 때 지도를 업데이트하는 useEffect
+  useEffect(() => {
+    if (selectedBasinKey) {
+      const svg = svgLayerRef.current?.querySelector("svg");
+      if (!svg) return;
+
+      // 모든 유역의 활성화 상태를 초기화합니다.
+      svg.querySelectorAll('.basin.active').forEach(el => el.classList.remove('active'));
+
+      const targetGroup = svg.querySelector(`.basin[data-key="${selectedBasinKey}"]`) as SVGGElement | null;
+      targetGroup?.classList.add('active');
+    }
+  }, [selectedBasinKey]);
 
   useEffect(() => {
     let svg: SVGSVGElement | null = null;
     let gs: SVGGElement[] = [];
     let labels: HTMLDivElement[] = [];
 
-    console.log("Loading SVG from:", SVG_URL);
+    const clear = () => {
+      gs.forEach((el) => el.classList.remove("active"));
+      if (popupRef.current) {
+        if (styles.show) {
+          popupRef.current.classList.remove(styles.show);
+        }
+        popupRef.current.style.opacity = "0";
+      }
+      labels.forEach((l) => l.classList.remove("active"));
+    };
+
+    // const positionLabels = () => {
+    //   // This function's content is moved inside the fetch callback
+    // };
+
+    // console.log("Loading SVG from:", SVG_URL);
     fetch(SVG_URL)
       .then((r) => {
-        console.log("SVG fetch response:", r.status, r.statusText);
+        // console.log("SVG fetch response:", r.status, r.statusText);
         if (!r.ok) throw new Error(`HTTP error! status: ${r.status}`);
         return r.text();
       })
       .then((txt) => {
-        console.log("SVG content loaded, length:", txt.length);
+        // console.log("SVG content loaded, length:", txt.length);
         if (!svgLayerRef.current) {
           console.error("svgLayerRef.current is null");
           return;
@@ -89,7 +215,7 @@ export function KoreaBasinMap() {
           console.error("SVG element not found in loaded content");
           return;
         }
-        console.log("SVG element found:", svg);
+        // console.log("SVG element found:", svg);
 
         // viewBox/크기 세팅
         if (!svg.hasAttribute("viewBox")) {
@@ -109,13 +235,13 @@ export function KoreaBasinMap() {
 
         // 1) 지도 그룹 수집
         gs = [];
-        console.log("Looking for basin groups in SVG...");
+        // console.log("Looking for basin groups in SVG...");
         BASIN_IDS.forEach((item) => {
           let g: SVGGElement | null = null;
           for (const id of item.labels) {
             g = svg!.getElementById(id) as SVGGElement | null;
             if (g) {
-              console.log(`Found group for ${item.key} with id '${id}':`, g);
+              // console.log(`Found group for ${item.key} with id '${id}':`, g);
               break;
             }
           }
@@ -138,101 +264,23 @@ export function KoreaBasinMap() {
           
           gs.push(g);
         });
-        console.log(`Found ${gs.length} basin groups`);
+        // console.log(`Found ${gs.length} basin groups`);
         
         // 각 유역 그룹의 패스 정보 확인
-        gs.forEach((g, index) => {
-          const paths = g.querySelectorAll('path');
-          console.log(`Group ${index} (${(g as SVGGElement & { dataset: { key: string } }).dataset.key}):`, {
-            element: g,
-            pathCount: paths.length,
-            paths: Array.from(paths).map(p => ({
-              className: p.className.baseVal,
-              d: p.getAttribute('d')?.substring(0, 50) + '...'
-            }))
-          });
-        });
-
-        // 2) 함수들 먼저 정의
-        const clear = () => {
-          gs.forEach((el) => el.classList.remove("active"));
-          if (popupRef.current) {
-            if (styles.show) {
-              popupRef.current.classList.remove(styles.show);
-            }
-            popupRef.current.style.opacity = "0";
-            popupRef.current.style.visibility = "hidden";
-          }
-          if (badgeRef.current) {
-            if (styles.show) {
-              badgeRef.current.classList.remove(styles.show);
-            }
-            badgeRef.current.style.opacity = "0";
-            badgeRef.current.style.visibility = "hidden";
-          }
-          labels.forEach((l) => l.classList.remove("active"));
-        };
-
-        function showFor(g: SVGGElement) {
-          console.log("showFor called for:", g);
-          const key = (g as SVGGElement & { dataset: { key: string; label: string } }).dataset.key;
-          const data = (BASIN_DATA as Record<string, { name: string; colTitle: string; rows: (string | number)[][] }>)[key] || {
-            name: (g as SVGGElement & { dataset: { label: string } }).dataset.label,
-            colTitle: "",
-            rows: [],
-          };
-          console.log("Data for popup:", data);
-          
-          if (badgeRef.current) badgeRef.current.textContent = data.name;
-          if (colTitleRef.current)
-            colTitleRef.current.textContent = data.colTitle || "???";
-          if (rowsRef.current)
-            rowsRef.current.innerHTML = data.rows
-              .map(
-                (r: (string | number)[]) =>
-                  `<tr><td>${r[0]}</td><td style="text-align:right">${fmt(Number(r[1]) || 0)}</td></tr>`,
-              )
-              .join("");
-
-          if (!stageRef.current) return;
-          const sRect = stageRef.current.getBoundingClientRect(),
-            r = g.getBoundingClientRect();
-          const cx = (r.left + r.right) / 2 - sRect.left;
-          const ty = r.top - sRect.top;
-
-          console.log("Popup position:", { cx, ty });
-
-          if (badgeRef.current) {
-            badgeRef.current.style.left = cx + "px";
-            badgeRef.current.style.top = ty + 24 + "px";
-          }
-          if (popupRef.current) {
-            popupRef.current.style.left = cx + "px";
-            popupRef.current.style.top = ty + 6 + "px";
-            popupRef.current.style.opacity = "1";
-            popupRef.current.style.visibility = "visible";
-            if (styles.show) {
-              popupRef.current.classList.add(styles.show);
-            }
-            console.log("Added show class to popup:", popupRef.current.classList.toString());
-          }
-          if (badgeRef.current && styles.show) {
-            badgeRef.current.classList.add(styles.show);
-          }
-
-          if (popupRef.current) {
-            const pRect = popupRef.current.getBoundingClientRect();
-            const x = Math.max(
-              12 + pRect.width / 2,
-              Math.min(cx, sRect.width - 12 - pRect.width / 2),
-            );
-            popupRef.current.style.left = x + "px";
-            if (badgeRef.current) badgeRef.current.style.left = x + "px";
-          }
-        }
+        // gs.forEach((g, index) => {
+        //   const paths = g.querySelectorAll('path');
+        //   // console.log(`Group ${index} (${(g as SVGGElement & { dataset: { key: string } }).dataset.key}):`, {
+        //   //   element: g,
+        //   //   pathCount: paths.length,
+        //   //   paths: Array.from(paths).map(p => ({
+        //   //     className: p.className.baseVal,
+        //   //     d: p.getAttribute('d')?.substring(0, 50) + '...'
+        //   //   }))
+        //   // });
+        // });
 
         function showForWithLabel(g: SVGGElement) {
-          console.log("showForWithLabel called for:", g);
+          // console.log("showForWithLabel called for:", g);
           showFor(g);
           const idx = gs.indexOf(g);
           labels.forEach((l) => l.classList.remove("active"));
@@ -253,7 +301,7 @@ export function KoreaBasinMap() {
         }
 
         // 3) 라벨 위치
-        function positionLabels() {
+        const positionLabels = () => {
           if (!stageRef.current || !svg) return;
           const sRect = stageRef.current.getBoundingClientRect();
           const inset =
@@ -302,7 +350,7 @@ export function KoreaBasinMap() {
             }
             labels[i]!.style.left = `${px}px`;
             labels[i]!.style.top = `${py + 18}px`;
-          });
+          });          
         }
 
         // 4) 상호작용 (함수들은 이미 위에서 정의됨)
@@ -321,7 +369,13 @@ export function KoreaBasinMap() {
             clear();
             g.classList.add("active");
             showForWithLabel(g);
+            const basinKey = g.dataset.key as keyof typeof BASIN_DATA | undefined;
+            if (basinKey) {
+              const basinName = BASIN_DATA[basinKey].name;
+              setSelectedBasin(basinName);
+            }
           });
+          
         });
         if (stageRef.current) {
           stageRef.current.addEventListener("mouseleave", clear);
@@ -344,83 +398,105 @@ export function KoreaBasinMap() {
     return () => {
       window.removeEventListener("resize", () => {});
     };
-  }, []);
+  }, [selectedBasinKey, showFor]); // 의존성 배열에 mapOperFclt 추가 불필요
 
+  const handleSvcInfoClick = (clickedSvcId: string) => {
+    setServices(prevServices =>
+      prevServices.map(svc => ({
+        ...svc,
+        active: svc.svcId === clickedSvcId,
+      }))
+    );
+  };
   // 스타일은 필요에 따라 tailwind, css 등으로 커스터마이즈하세요.
   return (
-    <div
-      ref={stageRef}
-      id="stage"
-      style={
-        {
-          aspectRatio: 0.72/1, 
-          width: "100%",
-          maxHeight: "100%",
-          position: "relative",
-          margin: "auto",      
-          "--map-inset": "0%",
-        } as React.CSSProperties
-      }
-    >
-      <div
-        className={styles.bgLayer}
-        id="bgLayer"
-      />
-      <div
-        ref={svgLayerRef}
-        id="svgLayer"
-        className={`${styles.svgLayer} ${styles.svgContainer}`}
-        style={{ width: "100%", height: "100%" }}
-      />
-      <div
-        ref={labelsLayerRef}
-        id="labelsLayer"
-        className={styles.labelsLayer}
-        style={{
-          position: "absolute",
-          left: 0,
-          top: 0,
-          width: "100%",
-          height: "100%",
-          pointerEvents: "none",
-        }}
-      />
-      <div
-        ref={badgeRef}
-        id="badge"
-        className={styles.badge}
-        style={{ position: "absolute", zIndex: 10, display: "block" }}
-      />
-      <div
-        ref={popupRef}
-        id="popup"
-        className={styles.popup}
-        style={{
-          position: "absolute",
-          zIndex: 20,
-          background: "#fff",
-          border: "1px solid #ccc",
-          borderRadius: 8,
-          padding: 12,
-          minWidth: 160,
-          boxShadow: "0 2px 8px #0002",
-          display: "block",
-          opacity: 0,
-          visibility: "hidden",
-        }}
-      >
-        <table style={{ width: "100%" }}>
-          <thead>
-            <tr>
-              <th>구분</th>
-              <th ref={colTitleRef} id="colTitle">
-                시설수
-              </th>
-            </tr>
-          </thead>
-          <tbody ref={rowsRef} id="rows"></tbody>
-        </table>
+    <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>
+          
+            <div className="flex gap-2">
+              {services.map((svc) => (
+                <Button
+                  key={svc.name}
+                  className="h-[3.2rem] float-right"
+                  color={svc.active ? "primary" : "white"}
+                  onClick={() => handleSvcInfoClick(svc.svcId)}
+                >
+                  {svc.name}
+                </Button>
+              ))}
+            </div>
+         
+        </div>
+        <div id="mapArea" style={{height: "calc(100% - 40px)"}}> 
+          <div
+            ref={stageRef}
+            id="stage"
+            style={
+              {
+                aspectRatio: 0.72/1, 
+                width: "100%",
+                maxHeight: "100%",
+                position: "relative",
+                margin: "auto",      
+                "--map-inset": "0%",
+              } as React.CSSProperties
+            }
+          >
+            <div
+              className={styles.bgLayer}
+              id="bgLayer"
+            />
+            <div
+              ref={svgLayerRef}
+              id="svgLayer"
+              className={`${styles.svgLayer} ${styles.svgContainer}`}
+              style={{ width: "100%", height: "100%" }}
+            />
+            <div
+              ref={labelsLayerRef}
+              id="labelsLayer"
+              className={styles.labelsLayer}
+              style={{
+                position: "absolute",
+                left: 0,
+                top: 0,
+                width: "100%",
+                height: "100%",
+                pointerEvents: "none",
+              }}
+            />
+            <div
+              ref={popupRef}
+              id="popup"
+              className={`${styles.popup} absolute z-20 font-sans border border-blue-200 rounded-lg shadow-md overflow-hidden opacity-0 invisible bg-blue-50`}
+              style={{
+                minWidth: 160,
+                display: 'grid',
+                gridTemplateColumns: `repeat(${Math.max(1, popupContent.items.length)}, 1fr)`,
+              }}
+            >
+              {/* 제목 영역 */}
+              <div className="bg-blue-100 text-center font-bold border-b-2 border-blue-200 flex items-center justify-center" style={{ gridColumn: `span ${Math.max(1, popupContent.items.length)}` }}>
+                {popupContent.title}
+              </div>
+
+              {/* 헤더 및 데이터 동적 렌더링 */}
+              {popupContent.items.map((item, index) => (
+                <div key={`header-${index}`} className={`text-center border-b-2 border-blue-200 flex items-center justify-center ${index < popupContent.items.length - 1 ? 'border-r-2' : ''}`}>
+                  {item.header}
+                </div>
+              ))}
+              {popupContent.items.map((item, index) => (
+                <div key={`data-${index}`} className={`text-center flex items-center justify-center ${index < popupContent.items.length - 1 ? 'border-r-2' : ''}`}>
+                  {item.data}
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
       </div>
-    </div>
+    </div>  
   );
 }

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

@@ -1,32 +0,0 @@
-export interface SiteStatisticsContent {
-  siteId: string;
-  siteNm: string;
-  accessHour: string;
-  accessCnt: number;
-}
-
-export interface MenuStatisticsContent {
-  menuCd: number;
-  menuNm: string;
-  accessCnt: number;
-}
-
-export interface Dashboard {
-  memberTotCnt: number;
-  memberTodayCnt: number;
-  pstTotCnt: number;
-  pstTodayCnt: number;
-  accessTodayCnt: number;
-  accessBefDayPer: number;
-  apiTodayCnt: number;
-  waitMemberCnt: number;
-  waitCntnCnt: number;
-  notiList: [];
-  schdlList: [];
-  siteAccessList: SiteStatisticsContent[];
-  menuAccessList: MenuStatisticsContent[];
-}
-
-export interface DashboardService {
-  getDashboard(): Promise<Dashboard>;
-}

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

@@ -34,6 +34,11 @@ export interface OperWqltContent {
   avgEfflTn: number;      // 기간 평균 유출수 TN
 }
 
+export interface ReuseMapContent {
+  name: string;          // 유역명
+  reuseAmnt: number;      // 하수재이용량
+  cnt: number;            // 시설수
+}
 
 export interface ReuseStatusContent {
   yr: string;
@@ -47,4 +52,26 @@ export interface OperationService {
   getDashOperCntRt(year: string): Promise<OperFcltContent[]>;
   getDashOperWqlt(year: string): Promise<OperWqltContent[]>;
   getReuseStatus(): Promise<ReuseStatusContent[]>;
-}
+}
+
+export type mapOperFcltItem = {
+  name: string;
+  cnt: number;
+  rt: number;
+};
+
+export type mapOperFcltType = {
+  colTitle:  {
+    cnt: string; // 개소수
+    rt: string;  // 가동률
+  };
+  data: mapOperFcltItem[];
+};
+
+export type mapReuseMapType = {
+  colTitle:  {
+    reuseAmnt: string; // 하수재이용량
+    cnt: string;  // 시설수
+  };
+  data: ReuseMapContent[];
+};

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,9 +1,85 @@
+import { basinKeyMap } from "../model/map-data";
 export interface PplLengthContent {
   zoneNm: string;
   sumPrlgVl: number;
+  usgCd?: string;
+  yearGroup?: string;
 }
 
 export interface SewerageService {
   getPplLength(ymdFrom: string, ymdTo: string, useCd: string): Promise<PplLengthContent[]>;
   getPplUseLength(ymdFrom: string, ymdTo: string, useCd: string): Promise<PplLengthContent[]>;
+  getMvUsgPplLength(): Promise<PplLengthContent[]>;
+  getMvOldPplLength(): 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 type mapPplOldItem = {
+  name: string;
+  totalLen: number;
+  pplLen2025: number;
+  pplLen2530: number;
+  pplLen30: number;
+};
+
+export type mapPplOldType = {
+  colTitle: {
+    totalLen: string; // 총길이
+    pplLen2025: string;  // 20~25년
+    pplLen2530: string;  // 25~30년
+    pplLen30: string;  // 30년 이상
+  };
+  data: mapPplOldItem[];
+};
+
+
+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/model/support-columns.tsx

@@ -0,0 +1,49 @@
+import type { ColumnDef } from "@tanstack/react-table";
+import type { Support } from "../api/support-service";
+
+const typeLabelMap: Record<string, string> = {
+  waterQuality: "수질",
+  flood: "침수",
+  technical: "기술지원",
+};
+
+const supportTableColumns: ColumnDef<Support>[] = [
+  {
+    accessorKey: "type",
+    header: "구분",
+    cell: ({ getValue }) => {
+      const value = getValue() as string;
+      return typeLabelMap[value] || value;
+    },
+  },
+  {
+    accessorKey: "total",
+    header: "합계",
+  },
+  {
+    accessorKey: "han",
+    header: "한강",
+  },
+  {
+    accessorKey: "nakdong",
+    header: "낙동강",
+  },
+  {
+    accessorKey: "geum",
+    header: "금강",
+  },  
+  {
+    accessorKey: "youngsang",
+    header: "영산강",
+  },
+  {
+    accessorKey: "ongoing",
+    header: "진행중",
+  },
+  {
+    accessorKey: "completed",
+    header: "완료",
+  },
+];
+
+export { supportTableColumns };

apps/cm/src/pages/dashboard/model/table-columns.tsx

@@ -1,28 +1,9 @@
 import dayjs from "dayjs";
 import type { ColumnDef } from "@tanstack/react-table";
-import { Badge } from "@common/components";
 import type { MyPost, NoticePost } from "@/entities/post";
+import type { Schedule } from "../api/schedule-service";
 
 const noticePostTableColumns: ColumnDef<NoticePost>[] = [
-  {
-    header: "번호",
-    cell: ({ row, table }) => {
-      if (row.original.upndFixYn === "Y") {
-        return (
-          <Badge
-            color="orange"
-            className="flex size-8 items-center justify-center"
-          >
-            <i className="diveicon di-volume-up-fill" />
-          </Badge>
-        );
-      }
-      const totalRows = table.getRowCount();
-      const currentPage = table.getState().pagination.pageIndex;
-      const pageSize = table.getState().pagination.pageSize;
-      return totalRows - (currentPage * pageSize + row.index);
-    },
-  },
   {
     accessorKey: "pstTtl",
     header: "제목",
@@ -43,33 +24,35 @@ const noticePostTableColumns: ColumnDef<NoticePost>[] = [
 ];
 
 const myPostTableColumns: ColumnDef<MyPost>[] = [
-  {
-    header: "번호",
-    cell: ({ row, table }) => {
-      const totalRows = table.getRowCount();
-      const currentPage = table.getState().pagination.pageIndex;
-      const pageSize = table.getState().pagination.pageSize;
-      return totalRows - (currentPage * pageSize + row.index);
-    },
-  },
   {
     accessorKey: "pstTtl",
     header: "제목",
   },
-  {
-    accessorKey: "wrtrNm",
-    header: "작성자",
-  },
   {
     accessorKey: "regDt",
     header: "작성일",
     cell: ({ row }) => dayjs(row.original.regDt).format("YYYY-MM-DD"),
   },
+];
+
+
+const scheduleTableColumns: ColumnDef<Schedule>[] = [
   {
-    accessorKey: "inqNocs",
-    header: "조회수",
+    accessorKey: "schdlTtl",
+    header: "주요일정",
+    cell: ({ row }) => {
+      const startDate = dayjs(row.original.schdlBgngDt).format("YYYY-MM-DD");
+      const endDate = dayjs(row.original.schdlEndDt).format("YYYY-MM-DD");
+      const schdlTtl = row.original.schdlTtl;
+      return (
+        <div className="text-left">
+          [{startDate} ~ {endDate}]<br />{schdlTtl}
+        </div>
+      );
+    },
   },
 ];
 
 
-export { noticePostTableColumns, myPostTableColumns };
+
+export { noticePostTableColumns, myPostTableColumns, scheduleTableColumns };

apps/cm/src/pages/dashboard/ui/banner-list.tsx

@@ -2,105 +2,185 @@
 
 import { useRef } from "react";
 import { useQuery } from "@tanstack/react-query";
-import Autoplay from "embla-carousel-autoplay";
 import { ENDPOINT } from "@/shared/config";
-import { getImageUrlByAtflCd, getBannerList } from "../api/banner";
+import { getImageUrlByAtflCd, getBannerList, type Banner } from "../api/banner-service";
 import { getCookie } from "@/shared/lib";
 
 import {
-    Carousel,
-    CarouselContent,
-    CarouselItem,
-    CarouselNext,
-    CarouselPrevious,
-  } from "@common/components";
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+  Autoplay,
+} from "@common/components";
 
-
-  type BannerImageProps = {
-    atflCd: string;
-    bnrSn: number;
-    lnkgUrlAddr: string;
-  };
-
-const BannerList: React.FC = () => {
-    const siteId = getCookie("site-id-key") ?? "";
-
-    const BannerImage = ({ atflCd, bnrSn, lnkgUrlAddr }: BannerImageProps) => {
-        const { data: imageUrl, isLoading } = useQuery({
-          queryKey: [ENDPOINT.ATTACH_SERVICE.IMAGES, atflCd],
-          queryFn: () => getImageUrlByAtflCd(atflCd),
-          enabled: !!atflCd,
-        });
-      
-        const handleClick = () => {
-          if (lnkgUrlAddr) {
-            window.open(lnkgUrlAddr, '_blank');
-          }
-        };
-      
-        if (isLoading) {
-          return (
-            <div className="relative flex h-24 items-center justify-center bg-accent mx-auto">
-              <div className="text-sm text-muted-foreground">로딩 중...</div>
-            </div>
-          );
-        }
-      
-        if (!imageUrl) {
-          return (
-            <div className="relative flex h-24 items-center justify-center bg-accent mx-auto">
-              <div className="text-sm text-muted-foreground">이미지 없음</div>
-            </div>
-          );
-        }
-      
-        return (
-          <div 
-            className="relative flex h-24 items-center justify-center cursor-pointer hover:opacity-80 transition-opacity mx-auto"
-            onClick={handleClick}
-          >
-            <img src={imageUrl} className="object-contain w-full h-full" alt="배너 이미지" />
-          </div>
-        );
-      };
-      const { data: bannerList } = useQuery({
-        queryKey: [ENDPOINT.CMS_SERVICE.BANNERS, siteId],
-        queryFn: () => getBannerList(siteId),
-      });
-    
-      const plugin = useRef(Autoplay({ delay: 2000, stopOnInteraction: true }));
-    
-    return (
-        <div className="card card-border">
-            <Carousel
-           plugins={[plugin.current]}
-           opts={{ loop: true }}
-           className="relative my-8 h-24"
-         >
-           <CarouselContent>
-               {bannerList && bannerList.length > 0 ? (
-                bannerList.map((banner) => (
-                  <CarouselItem key={`banner-${banner.bnrSn}`} className="basis-1/3">
-                    <BannerImage 
-                      atflCd={banner.atflCd} 
-                      bnrSn={banner.bnrSn} 
-                      lnkgUrlAddr={banner.lnkgUrlAddr}
-                    />
-                  </CarouselItem>
-                ))
-              ) : (
-               <CarouselItem className="basis-1/3">
-                 <div className="relative flex h-24 w-full items-center justify-center bg-accent">
-                   <div className="text-sm text-muted-foreground">배너가 없습니다</div>
-                 </div>
-               </CarouselItem>
-             )}
-           </CarouselContent>
-           <CarouselPrevious className="absolute left-2 top-1/2 !bg-[rgba(255,255,255,0.8)] text-accent-foreground z-10" />
-           <CarouselNext className="absolute right-2 top-1/2 !bg-[rgba(255,255,255,0.8)] text-accent-foreground z-10" />
-         </Carousel>
-        </div>
-    );
+type BannerImageProps = {
+  atflCd: string;
+  lnkgUrlAddr: string;
 };
 
-export default BannerList;
+const BannerList: React.FC = () => {
+  const siteId = getCookie("site-id-key") ?? "";
+
+  const BannerImage = ({ atflCd, lnkgUrlAddr }: BannerImageProps) => {
+    const { data: imageUrl, isLoading } = useQuery({
+      queryKey: [ENDPOINT.ATTACH_SERVICE.IMAGES, atflCd],
+      queryFn: () => getImageUrlByAtflCd(atflCd),
+      enabled: !!atflCd,
+    });
+
+    const handleClick = () => {
+      if (lnkgUrlAddr) {
+        window.open(lnkgUrlAddr, "_blank");
+      }
+    };
+
+    if (isLoading) {
+      return (
+        <div className="relative flex h-[210px] w-full items-center justify-center bg-accent">
+          <div className="text-sm text-muted-foreground">로딩 중...</div>
+        </div>
+      );
+    }
+
+    if (!imageUrl) {
+      return (
+        <div className="relative flex h-[210px] w-full items-center justify-center bg-accent">
+          <div className="text-sm text-muted-foreground">이미지 없음</div>
+        </div>
+      );
+    }
+
+    return (
+      <div
+        className="relative h-[210px] w-full cursor-pointer overflow-hidden transition-opacity hover:opacity-80"
+        onClick={handleClick}
+      >
+        <div
+          className="h-full w-full bg-cover bg-center"
+          style={{ backgroundImage: `url(${imageUrl})` }}
+          role="img"
+          aria-label="배너 이미지"
+        />
+      </div>
+    );
+  };
+
+  const {
+    data: bannerList,
+    error: bannerError,
+    isLoading: isLoadingBanners,
+  } = useQuery<Banner[]>({
+    queryKey: [ENDPOINT.CMS_SERVICE.BANNERS, siteId],
+    queryFn: () => getBannerList(siteId),
+    enabled: !!siteId,
+    retry: false,
+  });
+
+  const plugin = useRef(Autoplay({ delay: 2000, stopOnInteraction: true }));
+
+  // MAIN 타입 배너만 필터링
+  const mainBanners =
+    bannerList?.filter((banner) => banner.bnrTypeCd === "BNRMAIN") ?? [];
+
+  // 에러 상태 판별 헬퍼 함수
+  const getErrorStatus = (e: unknown): number | undefined => {
+    if (!e || typeof e !== "object") return undefined;
+    const maybe = e as { status?: number; response?: { status?: number } };
+    return maybe.status ?? maybe.response?.status;
+  };
+
+  // 401 에러 처리
+  if (bannerError) {
+    const is401Error =
+      (bannerError instanceof Error && bannerError.message.includes("401")) ||
+      getErrorStatus(bannerError) === 401;
+
+    if (is401Error) {
+      console.error("[BannerList] 401 인증 오류:", bannerError);
+      return (
+        <div className="card card-border">
+          <div className="relative flex h-[280px] w-full items-center justify-center bg-accent">
+            <div className="text-sm text-red-500">
+              인증이 필요합니다. 로그인해주세요.
+            </div>
+          </div>
+        </div>
+      );
+    }
+
+    console.error("[BannerList] 배너 조회 오류:", bannerError);
+    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">
+            배너를 불러올 수 없습니다
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // 로딩 중
+  if (isLoadingBanners) {
+    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">배너 로딩 중...</div>
+        </div>
+      </div>
+    );
+  }
+
+  // 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" }}>
+      <Carousel
+        plugins={[plugin.current]}
+        opts={{ loop: true }}
+        className="relative"
+      >
+        <CarouselContent className="-ml-0">
+          {mainBanners.length > 0 ? (
+            mainBanners.map((banner) => (
+              <CarouselItem
+                key={`banner-${banner.bnrSn}`}
+                className="basis-full pl-0"
+              >
+                <BannerImage
+                  atflCd={banner.atflCd}
+                  lnkgUrlAddr={banner.lnkgUrlAddr}
+                />
+              </CarouselItem>
+            ))
+          ) : (
+            <CarouselItem className="basis-full pl-0">
+              <div className="relative flex h-[210px] w-full items-center justify-center bg-accent">
+                <div className="text-sm text-muted-foreground">
+                  배너가 없습니다
+                </div>
+              </div>
+            </CarouselItem>
+          )}
+        </CarouselContent>
+        <CarouselPrevious className="absolute left-2 top-1/2 z-10 !bg-[rgba(255,255,255,0.8)] text-accent-foreground" />
+        <CarouselNext className="absolute right-2 top-1/2 z-10 !bg-[rgba(255,255,255,0.8)] text-accent-foreground" />
+      </Carousel>
+    </div>
+  );
+};
+
+export default BannerList;

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

@@ -1,6 +1,7 @@
 "use client";
 import { useEffect, useState } from "react";
 import { useRouter } from "next/navigation";
+import Image from "next/image";
 import { tokenManager } from "@/entities/auth/lib/token-manager";
 import { client } from "@/shared/api";
 import { ENDPOINT } from "@/shared/config";
@@ -17,7 +18,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";
@@ -26,6 +26,10 @@ 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 MyPostList from "./mypost-list";
+import ScheduleList from "./schedule-list";
 
 // Chart.js 등록
 ChartJS.register(
@@ -50,8 +54,7 @@ interface UserInfo {
 function DashboardPage() {
   const [userInfo, setUserInfo] = useState<UserInfo | null>(null);
   const [error, setError] = useState("");
-  const router = useRouter();
-
+  const router = useRouter();  
   useEffect(() => {
     const fetchUserInfo = async () => {
       console.log("fetchUserInfo called");
@@ -110,12 +113,12 @@ function DashboardPage() {
   };
 
   return (
-    <div className="p-6">
+    <div className="p-2 sm:p-4 md:p-6">
       <div className="flex flex-col gap-1">
         {/* 첫번째 라인 */}
-        <div className="grid grid-cols-8 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-2 h-250 !p-0">
+          <div className="col-span-1 md:col-span-1 lg:col-span-1 xl:col-span-2 h-250 !p-0">
             {/* 전국 하수처리시설 개소수 및 가동률 */}
             <FoFcltCntRt />
 
@@ -127,7 +130,7 @@ function DashboardPage() {
           </div>
 
           {/* 두번쨰 열 */}
-          <div className="col-span-2 h-250 !p-0">
+          <div className="col-span-1 md:col-span-1 lg:col-span-1 xl:col-span-2 h-250 !p-0">
             {/* 수계별 유입ㆍ방류수질 분석 */}
             <FoWqltInflEffl />
 
@@ -139,72 +142,66 @@ function DashboardPage() {
           </div>
 
           {/* 지도영역 */}
-          <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>
-              </div>
-              <div id="mapArea" style={{height: "calc(100% - 40px)"}}>  
-                <KoreaBasinMap />
-              </div>
-            </div>
+          <div className="col-span-1 md:col-span-2 lg:col-span-1 xl:col-span-3">
+            <KoreaBasinMap />
           </div>
 
           {/* 사용자 정보 카드 */}
-          <div className="card card-border col-span-1 h-80 p-10">
-            <h2 className="mb-6 text-2xl">사용자 정보</h2>
+          <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="mb-4">
-                <div>
-                  <b>아이디:</b> {userInfo.userId}
+            <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>
-                  <b>이메일:</b> {userInfo.email || userInfo.userId}
-                </div>
-                <div>
-                  <b>이름:</b> {userInfo.userName || "-"}
-                </div>
-                <div>
-                  <b>2FA 활성화:</b>{" "}
-                  {userInfo.twoFactorEnabled ? "예" : "아니오"}
+                <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>
             ) : (
               !error && <div>사용자 정보를 불러오는 중...</div>
             )}
-            <button className="btn mb-2 w-full" onClick={handleLogout}>
-              로그아웃
-            </button>
-            <button className="btn w-full" onClick={handleChangePassword}>
-              패스워드 변경
-            </button>
-          </div>
+            
+            <ScheduleList />
+            
+            <MyPostList />
+          </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 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">
-            <div className="card-header text-foreground">
-              <h3 className="text-2xl font-medium">자료관 자료현황</h3>
-            </div>
-            <div className="h-70 p-4">
-            </div>
+          <div className="card card-border" style={{ height: "250px" }}>
+            <DataStatusList />
           </div>
-          <div className="card card-border">
+          <div className="card card-border" style={{ height: "250px" }}>
             <NoticeList />
           </div>
 
           {/* 배너 영역 */}
-          <div className="card card-border">
+          <div className="card card-border" style={{ height: "250px" }}>
             <BannerList />
           </div>
         </div>

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/datastatus-list.tsx

@@ -0,0 +1,174 @@
+"use client";
+
+import { useRef } from "react";
+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 {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+  Autoplay,
+} from "@common/components";
+
+// 지역 타입에 따른 아이콘과 클래스 결정
+const getRegionInfo = (regionName: string) => {
+  if (regionName.includes("서울특별시")) {
+    return { icon: "🏛️", className: "special-city" };
+  }
+  if (
+    regionName.includes("광역시") ||
+    regionName.includes("부산") ||
+    regionName.includes("대구") ||
+    regionName.includes("인천") ||
+    regionName.includes("광주") ||
+    regionName.includes("대전") ||
+    regionName.includes("울산")
+  ) {
+    return { icon: "🏭", className: "metropolitan-city" };
+  }
+  return { icon: "🌊", className: "province" };
+};
+
+const DataStatusList: React.FC = () => {
+  const plugin = useRef(
+    Autoplay({ delay: 3000, stopOnInteraction: true })
+  );
+
+  const {
+    data: dataStatusResponse,
+    error: dataStatusError,
+    isLoading: isLoadingDataStatus,
+  } = useQuery<PageableList<DataStatus>>({
+    queryKey: [ENDPOINT.DC_SERVICE.DATA_STATUS],
+    queryFn: () => getDataStatusList(),
+    enabled: true,
+    retry: false,
+    staleTime: 5 * 60 * 1000, // 5분간 fresh 상태 유지
+    refetchOnWindowFocus: false, // 윈도우 포커스 시 리페칭 방지
+    refetchOnMount: false, // 마운트 시 리페칭 방지 (캐시된 데이터 사용)
+  });
+
+  const dataStatusList = dataStatusResponse?.content || [];
+
+  // 에러 상태 판별 헬퍼 함수
+  const getErrorStatus = (e: unknown): number | undefined => {
+    if (!e || typeof e !== "object") return undefined;
+    const maybe = e as { status?: number; response?: { status?: number } };
+    return maybe.status ?? maybe.response?.status;
+  };
+
+  // 401 에러 처리
+  if (dataStatusError) {
+    const is401Error =
+      (dataStatusError instanceof Error && dataStatusError.message.includes("401")) ||
+      getErrorStatus(dataStatusError) === 401;
+
+    if (is401Error) {
+      console.error("[DataStatusList] 401 인증 오류:", dataStatusError);
+      return (
+        <div className="card card-border">
+          <div className="relative flex h-[280px] w-full items-center justify-center bg-accent">
+            <div className="text-sm text-red-500">
+              인증이 필요합니다. 로그인해주세요.
+            </div>
+          </div>
+        </div>
+      );
+    }
+
+    console.error("[DataStatusList] 데이터 조회 오류:", dataStatusError);
+    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">
+            데이터를 불러올 수 없습니다
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // 로딩 중
+  if (isLoadingDataStatus) {
+    return (
+      <div className="card card-border">
+        <div className="relative flex h-[200px] w-full items-center justify-center bg-accent" >
+          <div className="text-sm text-muted-foreground">데이터 로딩 중...</div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <div className="card_title bottomline">
+        <div className="leftArea">
+          <h4>자료현황</h4>
+        </div>
+      </div>
+      <div className="card card_paddingnone">
+        <div className="mid_info_area" style={{ width: "100%", padding: "5px" }}>
+          <Carousel
+            plugins={[plugin.current]}
+            opts={{ loop: true }}
+            className="relative mi_list_swiper"
+          >
+            <CarouselContent className="-ml-4 mi_list">
+              {dataStatusList.length > 0 ? (
+                dataStatusList.map((dataStatus) => {
+                  const regionInfo = getRegionInfo(dataStatus.ctpvnm);
+                  return (
+                    <CarouselItem
+                      key={`dataStatus-${dataStatus.ctpvnm}`}
+                      className={`basis-1/2 pl-4 ml_box ${regionInfo.className}`}
+                      style={{ width: "200px" }}
+                    >
+                      <div className="mb_section">
+                        <div className="tit">
+                          <i className="cloud-arrow-down-fill color_3">
+                            {regionInfo.icon}
+                          </i>
+                          <span className="tt">{dataStatus.ctpvnm}</span>
+                        </div>
+                        <div className="info_row">
+                          <div className="info_item">
+                            <div className="info_label">기본계획</div>
+                            <div className="info_value">
+                              {dataStatus.ctpvgnsvycnt}
+                            </div>
+                          </div>
+                          <div className="info_item">
+                            <div className="info_label">파일수</div>
+                            <div className="info_value">{dataStatus.filecnt}</div>
+                          </div>
+                        </div>
+                      </div>
+                    </CarouselItem>
+                  );
+                })
+              ) : (
+                <CarouselItem className="basis-full pl-0" style={{ height: "210px" }}>
+                  <div className="relative flex h-[280px] w-full items-center justify-center bg-accent">
+                    <div className="text-sm text-muted-foreground">
+                      데이터가 없습니다
+                    </div>
+                  </div>
+                </CarouselItem>
+              )}
+            </CarouselContent>
+            <CarouselPrevious className="absolute left-2 top-1/2 z-10 !bg-[rgba(255,255,255,0.8)] text-accent-foreground" />
+            <CarouselNext className="absolute right-2 top-1/2 z-10 !bg-[rgba(255,255,255,0.8)] text-accent-foreground" />
+
+          </Carousel>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default DataStatusList;

apps/cm/src/pages/dashboard/ui/fo-fclt-cnt-rt.tsx

@@ -7,14 +7,18 @@ import { useStore } from "zustand";
 import BasinSelect from "./basIn-select";
 import { Doughnut } from "react-chartjs-2";
 import type { Chart as ChartJS } from "chart.js";
-// import type { OperFcltContent } from "../model/fo-interface";
-import { OperationApi, operFcltStore } from "../api/fo-service";
+// import type { mapOperFcltItem, mapBasinData } from "../model/fo-interface";
+import { OperationApi, operFcltStore, basinStore } from "../api/fo-service";
 
 const FoFcltCntRt: React.FC = () => {
   const [year, setYear] = useState<string | null>(null);
-  const [selectedBasin, setSelectedBasin] = useState<string>("한강");
+  const { selectedBasin, setSelectedBasin } = useStore(basinStore);
   const operFcltStatus = useStore(operFcltStore, (state) => state.operFcltStatus);
 
+  const onBasinChange = (value: string) => {
+    setSelectedBasin(value);
+  };
+  
   useEffect(() => {
     const fetchData = async () => {
       try {
@@ -47,7 +51,7 @@ const FoFcltCntRt: React.FC = () => {
       operatingRate,
       chartData: [operatingCapacity, nonOperatingCapacity],
     };
-    console.log(result);
+    // console.log(result);
     return result;
   }, [operFcltStatus, selectedBasin]);
 
@@ -55,9 +59,9 @@ const FoFcltCntRt: React.FC = () => {
     <div className="card card-border" style={{ height: "250px" }}>
       <div className="card-header text-foreground">
         <h3 className="text-2xl font-medium">수계별 시설운영 개소수 및 가동률</h3>
-        <BasinSelect selectedBasin={selectedBasin} onValueChange={setSelectedBasin} />
+        <BasinSelect selectedBasin={selectedBasin} onValueChange={onBasinChange} />
       </div>
-      <div className="h-60 p-4">
+      <div className="h-70 p-4">
         <div className="flex gap-2 h-full">
           {/* 왼쪽: 개소수 카드 */}
           <div className="flex-1">
@@ -65,7 +69,7 @@ const FoFcltCntRt: React.FC = () => {
               <div className="card-header text-foreground text-center">
                 <h3 className="text-l font-medium mx-auto">개소수 ({year}년도)</h3>
               </div>
-              <div className="flex items-center justify-center flex-1">
+              <div className="flex items-center justify-center flex-1"  style={{ height: "200px" }}>
                 <div style={{ fontSize: "38px", textAlign: "center", fontWeight: "600", lineHeight: "1.2", color: "#0ec58a" }}>
                   {displayData.facilityCount.toLocaleString()} <span style={{ fontSize: "14px", color: "#000000" }}>개소</span>
                 </div>

apps/cm/src/pages/dashboard/ui/fo-wqlt-Infl-effl.tsx

@@ -3,6 +3,7 @@
  * 수계별 유입ㆍ방류수질 분석
  */
 import React, { useEffect, useState, useMemo } from 'react';
+import { useStore } from "zustand";
 import { Line } from 'react-chartjs-2';
 import BasinSelect from "./basIn-select";
 import {
@@ -11,7 +12,7 @@ import {
   Title,  Tooltip,  Legend,  type ChartOptions,
 } from 'chart.js';
 import type { OperWqltContent } from "../model/fo-interface";
-import { OperationApi } from "../api/fo-service";
+import { OperationApi, basinStore } from "../api/fo-service";
 import { defaultInitOperWqltState } from "../api/fo-service";
 
 // Chart.js 등록
@@ -20,11 +21,15 @@ ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, T
 type WaterQualityType = 'BOD' | 'TOC' | 'SS' | 'TP' | 'TN';
 
 const FoWqltInflEffl: React.FC = () => {
-  const [selectedBasin, setSelectedBasin] = useState<string>("한강");
+  const { selectedBasin, setSelectedBasin } = useStore(basinStore);
   const [selectedTab, setSelectedTab] = useState<WaterQualityType>('BOD');  
   const [wqltData, setWqltData] = useState<OperWqltContent[]>([]);
   const tabs: WaterQualityType[] = ['BOD', 'TOC', 'SS', 'TP', 'TN'];
 
+  const onBasinChange = (value: string) => {
+    setSelectedBasin(value);
+  };
+
   useEffect(() => {
     setWqltData(defaultInitOperWqltState.operWqltStatus);
     const fetchData = async () => {
@@ -32,7 +37,7 @@ const FoWqltInflEffl: React.FC = () => {
         const standardYear = await OperationApi.getStandardYear();
         const data = await OperationApi.getDashOperWqlt(standardYear);
         setWqltData(data);
-        console.log(wqltData);
+        // console.log(wqltData);
       } catch (e) {
         console.error("시설 유입ㆍ방류수질 데이터 조회 실패", e);
       }
@@ -61,7 +66,7 @@ const FoWqltInflEffl: React.FC = () => {
     return { labels, inflowData, effluentData, inflowAvg, effluentAvg };
   }, [wqltData, selectedBasin, selectedTab]);
 
-  console.log(chartData);
+  // console.log(chartData);
 
   // 차트 공통 옵션
   // const getChartOptions = (yAxisLabel: string): ChartOptions<'line'> => ({
@@ -192,10 +197,10 @@ const FoWqltInflEffl: React.FC = () => {
     <div className="card card-border" style={{ height: "250px" }}>
       <div className="card-header text-foreground">
         <h3 className="text-2xl font-medium">수계별 유입ㆍ방류수질 분석</h3>
-        <BasinSelect  selectedBasin={selectedBasin} onValueChange={setSelectedBasin}  />
+        <BasinSelect  selectedBasin={selectedBasin} onValueChange={onBasinChange}  />
       </div>
-      <div className="h-60">
-        <div style={{ padding: '4px', height: '100%', display: 'flex', flexDirection: 'column' }}>
+      <div className="h-70 p-0 flex items-center justify-center">
+        <div style={{ width: "100%", maxWidth: 400, height: 180 }}>
           {/* 탭 메뉴 */}
           <div style={{ display: 'flex', gap: '20px', borderBottom: '1px solid #000000', flexShrink: 0 }}>
             {tabs.map((tab) => (

apps/cm/src/pages/dashboard/ui/mypost-list.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useQuery } from "@tanstack/react-query";
+import { getCoreRowModel } from "@tanstack/react-table";
+import { PostApi, type MyPost, type NoticePost } from "@/entities/post";
+import { ENDPOINT } from "@/shared/config";
+import { useDataTable } from "@/shared/lib";
+import {
+  myPostTableColumns,
+} from "../model/table-columns";
+import { Button } from "@common/components";
+
+
+const MyPostList: React.FC = () => {
+    const router = useRouter();
+    const myPostQuery = useQuery({
+        queryKey: [ENDPOINT.BOARD_SERVICE.MY_POSTS],
+        queryFn: () =>
+        PostApi.getMyPostList({
+            page: 0,
+            size: 5,
+        }),
+    });
+
+    const handleMyPostRowClick = (row: MyPost) => {
+      router.push(`/cms/${row.bbsTypeCd.toLowerCase()}/${row.bbsId}/${row.pstNo}`);
+  };
+
+   const { tableComponent: myPostTableComponent } = useDataTable({
+        query: myPostQuery,
+        tableOptions: {
+          columns: myPostTableColumns,
+          getCoreRowModel: getCoreRowModel(),
+        },
+        dataTableOptions: {
+          variant: "line",
+          onRowClick: handleMyPostRowClick
+        },
+       
+    });
+
+  return (
+    <div className="card card-border !p-0"  style={{ height: "300px" }}>
+      <div className="card-header !m-0 !border-none text-foreground">
+        <h3 className="text-2xl font-medium">내 게시글</h3>
+      </div>
+      {myPostTableComponent}
+    </div>
+  );
+};
+
+export default MyPostList;

apps/cm/src/pages/dashboard/ui/notice-list.tsx

@@ -9,6 +9,7 @@ import { useDataTable } from "@/shared/lib";
 import {
   noticePostTableColumns,
 } from "../model/table-columns";
+import { Button } from "@common/components";
 
 
 const NoticeList: React.FC = () => {
@@ -18,32 +19,41 @@ const NoticeList: React.FC = () => {
         queryFn: () =>
         PostApi.getNoticePostList({
             page: 0,
-            size: 5,
+            size: 3,
             keywordType: "bbsTypeCd",
             keyword: "BBSNOTICE",
         }),
     });
 
     const handleNoticePostRowClick = (row: NoticePost) => {
-        router.push(`/bbs/bbsnotice/${row.bbsId}/${row.pstNo}`);
+        router.push(`/cms/${row.bbsTypeCd.toLowerCase()}/${row.bbsId}/${row.pstNo}`);
+    };
+
+    const handleMoreClick = () => {
+        try {
+            router.push('/cms/bbsnotice/7');
+        } catch (error) {
+            console.error("공지사항 더보기 이동 실패", error);
+        } 
     };
 
     const { tableComponent: noticePostTableComponent } = useDataTable({
         query: noticePostQuery,
         tableOptions: {
-        columns: noticePostTableColumns,
-        getCoreRowModel: getCoreRowModel(),
+          columns: noticePostTableColumns,
+          getCoreRowModel: getCoreRowModel(),
         },
         dataTableOptions: {
-        variant: "line",
-        onRowClick: handleNoticePostRowClick,
+          variant: "line",
+          onRowClick: handleNoticePostRowClick,
         },
     });
 
   return (
-    <div className="card card-border !p-0">
+    <div className="card card-border !p-0"  style={{ height: "220px" }}>
       <div className="card-header !m-0 !border-none text-foreground">
         <h3 className="text-2xl font-medium">공지사항</h3>
+        <Button className="h-[3.2rem]" onClick={handleMoreClick}>더보기</Button>
       </div>
       {noticePostTableComponent}
     </div>

apps/cm/src/pages/dashboard/ui/reuse-chart.tsx

@@ -155,7 +155,7 @@ const ReuseChart: React.FC = () => {
   const startSlider = () => {
     intervalRef.current = setInterval(() => {
       setActiveIndex(prevIndex => (prevIndex + 1) % chartItems.length);
-    }, 20000);
+    }, 7000);
   };
 
   const stopSlider = () => {
@@ -175,35 +175,64 @@ const ReuseChart: React.FC = () => {
     startSlider();
   };
 
+  const handleMoreClick = () => {
+    window.open(process.env.NEXT_PUBLIC_WR, "_blank", "noopener,noreferrer");
+  };
+
+  const viewportRef = useRef<HTMLDivElement>(null);
+
   return (
     <div className="card card-border" style={{ height: "250px" }}>
       <div className="card-header text-foreground">
         <h3 className="text-2xl font-medium">{chartItems[activeIndex]?.title}</h3>
-        <Button  className="h-[3.2rem]">더보기</Button>
+        <Button  className="h-[3.2rem]" onClick={handleMoreClick}>더보기</Button>
       </div>
-      <div className="h-60 p-4 relative overflow-hidden">
-        <div
-          className="flex transition-transform duration-500 ease-in-out h-full"
-          style={{ transform: `translateX(-${activeIndex * 100}%)` }}
-        >
-          {chartItems.map((chart, index) => (
-            <div key={index} className="w-full flex-shrink-0 h-full">
-              <Line data={chart.data} options={chart.options as ChartOptions<'line'>} />
+      <div className="relative" style={{ maxWidth: 400, height: 180, marginLeft: 20 }}>
+        <div className="h-full">
+
+          {/* ✅ 좌표 기준 (절대 이동 X) */}
+          <div
+            ref={viewportRef}
+            className="w-full overflow-hidden"
+            style={{ height: 170}}
+          >
+            {/* ✅ 이동 대상 */}
+            <div
+              className="flex h-full transition-transform duration-500 ease-in-out"
+              style={{
+                width: `${chartItems.length * 100}%`,
+                transform: `translateX(-${
+                  activeIndex * (viewportRef.current?.offsetWidth ?? 0)
+                }px)`
+              }}
+            >
+              {chartItems.map((chart, index) => (
+                <div
+                  key={index}
+                  className="h-full flex-shrink-0"
+                  style={{ width: `${100 / chartItems.length}%` }}
+                >
+                  <Line
+                    data={chart.data}
+                    options={chart.options as ChartOptions<'line'>}
+                  />
+                </div>
+              ))}
             </div>
-          ))}
-        </div>
-        
-        <div className="absolute bottom-4 left-1/2 -translate-x-1/2 flex space-x-2">
-          {chartItems.map((_, index) => (
-            <button
-              key={index}
-              onClick={() => handleIndicatorClick(index)}
-              className={`w-3 h-3 rounded-full cursor-pointer transition-colors ${
-                activeIndex === index ? 'bg-blue-500' : 'bg-gray-300'
-              }`}
-              aria-label={`Go to slide ${index + 1}`}
-            />
-          ))}
+          </div>
+          <div className="absolute left-1/2 -translate-x-1/2 flex space-x-2" style={{ bottom: '-1px'}}>
+            {chartItems.map((_, index) => (
+              <button
+                key={index}
+                onClick={() => handleIndicatorClick(index)}
+                className={`w-3 h-3 rounded-full cursor-pointer transition-colors ${
+                  activeIndex === index ? 'bg-blue-500' : 'bg-gray-300'
+                }`}
+                aria-label={`Go to slide ${index + 1}`}
+              />
+            ))}
+          </div>
+          
         </div>
       </div>
     </div>

apps/cm/src/pages/dashboard/ui/reuse-status.tsx

@@ -26,17 +26,21 @@ const ReuseStatus: React.FC = () => {
     return new Intl.NumberFormat('ko-KR').format(num);
   };
 
+  const handleMoreClick = () => {
+    window.open(process.env.NEXT_PUBLIC_WR, "_blank", "noopener,noreferrer");
+  };
+
   return (
     <div className="card card-border" style={{ height: "250px" }}>
       <div className="card-header text-foreground">
         <h3 className="text-2xl font-medium">물재이용 현황 (재이용량, m³)</h3>
-        <Button  className="h-[3.2rem]">더보기</Button>
+        <Button  className="h-[3.2rem]" onClick={handleMoreClick}>더보기</Button>
       </div>
       <div className="h-70 p-4">
         <div className="w-full h-full flex items-center justify-center">
           <table className="w-full border-collapse text-md">
             <thead>
-              <tr>
+              <tr  style={{ height: "35px" }}>
                 <th className="bg-blue-500 text-white font-bold py-1 px-3 border border-gray-300">
                   년도
                 </th>
@@ -53,7 +57,7 @@ const ReuseStatus: React.FC = () => {
             </thead>
             <tbody>
               {reuseStatusData && reuseStatusData.length > 0 && reuseStatusData?.map((row, index) => (
-                <tr key={index} className="hover:bg-gray-50">
+                <tr key={index} className="hover:bg-gray-50" style={{ height: "35px" }}>
                   <td className="bg-blue-100 font-semibold text-center py-1 px-3 border border-gray-300">
                     {row.yr}
                   </td>

apps/cm/src/pages/dashboard/ui/schedule-list.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useQuery } from "@tanstack/react-query";
+import { getCoreRowModel } from "@tanstack/react-table";
+import { ENDPOINT } from "@/shared/config";
+import { useDataTable } from "@/shared/lib";
+import {
+  scheduleTableColumns, 
+} from "../model/table-columns";
+import { getScheduleList } from "../api/schedule-service";
+
+// 날짜를 YYYY-MM-DD 형식으로 포맷팅
+const formatDate = (date: Date): string => {
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  const day = String(date.getDate()).padStart(2, "0");
+  return `${year}-${month}-${day}`;
+};
+
+// 오늘부터 한 달 후까지의 날짜 계산
+const getDateRange = () => {
+  const today = new Date();
+  const oneMonthLater = new Date();
+  oneMonthLater.setMonth(today.getMonth() + 1);
+  
+  return {
+    startDate: formatDate(today),
+    endDate: formatDate(oneMonthLater),
+  };
+};
+
+const ScheduleList: React.FC = () => {
+    const router = useRouter();
+    const { startDate, endDate } = getDateRange();
+    
+    const scheduleQuery = useQuery({
+        queryKey: [ENDPOINT.BOARD_SERVICE.POSTS, startDate, endDate],
+        queryFn: () =>
+        getScheduleList({
+            siteId: "",
+            schdlTtl: "",
+            schdlSeCd: "",
+            schdlBgngYmd: startDate,
+            schdlEndYmd: endDate,
+            reptYn: "",
+            commSchdlYn: "Y",
+        }),
+    });
+
+    
+    const { tableComponent: scheduleTableComponent } = useDataTable({
+        query: scheduleQuery,
+        tableOptions: {
+        columns: scheduleTableColumns,
+        getCoreRowModel: getCoreRowModel(),
+        },
+        dataTableOptions: {
+        variant: "line",
+        },
+    });
+
+  return (
+    <div className="card card-border !p-0"  style={{ height: "300px" }}>
+      {scheduleTableComponent}
+    </div>
+  );
+};
+
+export default ScheduleList;

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

@@ -15,76 +15,75 @@ 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, OldPplChartData } from "../model/sn-interface";
+import { SewerageApi, useOldPplStore,useMapOldPplStore, transformChartDataToMapData } from "../api/sn-service";
+
 
-interface ChartDataSet {
-  label: string;
-  data: (number | undefined)[];
-  backgroundColor: string;
-  borderRadius?: number;
-}
 // ChartJS 컴포넌트 등록
 ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend);
 
 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 [oldPplLenData, setOldPplLenData] = useState<PplLengthContent[]>([]);
+  const {chartData, setChartData}  = useOldPplStore();
+  const {setMapData}  = useMapOldPplStore();
 
   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 },
-      "30년이상": { from: "19010101", to: `${currentYear - 30}1231`, setter: setOldPpl30Data },
-    };
-
-    Object.entries(ranges).forEach(([label, range]) => {
-      SewerageApi.getPplLength(range.from, range.to)
-        .then(range.setter)
-        .catch((e) => console.error(`${label} 데이터 조회 실패`, e));
-    });
+    // 유역별, 노후년도별 관로길이 데이터를 한번에 조회
+    SewerageApi.getMvOldPplLength()
+      .then((apiResult) => {
+        setOldPplLenData(apiResult);
+      })
+      .catch((e) => console.error("노후관로 데이터 조회 실패", e));
   }, []);
 
   useEffect(() => {
-    const allData = [...oldPpl2025Data, ...oldPpl2530Data, ...oldPpl30Data];
-    if (allData.length === 0) return;
+    if (oldPplLenData.length === 0) return;
 
-    const allZones = Array.from(new Set(allData.map(d => d.zoneNm)));
+    // 유역 목록 추출 (중복 제거)
+    const allZones = [...new Set(oldPplLenData.map(d => d.zoneNm))];
 
-    const createDataset = (label: string, data: PplLengthContent[], color: string) => {
-      const dataMap = new Map(data.map(item => [item.zoneNm, item.sumPrlgVl]));
-      // console.log(dataMap);
-      return {
-        label,
-        data: allZones.map(zone => dataMap.get(zone) ?? 0),
-        backgroundColor: color,
-        borderRadius: 4,
-      };
+    // yearGroup 매핑: API 응답값 -> 차트 label
+    const yearGroupMap: { [key: string]: { label: string; color: string } } = {
+      "20년~25년미만": { label: "20-25년", color: "#3B82F6" },
+      "25년~30년미만": { label: "25-30년", color: "#EF4444" },
+      "30년이상": { label: "30년이상", color: "#F87171" },
     };
 
-    const newDatasets: ChartDataSet[] = [];
-    if (oldPpl2025Data.length > 0) {
-      newDatasets.push(createDataset('20-25년', oldPpl2025Data, '#3B82F6'));
-    }
-    if (oldPpl2530Data.length > 0) {
-      newDatasets.push(createDataset('25-30년', oldPpl2530Data, '#EF4444'));
-    }
-    if (oldPpl30Data.length > 0) {
-      newDatasets.push(createDataset('30년이상', oldPpl30Data, '#F87171'));
-    }
-
-    setChartData({
-      labels: allZones,
-      datasets: newDatasets,
+    // 유역별, 노후년도별 데이터 구조화
+    const dataByZone: { [zone: string]: { [yearGroup: string]: number } } = {};
+    allZones.forEach(zone => {
+      dataByZone[zone] = {};
     });
 
-  }, [oldPpl2025Data, oldPpl2530Data, oldPpl30Data]);
+    oldPplLenData.forEach(item => {
+      let zoneData = dataByZone[item.zoneNm];
+      if (!zoneData) {
+        zoneData = {};
+        dataByZone[item.zoneNm] = zoneData;
+      }
+      if (item.yearGroup) {
+        zoneData[item.yearGroup] = item.sumPrlgVl;
+      }
+    });
+
+    // 데이터셋 생성
+    const newDatasets: ChartDataSet[] = Object.entries(yearGroupMap).map(([yearGroup, { label, color }]) => ({
+      label,
+      data: allZones.map(zone => dataByZone[zone]?.[yearGroup] ?? 0),
+      backgroundColor: color,
+      borderRadius: 4,
+    }));
+
+    const newChartData: OldPplChartData = {
+      labels: allZones,
+      datasets: newDatasets,
+    };
+
+    setChartData(newChartData);
+
+    // 차트 데이터를 기반으로 지도 팝업 데이터 생성 및 상태 업데이트
+    setMapData(transformChartDataToMapData(newChartData));
+  }, [oldPplLenData]);
 
   // 각 지역별 총 길이 계산
   const totalLengths = chartData.labels.map((label, i) => {
@@ -93,7 +92,8 @@ export default function SnOldPpl() {
       return sum + (typeof value === 'number' ? value : 0);
     }, 0);
   });
-
+  
+  
   // 차트 옵션 설정
   const options: ChartOptions<"bar"> = {
     responsive: true,
@@ -164,14 +164,18 @@ export default function SnOldPpl() {
     }
   };
 
+  const handleMoreClick = () => {
+    window.open(process.env.NEXT_PUBLIC_SN, "_blank", "noopener,noreferrer");
+  };
+
   return (
     <div className="card card-border" style={{ height: "250px" }}>
       <div className="card-header text-foreground">
         <h3 className="text-2xl font-medium">노후 하수관로 현황</h3>
-        <Button  className="h-[3.2rem]">더보기</Button>
+        <Button  className="h-[3.2rem]" onClick={handleMoreClick}>더보기</Button>
       </div>
       <div className="h-70 p-0 flex items-center justify-center">
-        <div style={{ width: "100%", maxWidth: 400, height: 131 }}>
+        <div style={{ width: "100%", maxWidth: 400, height: 180 }}>
           <Bar options={options} data={chartData} />
         </div>
       </div>

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

@@ -16,7 +16,7 @@ import {
 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 { SewerageApi,useUsePplStore } from "../api/sn-service";
 
 interface ChartDataSet {
   label: string;
@@ -25,80 +25,60 @@ interface ChartDataSet {
   borderColor?: string;
 }
 
+// const usgCd = { "SBA004": "오수관로", "SBA003": "우수관로", "ETC": "기타" }; // 용도
 ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend);
 
 export default function SnPplStatus() {
-  const [sewageData, setSewageData] = useState<PplLengthContent[]>([]);
-  const [stormwaterData, setStormwaterData] = useState<PplLengthContent[]>([]);
-  const [totalData, setTotalData] = useState<PplLengthContent[]>([]);
-  const [chartData, setChartData] = useState<{
-    labels: string[];
-    datasets: ChartDataSet[];
-  }>({ labels: [], datasets: [] });
+  const {chartData, setChartData}  = useUsePplStore();
+  const [usgPplLenData, setUsgPplLenData]  = useState<PplLengthContent[]>([]);
+  
 
   useEffect(() => {
-    const ymdFrom = "19010101";
-    const ymdTo = "20241231";
-
-    SewerageApi.getPplUseLength(ymdFrom, ymdTo, "SBA004")
+    // 유역별, 용도별 관로길이 데이터를 한번에 조회
+    SewerageApi.getMvUsgPplLength()
       .then((apiResult) => {
-        // getPplUseLength의 결과(apiResult)를 
-        // setSewageData 함수의 인자로 넣어서 호출합니다.
-        // console.log(apiResult);
-        setSewageData(apiResult);
+        setUsgPplLenData(apiResult);
       })
-      .catch((e) => console.error("오수관 데이터 조회 실패", e));
-
-    SewerageApi.getPplUseLength(ymdFrom, ymdTo, "SBA003")
-      .then(setStormwaterData)
-      .catch((e) => console.error("우수관 데이터 조회 실패", e));
-
-    SewerageApi.getPplLength(ymdFrom, ymdTo)
-      .then((apiResult) => {
-        // getPplLength 결과(apiResult)를 
-        // setTotalData 함수의 인자로 넣어서 호출합니다.
-        // console.log(apiResult);
-        setTotalData(apiResult);
-      })
-      .catch((e) => console.error("전체 관로 데이터 조회 실패", e));
+      .catch((e) => console.error("용도별 관로 데이터 조회 실패", e));
   }, []);
   
   // 데이터가 변경될 때마다 차트를 다시 계산
   useEffect(() => {
-    // 오수관 또는 우수관 데이터가 없으면 차트를 그리지 않음
-    if (sewageData.length === 0 && stormwaterData.length === 0) return;
+    if (usgPplLenData.length === 0) return;
 
-    const allZones = new Set([
-      ...sewageData.map(d => d.zoneNm),
-      ...stormwaterData.map(d => d.zoneNm),
-      ...totalData.map(d => d.zoneNm)
-    ]);
-    const labels = Array.from(allZones);
+    // 유역 목록 추출 (중복 제거)
+    const allZones = [...new Set(usgPplLenData.map(d => d.zoneNm))];
+    const labels = allZones;
 
-    const dataByZone: { [key: string]: { total: number; sewage: number; stormwater: number } } = {};
-    labels.forEach(zone => {dataByZone[zone] = { total: 0, sewage: 0, stormwater: 0 }; });
-
-    totalData.forEach(item => {
-      if (!dataByZone[item.zoneNm]) {
-        dataByZone[item.zoneNm] = { total: 0, sewage: 0, stormwater: 0 };
-      }
-      dataByZone[item.zoneNm]!.total = item.sumPrlgVl;
+    // 유역별, 용도별 데이터 구조화
+    const dataByZone: { [key: string]: { sewage: number; stormwater: number; etc: number } } = {};
+    labels.forEach(zone => {
+      dataByZone[zone] = { sewage: 0, stormwater: 0, etc: 0 };
     });
-    sewageData.forEach(item => {
+
+    // usgCd별로 데이터 분류: SBA004(오수관로), SBA003(우수관로), ETC(기타)
+    usgPplLenData.forEach(item => {
       if (!dataByZone[item.zoneNm]) {
-        dataByZone[item.zoneNm] = { total: 0, sewage: 0, stormwater: 0 };
+        dataByZone[item.zoneNm] = { sewage: 0, stormwater: 0, etc: 0 };
       }
-      dataByZone[item.zoneNm]!.sewage = item.sumPrlgVl;
-    });
-    stormwaterData.forEach(item => {
-      if (!dataByZone[item.zoneNm]) {
-        dataByZone[item.zoneNm] = { total: 0, sewage: 0, stormwater: 0 };
+      if (item.usgCd === "SBA004") {
+        dataByZone[item.zoneNm]!.sewage = item.sumPrlgVl;
+      } else if (item.usgCd === "SBA003") {
+        dataByZone[item.zoneNm]!.stormwater = item.sumPrlgVl;
+      } else if (item.usgCd === "ETC") {
+        dataByZone[item.zoneNm]!.etc = item.sumPrlgVl;
       }
-      dataByZone[item.zoneNm]!.stormwater = item.sumPrlgVl;
     });
 
     const datasets: ChartDataSet[] = [];
 
+    // 기타 데이터셋 (맨 아래에 쌓기 위해 먼저 추가)
+    datasets.push({
+      label: "기타",
+      data: labels.map(zone => dataByZone[zone]?.etc),
+      backgroundColor: "rgba(255, 178, 150, 0.9)",
+    });
+
     // 오수관로 데이터셋
     datasets.push({
       label: "오수관로",
@@ -113,21 +93,9 @@ export default function SnPplStatus() {
       backgroundColor: "rgba(170, 210, 245, 0.95)",
     });
 
-    // 전체 데이터가 도착했다면 '기타' 데이터셋을 계산하고 추가
-    if (totalData.length > 0) {
-      datasets.unshift({ // '기타'를 맨 아래에 쌓기 위해 unshift 사용
-        label: "기타",
-        data: labels.map(zone => {
-          const zoneData = dataByZone[zone] ?? { total: 0, sewage: 0, stormwater: 0 };
-          return zoneData.total - zoneData.sewage - zoneData.stormwater;
-        }),
-        backgroundColor: "rgba(255, 178, 150, 0.9)",
-      });
-    }
-
     setChartData({ labels, datasets });
 
-  }, [sewageData, stormwaterData, totalData]);
+  }, [usgPplLenData]);
 
   // 총합(라벨당) 계산
   const totals = chartData.labels.map((_, i) =>
@@ -184,17 +152,18 @@ export default function SnPplStatus() {
     },
   };
 
-  //const data = { labels, datasets };
-
+  const handleMoreClick = () => {
+    window.open(process.env.NEXT_PUBLIC_SN, "_blank", "noopener,noreferrer");
+  };
   return (
     <div className="card card-border" style={{ height: "250px" }}>
       <div className="card-header text-foreground">
         <h3 className="text-2xl font-medium">오수관로 및 우수관로 현황</h3>
         
-        <Button className="h-[3.2rem]">더보기</Button>
+        <Button className="h-[3.2rem]" onClick={handleMoreClick}>더보기</Button>
       </div>
       <div className="h-60 p-4">
-        <div style={{ width: "100%", maxWidth: 400, height: 150 }}>
+        <div style={{ width: "100%", maxWidth: 400, height: 180 }}>
           <Bar options={options} data={chartData} />
         </div>
       </div>

apps/cm/src/pages/dashboard/ui/support-list.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import { useQuery } from "@tanstack/react-query";
+import { getCoreRowModel } from "@tanstack/react-table";
+import { ENDPOINT } from "@/shared/config";
+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";
+
+const SupportList: React.FC = () => {
+  const supportQuery = useQuery<PageableList<Support>>({
+    queryKey: [ENDPOINT.IC_SERVICE.GROUPING_STATISTICS],
+    queryFn: async () => {
+      return await getSupportList();
+    },
+  });
+
+  const { tableComponent: supportTableComponent } = useDataTable({
+    query: supportQuery,
+    tableOptions: {
+      columns: supportTableColumns,
+      getCoreRowModel: getCoreRowModel(),
+    },
+    dataTableOptions: {
+      variant: "line",
+    },
+  });
+
+  return (
+    <div className="card card-border !p-0" style={{ height: "220px" }}>
+      <div className="card-header !m-0 !border-none text-foreground">
+        <h3 className="text-2xl font-medium">지원현황</h3>
+      </div>
+      {supportTableComponent}
+    </div>
+  );
+};
+
+export default SupportList;

apps/cm/src/shared/config/api.ts

@@ -44,7 +44,7 @@ export const ENDPOINT = {
     ORGANIZATIONS: "/cms-service/api/v1/ognzs",
     USER_ORGANIZATION: "/cms-service/api/v1/user-ognz",
     IMAGES: "/cms-service/api/v1/images",
-    BANNERS: "/cms-service/api/v1/bnrs",
+    BANNERS: "/cms-service/api/v1/bnrs/user",
     TEMPLATE: "/cms-service/api/v1/tmplt",
     TERMS: "/cms-service/api/v1/trms",
     LWPO_CODE: "/cms-service/api/v1/lwpo-cds",
@@ -61,31 +61,38 @@ export const ENDPOINT = {
     APILOG: "/cms-service/api/v1/api-logs",
     SITE_AUTHORITY: "/cms-service/api/v1/site-authrt",
     CONNECTION_LOG: "/cms-service/api/v1/cntnlog",
+    SCEHDULES: "/cms-service/api/v1/schdls",
   },
   BOARD_SERVICE: {
     BBS: "/board-service/api/v1/bbs",
     BBS_TEMPLATES: "/board-service/api/v1/bbsTmplt",
     POSTS: "/board-service/api/v1/posts",
+    MY_POSTS: "/board-service/api/v1/posts/me",    
     POSTS_COMMENTS: "/board-service/api/v1/posts-cmnts",
     POST_EVALUATION: "/board-service/api/v1/pstEvl",
+    SITE_AUTHORITY_LIST: "/cms-service/api/v1/site-authrt/user",
+    CONNECTION_LOG_LIST: "/cms-service/api/v1/cntnlog/user",
   },
   SEWERAGE_SERVICE: {
     PPL_LENGTH: "/sewerage-service/api/v1/ms/pplLength",
     PPL_USE_LENGTH: "/sewerage-service/api/v1/ms/pplUseLength",
     PPL_COUNTS: "/sewerage-service/api/v1/ms/pplCounts",
     OLD_PPL_COUNTS: "/sewerage-service/api/v1/ms/oldPplCounts",
-  },    
+    MV_USG_PPL_LENGTH: "/sewerage-service/api/v1/ms/mvUsgPplLength",
+    MV_OLD_PPL_LENGTH: "/sewerage-service/api/v1/ms/mvOldPplLength",
+  },
   OPERATION_SERVICE: {
     MAIN_YEAR: "/operation-service/api/v1/dashBoard/main/year",
     OPER_CNTRT: "/operation-service/api/v1/dashBoard/main/oper/cntrt",
     OPER_WQLT: "/operation-service/api/v1/dashBoard/main/oper/wqlt",
     REUSE_STATUS: "/operation-service/api/v1/dashBoard/main/reuse/status",
+    REUSE_MAP: "/operation-service/api/v1/dashBoard/main/reuse/map",
   },
   IC_SERVICE: {
-    GROUPING_STATISTICS: "/ic-service/api/v1/nti/grouping-statistics",
+    GROUPING_STATISTICS: "/ic-service/api/v1/support-status-summary",
   },
   DC_SERVICE: {
-    DATA_STATUS: "/dc-service/api/v1/dc/dataStatus",
+    DATA_STATUS: "/dc-service/api/v1/dataStatus",
   },
 
 };

apps/cm/src/shared/ui/page-layout.tsx

@@ -1,18 +1,5 @@
-import { PageTitle } from "@common/components";
-import { useMenuStore } from "../lib/use-menu-store";
-
 function PageLayout({ children }: { children: React.ReactNode }) {
-  const currentMenuInfo = useMenuStore((state) => state.currentMenuInfo);
-
-  const menuPaths = currentMenuInfo?.menuPath
-    ?.split(">")
-    .map((path) => path.trim());
-
-  return (
-    <div className="h-auto min-h-full bg-container pb-2">
-      {children}
-    </div>
-  );
+  return <div className="h-auto min-h-full bg-container pb-2">{children}</div>;
 }
 
 export { PageLayout };

apps/cs/app/api/proxy/[...url]/route.ts

@@ -60,13 +60,18 @@ async function handler(
         [AUTH_USER_ID]: userId,
       });
 
+      const forwardedHost = request.headers.get("x-forwarded-host");
+      const host = request.headers.get("host");
+      const actualHost = forwardedHost || host || new URL(request.url).hostname.toString();
       
+      // 운영 환경에서 domain 설정
+      const domain = actualHost.includes("hasuon.or.kr") ? ".hasuon.or.kr" : actualHost;
 
       if (refreshToken) {
         cookieStore.set(REFRESH_TOKEN, refreshToken, {
           httpOnly: true,
-          sameSite: "lax",
-//          domain: domain,
+          sameSite: "strict",
+          domain: domain,
           path: "/",
         });
       }

apps/cs/docs/표준단어정의서.md

@@ -0,0 +1,831 @@
+# 표준단어정의서
+
+AI 이해용으로 정리된 표준단어명, 영문약어명, 영문명 목록입니다.
+
+| 표준단어명 | 표준단어 영문약어명 | 표준단어 영문명 |
+|-----------|-------------------|----------------|
+| BOD | BOD | Biochemical Oxygen Demand |
+| C/N비 | CNR | Carbon-Nitrogen Ratio |
+| COD | COD | Chemical Oxygen Demand |
+| F/M비 | FMR | Food-Microorganism Ratio |
+| GISD | GISDATA | Geographic Information System Data |
+| HTML | HTML | Hypertext Markup Language |
+| ID | ID | Id |
+| IP | IP | Internet Protocol |
+| KEY | KEY | Key |
+| ND | ND | Not Detected |
+| NON | NON | Non |
+| NTU | NTU | Nephelometry Turbidity Unit |
+| OPT | OPT | Opt |
+| PAC | PAC | Polyaluminium Chloride |
+| PH | PH | Hydrogen Exponent |
+| PKI | PKI | Public Key Infrastructure |
+| POOL | POOL | Pool |
+| SS | SS | Suspended Solids (Ss) |
+| TCE | TCE | Trichloroethane |
+| TM | TM | Transverse Mercator |
+| T-N | TN | Total Nitrogen |
+| TOC | TOC | Total Organic Carbon |
+| T-P | TP | Total Phosphorus |
+| URL | URL | Uniform Resource Locator |
+| 가구 | HSHD | Household |
+| 가능 | PSBL | Possible |
+| 가동 | OPR | Operation |
+| 가산 | ADTN | Addition |
+| 가성소다 | NAOH | Caustic Soda(Nach) |
+| 가축분뇨 | ANMA | Animal Manure |
+| 값 | VAL | Value |
+| 강도 | IN | Intensity |
+| 강우 | RAIN | Rain |
+| 개방 | OPN | Opening |
+| 개별 | INDIV | Individual |
+| 개보수비 | RPAFEE | Repair Fee |
+| 개설 | ESTBL | Establishment |
+| 개시 | STRT | Start |
+| 개정 | RVSN | Revision |
+| 개조 | REMDEL | Remodeling |
+| 개체 | INDVD | Individual |
+| 개체군 | POPU | Population |
+| 개폐 | RORGN | Reorganization |
+| 갱신 | UPDT | Update |
+| 건물 | BLDG | Building |
+| 건설 | CONC | Construction |
+| 건수 | NOCS | The Number Of Cases |
+| 건조 | DRY | Dry |
+| 검사 | INSP | Inspection |
+| 검사서 | EXRPT | Examination Report |
+| 검정 | RCGN | Recognition |
+| 검증 | VRFC | Verification |
+| 검출 | DETECT | Detection |
+| 검토 | RVW | Review |
+| 격자 | LATTC | Lattice |
+| 결과 | RSLT | Result |
+| 결의 | DCIS | Decision |
+| 결정 | DCSN | Decision |
+| 경계 | BNDRY | Boundary |
+| 경과 | PROC | Process |
+| 경도 | LOT | Longitude |
+| 경보 | ALARM | Alarm |
+| 경사판 | ICNTPT | Inclination plate |
+| 계 | SUM | Summation |
+| 계량기 | MRNR | Measuring Instrument |
+| 계량기분리 | METRSPRT | Meter Separation |
+| 계면 | SGLV | Sludge Level |
+| 계산식 | FMUL | Formula |
+| 계약 | CTRT | Contract |
+| 계약기간 | CNTRPD | Contract Period |
+| 계절 | SEASON | Season |
+| 계획 | PLAN | Plan |
+| 고도처리 | AWTR | Advanced Water Treatment |
+| 고시 | ANCMNT | Announcement |
+| 고액분리 | SLSPRT | Solid-Liquid Separation |
+| 고형물체류시간 | SRT | Solid Retention Time |
+| 공간데이터 | SPCEDATA | Space Data |
+| 공공 | PUBLIC | Public |
+| 공급 | SPLY | Supply |
+| 공기 | AIR | Air |
+| 공기여과 | ARFT | Air Filter |
+| 공문 | ODOC | Official Documnet |
+| 공법 | MSRC | Method Of Construction |
+| 공사 | CSTRN | Construction |
+| 공사비 | CONSTEXPN | Construction Expenses |
+| 공업지역 | MNFTR_ARA | Manufacturing Area |
+| 공용면적 | CMAR | Common Area |
+| 공통 | CMMN | Commonness |
+| 관 | PP | Pipe |
+| 관계 | REL | Relation |
+| 관련 | RLTN | Relation |
+| 관로 | PPLINE | Pipe Line |
+| 관리 | MNG | Management |
+| 관리기관 | MGC | Management Agency |
+| 관리자 | MNGR | Manager |
+| 관찰 | WTCH | Watch |
+| 관측 | OBSR | Observation |
+| 관측소 | OBSRVT | Observatory |
+| 교반기 | AGITOR | Agirator |
+| 교정 | CRRC | Correction |
+| 구간 | SCTN | Section |
+| 구동 | DRIVE | Drive |
+| 구분 | SE | Section |
+| 구성 | CMPSG | Composing |
+| 구역 | ZONE | Zone |
+| 구조 | STRCT | Structure |
+| 권역 | DSTR | District |
+| 권한 | AUTH | Authority |
+| 규격 | STNDRD | Standard |
+| 규모 | SCAL | Scale |
+| 규제 | REGL | Regulation |
+| 균등 | EQLTY | Equality |
+| 금액 | AMT | Amount |
+| 급수 | WSP | Water Supply |
+| 기간 | WHL | While |
+| 기관 | INST | Institution |
+| 기록 | RECD | Recording |
+| 기록부 | REGI | Register |
+| 기밀 | SCRET | Secret |
+| 기법 | TECQU | Techniques |
+| 기본 | BSIC | Basics |
+| 기본정보 | BASINF | Bassinfo |
+| 기본키 | PK | Primary Key |
+| 기상 | WETHER | Weather |
+| 기안 | DRFTG | Drafting |
+| 기재 | WRIT | Write |
+| 기점 | CDPNT | Cardinal Point |
+| 기존 | LGCY | Legacy |
+| 기준 | CRTR | Criteria |
+| 기타 | ETC | Etc |
+| 기한 | TERM | Term |
+| 기후 | CLMT | Climate |
+| 긴급 | EMRG | Emergency |
+| 날개벽 | WW | Wing Wall |
+| 날씨 | WETHR | Weather |
+| 날짜 | DATE | DATE |
+| 남조류 | BLAL | Blue-Green Algae |
+| 납 | PB | Plumbum |
+| 내려받기 | DWLD | Download |
+| 내부반송 | ITNRCC | Internal Recycl |
+| 내용 | CN | Content |
+| 내용연수 | SVLF | Service Life |
+| 냄새 | SMELL | Smell |
+| 년 | YY | Year |
+| 년간 | FAYR | For A Year |
+| 노즐 | NZL | Nozzle |
+| 노출 | EXPSR | Exposure |
+| 농도 | DNSTY | Density |
+| 농축 | TKN | Thickened |
+| 누적 | ACML | Accumulate |
+| 누출 | LKG | Leakage |
+| 눈 | SNW | Snow |
+| 단가 | UNPRC | Unit Price |
+| 단기 | SRTPD | Short Period |
+| 단순 | SIMPL | Simplicity |
+| 단위 | UNIT | Unit |
+| 대구역 | LZONE | Large Zone |
+| 대분류 | LCLAS | Large Classification |
+| 대장 | REGSTR | Register |
+| 대장균 | COLI | Coliform, Fecal Coliform |
+| 대장균군 | COLIB | Coliform Bacteria |
+| 대지면적 | SIAR | Site Area |
+| 대체 | RPLC | Replace |
+| 덮개 | COVR | Cover |
+| 데이타 | DAT | Data |
+| 도구 | UNT | Unit |
+| 도래 | ADVNT | Advent |
+| 도로 | ROAD | Road |
+| 도로명 | RN | Road Name |
+| 도시 | CTY | City |
+| 도엽 | MAPDMC | Map Demarcation |
+| 도표 | CHART | Chart |
+| 독성 | TOXCTY | Toxicity |
+| 동의 | AGRE | Agreement |
+| 동절기 | WSESN | The Winter Season |
+| 등급 | GRD | Grade |
+| 등기 | RG | Registered |
+| 등록 | REG | Registration |
+| 디바이스 | DVICE | Device |
+| 디코딩 | DCD | Decoding |
+| 레이어 | LYR | Layer |
+| 로그인 | LGN | Login |
+| 로우 | ROW | Row |
+| 마감 | DDLN | Deadline |
+| 마이크로필터 | MCRFT | Micro Filter |
+| 막 | MBRN | Membrane |
+| 만족도 | STFDG | Satisfaction Degree |
+| 맑음 | CLAR | Clear |
+| 매각 | SAL | Sale |
+| 맨홀 | MH | Manhole |
+| 맵 | MAP | Map |
+| 메인 | MAIN | Main |
+| 메일 | EMAIL | Email |
+| 메탄올 | MTN | Methanol(CH3OH) |
+| 명 | NM | Name |
+| 모니터링 | MTRG | Monitoring |
+| 모델 | MODL | Model |
+| 모델링 | MODLNG | Modeling |
+| 모래 | SAND | Sand |
+| 목 | MOK | Mok |
+| 무산소 | ANX | Anoxic |
+| 무산소조 | ANX_TANK | Anoxic Tank  |
+| 무인센서 | MNLSENSR | Manless Sensor |
+| 문서 | DCMT | Document |
+| 물 | WTR | Water |
+| 미급수 | NONWTRSPL | Non Water Supply |
+| 미생물 | BLGC | Biological |
+| 미세먼지 | PM | Particulate Matter |
+| 미세목 | MCRB | Micro Bar |
+| 민간위탁 | ETSVN | Entrustment To Civilian |
+| 민감 | SST | Sensitive |
+| 민원 | CVLCPT | Civil Complaint |
+| 바이러스 | VIRS | Virus |
+| 반기 | HT | Half Term |
+| 반류수 | SIDSWT | Side Stream Water |
+| 반송 | SNDBK | Send Back |
+| 반송수 | RCCWT | Recycled  Water |
+| 반송슬러지 | RTNSLG | Return Sludge |
+| 반영 | RFLT | Reflection |
+| 반응조 | RETNK | Reactant  Tank |
+| 반출 | EXPRT | Export |
+| 반토 | ALUM | Alumina |
+| 반환 | GVBK | Giving Back |
+| 받이 | INL | Inlet |
+| 발생 | OCRN | Occurrence |
+| 발전 | PWGNRT | Power Generation |
+| 발주기관 | ORNT | Order Institution |
+| 방류 | DCWTR | Discharge Water Stock Etc |
+| 방류구 | DSCHG | Discharge |
+| 방류수 | EFLEC | Effluence |
+| 방문 | VST | Visit |
+| 방문자 | VSTR | Visitor |
+| 방법 | MTHD | Method |
+| 방사 | RLSE | Release |
+| 배관 | PLINE | Pipeline |
+| 배분 | DSTRB | Distirbution |
+| 배설물 | EXCRTN | Excretion |
+| 배수 | DRNG | Drainage |
+| 배수구역 | DRANGZN | Drainage Zone |
+| 배출 | EXHST | Exhaust |
+| 배출가스 | EMGA | Emission Gases |
+| 배출구 | VENT | Vent |
+| 배출시설 | DHGP | Discharge Equipment |
+| 배출시험 | EXHTST | Exhaust Test |
+| 배출자 | DCHGR | Discharge Person |
+| 밸브 | VALVE | Valve |
+| 번호 | NO | Number |
+| 법 | LAW | Law |
+| 법적 | LGL | Legal |
+| 법정 | STTY | Statutory |
+| 법정동 | STDG | Statutory Dong(Administrative District) |
+| 법정리 | STLI | Statutory Li(Administrative District) |
+| 변경 | CHG | Change |
+| 변동 | FLCTN | Fluctuation |
+| 변속기 | TRMIS | Transmission |
+| 보고 | RPT | Report |
+| 보고서 | RPOT | Report |
+| 보관 | STORG | Storage |
+| 보수 | MEND | Mend |
+| 보유 | HOLD | Hold |
+| 보정 | RVSION | Revision |
+| 보조 | ASSISC | Assistance |
+| 보조금 | SBSIDY | Subsidy |
+| 복개 | COVE | Cover |
+| 복토 | CWTH | Covering With Soil |
+| 본류 | MI_RV | Main River |
+| 본번 | MNO | Main Number |
+| 부검 | ATPSY | Autopsy |
+| 부과 | LEVY | Levy |
+| 부과금 | LVYAMT | Levy  Amount |
+| 부기 | BUKIP | Bookkeeping |
+| 부담금 | ALOTM | Allotment |
+| 부번 | SNO | Sub Number |
+| 부산물 | BYPRD | By-Product |
+| 부서 | DEPT | Department |
+| 부숙화 | DECPZ | Decomposed  ~Ize |
+| 부적합 | IMPPRTY | Impropriety |
+| 부착 | ASN | Adhesion |
+| 부품 | CMPNT | Components |
+| 부하량 | LOADQTY | Load Quantity |
+| 분과 | DIVSN | Division |
+| 분뇨 | ENSO | Excreta, Night Soil |
+| 분류 | CL | Classification |
+| 분류군 | TAXON | Taxon |
+| 분리막 | SPRTMBR | Separation Membrane |
+| 분배 | DTRBT | Distribution |
+| 분배조 | DTRBT_TANK | Distribution Tank |
+| 분야 | RLM | Realm |
+| 분원성 | FECL | Fecal |
+| 분원성대장균군 | FCOLI | Fecal Coliform |
+| 분원성연쇄상구균 | FCSTRCCI | Fecal Streptococci |
+| 분할 | PRTIN | Partition |
+| 비밀번호 | PSWD | Password |
+| 비상 | EMGNY | Emergency |
+| 비정상 | ABNRM | Abnormality |
+| 사양 | SPECS | Specification |
+| 사업비 | WCT | Working Cost |
+| 사업장 | BPLC | Business Place |
+| 사여과지 | SAND_ FILTR | Sand Filter |
+| 사용 | USE | Use |
+| 사용가능 | USABLE | Usable |
+| 사용권 | RIOUS | Right Of Using |
+| 사용량 | USG | USAGE |
+| 사용자 | USER | User |
+| 사위 | FDG | Four Directions Girth |
+| 사유 | RESN | Reason |
+| 사이클 | CYCLE | Cycle |
+| 사이트 | SITE | Site |
+| 사진 | PHOT | Photograph |
+| 사항 | MATTR | Matter |
+| 사후 | AFTFAT | After Fact |
+| 삭제 | DEL | Deletion |
+| 산기관 | DFS | Diffuser |
+| 산업 | INDUST | Industrial |
+| 산화환원전위 | ORP | Oxidation Reduction Potential |
+| 살모넬라 | SLMN | Salmonella |
+| 삼원촉매장치 | TWCTLC | Three Way Catalytic Converter |
+| 상세 | DTL | Details |
+| 상세주소 | DADDR | Detailed Address |
+| 상수 | WT | Water |
+| 상업지역 | CMCL_ARA | Commercial Area |
+| 상태 | STUS | Status |
+| 상품 | GDS | Goods |
+| 상향류 | UFW | Upflow |
+| 상호 | CONM | Company Name |
+| 색도 | CRMTY | Chromaticity |
+| 생략 | OMS | Omission |
+| 생물 | LVB | Living Being |
+| 생물반응조 | BIRAT | Bioreactor  |
+| 생물서식처 | ORGNHBT | Organism Habitat |
+| 생물종 | BISP | Biological Species |
+| 생성 | CRT | Creation |
+| 생슬러지 | RSLG | Raw Sludge |
+| 생태 | ECLGY | Ecology |
+| 생태독성 |  ECTOX | ecotoxicity |
+| 서류 | PAPE | Papers |
+| 서명 | SIGN | Signing |
+| 서버 | SRVR | Server |
+| 서비스 | SRVC | Service |
+| 설계 | DESGN | Design |
+| 설계용량 | DESGN_CPCT | Design Capacity |
+| 설립 | FNDN | Foundation |
+| 설정 | STNG | Setting |
+| 설치 | INSTL | Installation |
+| 성격 | CHTR | Character |
+| 성공 | SCS | Success |
+| 성능 | PRFMNC | Performance |
+| 성능검사 | EFTST | Efficiency Test |
+| 성적서 | SCRRP | Score Report |
+| 세균 | BCLS | Bacillus |
+| 세목 | FB | Fine bar |
+| 세부 | DETAIL | Detail |
+| 세정 | WS | Washing |
+| 세정제 | CNML | Cleaning Material |
+| 소 | SML | Small |
+| 소독 | DSNF | Disinfection |
+| 소독제 | DSINF | Disinfectant |
+| 소분류 | SCLAS | Small Classification |
+| 소수점 | DCPT | Decimal Point |
+| 소요 | REQ | Required |
+| 소유 | OWN | Own |
+| 소유역 | SBASIN | Sub Basin |
+| 소재지 | PLAC | Place Of Location |
+| 소포 | ATFM | Antifoaming |
+| 소포수 | FBW | Foam Breaking Water |
+| 소포제 | ANAG | Antifoaming Agent |
+| 송부 | SENDNG | Sending |
+| 송신 | SNDM | Send Message |
+| 송풍기 | BLW | Blower |
+| 수 | CNT | Count |
+| 수거 | TKAWY | Take Away |
+| 수계 | WWBH | Watershed, Water Basin, Hydrosphere |
+| 수동 | HOPR | Hand Operation |
+| 수리학적 체류시간 | HRT | Hydraulic Retention Time |
+| 수문 | Gate | Gate |
+| 수산화나트륨 | SOHY | Sodium Hydroxide |
+| 수소이온 | HION | Hydrogen Ion |
+| 수신 | RCPTN | Reception |
+| 수용가 | RCPTR | Receptor |
+| 수위 | WAL | Water Level |
+| 수정 | MDFCN | Modification |
+| 수정자 | MDFR | Modifier |
+| 수제 | SPRDIKE | Superdike |
+| 수조 | Tank | Tank |
+| 수질 | QTWT | Quality Of Water |
+| 수질개선 | WTRQLIMP | Water Quality Improvement |
+| 수질기준 | WQST | Water Quality Standards |
+| 수질배출정보 | WTDI | Water Discharge Information |
+| 수집 | CLCT | Collection |
+| 순환 | CCL | Cycling |
+| 쉬겔라 | SHIGLA | Shigella |
+| 스컴 | SCM | Scum |
+| 스크린 | SCR | Screen |
+| 슬러지 | SLG | Sludge |
+| 슬러지 밀도지수 | SDI | sludge density index |
+| 슬러지 용량 지표 | SVI | Sludge Volume Index |
+| 습지 | WTLN | Wetland |
+| 승인 | APRV | Approval |
+| 승인권 | APPRVRGT | Right Of Approval |
+| 시각 | TIME | Time |
+| 시간 | HR | Hour |
+| 시군구 | SGG | Si/Gun/Gu |
+| 시나리오 | SCEN | Scenario |
+| 시도 | CTPV | Cities And Provinces |
+| 시료 | SMPL | Sample |
+| 시설 | FCLT | Facility |
+| 시설면적 | FCAR | Facility Area |
+| 시설물 | FCLTS | Facilities |
+| 시스템 | SYS | System |
+| 시안 | CYN | Cyaan |
+| 시운전 | TSTRN | Test Run |
+| 시작 | BGNG | Beginning |
+| 시점 | PTM | Point Time |
+| 시행 | ENFC | Enforcement |
+| 시험 | TEST | Test |
+| 신고 | DCLR | Declaration |
+| 신고자 | DCL | Declarer |
+| 신규 | NEW | New |
+| 신기술 | NTCH | New Technology |
+| 신뢰 | CNFDNC | Confidence |
+| 신뢰성 | CRDIBLTY | Credibility |
+| 실시 | OPRT | Operation |
+| 실적 | ACRS | Actual Result |
+| 실행 | EXCN | Execution |
+| 심사 | SRNG | Screening |
+| 심의 | DLBR | Deliberation |
+| 아황산환원혐기성포자형성균 | SFSRA | Spore Forming Sulfite Reducing Anaerobes |
+| 안정화 | STBLZT | Stabilization |
+| 암롤박스(컨테이너) | ARTCT | Arm roll type container |
+| 암모니아성질소 | NHN | Ammonia Nitrogen |
+| 압력 | PRESSR | Pressure |
+| 압송 | PUMPNG | Pumping |
+| 압축 | CMPRS | Compress |
+| 액비 | LQFERTLZ | Liquid Fertilizer |
+| 액상 | LIQD | Liquid |
+| 약 | GENTLE | Gentle |
+| 약품 | CMC | Chemical |
+| 약품비 | MEDFEE | Medicine Fee |
+| 약품사용 | USMD | Use  Medicines |
+| 업로드 | UPLD | Upload |
+| 업무 | DTY | Duty |
+| 없음 | NOT | Nothing |
+| 에너지 | ENR | Energy |
+| 에틸벤젠 | ETBNZN | Ethylbenzene |
+| 여과 | FILTR | Filteration |
+| 여과수 | FTWT | Filtered Water |
+| 여과재 | FTMTRL | Filter Material |
+| 여과형 | FILTRFOM | Filter Form |
+| 여부 | YN | Yes or No |
+| 여시니아균 | YERSNA | Yersinia |
+| 역률 | PWRER_FCT | Power Factor |
+| 역세척 | BWS | Back Wash |
+| 연결 | CONN | Connection |
+| 연계 | LINK | Link |
+| 연도 | YR | Year |
+| 연락 | CNTC | Contact |
+| 연령 | AGE | Age |
+| 연료화 | FUELZ | Fuelize |
+| 연월 | YM | Year and Month |
+| 염소 | CLRN | Chlorine |
+| 염소소독 | CHDI | Chlorine Disinfection |
+| 염소이온 | CLION | Chlorine Ion |
+| 염화제이철 | IRCLD | Iron(III) Chloride |
+| 예보 | FRCST | Forecast |
+| 예비 | PRPT | Preparation |
+| 예산 | BGT | Budget |
+| 예상 | EXPCT | Expectation |
+| 예약 | RSVT | Reservation |
+| 예외 | EXCPT | Exception |
+| 예정 | PRNG | Prearrangement |
+| 예찰 | PRDICT | Prediction |
+| 오류 | ERR | Error |
+| 오수받이 | HUS_INL | House Inlet |
+| 오염물질 | CNTMN | Contaminant |
+| 오염원 | POLUSRC | Pollution Source |
+| 오존 | OZN | Ozone |
+| 오프로드 | OFFRD | Off Road |
+| 옥살산 | OXACID | Oxalic Acid |
+| 와류 | VORTEX | Vortex |
+| 와류형 | VORTXFOM | Vortex From |
+| 완결 | COMPLT | Completion |
+| 완료 | CMPTN | Completion |
+| 완전 | PRFECT | Perfection |
+| 요건 | REQSIT | Requisite |
+| 요막액 | ALLNTFLD | Allantoic Fluid |
+| 요청 | DMND | Demand |
+| 용량 | CPCT | Capacity |
+| 용역 | SERVC | Service |
+| 용존산소 | DO | Dissolved Oxygen |
+| 용해 | DSLV | Dissolving |
+| 우량 | EXLT | Excellent |
+| 우수 | ST | Storm  |
+| 우수받이 | STRT_INL | Street Inlet |
+| 우수토구 | STM_OVFL_MUT | Storm Overflow Mouth |
+| 우회 | BP | BY PASS |
+| 운반 | CNVY | Conveyance |
+| 운영 | OPER | Operation |
+| 운영비 | OPEXP | Operation Expense |
+| 운행 | OPRAT | Operation |
+| 원격 | RMRT | Rmrt |
+| 원격감시체계 | TMS | Tele Monitoring System |
+| 원료 | MTRAL | Material |
+| 원수 | ORGWT | Origin'S Water |
+| 원인자 | ORGPR | The Origin Person |
+| 월 | MM | Month |
+| 위도 | LAT | Latitude |
+| 위반 | CNTR | Contravene |
+| 위촉 | ENTRST | Entrusting |
+| 위치 | LOC | Location |
+| 위탁 | CNSG | Consign |
+| 위탁자 | CONSGNR | Consignor |
+| 유기인 | ORGP | Organic Phosphorus |
+| 유량 | FLUX | Flux |
+| 유량조정조 | EQLZT__TANK | Equalization Tank |
+| 유입 | INFlOW | Inflow |
+| 유입수 | INFWTR | Influent Water |
+| 유주 | SWARMG | Swarming |
+| 유지 | MNTNC | Maintenance |
+| 유지용수공급 | MWRS | Maintenance Water Requirement Supply |
+| 유체 | FLUID | Fluid |
+| 유출 | EFFLUX | Efflux |
+| 유충 | LAVL | Larval |
+| 유형 | TY | Type |
+| 유효 | VLD | Validity |
+| 음용 | DKPS | For Drinking Purpose |
+| 읍면동 | EMD | Eup/Myun/Dong |
+| 응답 | RSPNS | Response |
+| 응집제 | COAG | Cohesive Agents |
+| 이관 | TRNSF | Transfer |
+| 이동 | MVMN | Movement |
+| 이력 | HST | History |
+| 이메일 | EML | Email |
+| 이상 | ABOVE | Above |
+| 이송 | TRSF | Transfer |
+| 이의 | OBJC | Objection |
+| 이차 | SCDR | Secondary |
+| 이차침전지 | SCDR_SDMT_TANK | Secondary Sedimaentation |
+| 이행 | MIG | Migratation |
+| 인건비 | PEXP | Personnel Expenses{Expenditure] |
+| 인계 | HNDVR | Handover |
+| 인계서 | HDOVDC | Handover Document |
+| 인구 | POPL | Population |
+| 인산 | PHACID | Phosphoric Acid |
+| 인산염인 | POP | phosphate |
+| 인양기 | LFT | Lifter |
+| 인원수 | NOPE | The Number of Persons |
+| 인증 | CERT | Certification |
+| 인처리 | PPRCS | Phosphorus  Process |
+| 인허가 | APVL | Approval |
+| 일 | DY | Day |
+| 일련번호 | SN | Serial Number |
+| 일반 | GNRL | General |
+| 일별 | DALY | Daily |
+| 일시 | DT | Date and Time |
+| 일자 | YMD | YEAR Month Day |
+| 일지 | DIARY | Diary |
+| 일차 | PRM | Primary |
+| 일차침전지 | PST_SDMT_TANK | Primary Sedimentation Tank |
+| 일평균 | DYRG | Day Average |
+| 임시 | TMPR | Temporary |
+| 임의 | RNDM | Random |
+| 입고 | WRHS | Warehousing |
+| 입력 | INPT | Input |
+| 잉여 | SPS | Surplus |
+| 잉여슬러지 | EC_SLG | Excess Sludge |
+| 자 | MAN | Man |
+| 자갈 | GRAVEL | Gravel |
+| 자료 | DATA | Data |
+| 자리 | DIGIT | Digit |
+| 자립화 | SLFRLI | Self Reliance |
+| 자연형 | NATRLFOM | Natural Form |
+| 자외선 | URLI | Ultraviolet Rays, Light |
+| 자재 | MTRIL | Material |
+| 자체 | ITSL | Itself |
+| 작성 | WRT | Writing |
+| 작업 | JOB | Job |
+| 잠금 | LOCK | Lock |
+| 장기 | LNGTR | Long Term |
+| 장소 | PLCE | Place |
+| 장착 | MNTNG | Mounting |
+| 재 | RE | Re |
+| 재이용 | REUSE | Reuse |
+| 재이용수 |   | Reuse Water |
+| 재활용 | RUSE | Reuse |
+| 저감 | REDUC | Reduction |
+| 저류조 | DTT_TANK | Detention Tank |
+| 저온 | LOWTMP | Low Temperature |
+| 저장 | STRG | Storage |
+| 저장소 | STORGE | Storage |
+| 적발 | DSCL | Disclose |
+| 적산 | ADD | Addition |
+| 적용 | APLCN | Application |
+| 적합 | STBLT | Suitability |
+| 전기 | ELCTY | Electricity |
+| 전기료 | ELFEE | Electricity Fee |
+| 전력 | PWRER | Power |
+| 전문 | SPCY | Specially |
+| 전산 | CMPUTT | Computation |
+| 전송 | TRSM | Transmission |
+| 전압 | VLTGE | Voltage |
+| 전용 | EXUSE | Exclusive Use |
+| 전원 | SELCT | Source Of Electricity |
+| 전처리 | PRETR | Pretreatment |
+| 점검 | CHCK | Check |
+| 접속 | CNTN | Connection |
+| 정밀 | PRCIS | Precision |
+| 정보 | INFO | Information |
+| 정산 | CLCLN | Calculation |
+| 정상 | NRMLT | Normality |
+| 정수장 | WPPW | Water Purification Plant, Waterworks |
+| 정제 | REFINE | Refining |
+| 정지 | STP | Stop |
+| 제거 | RMV | Removal |
+| 제수변 | SL_VALVE | Sluice Valve |
+| 제작 | MNFCT | Manufacture |
+| 제조사 | MKR | Maker |
+| 제출 | SBMSN | Submission |
+| 제한 | LIMT | Limitation |
+| 조류 | ALG | Algae |
+| 조목 | CSB | Coarse Bar |
+| 조사 | EXMN | Examination |
+| 조성 | MAKE | Make |
+| 조정 | EQLT | Equalization |
+| 조치 | ACTN | Action |
+| 조회 | INQ | Inquiry |
+| 존재 | EXST | Existence |
+| 종결 | TRMN | Termination |
+| 종균제 | MICBA | Microbial Agent |
+| 종료 | END | End |
+| 종류 | KND | Kind |
+| 종목 | IEM | Item |
+| 종별 | ASORT | Assortment |
+| 종사자 | ENFSN | Enfilade Person |
+| 종점 | TMNL | Terminal |
+| 좌표 | COOR | Coordinate |
+| 주간 | WIK | Week |
+| 주변 | CFR | Circumference |
+| 주소 | ADDR | Address |
+| 주입 | IJTN | Injection |
+| 주파수 | FQNC | Frequency |
+| 준공 | CMCN | Completion Of Construction |
+| 중권역 | MDSTRC | Medium District |
+| 중복 | DPCN | Duplication |
+| 중분류 | MLSFC | Middle Classification |
+| 중온 | MESPH | Mesophilic |
+| 중첩 | RETRTN | Reiteration |
+| 중화설비 | NUTEQP | Neutralization Equipment |
+| 중화제 | CNTAG | Counteragent |
+| 증가 | INCRS | Increase |
+| 지도점검표사본 | CITBMR | Copy of Instruction Checklist  |
+| 지방자치단체 | LGOV | Local Governments |
+| 지번 | LOTNO | Lot Number |
+| 지상 | GRND | Ground |
+| 지역 | ARA | Area |
+| 지질 | NTRFS | Nature Of Soil |
+| 지질도 | GEOMAP | Geological Map |
+| 지하 | UDGD | Underground |
+| 지하수 | GROU | Groundwater |
+| 지형 | TPGRPH | Topography |
+| 진공 | VCM | Vacuum |
+| 진단 | DGNSS | Diagnosis |
+| 진동 | VIBRAT | Vibration |
+| 진행 | PRGRE | Progress |
+| 질산 | NIACID | Nitric Acid. |
+| 질산성질소 | NO3N | Nitrate Nitrogen |
+| 집계 | TOT | Total |
+| 집계구 | SUMDST | Summation District |
+| 집행 | IMPL | Implementation |
+| 찌꺼기 | LEES | Lees |
+| 차아염소산 | NAOCL | Hypochlorous Acid |
+| 차집 | ITCT | Intercepting |
+| 착공 | BGNCST | Begin Construction |
+| 채수 | SAMWT | Sampling Of Water |
+| 채수기 | WTRSMPLR | Water Sampler |
+| 채수병 | WTRBOTL | Water Bottle |
+| 처리 | PRCS | Process |
+| 처리비 | PSSFEE | Process  Fee |
+| 처리수 | TRT_WT | Treated Water |
+| 처리수조 | TRT_WT_TANK | Treated Water Tank |
+| 처리시설 | TRTMTFCLT | Treatment Facility |
+| 처리자 | PRCR | Processor |
+| 처분 | DSPS | Disposition |
+| 철염 | FESLT | Ferric Salt |
+| 첨부 | ATCH | Attachment |
+| 첨부파일 | ATFI | Attachment File |
+| 초과 | EXCS | Excess |
+| 초기화 | INITL | Initialization |
+| 촉매 | CTLY | Catalyst |
+| 총계 | TSM | Summation |
+| 총대장균군 | TCOLFGRP | Total Coliform Group |
+| 총량 | TQT | Total Quantity |
+| 총면적 | GFA | Gross Floor Area |
+| 총사업비 | TPCO | Total Project Cost |
+| 총인구 | TPOPLTN | Total Population |
+| 총인처리시설 | TPFCT | Total Phosphorus facility |
+| 최근 | RCNT | Recent |
+| 최대값 | MAXV | Maximum Value |
+| 최소값 | MINV | Minimum Value |
+| 최적 | BMTB | Being The Most Suitable |
+| 최종 | LAST | Last |
+| 최초 | FRST | First |
+| 추출 | EXTR | Extraction |
+| 추출정보 | EXTRINFO | Extraction Information |
+| 축 | AXS | Axis |
+| 출력 | OTPT | Output |
+| 출발 | LVE | Leave |
+| 충전기 | CHRGR | Charger |
+| 취득 | ACQS | Acquisition |
+| 취소 | RTRCN | Retraction |
+| 측정 | MSUR | Measurement |
+| 측정기 | MSRR | Measurement Instrument |
+| 측정소 | MSRSTN | Measurement Station |
+| 침사지 | GTCB | Grit Chamber |
+| 침전 | SDMT | Sediment |
+| 침전지 | SDMT_TANK | sedimentation tank |
+| 컨베이어 | CVY | Conveyor |
+| 컬럼 | COL | Column |
+| 코드 | CD | Code |
+| 크기 | SZ | Size |
+| 크실렌 | XYLEN | Xylene |
+| 탄화 | CARB | Carbonization |
+| 탈거 | CRYOFF | Carry Off |
+| 탈리액 | SPNT | Supernatant |
+| 탈수 | DWTR | Dewatering |
+| 탈수기 | DEHYM | Dehydration  Machine |
+| 탈질 | DNTFCT | Denitrificatio |
+| 탈취 | DODRZ | Deodorization |
+| 탈취기 | DEODRZ | Deodorizer |
+| 탈취제 | DEODR | Deodorant |
+| 탈황제 | DSLFA | Desulfurizing  Agent |
+| 터널형 | YUNLTP | Tunnel Type |
+| 테이블 | TBL | Table |
+| 토구 | OTFL | Outfall |
+| 토지 | LAD | Land |
+| 토지면적 | LDAR | Land Area |
+| 통계 | STATS | Statistics |
+| 통보 | NTFCTN | Notification |
+| 통신 | COMM | Communication |
+| 통지 | AVTSMT | Avertissement |
+| 통합 | UNTY | Unity |
+| 특성 | CHRT | Character |
+| 특수 | SPECL | Special |
+| 특정유해물질 | SHCH | Specified Hazardous Chemicals |
+| 파일 | FILE | File |
+| 판정 | JGMT | Judgement |
+| 펌프 | PUMP | Pump |
+| 펌프장 | PUMP_STT | Pump Station |
+| 페놀 | PHNL | Phenol |
+| 평가 | EVL | Evaluation |
+| 폐기 | DSCD | Discard |
+| 폐기물 | WSTE | Waste |
+| 폐쇄 | CLSG | Closing |
+| 폐수 | WAWA | Waste Water |
+| 폐수처리 | WSWT | Wastewater Treatment |
+| 폐열 | WASTHET | Waste Heat |
+| 포기 | ARTN | Aeration |
+| 포트 | PORT | Port |
+| 폭기조 | ARTN_TANK | Aeration Tank |
+| 폴리머 | PLYMR | Polymer |
+| 폴리철 | FRRCSU | Ferric Sulfate |
+| 표고 | AL | Altitude |
+| 표기 | MARK | Mark |
+| 표시 | INDCT | Indication |
+| 표준 | STD | Standard |
+| 표출 | EPRSS | Expression |
+| 플래그 | FLAG | Flag |
+| 필드 | FILD | Field |
+| 필수 | ESNTL | Essential |
+| 필증 | CERFIN | Certificate Of Finishing |
+| 필터 | FLTER | Filter |
+| 하수 | SWGE | Sewage |
+| 하수도 | DRNGSYS | Drainage System |
+| 하수미처리 | SEWGUNTTM | Un Sewage Treatment |
+| 하수처리 | SEWGTRTM | Sewage Treatment |
+| 하수처리수 | STWTR | Sewage Treatment Water |
+| 하위 | LOWR | Lower |
+| 하향류 | DWFW | Downflow |
+| 할인 | DSCNT | Discount |
+| 함수율 | MISTR_CTNT | Moisture content |
+| 합계 | SMM | Summation |
+| 해당 | RLVT | Relevant |
+| 해석 | INTRPRTT | Interpretation |
+| 해양투기 | OCDU | Ocean Dumping |
+| 행망 | ADMNW | Administration Network |
+| 행정 | ADMN | Administration |
+| 행정구역 | ADMI | Administrative District |
+| 행정동 | DONG | Dong (Administrative District)  |
+| 허가 | PRMSN | Permission |
+| 허용 | PERM | Permission |
+| 현상 | PHNMN | Phenomenon |
+| 혐기 | AARB | Anaerobic |
+| 혐기조 | AARB_TANK | Anaerobic tank |
+| 협잡물 | CCMT | Concomitant |
+| 형태 | SHAP | Shape |
+| 호기 | ARB | Aerobic |
+| 호기조 | ARB_TANK | Aerobic Tank |
+| 호소수 | LMSHWT | Lake  And  Marsh   Water |
+| 호수 | LKE | Lake |
+| 호안 | RVTMNT | Revetment |
+| 호이스트 | HIST | Hoist |
+| 혼합 | CMPN | Compound |
+| 혼합액현탁고형물 | MLSS | Mixed liquor suspended solids |
+| 혼화지 | MXG_TNAK | Mixing tank |
+| 홈페이지 | HMPG | Homepage |
+| 홍수 | FLOOD | Flood |
+| 확인 | IDNTY | Identify |
+| 확인서 | CNFRMN | Confirmation |
+| 확인자 | IDFR | Identifier |
+| 확장자 | EXTN | Extension |
+| 확정 | CFMTN | Confirmation |
+| 환경 | ENVR | Environment |
+| 환경기초시설 | ENINF | Environmental Infrastructure |
+| 환원 | RSTORE | Restoration |
+| 활성탄 | AC | Activated Carbon |
+| 활성화 | PRMT | Promote/Facilitate |
+| 활용 | PRUS | Practical Use |
+| 황산 | ECCBT | Encyclopaedia Britannica (H2So4) |
+| 회사 | CO | Company |
+| 회수 | RTRVL | Retrieval |
+| 회신 | RPLY | Reply |
+| 효율 | EFC | Efficiency |
+| 효율성 | EFFCTV | Effectiveness |
+| 휴대 | MBL | Mobile |
+| 흡수정 | EXTTW | Extraction Well |
+| 흡착 | ADST | Adsorption |

apps/cs/next.config.ts

@@ -5,6 +5,20 @@ const subDomain =
 
 const nextConfig: NextConfig = {
   output: "standalone",
+  experimental: {
+    proxyTimeout: 600000,
+  },
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
+  typescript: {
+    ignoreBuildErrors: true,
+  },
+  logging: {
+    fetches: {
+      fullUrl: true,
+    },
+  },  
   async headers() {
     return [
       {

apps/cs/src/pages/admin/ui/add-admin-dialog.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import {
   keepPreviousData,
   useQuery,
@@ -75,7 +75,7 @@ function AddAdminDialog() {
   });
 
   const query = useQuery({
-    queryKey: [ENDPOINT.USER_SERVICE.USERS, pagination, "normal-user"],
+    queryKey: [ENDPOINT.USER_SERVICE.USERS, "findPageUser", pagination],
     queryFn: () =>
       UserApi.findPageUser({
         ...userSearchQuery,
@@ -181,6 +181,21 @@ function AddAdminDialog() {
     query.refetch();
   };
 
+  useEffect(() => {
+    if (!open) {
+      setRowSelection({});
+      setSelectedGroupId("");
+      setUserSearchQuery({
+        keywordType: "userName",
+        keyword: "",
+      });
+      setPagination({ pageIndex: 0, pageSize: 10 });
+      queryClient.removeQueries({
+        queryKey: [ENDPOINT.USER_SERVICE.USERS, "findPageUser"],
+      });
+    }
+  }, [open]);
+
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>

apps/cs/src/pages/board-statistics/api/board-statistics-service.ts

@@ -1,53 +1,22 @@
-// import { client } from "@/shared/api";
-// import { ENDPOINT } from "@/shared/config";
+import { client } from "@/shared/api";
+import { ENDPOINT } from "@/shared/config";
 import {
   type BoardStatisticsParams,
   type BoardStatistics,
   type BoardStatisticsService,
 } from "../model/board-statistics-interface";
 
-// 임시 모의 데이터
-const mockBoardStatisticsData: BoardStatistics = {
-  totalPosts: 2456,
-  totalComments: 156,
-  averageRating: 4.2,
-  totalViews: 45678,
-  dayList: [
-    { date: "1월", posts: 10, comments: 5, views: 800 },
-    { date: "2월", posts: 15, comments: 8, views: 1200 },
-    { date: "3월", posts: 12, comments: 10, views: 1000 },
-    { date: "4월", posts: 18, comments: 15, views: 1500 },
-    { date: "5월", posts: 22, comments: 20, views: 1800 },
-    { date: "6월", posts: 20, comments: 18, views: 1600 },
-    { date: "7월", posts: 25, comments: 22, views: 2000 },
-  ],
-  boardList: [
-    { boardType: "notice", boardName: "공지사항", count: 45 },
-    { boardType: "faq", boardName: "FAQ", count: 120 },
-    { boardType: "qna", boardName: "Q&A", count: 180 },
-    { boardType: "free", boardName: "자유게시판", count: 95 },
-  ],
-  statusList: [
-    { status: "completed", statusName: "답변완료", count: 75 },
-    { status: "waiting", statusName: "답변대기", count: 25 },
-  ],
-};
-
 class BoardStatisticsApiService implements BoardStatisticsService {
   async getBoardStatistics(
     params: BoardStatisticsParams,
   ): Promise<BoardStatistics> {
-    console.log("params: ", params);
     try {
       // 실제 API 연동 시 아래 코드 사용
-      // const response = await client.get<BoardStatistics>(
-      //   `${ENDPOINT.CMS_SERVICE.BOARD_STATISTICS}`,
-      //   { params },
-      // );
-      // return response.data;
-
-      // 임시 모의 데이터 반환
-      return Promise.resolve(mockBoardStatisticsData);
+      const response = await client.get<BoardStatistics>(
+        `${ENDPOINT.BOARD_SERVICE.STATISTICS}`,
+        { params },
+      );
+      return response.data;
     } catch (error) {
       console.error("게시판 통계 데이터 조회 실패:", error);
       throw error;

apps/cs/src/pages/board-statistics/model/board-statistics-interface.ts

@@ -12,32 +12,36 @@ export interface BoardStatisticsParams extends PageableParams {
 }
 
 export interface BoardStatistics {
-  totalPosts: number;
-  totalComments: number;
-  averageRating: number;
-  totalViews: number;
-  dayList: DayStatistics[];
-  boardList: BoardTypeStatistics[];
-  statusList: StatusStatistics[];
+  bbsTotalDto: BbsTotalDto; // 게시판 전체 통계
+  pstAnsList: PstAnswerStatistics[]; // 게시물 답변 상태별 통계 목록
+  bbsDailyList: BbsDailyStatistics[]; // 게시판 일별 통계 목록
+  bbsPstCntList: BbsPostCountStatistics[]; // 게시판별 게시물 건수 통계 목록
 }
 
-interface DayStatistics {
-  date: string;
-  posts: number;
-  comments: number;
-  views: number;
+interface BbsTotalDto {
+  pstInqCnt: number; // 게시물 조회 건수
+  pstEvlAvg: number; // 게시물 평가 평균
+  pstTotCnt: number; // 게시물 총 건수
+  pstAnsWaitCnt: number; // 게시물 답변 대기 건수
 }
 
-interface BoardTypeStatistics {
-  boardType: string;
-  boardName: string;
-  count: number;
+interface PstAnswerStatistics {
+  answerNm: string; // 답변 명
+  answerYn: string; // 답변 여부 (Y/N)
+  ansCnt: number; // 답변 건수
 }
 
-interface StatusStatistics {
-  status: string;
-  statusName: string;
-  count: number;
+interface BbsDailyStatistics {
+  dayYmd: string; // 일자 (YYYY-MM-DD)
+  pstInqCnt: number; // 게시물 조회 건수
+  pstCmntCnt: number; // 게시물 댓글 건수
+  pstNewCnt: number; // 게시물 신규 건수
+}
+
+interface BbsPostCountStatistics {
+  bbsId: number; // 게시판 ID
+  bbsNm: string; // 게시판 명
+  pstCnt: number; // 게시물 건수
 }
 
 export interface BoardStatisticsService {

apps/cs/src/pages/board-statistics/model/chart-data.ts

@@ -11,20 +11,20 @@ export const chartData = {
   } => {
     return {
       data: {
-        labels: data.dayList.map((item) => item.date),
+        labels: data.bbsDailyList.map((item) => item.dayYmd),
         datasets: [
           {
             type: "line",
             label: "신규게시물",
-            data: data.dayList.map((item) => item.posts),
+            data: data.bbsDailyList.map((item) => item.pstNewCnt),
             borderColor: getCssVariableValue("--chart-1"),
             backgroundColor: "rgba(59, 130, 246, 0.1)",
             tension: 0.4,
           },
           {
             type: "line",
-            label: "답변대기",
-            data: data.dayList.map((item) => item.comments),
+            label: "댓글수",
+            data: data.bbsDailyList.map((item) => item.pstCmntCnt),
             borderColor: getCssVariableValue("--chart-2"),
             backgroundColor: "rgba(236, 72, 153, 0.1)",
             tension: 0.4,
@@ -32,11 +32,10 @@ export const chartData = {
           {
             type: "line",
             label: "조회수",
-            data: data.dayList.map((item) => item.views),
+            data: data.bbsDailyList.map((item) => item.pstInqCnt),
             borderColor: getCssVariableValue("--chart-3"),
             backgroundColor: "rgba(168, 85, 247, 0.1)",
             tension: 0.4,
-            hidden: true,
           },
         ],
       },
@@ -67,13 +66,13 @@ export const chartData = {
   } => {
     return {
       data: {
-        labels: data.boardList.map((item) => item.boardName),
+        labels: data.bbsPstCntList.map((item) => item.bbsNm),
         datasets: [
           {
             type: "bar",
             label: "게시판별 분포",
-            data: data.boardList.map((item) => item.count),
-            backgroundColor: data.boardList.map((_, index) =>
+            data: data.bbsPstCntList.map((item) => item.pstCnt),
+            backgroundColor: data.bbsPstCntList.map((_, index) =>
               getCssVariableValue(`--chart-${(index % 5) + 1}`),
             ),
           },
@@ -106,12 +105,12 @@ export const chartData = {
   } => {
     return {
       data: {
-        labels: data.statusList.map((item) => item.statusName),
+        labels: data.pstAnsList.map((item) => item.answerNm),
         datasets: [
           {
             type: "doughnut",
-            data: data.statusList.map((item) => item.count),
-            backgroundColor: data.statusList.map((_, index) =>
+            data: data.pstAnsList.map((item) => item.ansCnt),
+            backgroundColor: data.pstAnsList.map((_, index) =>
               getCssVariableValue(`--chart-${(index % 5) + 1}`),
             ),
           },

apps/cs/src/pages/board-statistics/ui/board-statistics-page.tsx

@@ -26,7 +26,7 @@ import {
   SelectValue,
 } from "@common/components";
 import { SiteSelect } from "@/entities/site";
-// import { ENDPOINT } from "@/shared/config";
+import { ENDPOINT } from "@/shared/config";
 import { NoData } from "@/shared/ui/no-data";
 import { InputDateRangePicker } from "@/shared/ui/input-date-range-picker";
 import { BoardStatisticsApi } from "../api/board-statistics-service";
@@ -66,7 +66,7 @@ function BoardStatisticsPage() {
   });
 
   const { data: boardStatisticsData } = useQuery({
-    queryKey: ["board-statistics", searchParams],
+    queryKey: [ENDPOINT.BOARD_SERVICE.STATISTICS, searchParams],
     queryFn: () =>
       BoardStatisticsApi.getBoardStatistics({
         ...searchParams,
@@ -176,7 +176,8 @@ function BoardStatisticsPage() {
             <h3 className="text-lg font-medium text-gray-500">총 게시물</h3>
             <div className="flex items-center justify-between">
               <div className="mt-2 text-4xl font-bold">
-                {boardStatisticsData?.totalPosts.toLocaleString() || 0}
+                {boardStatisticsData?.bbsTotalDto?.pstTotCnt?.toLocaleString() ||
+                  0}
               </div>
               <div className="h-16 w-24">
                 <Line
@@ -210,7 +211,8 @@ function BoardStatisticsPage() {
             <h3 className="text-lg font-medium text-gray-500">답변대기</h3>
             <div className="flex items-center justify-between">
               <div className="mt-2 text-4xl font-bold">
-                {boardStatisticsData?.totalComments.toLocaleString() || 0}
+                {boardStatisticsData?.bbsTotalDto?.pstAnsWaitCnt?.toLocaleString() ||
+                  0}
               </div>
               <div className="h-16 w-24">
                 <Line
@@ -244,7 +246,7 @@ function BoardStatisticsPage() {
             <h3 className="text-lg font-medium text-gray-500">평균평점</h3>
             <div className="flex items-center justify-between">
               <div className="mt-2 text-4xl font-bold">
-                {boardStatisticsData?.averageRating.toFixed(1) || 0}
+                {boardStatisticsData?.bbsTotalDto?.pstEvlAvg?.toFixed(1) || 0}
               </div>
               <div className="h-16 w-24">
                 <Line
@@ -278,7 +280,8 @@ function BoardStatisticsPage() {
             <h3 className="text-lg font-medium text-gray-500">총 조회수</h3>
             <div className="flex items-center justify-between">
               <div className="mt-2 text-4xl font-bold">
-                {boardStatisticsData?.totalViews.toLocaleString() || 0}
+                {boardStatisticsData?.bbsTotalDto?.pstInqCnt?.toLocaleString() ||
+                  0}
               </div>
               <div className="h-16 w-24">
                 <Line
@@ -315,7 +318,7 @@ function BoardStatisticsPage() {
             <h3 className="text-2xl font-medium">일별 게시물 현황</h3>
           </div>
           <div className="h-96 p-4">
-            {boardStatisticsData?.dayList?.length ? (
+            {boardStatisticsData?.bbsDailyList?.length ? (
               <Line {...chartData.day(boardStatisticsData)} />
             ) : (
               <NoData />
@@ -329,7 +332,7 @@ function BoardStatisticsPage() {
               <h3 className="text-2xl font-medium">답변상태</h3>
             </div>
             <div className="h-96 p-4">
-              {boardStatisticsData?.statusList?.length ? (
+              {boardStatisticsData?.pstAnsList?.length ? (
                 <Doughnut {...chartData.status(boardStatisticsData)} />
               ) : (
                 <NoData />
@@ -342,7 +345,7 @@ function BoardStatisticsPage() {
               <h3 className="text-2xl font-medium">게시판별 분포</h3>
             </div>
             <div className="h-96 p-4">
-              {boardStatisticsData?.boardList?.length ? (
+              {boardStatisticsData?.bbsPstCntList?.length ? (
                 <Bar {...chartData.board(boardStatisticsData)} />
               ) : (
                 <NoData />

apps/cs/src/pages/code/ui/lwpocode-dialog.tsx

@@ -1,4 +1,4 @@
-import { memo } from "react";
+import { memo, useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
@@ -140,6 +140,10 @@ const LwpoCodeManagementDialog = memo(
       }
     };
 
+    useEffect(() => {
+      if (!open) form.reset();
+    }, [open]);
+
     return (
       <Dialog open={open} onOpenChange={onOpenChange} {...props}>
         <DialogTrigger asChild>{children}</DialogTrigger>

apps/cs/src/pages/code/ui/upcode-dialog.tsx

@@ -1,4 +1,4 @@
-import { memo } from "react";
+import { memo, useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useQuery } from "@tanstack/react-query";
@@ -96,6 +96,10 @@ const UpCodeManagementDialog = memo(
         if (await confirm(confirmMessage)) callback(data);
       };
 
+    useEffect(() => {
+      if (!open) form.reset();
+    }, [open]);
+
     return (
       <Dialog open={open} onOpenChange={onOpenChange} {...props}>
         <DialogTrigger asChild>{children}</DialogTrigger>

apps/cs/src/pages/dashboard/api/dashboard-service.ts

@@ -1,6 +1,13 @@
 import { client } from "@/shared/api";
 import { ENDPOINT } from "@/shared/config";
-import type { Dashboard, DashboardService } from "../model/dashboard-interface";
+import type {
+  Dashboard,
+  DashboardService,
+  NoticeUser,
+  Schedule,
+  ScheduleQueryParams,
+} from "../model/dashboard-interface";
+import type { PageableList } from "@/shared/model";
 
 export class DashboardApiService implements DashboardService {
   public async getDashboard(): Promise<Dashboard> {
@@ -9,6 +16,25 @@ export class DashboardApiService implements DashboardService {
     );
     return response.data;
   }
+
+  public async getNoticeUserList(
+    recvUnqId: string,
+  ): Promise<PageableList<NoticeUser>> {
+    const response = await client.get<PageableList<NoticeUser>>(
+      `${ENDPOINT.CMS_SERVICE.NOTICE_USER}/${recvUnqId}/list`,
+    );
+    return response.data;
+  }
+
+  public async getScheduleList(
+    params?: ScheduleQueryParams,
+  ): Promise<Schedule[]> {
+    const response = await client.get<Schedule[]>(
+      ENDPOINT.CMS_SERVICE.SCHEDULES,
+      { params },
+    );
+    return response.data;
+  }
 }
 
 export const DashboardApi = new DashboardApiService();

apps/cs/src/pages/dashboard/model/dashboard-interface.ts

@@ -1,3 +1,5 @@
+import type { PageableList } from "@/shared/model";
+
 export interface SiteStatisticsContent {
   siteId: string;
   siteNm: string;
@@ -27,6 +29,42 @@ export interface Dashboard {
   menuAccessList: MenuStatisticsContent[];
 }
 
+export interface NoticeUser {
+  notiId: number;
+  recvUnqId: string;
+  senderUnqId: string;
+  notiType: string;
+  notiTtl: string;
+  notReadYn: string;
+  regDt: string;
+}
+
+export interface Schedule {
+  schdlBgngDt: string;
+  schdlEndDt: string;
+  actualDate: string;
+  schdlSn: number;
+  siteId: string;
+  schdlTtl: string;
+  schdlSeCd: string;
+  schdlCn: string;
+  reptYn: string;
+  commSchdlYn: string;
+  atflCd: string | null;
+}
+
+export interface ScheduleQueryParams {
+  siteId?: string;
+  schdlTtl?: string;
+  schdlSeCd?: string;
+  schdlBgngYmd?: string;
+  schdlEndYmd?: string;
+  reptYn?: string;
+  commSchdlYn?: string;
+}
+
 export interface DashboardService {
   getDashboard(): Promise<Dashboard>;
+  getNoticeUserList(recvUnqId: string): Promise<PageableList<NoticeUser>>;
+  getScheduleList(params?: ScheduleQueryParams): Promise<Schedule[]>;
 }

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

@@ -1,5 +1,6 @@
 "use client";
 
+import dayjs from "dayjs";
 import { useRouter } from "next/navigation";
 import { useQuery } from "@tanstack/react-query";
 import { getCoreRowModel } from "@tanstack/react-table";
@@ -17,8 +18,8 @@ import {
 } from "chart.js";
 import { Bar, Line } from "react-chartjs-2";
 import { PostApi, type RecentPost } from "@/entities/post";
-import { ENDPOINT } from "@/shared/config";
-import { useDataTable } from "@/shared/lib";
+import { AUTH_USER_ID, ENDPOINT, SITE_ID } from "@/shared/config";
+import { getCookie, useDataTable } from "@/shared/lib";
 import { DashboardApi } from "../api/dashboard-service";
 import { chartData } from "../model/chart-data";
 import {
@@ -39,12 +40,44 @@ ChartJS.register(
 );
 
 function DashboardPage() {
+  const userId = getCookie(AUTH_USER_ID) ?? "";
+
   const router = useRouter();
+
   const { data } = useQuery({
     queryKey: [ENDPOINT.CMS_SERVICE.DASHBOARD],
     queryFn: () => DashboardApi.getDashboard(),
   });
 
+  const { data: noticeUserList } = useQuery({
+    queryKey: [ENDPOINT.CMS_SERVICE.NOTICE_USER],
+    queryFn: () => DashboardApi.getNoticeUserList(userId),
+    enabled: !!userId,
+    select: (data) => {
+      // 오늘 ~ 한 달 전 사이의 일정
+      const today = dayjs().endOf("day");
+      const monthAgo = dayjs().subtract(1, "month").startOf("day");
+      return data.content?.filter((item) => {
+        const regDt = dayjs(item.regDt);
+        return (
+          (regDt.isSame(monthAgo) || regDt.isAfter(monthAgo)) &&
+          (regDt.isSame(today) || regDt.isBefore(today))
+        );
+      });
+    },
+  });
+
+  const { data: scheduleList } = useQuery({
+    queryKey: [ENDPOINT.CMS_SERVICE.SCHEDULES],
+    queryFn: () =>
+      DashboardApi.getScheduleList({
+        siteId: SITE_ID,
+        schdlBgngYmd: dayjs().format("YYYY-MM-DD"),
+        schdlEndYmd: dayjs().add(1, "month").format("YYYY-MM-DD"),
+        commSchdlYn: "Y",
+      }),
+  });
+
   const noticePostQuery = useQuery({
     queryKey: [ENDPOINT.BOARD_SERVICE.POSTS],
     queryFn: () =>
@@ -323,22 +356,15 @@ function DashboardPage() {
               </div>
               <div className="p-4">
                 <div className="space-y-4 text-foreground">
-                  <div className="flex items-center justify-between border-b border-border pb-4">
-                    <span className="font-medium">신규 사용자 가입</span>
-                    <span>{(1).toLocaleString()}분 전</span>
-                  </div>
-                  <div className="flex items-center justify-between border-b border-border pb-4">
-                    <span className="font-medium">메뉴 수정 요청</span>
-                    <span>{(5).toLocaleString()}분 전</span>
-                  </div>
-                  <div className="flex items-center justify-between border-b border-border pb-4">
-                    <span className="font-medium">게시물 신고</span>
-                    <span>{(10).toLocaleString()}분 전</span>
-                  </div>
-                  <div className="flex items-center justify-between">
-                    <span className="font-medium">컨텐츠 승인 요청</span>
-                    <span>{(15).toLocaleString()}분 전</span>
-                  </div>
+                  {noticeUserList?.map((item) => (
+                    <div
+                      key={item.notiId}
+                      className="flex items-center justify-between border-b border-border pb-4"
+                    >
+                      <span className="font-medium">{item.notiTtl}</span>
+                      <span>{dayjs(item.regDt).fromNow()}</span>
+                    </div>
+                  ))}
                 </div>
               </div>
             </div>
@@ -349,24 +375,44 @@ function DashboardPage() {
               </div>
               <div className="p-4">
                 <div className="space-y-4 text-foreground">
-                  <div className="flex items-center justify-between border-b border-border pb-4">
-                    <span className="font-medium">
-                      {(3).toLocaleString()}월 정기 시스템 점검
-                    </span>
-                    <span>내일</span>
-                  </div>
-                  <div className="flex items-center justify-between border-b border-border pb-4">
-                    <span className="font-medium">서버 업데이트 예정</span>
-                    <span>{(3).toLocaleString()}일 후</span>
-                  </div>
-                  <div className="flex items-center justify-between border-b border-border pb-4">
-                    <span className="font-medium">백업 스케줄</span>
-                    <span>{(5).toLocaleString()}일 후</span>
-                  </div>
-                  <div className="flex items-center justify-between">
-                    <span className="font-medium">정기 보안 점검</span>
-                    <span>{(7).toLocaleString()}일 후</span>
-                  </div>
+                  {scheduleList && scheduleList.length > 0 ? (
+                    scheduleList.map((schedule, index) => {
+                      const today = dayjs();
+                      const scheduleDate = dayjs(schedule.actualDate);
+                      const daysUntil = scheduleDate.diff(today, "day");
+
+                      let timeText = "";
+                      if (daysUntil === 0) {
+                        timeText = "오늘";
+                      } else if (daysUntil === 1) {
+                        timeText = "내일";
+                      } else if (daysUntil > 1) {
+                        timeText = `${daysUntil}일 후`;
+                      } else {
+                        timeText = scheduleDate.format("YYYY-MM-DD");
+                      }
+
+                      return (
+                        <div
+                          key={schedule.schdlSn}
+                          className={`flex items-center justify-between ${
+                            index < scheduleList.length - 1
+                              ? "border-b border-border pb-4"
+                              : ""
+                          }`}
+                        >
+                          <span className="font-medium">
+                            {schedule.schdlTtl}
+                          </span>
+                          <span>{timeText}</span>
+                        </div>
+                      );
+                    })
+                  ) : (
+                    <div className="text-center text-muted-foreground">
+                      예정된 일정이 없습니다.
+                    </div>
+                  )}
                 </div>
               </div>
             </div>

apps/cs/src/pages/groups/ui/menu-authority-dialog.tsx

@@ -1,4 +1,4 @@
-import { useState, useRef } from "react";
+import { useState, useRef, useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useQuery } from "@tanstack/react-query";
@@ -48,25 +48,14 @@ function MenuAuthorityDialog({ groupId }: MenuAuthorityDialogProps) {
     keywordType: "",
     siteId: "",
   });
-  
-  const handleReset = () => {
-    if (inputRef.current) inputRef.current.value = "";
-    setKeywordType("");
-    setSiteId("");
-    setSearchParams({
-      keyword: "",
-      keywordType: "",
-      siteId: "",
-    });
-  };
-
 
   const query = useQuery({
     queryKey: [ENDPOINT.CMS_SERVICE.MENU_AUTHRTS, groupId, searchParams],
-    queryFn: () => MenuAuthorityApi.getGroupMenuAuthorityList({ 
-      groupId, 
-      ...searchParams 
-    }),
+    queryFn: () =>
+      MenuAuthorityApi.getGroupMenuAuthorityList({
+        groupId,
+        ...searchParams,
+      }),
     enabled: open && !!groupId,
   });
 
@@ -117,6 +106,21 @@ function MenuAuthorityDialog({ groupId }: MenuAuthorityDialogProps) {
     });
   };
 
+  const handleReset = () => {
+    if (inputRef.current) inputRef.current.value = "";
+    setSiteId("");
+    setKeywordType("");
+    setSearchParams({
+      keyword: "",
+      keywordType: "",
+      siteId: "",
+    });
+  };
+
+  useEffect(() => {
+    if (!open) handleReset();
+  }, [open]);
+
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>

apps/cs/src/pages/module/ui/management-authority-dialog.tsx

@@ -1,4 +1,4 @@
-import { useState, memo } from "react";
+import { useState, memo, useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useQuery } from "@tanstack/react-query";
@@ -90,6 +90,10 @@ const ManagementAuthorityDialog = memo(
       }
     };
 
+    useEffect(() => {
+      if (!open) form.reset();
+    }, [open]);
+
     return (
       <Dialog open={open} onOpenChange={setOpen}>
         <DialogTrigger asChild>

apps/cs/src/pages/role/ui/mapping-role-dialog.tsx

@@ -1,4 +1,4 @@
-import { useState, useRef } from "react";
+import { useState, useRef, useEffect } from "react";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { getCoreRowModel, type ColumnDef } from "@tanstack/react-table";
 import {
@@ -113,6 +113,10 @@ function MappingRoleDialog({
     },
   });
 
+  useEffect(() => {
+    if (!open) handleReset();
+  }, [open]);
+
   return (
     <Dialog open={open} onOpenChange={onOpenChange} {...props}>
       <DialogTrigger asChild>

apps/cs/src/shared/config/api.ts

@@ -56,6 +56,7 @@ export const ENDPOINT = {
     APILOG: "/cms-service/api/v1/api-logs",
     SITE_AUTHORITY: "/cms-service/api/v1/site-authrt",
     CONNECTION_LOG: "/cms-service/api/v1/cntnlog",
+    NOTICE_USER: "/cms-service/api/v1/noti/user",
   },
   BOARD_SERVICE: {
     BBS: "/board-service/api/v1/bbs",
@@ -63,6 +64,7 @@ export const ENDPOINT = {
     POSTS: "/board-service/api/v1/posts",
     POSTS_COMMENTS: "/board-service/api/v1/posts-cmnts",
     POST_EVALUATION: "/board-service/api/v1/pstEvl",
+    STATISTICS: "/board-service/api/v1/stat/bbs",
   },
 };
 

apps/dc/package.json

@@ -24,6 +24,7 @@
     "js-cookie": "^3.0.5",
     "lucide-react": "^0.474.0",
     "next": "15.3.8",
+    "picocolors": "^1.1.1",
     "react-chartjs-2": "^5.3.0",
     "react-dnd": "^16.0.1",
     "react-dropzone": "^14.3.8",

apps/dm/.env.local

@@ -4,20 +4,19 @@ NEXT_PUBLIC_AUTH_USER_ID = token-id
 NEXT_PUBLIC_ACCESS_TOKEN = access-token
 NEXT_PUBLIC_REFRESH_TOKEN = refresh-token
 NEXT_PUBLIC_PORT = 3005
-#NEXT_PUBLIC_PROXY_HOST = http://con.mind-one.co.kr:11035
 NEXT_PUBLIC_PROXY_HOST = http://localhost:3005
-NEXT_PUBLIC_DM_SERVER_API_URL = http://con.mind-one.co.kr:11083/reuse-service/api/v1
-NEXT_PUBLIC_SERVER_API_URL = http://dev.onasys.co.kr:8000
-NEXT_PUBLIC_FO_SERVER_API_URL = http://con.mind-one.co.kr:11083/operation-service/api/v1
-# NEXT_PUBLIC_FO_SERVER_API_URL = http://192.168.1.222:8883/operation-service/api/v1
 NEXT_PUBLIC_CS_SERVER_API_URL = http://dev.onasys.co.kr:8000
+NEXT_PUBLIC_SERVER_API_URL = http://dev.onasys.co.kr:8000
+NEXT_PUBLIC_DM_SERVER_API_URL = http://con.mind-one.co.kr:11083/reuse-service/api/v1
+# NEXT_PUBLIC_FO_SERVER_API_URL = http://192.168.1.222:8883/operation-service/api/v1
+NEXT_PUBLIC_FO_SERVER_API_URL = http://con.mind-one.co.kr:11083/operation-service/api/v1
+NEXT_PUBLIC_WR_SERVER_API_URL = http://con.mind-one.co.kr:11083/reuse-service/api/v1
 NEXT_PUBLIC_GEOSERVER_URL = http://rsone.iptime.org:10010/geoserver
 NEXT_PUBLIC_LX_GEOSERVER_URL = http://con.mind-one.co.kr:11306/geoserver
 NEXT_PUBLIC_CS_TUS_UPLOAD = /attach-service/api/v1/tus/upload
-NEXT_PUBLIC_WR_SERVER_API_URL = http://con.mind-one.co.kr:11083/reuse-service/api/v1
 NEXT_PUBLIC_NGII_URL = https://map.ngii.go.kr
 NEXT_PUBLIC_NGII_PARAM = 04trYP9_xwLAfALjwZ-B8g&service=WMTS&request=GetTile&version=1.0.0&format=image/png&layer=korean_map&style=korean&tilematrixset=korean&tilematrix={z}&tilecol={x}&tilerow={y}
-NEXT_PUBLIC_SEWERAGE_API_URL=http://con.mind-one.co.kr:11083/sewerage-service   # 개발 서버 API
+NEXT_PUBLIC_GATEWAY_URL=http://con.mind-one.co.kr:11083  # 개발 서버 API
 #NEXT_PUBLIC_SEWERAGE_API_URL=http://192.168.1.128:8883/sewerage-service/api          # 최용성 
 #NEXT_PUBLIC_SEWERAGE_API_URL=http://192.168.1.66:8883/sewerage-service/api          # 박이정
 NEXT_PUBLIC_CM_LOGIN_PAGE_URL = http://dev.onasys.co.kr:3000/auth/login

apps/dm/.env.mindone

@@ -14,6 +14,7 @@ NEXT_PUBLIC_WR_SERVER_API_URL = http://con.mind-one.co.kr:11083/reuse-service/ap
 NEXT_PUBLIC_NGII_URL = https://map.ngii.go.kr
 NEXT_PUBLIC_NGII_PARAM = 04trYP9_xwLAfALjwZ-B8g&service=WMTS&request=GetTile&version=1.0.0&format=image/png&layer=korean_map&style=korean&tilematrixset=korean&tilematrix={z}&tilecol={x}&tilerow={y}
 NEXT_PUBLIC_SEWERAGE_API_URL=http://con.mind-one.co.kr:11083/sewerage-service   # 개발 서버 API
+NEXT_PUBLIC_GATEWAY_URL=http://con.mind-one.co.kr:11083  # 개발 서버 API
 # NEXT_PUBLIC_SEWERAGE_API_URL=http://192.168.1.128:8883/sewerage-service/api          # 최용성 
 #NEXT_PUBLIC_SEWERAGE_API_URL=http://192.168.1.66:8883/sewerage-service/api          # 박이정
 NEXT_PUBLIC_CM_LOGIN_PAGE_URL = http://dev.onasys.co.kr:3000/auth/login

apps/dm/.env.production

@@ -15,7 +15,8 @@ NEXT_PUBLIC_GEOSERVER_URL = http://172.29.143.87:8080/geoserver
 NEXT_PUBLIC_LX_GEOSERVER_URL = http://172.29.143.87:8080/geoserver_swl
 NEXT_PUBLIC_WR_SERVER_API_URL = http://apigateway.iipbs-was.svc.cluster.local:8000/reuse-service/api/v1
 NEXT_PUBLIC_SEWERAGE_API_URL = http://apigateway.iipbs-was.svc.cluster.local:8000/sewerage-service
-NEXT_PUBLIC_NGII_URL = http://172.29.143.87
+NEXT_PUBLIC_GATEWAY_URL = http://apigateway.iipbs-was.svc.cluster.local:8000
+NEXT_PUBLIC_NGII_URL = http://172.29.143.87/poiact
 NEXT_PUBLIC_NGII_PARAM = BDE2BEF39DAFEC293AB6730150F222AC&service=WMTS&request=GetTile&version=1.0.0&format=image/png&layer=korean_map&style=korean&tilematrixset=korean&tilematrix={z}&tilecol={y}&tilerow={x}
 
 

apps/dm/app/(base-layout)/pages/sdmMng/sdmInfoInsert/modalSimilar/page.tsx

@@ -87,9 +87,9 @@ export default function ModalSimilarPage({ sply = 0, usageCd = '', money = 0 }:
   }, [getSimilarCaseList, money, searchUseType, sply, usageCd]);
 
   return (
-    <div className="align-top w-[1360px] overflow-x-auto">
+    <div className="align-top w-[1360px] h-full">
       <Title title="유사사례 조회" />
-      <div className="overflow-x-auto h-[450px] w-full mt-8" tabIndex={0} aria-label="유사사례 테이블 영역">
+      <div className="overflow-x-auto h-[480px] w-full mt-8" tabIndex={0} aria-label="유사사례 테이블 영역">
         <div className="w-[150%]">
           <div className="card-header justify-self-start">
             <h3 className="text-2xl font-medium text-label">유사사례</h3>
@@ -148,7 +148,7 @@ export default function ModalSimilarPage({ sply = 0, usageCd = '', money = 0 }:
           </div>
         </div>
       </div>
-      <div className="overflow-x-auto h-[270px] w-full mt-8">
+      <div className="overflow-x-auto h-[270px] w-full mt-8 overflow-y-hidden">
         <div className="w-[130%]">
           <UiTable
             headName={"사업비 상세정보"}

apps/dm/app/(base-layout)/pages/sdmMng/sdmInfoInsert/page.tsx

@@ -1,5 +1,11 @@
 "use client";
 
+/**
+ *  수요정보등록 화면
+ *
+ * 🔗 사용 API
+ * - 수요정보등록: POST /reuseFc/request/demandInfo
+ */
 import { useDmStore } from "@/app/store";
 import { sdmInfoFormSchema, type DemandCompBizType, type SdmInfoFormData } from "@/app/store/sdmMng";
 import { SdmInfoRegForm } from "@/components/ui/sdmInfoInsertForm/component";
@@ -60,7 +66,7 @@ function SdmInfoInsertContent() {
       ...prev,
       sdmNm: searchParams.get("dmdCoNm") || "",
     }));
-    if(searchParams.get("dmdInfoId")){
+    if (searchParams.get("dmdInfoId")) {
       // const data = {
       //   dmdCoNm: searchParams.get("dmdCoNm") || '',
       //   ctpvCd: searchParams.get("ctpvCd") || '',
@@ -69,8 +75,8 @@ function SdmInfoInsertContent() {
       //   daddr: searchParams.get("daddr") || '',
       //   telno: searchParams.get("telno") || '',
       // }
-    
-     // sessionStorage.setItem("user", JSON.stringify(data || {}));
+
+      // sessionStorage.setItem("user", JSON.stringify(data || {}));
     }
     //sessionStorage.setItem("user", JSON.parse(user||'') || "");
     setIsLogin(user || searchParams.get("dmdInfoId") ? true : false);
@@ -121,7 +127,7 @@ function SdmInfoInsertContent() {
           const userData = JSON.parse(user);
           if (userData.dmdCoNm) {
             setFacilityName(userData.dmdCoNm);
-            form.setValue("sdmNm", userData.dmdCoNm);
+            form.setValue("sdmNm", userData.dmdCoNm); // 수요처명(회사명)
           }
         } catch (error) {
           console.error("Error parsing user data:", error);
@@ -203,10 +209,10 @@ function SdmInfoInsertContent() {
         tph: Number(data.tph) || null,
         trbt: Number(data.trbt) || null,
         ph: data.ph || "",
-        blgcOxygDmndQnt: Number(data.bod) ||null,
+        blgcOxygDmndQnt: Number(data.bod) || null,
         clIonQnt: Number(data.clIonQnt) || null,
         smll: data.smll || "",
-        cdtnv: Number(data.cdtnv) ||null,
+        cdtnv: Number(data.cdtnv) || null,
         crmty: Number(data.crmty) || null,
         rmrk: data.rmrk || "",
         bzmnNo: "",

apps/dm/app/(base-layout)/pages/sdmMng/sdmLogout/page.tsx

@@ -0,0 +1,22 @@
+"use client";
+/**
+ *  수요처 로그아웃 화면
+ *
+ * 🔗 사용 API
+ *  
+ */
+import { useDmStore } from "@/app/store";
+import { useRouter } from "next/navigation";
+import { useEffect } from "react";
+
+export default function SdmLogout() {
+  const router = useRouter();
+  const { actionLogout } = useDmStore((state) => state);
+
+  useEffect(() => {
+    actionLogout();
+    router.push("/pages/sdmMng/sdmInfoInsert");
+  }, [actionLogout, router]);
+
+  return null;
+}

apps/dm/app/layout.tsx

@@ -1,5 +1,8 @@
 "use client";
 import "./globals.css";
+import { setCookie } from "../src/shared/lib";
+
+setCookie("site-id-key", process.env.NEXT_PUBLIC_SITE_ID || "DM");
 
 export default function RootLayout({
   children,

apps/dm/app/store/sdmMng/index.tsx

@@ -50,8 +50,8 @@ export const sdmInfoFormSchema = z.object({
   // 모든 수질 관련 필드
   // 총대장균군수는 null 값을 불검출로 표시하기때문에 해당 검사에서 제외함.
   const allFields: (keyof typeof data)[] = [
-     "tn", "combResdch", "tph", 
-    "trbt", "ph", "bod", "clIonQnt", 
+    "tn", "combResdch", "tph",
+    "trbt", "ph", "bod", "clIonQnt",
     "smll", "cdtnv", "crmty",
   ];
 
@@ -104,38 +104,38 @@ export type SdmInfoFormData = z.infer<typeof sdmInfoFormSchema>;
 
 // 수요처 정보
 export type DemandCompBizType = {
-  index : number | '';
-  dmdInfoId : string | '';
-  dmdInfoFk : string | '';
-  bzmnNo : string | '';
-  dmdCoNm : string | '';
-  daddr : string | '';
-  telno : string | '';
-  rgtr : string | '';
-  useUsgCd : string | '';
-  ctpvCd : string | '';
-  sggCd : string | '';
-  dmdAplyPswd	 : string | '';
-  wntUntprc : number | '';
-  dmndTmng : Date | '';
-  dmndQty : number | '';
-  grssClfg : number | null //총대장균군수
-  tn : number | null //총질소
-  combResdch : number | null //결합잔류염소
-  tph : number | null //총인
-  trbt : number | null //탁도
-  ph : string | ''; //수소이온농
-  blgcOxygDmndQnt : number | null //생물학적산소요구량
-  clIonQnt : number | null //염화물
-  smll : string | ''; //냄새
-  cdtnv : number | null; //전기전도도
-  crmty : number | null //색도
-  rmrk : string | '';
-  reqDt : string | '';
-  dmdInfoSn : number | '';
-  status : string | '';
-  splyCndtList:SupplyCandidate[]|[],
-  ruseUtztnFcltNm?:string|''
+  index: number | '';
+  dmdInfoId: string | '';
+  dmdInfoFk: string | '';
+  bzmnNo: string | '';
+  dmdCoNm: string | '';
+  daddr: string | '';
+  telno: string | '';
+  rgtr: string | '';
+  useUsgCd: string | '';
+  ctpvCd: string | '';
+  sggCd: string | '';
+  dmdAplyPswd: string | '';
+  wntUntprc: number | '';
+  dmndTmng: Date | '';
+  dmndQty: number | '';
+  grssClfg: number | null //총대장균군수
+  tn: number | null //총질소
+  combResdch: number | null //결합잔류염소
+  tph: number | null //총인
+  trbt: number | null //탁도
+  ph: string | ''; //수소이온농
+  blgcOxygDmndQnt: number | null //생물학적산소요구량
+  clIonQnt: number | null //염화물
+  smll: string | ''; //냄새
+  cdtnv: number | null; //전기전도도
+  crmty: number | null //색도
+  rmrk: string | '';
+  reqDt: string | '';
+  dmdInfoSn: number | '';
+  status: string | '';
+  splyCndtList: SupplyCandidate[] | [],
+  ruseUtztnFcltNm?: string | ''
 
 }
 
@@ -147,107 +147,107 @@ export type SupplyCandidate = {
 
 
 export type DemandMatchings = {
-  splyFcltFk : string | '';
-  splyFcltFlg : string | '';
-  pbnstRuseFcltBizFk : number | '';
-  splyBgngDay : string | '';
-  splyEndDay : string | '';
-  splyCpct : number | '';
-  splyFmYn : string | '';
-  useUsgCd : string | '';
-  dmdInfoSn : number | '';
-  splyCndtList : string | '';
-  mtchnCmptnYmd : string | '';
-  rvwCmptnYmd : string | '';
-  regDt : string | '';
-  rgtr : string | '';
-  mdfcnDt : string | '';
-  mdfr : string | '';
+  splyFcltFk: string | '';
+  splyFcltFlg: string | '';
+  pbnstRuseFcltBizFk: number | '';
+  splyBgngDay: string | '';
+  splyEndDay: string | '';
+  splyCpct: number | '';
+  splyFmYn: string | '';
+  useUsgCd: string | '';
+  dmdInfoSn: number | '';
+  splyCndtList: string | '';
+  mtchnCmptnYmd: string | '';
+  rvwCmptnYmd: string | '';
+  regDt: string | '';
+  rgtr: string | '';
+  mdfcnDt: string | '';
+  mdfr: string | '';
 }
 
 // 유사사례
 export type SimilarCaseType = {
-  ruseBizNm : string | '';
-  bizBgngDate : string | '';
-  bizEndDate : string | '';
-  splyFcltKnd : string | '';
-  splyFcltNm : string | '';
-  splyFcltCpct : string | '';
-  dmdFcltNm : string | '';
-  dmdFcltAddr : string | '';
-  ruseFcltCpct : string | '';
-  ruseFcltPplLen : string | '';
-  ruseFcltUsg : string | '';
-  ruseFcltSplyCpct : string | '';
-  ruseFcltPrcsMsrc : string | '';
-  grnteWqUsg : string | '';
-  grnteWqGrssClfg : string | '';
-  grnteWqCombResdch : string | '';
-  grnteWqTrbt : string | '';
-  grnteWqBod : string | '';
-  grnteWqSmll : string | '';
-  grnteWqCrmty : string | '';
-  grnteWqTn : string | '';
-  grnteWqTp : string | '';
-  grnteWqPh : string | '';
-  grnteWqClIonQnt : string | '';
-  grnteWqCndctStat : string | '';
-  grnteWqRmrk : string | '';
-  reqBizReuseFcltCst : string | '';
-  reqBizPplCst : string | '';
-  reqBizArchCst : string | '';
-  reqBizMchnCst : string | '';
-  reqBizMtrngCst : string | '';
-  reqBizGisCst : string | '';
-  reqBizCctvCst : string | '';
-  reqBizCmcnCst : string | '';
-  reqBizWstCst : string | '';
-  reqBizDesignCst : string | '';
-  reqBizSpvsCst : string | '';
-  reqBizSbsdCst : string | '';
-  reqBizEtc : string | '';
-  reqBizGrssCst : string | '';
-  prcmPlanNlep : string | '';
-  prcmPlanLcep : string | '';
-  prcmPlanBrdnCst : string | '';
-  prcmPlanEcqrRt : string | '';
-  prcmPlanGrssCst : string | '';
-  clclnNlep : string | '';
-  clclnLcep : string | '';
-  clclnBrdnCst : string | '';
-  clclnEcqrRt : string | '';
-  clclnGrssCst : string | '';
+  ruseBizNm: string | '';    // 사업명
+  bizBgngDate: string | '';
+  bizEndDate: string | '';
+  splyFcltKnd: string | '';
+  splyFcltNm: string | '';
+  splyFcltCpct: string | '';
+  dmdFcltNm: string | '';
+  dmdFcltAddr: string | '';
+  ruseFcltCpct: string | '';
+  ruseFcltPplLen: string | '';
+  ruseFcltUsg: string | '';
+  ruseFcltSplyCpct: string | '';
+  ruseFcltPrcsMsrc: string | '';
+  grnteWqUsg: string | '';
+  grnteWqGrssClfg: string | '';
+  grnteWqCombResdch: string | '';
+  grnteWqTrbt: string | '';
+  grnteWqBod: string | '';
+  grnteWqSmll: string | '';
+  grnteWqCrmty: string | '';
+  grnteWqTn: string | '';
+  grnteWqTp: string | '';
+  grnteWqPh: string | '';
+  grnteWqClIonQnt: string | '';
+  grnteWqCndctStat: string | '';
+  grnteWqRmrk: string | '';
+  reqBizReuseFcltCst: string | '';
+  reqBizPplCst: string | '';
+  reqBizArchCst: string | '';
+  reqBizMchnCst: string | '';
+  reqBizMtrngCst: string | '';
+  reqBizGisCst: string | '';
+  reqBizCctvCst: string | '';
+  reqBizCmcnCst: string | '';
+  reqBizWstCst: string | '';
+  reqBizDesignCst: string | '';
+  reqBizSpvsCst: string | '';
+  reqBizSbsdCst: string | '';
+  reqBizEtc: string | '';
+  reqBizGrssCst: string | '';
+  prcmPlanNlep: string | '';
+  prcmPlanLcep: string | '';
+  prcmPlanBrdnCst: string | '';
+  prcmPlanEcqrRt: string | '';
+  prcmPlanGrssCst: string | '';
+  clclnNlep: string | '';
+  clclnLcep: string | '';
+  clclnBrdnCst: string | '';
+  clclnEcqrRt: string | '';
+  clclnGrssCst: string | '';
 }
 
 // 사업비 상세정보
 export type MoneyDetailType = {
-  reqBizGrssCst : string | '';
-  reqBizReuseFcltCst : string | '';
-  reqBizPplCst : string | '';
-  reqBizArchCst : string | '';
-  reqBizMchnCst : string | '';
-  reqBizMtrngCst : string | '';
-  reqBizGisCst : string | '';
-  reqBizCctvCst : string | '';
-  reqBizCmcnCst : string | '';
-  reqBizWstCst : string | '';
-  reqBizDesignCst : string | '';
-  reqBizSpvsCst : string | '';
-  reqBizSbsdCst : string | '';
-  reqBizEtc : string | '';
-  
+  reqBizGrssCst: string | '';
+  reqBizReuseFcltCst: string | '';
+  reqBizPplCst: string | '';
+  reqBizArchCst: string | '';
+  reqBizMchnCst: string | '';
+  reqBizMtrngCst: string | '';
+  reqBizGisCst: string | '';
+  reqBizCctvCst: string | '';
+  reqBizCmcnCst: string | '';
+  reqBizWstCst: string | '';
+  reqBizDesignCst: string | '';
+  reqBizSpvsCst: string | '';
+  reqBizSbsdCst: string | '';
+  reqBizEtc: string | '';
+
   /** 재원조달계획(백만원원) */
-  prcmPlanGrssCst : string | '';
-  prcmPlanNlep : string | '';
-  prcmPlanLcep : string | '';
-  prcmPlanBrdnCst : string | '';
-  prcmPlanEcqrRt : string | '';
+  prcmPlanGrssCst: string | '';
+  prcmPlanNlep: string | '';
+  prcmPlanLcep: string | '';
+  prcmPlanBrdnCst: string | '';
+  prcmPlanEcqrRt: string | '';
   /** 사업비 정산(백만원) */
-  clclnGrssCst : string | '';
-  clclnNlep : string | '';
-  clclnLcep : string | '';
-  clclnBrdnCst : string | '';
-  clclnEcqrRt : string | '';
+  clclnGrssCst: string | '';
+  clclnNlep: string | '';
+  clclnLcep: string | '';
+  clclnBrdnCst: string | '';
+  clclnEcqrRt: string | '';
 }
 // 규칙 타입 선언
 export type DisableRulesType = Record<string, string[]>;
@@ -255,144 +255,144 @@ export type DisableRulesType = Record<string, string[]>;
  * Store - 데이터
  ====================================*/
 // 수요처 정보
-const demandCompList : DemandCompType[] = [
+const demandCompList: DemandCompType[] = [
 ]
 
 
 const disableRules: DisableRulesType = {
-    "청소": ["tn", 'tph',"clIonQnt" ,'cdtnv'],
-    "화장실용수": ["tn", 'tph',"clIonQnt" ,'cdtnv'],
-    "세척": ["combResdch", "crmty",'tph','tn',"clIonQnt",'cdtnv'],
-    "살수": ["combResdch", "crmty",'tph','tn',"clIonQnt",'cdtnv'],
-    "조경": ["combResdch", "crmty",'tph','cdtnv'],
-    "농업_간접용수": ["combResdch", "crmty",'tn','tph','clIonQnt'],
-    "농업_직접용수":  ["combResdch", "crmty",'tn','tph','clIonQnt'],
-    "하천": ["combResdch", "trbt", "crmty" ,'clIonQnt','cdtnv'],
-    '공업':[]
-  };
+  "청소": ["tn", 'tph', "clIonQnt", 'cdtnv'],
+  "화장실용수": ["tn", 'tph', "clIonQnt", 'cdtnv'],
+  "세척": ["combResdch", "crmty", 'tph', 'tn', "clIonQnt", 'cdtnv'],
+  "살수": ["combResdch", "crmty", 'tph', 'tn', "clIonQnt", 'cdtnv'],
+  "조경": ["combResdch", "crmty", 'tph', 'cdtnv'],
+  "농업_간접용수": ["combResdch", "crmty", 'tn', 'tph', 'clIonQnt'],
+  "농업_직접용수": ["combResdch", "crmty", 'tn', 'tph', 'clIonQnt'],
+  "하천": ["combResdch", "trbt", "crmty", 'clIonQnt', 'cdtnv'],
+  '공업': []
+};
 
-  const defaultRules: Record<string, object> = {
-    "청소": {
-      grssClfg: null,
-      combResdch:0.2,
-      trbt: 2,
-      bod: 5,
-      crmty: 20,
-      ph: "5.8~8.5",
-      smll:'불쾌하지않을것',
-      tn:null,
-      tph: null,
-      clIonQnt: null,
-      cdtnv: null,
+const defaultRules: Record<string, object> = {
+  "청소": {
+    grssClfg: null,
+    combResdch: 0.2,
+    trbt: 2,
+    bod: 5,
+    crmty: 20,
+    ph: "5.8~8.5",
+    smll: '불쾌하지않을것',
+    tn: null,
+    tph: null,
+    clIonQnt: null,
+    cdtnv: null,
 
-    },
-    "화장실용수": {
-      grssClfg: null,
-      combResdch:0.2,
-      trbt: 2,
-      bod: 5,
-      crmty: 20,
-      smll:'불쾌하지않을것',
-      ph: "5.8~8.5",
-      tn:null,
-      tph: null,
-      clIonQnt: null,
-      cdtnv: null,
-    },
-    "세척": {
-      grssClfg: null,
-      trbt: 2,
-      bod: 5,
-      ph: "5.8~8.5",
-      combResdch:null,
-      smll:'불쾌하지않을것',
-      crmty:null,
-      tn:null,
-      tph: null,
-      clIonQnt: null,
-      cdtnv: null,
-    },
-    "살수": {
-      grssClfg: null,
-      trbt: 2,
-      bod: 5,
-      ph: "5.8~8.5",
-      smll:'불쾌하지않을것',
-      combResdch:null,
-      crmty:null,
-      tn:null,
-      tph: null,
-      clIonQnt: null,
-      cdtnv: null,
-    },
-    "조경": {
-      grssClfg: null,
-      trbt: 2,
-      bod: 5,
-      ph: "5.8~8.5",
-      smll:'불쾌하지않을것',
-      clIonQnt:250,
-      combResdch:null,
-      crmty:null,
-      tn:null,
-      tph: null,
-      cdtnv: null,
-    },
-    "농업_간접용수": {
-      grssClfg: null,
-      trbt: 5,
-      bod: 8,
-      ph: "5.8~8.5",
-      cdtnv:2000,
-      combResdch:null,
-      crmty:null,
-      tn:null,
-      tph: null,
-      clIonQnt: null,
-    },
-    "농업_직접용수": {
-      grssClfg: null,
-      trbt: 2,
-      bod: 8,
-      smll:'불쾌하지않을것',
-      ph: "5.8~8.5",
-      cdtnv:700,
-      combResdch:null,
-      crmty:null,
-      tn:null,
-      tph: null,
-      clIonQnt: null,
-    },
-    "하천": {
-      grssClfg: 1000,
-      bod: 5,
-      tn: 10,
-      tph: 0.5,
-      smll:'불쾌하지않을것',
-      ph: "5.8~8.5",
-      combResdch:null,
-      trbt:null,
-      crmty:null,
-      clIonQnt: null,
-      cdtnv:null
-    },
-    '공업':{
-      grssClfg: null,
-      bod: null,
-      tn: null,
-      tph: null,
-      ph: "~",
-      combResdch:null,
-      smll:'불쾌하지않을것',
-      trbt:null,
-      crmty:null,
-      clIonQnt: null,
-      cdtnv:null
-    }
-  };
+  },
+  "화장실용수": {
+    grssClfg: null,
+    combResdch: 0.2,
+    trbt: 2,
+    bod: 5,
+    crmty: 20,
+    smll: '불쾌하지않을것',
+    ph: "5.8~8.5",
+    tn: null,
+    tph: null,
+    clIonQnt: null,
+    cdtnv: null,
+  },
+  "세척": {
+    grssClfg: null,
+    trbt: 2,
+    bod: 5,
+    ph: "5.8~8.5",
+    combResdch: null,
+    smll: '불쾌하지않을것',
+    crmty: null,
+    tn: null,
+    tph: null,
+    clIonQnt: null,
+    cdtnv: null,
+  },
+  "살수": {
+    grssClfg: null,
+    trbt: 2,
+    bod: 5,
+    ph: "5.8~8.5",
+    smll: '불쾌하지않을것',
+    combResdch: null,
+    crmty: null,
+    tn: null,
+    tph: null,
+    clIonQnt: null,
+    cdtnv: null,
+  },
+  "조경": {
+    grssClfg: null,
+    trbt: 2,
+    bod: 5,
+    ph: "5.8~8.5",
+    smll: '불쾌하지않을것',
+    clIonQnt: 250,
+    combResdch: null,
+    crmty: null,
+    tn: null,
+    tph: null,
+    cdtnv: null,
+  },
+  "농업_간접용수": {
+    grssClfg: null,
+    trbt: 5,
+    bod: 8,
+    ph: "5.8~8.5",
+    cdtnv: 2000,
+    combResdch: null,
+    crmty: null,
+    tn: null,
+    tph: null,
+    clIonQnt: null,
+  },
+  "농업_직접용수": {
+    grssClfg: null,
+    trbt: 2,
+    bod: 8,
+    smll: '불쾌하지않을것',
+    ph: "5.8~8.5",
+    cdtnv: 700,
+    combResdch: null,
+    crmty: null,
+    tn: null,
+    tph: null,
+    clIonQnt: null,
+  },
+  "하천": {
+    grssClfg: 1000,
+    bod: 5,
+    tn: 10,
+    tph: 0.5,
+    smll: '불쾌하지않을것',
+    ph: "5.8~8.5",
+    combResdch: null,
+    trbt: null,
+    crmty: null,
+    clIonQnt: null,
+    cdtnv: null
+  },
+  '공업': {
+    grssClfg: null,
+    bod: null,
+    tn: null,
+    tph: null,
+    ph: "~",
+    combResdch: null,
+    smll: '불쾌하지않을것',
+    trbt: null,
+    crmty: null,
+    clIonQnt: null,
+    cdtnv: null
+  }
+};
 
 // 사용용도
-const useTypesData : SelectDataType[] = [
+const useTypesData: SelectDataType[] = [
   { text: '청소', val: "청소" },
   { text: "화장실용수", val: "화장실용수" },
   { text: "세척", val: "세척" },
@@ -440,8 +440,8 @@ export const similarCaseModalHeader: TableUpperProps[] = [
 ]
 
 // 유사사례 데이터
-const similarCaseList : SimilarCaseType[] = [
-    
+const similarCaseList: SimilarCaseType[] = [
+
 ]
 
 // 사업비 상세정보 모달 헤더
@@ -477,12 +477,12 @@ export const moneyDetailModalHeader: TableUpperProps[] = [
 ]
 
 // 사업비 상세정보
-const moneyDetailList : MoneyDetailType[] = [
+const moneyDetailList: MoneyDetailType[] = [
 ]
 
 // 수요정보 신청현황 헤더
 export const upHeadSdmInfoStatus: TableUpperProps[] = [
-  { id: "index", title: "No."},
+  { id: "index", title: "No." },
   { id: "ctpvCd", title: "시도", row: 0, rowSpan: 2 },
   { id: "sggCd", title: "시군구", row: 0, rowSpan: 2 },
   { id: "dmdCoNm", title: "회사명", row: 0, rowSpan: 2 },
@@ -501,7 +501,7 @@ export const upHeadSdmInfoStatus: TableUpperProps[] = [
 const postSdmData = async (data: DemandCompType) => {
   try {
     await postFetch("/reuseFc/request", data);
-    sessionStorage.setItem("user", JSON.stringify(data) );
+    sessionStorage.setItem("user", JSON.stringify(data));
     toast.success("수요처 등록에 성공하였습니다.");
     return true;
   } catch (error) {
@@ -526,16 +526,16 @@ const postSdmLoginData = async (data: DemandCompType) => {
   try {
     const res = await postFetch("/reuseFc/request/login", data);
     const jsonData = await res.json();
-    
+
     const status = jsonData.status;
     const loginData = jsonData.data;
     let loginSuccess = false;
-    if(status === 200 && loginData != null) {
+    if (status === 200 && loginData != null) {
       alert("수요처 로그인에 성공하였습니다.");
       sessionStorage.setItem("user", JSON.stringify(loginData));
       loginSuccess = true;
-    } else if(status === 401) {
-      alert("패스워드가 틀렸습니다.");
+    } else if (status === 401) {
+      alert("패스워드가 일치하지 않습니다.");
       loginSuccess = false;
     } else {
       alert("등록된 수요처가 없습니다.");
@@ -553,35 +553,35 @@ const getDemandCompList = async (searchText: string, pageCnt: number) => {
   try {
     const url = '/reuseFc/request/' + (searchText ? searchText : '') + '/' + pageCnt;
     const res = await getFetch(fetchType.WR, url);
-    return { 
-      data: res?.data || [], 
-      count: res?.count || 0 
+    return {
+      data: res?.data || [],
+      count: res?.count || 0
     }
   } catch (error) {
-    console.error(error+' 수요처 정보를 불러오지 못했습니다.');
+    console.error(error + ' 수요처 정보를 불러오지 못했습니다.');
     return { data: [], count: 0 };
   }
 }
 
-const getSdmInfoStatusList = async (dmdInfoId : string) => {
+const getSdmInfoStatusList = async (dmdInfoId: string) => {
   try {
     const url = '/reuseFc/request/' + dmdInfoId;
     const res = await getFetch(fetchType.WR, url);
     return res?.data || [];
   } catch (error) {
-    console.error(error+' 수요정보 신청현황을 불러오지 못했습니다.');
+    console.error(error + ' 수요정보 신청현황을 불러오지 못했습니다.');
     return [];
   }
 }
 
 // 유사사례 조회
-const fetchGetSimilarCaseList = async (part: string, value: number|string) => {
+const fetchGetSimilarCaseList = async (part: string, value: number | string) => {
   try {
     const url = '/reuseFc/pubFcRuseCase/dm/' + part + '/' + (value ? value : 0);
     const res = await getFetch(fetchType.WR, url);
     return res?.data || [];
   } catch (error) {
-    console.error(error+' 유사사례 조회에 실패하였습니다.');
+    console.error(error + ' 유사사례 조회에 실패하였습니다.');
     return [];
   }
 }
@@ -590,23 +590,24 @@ const fetchGetSimilarCaseList = async (part: string, value: number|string) => {
  * Store - expaort
  ====================================*/
 export type SdmActions = {
-    initializeSdmData: () => void;
-    insertSdmData: (data: DemandCompType) => Promise<void>;
-    insertSdmInfoData: (data: DemandCompBizType) => Promise<void>;
-    getDemandCompList: (searchText: string, pageCnt: number) => Promise<void>;
-    actionLogin: (data: DemandCompType) => Promise<void>;
-    getSdmInfoStatusList: (dmdInfoId: string) => Promise<void>;
-    getSimilarCaseList: (part: string, value: number|string) => Promise<void>;
+  initializeSdmData: () => void;
+  insertSdmData: (data: DemandCompType) => Promise<void>;
+  insertSdmInfoData: (data: DemandCompBizType) => Promise<void>;
+  getDemandCompList: (searchText: string, pageCnt: number) => Promise<void>;
+  actionLogin: (data: DemandCompType) => Promise<void>;
+  getSdmInfoStatusList: (dmdInfoId: string) => Promise<void>;
+  getSimilarCaseList: (part: string, value: number | string) => Promise<void>;
+  actionLogout: () => Promise<void>;
 }
 
-export type SdmType ={ 
-  Sdm :{
+export type SdmType = {
+  Sdm: {
     isInit: boolean;
     useTypesData: SelectDataType[];
     demandCompList: DemandCompType[];
     upHeadSimilarCaseList: TableUpperProps[];
     similarCaseList: SimilarCaseType[];
-    upHeadMoneyDetailList : TableUpperProps[]; 
+    upHeadMoneyDetailList: TableUpperProps[];
     moneyDetailList: MoneyDetailType[];
 
     // 수요정보 신청현황
@@ -615,28 +616,28 @@ export type SdmType ={
     defaultRules: Record<string, object>
     disableRules: DisableRulesType;
     // 로그인관련
-    successNextPage : boolean;
+    successNextPage: boolean;
     successLogin: boolean;
   }
 }
 
 export const SdmState: SdmType = {
-  Sdm:{
-    isInit:false,
+  Sdm: {
+    isInit: false,
     useTypesData: useTypesData,
     demandCompList: demandCompList,
     upHeadSimilarCaseList: similarCaseModalHeader,
     similarCaseList: similarCaseList,
-    upHeadMoneyDetailList : moneyDetailModalHeader,
+    upHeadMoneyDetailList: moneyDetailModalHeader,
     moneyDetailList: moneyDetailList,
     // 수요정보 신청현황
     sdmInfoStatusList: [],
-    defaultRules:defaultRules,
-    disableRules:disableRules,
+    defaultRules: defaultRules,
+    disableRules: disableRules,
     upHeadSdmInfoStatus: upHeadSdmInfoStatus,
 
     // 로그인관련
-    successNextPage : false,
+    successNextPage: false,
     successLogin: false,
   }
 }
@@ -648,13 +649,13 @@ export const SdmReducer = (set: any): SdmActions => {
 
     insertSdmData: async (data: DemandCompType) => {
       const preRes = await getSdmInfoStatusList(data.dmdInfoId);
-      if(preRes?.dmdInfoId) {
+      if (preRes?.dmdInfoId) {
         toast.error('이미 등록된 수요처입니다.');
         return;
       }
 
       const res = await postSdmData(data);
-      if(res) {
+      if (res) {
         set((state: SdmType) => ({
           Sdm: {
             ...state.Sdm,
@@ -671,7 +672,7 @@ export const SdmReducer = (set: any): SdmActions => {
     // 수요처 정보
     getDemandCompList: async (searchText: string, pageCnt: number) => {
       const res = await getDemandCompList(searchText, pageCnt);
-      if(res.data.length === 0) {
+      if (res.data.length === 0) {
         set((state: SdmType) => ({
           Sdm: {
             ...state.Sdm,
@@ -693,7 +694,7 @@ export const SdmReducer = (set: any): SdmActions => {
     getSdmInfoStatusList: async (dmdInfoId: string) => {
       const res = await getSdmInfoStatusList(dmdInfoId);
 
-      if(res.length === 0) {
+      if (res.length === 0) {
         set((state: SdmType) => ({
           Sdm: {
             ...state.Sdm,
@@ -704,13 +705,13 @@ export const SdmReducer = (set: any): SdmActions => {
       }
       //const sdmInfoStatusList : DemandCompBizType[] = [];
 
-      const sdmInfoStatusList : DemandCompBizType[]= res.demandInfo.map((el: DemandCompBizType, index: number) => {
+      const sdmInfoStatusList: DemandCompBizType[] = res.demandInfo.map((el: DemandCompBizType, index: number) => {
         const matchingInfo = res.demandMatchings.find((matching: DemandMatchings) => matching.dmdInfoSn === el.dmdInfoSn);
         const status = matchingInfo?.splyFcltFlg?.trim() === 'Sub' ? '검토' : matchingInfo?.splyFcltFlg?.trim() === 'matched' ? '매칭완료' : '신청';
         const ruseUtztnFcltNm = matchingInfo?.ruseUtztnFcltNm ? matchingInfo.ruseUtztnFcltNm : '';
 
 
-       return( {
+        return ({
           ...el,
           index: ++index,
           bzmnNo: res.bzmnNo,
@@ -723,8 +724,8 @@ export const SdmReducer = (set: any): SdmActions => {
           sggCd: res.sggCd,
           useUsgCd: el.useUsgCd,
           dmndTmng: el.dmndTmng,
-          dmdInfoSn : el.dmdInfoSn,
-          status : status,
+          dmdInfoSn: el.dmdInfoSn,
+          status: status,
           splyCndtList: el.splyCndtList,
           ruseUtztnFcltNm: ruseUtztnFcltNm || ''
         })
@@ -749,25 +750,47 @@ export const SdmReducer = (set: any): SdmActions => {
     },
 
     // 유사사례 조회
-    getSimilarCaseList: async (part: string, value: number|string) => {
+    getSimilarCaseList: async (part: string, value: number | string) => {
       const res = await fetchGetSimilarCaseList(part, value);
-      if(res && res.length !== 0) {
+      const similarCaseList = res.map((el: SimilarCaseType) => {
+        const maskedBizNm = el.ruseBizNm
+          ? el.ruseBizNm.replace(/^(\s*)^\S+/, "***") // 첫 단어(공백 전까지) 치환
+          : el.ruseBizNm;
+
+        return {
+          ...el,
+          ruseBizNm: maskedBizNm,
+        };
+      });
+      console.log(similarCaseList);
+
+      if (similarCaseList && similarCaseList.length !== 0) {
         set((state: SdmType) => ({
-          Sdm: {  
+          Sdm: {
             ...state.Sdm,
-            similarCaseList: res,
+            similarCaseList: similarCaseList,
           }
         }))
         return;
-      }else{
+      } else {
         set((state: SdmType) => ({
-          Sdm: {  
+          Sdm: {
             ...state.Sdm,
             similarCaseList: [],
           }
         }))
         return;
       }
+    },
+
+    actionLogout: async () => {
+      sessionStorage.removeItem("user");
+      set((state: SdmType) => ({
+        Sdm: {
+          ...state.Sdm,
+          successLogin: false,
+        }
+      }))
     }
   }
 }

apps/dm/app/store/wrStatus/index.tsx

@@ -85,22 +85,20 @@ export const DmStatusReducer = (set: any): DmStatusActions => {
 
       const boardData: DmStatusBoardType[] = data.data.map(
         (item: DmStatusDataType) => {
-          const regionText = cityCd.find((city) => item.region === city.val);
+          const regionText = item.sidoNm; //cityCd.find((city) => item.region === city.val);
           const sewage = item.sewage;
           const rainwater = item.rainwater;
           const reclaimed = item.reclaimed;
           const sewageCnt = item.sewageCnt;
           const rainwaterCnt = item.rainwaterCnt;
           const reclaimedCnt = item.reclaimedCnt;
-          console.log("regionText ", regionText);
-          if (regionText && regionText.text) {
+          
             return {
-              region: regionText ? regionText.text : item.region,
-              sewage: sewageCnt + "(" + sewage + ")",
-              rainwater: rainwaterCnt + "(" + rainwater + ")",
-              reclaimed: reclaimedCnt + "(" + reclaimed + ")",
+              region: regionText ? regionText : item.region,
+              sewage: sewageCnt + "(" + sewage.toLocaleString() + ")",
+              rainwater: rainwaterCnt + "(" + rainwater.toLocaleString() + ")",
+              reclaimed: reclaimedCnt + "(" + reclaimed.toLocaleString() + ")",
             };
-         }
         }
       ).filter((item): item is DmStatusBoardType => item !== undefined);
 

apps/dm/app/store/wrStatus/type.ts

@@ -1,14 +1,16 @@
 export type DmStatusDataType = {
-  region: string;
+  sidoNm: string; // 시도명
+  region: string; // 시도코드
   sewage: string;
   rainwater: string;
   reclaimed: string;
-  sewageCnt:string
-  rainwaterCnt:string
-  reclaimedCnt:string
+  sewageCnt:string;
+  rainwaterCnt:string;
+  reclaimedCnt:string;
 };
 
 export type DmStatusBoardType = {
+  sidoNm: string; // 시도명
   region: string;
   sewage: string;
   rainwater: string;

apps/dm/components/ui/api/index.ts

@@ -1,23 +1,33 @@
 //8880
 import { AUTH_USER_ID, CLAIM_NAME } from "@/src/shared/config";
-import { DEV_URL_FO, DEV_URL_WR } from "../config";
 import { getCookie } from "@common/components/lib/cookie";
 
+
 const tokenId = getCookie(AUTH_USER_ID);
 const Authorization = getCookie(CLAIM_NAME);
 
 export const fetchType = {
   COMMON: "common",
   WR: "wr",
-  FO:'fo'
+  FO: "fo",
+  SN: "sn"
 };
 
+const API_VERSION = "/api/v1"
+const servers = {
+  common: "",
+  local: "",
+  fo: "/operation-service" + API_VERSION,
+  wr: "/reuse-service" + API_VERSION,
+  sn: "/sewerage-service" + API_VERSION,
+}
+
 interface RequestParams {
   [key: string]: unknown;
 }
 
 export const getFetch = async (type: string, url: string) => {
-  const baseUrl = type === fetchType.FO ? DEV_URL_FO : DEV_URL_WR;
+  const baseUrl = servers[type];
   const response = await fetch(baseUrl + url, {
     method: "GET",
     headers: {
@@ -35,7 +45,8 @@ export const getFetch = async (type: string, url: string) => {
 };
 
 export const postFetch = async (url: string, params: RequestParams) => {
-  const response = await fetch(DEV_URL_WR + url, {
+  const baseUrl = servers[fetchType.WR];
+  const response = await fetch(baseUrl + url, {
     method: "POST",
     headers: {
       "Content-Type": "application/json",
@@ -52,7 +63,8 @@ export const postFetch = async (url: string, params: RequestParams) => {
 };
 
 export const putFetch = async (url: string, params: RequestParams) => {
-  const response = await fetch(DEV_URL_WR + url, {
+  const baseUrl = servers[fetchType.WR];
+  const response = await fetch(baseUrl + url, {
     method: "PUT",
     headers: {
       "Content-Type": "application/json",
@@ -69,7 +81,8 @@ export const putFetch = async (url: string, params: RequestParams) => {
 };
 
 export const deleteFetch = async (url: string, params: RequestParams) => {
-  const response = await fetch(DEV_URL_WR + url, {
+  const baseUrl = servers[fetchType.WR];
+  const response = await fetch(baseUrl + url, {
     method: "DELETE",
     headers: {
       "Content-Type": "application/json",

apps/dm/components/ui/sdmInfoInsertForm/component.tsx

@@ -950,7 +950,7 @@ export function SdmInfoRegForm({
           body={
             <ModalSimilarPage sply={sply} usageCd={usageCd} money={money} />
           }
-          bodyClass="sm:max-w-[100vw] w-[1400px] h-[900px]"
+          bodyClass="sm:max-w-[100vw] w-[1400px] h-[100dvh] max-h-[900px] overflow-y-auto overflow-x-hidden"
           open={isSimilarCase}
           onOpenChange={(open) => !open && setIsSimilarCase(false)}
           noHeaderYn="Y"

apps/dm/middleware.ts

@@ -1,13 +1,13 @@
 import { NextRequest, NextResponse } from "next/server";
 import { CLAIM_NAME, AUTH_USER_ID } from "./src/shared/config";
-import { SERVER_API_FO_URL, SERVER_API_WR_URL } from "./src/shared/config/env";
+// import { SERVER_API_FO_URL, SERVER_API_WR_URL } from "./src/shared/config/env";
 
 // const CLAIM_NAME = "Authorization";
 // const AUTH_USER_ID = "token-id";
 const serverApiUrl = process.env.NEXT_PUBLIC_CS_SERVER_API_URL;
 const GEOSERVER_URL = process.env.NEXT_PUBLIC_GEOSERVER_URL || "";
 const LX_GEOSERVER_URL = process.env.NEXT_PUBLIC_LX_GEOSERVER_URL || "";
-const SEWERAGE_API_URL = process.env.NEXT_PUBLIC_SEWERAGE_API_URL || "";
+const GATEWAY_URL = process.env.NEXT_PUBLIC_GATEWAY_URL || "";
 const BUSINESS_JUSO_API_URL = process.env.NEXT_PUBLIC_FINDADRESS_URL || "";
 const AdressKey = process.env.NEXT_PRIVATE_WR_ADDRESS_KEY || "";
 
@@ -112,7 +112,7 @@ export function middleware(req: NextRequest) {
       const url = req.nextUrl.clone();
       url.searchParams.set("TYPENAME", typename.replace("hasudo:", ""));
       queryParams = url.searchParams.toString();
-      newUrl = `${SEWERAGE_API_URL}/api/v1/map/geometry${queryParams ? `?${queryParams}` : ""}`;
+      newUrl = `${GATEWAY_URL}/api/v1/map/geometry${queryParams ? `?${queryParams}` : ""}`;
     }
 
     console.log(`[Middleware] Rewriting from '/geoserver' path to: ${newUrl}`);
@@ -121,24 +121,17 @@ export function middleware(req: NextRequest) {
 
   if (pathname.startsWith("/reuse-service")) {
     const queryParams = searchParams.toString();
-    const newUrl = `${SERVER_API_WR_URL}${pathname.replace("/reuse-service", "")}${queryParams ? `?${queryParams}` : ""
-      }`;
+    const newUrl = `${GATEWAY_URL}${pathname}${queryParams ? `?${queryParams}` : ""}`;
     console.log(`[Middleware] Rewriting from '/reuse-service' path to: ${newUrl}`);
     return NextResponse.rewrite(new URL(newUrl));
-  }
-
-  if (pathname.startsWith("/operation-service")) {
+  } else if (pathname.startsWith("/operation-service")) {
     const queryParams = searchParams.toString();
-    const newUrl = `${SERVER_API_FO_URL}${pathname.replace("/operation-service", "")}${queryParams ? `?${queryParams}` : ""
-      }`;
+    const newUrl = `${GATEWAY_URL}${pathname}${queryParams ? `?${queryParams}` : ""}`;
     console.log(`[Middleware] Rewriting from '/operation-service' path to: ${newUrl}`);
     return NextResponse.rewrite(new URL(newUrl));
-  }
-
-  if (pathname.startsWith("/sewerage-service")) {
+  } else if (pathname.startsWith("/sewerage-service")) {
     const queryParams = searchParams.toString();
-    const newUrl = `${SEWERAGE_API_URL}${pathname.replace("/sewerage-service", "")}${queryParams ? `?${queryParams}` : ""
-      }`;
+    const newUrl = `${GATEWAY_URL}${pathname}${queryParams ? `?${queryParams}` : ""}`;
     console.log(`[Middleware] Rewriting from '/sewerage-service' path to: ${newUrl}`);
     return NextResponse.rewrite(new URL(newUrl));
   }

apps/dm/next.config.ts

@@ -5,6 +5,9 @@ const subDomain =
 
 const nextConfig: NextConfig = {
   output: "standalone",
+  experimental: {
+    proxyTimeout: 600000,
+  },
   async rewrites() {
     return {
       beforeFiles: [

apps/fo/.env.local

@@ -5,9 +5,10 @@ NEXT_PUBLIC_AUTH_USER_ID = token-id
 NEXT_PUBLIC_ACCESS_TOKEN = access-token
 NEXT_PUBLIC_REFRESH_TOKEN = refresh-token
 NEXT_PUBLIC_PROXY_HOST = http://localhost:3000
+NEXT_PUBLIC_SUB_DOMAIN = http://localhost:13000
 #NEXT_PUBLIC_CM_LOGIN_PAGE_URL = http://localhost:3001/auth/login
 NEXT_PUBLIC_SERVER_API_URL = http://con.mind-one.co.kr:11083/operation-service
-NEXT_PUBLIC_WR_SERVER_API_URL = http://con.mind-one.co.kr:11083/reuse-service/
+NEXT_PUBLIC_WR_SERVER_API_URL = http://con.mind-one.co.kr:11083/reuse-service
 NEXT_PUBLIC_CS_SERVER_API_URL = http://dev.onasys.co.kr:8000
 NEXT_PUBLIC_GEOSERVER_URL = https://hasudo.geo.rsonesoft.com/geoserver
 NEXT_PUBLIC_LX_GEOSERVER_URL = http://con.mind-one.co.kr:11306/geoserver
@@ -17,6 +18,7 @@ NEXT_PUBLIC_NGII_URL = https://map.ngii.go.kr
 NEXT_PUBLIC_NGII_PARAM = 04trYP9_xwLAfALjwZ-B8g&service=WMTS&request=GetTile&version=1.0.0&format=image/png&layer=korean_map&style=korean&tilematrixset=korean&tilematrix={z}&tilecol={x}&tilerow={y}
 NEXT_PUBLIC_CM_LOGIN_PAGE_URL = http://dev.onasys.co.kr:3000/auth/login
 
+
 #NEXT_PUBLIC_SERVER_API_URL = http://localhost:8883/operation-service
 
 REACT_EDITOR=atom

apps/fo/.env.mindone

@@ -5,6 +5,7 @@ NEXT_PUBLIC_AUTH_USER_ID = token-id
 NEXT_PUBLIC_ACCESS_TOKEN = access-token
 NEXT_PUBLIC_REFRESH_TOKEN = refresh-token
 NEXT_PUBLIC_PROXY_HOST = http://con.mind-one.co.kr:11300
+NEXT_PUBLIC_SUB_DOMAIN = http://con.mind-one.co.kr:13000
 NEXT_PUBLIC_CM_LOGIN_PAGE_URL = http://dev.onasys.co.kr:3000/auth/login
 #NEXT_PUBLIC_SERVER_API_URL = http://con.mind-one.co.kr:11082
 NEXT_PUBLIC_SERVER_API_URL = http://con.mind-one.co.kr:11083/operation-service

apps/fo/.env.production

@@ -8,13 +8,12 @@ NEXT_PUBLIC_REFRESH_TOKEN = refresh-token
 #NEXT_PUBLIC_PROXY_HOST = https://devlarva.hasuon.or.kr
 #NEXT_PUBLIC_CM_LOGIN_PAGE_URL = https://devqueen.hasuon.or.kr/auth/login
 NEXT_PUBLIC_SERVER_API_URL =  http://apigateway.iipbs-was.svc.cluster.local:8000/operation-service
-NEXT_PUBLIC_FO_SERVER_API_URL =  http://apigateway.iipbs-was.svc.cluster.local:8000/operation-service/api/v1
+NEXT_PUBLIC_WR_SERVER_API_URL = http://apigateway.iipbs-was.svc.cluster.local:8000/reuse-service
 NEXT_PUBLIC_CS_SERVER_API_URL = http://apigateway.iipbs-was.svc.cluster.local:8000
 NEXT_PUBLIC_CS_TUS_UPLOAD = /attach-service/api/v1/tus/upload
 NEXT_PUBLIC_GEOSERVER_URL = http://172.29.143.87:8080/geoserver
 NEXT_PUBLIC_LX_GEOSERVER_URL = http://172.29.143.87:8080/geoserver_swl
-NEXT_PUBLIC_WR_SERVER_API_URL = http://apigateway.iipbs-was.svc.cluster.local:8000/reuse-service/api/v1
-NEXT_PUBLIC_SEWERAGE_API_URL = http://apigateway.iipbs-was.svc.cluster.local:8000/sewerage-service
 NEXT_PUBLIC_DC_URL     = http://apigateway.iipbs-was.svc.cluster.local:8000/dc-service
-NEXT_PUBLIC_NGII_URL = http://172.29.143.87
+NEXT_PUBLIC_SEWERAGE_API_URL = http://apigateway.iipbs-was.svc.cluster.local:8000/sewerage-service
+NEXT_PUBLIC_NGII_URL = http://172.29.143.87/poiact
 NEXT_PUBLIC_NGII_PARAM = BDE2BEF39DAFEC293AB6730150F222AC&service=WMTS&request=GetTile&version=1.0.0&format=image/png&layer=korean_map&style=korean&tilematrixset=korean&tilematrix={z}&tilecol={y}&tilerow={x}

apps/fo/app/auth/login/route.ts

@@ -2,7 +2,7 @@ import { NextRequest, NextResponse } from "next/server";
 
 export async function GET(request: NextRequest) {
   const hostname = request.nextUrl.hostname;
-  const redirectUrl = process.env.NEXT_PUBLIC_CM_LOGIN_PAGE_URL || "https://queen.hasuon.or.kr";
+  const redirectUrl = process.env.NEXT_PUBLIC_CM_LOGIN_PAGE_URL || "https://portal.hasuon.or.kr";
 
   if (hostname === "localhost" || hostname === "127.0.0.1" || hostname === "con.mind-one.co.kr") {
     return NextResponse.redirect(new URL("/", request.url));  // 로컬 및 개발 환경

apps/fo/app/components/common/CalcRainEffect.tsx

@@ -9,67 +9,111 @@
  * @author jsyang
  */
 
-export default function CalcRainEffect(data : any, weather='ALL') {
-	/* console.log("%c Calculate RainEffect !" , "background:blue;color:white");
-	console.log("%c Data Length :"+data.length+" Weather : "+weather , "background:yellow;color:blue");*/
-  	// 강우영향일 계산 (강우량이 3 초과이면 무조건 강우영향일)
-	for(let idx = 0; idx < data.length; idx++) {
+export default function CalcRainEffect(data: any, weather = 'ALL') {
+	const rtnDataAll: any = [];
+	const rtnDataSunny: any = [];
+	const rtnDataRain: any = [];
+	let rtnData: any = [];
+	let rainEffectStd = 0;
+	for (let idx = 0; idx < data.length; idx++) {
 		const item = data[idx];
-		if(item){
-			if(item.infoRnDay && Number(item.infoRnDay) >= 3) { // 강우량이 3 이상인 경우
-				item.rainEffectDay = 1;
-			} else {
-				item.rainEffectDay = 0;
-			}
-
-			if(item.infoRnDay == 'x'){
-				item.infoRnDay = '0.0';
-				item.toBeInfoRnDay = '0.0';
-			}else{
-				item.infoRnDay = Number(item.infoRnDay).toFixed(1);
-				item.toBeInfoRnDay = Number(item.infoRnDay).toFixed(1);
-			}
+		if (item.infoRnDay == null || item.infoRnDay == 'x' || item.infoRnDay == '') item.infoRnDay = 0;
+		if (Number(item.infoRnDay) >= 3) { // 강우일
+			rainEffectStd = 2;
+			item.toBeInfoRnDay = item.infoRnDay;
+		} else {
+			rainEffectStd--;
 		}
-	}
 
-	// 이틀 전, 하루 전이 강우영향일(3 이상)인 경우 해당 날도 강우영향일로 설정
-	for(let idx = 0; idx < data.length; idx++) {
-		if(data[idx]) {
-			// 하루 전이 강우영향일(3 이상)인 경우
-			if(idx > 0 && data[idx-1]?.infoRnDay && Number(data[idx-1]?.infoRnDay) >= 3) {
-				data[idx]!.rainEffectDay = 1;
-			}
-			// 이틀 전이 강우영향일(3 이상)인 경우
-			if(idx > 1 && data[idx-2]?.infoRnDay && Number(data[idx-2]?.infoRnDay) >= 3) {
-				data[idx]!.rainEffectDay = 1;
-			}
-		}
-	}
-
-	for(let idx = 0; idx < data.length; idx++) {
-		if(data[idx] && data[idx]?.rainEffectDay === 1) {
-			if(idx > 1){
-				// 전날 비가 왔고 오늘 강우량 3미만인 경우 전날 강우량이 3이상이면 오늘 toBeInfoRnDay을 전날 강우량으로 설정
-				if(data[idx-1]?.infoRnDay && Number(data[idx]?.infoRnDay) < 3 && Number(data[idx-1]?.infoRnDay.toString().trim()) >= 3) {
-					data[idx]!.toBeInfoRnDay = data[idx-1]!.infoRnDay;
-				}
-			}
-			if(idx > 2){
+		if (rainEffectStd < 0) { // 청천일
+			item.rainEffectDay = 0;
+			rtnDataSunny.push(item);
+		} else if (rainEffectStd >= 0) { // 강우일 + 강우영향일
+			item.rainEffectDay = 1;
+			if (idx > 2) {
 				// 전전날 비가 왔고 오늘 강우량 3미만인 경우 전전날 강우량이 3이상이면 오늘 toBeInfoRnDay을 전전날 강우량으로 설정
-				if(data[idx-2]?.infoRnDay && Number(data[idx]?.infoRnDay) < 3 && Number(data[idx-2]?.infoRnDay.toString().trim()) >= 3) {
-					data[idx]!.toBeInfoRnDay = data[idx-2]!.infoRnDay;
+				if (data[idx - 2]?.infoRnDay && Number(data[idx]?.infoRnDay) < 3 && Number(data[idx - 2]?.infoRnDay.toString().trim()) >= 3) {
+					data[idx]!.toBeInfoRnDay = data[idx - 2]!.infoRnDay;
 				}
 			}
+			if (idx > 1) {
+				// 전날 비가 왔고 오늘 강우량 3미만인 경우 전날 강우량이 3이상이면 오늘 toBeInfoRnDay을 전날 강우량으로 설정
+				if (data[idx - 1]?.infoRnDay && Number(data[idx]?.infoRnDay) < 3 && Number(data[idx - 1]?.infoRnDay.toString().trim()) >= 3) {
+					data[idx]!.toBeInfoRnDay = data[idx - 1]!.infoRnDay;
+				}
+			} 
+			rtnDataRain.push(item);
 		}
+
+		rtnDataAll.push(item);
 	}
 
-	let rtnData : any = [];
+
+	// // 강우영향일 계산 (강우량이 3 초과이면 무조건 강우영향일)
+	// for(let idx = 0; idx < data.length; idx++) {
+	// 	const item = data[idx];
+	// 	if(item){
+	// 		if(item.infoRnDay && Number(item.infoRnDay) >= 3) { // 강우량이 3 이상인 경우
+	// 			item.rainEffectDay = 1;
+	// 		} else {
+	// 			item.rainEffectDay = 0;
+	// 		}
+
+	// 		if(item.infoRnDay == 'x'){
+	// 			item.infoRnDay = '0.0';
+	// 			item.toBeInfoRnDay = '0.0';
+	// 		}else{
+	// 			item.infoRnDay = Number(item.infoRnDay).toFixed(1);
+	// 			item.toBeInfoRnDay = Number(item.infoRnDay).toFixed(1);
+	// 		}
+	// 	}
+	// }
+
+	// // 이틀 전, 하루 전이 강우영향일(3 이상)인 경우 해당 날도 강우영향일로 설정
+	// for(let idx = 0; idx < data.length; idx++) {
+	// 	if(data[idx]) {
+	// 		// 하루 전이 강우영향일(3 이상)인 경우
+	// 		if(idx > 0 && data[idx-1]?.infoRnDay && Number(data[idx-1]?.infoRnDay) >= 3) {
+	// 			data[idx]!.rainEffectDay = 1;
+	// 		}
+	// 		// 이틀 전이 강우영향일(3 이상)인 경우
+	// 		if(idx > 1 && data[idx-2]?.infoRnDay && Number(data[idx-2]?.infoRnDay) >= 3) {
+	// 			data[idx]!.rainEffectDay = 1;
+	// 		}
+	// 	}
+	// }
+
+	// for(let idx = 0; idx < data.length; idx++) {
+	// 	if(data[idx] && data[idx]?.rainEffectDay === 1) {
+	// 		if(idx > 1){
+	// 			// 전날 비가 왔고 오늘 강우량 3미만인 경우 전날 강우량이 3이상이면 오늘 toBeInfoRnDay을 전날 강우량으로 설정
+	// 			if(data[idx-1]?.infoRnDay && Number(data[idx]?.infoRnDay) < 3 && Number(data[idx-1]?.infoRnDay.toString().trim()) >= 3) {
+	// 				data[idx]!.toBeInfoRnDay = data[idx-1]!.infoRnDay;
+	// 			}
+	// 		}
+	// 		if(idx > 2){
+	// 			// 전전날 비가 왔고 오늘 강우량 3미만인 경우 전전날 강우량이 3이상이면 오늘 toBeInfoRnDay을 전전날 강우량으로 설정
+	// 			if(data[idx-2]?.infoRnDay && Number(data[idx]?.infoRnDay) < 3 && Number(data[idx-2]?.infoRnDay.toString().trim()) >= 3) {
+	// 				data[idx]!.toBeInfoRnDay = data[idx-2]!.infoRnDay;
+	// 			}
+	// 		}
+	// 	}
+	// }
+
+	// if (weather === 'ALL') {
+	// 	rtnData = data;
+	// } else if (weather === 'SUNNY') {
+	// 	rtnData = data.filter((item: any) => item.rainEffectDay === 0);
+	// } else {
+	// 	rtnData = data.filter((item: any) => item.rainEffectDay === 1);
+	// }
+
 	if (weather === 'ALL') {
-		rtnData = data;
+		rtnData = rtnDataAll;
 	} else if (weather === 'SUNNY') {
-		rtnData = data.filter((item: any) => item.rainEffectDay === 0);
+		rtnData = rtnDataSunny;
 	} else {
-		rtnData = data.filter((item: any) => item.rainEffectDay === 1);
+		rtnData = rtnDataRain;
 	}
 	return rtnData;
 }

apps/fo/app/components/common/DataForm.tsx

@@ -4,12 +4,39 @@
   item: Record<string, unknown>;
 }
 
-export const roundNumber = (value : any, decimals: number) => {
+/**
+ * yyyymm 형태의 문자열을 받아 해당 월의 일수를 반환
+ * @param {string} yyyymm - 예: "202502", "202412"
+ * @returns {number} 해당 월의 일수 (예: 28, 29, 30, 31)
+ */
+export const getDaysInMonth = (yyyymm: string) => {
+  if (typeof yyyymm !== 'string' || yyyymm.length !== 6) {
+    throw new Error("입력은 'yyyymm' 형식의 문자열이어야 합니다. 예: '202502'");
+  }
+
+  const year = parseInt(yyyymm.slice(0, 4), 10);   // "2025" -> 2025
+  const month = parseInt(yyyymm.slice(4, 6), 10);  // "02"   -> 2
+
+  if (isNaN(year) || isNaN(month) || month < 1 || month > 12) {
+    throw new Error("유효한 년/월이 아닙니다.");
+  }
+
+  // Date(year, month, 0) -> 전달의 마지막 날
+  // month에 '다음달'을 넣고, 일(day)에 0을 주면 해당 월의 마지막 날짜가 됨
+  return new Date(year, month, 0).getDate();
+}
+
+export const roundNumber = (value: any, decimals: number) => {
   if (typeof value === 'number') {
     return addCommas((Math.round(value * Math.pow(10, decimals)) / Math.pow(10, decimals)).toFixed(decimals));
-  } else if (typeof value === 'string' && !isNaN(Number(value))) {
-    return addCommas(Number(value).toFixed(decimals));
+  } else if (typeof value === 'string') {
+    // 콤마가 포함된 문자열 처리 ('1,083.0' 같은 경우)
+    const cleanedValue = value.replace(/,/g, '');
+    if (!isNaN(Number(cleanedValue))) {
+      return addCommas(Number(cleanedValue).toFixed(decimals));
+    }
   }
+  return value; // 변환 불가능한 경우 원래 값 반환
 }
 
 export const addCommas = (value: string | number): any => {
@@ -18,48 +45,48 @@ export const addCommas = (value: string | number): any => {
       index === 0 ? part : part.replace(/(\d{3})/g, '$1,')
     ).join('.');
   } else if (typeof value === 'string') {
-    return value.includes('.')?value.split('.').map((part, index) =>
+    return value.includes('.') ? value.split('.').map((part, index) =>
       index === 0 ? part.replace(/\B(?=(\d{3})+(?!\d))/g, ",") : part
-    ).join('.'):String(value).replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+    ).join('.') : String(value).replace(/\B(?=(\d{3})+(?!\d))/g, ",");
   }
 }
 
 export default function DataForm({ type, column, item }: DataFormProps) {
-  if(item) {
+  if (item) {
     const value = item[column];
-    switch(type){
+    switch (type) {
       case 'date':
-        if(value && typeof value === 'string' && value.length >= 8)
+        if (value && typeof value === 'string' && value.length >= 8 && !value.includes('-'))
           item[column] = value.substring(0, 4) + "-" + value.substring(4, 6) + "-" + value.substring(6, 8);
-      break;
+        break;
       case 'number':
-        if(value && value != '') {
+        if (value && value != '') {
           item[column] = value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
         }
-      break;
+        break;
       case 'float0':
-        if(value) {
-          item[column] = item[column] = String(value).includes('.')?String(Math.round(parseFloat(value.toString().replace(/,/g, '')) * 1) / 1).split('.').map((part, index) => 
-                            index === 0 ? part.replace(/\B(?=(\d{3})+(?!\d))/g, ",") : part
-                          ).join('.')
-                          : String(value).replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+        if (value) {
+          item[column] = item[column] = String(value).includes('.') ? String(Math.round(parseFloat(value.toString().replace(/,/g, '')) * 1) / 1).split('.').map((part, index) =>
+            index === 0 ? part.replace(/\B(?=(\d{3})+(?!\d))/g, ",") : part
+          ).join('.')
+            : String(value).replace(/\B(?=(\d{3})+(?!\d))/g, ",");
         }
-      break;
+        break;
       case 'float1':
-        if(value) {
+        if (value) {
           item[column] = roundNumber(value, 1);
         }
-      break;
+        break;
       case 'float2':
-        if(value) {
+        if (value) {
           item[column] = roundNumber(value, 2);
         }
-      break;
+        break;
       case 'float3':
-        if(value) {
+        if (value) {
           item[column] = roundNumber(value, 3);
         }
-      break;
+        break;
     }
   }
 }

apps/fo/app/components/common/FacilityTermModalHeader.tsx

@@ -4,14 +4,14 @@ import ListDiv from '@common/business_components/ui/list_div';
 import { Table, TableCell, TableHead, TableRow } from '@common/components/ui';
 import { useCallback, useEffect, useRef, useState } from 'react';
 
-type FacilityTermModalHeaderProps<T extends { msrDt: string }> = {
-  fcltyCd : string;
+type FacilityTermModalHeaderProps<T extends { msrDt: string }> = { // T는 반드시 msrDt: string 필드를 가져야 한다
+  fcltyCd: string;
   fcltyName: string;
   tabName: string;
   searchYear: string;
   searchList: T[];
   ref: React.RefObject<ReturnType<T>>;
-  queryClick:(returnType:ReturnType<T>) => void;
+  queryClick: (returnType: ReturnType<T>) => void;
 }
 
 export type ReturnType<T> = {
@@ -21,27 +21,28 @@ export type ReturnType<T> = {
   filteredList: T[];
 }
 
-export default function FacilityTermModalHeader<T extends { msrDt: string }>({ 
+export default function FacilityTermModalHeader<T extends { msrDt: string }>({
   searchList,
-  fcltyName, 
-  tabName, 
+  fcltyName,
+  tabName,
   searchYear,
   queryClick,
   ref
 }: FacilityTermModalHeaderProps<T & { msrDt: string }>) {
-  const {Common} = useFoStore((state) => state);
+  const { Common } = useFoStore((state) => state);
   const { selectFlowPanel } = Common;
   const [startDate, setStartDate] = useState<Date>(new Date(Number(searchYear), 0, 1));
   const [endDate, setEndDate] = useState<Date>(new Date(Number(searchYear), 11, 31));
   const startPickerRef = useRef<HTMLDivElement>(null);
   const endPickerRef = useRef<HTMLDivElement>(null);
-  const [flowPanel, setFlowPanel] = useState<string>(selectFlowPanel[0]?.val ?? '00');
+  const [flowPanel, setFlowPanel] = useState<string>(selectFlowPanel[0]?.val ?? '0'); // 강수구분 : 초기값 "전체"
   const [copySearchList, setCopySearchList] = useState<T[]>(searchList);
   const [standSearchList, setStandSearchList] = useState<T[]>(searchList);
 
   const isDateInRanges = (date: Date) => {
     const standYear = parseInt(searchYear);
-    const dateRanges:{start:Date, end:Date}[] = [];
+    const isLeapYear = (standYear % 4 === 0 && standYear % 100 !== 0) || (standYear % 400 === 0);
+    const dateRanges: { start: Date, end: Date }[] = [];
 
     if (tabName.includes("_summer")) {
       dateRanges.push({
@@ -51,7 +52,7 @@ export default function FacilityTermModalHeader<T extends { msrDt: string }>({
     } else if (tabName.includes("_winter")) {
       dateRanges.push({
         start: new Date(standYear, 0, 1),
-        end: new Date(standYear, 1, 28)
+        end: new Date(standYear, 1, isLeapYear ? 29 : 28)
       });
     } else {
       dateRanges.push({
@@ -70,67 +71,69 @@ export default function FacilityTermModalHeader<T extends { msrDt: string }>({
   useEffect(() => {
     let startDate = new Date(Number(searchYear), 0, 1);
     let endDate = new Date(Number(searchYear), 11, 31);
+    const standYear = Number(searchYear);
+    const isLeapYear = (standYear % 4 === 0 && standYear % 100 !== 0) || (standYear % 400 === 0);
 
-    if(tabName.includes("_summer")) {
-      startDate = new Date(Number(searchYear), 5, 1);
-      endDate = new Date(Number(searchYear), 7, 31);
+    if (tabName.includes("_summer")) { // 하절기
+      startDate = new Date(Number(searchYear), 5, 1); // 6월 ~
+      endDate = new Date(Number(searchYear), 7, 31); // 8월
       setStartDate(startDate);
       setEndDate(endDate);
-    } else if (tabName.includes("_winter")) {
-      startDate = new Date(Number(searchYear), 0, 1);
-      endDate = new Date(Number(searchYear), 1, 28);
+    } else if (tabName.includes("_winter")) { // 동절기
+      startDate = new Date(Number(searchYear), 0, 1); // 1월 ~
+      endDate = new Date(Number(searchYear), 1, isLeapYear ? 29 : 28); // 2월
       setStartDate(startDate);
       setEndDate(endDate);
-    } else {
+    } else { // 연간
       startDate = new Date(Number(searchYear), 0, 1);
       endDate = new Date(Number(searchYear), 11, 31);
       setStartDate(startDate);
       setEndDate(endDate);
     }
-    
+
     let filteredData: T[] = [];
 
-    if(tabName.includes("_rain")) {
+    if (tabName.includes("_rain")) { // 강우시
       filteredData = searchList.filter((item) => {
         const itemDate = new Date((item as T & { msrDt: string }).msrDt);
         const itemDateOnly = new Date(itemDate.getFullYear(), itemDate.getMonth(), itemDate.getDate());
         const startDateOnly = new Date(startDate.getFullYear(), startDate.getMonth(), startDate.getDate());
         const endDateOnly = new Date(endDate.getFullYear(), endDate.getMonth(), endDate.getDate());
         const rainEffectDay = (item as T & { rainEffectDay: number }).rainEffectDay;
-        
-        if(flowPanel === '2'){
+
+        if (flowPanel === '2') { //3~10mm미만
           const infoRnDay = (item as T & { toBeInfoRnDay: number }).toBeInfoRnDay;
           return (itemDateOnly >= startDateOnly && itemDateOnly <= endDateOnly) && infoRnDay >= 3 && infoRnDay < 10;
-        } else if(flowPanel === '3'){
+        } else if (flowPanel === '3') { //10~20mm미만
           const infoRnDay = (item as T & { toBeInfoRnDay: number }).toBeInfoRnDay;
           return (itemDateOnly >= startDateOnly && itemDateOnly <= endDateOnly) && infoRnDay >= 10 && infoRnDay < 20;
-        } else if(flowPanel === '4'){
+        } else if (flowPanel === '4') { //20~30mm미만
           const infoRnDay = (item as T & { toBeInfoRnDay: number }).toBeInfoRnDay;
           return (itemDateOnly >= startDateOnly && itemDateOnly <= endDateOnly) && infoRnDay >= 20 && infoRnDay < 30;
-        } else if(flowPanel === '5'){
+        } else if (flowPanel === '5') { //30~40mm미만
           const infoRnDay = (item as T & { toBeInfoRnDay: number }).toBeInfoRnDay;
           return (itemDateOnly >= startDateOnly && itemDateOnly <= endDateOnly) && infoRnDay >= 30 && infoRnDay < 40;
-        } else if(flowPanel === '6'){
+        } else if (flowPanel === '6') { //40~50mm미만
           const infoRnDay = (item as T & { toBeInfoRnDay: number }).toBeInfoRnDay;
           return (itemDateOnly >= startDateOnly && itemDateOnly <= endDateOnly) && infoRnDay >= 40 && infoRnDay < 50;
-        } else if(flowPanel === '7'){
+        } else if (flowPanel === '7') { //50~60mm미만
           const infoRnDay = (item as T & { toBeInfoRnDay: number }).toBeInfoRnDay;
           return (itemDateOnly >= startDateOnly && itemDateOnly <= endDateOnly) && infoRnDay >= 50 && infoRnDay < 60;
-        } else if(flowPanel === '8'){
+        } else if (flowPanel === '8') {
           const infoRnDay = (item as T & { toBeInfoRnDay: number }).toBeInfoRnDay;
           return (itemDateOnly >= startDateOnly && itemDateOnly <= endDateOnly) && infoRnDay >= 60;
         } else {
-          return (itemDateOnly >= startDateOnly && itemDateOnly <= endDateOnly) && (rainEffectDay ===1);
+          return (itemDateOnly >= startDateOnly && itemDateOnly <= endDateOnly) && (rainEffectDay === 1);
         }
       });
-    } else if(tabName.includes("_chuncheon")) {
+    } else if (tabName.includes("_chuncheon")) { // 청천시
       filteredData = searchList.filter((item) => {
         const itemDate = new Date((item as T & { msrDt: string }).msrDt);
         const itemDateOnly = new Date(itemDate.getFullYear(), itemDate.getMonth(), itemDate.getDate());
         const startDateOnly = new Date(startDate.getFullYear(), startDate.getMonth(), startDate.getDate());
         const endDateOnly = new Date(endDate.getFullYear(), endDate.getMonth(), endDate.getDate());
         const rainEffectDay = (item as T & { rainEffectDay: number }).rainEffectDay;
-        return (itemDateOnly >= startDateOnly && itemDateOnly <= endDateOnly) && rainEffectDay==0;
+        return (itemDateOnly >= startDateOnly && itemDateOnly <= endDateOnly) && rainEffectDay == 0;
       });
     } else {
       filteredData = searchList.filter((item) => {
@@ -146,7 +149,7 @@ export default function FacilityTermModalHeader<T extends { msrDt: string }>({
   }, [searchList, searchYear, tabName, flowPanel]);
 
   const handleStartDateSelect = (day: Date | undefined) => {
-    if(day && day > endDate) {
+    if (day && day > endDate) {
       alert('종료일은 시작일 이전일 수 없습니다.');
       return;
     }
@@ -169,7 +172,7 @@ export default function FacilityTermModalHeader<T extends { msrDt: string }>({
   };
 
   const handleEndDateSelect = (day: Date | undefined) => {
-    if(day && day < startDate) {
+    if (day && day < startDate) {
       alert('종료일은 시작일 이후일 수 없습니다.');
       return;
     }
@@ -190,7 +193,7 @@ export default function FacilityTermModalHeader<T extends { msrDt: string }>({
     });
     setCopySearchList(filteredData);
   };
-  
+
   const fncSetFilteredList = useCallback(() => {
     queryClick({
       startDate: startDate,
@@ -203,9 +206,9 @@ export default function FacilityTermModalHeader<T extends { msrDt: string }>({
   useEffect(() => {
     fncSetFilteredList();
   }, [fncSetFilteredList]);
-  
+
   useEffect(() => {
-    if(ref && ref.current) {
+    if (ref && ref.current) {
       const customRef = ref.current;
       customRef.startDate = startDate;
       customRef.endDate = endDate;
@@ -222,18 +225,18 @@ export default function FacilityTermModalHeader<T extends { msrDt: string }>({
             <TableRow className="!h-[20px]">
               <TableHead className="w-[120px]">{'시설명'}</TableHead>
               {tabName === "tab_term_rain" ? <TableCell className="w-[300px]">{fcltyName}</TableCell> :
-              <TableCell className="w-[380px]">{fcltyName}</TableCell>}
+                <TableCell className="w-[380px]">{fcltyName}</TableCell>}
               {tabName === "tab_term_rain" && (
                 <>
                   <TableHead className="w-[120px]">{'강수구분'}</TableHead>
                   <TableCell className="w-[250px]">
                     <div className="justify-center">
-                      <SelectBox 
-                        selectArray={selectFlowPanel} 
+                      <SelectBox
+                        selectArray={selectFlowPanel}
                         value={flowPanel}
                         onSelectValue={(val) => setFlowPanel(val.toString())}
-                        className="mx-3 w-[150px]" 
-                        label="" 
+                        className="mx-3 w-[150px]"
+                        label=""
                         selectClass="w-full p-1 border rounded bg-white"
                       />
                     </div>
@@ -244,7 +247,7 @@ export default function FacilityTermModalHeader<T extends { msrDt: string }>({
               <TableCell className="">
                 <div className="flex">
                   <div ref={startPickerRef} className="flex justify-center">
-                    <DatePickerRange 
+                    <DatePickerRange
                       mode="single"
                       selected={startDate}
                       onSelect={(date) => handleStartDateSelect(date as Date)}
@@ -258,7 +261,7 @@ export default function FacilityTermModalHeader<T extends { msrDt: string }>({
                     <DatePickerRange
                       mode="single"
                       selected={endDate}
-                      onSelect={(date) => handleEndDateSelect(date as Date)} 
+                      onSelect={(date) => handleEndDateSelect(date as Date)}
                       className="w-full p-1 border rounded bg-white"
                       disabled={(date) => !isDateInRanges(date)}
                       defaultMonth={endDate}

apps/fo/app/page.tsx

@@ -11,25 +11,20 @@ export default function Home() {
   const checkToken = getCookie(AUTH_USER_ID);
 
   useEffect(() => {
+    const hostname = window.location.hostname;
 
-    if (!checkToken) {
-      // 외부 URL로 이동해야 할 경우 location.replace를 사용합니다.
-      if (window.location.hostname.includes("hasuon.or.kr")) {
-        location.replace(process.env.NEXT_PUBLIC_CM_LOGIN_PAGE_URL||'/pages/dashboard');
-        return; // 페이지 이동 후에는 더 이상 로직을 실행하지 않습니다.
-      }
-
-      async function doLogin() {
-        try {
-          await LoginApi.login({ userId: "CLEANWATER", password: "gktneh12!@" });
-          router.push("/pages/dashboard"); // location.href 대신 router.push 사용
-        } catch (err) {
-          console.error("로그인 실패", err);
+    if (hostname === "localhost" || hostname === "127.0.0.1" || hostname === "con.mind-one.co.kr") {
+      if (!checkToken) {
+        async function doLogin() {
+          try {
+            await LoginApi.login({ userId: "CLEANWATER", password: "gktneh12!@" });
+            window.location.href = "/pages/dashboard";
+          } catch (err) {
+            console.error("로그인 실패", err);
+          }
         }
-      }
-      doLogin();
-    } else {
-      router.push("/pages/dashboard");
-    }
+        doLogin();
+      } else router.push("/pages/dashboard");
+    } else router.push("/pages/dashboard");
   }, []);
 }

apps/fo/app/pages/(with-layout)/dashboard/facilityInfo/page.tsx

@@ -271,7 +271,7 @@ export default function ProcessFacilitySearch({searchYear = '', fcltyList = []}:
                         (head.id === 'flowRate' && index === 0)?<TableCell rowSpan={5} className="text-center" style={{ whiteSpace: 'pre-line' }} key={head.id+index}>{el[head.id]}</TableCell>:
                         (head.id === 'flowRate' && index === 5)?<TableCell rowSpan={6} className="text-center" style={{ whiteSpace: 'pre-line' }} key={head.id+index}>{el[head.id]}</TableCell>:
                         (head.id === 'flowRate' && index === 11)?<TableCell rowSpan={2} className="text-center" style={{ whiteSpace: 'pre-line' }} key={head.id+index}>{el[head.id]}</TableCell>:
-                        (head.id === 'groundWaterAvg'||head.id === 'groundWaterSummer'||head.id === 'groundWaterWinter')&&(index === 0)?<TableCell rowSpan={7} className="text-right" style={{ whiteSpace: 'pre-line' }} key={head.id+index}>{el[head.id]}</TableCell>:
+                        (head.id === 'groundWaterAvg'||head.id === 'groundWaterSummer'||head.id === 'groundWaterWinter')&&(index === 0)?<TableCell rowSpan={7} className="text-right" style={{ whiteSpace: 'pre-line' }} key={head.id+index}>{Number.isNaN(el[head.id]) ? "" : el[head.id]}</TableCell>:
                         (head.id === 'groundWaterAvg'||head.id === 'groundWaterSummer'||head.id === 'groundWaterWinter')&&(index === 7)?<TableCell rowSpan={6} className="text-right" style={{ whiteSpace: 'pre-line' }} key={head.id+index}>{el[head.id]}</TableCell>:
                         (head.id === 'rdi'&&index === 0)?<TableCell rowSpan={7} className="text-right" style={{ whiteSpace: 'pre-line' }} key={head.id+index}>{el[head.id]}</TableCell>:
                         (head.id === 'rdi'&&index === 7)?<TableCell rowSpan={6} className="text-right" style={{ whiteSpace: 'pre-line' }} key={head.id+index}>{el[head.id]}</TableCell>:

apps/fo/app/pages/(with-layout)/dashboard/page.tsx

@@ -6,7 +6,10 @@
 
 "use client"
 import { useFoStore } from "@/app/store";
-import { ContentsDiv, downloadExcel, downloadMultipleExcel, filePickedBlobArray, MainDiv, SelectBox, UITab, type SelectDataType } from "@common/business_components";
+import {
+  ContentsDiv, downloadExcelFormat, downloadMultipleExcel, filePickedBlobArrayFormat, MainDiv
+  , SelectBox, UITab, type SelectDataType
+} from "@common/business_components";
 import { Button, TabsContent } from "@common/components/ui";
 import { useEffect, useState } from "react";
 import DashBoardFclty from "../dashboardMain/page";
@@ -19,7 +22,7 @@ import { roundNumber } from "@/app/components/common/DataForm";
 
 const tabList = [
   { value: 'facilityInfo', label: '시설정보 및 운영현황' },
-  { value: 'mainGraph', label:  '주요그래프' },
+  { value: 'mainGraph', label: '주요그래프' },
   { value: 'rainManage', label: '강우일 운영현황' },
   //{ value: 'drainageEquipment', label: '배수설비 정비현황' }
 ];
@@ -40,34 +43,30 @@ export const generateYearDates = (searchYear: string) => {
   return dates;
 }
 
+type FacilityType = {
+  bscFctCd: string;
+  bscFctNm: string;
+  fcltyCpc: number | '';
+  trtFrfNm: string | '';
+  efflWqltStndrdNm: string | '';
+}
+
 export default function DashBoard() {
   // 입력값 상태 관리
-  const { Common, initializeCommonData,searchMainGraph, searchRainManage, searchOperationStatus, OperationStatus, RainManage, MainGraph, PlanFclty } = useFoStore((state) => state);
+  const { Common, initializeCommonData, searchMainGraph, searchRainManage, searchOperationStatus
+    , OperationStatus, RainManage, MainGraph, PlanFclty } = useFoStore((state) => state);
   const [activeTab, setActiveTab] = useState<string>('facilityInfo');
-
   const [filteredSigunData, setFilteredSigunData] = useState<SelectDataType[]>([{ text: "전체", val: '0' }]);
   const [sidoValue, setSidoValue] = useState<string>('0');
   const [sigunValue, setSigunValue] = useState<string>('0');
-  const {
-    isInit,
-    selectSearchYear,
-    btnClass,
-    selectSidoData,
-    selectSigunData,
-  } = Common;
-  
-  const {
-    planFcltyList
-  } = PlanFclty;
-
-  const {
-    operationalStatusList
-  } = OperationStatus;
-
-  const {
-    excelList
-  } = RainManage;
-
+  const { isInit, selectSearchYear, btnClass, selectSidoData, selectSigunData, } = Common;
+  const defaultSearchYear =
+    selectSearchYear.find((item) => item.selected)?.val ||
+    selectSearchYear[0]?.val ||
+    "0";
+  const { planFcltyList } = PlanFclty;
+  const { operationalStatusList } = OperationStatus;
+  const { excelList } = RainManage;
   const {
     chart_inflowRain,
     chart_bodRain,
@@ -79,10 +78,10 @@ export default function DashBoard() {
   } = MainGraph;
 
   /******************선택된 데이터******************/
-  // 연도
-  const [searchYear, setSearchYear] = useState<string>(selectSearchYear[0]?.val || '0');
+
+  const [searchYear, setSearchYear] = useState<string>(defaultSearchYear);   // 연도
   // 시설명
-  const [fcltyList, setFcltyList] = useState<{bscFctCd: string, bscFctNm: string, fcltyCpc: number | '', trtFrfNm: string | '', efflWqltStndrdNm: string | ''}>({
+  const [fcltyList, setFcltyList] = useState<FacilityType>({
     bscFctCd: '11000SW001R',
     bscFctNm: '난지',
     fcltyCpc: 860000,
@@ -90,7 +89,7 @@ export default function DashBoard() {
     efflWqltStndrdNm: '500톤 이상(Ⅲ지역)'
   });
 
-  const [searchFcltyList, setSearchFcltyList] = useState<{bscFctCd: string, bscFctNm: string, fcltyCpc: number | '', trtFrfNm: string | '', efflWqltStndrdNm: string | ''}>({
+  const [searchFcltyList, setSearchFcltyList] = useState<FacilityType>({
     bscFctCd: '',
     bscFctNm: '',
     fcltyCpc: '',
@@ -111,12 +110,12 @@ export default function DashBoard() {
     }
   }, [isInit, initializeCommonData]);
 
-  const handleFacilityChange = (facility: { bscFctCd: string, bscFctNm: string, fcltyCpc: number | '', trtFrfNm: string | '', efflWqltStndrdNm: string | '' }) => {
+  const handleFacilityChange = (facility: FacilityType) => {
     setFcltyList(facility);
   };
 
   const onSelectValue = (val: string, type: string) => {
-    switch(type) {
+    switch (type) {
       case 'sido':
         setSidoValue(val);
         initializeSigunData(val);
@@ -143,13 +142,11 @@ export default function DashBoard() {
     }
   }
 
-  const excelDownload = () => {
+  const excelDownload = async () => {
     if (!fcltyList.bscFctCd) return;
-    
+
     switch (activeTab) {
-      case 'facilityInfo':
-        searchOperationStatus(false, searchYear, fcltyList.bscFctCd).then(() => {setTimeout(() => {makeExcelData();}, 200);});
-        
+      case 'facilityInfo': // 시설정보 및 운영현황
         const makeExcelData = async () => {
           fetch(`/mainDashBoard.xlsx`, {}).then(async (response) => {
             if (!response.ok) {
@@ -161,7 +158,7 @@ export default function DashBoard() {
             const excelData1 = planFcltyList.map((item) => {
               return [
                 item.item,
-                item.provisionalApproval?Number(item.provisionalApproval.toString().replaceAll(',',''))?Number(item.provisionalApproval.toString().replaceAll(',','')):item.provisionalApproval:'',
+                item.provisionalApproval ? Number(item.provisionalApproval.toString().replaceAll(',', '')) ? Number(item.provisionalApproval.toString().replaceAll(',', '')) : item.provisionalApproval : '',
                 item.now,
                 item.stepOne,
                 item.stepTwo,
@@ -172,25 +169,25 @@ export default function DashBoard() {
 
             // operationalStatusList를 2차원 배열로 변환
             const excelData2 = operationalStatusList.map((item, index) => {
-              console.log(item.yearAvg+' '+item.yearMax+' '+item.yearMin);
+              console.log(item.yearAvg + ' ' + item.yearMax + ' ' + item.yearMin);
               const baseData = [
-                Number(item.yearAvg?.toString().replaceAll(',','')),
-                Number(item.yearMax?.toString().replaceAll(',','')),
-                Number(item.yearMin?.toString().replaceAll(',','')),
-                Number(item.summerAll?.toString().replaceAll(',','')),
-                Number(item.summerThree?.toString().replaceAll(',','')),
-                Number(item.summerRain?.toString().replaceAll(',','')),
-                Number(item.winterAll?.toString().replaceAll(',','')),
-                Number(item.winterSunnyAvg?.toString().replaceAll(',','')),
-                Number(item.winterSunnyMax?.toString().replaceAll(',','')),
-                Number(item.winterSunnyMin?.toString().replaceAll(',','')),
-                Number(item.groundWaterAvg?.toString().replaceAll(',','').replaceAll('%','')),
-                Number(item.groundWaterSummer?.toString().replaceAll(',','').replaceAll('%','')),
-                Number(item.groundWaterWinter?.toString().replaceAll(',','').replaceAll('%',''))
+                Number(item.yearAvg?.toString().replaceAll(',', '')),
+                Number(item.yearMax?.toString().replaceAll(',', '')),
+                Number(item.yearMin?.toString().replaceAll(',', '')),
+                Number(item.summerAll?.toString().replaceAll(',', '')),
+                Number(item.summerThree?.toString().replaceAll(',', '')),
+                Number(item.summerRain?.toString().replaceAll(',', '')),
+                Number(item.winterAll?.toString().replaceAll(',', '')),
+                Number(item.winterSunnyAvg?.toString().replaceAll(',', '')),
+                Number(item.winterSunnyMax?.toString().replaceAll(',', '')),
+                Number(item.winterSunnyMin?.toString().replaceAll(',', '')),
+                Number(item.groundWaterAvg?.toString().replaceAll(',', '').replaceAll('%', '')),
+                Number(item.groundWaterSummer?.toString().replaceAll(',', '').replaceAll('%', '')),
+                Number(item.groundWaterWinter?.toString().replaceAll(',', '').replaceAll('%', ''))
               ];
-              
+
               // index가 0일 때만 rdi와 rdiRain 추가
-              return index === 0 ? [...baseData, item.rdi&&item.rdi.toString().trim()!=''?Number(item.rdi.toString().replaceAll(',','')):'', item.rdiRain&&item.rdiRain.toString().trim()!=''?Number(item.rdiRain.toString().replaceAll(',','')):''] : baseData;
+              return index === 0 ? [...baseData, item.rdi && item.rdi.toString().trim() != '' ? Number(item.rdi.toString().replaceAll(',', '')) : '', item.rdiRain && item.rdiRain.toString().trim() != '' ? Number(item.rdiRain.toString().replaceAll(',', '')) : ''] : baseData;
             });
 
             const sheetParameter = [
@@ -199,48 +196,55 @@ export default function DashBoard() {
                 headerNum: 3,
                 headerRange: 'A1:G2',
                 sheetName: '운영실태',
-                startCol: 'A'
+                startCol: 'A',
+                decimalRange0: 'B3:G2,B9:B11',
+                decimalRange1: 'B5:G5',
               },
               {
                 data: excelData2,
                 headerNum: 4,
                 headerRange: 'A1:Q3',
                 sheetName: '운영실태',
-                startCol: 'C'
+                startCol: 'C',
+                decimalRange0: 'C4:O8',
+                decimalRange1: 'C9:L10,M11:O11',
+                decimalRange3: 'C11:L16',
               }
             ];
             // 버퍼에 있는 엑셀데이터 전달 후 json으로 변환
-            await filePickedBlobArray(blobRet, '시설정보및운영현황', sheetParameter);
+            await filePickedBlobArrayFormat(blobRet, '시설정보및운영현황', sheetParameter);
           });
         };
+        await searchOperationStatus(false, searchYear, fcltyList.bscFctCd);
+        await makeExcelData();
         break;
 
-      case 'mainGraph':
+      case 'mainGraph': // 주요그래프
         searchMainGraph(searchYear, fcltyList.bscFctCd);
         const yearData = generateYearDates(searchYear);
-        const yearValueData : any = [];
+        const yearValueData: any = [];
 
-        for (const i in yearData){
+        for (const i in yearData) {
           const rowArray: string[] = [];
           rowArray.push(yearData[i] ?? "");
           //강수량
-          rowArray.push(roundNumber(chart_inflowRain.filter(item=>{return yearData[i] === item.label})[0]?.barVal0?.toString(), 1) || '');
+          rowArray.push(roundNumber(chart_inflowRain.filter(item => { return yearData[i] === item.label })[0]?.barVal0?.toString(), 1) || '');
           //유입하수량
-          rowArray.push(roundNumber(chart_inflowRain.filter(item=>{return yearData[i] === item.label})[0]?.lineVal1?.toString(), 0) || '');
+          rowArray.push(roundNumber(chart_inflowRain.filter(item => { return yearData[i] === item.label })[0]?.lineVal1?.toString(), 0) || '');
           //시설용량
-          rowArray.push(roundNumber(chart_inflowRain.filter(item=>{return yearData[i] === item.label})[0]?.lineVal0?.toString(), 0) || '');
+          rowArray.push(roundNumber(chart_inflowRain.filter(item => { return yearData[i] === item.label })[0]?.lineVal0?.toString(), 0) || '');
           //유입BOD
-          rowArray.push(roundNumber(chart_bodRain.filter(item=>{return yearData[i] === item.label})[0]?.lineVal0?.toString(), 1) || '');
+          rowArray.push(roundNumber(chart_bodRain.filter(item => { return yearData[i] === item.label })[0]?.lineVal0?.toString(), 1) || '');
           //유입T-P
-          rowArray.push(roundNumber(chart_inflTp.filter(item=>{return yearData[i] === item.label})[0]?.val?.toString(), 3) || '');
+          rowArray.push(roundNumber(chart_inflTp.filter(item => { return yearData[i] === item.label })[0]?.val?.toString(), 3) || '');
           //총인유입T-P
-          rowArray.push(roundNumber(chart_chongInTp.filter(item=>{return yearData[i] === item.label})[0]?.val?.toString(), 3) || '');
+          rowArray.push(roundNumber(chart_chongInTp.filter(item => { return yearData[i] === item.label })[0]?.val?.toString(), 3) || '');
           //방류T-P
-          rowArray.push(roundNumber(chart_efflTp.filter(item=>{return yearData[i] === item.label})[0]?.val?.toString(), 3) || '');
+          rowArray.push(roundNumber(chart_efflTp.filter(item => { return yearData[i] === item.label })[0]?.val?.toString(), 3) || '');
           //유입T-N
-          rowArray.push(roundNumber(chart_inflTn.filter(item=>{return yearData[i] === item.label})[0]?.val?.toString(), 3) || '');
+          rowArray.push(roundNumber(chart_inflTn.filter(item => { return yearData[i] === item.label })[0]?.val?.toString(), 3) || '');
           //방류T-N
-          rowArray.push(roundNumber(chart_efflTn.filter(item=>{return yearData[i] === item.label})[0]?.val?.toString(), 3) || '');
+          rowArray.push(roundNumber(chart_efflTn.filter(item => { return yearData[i] === item.label })[0]?.val?.toString(), 3) || '');
 
           yearValueData.push(
             rowArray
@@ -250,74 +254,28 @@ export default function DashBoard() {
 
         const sheetParameter = [
           {
-            data: [['날짜', '강수량', '유입하수량', '지하수유입량', '유입BOD', '유입T-P','총인유입T-P', '방류T-P', '유입T-N', '방류T-N'],...yearValueData],
+            data: [['날짜', '강수량', '유입하수량', '지하수유입량', '유입BOD', '유입T-P', '총인유입T-P', '방류T-P', '유입T-N', '방류T-N'], ...yearValueData],
             headerNum: 1,
             headerRange: 'A1:J1',
             sheetName: '주요그래프'
           }
-          /* {
-            data: [['날짜', '강수량'],...chart_inflowRain.map((item) => [item.label, roundNumber(item.barVal0, 1)])],
-            headerNum: 1,
-            headerRange: 'A1:B1',
-            sheetName: '강수량'
-          },
-          {
-            data: [['날짜', '유입하수량'],...chart_inflowRain.map((item) => [item.label, roundNumber(item.lineVal1, 0)])],
-            headerNum: 1,
-            headerRange: 'A1:B1',
-            sheetName: '유입하수량'
-          },
-          {
-            data: [['날짜', '시설용량'],...chart_inflowRain.map((item) => [item.label, roundNumber(item.lineVal0, 0)])],
-            headerNum: 1,
-            headerRange: 'A1:B1',
-            sheetName: '시설용량'
-          },
-          {
-            data: [['날짜', '유입BOD'],...chart_bodRain.map((item) => [item.label, roundNumber(item.lineVal0, 1)])],
-            headerNum: 1,
-            headerRange: 'A1:B1',
-            sheetName: '유입BOD'
-          },
-          {
-            data: [['날짜', '유입T-P'],...chart_inflTp.map((item) => [item.label, roundNumber(item.val, 3)])],
-            headerNum: 1,
-            headerRange: 'A1:B1',
-            sheetName: '유입T-P'
-          },
-          {
-            data: [['날짜', '총인유입T-P'],...chart_chongInTp.map((item) => [item.label, roundNumber(item.val, 3)])],
-            headerNum: 1,
-            headerRange: 'A1:B1',
-            sheetName: '총인유입T-P'
-          },
-          {
-            data: [['날짜', '방류T-P'],...chart_efflTp.map((item) => [item.label, roundNumber(item.val, 3)])],
-            headerNum: 1,
-            headerRange: 'A1:B1',
-            sheetName: '방류T-P'
-          },
-          {
-            data: [['날짜', '유입T-N'],...chart_inflTn.map((item) => [item.label, roundNumber(item.val, 3)])],
-            headerNum: 1,
-            headerRange: 'A1:B1',
-            sheetName: '유입T-N'
-          },
-          {
-            data: [['날짜', '방류T-N'],...chart_efflTn.map((item) => [item.label, roundNumber(item.val, 3)])],
-            headerNum: 1,
-            headerRange: 'A1:B1',
-            sheetName: '방류T-N'
-          } */
         ];
 
         downloadMultipleExcel('주요그래프', sheetParameter);
         break;
 
-      case 'rainManage':
+      case 'rainManage': // 강우일 운영현황
         searchRainManage(searchYear, fcltyList.bscFctCd, true);
         if (excelList && excelList.length > 0) {
-          downloadExcel({ data: excelList as unknown as JSON[], fileName: '강우일 운영현황', sheetNameArray: ['강우일 운영현황'], headerRange: 'A1:T1' });
+          downloadExcelFormat({ 
+            data: excelList as unknown as JSON[], 
+            fileName: '강우일 운영현황', 
+            sheetNameArray: ['강우일 운영현황'], 
+            headerRange: 'A1:T1',
+            decimalArray0: [2,3],
+            decimalArray1: [1,4,5,6,7,10,11,12,15,16,17],
+            decimalArray3: [8,9,13,14,18,19],
+           });
         }
         break;
       // Add other cases for different tabs as needed
@@ -342,7 +300,7 @@ export default function DashBoard() {
       trtFrfNm: '표준활성슬러지법, MLE, A2O',
       efflWqltStndrdNm: '500톤 이상(Ⅲ지역)'
     });
-    setSearchYear(selectSearchYear[0]?.val || '0');
+    setSearchYear(defaultSearchYear);
     searchFcltyList.bscFctNm = '난지';
 
     setSidoValue('0');
@@ -351,7 +309,7 @@ export default function DashBoard() {
 
   const searchVal = () => {
     setSearchFcltyList(fcltyList);
-    if(searchFcltyList.bscFctCd) {
+    if (searchFcltyList.bscFctCd) {
       searchOperationStatus(false, searchYear, fcltyList.bscFctCd);
     }
   }
@@ -361,11 +319,11 @@ export default function DashBoard() {
       <ContentsDiv>
         <div className="flex card card-border !mt-6">
           <div className="grid grid-cols-12 gap-5 w-8/12 m-4">
-            <SelectBox className="col-span-2" label={'연도'} selectArray={selectSearchYear} onSelectValue={ (val) => setSearchYear(val.toString()) } value={searchYear} selectClass={undefined}/>
-            <SelectBox className="col-span-3" label={'시도'} selectArray={selectSidoData} onSelectValue={(val) => onSelectValue(val.toString(), 'sido')} value={sidoValue} selectClass={undefined}/>
-            <SelectBox className="col-span-3" label={'시군구'} selectArray={filteredSigunData} onSelectValue={(val) => onSelectValue(val.toString(), 'sigun')} value={sigunValue} selectClass={undefined}/>
+            <SelectBox className="col-span-2" label={'연도'} selectArray={selectSearchYear} onSelectValue={(val) => setSearchYear(val.toString())} value={searchYear} selectClass={undefined} />
+            <SelectBox className="col-span-3" label={'시도'} selectArray={selectSidoData} onSelectValue={(val) => onSelectValue(val.toString(), 'sido')} value={sidoValue} selectClass={undefined} />
+            <SelectBox className="col-span-3" label={'시군구'} selectArray={filteredSigunData} onSelectValue={(val) => onSelectValue(val.toString(), 'sigun')} value={sigunValue} selectClass={undefined} />
             <div className="col-span-4 flex">
-              <DashBoardFclty onFacilityChange={handleFacilityChange} sidoSigun={sigunValue!='0'?sigunValue:sidoValue!='0'?sidoValue:''} facilityNm={searchFcltyList.bscFctNm}></DashBoardFclty>
+              <DashBoardFclty onFacilityChange={handleFacilityChange} sidoSigun={sigunValue != '0' ? sigunValue : sidoValue != '0' ? sidoValue : ''} facilityNm={searchFcltyList.bscFctNm}></DashBoardFclty>
             </div>
           </div>
           <div className="w-4/12 mx-5 flex items-center justify-end space-x-2">
@@ -385,13 +343,13 @@ export default function DashBoard() {
             <ProcessFacilitySearch searchYear={searchYear} fcltyList={[searchFcltyList]} onFacilityChange={handleFacilityChange} />
           </TabsContent>
           <TabsContent value="mainGraph">
-            <DashBoardChart searchYear={searchYear} fcltyList={[searchFcltyList]}/>
+            <DashBoardChart searchYear={searchYear} fcltyList={[searchFcltyList]} />
           </TabsContent>
           <TabsContent value="rainManage">
-            <RainManageTab searchYear={searchYear} fcltyList={[searchFcltyList]}/>
+            <RainManageTab searchYear={searchYear} fcltyList={[searchFcltyList]} />
           </TabsContent>
           <TabsContent value="drainageEquipment">
-            <DrainageEquipment searchYear={searchYear} fcltyList={[searchFcltyList]}/>
+            <DrainageEquipment searchYear={searchYear} fcltyList={[searchFcltyList]} />
           </TabsContent>
         </UITab>
       </ContentsDiv>

apps/fo/app/pages/(with-layout)/dashboard/rainManage/page.tsx

@@ -15,27 +15,13 @@ export type facilityInfoProps = {
   fcltyList?: { bscFctCd: string, bscFctNm: string, fcltyCpc: number | '', trtFrfNm: string, efflWqltStndrdNm: string }[];
 };
 
-export default function RainManageTab({searchYear = '', fcltyList = []}: facilityInfoProps) {
-
-  const {
-    Common,
-    searchRainManage,
-    RainManage
-  } = useFoStore((state) => state);
+export default function RainManageTab({ searchYear = '', fcltyList = [] }: facilityInfoProps) {
 
+  const { Common, searchRainManage, RainManage } = useFoStore((state) => state);
   const [hasSearched, setHasSearched] = useState(false);
-  // 이전 시설코드 저장
-  const [prevFacilityCode, setPrevFacilityCode] = useState<string>('');
-
-  const {
-    isInit,
-  } = Common;
-
-  const {
-    upHeadListRainManage,
-    rainManageList,
-  } = RainManage;
-
+  const [prevFacilityCode, setPrevFacilityCode] = useState<string>(''); // 이전 시설코드 저장
+  const { isInit, } = Common;
+  const { upHeadListRainManage, rainManageList, } = RainManage;
   const tableData = fcltyList;
 
   useEffect(() => {
@@ -50,17 +36,17 @@ export default function RainManageTab({searchYear = '', fcltyList = []}: facilit
   useEffect(() => {
     setHasSearched(false);
   }, [searchYear]);
-  
+
   return (
     <div>
-      <UiTable 
+      <UiTable
         headName=""
         tableData={rainManageList}
         headlist={upHeadListRainManage}
         pageSize={0}
         total={0}
         cellClick={undefined}
-        onPageChange={() => {}}
+        onPageChange={() => { }}
         widthFixed={true}
       >
       </UiTable>

apps/fo/app/pages/(with-layout)/facilityPrecipitation/modal/page.tsx

@@ -9,7 +9,7 @@ import CalcRainEffect from "@/app/components/common/CalcRainEffect";
 import { roundNumber } from "@/app/components/common/DataForm";
 import { useFoStore } from "@/app/store";
 import type { PrecipitationPropsDetailProps } from "@/app/store/facilityPrecipitation";
-import { DatePickerRange, downloadExcel, UiTable } from "@common/business_components/ui";
+import { DatePickerRange, downloadExcelHeaders, UiTable } from "@common/business_components/ui";
 import ListDiv from "@common/business_components/ui/list_div";
 import { Button, Table, TableCell, TableHead, TableRow } from "@common/components/ui";
 import { useEffect, useRef, useState } from "react";
@@ -45,7 +45,7 @@ export default function PrecipitationModal(props: PrecipitationModalProps) {
     const standYear = parseInt(props.searchYear);
     return [{
       start: new Date(standYear, 0, 1),
-      end: new Date(standYear, 11, 31)
+      end: new Date(standYear, 11, 31) //월의 index는 0부터 시작
     }];
   };
 
@@ -112,7 +112,6 @@ export default function PrecipitationModal(props: PrecipitationModalProps) {
   const getTableData = () => {
     const totals = calculateTotals();
     totals.infoRnDay = roundNumber(totals.infoRnDay, 1);
-
     return [
       {
         bscFctCd: "",
@@ -157,19 +156,26 @@ export default function PrecipitationModal(props: PrecipitationModalProps) {
 
   const excelDownload = () => {
     const totData = getTableData();
-    const excelDownList: any[] = [];
+    
+    // 헤더 순서를 명시적으로 정의
+    const headers = ["날짜", "강수량(mm/일)", "강우일(일)", "강우영향일(일)"] as const;
+    
+    const excelDownList: Record<string, string | number>[] = [];
     if(totData.length > 0){
       totData.forEach((item) => {
-        excelDownList.push({
-          "날짜": item.rainDt,
-          "강수량(mm/일)": roundNumber(item.infoRnDay, 1),
-          "강우일(일)": roundNumber(item.rainDay, 0),
-          "강우영향일(일)": roundNumber(item.rainEffectDay, 0),
-        });
+        // 순서를 보장하기 위해 헤더 순서대로 객체 생성
+        const row: Record<string, string | number> = {};
+        row[headers[0]] = item.rainDt;
+        row[headers[1]] = roundNumber(item.infoRnDay, 1);
+        row[headers[2]] = roundNumber(item.rainDay, 0);
+        row[headers[3]] = roundNumber(item.rainEffectDay, 0);
+        excelDownList.push(row);
       });
     }
+    
     if (excelDownList && excelDownList.length > 0) {
-      downloadExcel({ data: JSON.parse(JSON.stringify(excelDownList)), fileName: props.searchYear+'년 '+props.fcltyName + ' 강수현황', sheetNameArray: ['지하수유입량'], headerRange: 'A1:D1' });
+      downloadExcelHeaders({ data: JSON.parse(JSON.stringify(excelDownList)), fileName: props.searchYear+'년 '+props.fcltyName + ' 강수현황'
+        , sheetNameArray: ['지하수유입량'], headerRange: 'A1:D1', headers });
     } else if (totData.length == 0) {
       alert('다운받을 데이터가 없습니다.');
     }

apps/fo/app/pages/(with-layout)/facilityPrecipitation/page.tsx

@@ -5,11 +5,11 @@
  */
 
 "use client"
-import { useFoStore } from "@/app/store";
+import { StoreContext, useFoStore } from "@/app/store";
 import type { TableUpperProps } from "@/app/store/common";
-import { ContentsDiv, downloadExcel, MainDiv, SearchBaseForm, SearchInput, SelectBox, Title, UiModal, UiTable, type ReturnType } from "@common/business_components";
+import { ContentsDiv, downloadExcelFormat, MainDiv, SearchBaseForm, SearchInput, SelectBox, Title, UiModal, UiTable, type ReturnType } from "@common/business_components";
 import ListDiv from "@common/business_components/ui/list_div";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useContext, useEffect, useRef, useState } from "react";
 import PrecipitationModal from "./modal/page";
 import LoadingOverlay from "@common/business_components/ui/loadingBar";
 import UnderComment from "@/app/components/common/UnderComment";
@@ -22,6 +22,11 @@ export default function FacilityPrecipitation() {
     ,initializeCommonData
     ,searchFacilityPrecipitationList
   } = useFoStore((state) => state) || { processAreaList: { processAreaList: [] }};
+  const store = useContext(StoreContext);
+
+  if (!store) {
+    throw new Error("StoreContext is not available. Ensure StoreProvider is mounted.");
+  }
   
   const {
     isInit,
@@ -37,6 +42,11 @@ export default function FacilityPrecipitation() {
     btnClass
   } = Common;
 
+  const defaultSearchYear =
+    selectSearchYear.find((item) => item.selected)?.val ||
+    selectSearchYear[0]?.val ||
+    "0";
+
   const {
     labelArray,
   } = FacilityPrecipitationSearch;
@@ -45,7 +55,6 @@ export default function FacilityPrecipitation() {
     upHeadList1,
     upHeadList2,
     upHeadList3,
-    excelList,
     facilityPrecipitation,
     facilityPrecipitationCount,
     isLoading,
@@ -90,8 +99,9 @@ export default function FacilityPrecipitation() {
   // 시설상태
   const [operationValue, setOperationValue] = useState<string>("0");
   // 조회기간
-  const [searchYear, setSearchYear] = useState<string>(selectSearchYear[0]?.val || "0");
-
+  const [searchYear, setSearchYear] = useState<string>(defaultSearchYear);
+  // 엑셀다운로드 트리거
+  const [isExcelDownClick, setIsExcelDownClick] = useState<boolean>(false);
   /**
    * 페이지 함수
    */
@@ -102,7 +112,7 @@ export default function FacilityPrecipitation() {
     // 상태값 설정
     setFcltCpct(selectUpdownData[0]?.val || "0");
     setOperationValue(selectOperationData[0]?.val || "0");
-    setSearchYear(selectSearchYear[0]?.val || "0");
+    setSearchYear(defaultSearchYear);
     // SearchInputSelect 초기화
     setFcltyName("");
     if (searchInputRef.current) {
@@ -111,7 +121,7 @@ export default function FacilityPrecipitation() {
         input.value = "";
       }
     }
-    searchFacilityPrecipitationList(1, 10, selectSearchYear[0]?.val || "0");
+    searchFacilityPrecipitationList(1, 10, defaultSearchYear);
   }
 
   // 모달 닫기
@@ -134,20 +144,9 @@ export default function FacilityPrecipitation() {
   useEffect(() => {
     if (!isInit) {
       initializeCommonData();
-      searchFacilityPrecipitationList(1, 10, selectSearchYear[0]?.val || "0");
+      searchFacilityPrecipitationList(1, 10, defaultSearchYear);
     }
-  }, [isInit, initializeCommonData, searchFacilityPrecipitationList, selectSearchYear]);
-
-  useEffect(() => {
-    if (excelList && excelList.length > 0) {
-      downloadExcel({ 
-        data: excelList as unknown as JSON[], 
-        fileName: '시설별 강수현황', 
-        sheetNameArray: ['시설별 강수현황'], 
-        headerRange: 'A1:N1'
-      });
-    }
-  }, [excelList]);
+  }, [isInit, initializeCommonData, searchFacilityPrecipitationList, defaultSearchYear]);
 
   useEffect(() => {
     if (facilityPrecipitation.length > 0) {
@@ -159,7 +158,7 @@ export default function FacilityPrecipitation() {
    * 콜백함수
    */
   // 조회
-  const searchFacilityPrecipitation = useCallback(({ partValue, regionValue, unitWaterShedValue, middleRegionValue, envPartValue, sidoValue, sigunValue }: ReturnType, pageNo: number, pageCnt:number=20) => {
+  const searchFacilityPrecipitation = useCallback(async ({ partValue, regionValue, unitWaterShedValue, middleRegionValue, envPartValue, sidoValue, sigunValue }: ReturnType, pageNo: number, pageCnt:number=20) => {
     let nameCd, partStr
     switch (partValue) {
       case 'R':
@@ -177,9 +176,9 @@ export default function FacilityPrecipitation() {
           break;
     }
     if (partStr.length > 1 || operationValue!== '0' || fcltCpct !== '0' ||nameCd ||(fcltyName.trim() !== "" && fcltyName.trim() !== null)) {
-      searchFacilityPrecipitationList(pageNo, pageCnt, searchYear, partStr, nameCd || '0', fcltCpct, operationValue, fcltyName.trim() !== "" || fcltyName.trim() !== null ? fcltyName : undefined);
+      await searchFacilityPrecipitationList(pageNo, pageCnt, searchYear, partStr, nameCd || '0', fcltCpct, operationValue, fcltyName.trim() !== "" || fcltyName.trim() !== null ? fcltyName : undefined);
     } else {
-      searchFacilityPrecipitationList(pageNo, pageCnt, searchYear);
+      await searchFacilityPrecipitationList(pageNo, pageCnt, searchYear);
     }
   }, [operationValue, fcltyName, searchFacilityPrecipitationList, searchYear, fcltCpct]);
 
@@ -190,9 +189,43 @@ export default function FacilityPrecipitation() {
   }, [upHeadList1, upHeadList2, upHeadList3]);
 
   // 엑셀다운로드 
-  const excelDownload = useCallback((searchReturn: ReturnType) => {
-    searchFacilityPrecipitation(searchReturn, 1, 10000);
-  }, [searchFacilityPrecipitation]);
+  const excelDownload = useCallback(async (searchReturn: ReturnType) => {
+    if (isExcelDownClick) return;
+    // if (ref.current.partValue === 'A') { // 행정별
+    //   if (!ref.current.sidoValue || ref.current.sidoValue === '0') {
+    //     alert('엑셀 다운로드는 시도 조건을 선택한 후 이용 가능합니다.');
+    //     return;
+    //   }
+    // } else if (ref.current.partValue === 'R') { // 유역별
+    //   if (!ref.current.regionValue || ref.current.regionValue === '0') {
+    //     alert('엑셀 다운로드는 유역 조건을 선택한 후 이용 가능합니다.');
+    //     return;
+    //   }
+    // } else if (ref.current.partValue === 'G') { // 환경청별
+    //   if (!ref.current.envPartValue || ref.current.envPartValue === '0') {
+    //     alert('엑셀 다운로드는 환경청 조건을 선택한 후 이용 가능합니다.');
+    //     return;
+    //   }
+    // } 
+    setIsExcelDownClick(true);
+    try {
+      await searchFacilityPrecipitation(searchReturn, 1, 10000);
+      const latestExcelList = store.getState().FacilityPrecipitation.excelList || [];
+      if (latestExcelList.length > 0) {
+        downloadExcelFormat({ 
+          data: latestExcelList as unknown as JSON[], 
+          fileName: '시설별 강수현황', 
+          sheetNameArray: ['시설별 강수현황'], 
+          headerRange: 'A1:N1',
+          decimalArray0: [9, 11, 12, 13],
+        });
+      } else {
+        alert("조회된 결과가 없습니다.");
+      }
+    } finally {
+      setIsExcelDownClick(false);
+    }
+  }, [isExcelDownClick, searchFacilityPrecipitation, store]);
 
   // 페이지 변경
   const handlePageChange = useCallback((page: number) => {
@@ -209,10 +242,13 @@ export default function FacilityPrecipitation() {
         <ContentsDiv>
           <SearchBaseForm
           leftChildren={<>
-            <SelectBox className="col-span-3" label={labelArray[3] as string} selectArray={selectUpdownData} onSelectValue={(val) => setFcltCpct(val.toString())} value={fcltCpct} selectClass={undefined} />
+            <SelectBox className="col-span-3" label={labelArray[3] as string} selectArray={selectUpdownData} 
+              onSelectValue={(val) => setFcltCpct(val.toString())} value={fcltCpct} selectClass={undefined} />
             <SearchInput className={"col-span-3"} label={labelArray[4] as string} textValue={fcltyName} setText={setFcltyName} />
-            <SelectBox className="col-span-3" label={labelArray[6] as string} selectArray={selectSearchYear} onSelectValue={(val) => setSearchYear(val.toString())} value={searchYear} selectClass={undefined} />
-            <SelectBox className="col-span-3" label={labelArray[5] as string} selectArray={selectOperationData} onSelectValue={(val) => setOperationValue(val.toString())} value={operationValue} selectClass={undefined} />
+            <SelectBox className="col-span-3" label={labelArray[6] as string} selectArray={selectSearchYear} 
+              onSelectValue={(val) => setSearchYear(val.toString())} value={searchYear} selectClass={undefined} />
+            <SelectBox className="col-span-3" label={labelArray[5] as string} selectArray={selectOperationData} 
+              onSelectValue={(val) => setOperationValue(val.toString())} value={operationValue} selectClass={undefined} />
           </>}
           rightChildren={undefined}
           selectSidoData={selectSidoData}
@@ -224,18 +260,22 @@ export default function FacilityPrecipitation() {
           btnClass={btnClass}
           queryClick={chkVal}
           excelClick={excelDownload}
+          excelDisabled={isExcelDownClick}
           initClick={resetVal}
           ref={ref} isAdmin={false}/>
-        <ListDiv>
-          <LoadingOverlay isLoading={isLoading} />
-          <div className="h-full w-full overflow-x-scroll min-[1200px]:overflow-x-hidden">
-            <div className="w-[120%] min-[1200px]:w-[100%]">
-              <UiTable cellClick={(index: number | undefined) => index !== undefined && cellClick(index)} headName={"시설별 강수현황"} tableData={mainList} headlist={upheadList} pageSize={10} total={total} resetPageNo={resetPage} onPageChange={handlePageChange} widthFixed={true} />
+          <ListDiv>
+            <LoadingOverlay isLoading={isLoading} />
+            <div className="h-full w-full overflow-x-scroll min-[1200px]:overflow-x-hidden">
+              <div className="w-[120%] min-[1200px]:w-[100%]">
+                <UiTable cellClick={(index: number | undefined) => index !== undefined && cellClick(index)} 
+                  headName={"시설별 강수현황"} 
+                  tableData={mainList} headlist={upheadList} pageSize={10} total={total} 
+                  resetPageNo={resetPage} onPageChange={handlePageChange} widthFixed={true} />
+              </div>
+              <UnderComment divHeight={"3"} commentArray={["강우일은 3mm 이상만 해당 / 강우영향일은 강우일 및 강우일 후 연속 2일간으로 정의"]} />
             </div>
-            <UnderComment divHeight={"3"} commentArray={["강우일은 3mm 이상만 해당 / 강우영향일은 강우일 및 강우일 후 연속 2일간으로 정의"]} />
-          </div>
-        </ListDiv>
-      </ContentsDiv>
+          </ListDiv>
+        </ContentsDiv>
       {selectedRow !== null && (
         <UiModal
           body={<PrecipitationModal searchYear={searchYear} fcltyName={fcltyNm} facilityCd={fcltyCd} detailList={gridListPrecipitationDetail}></PrecipitationModal>}
@@ -248,4 +288,4 @@ export default function FacilityPrecipitation() {
       )}
     </MainDiv>
   );
-}
+}

apps/fo/app/pages/(with-layout)/facilityWaterQlty/modal/page.tsx

@@ -25,10 +25,10 @@ const commentArrayRain = [
   "강우량 3mm 이상만 날과 강우영향일(강우일+2일)의 날"
 ];
 
-type ModalProps ={
+type ModalProps = {
   fcltyName: string;
-  facilityCd : string;
-  searchYear : string;
+  facilityCd: string;
+  searchYear: string;
 }
 
 const tabList1 = [
@@ -50,15 +50,13 @@ const tabList3 = [
   { value: 'tab_term_winter_chongin', label: '동절기' }
 ];
 
-export default function WaterQualityModal({fcltyName='', facilityCd='', searchYear=new Date().getFullYear().toString()} : ModalProps) {
+export default function WaterQualityModal({ fcltyName = '', facilityCd = '', searchYear = new Date().getFullYear().toString() }: ModalProps) {
   const [tabName, setTabName] = useState<string>('tab_num1');
-
-  // 그리드 관련
-  const {FacilityWaterQltyModal,
-    searchFacilityWaterQltyListHist,
-    Common
-  } = useFoStore((state) => state);
-  const {btnClass, COD_YEAR} = Common;
+  // 날짜 필터링 관련 상태
+  const [copyYearList, setCopyYearList] = useState<FacilityWaterQltyProps[]>([]);
+  const [chongInWaterQltyYearList, setChongInWaterQltyYearList] = useState<FacilityWaterQltyProps[]>([]);
+  const { FacilityWaterQltyModal, searchFacilityWaterQltyListHist, Common } = useFoStore((state) => state);
+  const { btnClass, COD_YEAR } = Common;
   const {
     upHeadListModalYear,
     upHeadListModalYearCod,
@@ -71,7 +69,17 @@ export default function WaterQualityModal({fcltyName='', facilityCd='', searchYe
 
   const prevExcelListRef = useRef<modalExcelType[] | null>(null);
   const prevChoinginExcelListRef = useRef<modalChoinginExcelType[] | null>(null);
-  
+
+  useEffect(() => {
+    searchFacilityWaterQltyListHist(searchYear, facilityCd);
+  }, [searchYear, facilityCd, searchFacilityWaterQltyListHist]);
+
+  useEffect(() => {
+    const filteredYearData = setFilterAfterData(facilityWaterQltyYearList);
+    setCopyYearList(filteredYearData as FacilityWaterQltyProps[]);
+    setChongInWaterQltyYearList(facilityWaterQltyYearList);
+  }, [facilityWaterQltyYearList]);
+
   // 필터링 된 후 최대, 최소, 평균 값 계산
   const setFilterAfterData = (filteredData: FacilityWaterQltyProps[]) => {
     // 쉼표가 포함된 문자열을 숫자로 변환하는 함수
@@ -100,7 +108,7 @@ export default function WaterQualityModal({fcltyName='', facilityCd='', searchYe
     let maxNoProcessInflAmnt = 0;
     let maxInfoRnDay = 0;
 
-    
+
     // 초기값 설정
     let minEfflWqltBod = filteredData.length > 0 ? parseNumber(filteredData[0]?.efflWqltBod) : 0;
     let minEfflWqltTn = filteredData.length > 0 ? parseNumber(filteredData[0]?.efflWqltTn) : 0;
@@ -108,14 +116,14 @@ export default function WaterQualityModal({fcltyName='', facilityCd='', searchYe
     let minefflWqltToc = filteredData.length > 0 ? parseNumber(filteredData[0]?.efflWqltToc) : 0;
     let minefflWqltCod = filteredData.length > 0 ? parseNumber(filteredData[0]?.efflWqltCod) : 0;
     let minEfflWqltSs = filteredData.length > 0 ? parseNumber(filteredData[0]?.efflWqltSs) : 0;
-    
+
     let mininflAssctBfrWqltBod = filteredData.length > 0 ? parseNumber(filteredData[0]?.inflAssctBfrWqltBod) : 0;
     let mininflAssctBfrWqltTn = filteredData.length > 0 ? parseNumber(filteredData[0]?.inflAssctBfrWqltTn) : 0;
     let minInflAssctBfrWqltTp = filteredData.length > 0 ? parseNumber(filteredData[0]?.inflAssctBfrWqltTp) : 0;
     let mininflAssctBfrWqltToc = filteredData.length > 0 ? parseNumber(filteredData[0]?.inflAssctBfrWqltToc) : 0;
     let mininflAssctBfrWqltCod = filteredData.length > 0 ? parseNumber(filteredData[0]?.inflAssctBfrWqltCod) : 0;
     let mininflAssctBfrWqltSs = filteredData.length > 0 ? parseNumber(filteredData[0]?.inflAssctBfrWqltSs) : 0;
-    
+
     let minTpInflWqltBod = 99999999;
     let minTpInflWqltTp = 99999999;
     let minNoProcessInflAmnt = 99999999;
@@ -143,27 +151,27 @@ export default function WaterQualityModal({fcltyName='', facilityCd='', searchYe
     let noProcessInflAmntCnt = 0;
 
     let avgInfoRnDay = 0;
-    
+
     filteredData.forEach((item: FacilityWaterQltyProps) => {
       const efflWqltBod = parseNumber(item.efflWqltBod);
       const efflWqltTn = parseNumber(item.efflWqltTn);
       const efflWqltTp = parseNumber(item.efflWqltTp);
       const efflWqltToc = parseNumber(item.efflWqltToc);
-      const efflWqltCod = parseNumber(item.efflWqltCod?item.efflWqltCod.replaceAll("(","").replaceAll(")",""):0);
+      const efflWqltCod = parseNumber(item.efflWqltCod ? item.efflWqltCod.replaceAll("(", "").replaceAll(")", "") : 0);
       const efflWqltSs = parseNumber(item.efflWqltSs);
       const inflAssctBfrWqltBod = parseNumber(item.inflAssctBfrWqltBod);
       const inflAssctBfrWqltTn = parseNumber(item.inflAssctBfrWqltTn);
       const inflAssctBfrWqltTp = parseNumber(item.inflAssctBfrWqltTp);
       const inflAssctBfrWqltToc = parseNumber(item.inflAssctBfrWqltToc);
-      const inflAssctBfrWqltCod = parseNumber(item.inflAssctBfrWqltCod?item.inflAssctBfrWqltCod.replaceAll("(","").replaceAll(")",""):0);
+      const inflAssctBfrWqltCod = parseNumber(item.inflAssctBfrWqltCod ? item.inflAssctBfrWqltCod.replaceAll("(", "").replaceAll(")", "") : 0);
       const inflAssctBfrWqltSs = parseNumber(item.inflAssctBfrWqltSs);
 
       const tpInflWqltBod = parseNumber(item.tpInflWqltBod);
       const tpInflWqltTp = parseNumber(item.tpInflWqltTp);
-      if(item.tpInflWqltBod != null && item.tpInflWqltBod.trim() != '' && item.tpInflWqltBod != undefined ){
+      if (item.tpInflWqltBod != null && item.tpInflWqltBod.trim() != '' && item.tpInflWqltBod != undefined) {
         tpInflWqltBodCnt += 1;
       }
-      if(item.tpInflWqltTp != null && item.tpInflWqltTp.trim() != '' && item.tpInflWqltTp != undefined ){
+      if (item.tpInflWqltTp != null && item.tpInflWqltTp.trim() != '' && item.tpInflWqltTp != undefined) {
         tpInflWqltTpCnt += 1;
       }
 
@@ -175,7 +183,7 @@ export default function WaterQualityModal({fcltyName='', facilityCd='', searchYe
       maxefflWqltToc = Math.max(maxefflWqltToc, efflWqltToc);
       maxefflWqltCod = Math.max(maxefflWqltCod, efflWqltCod);
       maxEfflWqltSs = Math.max(maxEfflWqltSs, efflWqltSs);
-      
+
       maxinflAssctBfrWqltBod = Math.max(maxinflAssctBfrWqltBod, inflAssctBfrWqltBod);
       maxinflAssctBfrWqltTn = Math.max(maxinflAssctBfrWqltTn, inflAssctBfrWqltTn);
       maxInflAssctBfrWqltTp = Math.max(maxInflAssctBfrWqltTp, inflAssctBfrWqltTp);
@@ -202,11 +210,11 @@ export default function WaterQualityModal({fcltyName='', facilityCd='', searchYe
       mininflAssctBfrWqltCod = Math.min(mininflAssctBfrWqltToc, inflAssctBfrWqltCod);
       mininflAssctBfrWqltSs = Math.min(mininflAssctBfrWqltSs, inflAssctBfrWqltSs);
 
-      if(item.tpInflWqltBod != null && item.tpInflWqltBod.trim() != '' && item.tpInflWqltBod != undefined ){
+      if (item.tpInflWqltBod != null && item.tpInflWqltBod.trim() != '' && item.tpInflWqltBod != undefined) {
         minTpInflWqltBod = Math.min(minTpInflWqltBod, tpInflWqltBod);
         avgTpInflWqltBod += tpInflWqltBod;
       }
-      if(item.tpInflWqltTp != null && item.tpInflWqltTp.trim() != '' && item.tpInflWqltTp != undefined ){
+      if (item.tpInflWqltTp != null && item.tpInflWqltTp.trim() != '' && item.tpInflWqltTp != undefined) {
         minTpInflWqltTp = Math.min(minTpInflWqltTp, tpInflWqltTp);
         avgTpInflWqltTp += tpInflWqltTp;
       }
@@ -227,12 +235,12 @@ export default function WaterQualityModal({fcltyName='', facilityCd='', searchYe
       avginflAssctBfrWqltCod += inflAssctBfrWqltCod;
       avginflAssctBfrWqltSs += inflAssctBfrWqltSs;
 
-      if(item.noProcessInflAmnt && item.noProcessInflAmnt.toString().trim() != '' && item.noProcessInflAmnt != undefined){
-        const noProcessInflAmnt = Number(item.noProcessInflAmnt.toString().replaceAll(',',''));
+      if (item.noProcessInflAmnt && item.noProcessInflAmnt.toString().trim() != '' && item.noProcessInflAmnt != undefined) {
+        const noProcessInflAmnt = Number(item.noProcessInflAmnt.toString().replaceAll(',', ''));
         avgNoProcessInflAmnt += noProcessInflAmnt;
         maxNoProcessInflAmnt = Math.max(maxNoProcessInflAmnt, noProcessInflAmnt);
         minNoProcessInflAmnt = Math.min(minNoProcessInflAmnt, noProcessInflAmnt);
-        noProcessInflAmntCnt +=1;
+        noProcessInflAmntCnt += 1;
       }
 
       avgInfoRnDay += infoRnDay;
@@ -241,18 +249,18 @@ export default function WaterQualityModal({fcltyName='', facilityCd='', searchYe
     const newFilteredData = [
       {
         msrDt: '평균',
-        efflWqltBod: filteredData.length==0 || avgEfflWqltBod===0?'0.0':roundNumber((avgEfflWqltBod / filteredData.length), 1),
-        efflWqltToc: filteredData.length==0 || avgefflWqltToc===0?'0.0':roundNumber((avgefflWqltToc / filteredData.length), 1),
-        efflWqltCod: filteredData.length==0 || avgefflWqltCod===0?"(0.0)":"("+roundNumber((avgefflWqltCod / filteredData.length), 1)+")",
-        efflWqltSs: filteredData.length==0 || avgEfflWqltSs===0?'0.0':roundNumber((avgEfflWqltSs / filteredData.length), 1),
-        efflWqltTn: filteredData.length==0 || avgEfflWqltTn ===0?'0.000':roundNumber((avgEfflWqltTn / filteredData.length), 3),
-        efflWqltTp: filteredData.length==0 || avgEfflWqltTp ===0?'0.000':roundNumber((avgEfflWqltTp / filteredData.length), 3),
-        inflAssctBfrWqltBod: filteredData.length==0 || avginflAssctBfrWqltBod===0?'0.0':roundNumber((avginflAssctBfrWqltBod / filteredData.length), 1),
-        inflAssctBfrWqltTn: filteredData.length==0 || avginflAssctBfrWqltTn===0?'0.000':roundNumber((avginflAssctBfrWqltTn / filteredData.length), 3),
-        inflAssctBfrWqltTp: filteredData.length==0 || avgInflAssctBfrWqltTp===0?'0.000':roundNumber((avgInflAssctBfrWqltTp / filteredData.length), 3),
-        inflAssctBfrWqltToc: filteredData.length==0 || avginflAssctBfrWqltToc===0?'0.0':roundNumber((avginflAssctBfrWqltToc / filteredData.length), 1),
-        inflAssctBfrWqltCod: filteredData.length==0 || avginflAssctBfrWqltCod===0?'(0.0)':"("+roundNumber((avginflAssctBfrWqltCod / filteredData.length), 1)+")",
-        inflAssctBfrWqltSs: filteredData.length==0 || avginflAssctBfrWqltSs===0?'0.0':roundNumber((avginflAssctBfrWqltSs / filteredData.length), 1),
+        efflWqltBod: filteredData.length == 0 || avgEfflWqltBod === 0 ? '0.0' : roundNumber((avgEfflWqltBod / filteredData.length), 1),
+        efflWqltToc: filteredData.length == 0 || avgefflWqltToc === 0 ? '0.0' : roundNumber((avgefflWqltToc / filteredData.length), 1),
+        efflWqltCod: filteredData.length == 0 || avgefflWqltCod === 0 ? "(0.0)" : "(" + roundNumber((avgefflWqltCod / filteredData.length), 1) + ")",
+        efflWqltSs: filteredData.length == 0 || avgEfflWqltSs === 0 ? '0.0' : roundNumber((avgEfflWqltSs / filteredData.length), 1),
+        efflWqltTn: filteredData.length == 0 || avgEfflWqltTn === 0 ? '0.000' : roundNumber((avgEfflWqltTn / filteredData.length), 3),
+        efflWqltTp: filteredData.length == 0 || avgEfflWqltTp === 0 ? '0.000' : roundNumber((avgEfflWqltTp / filteredData.length), 3),
+        inflAssctBfrWqltBod: filteredData.length == 0 || avginflAssctBfrWqltBod === 0 ? '0.0' : roundNumber((avginflAssctBfrWqltBod / filteredData.length), 1),
+        inflAssctBfrWqltTn: filteredData.length == 0 || avginflAssctBfrWqltTn === 0 ? '0.000' : roundNumber((avginflAssctBfrWqltTn / filteredData.length), 3),
+        inflAssctBfrWqltTp: filteredData.length == 0 || avgInflAssctBfrWqltTp === 0 ? '0.000' : roundNumber((avgInflAssctBfrWqltTp / filteredData.length), 3),
+        inflAssctBfrWqltToc: filteredData.length == 0 || avginflAssctBfrWqltToc === 0 ? '0.0' : roundNumber((avginflAssctBfrWqltToc / filteredData.length), 1),
+        inflAssctBfrWqltCod: filteredData.length == 0 || avginflAssctBfrWqltCod === 0 ? '(0.0)' : "(" + roundNumber((avginflAssctBfrWqltCod / filteredData.length), 1) + ")",
+        inflAssctBfrWqltSs: filteredData.length == 0 || avginflAssctBfrWqltSs === 0 ? '0.0' : roundNumber((avginflAssctBfrWqltSs / filteredData.length), 1),
         bscFctCd: "",
         bscFctNm: "",
         lclgvrnmntNm: "",
@@ -260,25 +268,25 @@ export default function WaterQualityModal({fcltyName='', facilityCd='', searchYe
         sggNm: "",
         addr: "",
         fctCpc: 0,
-        noProcessInflAmnt : roundNumber(avgNoProcessInflAmnt / noProcessInflAmntCnt, 0),
-        infoRnDay: filteredData.length==0 || avgInfoRnDay===0?'0.0':roundNumber(avgInfoRnDay / filteredData.length, 1),
-        tpInflWqltBod: filteredData.length==0 || avgTpInflWqltBod ===0 ?'0.0':roundNumber(avgTpInflWqltBod / tpInflWqltBodCnt, 1),
-        tpInflWqltTp: filteredData.length==0 || avgTpInflWqltTp === 0?'0.000':roundNumber(avgTpInflWqltTp / tpInflWqltTpCnt, 3)
+        noProcessInflAmnt: roundNumber(avgNoProcessInflAmnt / noProcessInflAmntCnt, 0),
+        infoRnDay: filteredData.length == 0 || avgInfoRnDay === 0 ? '0.0' : roundNumber(avgInfoRnDay / filteredData.length, 1),
+        tpInflWqltBod: filteredData.length == 0 || avgTpInflWqltBod === 0 ? '0.0' : roundNumber(avgTpInflWqltBod / tpInflWqltBodCnt, 1),
+        tpInflWqltTp: filteredData.length == 0 || avgTpInflWqltTp === 0 ? '0.000' : roundNumber(avgTpInflWqltTp / tpInflWqltTpCnt, 3)
       },
       {
-        msrDt : '최대',
-        efflWqltBod : Math.round(maxEfflWqltBod * 10) / 10?roundNumber(maxEfflWqltBod, 1):'0.0',
-        efflWqltToc : Math.round(maxefflWqltToc * 10) / 10?roundNumber(maxefflWqltToc, 1):'0.0',
-        efflWqltCod : Math.round(maxefflWqltCod * 10) / 10?"("+roundNumber(maxefflWqltCod, 1)+")":'(0.0)',
-        efflWqltSs : Math.round(maxEfflWqltSs * 10) / 10?roundNumber(maxEfflWqltSs, 1):'0.0',
-        efflWqltTn : Math.round(maxEfflWqltTn * 1000) / 1000?roundNumber(maxEfflWqltTn, 3):'0.000',
-        efflWqltTp : Math.round(maxEfflWqltTp * 1000) / 1000?roundNumber(maxEfflWqltTp, 3):'0.000',
-        inflAssctBfrWqltBod : Math.round(maxinflAssctBfrWqltBod * 10) / 10?roundNumber(maxinflAssctBfrWqltBod, 1):'0.0',
-        inflAssctBfrWqltTn : Math.round(maxinflAssctBfrWqltTn * 1000) / 1000?roundNumber(maxinflAssctBfrWqltTn, 3):'0.000',
-        inflAssctBfrWqltTp : Math.round(maxInflAssctBfrWqltTp * 1000) / 1000?roundNumber(maxInflAssctBfrWqltTp, 3):'0.000',
-        inflAssctBfrWqltToc : Math.round(maxinflAssctBfrWqltToc * 10) / 10?roundNumber(maxinflAssctBfrWqltToc, 1):'0.0',
-        inflAssctBfrWqltCod : Math.round(maxinflAssctBfrWqltCod * 10) / 10?"("+roundNumber(maxinflAssctBfrWqltCod, 1)+")":'(0.0)',
-        inflAssctBfrWqltSs : Math.round(maxinflAssctBfrWqltSs * 10) / 10?roundNumber(maxinflAssctBfrWqltSs, 1):'0.0',
+        msrDt: '최대',
+        efflWqltBod: Math.round(maxEfflWqltBod * 10) / 10 ? roundNumber(maxEfflWqltBod, 1) : '0.0',
+        efflWqltToc: Math.round(maxefflWqltToc * 10) / 10 ? roundNumber(maxefflWqltToc, 1) : '0.0',
+        efflWqltCod: Math.round(maxefflWqltCod * 10) / 10 ? "(" + roundNumber(maxefflWqltCod, 1) + ")" : '(0.0)',
+        efflWqltSs: Math.round(maxEfflWqltSs * 10) / 10 ? roundNumber(maxEfflWqltSs, 1) : '0.0',
+        efflWqltTn: Math.round(maxEfflWqltTn * 1000) / 1000 ? roundNumber(maxEfflWqltTn, 3) : '0.000',
+        efflWqltTp: Math.round(maxEfflWqltTp * 1000) / 1000 ? roundNumber(maxEfflWqltTp, 3) : '0.000',
+        inflAssctBfrWqltBod: Math.round(maxinflAssctBfrWqltBod * 10) / 10 ? roundNumber(maxinflAssctBfrWqltBod, 1) : '0.0',
+        inflAssctBfrWqltTn: Math.round(maxinflAssctBfrWqltTn * 1000) / 1000 ? roundNumber(maxinflAssctBfrWqltTn, 3) : '0.000',
+        inflAssctBfrWqltTp: Math.round(maxInflAssctBfrWqltTp * 1000) / 1000 ? roundNumber(maxInflAssctBfrWqltTp, 3) : '0.000',
+        inflAssctBfrWqltToc: Math.round(maxinflAssctBfrWqltToc * 10) / 10 ? roundNumber(maxinflAssctBfrWqltToc, 1) : '0.0',
+        inflAssctBfrWqltCod: Math.round(maxinflAssctBfrWqltCod * 10) / 10 ? "(" + roundNumber(maxinflAssctBfrWqltCod, 1) + ")" : '(0.0)',
+        inflAssctBfrWqltSs: Math.round(maxinflAssctBfrWqltSs * 10) / 10 ? roundNumber(maxinflAssctBfrWqltSs, 1) : '0.0',
         bscFctCd: "",
         bscFctNm: "",
         lclgvrnmntNm: "",
@@ -286,25 +294,25 @@ export default function WaterQualityModal({fcltyName='', facilityCd='', searchYe
         sggNm: "",
         addr: "",
         fctCpc: 0,
-        noProcessInflAmnt : roundNumber(maxNoProcessInflAmnt, 0),
-        infoRnDay: Math.round(maxInfoRnDay * 10) / 10?roundNumber(maxInfoRnDay, 1):'0.0',
-        tpInflWqltBod: Math.round(maxTpInflWqltBod * 10) / 10?roundNumber(maxTpInflWqltBod, 1):'0.0',
-        tpInflWqltTp: Math.round(maxTpInflWqltTp * 1000) / 1000?roundNumber(maxTpInflWqltTp, 3):'0.000'
+        noProcessInflAmnt: roundNumber(maxNoProcessInflAmnt, 0),
+        infoRnDay: Math.round(maxInfoRnDay * 10) / 10 ? roundNumber(maxInfoRnDay, 1) : '0.0',
+        tpInflWqltBod: Math.round(maxTpInflWqltBod * 10) / 10 ? roundNumber(maxTpInflWqltBod, 1) : '0.0',
+        tpInflWqltTp: Math.round(maxTpInflWqltTp * 1000) / 1000 ? roundNumber(maxTpInflWqltTp, 3) : '0.000'
       },
       {
-        msrDt : '최소',
-        efflWqltBod : Math.round(minEfflWqltBod * 10) / 10?roundNumber(minEfflWqltBod, 1) : '0.0',
-        efflWqltToc : Math.round(minefflWqltToc * 10) / 10?roundNumber(minefflWqltToc, 1) : '0.0',
-        efflWqltCod : Math.round(minefflWqltCod * 10) / 10?"("+roundNumber(minefflWqltCod, 1)+")" : '(0.0)',
-        efflWqltSs : Math.round(minEfflWqltSs * 10) / 10?roundNumber(minEfflWqltSs, 1) : '0.0',
-        efflWqltTn : Math.round(minEfflWqltTn * 1000) / 1000?roundNumber(minEfflWqltTn, 3) : '0.000',
-        efflWqltTp : Math.round(minEfflWqltTp * 1000) / 1000?roundNumber(minEfflWqltTp, 3) : '0.000',
-        inflAssctBfrWqltBod : Math.round(mininflAssctBfrWqltBod * 10) / 10?roundNumber(mininflAssctBfrWqltBod, 1) : '0.0',
-        inflAssctBfrWqltTn : Math.round(mininflAssctBfrWqltTn * 1000) / 1000?roundNumber(mininflAssctBfrWqltTn, 3) : '0.000',
-        inflAssctBfrWqltTp : Math.round(minInflAssctBfrWqltTp * 1000) / 1000?roundNumber(minInflAssctBfrWqltTp, 3) : '0.000',
-        inflAssctBfrWqltToc : Math.round(mininflAssctBfrWqltToc * 10) / 10?roundNumber(mininflAssctBfrWqltToc, 1) : '0.0',
-        inflAssctBfrWqltCod : Math.round(mininflAssctBfrWqltCod * 10) / 10?"("+roundNumber(mininflAssctBfrWqltCod, 1)+")" : '(0.0)',
-        inflAssctBfrWqltSs : Math.round(mininflAssctBfrWqltSs * 10) / 10?roundNumber(mininflAssctBfrWqltSs, 1) : '0.0',
+        msrDt: '최소',
+        efflWqltBod: Math.round(minEfflWqltBod * 10) / 10 ? roundNumber(minEfflWqltBod, 1) : '0.0',
+        efflWqltToc: Math.round(minefflWqltToc * 10) / 10 ? roundNumber(minefflWqltToc, 1) : '0.0',
+        efflWqltCod: Math.round(minefflWqltCod * 10) / 10 ? "(" + roundNumber(minefflWqltCod, 1) + ")" : '(0.0)',
+        efflWqltSs: Math.round(minEfflWqltSs * 10) / 10 ? roundNumber(minEfflWqltSs, 1) : '0.0',
+        efflWqltTn: Math.round(minEfflWqltTn * 1000) / 1000 ? roundNumber(minEfflWqltTn, 3) : '0.000',
+        efflWqltTp: Math.round(minEfflWqltTp * 1000) / 1000 ? roundNumber(minEfflWqltTp, 3) : '0.000',
+        inflAssctBfrWqltBod: Math.round(mininflAssctBfrWqltBod * 10) / 10 ? roundNumber(mininflAssctBfrWqltBod, 1) : '0.0',
+        inflAssctBfrWqltTn: Math.round(mininflAssctBfrWqltTn * 1000) / 1000 ? roundNumber(mininflAssctBfrWqltTn, 3) : '0.000',
+        inflAssctBfrWqltTp: Math.round(minInflAssctBfrWqltTp * 1000) / 1000 ? roundNumber(minInflAssctBfrWqltTp, 3) : '0.000',
+        inflAssctBfrWqltToc: Math.round(mininflAssctBfrWqltToc * 10) / 10 ? roundNumber(mininflAssctBfrWqltToc, 1) : '0.0',
+        inflAssctBfrWqltCod: Math.round(mininflAssctBfrWqltCod * 10) / 10 ? "(" + roundNumber(mininflAssctBfrWqltCod, 1) + ")" : '(0.0)',
+        inflAssctBfrWqltSs: Math.round(mininflAssctBfrWqltSs * 10) / 10 ? roundNumber(mininflAssctBfrWqltSs, 1) : '0.0',
         bscFctCd: "",
         bscFctNm: "",
         lclgvrnmntNm: "",
@@ -312,10 +320,10 @@ export default function WaterQualityModal({fcltyName='', facilityCd='', searchYe
         sggNm: "",
         addr: "",
         fctCpc: 0,
-        noProcessInflAmnt : roundNumber(minNoProcessInflAmnt, 0),
-        infoRnDay: Math.round(minInfoRnDay * 10) / 10?'0.0':roundNumber(minInfoRnDay, 1),
-        tpInflWqltBod: Math.round(minTpInflWqltBod * 10) / 10 && minTpInflWqltBod != 99999999?roundNumber(minTpInflWqltBod, 1):'0.0',
-        tpInflWqltTp: Math.round(minTpInflWqltTp * 1000) / 1000 && minTpInflWqltTp != 99999999?roundNumber(minTpInflWqltTp, 3):'0.000'
+        noProcessInflAmnt: roundNumber(minNoProcessInflAmnt, 0),
+        infoRnDay: Math.round(minInfoRnDay * 10) / 10 ? roundNumber(minInfoRnDay, 1) : '0.0',
+        tpInflWqltBod: Math.round(minTpInflWqltBod * 10) / 10 && minTpInflWqltBod != 99999999 ? roundNumber(minTpInflWqltBod, 1) : '0.0',
+        tpInflWqltTp: Math.round(minTpInflWqltTp * 1000) / 1000 && minTpInflWqltTp != 99999999 ? roundNumber(minTpInflWqltTp, 3) : '0.000'
       },
       ...filteredData
     ];
@@ -323,20 +331,6 @@ export default function WaterQualityModal({fcltyName='', facilityCd='', searchYe
     return newFilteredData;
   }
 
-  // 날짜 필터링 관련 상태
-  const [copyYearList, setCopyYearList] = useState<FacilityWaterQltyProps[]>([]);
-  const [chongInWaterQltyYearList, setChongInWaterQltyYearList] = useState<FacilityWaterQltyProps[]>([]);
-  
-  useEffect(() => {
-    searchFacilityWaterQltyListHist(searchYear, facilityCd);
-  }, [searchYear, facilityCd, searchFacilityWaterQltyListHist]);
-
-  useEffect(() => {
-    const filteredYearData = setFilterAfterData(facilityWaterQltyYearList);
-    setCopyYearList(filteredYearData as FacilityWaterQltyProps[]);
-    setChongInWaterQltyYearList(filteredYearData as FacilityWaterQltyProps[]);
-  }, [facilityWaterQltyYearList]);
-
   const yesterDay = new Date();
   yesterDay.setDate(yesterDay.getDate() - 1);
   const yesterDayStr = yesterDay.toISOString().split('T')[0];
@@ -350,14 +344,14 @@ export default function WaterQualityModal({fcltyName='', facilityCd='', searchYe
 
   const filterData = useCallback((returnType: ReturnType<FacilityWaterQltyProps>) => {
     const filteredData = setFilterAfterData(returnType.filteredList);
-    setCopyYearList(filteredData as FacilityWaterQltyProps[]);
+    setCopyYearList(filteredData as FacilityWaterQltyProps[]); // 처리시설/총인설비 수질현황
   }, []);
 
   const excelDownload = () => {
-    
-    if(tabName === 'tab_num1'){
+
+    if (tabName === 'tab_num1') { //처리시설 수질현황
       const excelDownList: modalExcelType[] = [];
-      if(copyYearList.length > 0){
+      if (copyYearList.length > 0) {
         copyYearList.forEach((item) => {
           excelDownList.push({
             날짜: item.msrDt,
@@ -371,44 +365,48 @@ export default function WaterQualityModal({fcltyName='', facilityCd='', searchYe
             "유출SS(mg/L)": CommaToNumber(item.efflWqltSs),
             "유출TN(mg/L)": CommaToNumber(item.efflWqltTn),
             "유출TP(mg/L)": CommaToNumber(item.efflWqltTp),
-            "강우량(mm/일)": CommaToNumber(item.infoRnDay?item.infoRnDay.toString():"0.0"),
+            "강우량(mm/일)": CommaToNumber(item.infoRnDay ? item.infoRnDay.toString() : "0.0"),
           });
         });
       }
       if (excelDownList && excelDownList.length > 0) {
         downloadExcelFormat(
-          { data: JSON.parse(JSON.stringify(excelDownList))
-            , fileName: searchYear+'년 '+fcltyName + ' 수질현황'
+          {
+            data: JSON.parse(JSON.stringify(excelDownList))
+            , fileName: searchYear + '년 ' + fcltyName + ' 수질현황'
             , sheetNameArray: [fcltyName + ' 수질현황']
             , headerRange: 'A1:L1'
-            , decimalArray1: [1,2,3,6,7,8,11]
-            , decimalArray3: [4,5,9,10]
+            , decimalArray1: [1, 2, 3, 6, 7, 8, 11]
+            , decimalArray3: [4, 5, 9, 10]
           });
       } else if (prevExcelListRef.current && prevExcelListRef.current.length > 0) {
         alert('다운받을 데이터가 없습니다.');
       }
       prevExcelListRef.current = excelDownList;
-    }else{
+    } else { // 총인설비 수질현황 
       const excelDownList: modalChoinginExcelType[] = [];
-      if(chongInWaterQltyYearList.length > 0){
-        chongInWaterQltyYearList.forEach((item) => {
+      // if (chongInWaterQltyYearList.length > 0) {
+      //   chongInWaterQltyYearList.forEach((item) => {
+      if (copyYearList.length > 0) {
+        copyYearList.forEach((item) => {
           excelDownList.push({
             날짜: item.msrDt,
             "유입BOD(mg/L)": CommaToNumber(item.tpInflWqltBod),
             "유입TP(mg/L)": CommaToNumber(item.tpInflWqltTp),
             "유출BOD(mg/L)": CommaToNumber(item.efflWqltBod),
-            "유출TP(mg/L)": CommaToNumber(item.efflWqltTn),
+            "유출TP(mg/L)": CommaToNumber(item.efflWqltTp),
           });
         });
       }
       if (excelDownList && excelDownList.length > 0) {
         downloadExcelFormat(
-          { data: JSON.parse(JSON.stringify(excelDownList))
-            , fileName: searchYear+'년 '+fcltyName + ' 총인설비수질현황'
+          {
+            data: JSON.parse(JSON.stringify(excelDownList))
+            , fileName: searchYear + '년 ' + fcltyName + ' 총인설비수질현황'
             , sheetNameArray: [fcltyName + ' 총인설비수질현황']
             , headerRange: 'A1:E1'
-            , decimalArray1: [1,3]
-            , decimalArray3: [2,4]
+            , decimalArray1: [1, 3]
+            , decimalArray3: [2, 4]
           });
       } else if (prevChoinginExcelListRef.current && prevChoinginExcelListRef.current.length > 0) {
         alert('다운받을 데이터가 없습니다.');
@@ -424,168 +422,127 @@ export default function WaterQualityModal({fcltyName='', facilityCd='', searchYe
   return (
     <>
       <UITab tabList={tabList1} defaultValue="tab_num1" onValueChange={(value) => setTabName(value)}>
-        <Button className={btnClass} style={{float: 'right'}} color="green" onClick={excelDownload}>
+        <Button className={btnClass} style={{ float: 'right' }} color="green" onClick={excelDownload}>
           {"엑셀다운로드"}
         </Button>
         {/* 처리시설 수질현황 */}
         <TabsContent value="tab_num1">
           <UITab tabList={tabList2} defaultValue="tab_term_year">
-            <TabsContent value="tab_term_year">
+            <TabsContent value="tab_term_year">{/* 연간 */}
               <FacilityTermModalHeader<FacilityWaterQltyProps>
                 searchList={facilityWaterQltyYearList}
-                fcltyCd={facilityCd}
-                fcltyName={fcltyName}
-                tabName={"tab_term_year"}
-                searchYear={searchYear}
-                ref={ref}
-                queryClick={filterData}
+                fcltyCd={facilityCd} fcltyName={fcltyName} tabName="tab_term_year"
+                searchYear={searchYear} ref={ref} queryClick={filterData}
               />
               <div className="overflow-y-auto h-[350px]">
-                <UiTable 
-                  headName={undefined} 
-                  tableData={copyYearList} 
-                  headlist={Number(searchYear)<COD_YEAR?upHeadListModalYearCod:upHeadListModalYear} 
-                  pageSize={0} 
-                  total={0} 
-                  cellClick={undefined} 
-                  onPageChange={() => {}} 
-                  className="h-[310px]"
-                  boldArray={[0,1,2]}
+                <UiTable
+                  headName={undefined}
+                  tableData={copyYearList}
+                  headlist={Number(searchYear) < COD_YEAR ? upHeadListModalYearCod : upHeadListModalYear}
+                  pageSize={0} total={0} cellClick={undefined}
+                  onPageChange={() => { }} className="h-[310px]" boldArray={[0, 1, 2]}
                 >
                   <HeadMakeColSpan upHeadList={upHeadListModalYear} layoutNum={3} />
                 </UiTable>
               </div>
-              <div className="card-header">
+              <div className="card-header border-t mt-1">
                 <h3 className="text-2xl font-medium text-label">수질 TMS</h3>
-                {/*<h3 className="text-2xl font-medium text-label text-right">({msrmtDate?msrmtDate.substring(0,4)+'-'+msrmtDate.substring(4,6)+'-'+msrmtDate.substring(6,8):yesterDayStr})</h3> */}
+                <h3 className="text-2xl font-medium text-label text-right">
+                  ({msrmtDate ? msrmtDate.substring(0, 4) + '-' + msrmtDate.substring(4, 6) + '-' + msrmtDate.substring(6, 8) : yesterDayStr})
+                </h3>
               </div>
               <div className="overflow-y-auto h-[250px]">
-                <UiTable 
-                  headName={undefined} 
-                  tableData={tmsList} 
-                  headlist={upHeadListModalTms} 
-                  pageSize={0} 
-                  total={0} 
-                  cellClick={undefined} 
-                  onPageChange={() => {}}
-                  boldArray={[0,1,2]}
+                <UiTable
+                  headName={undefined}
+                  tableData={tmsList}
+                  headlist={upHeadListModalTms}
+                  pageSize={0} total={0} cellClick={undefined}
+                  onPageChange={() => { }} boldArray={[0, 1, 2]}
                 >
                   <HeadMakeColSpan upHeadList={upHeadListModalTms} layoutNum={4} />
                 </UiTable>
-                {msrmtDate != yesterDayStr?.replaceAll('-','') ? (
-                  <UnderComment commentArray={["전날 데이터 결측으로 인해 가장 최근 데이터 표출함"]} divHeight="0"/>
+                {msrmtDate != yesterDayStr?.replaceAll('-', '') ? (
+                  <UnderComment commentArray={["전날 데이터 결측으로 인해 가장 최근 데이터 표출함"]} divHeight="0" />
                 ) : null}
               </div>
             </TabsContent>
 
-            <TabsContent value="tab_term_summer">
+            <TabsContent value="tab_term_summer">{/* 하절기 */}
               <FacilityTermModalHeader<FacilityWaterQltyProps>
                 searchList={facilityWaterQltyYearList}
-                fcltyCd={facilityCd}
-                fcltyName={fcltyName} 
-                tabName="tab_term_summer" 
-                searchYear={searchYear}
-                ref={ref}
-                queryClick={filterData}
+                fcltyCd={facilityCd} fcltyName={fcltyName} tabName="tab_term_summer"
+                searchYear={searchYear} ref={ref} queryClick={filterData}
               />
               <div className="overflow-y-auto h-[500px]">
-                <UiTable 
+                <UiTable
                   headName={undefined}
                   tableData={copyYearList}
-                  headlist={Number(searchYear)<COD_YEAR?upHeadListModalYearCod:upHeadListModalYear}
-                  pageSize={0}
-                  total={0}
-                  cellClick={undefined}
-                  onPageChange={() => { } }
-                  className="h-[500px]"
-                  boldArray={[0,1,2]}
+                  headlist={Number(searchYear) < COD_YEAR ? upHeadListModalYearCod : upHeadListModalYear}
+                  pageSize={0} total={0} cellClick={undefined}
+                  onPageChange={() => { }} className="h-[500px]" boldArray={[0, 1, 2]}
                 >
                   <HeadMakeColSpan upHeadList={upHeadListModalYear} layoutNum={3} />
                 </UiTable>
               </div>
             </TabsContent>
 
-            <TabsContent value="tab_term_winter">
+            <TabsContent value="tab_term_winter">{/* 동절기 */}
               <FacilityTermModalHeader<FacilityWaterQltyProps>
                 searchList={facilityWaterQltyYearList}
-                fcltyCd={facilityCd}
-                fcltyName={fcltyName} 
-                tabName="tab_term_winter" 
-                searchYear={searchYear}
-                ref={ref}
-                queryClick={filterData}
+                fcltyCd={facilityCd} fcltyName={fcltyName} tabName="tab_term_winter"
+                searchYear={searchYear} ref={ref} queryClick={filterData}
               />
               <div className="overflow-y-auto h-[500px]">
-                <UiTable 
-                  headName={undefined} 
-                  tableData={copyYearList} 
-                  headlist={Number(searchYear)<COD_YEAR?upHeadListModalYearCod:upHeadListModalYear} 
-                  pageSize={0} 
-                  total={0} 
-                  cellClick={undefined} 
-                  onPageChange={() => {}} 
-                  className="h-[500px]"
-                  boldArray={[0,1,2]}
+                <UiTable
+                  headName={undefined}
+                  tableData={copyYearList}
+                  headlist={Number(searchYear) < COD_YEAR ? upHeadListModalYearCod : upHeadListModalYear}
+                  pageSize={0} total={0} cellClick={undefined}
+                  onPageChange={() => { }} className="h-[500px]" boldArray={[0, 1, 2]}
                 >
                   <HeadMakeColSpan upHeadList={upHeadListModalYear} layoutNum={3} />
                 </UiTable>
               </div>
             </TabsContent>
 
-            <TabsContent value="tab_term_chuncheon">
+            <TabsContent value="tab_term_chuncheon">{/* 청천시 */}
               <FacilityTermModalHeader<FacilityWaterQltyProps>
                 searchList={facilityWaterQltyYearList}
-                fcltyCd={facilityCd}
-                fcltyName={fcltyName} 
-                tabName="tab_term_chuncheon" 
-                searchYear={searchYear}
-                ref={ref}
-                queryClick={filterData}
+                fcltyCd={facilityCd} fcltyName={fcltyName} tabName="tab_term_chuncheon"
+                searchYear={searchYear} ref={ref} queryClick={filterData}
               />
               <div className="overflow-y-auto h-[500px]">
-                <UiTable 
-                  headName={undefined} 
-                  tableData={copyYearList} 
-                  headlist={Number(searchYear)<COD_YEAR?upHeadListModalYearCod:upHeadListModalYear} 
-                  pageSize={0} 
-                  total={0} 
-                  cellClick={undefined} 
-                  onPageChange={() => {}} 
-                  className="h-[500px]"
-                  boldArray={[0,1,2]}
+                <UiTable
+                  headName={undefined}
+                  tableData={copyYearList}
+                  headlist={Number(searchYear) < COD_YEAR ? upHeadListModalYearCod : upHeadListModalYear}
+                  pageSize={0} total={0} cellClick={undefined}
+                  onPageChange={() => { }} className="h-[500px]" boldArray={[0, 1, 2]}
                 >
                   <HeadMakeColSpan upHeadList={upHeadListModalYear} layoutNum={3} />
                 </UiTable>
               </div>
-              <UnderComment commentArray={commentArrayChungchun} divHeight="10"/>
+              <UnderComment commentArray={commentArrayChungchun} divHeight="10" />
             </TabsContent>
 
-            <TabsContent value="tab_term_rain">
+            <TabsContent value="tab_term_rain">{/* 강우시 */}
               <FacilityTermModalHeader<FacilityWaterQltyProps>
                 searchList={facilityWaterQltyYearList}
-                fcltyCd={facilityCd}
-                fcltyName={fcltyName} 
-                tabName="tab_term_rain" 
-                searchYear={searchYear}
-                ref={ref}
-                queryClick={filterData}
+                fcltyCd={facilityCd} fcltyName={fcltyName} tabName="tab_term_rain"
+                searchYear={searchYear} ref={ref} queryClick={filterData}
               />
               <div className="overflow-y-auto h-[500px]">
-                <UiTable 
-                  headName={undefined} 
-                  tableData={copyYearList} 
-                  headlist={Number(searchYear)<COD_YEAR?upHeadListModalYearCod:upHeadListModalYear} 
-                  pageSize={0} 
-                  total={0} 
-                  cellClick={undefined} 
-                  onPageChange={() => {}} 
-                  className="h-[500px]"
-                  boldArray={[0,1,2]}
+                <UiTable
+                  headName={undefined}
+                  tableData={copyYearList}
+                  headlist={Number(searchYear) < COD_YEAR ? upHeadListModalYearCod : upHeadListModalYear}
+                  pageSize={0} total={0} cellClick={undefined}
+                  onPageChange={() => { }} className="h-[500px]" boldArray={[0, 1, 2]}
                 >
                   <HeadMakeColSpan upHeadList={upHeadListModalYear} layoutNum={3} />
                 </UiTable>
               </div>
-              <UnderComment commentArray={commentArrayRain} divHeight="10"/>
+              <UnderComment commentArray={commentArrayRain} divHeight="10" />
             </TabsContent>
           </UITab>
         </TabsContent>
@@ -593,81 +550,57 @@ export default function WaterQualityModal({fcltyName='', facilityCd='', searchYe
         {/* 총인설비 수질현황 */}
         <TabsContent value="tab_num2" >
           <UITab tabList={tabList3} defaultValue="tab_term_year_chongin">
-            <TabsContent value="tab_term_year_chongin">
+            <TabsContent value="tab_term_year_chongin">{/* 연간 */}
               <FacilityTermModalHeader<FacilityWaterQltyProps>
                 searchList={chongInWaterQltyYearList}
-                fcltyCd={facilityCd}
-                fcltyName={fcltyName} 
-                tabName="tab_term_year" 
-                searchYear={searchYear}
-                ref={ref}
-                queryClick={filterData}
+                fcltyCd={facilityCd} fcltyName={fcltyName} tabName="tab_term_year"
+                searchYear={searchYear} ref={ref} queryClick={filterData}
               />
               <div className="overflow-y-auto h-[550px]">
-                <UiTable 
-                  headName={undefined} 
-                  tableData={copyYearList} 
-                  headlist={upHeadListModalChongIn} 
-                  pageSize={0} 
-                  total={0} 
-                  cellClick={undefined} 
-                  onPageChange={() => {}} 
-                  className="h-[500px]"
-                  boldArray={[0,1,2]}
-                >
-                  <HeadMakeColSpan upHeadList={upHeadListModalChongIn} layoutNum={5} />
-                </UiTable>
-              </div>
-            </TabsContent>
-
-            <TabsContent value="tab_term_summer_chongin">
-              <FacilityTermModalHeader<FacilityWaterQltyProps>
-                searchList={chongInWaterQltyYearList}
-                fcltyCd={facilityCd}
-                fcltyName={fcltyName} 
-                tabName="tab_term_summer" 
-                searchYear={searchYear}
-                ref={ref}
-                queryClick={filterData}
-              />
-              <div className="overflow-y-auto h-[550px]">
-                <UiTable 
-                  headName={undefined} 
-                  tableData={copyYearList} 
-                  headlist={upHeadListModalChongIn} 
-                  pageSize={0} 
-                  total={0} 
-                  cellClick={undefined} 
-                  onPageChange={() => {}} 
-                  className="h-[500px]"
-                  boldArray={[0,1,2]}
-                >
-                  <HeadMakeColSpan upHeadList={upHeadListModalChongIn} layoutNum={5} />
-                </UiTable>
-              </div>
-            </TabsContent>
-
-            <TabsContent value="tab_term_winter_chongin">
-              <FacilityTermModalHeader<FacilityWaterQltyProps>
-                searchList={chongInWaterQltyYearList}
-                fcltyCd={facilityCd}
-                fcltyName={fcltyName} 
-                tabName="tab_term_winter" 
-                searchYear={searchYear}
-                ref={ref}
-                queryClick={filterData}
-              />
-              <div className="overflow-y-auto h-[550px]">
-                <UiTable 
-                  headName={undefined} 
-                  tableData={copyYearList} 
+                <UiTable
+                  headName={undefined}
+                  tableData={copyYearList}
                   headlist={upHeadListModalChongIn}
-                  pageSize={0} 
-                  total={0} 
-                  cellClick={undefined} 
-                  onPageChange={() => {}} 
-                  className="h-[500px]"
-                  boldArray={[0,1,2]}
+                  pageSize={0} total={0} cellClick={undefined}
+                  onPageChange={() => { }} className="h-[500px]" boldArray={[0, 1, 2]}
+                >
+                  <HeadMakeColSpan upHeadList={upHeadListModalChongIn} layoutNum={5} />
+                </UiTable>
+              </div>
+            </TabsContent>
+
+            <TabsContent value="tab_term_summer_chongin">{/* 하절기 */}
+              <FacilityTermModalHeader<FacilityWaterQltyProps>
+                searchList={chongInWaterQltyYearList}
+                fcltyCd={facilityCd} fcltyName={fcltyName} tabName="tab_term_summer"
+                searchYear={searchYear} ref={ref} queryClick={filterData}
+              />
+              <div className="overflow-y-auto h-[550px]">
+                <UiTable
+                  headName={undefined}
+                  tableData={copyYearList}
+                  headlist={upHeadListModalChongIn}
+                  pageSize={0} total={0} cellClick={undefined}
+                  onPageChange={() => { }} className="h-[500px]" boldArray={[0, 1, 2]}
+                >
+                  <HeadMakeColSpan upHeadList={upHeadListModalChongIn} layoutNum={5} />
+                </UiTable>
+              </div>
+            </TabsContent>
+
+            <TabsContent value="tab_term_winter_chongin">{/* 동절기 */}
+              <FacilityTermModalHeader<FacilityWaterQltyProps>
+                searchList={chongInWaterQltyYearList}
+                fcltyCd={facilityCd} fcltyName={fcltyName} tabName="tab_term_winter"
+                searchYear={searchYear} ref={ref} queryClick={filterData}
+              />
+              <div className="overflow-y-auto h-[550px]">
+                <UiTable
+                  headName={undefined}
+                  tableData={copyYearList}
+                  headlist={upHeadListModalChongIn}
+                  pageSize={0} total={0} cellClick={undefined}
+                  onPageChange={() => { }} className="h-[500px]" boldArray={[0, 1, 2]}
                 >
                   <HeadMakeColSpan upHeadList={upHeadListModalChongIn} layoutNum={5} />
                 </UiTable>
@@ -678,4 +611,4 @@ export default function WaterQualityModal({fcltyName='', facilityCd='', searchYe
       </UITab>
     </>
   );
-}
+}

apps/fo/app/pages/(with-layout)/facilityWaterQlty/page.tsx

@@ -6,13 +6,13 @@
 
 "use client"
 
-import { useFoStore } from "@/app/store";
+import { StoreContext, useFoStore } from "@/app/store";
 import type { TableUpperProps } from "@/app/store/common";
 import type { FacilityWaterQltyProps } from "@/app/store/facilityWaterQlty";
 import { ContentsDiv, downloadExcelFormat, MainDiv, SearchBaseForm, SearchInput, SelectBox, Title, UiModal, UiTable, type ReturnType } from "@common/business_components";
 import ListDiv from "@common/business_components/ui/list_div";
 import LoadingOverlay from "@common/business_components/ui/loadingBar";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useContext, useEffect, useRef, useState } from "react";
 import WaterQualityModal from "./modal/page";
 
 export default function ProcessFacilitySearch() {
@@ -21,9 +21,14 @@ export default function ProcessFacilitySearch() {
     , initializeCommonData
     , searchFacilityWaterQltyList
   } = useFoStore((state) => state) || { FacilityWaterQltyList: { facilityWaterQltyList: [], facilityWaterQltyCount: 0 } };
+  const store = useContext(StoreContext);
+
+  if (!store) {
+    throw new Error("StoreContext is not available. Ensure StoreProvider is mounted.");
+  }
 
   const {
-    isInit, 
+    isInit,
     selectUpdownData,
     selectOperationData,
     selectSidoData,
@@ -36,6 +41,11 @@ export default function ProcessFacilitySearch() {
     btnClass
   } = Common;
 
+  const defaultSearchYear =
+    selectSearchYear.find((item) => item.selected)?.val ||
+    selectSearchYear[0]?.val ||
+    "0";
+
   const {
     mainLabelArray,
     upHeadList1,
@@ -43,13 +53,13 @@ export default function ProcessFacilitySearch() {
     upHeadList3,
     facilityWaterQltyList,
     facilityWaterQltyCount,
-    excelList,
     isLoading,
   } = FacilityWaterQltyMain;
 
   const mainList: FacilityWaterQltyProps[] = facilityWaterQltyList || [];
   const [initTrigger, setInitTrigger] = useState<boolean>(false);
-  const [excelTrigger, setExcelTrigger] = useState<boolean>(false);
+  // 엑셀다운로드 트리거
+  const [isExcelDownClick, setIsExcelDownClick] = useState<boolean>(false);
   // 그리드 관련
   const [resetPage, setResetPage] = useState<boolean>(false);
   const searchInputRef = useRef<HTMLDivElement & HTMLInputElement>(null);
@@ -57,7 +67,7 @@ export default function ProcessFacilitySearch() {
   const [upheadList, setUpheadList] = useState<TableUpperProps[]>(upHeadList1);
   const [fcltyName, setFcltyName] = useState<string>("");
   const [operationValue, setOperationValue] = useState<string>("0");
-  const [searchYearValue, setSearchYearValue] = useState<string>(selectSearchYear[0]?.val || "0");
+  const [searchYearValue, setSearchYearValue] = useState<string>(defaultSearchYear);
   const [fcltCpct, setFcltCpct] = useState<string>("0");
 
   // 모달 상태 추가
@@ -66,27 +76,27 @@ export default function ProcessFacilitySearch() {
   const [fcltyCd, setFcltyCd] = useState<string>("");
   const [modalYear, setModalYear] = useState<string>("");
 
-  const searchFcltyQltyList = useCallback(({ partValue, regionValue, unitWaterShedValue, middleRegionValue, envPartValue, sidoValue, sigunValue }: ReturnType, pageNo: number, pageCnt:number=20) => {
+  const searchFcltyQltyList = useCallback(async ({ partValue, regionValue, unitWaterShedValue, middleRegionValue, envPartValue, sidoValue, sigunValue }: ReturnType, pageNo: number, pageCnt: number = 20) => {
     let nameCd, partStr;
     switch (partValue) {
       case 'R':
         if (regionValue !== '0') {
-          if(unitWaterShedValue==='0') nameCd = regionValue;
-          else if (middleRegionValue==='0') nameCd = unitWaterShedValue;
+          if (unitWaterShedValue === '0') nameCd = regionValue;
+          else if (middleRegionValue === '0') nameCd = unitWaterShedValue;
           else nameCd = middleRegionValue;
         }
         partStr = partValue
         break;
       default:
-        if(sidoValue !== '0') nameCd = ref.current.sidoValue!="0"?ref.current.sidoValue:sidoValue;
-        if(sigunValue !== '0') nameCd = sigunValue;
-          partStr = envPartValue !== '0' ? envPartValue:partValue;
-          break;
+        if (sidoValue !== '0') nameCd = ref.current.sidoValue != "0" ? ref.current.sidoValue : sidoValue;
+        if (sigunValue !== '0') nameCd = sigunValue;
+        partStr = envPartValue !== '0' ? envPartValue : partValue;
+        break;
     }
-    if(partStr ==='G'){
-      searchFacilityWaterQltyList(pageNo, pageCnt, searchYearValue);
-    }else{
-      searchFacilityWaterQltyList(pageNo, pageCnt, searchYearValue, partStr, nameCd || '0', fcltCpct, operationValue, fcltyName.trim() !== "" || fcltyName.trim() !== null ? fcltyName : undefined);
+    if (partStr === 'G') {
+      await searchFacilityWaterQltyList(pageNo, pageCnt, searchYearValue);
+    } else {
+      await searchFacilityWaterQltyList(pageNo, pageCnt, searchYearValue, partStr, nameCd || '0', fcltCpct, operationValue, fcltyName.trim() !== "" || fcltyName.trim() !== null ? fcltyName : undefined);
     }
   }, [operationValue, fcltyName, searchFacilityWaterQltyList, searchYearValue, fcltCpct]);
 
@@ -96,7 +106,7 @@ export default function ProcessFacilitySearch() {
     // 상태값 설정
     setFcltCpct(selectUpdownData[0]?.val || "0");
     setOperationValue(selectOperationData[0]?.val || "0");
-    setSearchYearValue(selectSearchYear[0]?.val || "0");
+    setSearchYearValue(defaultSearchYear);
     // SearchInputSelect 초기화
     setFcltyName("");
     if (searchInputRef.current) {
@@ -138,42 +148,60 @@ export default function ProcessFacilitySearch() {
 
   useEffect(() => {
     if (!isInit) {
-      if(!initTrigger){
+      if (!initTrigger) {
         initializeCommonData();
         searchFcltyQltyList(ref.current, 1, 10);
-        setInitTrigger(true);  
+        setInitTrigger(true);
       }
     }
   }, [isInit, initializeCommonData, searchFacilityWaterQltyList, searchFcltyQltyList, initTrigger]);
 
-  useEffect(() => {
-    if(!excelTrigger) return;
-
-    if (excelList && excelList.length > 0) {
-      downloadExcelFormat(
-        {
-          data: excelList as unknown as JSON[], 
-          fileName: '시설별 수질현황', 
-          sheetNameArray: ['시설별 수질현황'], 
-          headerRange: 'A1:T1',
-          decimalArray1:[10,11,12,15,16,17],
-          decimalArray3:[13,14,18,19]
-        }
-      );
-    }
-  }, [excelList, excelTrigger]);
-
-  const chkVal = useCallback((returntype:ReturnType) => {
+  const chkVal = useCallback((returntype: ReturnType) => {
     // setWidthSize(returntype.partValue=='A' ?"w-[120%]":"w-[130%]")
-    setUpheadList(returntype.partValue == 'R' ? upHeadList2 : returntype.partValue == 'G'?upHeadList3:upHeadList1);
+    setUpheadList(returntype.partValue == 'R' ? upHeadList2 : returntype.partValue == 'G' ? upHeadList3 : upHeadList1);
     setResetPage(true);
   }, [upHeadList1, upHeadList2, upHeadList3]);
 
-  const excelDownload = useCallback(() => {
-    setExcelTrigger(true);
-    searchFcltyQltyList(ref.current, 1, 10000);
-  }, [searchFcltyQltyList]);
-  
+  const excelDownload = useCallback(async () => {
+    if (isExcelDownClick) return;
+    if (ref.current.partValue === 'A') { // 행정별
+      if (!ref.current.sidoValue || ref.current.sidoValue === '0') {
+        alert('엑셀 다운로드는 시도 조건을 선택한 후 이용 가능합니다.');
+        return;
+      }
+    } else if (ref.current.partValue === 'R') { // 유역별
+      if (!ref.current.regionValue || ref.current.regionValue === '0') {
+        alert('엑셀 다운로드는 유역 조건을 선택한 후 이용 가능합니다.');
+        return;
+      }
+    } else if (ref.current.partValue === 'G') { // 환경청별
+      if (!ref.current.envPartValue || ref.current.envPartValue === '0') {
+        alert('엑셀 다운로드는 환경청 조건을 선택한 후 이용 가능합니다.');
+        return;
+      }
+    } 
+    setIsExcelDownClick(true);
+    try {
+      await searchFcltyQltyList(ref.current, 1, 10000);
+      const latestExcelList = store.getState().FacilityWaterQltyMain.excelList || [];
+      if (latestExcelList.length > 0) {
+        downloadExcelFormat(
+          {
+            data: latestExcelList as unknown as JSON[],
+            fileName: '시설별 수질현황',
+            sheetNameArray: ['시설별 수질현황'],
+            headerRange: 'A1:T1',
+            decimalArray0: [9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19]
+          }
+        );
+      } else {
+        alert("조회된 결과가 없습니다.");
+      }
+    } finally {
+      setIsExcelDownClick(false);
+    }
+  }, [isExcelDownClick, searchFcltyQltyList, store]);
+
   const handlePageChange = useCallback((page: number) => {
     setResetPage(false);
     searchFcltyQltyList(ref.current, page, 10);
@@ -201,8 +229,9 @@ export default function ProcessFacilitySearch() {
           btnClass={btnClass}
           queryClick={chkVal}
           excelClick={excelDownload}
+          excelDisabled={isExcelDownClick}
           initClick={resetVal}
-          ref={ref} isAdmin={false} initSidoValue={"11"}/>
+          ref={ref} isAdmin={false} initSidoValue={"11"} />
         <ListDiv>
           <LoadingOverlay isLoading={isLoading} />
           <div className="h-full w-full overflow-x-scroll min-[1200px]:overflow-x-hidden">
@@ -215,7 +244,7 @@ export default function ProcessFacilitySearch() {
       {selectedRow !== null && (
         <UiModal
           body={<WaterQualityModal fcltyName={fcltyNm} facilityCd={fcltyCd} searchYear={modalYear}></WaterQualityModal>}
-          bodyClass="sm:max-w-[90vw] w-[1300px] h-[920px]"
+          bodyClass="sm:max-w-[90vw] w-[1300px] h-[100dvh] max-h-[930px] overflow-y-auto"
           open={selectedRow !== null}
           onOpenChange={(open) => !open && closeModal()}
           noHeaderYn="Y"
@@ -224,4 +253,4 @@ export default function ProcessFacilitySearch() {
       )}
     </MainDiv>
   );
-}
+}

apps/fo/app/pages/(with-layout)/flowRate/modal/page.tsx

@@ -8,7 +8,8 @@
 import FacilityTermModalHeader from "@/app/components/common/FacilityTermModalHeader";
 import { useFoStore } from "@/app/store";
 import type { FlowRateModalInterface, modalExcelType } from "@/app/store/flowRate";
-import { downloadExcel, UITab, UiTable } from "@common/business_components/ui";
+import { dataFormSetting } from "@/app/store/flowRate";
+import { downloadExcelFormat, UITab, UiTable } from "@common/business_components/ui";
 import { Button, TabsContent } from "@common/components/ui";
 import { useCallback, useEffect, useRef, useState } from "react";
 import type { ReturnType } from "../../../../components/common/FacilityTermModalHeader";
@@ -33,12 +34,10 @@ export default function FlowRateModal(props: { fcltyName: string; facilityCd: st
   const { btnClass } = Common;
   const [copyYearList, setCopyYearList] = useState<FlowRateModalInterface[]>([]);
   const [isLoading, setIsLoading] = useState(true);
+  const [activeTab, setActiveTab] = useState<string>("tab_term_year");
   const prevExcelListRef = useRef<modalExcelType[] | null>(null);
-  const {
-    modalFlowRateListYear,
-    upHeadListFlowRateModalYear,
-  } = FlowRateModal;
-  
+  const { modalFlowRateListYear, upHeadListFlowRateModalYear, } = FlowRateModal;
+
   const ref = useRef<ReturnType<FlowRateModalInterface>>({
     startDate: new Date(),
     endDate: new Date(),
@@ -52,11 +51,11 @@ export default function FlowRateModal(props: { fcltyName: string; facilityCd: st
     const filteredData = setFilterAfterData(returnType.filteredList as FlowRateModalInterface[]);
     setCopyYearList(filteredData);
   }, []);
-  
+
   // 필터링 된 후 최대, 최소, 평균 값 계산
   const setFilterAfterData = (filteredData: FlowRateModalInterface[]) => {
     if (!filteredData || filteredData.length === 0) return [];
-    
+
     // 쉼표가 포함된 문자열을 숫자로 변환하는 함수
     const parseNumber = (value: string | number | null | undefined): number => {
       if (value === null || value === undefined || value === '') return 0;
@@ -79,7 +78,7 @@ export default function FlowRateModal(props: { fcltyName: string; facilityCd: st
     let minreturnAmnt = parseNumber(filteredData[0]?.returnAmnt);
     let minefflAmnt = parseNumber(filteredData[0]?.efflAmnt);
     let mininfoRnDay = parseNumber(filteredData[0]?.infoRnDay && filteredData[0]?.infoRnDay.toString().trim() !== 'x' ? filteredData[0]?.infoRnDay.toString().trim() : 0);
-    let minNoProcessInflAmnt = 99999999;
+    let minNoProcessInflAmnt = 99999999; // 미처리하수 추정량
 
     let avgtotInflAmnt = 0;
     let avginflAmnt = 0;
@@ -89,7 +88,7 @@ export default function FlowRateModal(props: { fcltyName: string; facilityCd: st
     let avginfoRnDay = 0;
     let avgNoProcessInflAmnt = 0;
     let noProcessInflAmntCnt = 0;
-    
+
     filteredData.forEach((item: FlowRateModalInterface) => {
       const totInflAmnt = parseNumber(item.totInflAmnt);
       const inflAmnt = parseNumber(item.inflAmnt);
@@ -119,24 +118,30 @@ export default function FlowRateModal(props: { fcltyName: string; facilityCd: st
       avgefflAmnt += efflAmnt;
       avginfoRnDay += infoRnDay;
 
-      if(item.noProcessInflAmnt && item.noProcessInflAmnt.toString().trim() != '' && item.noProcessInflAmnt != undefined){
-        const noProcessInflAmnt = Number(item.noProcessInflAmnt.toString().replaceAll(',',''));
+      if (item.noProcessInflAmnt && item.noProcessInflAmnt.toString().trim() != '' && item.noProcessInflAmnt != undefined) {
+        const noProcessInflAmnt = Number(item.noProcessInflAmnt.toString().replaceAll(',', ''));
         avgNoProcessInflAmnt += noProcessInflAmnt;
         maxNoProcessInflAmnt = Math.max(maxNoProcessInflAmnt, noProcessInflAmnt);
         minNoProcessInflAmnt = Math.min(minNoProcessInflAmnt, noProcessInflAmnt);
-        noProcessInflAmntCnt +=1;
+        noProcessInflAmntCnt += 1;
       }
     });
 
+    const formattedData = filteredData.map((item: FlowRateModalInterface) => {
+      const newItem = { ...item };
+      dataFormSetting(newItem);
+      return newItem;
+    });
+
     const newFilteredData = [
       {
         msrDt: '평균',
-        totInflAmnt: avgtotInflAmnt && avgtotInflAmnt!=0 ? roundUp((avgtotInflAmnt / filteredData.length), 0) : 0,
-        inflAmnt: avginflAmnt && avginflAmnt!=0 ? roundUp((avginflAmnt / filteredData.length), 0) : 0,
-        sumFlow: avgsumFlow && avgsumFlow!=0 ? roundUp((avgsumFlow / filteredData.length), 0) : 0,
-        returnAmnt: avgreturnAmnt && avgreturnAmnt!=0 ? roundUp((avgreturnAmnt / filteredData.length), 0) : 0,
-        efflAmnt: avgefflAmnt && avgefflAmnt!=0 ? roundUp((avgefflAmnt / filteredData.length), 0) : 0,
-        noProcessInflAmnt : roundNumber(avgNoProcessInflAmnt / noProcessInflAmntCnt, 0),
+        totInflAmnt: avgtotInflAmnt && avgtotInflAmnt != 0 ? roundUp((avgtotInflAmnt / filteredData.length), 0) : 0,
+        inflAmnt: avginflAmnt && avginflAmnt != 0 ? roundUp((avginflAmnt / filteredData.length), 0) : 0,
+        sumFlow: avgsumFlow && avgsumFlow != 0 ? roundUp((avgsumFlow / filteredData.length), 0) : 0,
+        returnAmnt: avgreturnAmnt && avgreturnAmnt != 0 ? roundUp((avgreturnAmnt / filteredData.length), 0) : 0,
+        efflAmnt: avgefflAmnt && avgefflAmnt != 0 ? roundUp((avgefflAmnt / filteredData.length), 0) : 0,
+        noProcessInflAmnt: roundNumber(avgNoProcessInflAmnt / noProcessInflAmntCnt, 0),
         infoRnDay: avginfoRnDay > 0 ? roundUp((avginfoRnDay / filteredData.length), 1) : '0.0',
         rainEffectDay: 0,
       },
@@ -147,7 +152,7 @@ export default function FlowRateModal(props: { fcltyName: string; facilityCd: st
         sumFlow: roundUp(maxsumFlow, 0),
         returnAmnt: roundUp(maxreturnAmnt, 0),
         efflAmnt: roundUp(maxefflAmnt, 0),
-        noProcessInflAmnt : roundNumber(maxNoProcessInflAmnt, 0),
+        noProcessInflAmnt: roundNumber(maxNoProcessInflAmnt, 0),
         infoRnDay: maxinfoRnDay > 0 ? roundUp(maxinfoRnDay, 1) : '0.0',
         rainEffectDay: 0,
       },
@@ -158,11 +163,11 @@ export default function FlowRateModal(props: { fcltyName: string; facilityCd: st
         sumFlow: roundUp(minsumFlow, 0),
         returnAmnt: roundUp(minreturnAmnt, 0),
         efflAmnt: roundUp(minefflAmnt, 0),
-        noProcessInflAmnt : roundNumber(minNoProcessInflAmnt, 0),
+        noProcessInflAmnt: roundNumber(minNoProcessInflAmnt, 0),
         infoRnDay: mininfoRnDay > 0 ? roundUp(mininfoRnDay, 1) : '0.0',
         rainEffectDay: 0,
       },
-      ...filteredData
+      ...formattedData
     ];
     return newFilteredData;
   }
@@ -179,13 +184,9 @@ export default function FlowRateModal(props: { fcltyName: string; facilityCd: st
     fetchData();
   }, [props.facilityCd, props.searchYear, searchFlowRateModalList]);
 
-  if (isLoading) {
-    return <div>로딩 중...</div>;
-  }
-
   const excelDownload = () => {
     const excelDownList: modalExcelType[] = [];
-    if(copyYearList.length > 0){
+    if (copyYearList.length > 0) {
       copyYearList.forEach((item) => {
         excelDownList.push({
           "날짜": item.msrDt,
@@ -200,20 +201,58 @@ export default function FlowRateModal(props: { fcltyName: string; facilityCd: st
       });
     }
     if (excelDownList && excelDownList.length > 0) {
-      downloadExcel({ data: JSON.parse(JSON.stringify(excelDownList)), fileName: props.searchYear+'년 '+props.fcltyName + ' 유량현황', sheetNameArray: [props.fcltyName + ' 유량현황'], headerRange: 'A1:H1' });
+      downloadExcelFormat({ 
+        data: JSON.parse(JSON.stringify(excelDownList)), 
+        fileName: props.searchYear + '년 ' + props.fcltyName + ' 유량현황', 
+        sheetNameArray: [props.fcltyName + ' 유량현황'], 
+        headerRange: 'A1:H1',
+        decimalArray0: [1, 2, 3, 4, 5, 6],
+        decimalArray1: [0],
+      });
     } else if (prevExcelListRef.current && prevExcelListRef.current.length > 0) {
-      alert('다운받을 데이터가 없습니다.');
+      alert('조회된 결과가 없습니다.');
     }
     prevExcelListRef.current = excelDownList;
   }
 
+  // const rainCellClassName = useCallback(
+  //   (row: FlowRateModalInterface, headId: string, rowIndex: number) => {
+  //     if (activeTab !== "tab_term_rain") return "";
+  //     if (headId !== "infoRnDay") return "";
+  //     if (rowIndex < 3) return "";
+
+  //     const raw = row.infoRnDay;
+  //     const value = typeof raw === "string" ? Number(raw.replace(/,/g, "").trim()) : Number(raw);
+  //     if (!Number.isFinite(value)) return "";
+  //     return value > 3 ? "bg-red-50 font-semibold" : "";
+  //   },
+  //   [activeTab],
+  // );
+
+  const rainRowClassName = useCallback(
+    (row: FlowRateModalInterface, rowIndex: number) => {
+      if (activeTab !== "tab_term_rain") return "";
+      if (rowIndex < 3) return "";
+
+      const raw = row.infoRnDay;
+      const value = typeof raw === "string" ? Number(raw.replace(/,/g, "").trim()) : Number(raw);
+      if (!Number.isFinite(value)) return "";
+      return value > 3 ? "bg-slate-50" : "";
+    },
+    [activeTab],
+  );
+
+  if (isLoading) {
+    return <div>로딩 중...</div>;
+  }
+
   return (
     <>
-      <UITab tabList={tabList} defaultValue="tab_term_year">
-        <Button className={btnClass} style={{float: 'right'}} color="green" onClick={excelDownload}>
+      <UITab tabList={tabList} defaultValue="tab_term_year" onValueChange={setActiveTab}>
+        <Button className={btnClass} style={{ float: 'right' }} color="green" onClick={excelDownload}>
           {"엑셀다운로드"}
         </Button>
-        <TabsContent value="tab_term_year">
+        <TabsContent value="tab_term_year"> {/* 연간 */}
           <FacilityTermModalHeader<FlowRateModalInterface>
             searchList={modalFlowRateListYear}
             fcltyCd={props.facilityCd}
@@ -224,23 +263,23 @@ export default function FlowRateModal(props: { fcltyName: string; facilityCd: st
             queryClick={filterData}
           />
           <div className="h-[370px] overflow-y-auto overflow-x-hidden">
-            <UiTable 
-              headName="유량현황" 
-              tableData={copyYearList} 
-              headlist={upHeadListFlowRateModalYear} 
-              pageSize={0} 
-              total={0} 
-              cellClick={undefined} 
-              onPageChange={() => {}} 
-              className="h-[370px]" 
-              boldArray={[0,1,2]}
+            <UiTable
+              headName="유량현황"
+              tableData={copyYearList}
+              headlist={upHeadListFlowRateModalYear}
+              pageSize={0}
+              total={0}
+              cellClick={undefined}
+              onPageChange={() => { }}
+              className="h-[370px]"
+              boldArray={[0, 1, 2]}
             />
           </div>
           <div className="mt-20">
             <UnderComment commentArray={[commentArray]} />
           </div>
         </TabsContent>
-        <TabsContent value="tab_term_summer">
+        <TabsContent value="tab_term_summer"> {/* 하절기 */}
           <FacilityTermModalHeader<FlowRateModalInterface>
             searchList={modalFlowRateListYear}
             fcltyCd={props.facilityCd}
@@ -251,23 +290,23 @@ export default function FlowRateModal(props: { fcltyName: string; facilityCd: st
             queryClick={filterData}
           />
           <div className="h-[370px] overflow-y-auto overflow-x-hidden">
-            <UiTable 
-              headName="유량현황" 
-              tableData={copyYearList} 
-              headlist={upHeadListFlowRateModalYear} 
-              pageSize={0} 
-              total={0} 
-              cellClick={undefined} 
-              onPageChange={() => {}} 
-              className="h-[370px]" 
-              boldArray={[0,1,2]}
+            <UiTable
+              headName="유량현황"
+              tableData={copyYearList}
+              headlist={upHeadListFlowRateModalYear}
+              pageSize={0}
+              total={0}
+              cellClick={undefined}
+              onPageChange={() => { }}
+              className="h-[370px]"
+              boldArray={[0, 1, 2]}
             />
           </div>
           <div className="mt-20">
             <UnderComment commentArray={[commentArray]} />
           </div>
         </TabsContent>
-        <TabsContent value="tab_term_winter">
+        <TabsContent value="tab_term_winter"> {/* 동절기 */}
           <FacilityTermModalHeader<FlowRateModalInterface>
             searchList={modalFlowRateListYear}
             fcltyCd={props.facilityCd}
@@ -278,23 +317,23 @@ export default function FlowRateModal(props: { fcltyName: string; facilityCd: st
             queryClick={filterData}
           />
           <div className="h-[370px] overflow-y-auto overflow-x-hidden">
-            <UiTable 
-              headName="유량현황" 
-              tableData={copyYearList} 
-              headlist={upHeadListFlowRateModalYear} 
-              pageSize={0} 
-              total={0} 
-              cellClick={undefined} 
-              onPageChange={() => {}} 
-              className="h-[370px]" 
-              boldArray={[0,1,2]}
+            <UiTable
+              headName="유량현황"
+              tableData={copyYearList}
+              headlist={upHeadListFlowRateModalYear}
+              pageSize={0}
+              total={0}
+              cellClick={undefined}
+              onPageChange={() => { }}
+              className="h-[370px]"
+              boldArray={[0, 1, 2]}
             />
           </div>
           <div className="mt-20">
             <UnderComment commentArray={[commentArray]} />
           </div>
         </TabsContent>
-        <TabsContent value="tab_term_chuncheon">  
+        <TabsContent value="tab_term_chuncheon"> {/* 청천시 */}
           <FacilityTermModalHeader<FlowRateModalInterface>
             searchList={modalFlowRateListYear}
             fcltyCd={props.facilityCd}
@@ -305,23 +344,23 @@ export default function FlowRateModal(props: { fcltyName: string; facilityCd: st
             queryClick={filterData}
           />
           <div className="h-[370px] overflow-y-auto overflow-x-hidden">
-            <UiTable 
-              headName="유량현황" 
-              tableData={copyYearList} 
-              headlist={upHeadListFlowRateModalYear} 
-              pageSize={0} 
-              total={0} 
-              cellClick={undefined} 
-              onPageChange={() => {}} 
-              className="h-[370px]" 
-              boldArray={[0,1,2]}
+            <UiTable
+              headName="유량현황"
+              tableData={copyYearList}
+              headlist={upHeadListFlowRateModalYear}
+              pageSize={0}
+              total={0}
+              cellClick={undefined}
+              onPageChange={() => { }}
+              className="h-[370px]"
+              boldArray={[0, 1, 2]}
             />
           </div>
           <div className="mt-20">
             <UnderComment commentArray={[commentArray]} />
           </div>
         </TabsContent>
-        <TabsContent value="tab_term_rain">
+        <TabsContent value="tab_term_rain"> {/* 강우시 */}
           <FacilityTermModalHeader<FlowRateModalInterface>
             searchList={modalFlowRateListYear}
             fcltyCd={props.facilityCd}
@@ -332,13 +371,15 @@ export default function FlowRateModal(props: { fcltyName: string; facilityCd: st
             queryClick={filterData}
           />
           <div className="h-[370px] overflow-y-auto overflow-x-hidden">
-            <UiTable headName="유량현황" tableData={copyYearList} headlist={upHeadListFlowRateModalYear} pageSize={0} total={0} cellClick={undefined} onPageChange={() => {}} className="h-[370px]" boldArray={[0,1,2]}/>
+            <UiTable headName="유량현황" tableData={copyYearList} headlist={upHeadListFlowRateModalYear} pageSize={0} total={0}
+              cellClick={undefined} onPageChange={() => { }} className="h-[370px]" boldArray={[0, 1, 2]} 
+              rowClassName={rainRowClassName} />
           </div>
           <div className="mt-20">
-            <UnderComment commentArray={["미처리하수 추정량 산식 =[(강우시 일별유입유량*강우시 일별유입BOD)-(청천시 연평균유입유량*청천시 연평균유입BOD)]/강우시 일별유입BOD)","강우량 3mm 이상만 날과 강우영향일(강우일+2일)의 날"]} />
+            <UnderComment commentArray={["미처리하수 추정량 산식 =[(강우시 일별유입유량*강우시 일별유입BOD)-(청천시 연평균유입유량*청천시 연평균유입BOD)]/강우시 일별유입BOD)", "강우량 3mm 이상만 날과 강우영향일(강우일+2일)의 날"]} />
           </div>
         </TabsContent>
       </UITab>
     </>
   );
-}
+}

apps/fo/app/pages/(with-layout)/flowRate/page.tsx

@@ -5,13 +5,13 @@
  */
 
 "use client"
-import { useFoStore } from "@/app/store";
+import { StoreContext, useFoStore } from "@/app/store";
 import type { TableUpperProps } from "@/app/store/common";
-import type { ExcelType } from "@/app/store/flowRate";
+// import type { ExcelType } from "@/app/store/flowRate";
 import { ContentsDiv, downloadExcelFormat, MainDiv, SearchBaseForm, SearchInput, SelectBox, Title, UiModal, UiTable, type ReturnType } from "@common/business_components";
 import ListDiv from "@common/business_components/ui/list_div";
 import LoadingOverlay from "@common/business_components/ui/loadingBar";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useContext, useEffect, useRef, useState } from "react";
 import FlowRateModal from "./modal/page";
 
 export default function ProcessFacilitySearch() {
@@ -21,6 +21,11 @@ export default function ProcessFacilitySearch() {
     ,initializeCommonData
     ,searchFlowRateList
   } = useFoStore((state) => state);
+  const store = useContext(StoreContext);
+
+  if (!store) {
+    throw new Error("StoreContext is not available. Ensure StoreProvider is mounted.");
+  }
 
   const searchInputRef = useRef<HTMLDivElement & HTMLInputElement>(null);
 
@@ -38,6 +43,11 @@ export default function ProcessFacilitySearch() {
     btnClass
   } = Common;
 
+  const defaultSearchYear =
+    selectSearchYear.find((item) => item.selected)?.val ||
+    selectSearchYear[0]?.val ||
+    "0";
+
   const {
     flowRateSearchLabelArray
   } = FlowRateSearch;
@@ -49,7 +59,6 @@ export default function ProcessFacilitySearch() {
     upHeadList3,
     flowRateList,
     flowRateCount,
-    excelList,
     isLoading,
   } = FlowRateList;
 
@@ -57,20 +66,20 @@ export default function ProcessFacilitySearch() {
   const [fcltCpct, setFcltCpct] = useState<string>("0");
   const [fcltyName, setFcltyName] = useState<string>("");
   const [operationValue, setOperationValue] = useState<string>("0");
-  const [searchYearValue, setSearchYearValue] = useState<string>(selectSearchYear[0]?.val || "0");
+  const [searchYearValue, setSearchYearValue] = useState<string>(defaultSearchYear);
   // const [widthSize, setWidthSize] = useState<string>("w-[120%]");
   const [upheadList, setUpheadList] = useState<TableUpperProps[]>(upHeadList1);
   const [resetPage, setResetPage] = useState<boolean>(false);
-  const prevExcelListRef = useRef<ExcelType[] | null>(null);
+  // const prevExcelListRef = useRef<ExcelType[] | null>(null);
 
   // 모달 상태 추가
   const [selectedRow, setSelectedRow] = useState<number | null>(null);
   const [fcltyNm, setFcltyNm] = useState<string>("");
   const [fcltyCd, setFcltyCd] = useState<string>("");
-  const [excelTrigger, setExcelTrigger] = useState<boolean>(false);
+  const [isExcelDownClick, setIsExcelDownClick] = useState<boolean>(false);
   const [initTrigger, setInitTrigger] = useState<boolean>(false);
 
-  const searchFlowRate = useCallback(({ partValue, regionValue, unitWaterShedValue, middleRegionValue, envPartValue, sidoValue, sigunValue }: ReturnType, pageNo: number, pageCnt:number=20) => {
+  const searchFlowRate = useCallback(async ({ partValue, regionValue, unitWaterShedValue, middleRegionValue, envPartValue, sidoValue, sigunValue }: ReturnType, pageNo: number, pageCnt:number=20) => {
     let nameCd, partStr;
     
     switch (partValue) {
@@ -89,9 +98,9 @@ export default function ProcessFacilitySearch() {
         break;
     }
     if(partStr==='G'){
-      searchFlowRateList(pageNo, pageCnt, searchYearValue);
+      await searchFlowRateList(pageNo, pageCnt, searchYearValue);
     }else{
-      searchFlowRateList(pageNo, pageCnt, searchYearValue, partStr, nameCd || '0', fcltCpct, operationValue, fcltyName.trim() !== "" || fcltyName.trim() !== null ? fcltyName : undefined);  
+      await searchFlowRateList(pageNo, pageCnt, searchYearValue, partStr, nameCd || '0', fcltCpct, operationValue, fcltyName.trim() !== "" || fcltyName.trim() !== null ? fcltyName : undefined);  
     }
   }, [searchFlowRateList, searchYearValue, fcltCpct, operationValue, fcltyName]);
 
@@ -99,7 +108,7 @@ export default function ProcessFacilitySearch() {
     // setWidthSize("w-[120%]");
     setUpheadList(upHeadList1)
     // 상태값 설정
-    setSearchYearValue(selectSearchYear[0]?.val || "0");
+    setSearchYearValue(defaultSearchYear);
     setFcltCpct(selectUpdownData[0]?.val || "0");
     setOperationValue(selectOperationData[0]?.val || "0");
     // SearchInputSelect 초기화
@@ -146,17 +155,6 @@ export default function ProcessFacilitySearch() {
     }
   }, [isInit, initializeCommonData, searchFlowRateList, selectSearchYear, searchFlowRate, initTrigger]);
   
-  useEffect(() => {
-    if(!excelTrigger) return;
-
-    if (excelList && excelList.length > 0) {
-      downloadExcelFormat({ data: JSON.parse(JSON.stringify(excelList)), fileName: '시설별 유량현황', sheetNameArray: ['시설별 유량현황'], headerRange: 'A1:O1', decimalArray0: [9,10,11,12,13,14] });
-    } else if (prevExcelListRef.current && prevExcelListRef.current.length > 0) {
-      alert('다운받을 데이터가 없습니다.');
-    }
-    prevExcelListRef.current = excelList;
-  }, [excelList, excelTrigger]);
-
   const ref = useRef<ReturnType>({
     partValue: '',
     sidoValue: '11',
@@ -175,10 +173,37 @@ export default function ProcessFacilitySearch() {
     setResetPage(true);
   }, [upHeadList1, upHeadList2, upHeadList3]);
 
-  const excelDownload = useCallback(() => {
-    searchFlowRate(ref.current, 1, 10000);
-    setExcelTrigger(true);
-  }, [searchFlowRate]);
+  const excelDownload = useCallback(async () => {
+    if (isExcelDownClick) return;
+    if (ref.current.partValue === 'A') { // 행정별
+      if (!ref.current.sidoValue || ref.current.sidoValue === '0') {
+        alert('엑셀 다운로드는 시도 조건을 선택한 후 이용 가능합니다.');
+        return;
+      }
+    } else if (ref.current.partValue === 'R') { // 유역별
+      if (!ref.current.regionValue || ref.current.regionValue === '0') {
+        alert('엑셀 다운로드는 유역 조건을 선택한 후 이용 가능합니다.');
+        return;
+      }
+    } else if (ref.current.partValue === 'G') { // 환경청별
+      if (!ref.current.envPartValue || ref.current.envPartValue === '0') {
+        alert('엑셀 다운로드는 환경청 조건을 선택한 후 이용 가능합니다.');
+        return;
+      }
+    } 
+    setIsExcelDownClick(true);
+    try {
+      await searchFlowRate(ref.current, 1, 10000);
+      const latestExcelList = store.getState().FlowRateList.excelList || [];
+      if (latestExcelList.length > 0) {
+        downloadExcelFormat({ data: JSON.parse(JSON.stringify(latestExcelList)), fileName: '시설별 유량현황', sheetNameArray: ['시설별 유량현황'], headerRange: 'A1:O1', decimalArray0: [9,10,11,12,13,14] });
+      } else {
+        alert('조회된 결과가 없습니다.');
+      }
+    } finally {
+      setIsExcelDownClick(false);
+    }
+  }, [isExcelDownClick, searchFlowRate, store]);
 
   const total = flowRateCount;
   return (
@@ -203,6 +228,7 @@ export default function ProcessFacilitySearch() {
           queryClick={chkVal}
           excelClick={excelDownload}
           initClick={resetVal}
+          excelDisabled={isExcelDownClick}
           ref={ref} isAdmin={false} initSidoValue={'11'}/>
         <ListDiv>
           <LoadingOverlay isLoading={isLoading} />
@@ -216,7 +242,7 @@ export default function ProcessFacilitySearch() {
       {selectedRow !== null && (
         <UiModal
           body={<FlowRateModal fcltyName={fcltyNm} facilityCd={fcltyCd} searchYear={searchYearValue}></FlowRateModal>} 
-          bodyClass="sm:max-w-[90vw] w-[1250px] h-[780px]"
+          bodyClass="sm:max-w-[90vw] w-[1250px] h-[100dvh] max-h-[780px]"
           open={selectedRow !== null}
           onOpenChange={(open: boolean) => !open && closeModal()}
         />

apps/fo/app/pages/(with-layout)/planSewage/page.tsx

@@ -5,11 +5,11 @@
  */
 
 "use client"
-import { useFoStore } from "@/app/store";
+import { StoreContext, useFoStore } from "@/app/store";
 import type { TableUpperProps } from "@/app/store/common";
-import { downloadExcel, MainDiv, SearchBaseForm, SearchInput, SelectBox, Title, UiTable, type ReturnType } from "@common/business_components";
+import { downloadExcelFormat, MainDiv, SearchBaseForm, SearchInput, SelectBox, Title, UiTable, type ReturnType } from "@common/business_components";
 import ListDiv from "@common/business_components/ui/list_div";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useContext, useEffect, useRef, useState } from "react";
 import LoadingOverlay from "@common/business_components/ui/loadingBar";
 import UnderComment from "@/app/components/common/UnderComment";
 
@@ -20,13 +20,18 @@ const commentArray = [
 ]
 
 export default function PlanSewage() {
-  const {Common
-    ,PlanSewage 
-    ,PlanSewageSearch
-    ,initializeCommonData
-    ,searchPlanSewageList
-  } = useFoStore((state) => state) || { processAreaList: { processAreaList: [] }};
-  
+  const { Common
+    , PlanSewage
+    , PlanSewageSearch
+    , initializeCommonData
+    , searchPlanSewageList
+  } = useFoStore((state) => state) || { processAreaList: { processAreaList: [] } };
+  const store = useContext(StoreContext);
+
+  if (!store) {
+    throw new Error("StoreContext is not available. Ensure StoreProvider is mounted.");
+  }
+
   const {
     isInit,
     selectUpdownData,
@@ -41,8 +46,13 @@ export default function PlanSewage() {
     btnClass
   } = Common;
 
+  const defaultSearchYear =
+    selectSearchYear.find((item) => item.selected)?.val ||
+    selectSearchYear[0]?.val ||
+    "0";
+
   const {
-    labelArray, 
+    labelArray,
   } = PlanSewageSearch;
 
   const {
@@ -51,7 +61,6 @@ export default function PlanSewage() {
     upHeadList3,
     planSewageList,
     planSewageCount,
-    excelList,
     isLoading,
   } = PlanSewage;
 
@@ -69,9 +78,9 @@ export default function PlanSewage() {
 
   // 그리드 관련
   const searchInputRef = useRef<HTMLDivElement & HTMLInputElement>(null);
-  
+
   // 모달 상태 추가
-  
+
   // 초기화 변수
   const [resetPage, setResetPage] = useState<boolean>(false);
   // 표 너비
@@ -85,11 +94,12 @@ export default function PlanSewage() {
   // 시설상태
   const [operationValue, setOperationValue] = useState<string>("0");
   // 조회기간
-  const [searchYear, setSearchYear] = useState<string>(selectSearchYear[0]?.val || "0");
+  const [searchYear, setSearchYear] = useState<string>(defaultSearchYear);
 
   const [initTrigger, setInitTrigger] = useState<boolean>(false);
+  // 엑셀다운로드 트리거
+  const [isExcelDownClick, setIsExcelDownClick] = useState<boolean>(false);
 
-  const [excelTrigger, setExcelTrigger] = useState<boolean>(false);
   /**
    * 페이지 함수
    */
@@ -100,7 +110,7 @@ export default function PlanSewage() {
     // 상태값 설정
     setFcltCpct(selectUpdownData[0]?.val || "0");
     setOperationValue(selectOperationData[0]?.val || "0");
-    setSearchYear(selectSearchYear[0]?.val || "0");
+    setSearchYear(defaultSearchYear);
     // SearchInputSelect 초기화
     setFcltyName("");
     if (searchInputRef.current) {
@@ -109,52 +119,39 @@ export default function PlanSewage() {
         input.value = "";
       }
     }
-    ref.current.sidoValue='11';
+    ref.current.sidoValue = '11';
     searchPlanSewage(ref.current, 1, 10);
   }
 
-  useEffect(() => {
-    if(!excelTrigger) return;
-
-    if (excelList && excelList.length > 0) {
-      downloadExcel({ 
-        data: excelList as unknown as JSON[], 
-        fileName: '계획하수량 산정지표 현황', 
-        sheetNameArray: ['계획하수량 산정지표 현황'],
-        headerRange: 'A1:M1'
-      });
-    }
-  }, [excelList, excelTrigger]);
-
   /**
    * 콜백함수
    */
   // 조회
-  const searchPlanSewage = useCallback(({ partValue, regionValue, unitWaterShedValue, middleRegionValue, envPartValue, sidoValue, sigunValue }: ReturnType, pageNo: number, pageCnt:number=20) => {
+  const searchPlanSewage = useCallback(async ({ partValue, regionValue, unitWaterShedValue, middleRegionValue, envPartValue, sidoValue, sigunValue }: ReturnType, pageNo: number, pageCnt: number = 20) => {
     let nameCd, partStr
     switch (partValue) {
       case 'R':
         if (regionValue !== '0') {
-          if(unitWaterShedValue==='0') nameCd = regionValue;
-          else if (middleRegionValue==='0') nameCd = unitWaterShedValue;
+          if (unitWaterShedValue === '0') nameCd = regionValue;
+          else if (middleRegionValue === '0') nameCd = unitWaterShedValue;
           else nameCd = middleRegionValue;
         }
         partStr = partValue
         break;
       default:
-        if(sidoValue !== '0') nameCd = ref.current.sidoValue!="0"?ref.current.sidoValue:sidoValue;
-        if(sigunValue !== '0') nameCd = sigunValue;
-        partStr = envPartValue !== '0' ? envPartValue:partValue;
+        if (sidoValue !== '0') nameCd = ref.current.sidoValue != "0" ? ref.current.sidoValue : sidoValue;
+        if (sigunValue !== '0') nameCd = sigunValue;
+        partStr = envPartValue !== '0' ? envPartValue : partValue;
         break;
     }
 
-    if(partStr === 'G'){
-      partValue = partValue==='G'?'A':partValue;
-      searchPlanSewageList(pageNo, pageCnt, searchYear, partValue);
+    if (partStr === 'G') {
+      partValue = partValue === 'G' ? 'A' : partValue;
+      await searchPlanSewageList(pageNo, pageCnt, searchYear, partValue);
+    }
+    else {
+      await searchPlanSewageList(pageNo, pageCnt, searchYear, partStr, nameCd || '0', fcltCpct, operationValue, fcltyName.trim() !== "" || fcltyName.trim() !== null ? fcltyName : undefined);
     }
-    else{
-      searchPlanSewageList(pageNo, pageCnt, searchYear, partStr, nameCd || '0', fcltCpct, operationValue, fcltyName.trim() !== "" || fcltyName.trim() !== null ? fcltyName : undefined);
-    } 
   }, [operationValue, fcltyName, searchPlanSewageList, searchYear, fcltCpct]);
 
   /**
@@ -162,25 +159,81 @@ export default function PlanSewage() {
    */
   useEffect(() => {
     if (!isInit) {
-      if(!initTrigger){
+      if (!initTrigger) {
         initializeCommonData();
         searchPlanSewage(ref.current, 1, 10);
         setInitTrigger(true);
       }
     }
-  }, [isInit, initializeCommonData, searchPlanSewageList, selectSearchYear, initTrigger, searchPlanSewage]);
+  }, [isInit, initializeCommonData, initTrigger, searchPlanSewage]);
 
-  const chkVal = useCallback((returntype:ReturnType) => {
+  const chkVal = useCallback((returntype: ReturnType) => {
     // setWidthSize(returntype.partValue=='A' ?"w-[120%]":"w-[130%]")
-    setUpheadList(returntype.partValue == 'R' ? upHeadList2 : returntype.partValue == 'G'?upHeadList3:upHeadList1);
+    setUpheadList(returntype.partValue == 'R' ? upHeadList2 : returntype.partValue == 'G' ? upHeadList3 : upHeadList1);
     setResetPage(true);
   }, [upHeadList1, upHeadList2, upHeadList3]);
 
   // 엑셀다운로드 
-  const excelDownload = useCallback((searchReturn: ReturnType) => {
-    searchPlanSewage(searchReturn, 1, 10000);
-    setExcelTrigger(true);
-  }, [searchPlanSewage]);
+  const excelDownload = useCallback(async (searchReturn: ReturnType) => {
+    if (isExcelDownClick) return;
+    if (ref.current.partValue === 'A') { // 행정별
+      if (!ref.current.sidoValue || ref.current.sidoValue === '0') {
+        alert('엑셀 다운로드는 시도 조건을 선택한 후 이용 가능합니다.');
+        return;
+      }
+    } else if (ref.current.partValue === 'R') { // 유역별
+      if (!ref.current.regionValue || ref.current.regionValue === '0') {
+        alert('엑셀 다운로드는 유역 조건을 선택한 후 이용 가능합니다.');
+        return;
+      }
+    } else if (ref.current.partValue === 'G') { // 환경청별
+      if (!ref.current.envPartValue || ref.current.envPartValue === '0') {
+        alert('엑셀 다운로드는 환경청 조건을 선택한 후 이용 가능합니다.');
+        return;
+      }
+    } 
+    setIsExcelDownClick(true);
+    try {
+      await searchPlanSewage(searchReturn, 1, 10000);
+      const latestExcelList = store.getState().PlanSewage.excelList || [];
+      if (latestExcelList.length > 0) {
+        const toNumber = (value: unknown) => {
+          if (value === null || value === undefined || value === '') return '';
+          const parsed = typeof value === "number" ? value : Number(String(value).replace(/,/g, ""));
+          return Number.isFinite(parsed) ? parsed : '';
+        };
+
+        const numericKeys = [
+          "시설용량(m³/일)",
+          "여유용량(m³/일)",
+          "변동부하율(%)",
+          "분류식화율(%)",
+        ];
+
+        const excelData = latestExcelList.map((row) => {
+          const nextRow = { ...row } as Record<string, unknown>;
+          numericKeys.forEach((key) => {
+            if (key in nextRow) {
+              nextRow[key] = toNumber(nextRow[key]);
+            }
+          });
+          return nextRow;
+        });
+
+        downloadExcelFormat({
+          data: excelData as unknown as JSON[],
+          fileName: '계획하수량 산정지표 현황',
+          sheetNameArray: ['계획하수량 산정지표 현황'],
+          headerRange: 'A1:M1',
+          decimalArray0: [9, 10, 11, 12]
+        });
+      } else {
+        alert("조회된 결과가 없습니다.");
+      }
+    } finally {
+      setIsExcelDownClick(false);
+    }
+  }, [isExcelDownClick, searchPlanSewage, store]);
 
   // 페이지 변경
   const handlePageChange = useCallback((page: number) => {
@@ -190,11 +243,11 @@ export default function PlanSewage() {
 
   const mainList = planSewageList || [];
   const total = planSewageCount || 0;
-  
+
   return (
     <MainDiv>
       <Title title="계획하수량 산정지표 현황" />
-        <SearchBaseForm
+      <SearchBaseForm
         leftChildren={<>
           <SelectBox className="col-span-3" label={labelArray[3] as string} selectArray={selectUpdownData} onSelectValue={(val) => setFcltCpct(val.toString())} value={fcltCpct} selectClass={undefined} />
           <SearchInput className={"col-span-3"} label={labelArray[4] as string} textValue={fcltyName} setText={setFcltyName} />
@@ -211,17 +264,18 @@ export default function PlanSewage() {
         btnClass={btnClass}
         queryClick={chkVal}
         excelClick={excelDownload}
+        excelDisabled={isExcelDownClick}
         initClick={resetVal}
-        ref={ref} isAdmin={false} initSidoValue={"11"}/>
+        ref={ref} isAdmin={false} initSidoValue={"11"} />
       <ListDiv>
         <LoadingOverlay isLoading={isLoading} />
         <div className="h-full w-full overflow-x-scroll min-[1200px]:overflow-x-hidden">
-            <div className="w-[120%] min-[1200px]:w-[100%]">
-            <UiTable cellClick={ undefined } headName={"계획하수량 산정지표 현황"} tableData={mainList} headlist={upheadList} pageSize={10} total={total} resetPageNo={resetPage} onPageChange={handlePageChange} widthFixed={true} />
+          <div className="w-[120%] min-[1200px]:w-[100%]">
+            <UiTable cellClick={undefined} headName={"계획하수량 산정지표 현황"} tableData={mainList} headlist={upheadList} pageSize={10} total={total} resetPageNo={resetPage} onPageChange={handlePageChange} widthFixed={true} />
           </div>
           <UnderComment divHeight={"5"} commentArray={commentArray} />
         </div>
       </ListDiv>
     </MainDiv>
   );
-}
+}

apps/fo/app/pages/(with-layout)/processArea/page.tsx

@@ -5,27 +5,36 @@
  */
 
 "use client"
-import { useFoStore } from "@/app/store";
-import { ContentsDiv, downloadExcel, MainDiv, SearchBaseForm, SelectBox, Title, UiModal, UiTable, type ReturnType } from "@common/business_components";
+import { StoreContext, useFoStore } from "@/app/store";
+import { useShallow } from 'zustand/react/shallow';
+import { ContentsDiv, downloadExcelFormat, MainDiv, SearchBaseForm, SelectBox, Title, UiModal, UiTable, type ReturnType } from "@common/business_components";
 import ListDiv from "@common/business_components/ui/list_div";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useContext, useEffect, useRef, useState } from "react";
 import ProcessFacilityInfoModal from "./modal/page";
 import LoadingOverlay from "@common/business_components/ui/loadingBar";
 
 export default function ProcessArea() {
-  const {Common,
+  const {
+    Common,
     ProcessArea,
     ProcessAreaSearch,
     initializeCommonData,
     searchProcessAreaList
-  } = useFoStore((state) => state) || { 
-    Common: { isInit: false, selectSidoData: [], selectSigunData: [], selectRegionData: [], selectUnitWaterShedData: [], selectMiddleRegionData: [], selectEnvPartData: [], selectSearchYear: [{ val: "0" }], btnClass: "" },
-    ProcessArea: { processAreaList: [], processAreaCount: 0, excelList: [], upHeadList1: [] },
-    ProcessAreaSearch: { processFacilityLabelArray: [] },
-    initializeCommonData: () => {},
-    searchProcessAreaList: () => {}
-  };
-  
+  } = useFoStore(
+    useShallow((state) => ({ // 다른 무관한 상태가 변경되어도 이 컴포넌트는 불필요하게 다시 렌더링 되지 않음.
+      Common: state.Common,
+      ProcessArea: state.ProcessArea,
+      ProcessAreaSearch: state.ProcessAreaSearch,
+      initializeCommonData: state.initializeCommonData,
+      searchProcessAreaList: state.searchProcessAreaList,
+    }))
+  );
+  const store = useContext(StoreContext);
+
+  if (!store) {
+    throw new Error("StoreContext is not available. Ensure StoreProvider is mounted.");
+  }
+
   const {
     isInit,
     selectSidoData,
@@ -37,7 +46,12 @@ export default function ProcessArea() {
     selectSearchYear,
     btnClass,
   } = Common;
-  
+
+  const defaultSearchYear =
+    selectSearchYear.find((item) => item.selected)?.val ||
+    selectSearchYear[0]?.val ||
+    "0";
+
   const {
     processFacilityLabelArray,
   } = ProcessAreaSearch;
@@ -46,7 +60,6 @@ export default function ProcessArea() {
     upHeadList1,
     processAreaList,
     processAreaCount,
-    excelList,
     isLoading,
   } = ProcessArea;
 
@@ -54,13 +67,15 @@ export default function ProcessArea() {
   // 그리드 관련
   const searchInputRef = useRef<HTMLDivElement & HTMLInputElement>(null);
 
-   // 모달 상태 추가
+  // 모달 상태 추가
   const [selectedRow, setSelectedRow] = useState<number | null>(null);
   const [fcltyNm, setFcltyNm] = useState<string>("");
   const [fcltyCd, setFcltyCd] = useState<string>("");
-  
+
   const [resetPage, setResetPage] = useState<boolean>(false);
-  const [searchYearValue, setSearchYearValue] = useState<string>(selectSearchYear[0]?.val || "0");
+  const [searchYearValue, setSearchYearValue] = useState<string>(defaultSearchYear);
+  
+  const [isExcelDownClick, setIsExcelDownClick] = useState<boolean>(false);
 
   const ref = useRef<ReturnType>({
     partValue: '',
@@ -74,8 +89,8 @@ export default function ProcessArea() {
     sigunText: '',
   });
 
-  const searchProcessArea = useCallback(({ sidoText, sigunText}: ReturnType, pageNo: number, pageCnt:number=20) => {
-    searchProcessAreaList(pageNo, pageCnt, sidoText, sigunText, searchYearValue);
+  const searchProcessArea = useCallback(async ({ sidoText, sigunText }: ReturnType, pageNo: number, pageCnt: number = 20) => {
+    await searchProcessAreaList(pageNo, pageCnt, sidoText, sigunText, searchYearValue);
   }, [searchProcessAreaList, searchYearValue]);
 
   // 조회
@@ -91,8 +106,8 @@ export default function ProcessArea() {
         input.value = "";
       }
     }
-    setSearchYearValue(selectSearchYear[0]?.val || "0");
-    searchProcessAreaList(1, 10, '', '', selectSearchYear[0]?.val || "0");
+    setSearchYearValue(defaultSearchYear);
+    searchProcessAreaList(1, 10, '', '', defaultSearchYear);
   }
 
   // 셀 클릭 시 모달 표시
@@ -112,24 +127,49 @@ export default function ProcessArea() {
   useEffect(() => {
     if (!isInit) {
       initializeCommonData();
-      searchProcessAreaList(1, 10, '', '', selectSearchYear[0]?.val || "0");
+      searchProcessAreaList(1, 10, '', '', defaultSearchYear);
     }
-  }, [isInit, initializeCommonData, searchProcessAreaList]);
+  }, [isInit, initializeCommonData, searchProcessAreaList, defaultSearchYear]);
 
-  useEffect(() => {
-    if (excelList && excelList.length > 0) {
-      downloadExcel({ 
-        data: excelList as unknown as JSON[], 
-        fileName: '처리구역정보', 
-        sheetNameArray: ['처리구역정보'], 
-        headerRange: 'A1:W1' 
-      });
+  const excelDownload = useCallback(async () => {
+    if (isExcelDownClick) return;
+    // if (ref.current.partValue === 'A') { // 행정별
+    //   if (!ref.current.sidoValue || ref.current.sidoValue === '0') {
+    //     alert('엑셀 다운로드는 시도 조건을 선택한 후 이용 가능합니다.');
+    //     return;
+    //   }
+    // } else if (ref.current.partValue === 'R') { // 유역별
+    //   if (!ref.current.regionValue || ref.current.regionValue === '0') {
+    //     alert('엑셀 다운로드는 유역 조건을 선택한 후 이용 가능합니다.');
+    //     return;
+    //   }
+    // } else if (ref.current.partValue === 'G') { // 환경청별
+    //   if (!ref.current.envPartValue || ref.current.envPartValue === '0') {
+    //     alert('엑셀 다운로드는 환경청 조건을 선택한 후 이용 가능합니다.');
+    //     return;
+    //   }
+    // } 
+
+    setIsExcelDownClick(true);
+    try {
+      await searchProcessArea(ref.current, 1, 10000);
+      const latestExcelList = store.getState().ProcessArea.excelList || [];
+      if (latestExcelList.length > 0) {
+        downloadExcelFormat({
+          data: latestExcelList as unknown as JSON[],
+          fileName: '처리구역정보',
+          sheetNameArray: ['처리구역정보'],
+          headerRange: 'A1:W1',
+          decimalArray0: [3, 4, 5, 6, 7, 8, 9,10, 11, 12, 13, 14, 15],
+          decimalArray2: [16, 17, 18, 19, 20, 21],
+        });
+      } else {
+        alert('조회된 결과가 없습니다.');
+      }
+    } finally {
+      setIsExcelDownClick(false);
     }
-  }, [excelList]);
-
-  const excelDownload = useCallback(() => {
-    searchProcessArea(ref.current, 1, 10000);
-  }, [searchProcessArea]);
+  }, [isExcelDownClick, searchProcessArea, store]);
 
   const handlePageChange = useCallback((pageNo: number) => {
     setResetPage(false);
@@ -143,7 +183,7 @@ export default function ProcessArea() {
       <ContentsDiv>
         <SearchBaseForm
           leftChildren={<>
-            <SelectBox className="col-span-3" label={processFacilityLabelArray[6] as string} selectArray={selectSearchYear} onSelectValue={(val) => setSearchYearValue(val.toString())} value={searchYearValue} selectClass={undefined}/>
+            <SelectBox className="col-span-3" label={processFacilityLabelArray[6] as string} selectArray={selectSearchYear} onSelectValue={(val) => setSearchYearValue(val.toString())} value={searchYearValue} selectClass={undefined} />
           </>}
           rightChildren={undefined}
           selectSidoData={selectSidoData}
@@ -155,6 +195,7 @@ export default function ProcessArea() {
           btnClass={btnClass}
           queryClick={chkVal}
           excelClick={excelDownload}
+          excelDisabled={isExcelDownClick}
           initClick={resetVal}
           ref={ref}
           isAdmin={true}
@@ -163,19 +204,20 @@ export default function ProcessArea() {
           <LoadingOverlay isLoading={isLoading} />
           <div className="h-full w-full overflow-x-scroll min-[1900px]:overflow-x-hidden">
             <div className="w-[160%] min-[1900px]:w-[100%]">
-              <UiTable cellClick={(index: number | undefined) => index !== undefined && cellClick(index)} headName={"처리구역정보"} tableData={mainList} headlist={upHeadList1} pageSize={10} total={total} resetPageNo={resetPage} onPageChange={handlePageChange} widthFixed={true} />
+              <UiTable cellClick={(index: number | undefined) => index !== undefined && cellClick(index)} headName={"처리구역정보"} tableData={mainList}
+                headlist={upHeadList1} pageSize={10} total={total} resetPageNo={resetPage} onPageChange={handlePageChange} widthFixed={true} />
             </div>
           </div>
         </ListDiv>
       </ContentsDiv>
       {selectedRow !== null && (
-        <UiModal 
-          body={<ProcessFacilityInfoModal fcltyName={fcltyNm} facilityCd={fcltyCd}></ProcessFacilityInfoModal>} 
-          bodyClass="sm:max-w-[90vw] w-[1200px] h-[900px]"
+        <UiModal
+          body={<ProcessFacilityInfoModal fcltyName={fcltyNm} facilityCd={fcltyCd}></ProcessFacilityInfoModal>}
+          bodyClass="sm:max-w-[90vw] w-[1200px] h-[100dvh] max-h-[900px] overflow-y-auto"
           open={selectedRow !== null}
           onOpenChange={(open: boolean) => !open && closeModal()}
         />
       )}
     </MainDiv>
   );
-}
+}

apps/fo/app/pages/(with-layout)/processFacility/modal/page.tsx

@@ -5,6 +5,7 @@
  */
 
 "use client"
+import { useCallback, useRef } from "react";
 import { useFoStore } from "@/app/store";
 import type { TableUpperProps } from "@/app/store/dashboard";
 import { downloadExcelFormat, filePickedBlobArray, UITab, UiTable } from "@common/business_components/ui";
@@ -121,6 +122,21 @@ export default function ProcessFacilityInfoModal(props: ModalType) {
   const upHeadListPlanInfoChange = headMakeList(upHeadListPlanInfo, 2);
   const upHeadListFcltyHistInfoChange = headMakeList(upHeadListFcltyHistInfo, 3);
   const upHeadListFcltyWaterQltyInfoChange = headMakeList(upHeadListFcltyWaterQltyInfo, 4);
+  const historyTopScrollRef = useRef<HTMLDivElement>(null);
+  const historyBottomScrollRef = useRef<HTMLDivElement>(null);
+  const syncLockRef = useRef(false);
+
+  const syncScroll = useCallback((source: HTMLDivElement | null, target: HTMLDivElement | null) => {
+    if (!source || !target || syncLockRef.current) return;
+    syncLockRef.current = true;
+    const nextTop = source.scrollTop;
+    if (target.scrollTop !== nextTop) {
+      target.scrollTop = nextTop;
+    }
+    requestAnimationFrame(() => {
+      syncLockRef.current = false;
+    });
+  }, []);
 
   const excelDownloadPlan = () => {
     const excelDownList: any[] = [];
@@ -137,11 +153,19 @@ export default function ProcessFacilityInfoModal(props: ModalType) {
           "시운전완료일": item.trlrnCmplDt,
           "가동개시일": item.rnDt,
           "시설용량(m³/일)": item.fctCpc&&item.fctCpc.toString().trim()!=''?Number(item.fctCpc.toString().replaceAll(',','')):'',
+          "공법구분": item.trtSrsHanNm,
+          "공법계열": item.trtMocHanNm,
+          "방법": item.trtFrfHanNm,
         });
       });
     }
     if (excelDownList && excelDownList.length > 0) {
-      downloadExcelFormat({ data: JSON.parse(JSON.stringify(excelDownList)), fileName: props.fcltyName + ' 시설이력관리', sheetNameArray: [props.fcltyName + ' 시설이력관리'], headerRange: 'A1:I1' });
+      downloadExcelFormat({ 
+        data: JSON.parse(JSON.stringify(excelDownList)), 
+        fileName: props.fcltyName + ' 시설이력관리', 
+        sheetNameArray: [props.fcltyName + ' 시설이력관리'], 
+        decimalArray0: [8],
+        headerRange: 'A1:L1' });
     } else if (gridListFcltyHistInfo.length == 0) {
       alert('다운받을 데이터가 없습니다.');
     }
@@ -182,7 +206,7 @@ export default function ProcessFacilityInfoModal(props: ModalType) {
       const sheetParameter = [
         {
           data: excelData,
-          headerNum: 2,
+          headerNum: 3,
           headerRange: 'A1:S2',
           sheetName: '시설 수질정보',
           startCol: 'A'
@@ -218,7 +242,7 @@ export default function ProcessFacilityInfoModal(props: ModalType) {
               <h3 className="text-2xl font-medium text-label">시설 기본정보</h3>
             </div>
             <div className="card !m-[1.2rem] max-h-[40rem] overflow-auto !p-0r">
-              <Table>
+              <Table variant="secondary">
                 <thead>
                   <TableRow className="">
                     <TableHead className="w-1/6">{'시설명'}</TableHead>
@@ -262,7 +286,11 @@ export default function ProcessFacilityInfoModal(props: ModalType) {
             
           <TabsContent value="history_info">
             <ListDiv>
-              <div className="h-[250px] w-full overflow-y-auto overflow-x-hidden">
+              <div
+                className="h-[250px] w-full overflow-y-auto overflow-x-hidden"
+                ref={historyTopScrollRef}
+                onScroll={() => syncScroll(historyTopScrollRef.current, historyBottomScrollRef.current)}
+              >
                 <Button className={btnClass} style={{float: 'right'}} color="green" onClick={excelDownloadPlan}>
                   {"엑셀다운로드"}
                 </Button>
@@ -274,7 +302,11 @@ export default function ProcessFacilityInfoModal(props: ModalType) {
               </div>
             </ListDiv>
             <ListDiv>
-              <div className="h-[250px] w-full overflow-y-auto overflow-x-hidden">
+              <div
+                className="h-[250px] w-full overflow-y-auto overflow-x-hidden"
+                ref={historyBottomScrollRef}
+                onScroll={() => syncScroll(historyBottomScrollRef.current, historyTopScrollRef.current)}
+              >
                 <Button className={btnClass} style={{float: 'right'}} color="green" onClick={excelDownloadQlty}>
                   {"엑셀다운로드"}
                 </Button>
@@ -292,4 +324,4 @@ export default function ProcessFacilityInfoModal(props: ModalType) {
     </div>
     </>
   );
-}
+}

apps/fo/app/pages/(with-layout)/processFacility/page.tsx

@@ -6,11 +6,11 @@
 
 "use client"
 import UnderComment from "@/app/components/common/UnderComment";
-import { useFoStore } from "@/app/store";
-import { ContentsDiv, downloadExcel, MainDiv, SearchBaseForm, SearchInput, SelectBox, Title, UiModal, UiTable, type ReturnType } from "@common/business_components";
+import { StoreContext, useFoStore } from "@/app/store";
+import { ContentsDiv, downloadExcelFormat, MainDiv, SearchBaseForm, SearchInput, SelectBox, Title, UiModal, UiTable, type ReturnType } from "@common/business_components";
 import ListDiv from "@common/business_components/ui/list_div";
 import LoadingOverlay from "@common/business_components/ui/loadingBar";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useContext, useEffect, useRef, useState } from "react";
 import ProcessFacilityInfoModal from "./modal/page";
 
 export default function ProcessFacilitySearch() {
@@ -25,6 +25,11 @@ export default function ProcessFacilitySearch() {
     //시설데이터 수질정보 조회
     ,searchProcessFacilityWaterQlty
   } = useFoStore((state) => state) || { ProcessFacilityList: { processFacilityList: [], processFacilityCount: 0 }};
+  const store = useContext(StoreContext);
+
+  if (!store) {
+    throw new Error("StoreContext is not available. Ensure StoreProvider is mounted.");
+  }
 
   const {
     isInit,
@@ -69,7 +74,6 @@ export default function ProcessFacilitySearch() {
     upHeadList1,
     upHeadList2,
     upHeadList3,
-    excelList,
     isLoading,
   } = ProcessFacilityList;
 
@@ -89,6 +93,7 @@ export default function ProcessFacilitySearch() {
   const [partValue, setPartValue] = useState<string>("A");
   // const [widthSize, setWidthSize] = useState<string>("w-[120%]");
   const [upHeadList, setUpheadList] = useState(upHeadList1);
+  const [isExcelDownClick, setIsExcelDownClick] = useState<boolean>(false);
 
   /**
   * 모달 상태 변수
@@ -149,13 +154,7 @@ export default function ProcessFacilitySearch() {
     }
   }, [partValue, upHeadList1, upHeadList2, upHeadList3]);
 
-  useEffect(() => {
-    if (excelList && excelList.length > 0) {
-      downloadExcel({ data: excelList as unknown as JSON[], fileName: '처리시설 시설정보', sheetNameArray: ['처리시설 시설정보'], headerRange: 'A1:P1' });
-    }
-  }, [excelList]);
-
-  const searchFcltyList = useCallback(({ partValue, regionValue, unitWaterShedValue, middleRegionValue, envPartValue, sidoValue, sigunValue }: ReturnType, pageNo: number, pageCnt:number=10) => {
+  const searchFcltyList = useCallback(async ({ partValue, regionValue, unitWaterShedValue, middleRegionValue, envPartValue, sidoValue, sigunValue }: ReturnType, pageNo: number, pageCnt:number=10) => {
     let nameCd, partStr
     switch (partValue) {
       case 'R':
@@ -172,7 +171,7 @@ export default function ProcessFacilitySearch() {
           partStr = envPartValue !== '0' ? envPartValue:partValue;
           break;
     }
-    searchProcessFacility(pageNo, pageCnt, partStr, nameCd || '0', fcltCpct, operationValue, facilityPartValue, fcltyName.trim() !== "" || fcltyName.trim() !== null ? fcltyName : undefined);
+    await searchProcessFacility(pageNo, pageCnt, partStr, nameCd || '0', fcltCpct, operationValue, facilityPartValue, fcltyName.trim() !== "" || fcltyName.trim() !== null ? fcltyName : undefined);
     if(isSearch) {
       setIsSearch(false);
     }
@@ -235,9 +234,44 @@ export default function ProcessFacilitySearch() {
     }
   }
 
-  const excelDownload = useCallback(() => {
-    searchFcltyList(ref.current, 1, 10000);
-  }, [searchFcltyList]);
+  const excelDownload = useCallback(async () => {
+    if (isExcelDownClick) return;
+    // if (ref.current.partValue === 'A') { // 행정별
+    //   if (!ref.current.sidoValue || ref.current.sidoValue === '0') {
+    //     alert('엑셀 다운로드는 시도 조건을 선택한 후 이용 가능합니다.');
+    //     return;
+    //   }
+    // } else if (ref.current.partValue === 'R') { // 유역별
+    //   if (!ref.current.regionValue || ref.current.regionValue === '0') {
+    //     alert('엑셀 다운로드는 유역 조건을 선택한 후 이용 가능합니다.');
+    //     return;
+    //   }
+    // } else if (ref.current.partValue === 'G') { // 환경청별
+    //   if (!ref.current.envPartValue || ref.current.envPartValue === '0') {
+    //     alert('엑셀 다운로드는 환경청 조건을 선택한 후 이용 가능합니다.');
+    //     return;
+    //   }
+    // } 
+
+    setIsExcelDownClick(true);
+    try {
+      await searchFcltyList(ref.current, 1, 10000);
+      const latestExcelList = store.getState().ProcessFacilityList.excelList || [];
+      if (latestExcelList.length > 0) {
+        downloadExcelFormat({
+          data: latestExcelList as unknown as JSON[],
+          fileName: '처리시설 시설정보',
+          sheetNameArray: ['처리시설 시설정보'],
+          headerRange: 'A1:P1',
+          decimalArray0: [9, 10, 11],
+        });
+      } else {
+        alert('조회된 결과가 없습니다.');
+      }
+    } finally {
+      setIsExcelDownClick(false);
+    }
+  }, [isExcelDownClick, searchFcltyList, store]);
   
   // 모달 닫기
   const closeModal = () => {
@@ -266,6 +300,7 @@ export default function ProcessFacilitySearch() {
           btnClass={btnClass}
           queryClick={chkVal}
           excelClick={excelDownload}
+          excelDisabled={isExcelDownClick}
           initClick={resetVal}
           ref={ref} isAdmin={false}        />
         <ListDiv>
@@ -292,11 +327,11 @@ export default function ProcessFacilitySearch() {
       {selectedRow !== null && ( 
         <UiModal 
           body={<ProcessFacilityInfoModal fcltyName={modalFcltyNm} facilityCd={modalFcltyCd} sido={modalSido} gugun={modalGugun} daddr={modalAddr} fctCpc={modalFctCpc} trtFrfNm={modalTrtFrfNm} rnDt={modalRnDt} cmplDt={modalCmplDt} trstOprEtpNm={modalTrstOprEtpNm} bscFctClsNm={modalBscFctClsNm} mnstr={modalMnstr} efflWtrrgn={modalEfflWtrrgn} lgbsn={modalLgbsn} efflWqltStndrdNm={modalEfflWqltStndrdNm} rgnNm={modalRgnNm} rvbsn={modalRvbsn}></ProcessFacilityInfoModal>} 
-          bodyClass="sm:max-w-[70vw] sm:max-h-[95vh]"
+          bodyClass="sm:max-w-[100vw] w-[1300px] h-[100dvh] max-h-[800px]"
           open={selectedRow !== null}
           onOpenChange={(open) => !open && closeModal()}
         />
       )}
     </MainDiv>
   );
-}
+}

apps/fo/app/pages/(with-layout)/rdi/page.tsx

@@ -5,11 +5,11 @@
  */
 
 "use client"
-import { useFoStore } from "@/app/store";
+import { StoreContext, useFoStore } from "@/app/store";
 import type { TableUpperProps } from "@/app/store/common";
-import { ContentsDiv, downloadExcel, MainDiv, SearchBaseForm, SearchInput, SelectBox, Title, UiTable, type ReturnType } from "@common/business_components";
+import { ContentsDiv, downloadExcelFormat, MainDiv, SearchBaseForm, SearchInput, SelectBox, Title, UiTable, type ReturnType } from "@common/business_components";
 import ListDiv from "@common/business_components/ui/list_div";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useContext, useEffect, useRef, useState } from "react";
 import LoadingOverlay from "@common/business_components/ui/loadingBar";
 import UnderComment from "@/app/components/common/UnderComment";
 
@@ -26,6 +26,11 @@ export default function Rdi() {
     ,RdiSearch
     ,searchRdiList
   } = useFoStore((state) => state) || { processAreaList: { processAreaList: [] }};
+  const store = useContext(StoreContext);
+
+  if (!store) {
+    throw new Error("StoreContext is not available. Ensure StoreProvider is mounted.");
+  }
   
   const {
     isInit,
@@ -41,6 +46,11 @@ export default function Rdi() {
     btnClass
   } = Common;
 
+  const defaultSearchYear =
+    selectSearchYear.find((item) => item.selected)?.val ||
+    selectSearchYear[0]?.val ||
+    "0";
+
   const {
     labelArray,
   } = RdiSearch;
@@ -51,7 +61,6 @@ export default function Rdi() {
     upHeadList3,
     rdiList,
     rdiCount,
-    excelList,
     isLoading,
   } = Rdi;
 
@@ -83,9 +92,10 @@ export default function Rdi() {
   // 시설상태
   const [operationValue, setOperationValue] = useState<string>("0");
   // 조회기간
-  const [searchYear, setSearchYear] = useState<string>(selectSearchYear[0]?.val || "0");
+  const [searchYear, setSearchYear] = useState<string>(defaultSearchYear);
   // 엑셀 다운로드 트리거
-  const [isInitExcelDownload, setIsInitExcelDownload] = useState<boolean>(false);
+  const [isExcelDownClick, setIsExcelDownClick] = useState<boolean>(false);
+  
 
   const [initTrigger, setInitTrigger] = useState<boolean>(false);
   /**
@@ -99,7 +109,7 @@ export default function Rdi() {
     // 상태값 설정
     setFcltCpct(selectUpdownData[0]?.val || "0");
     setOperationValue(selectOperationData[0]?.val || "0");
-    setSearchYear(selectSearchYear[0]?.val || "0");
+    setSearchYear(defaultSearchYear);
     // SearchInputSelect 초기화
     setFcltyName("");
     if (searchInputRef.current) {
@@ -112,23 +122,11 @@ export default function Rdi() {
     searchRdi(ref.current, 1, 10);
   }
 
-  useEffect(() => {
-    if(!isInitExcelDownload) return ;
-    if (excelList && excelList.length > 0) {
-      downloadExcel({ 
-        data: excelList as unknown as JSON[], 
-        fileName: 'RDII추정', 
-        sheetNameArray: ['RDII추정'], 
-        headerRange: 'A1:R1' 
-      });
-    }
-  }, [excelList, isInitExcelDownload]);
-
   /**
    * 콜백함수
    */
   // 조회
-  const searchRdi = useCallback(({ partValue, regionValue, unitWaterShedValue, middleRegionValue, envPartValue, sidoValue, sigunValue }: ReturnType, pageNo: number, pageCnt:number=20) => {
+  const searchRdi = useCallback(async ({ partValue, regionValue, unitWaterShedValue, middleRegionValue, envPartValue, sidoValue, sigunValue }: ReturnType, pageNo: number, pageCnt:number=20) => {
     let nameCd, partStr
     switch (partValue) {
       case 'R':
@@ -147,10 +145,9 @@ export default function Rdi() {
     }
 
     if(partStr === 'G'){
-      searchRdiList(pageNo, pageCnt, searchYear);
+      await searchRdiList(pageNo, pageCnt, searchYear);
     }else{
-      searchRdiList(pageNo, pageCnt, searchYear, partStr, nameCd || '0', fcltCpct, operationValue, fcltyName.trim() !== "" || fcltyName.trim() !== null ? fcltyName : undefined);
-
+      await searchRdiList(pageNo, pageCnt, searchYear, partStr, nameCd || '0', fcltCpct, operationValue, fcltyName.trim() !== "" || fcltyName.trim() !== null ? fcltyName : undefined);
     }
   }, [operationValue, fcltyName, searchRdiList, searchYear, fcltCpct]);
 
@@ -174,10 +171,71 @@ export default function Rdi() {
   }, [upHeadList1, upHeadList2, upHeadList3]);
 
   // 엑셀다운로드 
-  const excelDownload = useCallback(() => {
-    searchRdi(ref.current, 1, 5000);
-    setIsInitExcelDownload(true);
-  }, [searchRdi]);
+  const excelDownload = useCallback(async () => {
+    if (isExcelDownClick) return;
+    // if (ref.current.partValue === 'A') { // 행정별
+    //   if (!ref.current.sidoValue || ref.current.sidoValue === '0') {
+    //     alert('엑셀 다운로드는 시도 조건을 선택한 후 이용 가능합니다.');
+    //     return;
+    //   }
+    // } else if (ref.current.partValue === 'R') { // 유역별
+    //   if (!ref.current.regionValue || ref.current.regionValue === '0') {
+    //     alert('엑셀 다운로드는 유역 조건을 선택한 후 이용 가능합니다.');
+    //     return;
+    //   }
+    // } else if (ref.current.partValue === 'G') { // 환경청별
+    //   if (!ref.current.envPartValue || ref.current.envPartValue === '0') {
+    //     alert('엑셀 다운로드는 환경청 조건을 선택한 후 이용 가능합니다.');
+    //     return;
+    //   }
+    // } 
+
+    setIsExcelDownClick(true);
+    try {
+      await searchRdi(ref.current, 1, 5000);
+      const latestExcelList = store.getState().Rdi.excelList || [];
+      if (latestExcelList.length > 0) {
+        const toNumber = (value: unknown) => {
+          if (value === null || value === undefined || value === '') return '';
+          const parsed = typeof value === "number" ? value : Number(String(value).replace(/,/g, ""));
+          return Number.isFinite(parsed) ? parsed : '';
+        };
+
+        const numericKeys = [
+          "시설용량(m³/일)",
+          "청천시유입하수량(m³/일)",
+          "하절기강우일최저유입BOD(mg/L)",
+          "하절기최저유입BOD유입유량(m³/일)",
+          "동절기청천시유입BOD(mg/L)",
+          "RDII추정",
+          "RDII추정시일강수량(mm)",
+          "강우시총추정유입량(m³/일)",
+        ];
+
+        const excelData = latestExcelList.map((row) => {
+          const nextRow = { ...row } as Record<string, unknown>;
+          numericKeys.forEach((key) => {
+            if (key in nextRow) {
+              nextRow[key] = toNumber(nextRow[key]);
+            }
+          });
+          return nextRow;
+        });
+
+        downloadExcelFormat({ 
+          data: excelData as unknown as JSON[], 
+          fileName: 'RDII추정', 
+          sheetNameArray: ['RDII추정'], 
+          headerRange: 'A1:R1',
+          decimalArray0: [9, 10, 11, 12, 13, 14, 15, 16],
+        });
+      } else {
+        alert("조회된 결과가 없습니다.");
+      }
+    } finally {
+      setIsExcelDownClick(false);
+    }
+  }, [isExcelDownClick, searchRdi, store]);
 
   // 페이지 변경
   const handlePageChange = useCallback((page: number) => {
@@ -209,13 +267,15 @@ export default function Rdi() {
           btnClass={btnClass}
           queryClick={chkVal}
           excelClick={excelDownload}
+          excelDisabled={isExcelDownClick}
           initClick={resetVal}
           ref={ref} isAdmin={false} initSidoValue={"11"}/>
       <ListDiv>
       <LoadingOverlay isLoading={isLoading} />
         <div className="h-full w-full overflow-x-scroll min-[1200px]:overflow-x-hidden">
             <div className="w-[120%] min-[1200px]:w-[100%]">
-            <UiTable cellClick={ undefined } headName={"RDII추정"} tableData={mainList} headlist={upheadList} pageSize={10} total={total} resetPageNo={resetPage} onPageChange={handlePageChange} widthFixed={true} />
+            <UiTable cellClick={ undefined } headName={"RDII추정"} tableData={mainList} headlist={upheadList} 
+              pageSize={10} total={total} resetPageNo={resetPage} onPageChange={handlePageChange} widthFixed={true} />
           </div>
           <UnderComment divHeight={"0"} commentArray={commentArray} />
         </div>
@@ -223,4 +283,4 @@ export default function Rdi() {
       </ContentsDiv>
     </MainDiv>
   );
-}
+}

apps/fo/app/pages/(with-layout)/sewageOccur/modal/page.tsx

@@ -8,7 +8,7 @@
 import { roundNumber } from "@/app/components/common/DataForm";
 import { useFoStore } from "@/app/store";
 import type { modalTableType } from "@/app/store/sewageOccur";
-import { DateMonthPicker, downloadExcel, UiTable } from "@common/business_components/ui";
+import { DateMonthPicker, downloadExcelHeaders, UiTable } from "@common/business_components/ui";
 import ListDiv from "@common/business_components/ui/list_div";
 import { Button, Table, TableCell, TableHead, TableRow } from "@common/components/ui";
 import { useEffect, useState } from "react";
@@ -69,20 +69,25 @@ export default function SewageOccurModal(props: { fcltyName: string; facilityCd
     }
   }, [endYearMonth, startYearMonth]);
 
- const excelDownload = () => {
+  const excelDownload = () => {
+    // 헤더 순서를 명시적으로 정의
+    const headers = ["날짜", "물사용량(m³/일)", "오수전환율(%)", "오수발생량 추정(m³/일)"] as const;
+  
     const excelDownList: any[] = [];
     if(detailList.length > 0){
       detailList.forEach((item) => {
-        excelDownList.push({
-          "날짜": item.msrDt,
-          "물사용량(m³/일)": roundNumber(item.waterUsage, 0),
-          "오수전환율(%)": roundNumber(item.swageChangePercent, 0),
-          "오수발생량 추정(m³/일)": roundNumber(item.estimationSewage, 0),
-        });
+        // 순서를 보장하기 위해 헤더 순서대로 객체 생성
+        const row: Record<string, string | number> = {};
+        row[headers[0]] = item.msrDt;
+        row[headers[1]] = roundNumber(item.waterUsage, 0);
+        row[headers[2]] = roundNumber(item.swageChangePercent, 0);
+        row[headers[3]] = roundNumber(item.estimationSewage, 0);
+        excelDownList.push(row);
       });
     }
     if (excelDownList && excelDownList.length > 0) {
-      downloadExcel({ data: JSON.parse(JSON.stringify(excelDownList)), fileName: props.searchYear+'년 '+props.fcltyName + ' 오수발생량 추정', sheetNameArray: [props.fcltyName + ' 오수발생량 추정'], headerRange: 'A1:D1' });
+      downloadExcelHeaders({ data: JSON.parse(JSON.stringify(excelDownList)), fileName: props.searchYear+'년 '+props.fcltyName + ' 오수발생량 추정'
+        , sheetNameArray: [props.fcltyName + ' 오수발생량 추정'], headerRange: 'A1:D1', headers });
     } else if (detailList.length == 0) {
       alert('다운받을 데이터가 없습니다.');
     }