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

.gitignore

@@ -18,5 +18,5 @@ apps/wr/.next/**/*
 apps/fo/.next/**/*
 
 # env
-.env*
+#.env*
 .qodo

.idea/.gitignore

@@ -1,8 +0,0 @@
-# 디폴트 무시된 파일
-/shelf/
-/workspace.xml
-# 에디터 기반 HTTP 클라이언트 요청
-/httpRequests/
-# Datasource local storage ignored files
-/dataSources/
-/dataSources.local.xml

apps/cs/app/(with-base-layout)/link/page.tsx

@@ -0,0 +1,2 @@
+import { LinkPage } from "@/pages/link";
+export default LinkPage;

apps/cs/app/(with-base-layout)/link/register/[id]/page.tsx

@@ -0,0 +1,10 @@
+import { ModifyLinkPage as VModifyLinkPage } from "@/pages/link";
+
+export default async function ModifyLinkPage({
+    params,
+}: {
+    params: Promise<{ id: string }>;
+}) {
+    const { id } = await params;
+    return <VModifyLinkPage linkSn={id} />;
+};

apps/cs/app/(with-base-layout)/link/register/page.tsx

@@ -0,0 +1,2 @@
+import { RegistLinkPage } from "@/pages/link";
+export default RegistLinkPage;

apps/cs/app/(with-base-layout)/linkLog/page.tsx

@@ -0,0 +1,2 @@
+import { LinkLogPage } from "@/pages/linkLog";
+export default LinkLogPage;

apps/cs/app/(with-base-layout)/linkParams/page.tsx

@@ -0,0 +1,2 @@
+import { LinkParamsPage } from "@/pages/linkParams";
+export default LinkParamsPage;

apps/cs/app/(with-base-layout)/linkStats/page.tsx

@@ -0,0 +1,2 @@
+import { LinkStatsPage } from "@/pages/linkStats";
+export default LinkStatsPage;

apps/cs/app/(with-base-layout)/linkTable/page.tsx

@@ -0,0 +1,2 @@
+import { LinkTablePage } from "@/pages/linkTable";
+export default LinkTablePage;

apps/cs/src/entities/link/api/link-service.ts

@@ -0,0 +1,191 @@
+import axios from "axios";
+import {
+    type LinkService,
+    type LinkSearchParam,
+    type LinkList,
+    type LinkFormData,
+    type LinkInfo,
+    type LinkLogList,
+    type LinkStatsList,
+    type LinkVrblList,
+    type LinkVrblFormData,
+    type LinkVrbl,
+    type LinkTable,
+    type LinkTableColumnsList,
+    type LinkTableColumns,
+    type LinkTableColData,
+    type LinkTableFormData,
+} from "../model/link-interface";
+
+export class LinkApiService implements LinkService {
+    public async getLinkList(params: LinkSearchParam): Promise<LinkList> {
+        const response = await axios.get<LinkList>(
+            `${process.env.NEXT_PUBLIC_LINK_BACKEND_API_HOST}/getLinkList`,
+            { params }
+        );
+        return response.data;
+    }
+
+    public async getLinkInfo(linkSn: string): Promise<LinkInfo> {
+        const response = await axios.get<LinkInfo>(
+            `${process.env.NEXT_PUBLIC_LINK_BACKEND_API_HOST}/getLinkInfo/${linkSn}`,
+        );
+        return response.data;
+    }
+
+    public async linkQuickStart(linkSn: string): Promise<string> {
+        const response = await axios.patch<string>(
+            `${process.env.NEXT_PUBLIC_LINK_BACKEND_API_HOST}/linkQuickStart/${linkSn}`,
+        );
+        return response.data;
+    }
+
+    public async updateLinkInfo(data: LinkFormData): Promise<void> {
+        await axios.put<void>(
+            `${process.env.NEXT_PUBLIC_LINK_BACKEND_API_HOST}/updateLinkInfo`,
+            data,
+        );
+    }
+
+    public async insertLinkInfo(data: LinkFormData): Promise<void> {
+        await axios.post<void>(
+            `${process.env.NEXT_PUBLIC_LINK_BACKEND_API_HOST}/insertLinkInfo`,
+            data,
+        );
+    }
+
+    public async deleteLink(linkSn: string): Promise<void> {
+        await axios.delete<void>(
+            `${process.env.NEXT_PUBLIC_LINK_BACKEND_API_HOST}/deleteLink/${linkSn}`,
+        );
+    }
+
+    public async getLinkLogList(params: LinkSearchParam): Promise<LinkLogList> {
+        const response = await axios.get<LinkLogList>(
+            `${process.env.NEXT_PUBLIC_LINK_BACKEND_API_HOST}/selectLinkLoglist`,
+            { params }
+        );
+        return response.data;
+    }
+
+    public async getLinkStatsList(params: LinkSearchParam): Promise<LinkStatsList> {
+        const response = await axios.get<LinkStatsList>(
+            `${process.env.NEXT_PUBLIC_LINK_BACKEND_API_HOST}/selectLinkStats`,
+            { params }
+        );
+        return response.data;
+    }
+
+    public async getLinkVrblList(linkSn: string): Promise<LinkVrblList> {
+        const response = await axios.get<LinkVrblList>(
+            `${process.env.NEXT_PUBLIC_LINK_BACKEND_API_HOST}/getLinkVrblList/${linkSn}`,
+        );
+        return response.data;
+    }
+
+    public async insertLinkVrbl(data: LinkVrblFormData): Promise<number> {
+        const response = await axios.post<number>(
+            `${process.env.NEXT_PUBLIC_LINK_BACKEND_API_HOST}/insertLinkVrbl`,
+            data,
+        );
+
+        return response.data;
+    }
+
+    public async deleteLinkVrbl(data: string[]): Promise<void> {
+        await axios.delete<void>(
+            `${process.env.NEXT_PUBLIC_LINK_BACKEND_API_HOST}/deleteLinkVrbl`,
+            {
+                data
+            }
+        );
+    }
+
+    public async getLinkVrblInfo(linkVrblSn: string): Promise<LinkVrbl> {
+        const response = await axios.get<LinkVrbl>(
+            `${process.env.NEXT_PUBLIC_LINK_BACKEND_API_HOST}/getLinkVrblInfo/${linkVrblSn}`,
+        );
+        return response.data;
+    }
+
+    public async updateLinkVrblInfo(data: LinkVrblFormData): Promise<void> {
+        await axios.put<void>(
+            `${process.env.NEXT_PUBLIC_LINK_BACKEND_API_HOST}/updateLinkVrblInfo`,
+            data,
+        );
+    }
+
+    public async getLinkTableInfo(linkSn: string): Promise<LinkTable> {
+        const response = await axios.get<LinkTable>(
+            `${process.env.NEXT_PUBLIC_LINK_BACKEND_API_HOST}/getLinkTableInfo/${linkSn}`,
+        );
+        return response.data;
+    }
+
+    public async getLinkTableColList(linkSn: string): Promise<LinkTableColumnsList> {
+        const response = await axios.get<LinkTableColumnsList>(
+            `${process.env.NEXT_PUBLIC_LINK_BACKEND_API_HOST}/getLinkTableColList/${linkSn}`,
+        );
+        return response.data;
+    }
+
+    public async getLinkTableColInfo(params: { colSn: string; tblSn:string; }): Promise<LinkTableColumns> {
+        const response = await axios.get<LinkTableColumns>(
+            `${process.env.NEXT_PUBLIC_LINK_BACKEND_API_HOST}/getLinkTableColInfo`,
+            { params }
+        );
+        return response.data;
+    }
+
+    public async insertLinkTableCol(data: LinkTableColData): Promise<void> {
+        await axios.post<void>(
+            `${process.env.NEXT_PUBLIC_LINK_BACKEND_API_HOST}/insertLinkTableCol`,
+            data
+        );
+    }
+
+    public async deleteLinkTableCol(data: string[]): Promise<void> {
+        await axios.delete<void>(
+            `${process.env.NEXT_PUBLIC_LINK_BACKEND_API_HOST}/deleteLinkTableCol`,
+            {
+                data
+            },
+        );
+    }
+
+    public async updateLinkTableCol(data: LinkTableColData): Promise<void> {
+        axios.put<void>(
+            `${process.env.NEXT_PUBLIC_LINK_BACKEND_API_HOST}/updateLinkTableCol`,
+            data,
+        );
+    }
+
+    public async insertLinkTableInfo(data: LinkTableFormData): Promise<void> {
+        await axios.post<void>(
+            `${process.env.NEXT_PUBLIC_LINK_BACKEND_API_HOST}/insertLinkTableInfo`,
+            data
+        );
+    }
+
+    public async updateLinkTableInfo(data: LinkTableFormData): Promise<void> {
+        await axios.put<void>(
+            `${process.env.NEXT_PUBLIC_LINK_BACKEND_API_HOST}/updateLinkTableInfo`,
+            data
+        );
+    }
+
+    public async countLinkTblNm(tblNm: string): Promise<{count: number, tbl_sn: string}> {
+        const response = await axios.get<{count: number, tbl_sn: string}>(
+            `${process.env.NEXT_PUBLIC_LINK_BACKEND_API_HOST}/countLinkTblNm/${tblNm}`,
+        );
+        return response.data;
+    }
+
+    public async updateLinkResultCode(linkSn: string): Promise<void> {
+        await axios.patch<void>(
+            `${process.env.NEXT_PUBLIC_LINK_BACKEND_API_HOST}/updateLinkResultCode/${linkSn}`,
+        );
+    }
+}
+
+export const LinkApi = new LinkApiService();

apps/cs/src/entities/link/index.ts

@@ -0,0 +1,18 @@
+export { LinkApi } from "./api/link-service";
+export {
+    type LinkSearchParam,
+    type Link,
+    type LinkFormData,
+    type LinkLog,
+    type LinkStats,
+    type LinkVrbl,
+    type LinkVrblFormData,
+    type LinkTable,
+    type LinkTableColumns,
+    type LinkTableColData,
+    type LinkTableFormData,
+    linkFormSchema,
+    linkVrblFormSchema,
+    LinkTableColumnsSchema,
+    LinkTableSchema,
+} from "./model/link-interface"

apps/cs/src/entities/link/model/link-interface.ts

@@ -0,0 +1,235 @@
+import { z } from "zod";
+import type { PageableParams, PageableList } from "@/shared/model";
+
+export interface Link {
+    link_sn: string;
+    link_nm: string;
+    link_clsf_cd: string;
+    link_url: string;
+    link_srvr_ip: string;
+    link_db_cd: string;
+    link_key: string;
+    link_id: string;
+    link_pswd: string;
+    link_cycle_stng: string;
+    srvc_usg: string;
+    last_link_rslt_cd: string;
+    last_link_excn_dt: string;
+    next_link_excn_dt: string;
+    last_link_err_cd: string;
+    mdfcn_dt: string;
+    mdfr: string;
+    link_batch_time: string;
+}
+
+export interface LinkLog {
+    rownum: number;
+    link_sn: string;
+    link_nm: string;
+    link_rslt_cd: string;
+    err_cn: string;
+    link_err_cd: string;
+    log_crt_dt: string;
+}
+
+export interface LinkInfo extends LinkFormData {
+    link_sn: string;
+    link_nm: string;
+    link_clsf_cd: string;
+    link_url: string;
+    link_srvr_ip: string;
+    link_db_cd: string;
+    link_key: string;
+    link_id: string;
+    link_pswd: string;
+    srvc_usg: string;
+    last_link_rslt_cd: string;
+    last_link_excn_dt: string;
+    next_link_excn_dt: string;
+    last_link_err_cd: string;
+    mdfcn_dt: string;
+    mdfr: string;
+    link_batch_time: number;
+}
+
+export interface LinkStats {
+    link_sn: string;
+    link_nm: string;
+    count: number;
+}
+
+export interface LinkVrbl {
+    link_vrbl_sn: string;
+    link_vrbl_nm: string;
+    link_vrbl_vl: string;
+    link_vrbl_cd: string;
+    link_vrbl_expln: string;
+    mdfcn_dt: string;
+    mdfr: string;
+}
+
+export interface LinkTable {
+    link_nm: string;
+    link_sn: string;
+    tbl_sn: string;
+    sou_tbl_nm: string;
+    sou_tbl_korn_nm: string;
+    sou_tbl_expln: string;
+    trsf_tbl_nm: string;
+    trsf_tbl_korn_nm: string;
+    trsf_tbl_expln: string;
+}
+
+export interface LinkTableColumns {
+    tbl_sn: string;
+    col_sn: string;
+    sou_col_nm: string;
+    sou_col_korn_nm: string;
+    sou_col_data_frm: string;
+    sou_col_sz: number;
+    trsf_col_nm: string;
+    trsf_col_korn_nm: string;
+    trsf_col_data_frm: string;
+    trsf_col_sz: number
+    pk_yn: string;
+    col_seq: number;
+    mdfcn_dt: string;
+    mdfr: string;
+}
+
+export const linkFormSchema = z.object({
+    link_clsf_cd: z.string().max(8).nullable().refine((val) => {
+        // 빈 값이나 "none" 값이면 false 반환
+        return val && val !== "none";
+    }, {
+        message: "연계 분류를 선택해주세요"
+    }),
+    link_sn: z.string().max(50).nullable().optional(),
+    link_nm: z.string().max(40, { message: '연계명은 40자 이하로 입력해 주세요.' }).nonempty({ message: '연계명은 필수입니다.' }),
+    link_url: z.string().max(1000, { message: '연계 URL은 1000자 이하로 입력해 주세요.' }).nonempty({ message: '연계 URL은 필수입니다.' }),
+    link_srvr_ip: z.string().max(20).nullable().optional(),
+    link_db_cd: z.string().max(10).nullable().optional(),
+    link_key: z.string().max(100, { message: '연계 KEY는 100자 이하로 입력해 주세요.' }).nonempty({ message: '연계 KEY는 필수입니다.' }),
+    link_id: z.string().max(20).nullable().optional(),
+    link_pswd: z.string().max(128).nullable().optional(),
+    srvc_usg: z.string().max(40).nullable().optional(),
+    last_link_rslt_cd: z.string().max(4).nullable().optional(),
+    last_link_excn_dt: z.string().max(40).nullable().optional(),
+    next_link_excn_dt: z.string().max(40).nullable().optional(),
+    last_link_err_cd: z.string().max(10).nullable().optional(),
+    mdfcn_dt: z.string().nullable().optional(),
+    mdfr: z.string().nullable().optional(),
+    link_batch_time: z.coerce.number().nullable().optional().refine((val) => {
+        if (val == null) return true;
+        return val >= 5;
+    }, {
+        message: "연계 주기는 5분 이상이어야 합니다."
+    }),
+});
+
+export const linkVrblFormSchema = z.object({
+    link_sn: z.string().max(50).nullable().optional(),
+    link_vrbl_sn: z.string().max(50).nullable().optional(),
+    link_vrbl_nm: z.string().max(40, { message: '변수명은 40자 이하로 입력해 주세요.' }).nonempty({ message: '변수명은 필수입니다.' }),
+    link_vrbl_expln: z.string().max(4000, { message: '설명은 400자 이하로 입력해 주세요.' }).nullable().optional(),
+    link_vrbl_cd: z.string().max(10, { message: '변수코드는 10자 이하로 입력해 주세요.' }).nullable().optional(),
+    link_vrbl_vl: z.string().max(1000, { message: '변수값은 1000자 이하로 입력해 주세요.' }).nonempty({ message: '변수값은 필수입니다.' }),
+    mdfcn_dt: z.string().nullable().optional(),
+    mdfr: z.string().nullable().optional(),
+});
+
+export const LinkTableColumnsSchema = z.object({
+    link_sn: z.string().max(50).nullable().optional(),
+    tbl_sn: z.string().max(50).nullable().optional(),
+    col_sn: z.string().max(50).nullable().optional(),
+    sou_col_nm: z.string().max(40, { message: '40자 이하로 입력해 주세요.' }).nullable().optional(),
+    sou_col_korn_nm: z.string().max(40, { message: '40자 이하로 입력해 주세요.' }).nullable().optional(),
+    sou_col_data_frm: z.string().max(40, { message: '40자 이하로 입력해 주세요.' }).nullable().optional(),
+    sou_col_sz: z.coerce.number().nullable().optional().refine((val) => {
+        if (val == null) return true;
+        return val.toString().replace('.', '').length <= 14;
+    }, {
+        message: '최대 14자리까지 입력 가능합니다.',
+    }),
+    pk_yn: z.string().max(1).nonempty(),
+    trsf_col_nm: z.string().max(40, { message: '40자 이하로 입력해 주세요.' }).nonempty({ message: '변환컬럼명은 필수입니다.' }),
+    trsf_col_korn_nm: z.string().max(40, { message: '40자 이하로 입력해 주세요.' }).nonempty({ message: '변환컬럼 한글명은 필수입니다.' }),
+    trsf_col_data_frm: z.string().max(40, { message: '40자 이하로 입력해 주세요.' }).nonempty({ message: '변환컬럼 데이터 형식은 필수입니다.' }),
+    trsf_col_sz: z.coerce.number().nullable().optional().refine((val) => {
+        if (val == null) return true;
+        return val.toString().replace('.', '').length <= 14;
+    }, {
+        message: '최대 14자리까지 입력 가능합니다.',
+    }),
+    col_seq: z.coerce.number().nullable().optional().refine((val) => {
+        if (val == null) return true;
+        return val > 0;
+    }, {
+        message: "컬럼 매칭 순서는 0 이상이어야 합니다."
+    }),
+    mdfcn_dt: z.string().nullable().optional(),
+    mdfr: z.string().nullable().optional(),
+});
+
+export const LinkTableSchema = z.object({
+    link_sn: z.string().max(50).nullable().optional(),
+    tbl_sn: z.string().max(50).nullable().optional(),
+    link_nm: z.string().max(50).nullable().optional(),
+    sou_tbl_nm: z.string().max(40, { message: '40자 이하로 입력해 주세요.' }).nullable().optional(),
+    sou_tbl_korn_nm: z.string().max(40, { message: '40자 이하로 입력해 주세요.' }).nullable().optional(),
+    sou_tbl_expln: z.string().max(2000, { message: '설명은 2000자 이하로 입력해 주세요.' }).nullable().optional(),
+    trsf_tbl_nm: z.string().max(40, { message: '40자 이하로 입력해 주세요.' }).nonempty({ message: '변환테이블명은 필수입니다.' }),
+    trsf_tbl_korn_nm: z.string().max(40, { message: '40자 이하로 입력해 주세요.' }).nonempty({ message: '변환테이블 한글명은 필수입니다.' }),
+    trsf_tbl_expln: z.string().max(2000, { message: '설명은 2000자 이하로 입력해 주세요.' }).nullable().optional(),
+    mdfcn_dt: z.string().nullable().optional(),
+    mdfr: z.string().nullable().optional(),
+});
+
+interface LinkStatsListObject {
+    linkSuccStats: LinkStats[] | null;
+    linkFailStats: LinkStats[] | null;
+}
+
+export interface LinkSearchParam extends PageableParams {
+    linkSn?: string;
+    linkNm?: string;
+    startDate?: string;
+    endDate?: string;
+    isSucc?: string;
+}
+
+export type LinkFormData = z.infer<typeof linkFormSchema>;
+export type LinkVrblFormData = z.infer<typeof linkVrblFormSchema>;
+export type LinkTableColData = z.infer<typeof LinkTableColumnsSchema>;
+export type LinkTableFormData = z.infer<typeof LinkTableSchema>;
+export type LinkList = PageableList<Link>;
+export type LinkLogList = PageableList<LinkLog>;
+export type LinkStatsList = LinkStatsListObject;
+export type LinkVrblList = PageableList<LinkVrbl>;
+export type LinkTableColumnsList = PageableList<LinkTableColumns>;
+
+export interface LinkService {
+    getLinkList(params: LinkSearchParam): Promise<LinkList>;
+    getLinkInfo(params: string): Promise<LinkInfo>;
+    linkQuickStart(params: string): Promise<string>;
+    updateLinkInfo(data: LinkFormData): Promise<void>;
+    deleteLink(params: string): Promise<void>;
+    getLinkLogList(params: LinkSearchParam): Promise<LinkLogList>;
+    getLinkStatsList(params: LinkSearchParam): Promise<LinkStatsList>;
+    getLinkVrblList(params: string): Promise<LinkVrblList>;
+    insertLinkVrbl(data: LinkVrblFormData): Promise<number>;
+    deleteLinkVrbl(data: string[]): Promise<void>;
+    getLinkVrblInfo(params: string): Promise<LinkVrbl>;
+    updateLinkVrblInfo(data: LinkVrblFormData): Promise<void>;
+    getLinkTableInfo(params: string): Promise<LinkTable>;
+    getLinkTableColList(params: string): Promise<LinkTableColumnsList>;
+    getLinkTableColInfo(params: { colSn: string; tblSn: string; }): Promise<LinkTableColumns>;
+    insertLinkTableCol(data: LinkTableColData): Promise<void>;
+    deleteLinkTableCol(data: string[]): Promise<void>;
+    updateLinkTableCol(data: LinkTableColData): Promise<void>;
+    insertLinkTableInfo(data: LinkTableFormData): Promise<void>;
+    updateLinkTableInfo(data: LinkTableFormData): Promise<void>;
+    insertLinkInfo(data: LinkFormData): Promise<void>;
+    countLinkTblNm(tblNm: string): Promise<{ count: number, tbl_sn: string }>;
+    updateLinkResultCode(linkSn: string): Promise<void>;
+}

apps/cs/src/pages/link/index.ts

@@ -0,0 +1,3 @@
+export { ModifyLinkPage } from "./ui/modify-page";
+export { RegistLinkPage } from "./ui/regist-page";
+export { LinkPage } from "./ui/link-page";

apps/cs/src/pages/link/model/table-columns.tsx

@@ -0,0 +1,88 @@
+import dayjs from "dayjs";
+import { createColumnHelper } from "@tanstack/react-table";
+import { type Link } from "@/entities/link";
+import QuickStartButton from "../ui/QuickStartButton";
+
+const columnHelper = createColumnHelper<Link>();
+
+const convertMinutesToPeriod = (minutes: number): string  => {
+    if (!minutes) return '';
+    
+    const year = Math.floor(minutes / (525600)); // 365일 * 24시간 * 60분
+    minutes = minutes % 525600;
+    
+    const month = Math.floor(minutes / (43200)); // 30일 * 24시간 * 60분
+    minutes = minutes % 43200;
+    
+    const day = Math.floor(minutes / 1440); // 24시간 * 60분
+    minutes = minutes % 1440;
+    
+    const hour = Math.floor(minutes / 60);
+    const minute = minutes % 60;
+    
+    const parts = [];
+    if (year > 0) parts.push(`${year}년`);
+    if (month > 0) parts.push(`${month}개월`);
+    if (day > 0) parts.push(`${day}일`);
+    if (hour > 0) parts.push(`${hour}시간`);
+    if (minute > 0) parts.push(`${minute}분`);
+    
+    return parts.join(' ');
+};
+
+const columns = [
+    columnHelper.accessor((_, index) => index + 1, {
+        id: 'no',
+        header: 'NO',
+    }),
+    columnHelper.accessor('link_sn', {
+        id: 'link_sn',
+        header: '연계일련번호',
+    }),
+    columnHelper.accessor('link_nm', {
+        id: 'link_nm',
+        header: '연계 명',
+    }),
+    columnHelper.accessor('link_url', {
+        id: 'link_url',
+        header: '연계 URL',
+        cell: (info) => (info.getValue() ? info.getValue() : '-'),
+    }),
+    columnHelper.accessor('link_srvr_ip', {
+        id: 'link_srvr_ip',
+        header: '연계서버 IP',
+        cell: (info) => (info.getValue() ? info.getValue() : '-'),
+    }),
+    columnHelper.accessor('link_batch_time', {
+        id: 'link_batch_time',
+        header: '연계 주기',
+        cell: (info) => convertMinutesToPeriod(Number(info.getValue())),
+    }),
+    columnHelper.accessor('srvc_usg', {
+        id: 'srvc_usg',
+        header: '서비스용도',
+        cell: (info) => (info.getValue() ? info.getValue() : '-'),
+    }),
+    columnHelper.display({
+        id: 'last_link_rslt_cd',
+        header: '연계상태',
+        cell: (info) => {
+            const resultCd = info.row.original.last_link_rslt_cd;
+            return <span className={`${(resultCd === 'SUCC') ? 'text-[rgb(53,162,235)]' : (resultCd === 'FAIL' ? 'text-[rgb(255,99,132)]' : 'text-[rgba(31,208,120,1)]')}`}>{resultCd === 'SUCC' ? '성공' : (resultCd === 'FAIL' ? '실패' : '대기')}</span>
+        },
+    }),
+    columnHelper.accessor('last_link_excn_dt', {
+        id: 'last_link_excn_dt',
+        header: '최종연계일',
+        cell: (info) => (info.getValue() ? dayjs(info.getValue()).format('YYYY-MM-DD HH:mm') : '-'),
+    }),
+    columnHelper.display({
+        id: 'quick_start_btn',
+        header: '즉시 실행',
+        cell: (info) => {
+            return <QuickStartButton linkSn={info.row.original.link_sn} />
+        }
+    })
+];
+
+export { columns };

apps/cs/src/pages/link/ui/QuickStartButton.tsx

@@ -0,0 +1,36 @@
+import { useMutation } from "@tanstack/react-query";
+import { LinkApi } from "@/entities/link";
+import { useAlertStore } from "@/shared/lib/use-alert-store";
+import { Button } from "@common/components";
+
+const QuickStartButton: React.FC<{ linkSn: string }> = ({ linkSn }) => {
+  const { setMessage: alert } = useAlertStore((state) => state);
+
+  const { mutateAsync: updateQuickStart } = useMutation({
+    mutationFn: (linkSn: string) => LinkApi.linkQuickStart(linkSn),
+    onSuccess: (result) => {
+      if (result === 'succ') {
+        alert('즉시 실행 요청이 완료되었습니다.');
+      } else {
+        alert('기존 요청이 실행 대기중입니다.');
+      }
+    },
+    onError: () => {
+      alert('즉시 실행 요청을 실패했습니다.');
+    },
+  });
+
+  return (
+    <Button
+      color="sky"
+      onClick={(e) => {
+        e.stopPropagation();
+        updateQuickStart(linkSn);
+      }}
+    >
+      즉시 실행
+    </Button>
+  );
+};
+
+export default QuickStartButton;

apps/cs/src/pages/link/ui/link-form.tsx

@@ -0,0 +1,590 @@
+import {
+    Button,
+    Input,
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableRow,
+    Select,
+    SelectTrigger,
+    SelectContent,
+    SelectItem,
+    SelectValue,
+} from "@common/components";
+import { FormItem, FormControl, FormField, Form } from "@/shared/ui/form";
+import { ConfirmDialog } from "@/shared/ui/confirm-dialog";
+import type { UseFormReturn } from "react-hook-form";
+import { type LinkFormData } from "@/entities/link";
+import dayjs from "dayjs";
+import { useRouter } from "next/navigation";
+import { useConfirm } from "@frontend-opensource/use-react-hooks";
+import { useState } from "react";
+
+
+type LinkFormProps = {
+    form: UseFormReturn<LinkFormData>;
+    linkSn?: string;
+    updateLinkInfo?: (data: LinkFormData) => void;
+    handleInsertLink?: (data: LinkFormData) => void;
+    deleteLink?: () => void;
+    updateLinkResultCode?: () => void;
+}
+
+const LinkForm = ({ form, linkSn, updateLinkInfo, handleInsertLink, deleteLink, updateLinkResultCode }: LinkFormProps) => {
+    const isModifyMode = !!linkSn;
+    const router = useRouter();
+
+    const { confirm } = useConfirm();
+    const [onConfirm, setOnConfirm] = useState(false);
+
+    const handleConfirm = async (callback: () => Promise<void>) => {
+        setOnConfirm(true);
+        await callback();
+        setOnConfirm(false);
+    };
+
+    const handleSubmit = async (data: LinkFormData) => {
+        const confirmMsg = !!linkSn ? '수정 하시겠습니까?' : '저장 하시겠습니까?';
+
+        await handleConfirm(async () => {
+
+            if (await confirm(confirmMsg)) {
+                if (linkSn) {
+                    updateLinkInfo?.(data);
+                  } else {
+                    handleInsertLink?.(data);
+                  }
+            }
+        });
+    };
+
+    const handleDelete = async () => {
+        await handleConfirm(async () => {
+            if (await confirm('삭제하시겠습니까?')) {
+                deleteLink?.();
+            }
+        })
+    };
+
+    const convertMinutesToPeriod = (minutes: number) => {
+        if (!minutes) return {
+            year: 0,
+            month: 0,
+            day: 0,
+            hour: 0,
+            minute: 0
+        };
+
+        const year = Math.floor(minutes / (525600)); // 365일 * 24시간 * 60분
+        minutes = minutes % 525600;
+
+        const month = Math.floor(minutes / (43200)); // 30일 * 24시간 * 60분
+        minutes = minutes % 43200;
+
+        const day = Math.floor(minutes / 1440); // 24시간 * 60분
+        minutes = minutes % 1440;
+
+        const hour = Math.floor(minutes / 60);
+        const minute = minutes % 60;
+
+        const timeParts = {
+            year: year,
+            month: month,
+            day: day,
+            hour: hour,
+            minute: minute,
+        };
+
+        return timeParts;
+    };
+
+    return (
+        <>
+            <Form {...form}>
+                <form onSubmit={form.handleSubmit(handleSubmit)}>
+                    <div className="card">
+                        <Table variant="secondary">
+                            <colgroup>
+                                <col width="20%" />
+                                <col width="80%" />
+                            </colgroup>
+                            <TableBody>
+                                {isModifyMode &&
+                                    <TableRow>
+                                        <TableHead>연계 일련번호</TableHead>
+                                        <TableCell>
+                                            <FormField
+                                                control={form.control}
+                                                name="link_sn"
+                                                render={({ field }) => (
+                                                    <FormItem>
+                                                        <FormControl>
+                                                            <Input
+                                                                {...field}
+                                                                value={field.value ?? ""}
+                                                                className="w-[12rem] !text-[1.3rem]"
+                                                                disabled={true}
+                                                            />
+                                                        </FormControl>
+                                                    </FormItem>
+                                                )}
+                                            />
+                                        </TableCell>
+                                    </TableRow>
+                                }
+                                <TableRow>
+                                    <TableHead>* 연계 명</TableHead>
+                                    <TableCell>
+                                        <FormField
+                                            control={form.control}
+                                            name="link_nm"
+                                            render={({ field }) => (
+                                                <FormItem>
+                                                    <FormControl>
+                                                        <Input
+                                                            {...field}
+                                                            value={field.value ?? ""}
+                                                            className="!text-[1.3rem]"
+                                                            autoComplete="off"
+                                                        />
+                                                    </FormControl>
+                                                    {form.formState.errors.link_nm && (
+                                                        <p className="text-red-500 text-base pt-2">
+                                                            {form.formState.errors.link_nm.message}
+                                                        </p>
+                                                    )}
+                                                </FormItem>
+                                            )}
+                                        />
+                                    </TableCell>
+                                </TableRow>
+                                <TableRow>
+                                    <TableHead>* 연계 분류</TableHead>
+                                    <TableCell>
+                                        <FormField
+                                            control={form.control}
+                                            name="link_clsf_cd"
+                                            render={({ field }) => (
+                                                <FormItem>
+                                                    <FormControl>
+                                                        <Select value={field.value ?? "none"} onValueChange={(value) => field.onChange(value)}>
+                                                            <SelectTrigger id="link_clsf_cd" className="w-[20rem]">
+                                                                <SelectValue placeholder="전체"></SelectValue>
+                                                            </SelectTrigger>
+                                                            <SelectContent>
+                                                                <SelectItem value="none">선택</SelectItem>
+                                                                <SelectItem value="link0001">TIBERO 데이터베이스</SelectItem>
+                                                                <SelectItem value="link0002">ORACLE 데이터베이스</SelectItem>
+                                                                <SelectItem value="link0003">공공데이터 포털 API</SelectItem>
+                                                                <SelectItem value="link0004">한강홍수통제소 API</SelectItem>
+                                                                <SelectItem value="link0005">기상청 API</SelectItem>
+                                                                <SelectItem value="link0006">국가지하수정보센터 API</SelectItem>
+                                                                <SelectItem value="link0007">행정정보공동이용센터 연계</SelectItem>
+                                                            </SelectContent>
+                                                        </Select>
+                                                    </FormControl>
+                                                    {form.formState.errors.link_clsf_cd && (
+                                                        <p className="text-red-500 text-base pt-2">
+                                                            {form.formState.errors.link_clsf_cd.message}
+                                                        </p>
+                                                    )}
+                                                </FormItem>
+                                            )}
+                                        />
+                                    </TableCell>
+                                </TableRow>
+                                <TableRow>
+                                    <TableHead>* 연계 URL</TableHead>
+                                    <TableCell>
+                                        <FormField
+                                            control={form.control}
+                                            name="link_url"
+                                            render={({ field }) => (
+                                                <FormItem>
+                                                    <FormControl>
+                                                        <Input
+                                                            {...field}
+                                                            value={field.value ?? ""}
+                                                            className="!text-[1.3rem]"
+                                                            autoComplete="off"
+                                                        />
+                                                    </FormControl>
+                                                    {form.formState.errors.link_url && (
+                                                        <p className="text-red-500 text-base pt-2">
+                                                            {form.formState.errors.link_url.message}
+                                                        </p>
+                                                    )}
+                                                </FormItem>
+                                            )}
+                                        />
+                                    </TableCell>
+                                </TableRow>
+                                <TableRow>
+                                    <TableHead>연계서버 IP</TableHead>
+                                    <TableCell>
+                                        <FormField
+                                            control={form.control}
+                                            name="link_srvr_ip"
+                                            render={({ field }) => (
+                                                <FormItem>
+                                                    <FormControl>
+                                                        <Input
+                                                            {...field}
+                                                            value={field.value ?? ""}
+                                                            className="!text-[1.3rem]"
+                                                            autoComplete="off"
+                                                        />
+                                                    </FormControl>
+                                                </FormItem>
+                                            )}
+                                        />
+                                    </TableCell>
+                                </TableRow>
+                                <TableRow>
+                                    <TableHead>* 연계 KEY</TableHead>
+                                    <TableCell>
+                                        <FormField
+                                            control={form.control}
+                                            name="link_key"
+                                            render={({ field }) => (
+                                                <FormItem>
+                                                    <FormControl>
+                                                        <Input
+                                                            {...field}
+                                                            value={field.value ?? ""}
+                                                            className="!text-[1.3rem]"
+                                                            autoComplete="off"
+                                                        />
+                                                    </FormControl>
+                                                    {form.formState.errors.link_key && (
+                                                        <p className="text-red-500 text-base pt-2">
+                                                            {form.formState.errors.link_key.message}
+                                                        </p>
+                                                    )}
+                                                </FormItem>
+                                            )}
+                                        />
+                                    </TableCell>
+                                </TableRow>
+                                <TableRow>
+                                    <TableHead>연계 ID</TableHead>
+                                    <TableCell>
+                                        <FormField
+                                            control={form.control}
+                                            name="link_id"
+                                            render={({ field }) => (
+                                                <FormItem>
+                                                    <FormControl>
+                                                        <Input
+                                                            {...field}
+                                                            value={field.value ?? ""}
+                                                            className="!text-[1.3rem]"
+                                                            autoComplete="off"
+                                                        />
+                                                    </FormControl>
+                                                </FormItem>
+                                            )}
+                                        />
+                                    </TableCell>
+                                </TableRow>
+                                <TableRow>
+                                    <TableHead>연계 비밀번호</TableHead>
+                                    <TableCell>
+                                        <FormField
+                                            control={form.control}
+                                            name="link_pswd"
+                                            render={({ field }) => (
+                                                <FormItem>
+                                                    <FormControl>
+                                                        <Input
+                                                            {...field}
+                                                            type="password"
+                                                            value={field.value ?? ""}
+                                                            className="!text-[1.3rem]"
+                                                            autoComplete="off"
+                                                        />
+                                                    </FormControl>
+                                                </FormItem>
+                                            )}
+                                        />
+                                    </TableCell>
+                                </TableRow>
+                                <TableRow>
+                                    <TableHead>서비스 용도</TableHead>
+                                    <TableCell>
+                                        <FormField
+                                            control={form.control}
+                                            name="srvc_usg"
+                                            render={({ field }) => (
+                                                <FormItem>
+                                                    <FormControl>
+                                                        <Input
+                                                            {...field}
+                                                            value={field.value ?? ""}
+                                                            className="!text-[1.3rem]"
+                                                            autoComplete="off"
+                                                        />
+                                                    </FormControl>
+                                                </FormItem>
+                                            )}
+                                        />
+                                    </TableCell>
+                                </TableRow>
+                                <TableRow>
+                                    <TableHead>연계 주기</TableHead>
+                                    <TableCell>
+                                        <FormField
+                                            control={form.control}
+                                            name="link_batch_time"
+                                            render={({ field }) => {
+                                                const timeParts = convertMinutesToPeriod(Number(field.value));
+                                                return (
+                                                    <FormItem>
+                                                        <FormControl>
+                                                            <div className="flex items-center gap-6">
+                                                                <div className="flex items-center">
+                                                                    <Input
+                                                                        value={timeParts.year}
+                                                                        className="w-20 !text-[1.3rem]"
+                                                                        type="number"
+                                                                        min={0}
+                                                                        onChange={(e) => {
+                                                                            const total = (Number(e.target.value) * 525600) +
+                                                                                (timeParts.month * 43200) +
+                                                                                (timeParts.day * 1440) +
+                                                                                (timeParts.hour * 60) +
+                                                                                timeParts.minute;
+                                                                            field.onChange(total);
+                                                                        }}
+                                                                    />
+                                                                    <span className="ml-2">년</span>
+                                                                </div>
+                                                                <div className="flex items-center">
+                                                                    <Input
+                                                                        value={timeParts.month}
+                                                                        className="w-20 !text-[1.3rem]"
+                                                                        type="number"
+                                                                        min={0}
+                                                                        max={11}
+                                                                        onChange={(e) => {
+                                                                            const total = (timeParts.year * 525600) +
+                                                                                (Number(e.target.value) * 43200) +
+                                                                                (timeParts.day * 1440) +
+                                                                                (timeParts.hour * 60) +
+                                                                                timeParts.minute;
+                                                                            field.onChange(total);
+                                                                        }}
+                                                                    />
+                                                                    <span className="ml-2">월</span>
+                                                                </div>
+                                                                <div className="flex items-center">
+                                                                    <Input
+                                                                        value={timeParts.day}
+                                                                        className="w-20 !text-[1.3rem]"
+                                                                        type="number"
+                                                                        min={0}
+                                                                        max={30}
+                                                                        onChange={(e) => {
+                                                                            const total = (timeParts.year * 525600) +
+                                                                                (timeParts.month * 43200) +
+                                                                                (Number(e.target.value) * 1440) +
+                                                                                (timeParts.hour * 60) +
+                                                                                timeParts.minute;
+                                                                            field.onChange(total);
+                                                                        }}
+                                                                    />
+                                                                    <span className="ml-2">일</span>
+                                                                </div>
+                                                                <div className="flex items-center">
+                                                                    <Input
+                                                                        value={timeParts.hour}
+                                                                        className="w-20 !text-[1.3rem]"
+                                                                        type="number"
+                                                                        min={0}
+                                                                        max={23}
+                                                                        onChange={(e) => {
+                                                                            const total = (timeParts.year * 525600) +
+                                                                                (timeParts.month * 43200) +
+                                                                                (timeParts.day * 1440) +
+                                                                                (Number(e.target.value) * 60) +
+                                                                                timeParts.minute;
+                                                                            field.onChange(total);
+                                                                        }}
+                                                                    />
+                                                                    <span className="ml-2">시간</span>
+                                                                </div>
+                                                                <div className="flex items-center">
+                                                                    <Input
+                                                                        value={timeParts.minute}
+                                                                        className="w-20 !text-[1.3rem]"
+                                                                        type="number"
+                                                                        min={0}
+                                                                        max={59}
+                                                                        onChange={(e) => {
+                                                                            const total = (timeParts.year * 525600) +
+                                                                                (timeParts.month * 43200) +
+                                                                                (timeParts.day * 1440) +
+                                                                                (timeParts.hour * 60) +
+                                                                                Number(e.target.value);
+                                                                            field.onChange(total);
+                                                                        }}
+                                                                    />
+                                                                    <span className="ml-2">분</span>
+                                                                </div>
+                                                            </div>
+                                                        </FormControl>
+                                                        {form.formState.errors.link_batch_time && (
+                                                            <p className="text-red-500 text-base pt-2">
+                                                                {form.formState.errors.link_batch_time.message}
+                                                            </p>
+                                                        )}
+                                                    </FormItem>
+                                                );
+                                            }}
+                                        />
+                                    </TableCell>
+                                </TableRow>
+                                {isModifyMode &&
+                                    <>
+                                        <TableRow>
+                                            <TableHead>연계 상태</TableHead>
+                                            <TableCell>
+                                                <FormField
+                                                    control={form.control}
+                                                    name="last_link_rslt_cd"
+                                                    render={({ field }) => {
+                                                        return (
+                                                            <FormItem>
+                                                                <FormControl>
+                                                                    <div className="flex items-center gap-6">
+                                                                        <Input
+                                                                            {...field}
+                                                                            value={field.value ? (field.value === 'SUCC' ? '성공' : (field.value === 'FAIL' ? '실패' : '대기')) : ''}
+                                                                            className="!text-[1.3rem] w-[15rem]"
+                                                                            disabled
+                                                                        />
+                                                                        <Button color="green" type="button" onClick={() => updateLinkResultCode?.()}>대기로 전환</Button>
+                                                                    </div>
+                                                                </FormControl>
+                                                            </FormItem>
+                                                        );
+                                                    }}
+                                                />
+                                            </TableCell>
+                                        </TableRow>
+                                        <TableRow>
+                                            <TableHead>최종 연계 실행일</TableHead>
+                                            <TableCell>
+                                                <FormField
+                                                    control={form.control}
+                                                    name="last_link_excn_dt"
+                                                    render={({ field }) => (
+                                                        <FormItem>
+                                                            <FormControl>
+                                                                <Input
+                                                                    {...field}
+                                                                    value={field.value ? dayjs(field.value).format('YYYY-MM-DD HH:mm:ss') : ""}
+                                                                    className="!text-[1.3rem]"
+                                                                    disabled
+                                                                />
+                                                            </FormControl>
+                                                        </FormItem>
+                                                    )}
+                                                />
+                                            </TableCell>
+                                        </TableRow>
+                                        <TableRow>
+                                            <TableHead>다음 연계 실행일</TableHead>
+                                            <TableCell>
+                                                <FormField
+                                                    control={form.control}
+                                                    name="next_link_excn_dt"
+                                                    render={({ field }) => (
+                                                        <FormItem>
+                                                            <FormControl>
+                                                                <Input
+                                                                    {...field}
+                                                                    value={field.value ? dayjs(field.value).format('YYYY-MM-DD HH:mm:ss') : ""}
+                                                                    className="!text-[1.3rem]"
+                                                                    disabled
+                                                                />
+                                                            </FormControl>
+                                                        </FormItem>
+                                                    )}
+                                                />
+                                            </TableCell>
+                                        </TableRow>
+                                        <TableRow>
+                                            <TableHead>수정자</TableHead>
+                                            <TableCell>
+                                                <FormField
+                                                    control={form.control}
+                                                    name="mdfr"
+                                                    render={({ field }) => (
+                                                        <FormItem>
+                                                            <FormControl>
+                                                                <Input
+                                                                    {...field}
+                                                                    value={field.value ?? ""}
+                                                                    className="!text-[1.3rem]"
+                                                                    disabled
+                                                                />
+                                                            </FormControl>
+                                                        </FormItem>
+                                                    )}
+                                                />
+                                            </TableCell>
+                                        </TableRow>
+                                        <TableRow>
+                                            <TableHead>수정일시</TableHead>
+                                            <TableCell>
+                                                <FormField
+                                                    control={form.control}
+                                                    name="mdfcn_dt"
+                                                    render={({ field }) => (
+                                                        <FormItem>
+                                                            <FormControl>
+                                                                <Input
+                                                                    {...field}
+                                                                    value={field.value ? dayjs(field.value).format('YYYY-MM-DD') : ""}
+                                                                    className="!text-[1.3rem]"
+                                                                    disabled
+                                                                />
+                                                            </FormControl>
+                                                        </FormItem>
+                                                    )}
+                                                />
+                                            </TableCell>
+                                        </TableRow>
+                                    </>
+                                }
+                            </TableBody>
+                        </Table>
+                    </div>
+                    <div className="flex justify-center gap-4 pb-12 pt-10">
+                        <Button
+                            size="lg"
+                            color="white"
+                            type="button"
+                            onClick={() => router.back()}
+                        >
+                            목록
+                        </Button>
+                        <Button size="lg" type="submit">
+                            저장
+                        </Button>
+                        {isModifyMode && (
+                            <Button size="lg" color="red" type="button" onClick={handleDelete}>
+                                삭제
+                            </Button>
+                        )}
+                    </div>
+                </form>
+            </Form>
+            <ConfirmDialog isOpen={onConfirm} />
+        </>
+    )
+};
+
+export default LinkForm;

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

@@ -0,0 +1,134 @@
+"use client";
+
+import "@common/assets/styles/grid.css";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { Button, Input, Label, LoadingWithAnimation } from "@common/components";
+import { getCoreRowModel } from "@tanstack/react-table";
+import { LinkApi, type Link, type LinkSearchParam } from "@/entities/link";
+import { useQuery } from "@tanstack/react-query";
+import { columns } from "../model/table-columns";
+import { useQueryClient } from "@tanstack/react-query";
+import { useDataTable } from "@/shared/lib";
+
+function LinkPage() {
+    const router = useRouter();
+    const queryClient = useQueryClient();
+
+    const [linkSn, setLinkSn] = useState<string>('');
+    const [linkNm, setLinkNm] = useState<string>('');
+
+    const [linkSearchParam, setLinkSearchParam] = useState<LinkSearchParam>({
+        linkSn: '',
+        linkNm: ''
+    });
+
+    const query = useQuery({
+        queryKey: [`${process.env.NEXT_PUBLIC_LINK_BACKEND_API_HOST}/getLinkList`, linkSearchParam],
+        queryFn: () => LinkApi.getLinkList(linkSearchParam),
+    });
+
+    const handleResetSearchParam = () => {
+        setLinkSn('');
+        setLinkNm('');
+        setLinkSearchParam({
+            ...linkSearchParam,
+            linkSn: '',
+            linkNm: '',
+        });
+    };
+
+    const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+        e.preventDefault();
+        setLinkSearchParam({
+            ...linkSearchParam,
+            linkSn,
+            linkNm
+        });
+    };
+
+    const handleRowClick = (link: Link) => {
+        queryClient.removeQueries({
+            queryKey: [`${process.env.NEXT_PUBLIC_LINK_BACKEND_API_HOST}/getLinkList`],
+        });
+        queryClient.removeQueries({
+            queryKey: [`${process.env.NEXT_PUBLIC_LINK_BACKEND_API_HOST}/getLinkInfo`],
+        });
+        router.push(`link/register/${link.link_sn}`);
+    };
+
+    const handleClickRegist = () => {
+        router.push('link/register');
+    };
+
+    const { tableComponent } = useDataTable({
+        query,
+        tableOptions: {
+            columns,
+            manualPagination: true,
+            enableMultiRowSelection: true,
+            getCoreRowModel: getCoreRowModel(),
+        },
+        dataTableOptions: {
+            onRowClick: handleRowClick,
+            viewPagination: true,
+        },
+    });
+
+    return (
+        <div className="card card-border !mt-6">
+            <div className="card card-border">
+                <form className="flex items-center gap-2 p-2" onSubmit={handleSubmit}>
+                    <Label htmlFor="liSnSearchInput" className="mr-2 text-label">
+                        일련번호
+                    </Label>
+                    <Input
+                        className="h-[3.2rem] w-[24rem] rounded-sm !text-[1.3rem] mr-4"
+                        id="liSnSearchInput"
+                        value={linkSn}
+                        onChange={(e) => setLinkSn(e.target.value)}
+                        autoComplete="off"
+                    />
+                    <Label htmlFor="liNmSearchInput" className="mr-2 text-label">
+                        연계 명
+                    </Label>
+                    <Input
+                        className="h-[3.2rem] w-[24rem] rounded-sm !text-[1.3rem] mr-2"
+                        id="liNmSearchInput"
+                        value={linkNm}
+                        onChange={(e) => setLinkNm(e.target.value)}
+                        autoComplete="off"
+                    />
+                    <Button color="green" className="h-[3.2rem]" type="button" onClick={handleResetSearchParam}>
+                        초기화
+                    </Button>
+                    <Button className="h-[3.2rem]" type="submit">
+                        조회
+                    </Button>
+                </form>
+            </div>
+            <div className="card card-border flex flex-col h-[calc(100vh-28rem)]">
+                <div className="card-header">
+                    <h3 className="text-2xl font-medium text-label">연계 목록</h3>
+                    <div>
+                        <Button onClick={handleClickRegist}>등록</Button>
+                    </div>
+                </div>
+                <div className="card !m-[1.2rem] overflow-auto h-full !p-0">
+                    {!query.isLoading ?
+                        <div>{tableComponent}</div>
+                        :
+                        <div className="[data-theme='black']:bg-transparent rounded-lg p-10 flex justify-center items-center h-full">
+                            <div className="relative size-[5rem]">
+                                <LoadingWithAnimation color="primary" />
+                            </div>
+                        </div>
+                    }
+                </div>
+            </div>
+        </div>
+    );
+}
+
+export { LinkPage };

apps/cs/src/pages/link/ui/modify-page.tsx

@@ -0,0 +1,111 @@
+"use client";
+
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { LinkApi, linkFormSchema, type LinkFormData } from "@/entities/link";
+import { useRouter } from "next/navigation";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import LinkForm from "./link-form";
+import { useAlertStore } from "@/shared/lib/use-alert-store";
+import { useEffect } from "react";
+import { getUserInfo } from "../../../../../../packages/common/components/src/api";
+import { AUTH_USER_ID } from "@/shared/config";
+import { getCookie } from "@common/components";
+
+function ModifyLinkPage({ linkSn }: { linkSn: string }) {
+    const router = useRouter();
+    const queryClient = useQueryClient();
+    const { setMessage: alert } = useAlertStore((state) => state);
+    const userUniqId = getCookie(AUTH_USER_ID) ?? "";
+
+    // 컴포넌트 마운트 시 캐시 초기화
+    useEffect(() => {
+        queryClient.removeQueries({
+            queryKey: [`${process.env.NEXT_PUBLIC_LINK_BACKEND_API_HOST}/getLinkInfo`],
+        });
+    }, [queryClient]);
+
+    const { data: linkInfo, refetch } = useQuery({
+        queryKey: [`${process.env.NEXT_PUBLIC_LINK_BACKEND_API_HOST}/getLinkInfo`],
+        queryFn: () => LinkApi.getLinkInfo(linkSn),
+        enabled: !!linkSn,
+    });
+
+    const { mutateAsync: updateLinkInfo } = useMutation({
+        mutationFn: (data: LinkFormData) => LinkApi.updateLinkInfo({
+            ...data,
+            link_clsf_cd: data.link_clsf_cd !== 'none' ? data.link_clsf_cd : null,
+            mdfr: userUniqId
+        }),
+        onSuccess: () => {
+            alert('수정되었습니다.');
+            router.push('/link');
+        }
+    });
+
+    const { mutateAsync: deleteLink } = useMutation({
+        mutationFn: () => LinkApi.deleteLink(linkSn),
+        onSuccess: () => {
+            alert('삭제되었습니다.', router.back);
+        }
+    });
+
+    const { mutateAsync: updateLinkResultCode } = useMutation({
+        mutationFn: () => LinkApi.updateLinkResultCode(linkSn),
+        onSuccess: () => {
+            alert('대기로 전환되었습니다.');
+            refetch();
+        }
+    });
+
+    const fetchUserInfo = async () => {
+        const userData = await getUserInfo();
+        return userData.userName;
+    };
+
+    const form = useForm<LinkFormData>({
+        resolver: zodResolver(linkFormSchema),
+        defaultValues: {},
+    });
+
+    useEffect(() => {
+        const applyFormData = async () => {
+            if (linkInfo) {
+                let newData = { ...linkInfo };
+
+                if (linkInfo.mdfr) {
+                    const userName = await fetchUserInfo();
+                    newData = {
+                        ...linkInfo,
+                        mdfr: userName,
+                    };
+                }
+
+                form.reset(newData);
+
+            }
+        };
+
+        applyFormData();
+    }, [linkInfo]);
+
+    return (
+        <>
+            <div className="card card-border !mb-0 !mt-6">
+                <div className="card-header">
+                    <h3 className="text-2xl font-medium text-label">연계정보 수정</h3>
+                </div>
+                <LinkForm
+                    form={form}
+                    linkSn={linkSn}
+                    updateLinkInfo={updateLinkInfo}
+                    deleteLink={deleteLink}
+                    updateLinkResultCode={updateLinkResultCode}
+                />
+            </div>
+            
+        </>
+    );
+};
+
+export { ModifyLinkPage };

apps/cs/src/pages/link/ui/regist-page.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+import { LinkApi, type LinkFormData, linkFormSchema } from "@/entities/link";
+import LinkForm from "./link-form";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import dayjs from "dayjs";
+import { useMutation } from "@tanstack/react-query";
+import { useAlertStore } from "@/shared/lib/use-alert-store";
+import { useRouter } from "next/navigation";
+import { AUTH_USER_ID } from "@/shared/config";
+import { getCookie } from "@common/components";
+
+function RegistLinkPage() {
+    const { setMessage: alert } = useAlertStore((state) => state);
+    const router = useRouter();
+    const userUniqId = getCookie(AUTH_USER_ID) ?? "";
+
+    const form = useForm<LinkFormData>({
+        resolver: zodResolver(linkFormSchema),
+        defaultValues: {
+            link_nm: '',
+            link_url: '',
+            link_srvr_ip: '',
+            link_db_cd: '',
+            link_key: '',
+            link_id: '',
+            link_pswd: '',
+            srvc_usg: '',
+            link_batch_time: 5,
+            link_clsf_cd: 'none',
+        },
+    });
+
+    const { mutate: insertLinkInfo } = useMutation({
+        mutationFn: (data: LinkFormData) => LinkApi.insertLinkInfo(data),
+        onSuccess: () => {
+            alert('저장되었습니다.');
+            router.push('/link');
+        }
+    });
+
+    const handleInsertLink = (data: LinkFormData) => {
+        const insertData = {
+            ...data,
+            link_clsf_cd: data.link_clsf_cd !== 'none' ? data.link_clsf_cd : null,
+            next_link_excn_dt: dayjs().add(Number(data.link_batch_time), 'minute').format('YYYY-MM-DD HH:mm:ss'),
+            mdfr: userUniqId,
+        };
+
+        insertLinkInfo(insertData);
+    };
+
+    return (
+        <div className="card card-border !mb-0 !mt-6">
+            <div className="card-header">
+                <h3 className="text-2xl font-medium text-label">연계 등록</h3>
+            </div>
+            <LinkForm form={form} handleInsertLink={handleInsertLink} />
+        </div>
+    );
+};
+
+export { RegistLinkPage };

apps/cs/src/pages/linkLog/index.ts

@@ -0,0 +1 @@
+export { LinkLogPage } from './ui/link-log-page';

apps/cs/src/pages/linkLog/model/table-columns.tsx

@@ -0,0 +1,55 @@
+import dayjs from "dayjs";
+import { createColumnHelper } from "@tanstack/react-table";
+import { type LinkLog } from "@/entities/link";
+
+const columnHelper = createColumnHelper<LinkLog>();
+
+const columns = [
+    columnHelper.accessor('rownum', {
+        id: 'rownum',
+        header: 'NO',
+    }),
+    columnHelper.accessor('link_sn', {
+        id: 'link_sn',
+        header: '연계일련번호',
+    }),
+    columnHelper.accessor('link_nm', {
+        id: 'link_nm',
+        header: '연계 명',
+    }),
+    columnHelper.display({
+        id: 'link_rslt_cd',
+        header: '연계실행결과',
+        cell: (info) => {
+            const isSucc = info.row.original.link_rslt_cd.trim() === 'SUCC';
+            return <span className={`${isSucc ? 'text-[rgb(53,162,235)]' : 'text-[rgb(255,99,132)]'}`}>{isSucc ? '성공' : '실패'}</span>
+        },
+    }),
+    columnHelper.accessor('link_err_cd', {
+        id: 'link_err_cd',
+        header: '연계오류코드',
+        cell: (info) => (info.getValue() ? info.getValue() : '-'),
+    }),
+    columnHelper.accessor('err_cn', {
+        id: 'err_cn',
+        header: '연계오류메세지',
+        cell: (info) => (
+            <div
+                className="max-w-[500px] truncate"
+                title={info.getValue() ?? ''}
+            >
+                {info.getValue() || '-'}
+            </div>
+        ),
+    }),
+    columnHelper.accessor('log_crt_dt', {
+        id: 'log_crt_dt',
+        header: '연계실행일자',
+        cell: (info) => {
+            const date = dayjs(info.getValue());
+            return date.format('YYYY-MM-DD HH:mm');
+        }
+    }),
+];
+
+export { columns };

apps/cs/src/pages/linkLog/ui/link-log-page.tsx

@@ -0,0 +1,189 @@
+"use client";
+
+import "@common/assets/styles/grid.css";
+
+import { useState } from "react";
+import { Button, Input, Label, DatePicker, Select, SelectTrigger, SelectContent, SelectItem, SelectValue, LoadingWithAnimation } from "@common/components";
+import { useQuery } from "@tanstack/react-query";
+
+import { getCoreRowModel, type PaginationState, type RowSelectionState, } from "@tanstack/react-table";
+import { LinkApi, type LinkSearchParam } from "@/entities/link";
+import { columns } from "../model/table-columns";
+import dayjs from "dayjs";
+import { useAlertStore } from "@/shared/lib/use-alert-store";
+import { useDataTable } from "@/shared/lib";
+
+function LinkLogPage() {
+    const { setMessage: alert } = useAlertStore((state) => state);
+
+    const [linkSn, setLinkSn] = useState<string>('');
+    const [linkNm, setLinkNm] = useState<string>('');
+    const [isSucc, setIsSucc] = useState<string>('ALL');
+    const [startDate, setStartDate] = useState<string>(dayjs().subtract(7, "day").format('YYYY-MM-DD'));
+    const [endDate, setEndDate] = useState<string>(dayjs().format('YYYY-MM-DD'));
+
+    const [linkSearchParam, setLinkSearchParam] = useState<LinkSearchParam>({
+        linkSn: '',
+        linkNm: '',
+        isSucc: '',
+        startDate: '',
+        endDate: '',
+    });
+
+    const [pagination, setPagination] = useState<PaginationState>({
+        pageIndex: 0,
+        pageSize: 100,
+    });
+
+    const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
+
+    const query = useQuery({
+        queryKey: [`${process.env.NEXT_PUBLIC_LINK_BACKEND_API_HOST}/getLinkList`, linkSearchParam, pagination],
+        queryFn: () =>
+            LinkApi.getLinkLogList({
+                ...linkSearchParam,
+                page: pagination.pageIndex,
+                size: pagination.pageSize,
+                isSucc,
+                startDate,
+                endDate,
+            }),
+    });
+
+    const { tableComponent } = useDataTable({
+        query,
+        tableOptions: {
+            columns,
+            state: {
+                pagination,
+                rowSelection,
+            },
+            manualPagination: true,
+            enableMultiRowSelection: true,
+            getCoreRowModel: getCoreRowModel(),
+            onPaginationChange: setPagination,
+            onRowSelectionChange: setRowSelection,
+        },
+        dataTableOptions: {
+            viewPagination: true,
+        },
+    });
+
+    const handleResetSearchParam = () => {
+        setIsSucc('ALL');
+        setLinkNm('');
+        setLinkSn('');
+        setStartDate(dayjs().subtract(7, "day").format('YYYY-MM-DD'));
+        setEndDate(dayjs().format('YYYY-MM-DD'));
+        setLinkSearchParam({
+            ...linkSearchParam,
+            linkSn: '',
+            linkNm: '',
+            isSucc: 'ALL',
+            startDate: dayjs().subtract(7, "day").format('YYYY-MM-DD'),
+            endDate: dayjs().format('YYYY-MM-DD'),
+        });
+    };
+
+    const handleSubmit = async (e?: React.FormEvent<HTMLFormElement>) => {
+        e?.preventDefault();
+
+        if (startDate && endDate) {
+
+            if (startDate > endDate) {
+                alert('종료일이 시작일보다 이전일 수 없습니다.');
+                return;
+            } else {
+                setPagination({
+                    ...pagination,
+                    pageIndex: 0,
+                });
+                setLinkSearchParam({
+                    ...linkSearchParam,
+                    linkSn,
+                    linkNm,
+                    isSucc,
+                    startDate,
+                    endDate,
+                });
+            }
+        } else {
+            alert('조회 날짜를 선택해주세요.');
+            return;
+        }
+    };
+
+    return (
+        <div className="card card-border !mt-6">
+            <div className="card card-border">
+                <form className="flex items-center gap-2 p-2" onSubmit={handleSubmit}>
+                    <Label htmlFor="liSnSearchInput" className="mr-2 text-label">
+                        일련번호
+                    </Label>
+                    <Input
+                        className="h-[3.2rem] w-[24rem] rounded-sm !text-[1.3rem] mr-4"
+                        id="liSnSearchInput"
+                        value={linkSn}
+                        onChange={(e) => setLinkSn(e.target.value)}
+                        autoComplete="off"
+                    />
+                    <Label htmlFor="liNmSearchInput" className="mr-2 text-label">
+                        연계 명
+                    </Label>
+                    <Input
+                        className="h-[3.2rem] w-[24rem] rounded-sm !text-[1.3rem] mr-4"
+                        id="liNmSearchInput"
+                        value={linkNm}
+                        onChange={(e) => setLinkNm(e.target.value)}
+                        autoComplete="off"
+                    />
+                    <Label htmlFor="liResultCode" className="mr-2 text-label">
+                        실행결과
+                    </Label>
+                    <Select onValueChange={(e) => setIsSucc(e)} value={isSucc}>
+                        <SelectTrigger id="liResultCode" className="w-[10rem] mr-4">
+                            <SelectValue placeholder="전체"></SelectValue>
+                        </SelectTrigger>
+                        <SelectContent>
+                            <SelectItem value="ALL">전체</SelectItem>
+                            <SelectItem value="SUCC">성공</SelectItem>
+                            <SelectItem value="FAIL">실패</SelectItem>
+                        </SelectContent>
+                    </Select>
+                    <Label htmlFor="sDateSearchInput" className="mx-2 text-label">
+                        시작일
+                    </Label>
+                    <DatePicker id="sDateSearchInput" mode={"single"} selected={dayjs(startDate).toDate()} onSelect={(e) => setStartDate(dayjs(e).format('YYYY-MM-DD'))} />
+                    <Label htmlFor="eDateSearchInput" className="mx-2 text-label">
+                        종료일
+                    </Label>
+                    <DatePicker id="eDateSearchInput" mode={"single"} className="mr-2" selected={dayjs(endDate).toDate()} onSelect={(e) => setEndDate(dayjs(e).format('YYYY-MM-DD'))} />
+                    <Button color="green" className="h-[3.2rem]" type="button" onClick={handleResetSearchParam}>
+                        초기화
+                    </Button>
+                    <Button className="h-[3.2rem]" type="submit">
+                        조회
+                    </Button>
+                </form>
+            </div>
+            <div className="card card-border flex flex-col h-[calc(100vh-28rem)]">
+                <div className="card-header">
+                    <h3 className="text-2xl font-medium text-label">로그 목록 (검색 조건에 따른 건수 : {query.data?.totalElements.toLocaleString('ko-KR') ?? 0} )</h3>
+                </div>
+                <div className="card !m-[1.2rem] overflow-auto h-full !p-0">
+                    {query.isLoading ?
+                        <div className="[data-theme='black']:bg-transparent rounded-lg p-10 h-full flex justify-center items-center">
+                            <div className="relative size-[5rem]">
+                                <LoadingWithAnimation color="primary" />
+                            </div>
+                        </div>
+                        :
+                        <div>{tableComponent}</div>
+                    }
+                </div>
+            </div>
+        </div>
+    )
+};
+
+export { LinkLogPage };

apps/cs/src/pages/linkParams/index.ts

@@ -0,0 +1 @@
+export { LinkParamsPage } from './ui/link-params-page';

apps/cs/src/pages/linkParams/model/table-columns.tsx

@@ -0,0 +1,26 @@
+import { createColumnHelper } from "@tanstack/react-table";
+import { type Link } from "@/entities/link";
+
+const columnHelper = createColumnHelper<Link>();
+
+const columns = [
+    columnHelper.accessor((_, index) => index + 1, {
+        id: 'no',
+        header: 'NO',
+    }),
+    columnHelper.accessor('link_sn', {
+        id: 'link_sn',
+        header: '연계 일련번호',
+    }),
+    columnHelper.accessor('link_nm', {
+        id: 'link_nm',
+        header: '연계 명',
+    }),
+    columnHelper.accessor('srvc_usg', {
+        id: 'srvc_usg',
+        header: '서비스용도',
+        cell: (info) => (info.getValue() ? info.getValue() : '-'),
+    }),
+];
+
+export { columns };

apps/cs/src/pages/linkParams/model/vrbl-table-columns.tsx

@@ -0,0 +1,98 @@
+import { createColumnHelper } from "@tanstack/react-table";
+import { type LinkVrbl } from "@/entities/link";
+import { Checkbox } from "@common/components";
+
+const columnHelper = createColumnHelper<LinkVrbl>();
+
+function vrblColumns({
+    selectedVrblIds,
+    setSelectedVrblIds,
+}: {
+    selectedVrblIds: string[];
+    setSelectedVrblIds: React.Dispatch<React.SetStateAction<string[]>>;
+}) {
+    return [
+        columnHelper.display({
+            id: "select",
+            header: ({ table }) => {
+                const allRows = table.getRowModel().rows;
+                const allSelected =
+                    allRows.length > 0 &&
+                    allRows.every((row) =>
+                        selectedVrblIds.includes(row.original.link_vrbl_sn)
+                    );
+
+                return (
+                    <div className="flex justify-center items-center">
+                        <Checkbox
+                            className="bg-white"
+                            checked={
+                                allSelected
+                                    ? true
+                                    : false
+                            }
+                            onCheckedChange={(checked) => {
+                                if (checked) {
+                                    setSelectedVrblIds(allRows.map((row) => row.original.link_vrbl_sn));
+                                } else {
+                                    setSelectedVrblIds([]);
+                                }
+                            }}
+                        />
+                    </div>
+                );
+            },
+            cell: ({ row }) => {
+                const id = row.original.link_vrbl_sn;
+                const checked = selectedVrblIds.includes(id);
+
+                return (
+                    <div className="flex justify-center items-center">
+                        <Checkbox
+                            checked={checked}
+                            onClick={(e) => e.stopPropagation()}
+                            onCheckedChange={(checked) => {
+                                setSelectedVrblIds((prev) =>
+                                    checked ? [...prev, id] : prev.filter((x) => x !== id)
+                                );
+                            }}
+                        />
+                    </div>
+                );
+            },
+        }),
+
+        columnHelper.accessor("link_vrbl_sn", {
+            id: "link_vrbl_sn",
+            header: "연계 변수 일련번호",
+        }),
+        columnHelper.accessor("link_vrbl_nm", {
+            id: "link_vrbl_nm",
+            header: "변수 명",
+        }),
+        columnHelper.accessor("link_vrbl_cd", {
+            id: "link_vrbl_cd",
+            header: "변수코드",
+            cell: (info) => (info.getValue() ? info.getValue() : '-'),
+        }),
+        columnHelper.accessor("link_vrbl_vl", {
+            id: "link_vrbl_vl",
+            header: "변수 값",
+            cell: (info) => (info.getValue() === 'now' ? '요청일자' : info.getValue() === 'nowMonth' ? '요청월' : info.getValue()),
+        }),
+        columnHelper.accessor("link_vrbl_expln", {
+            id: "link_vrbl_expln",
+            header: "설명",
+            cell: (info) => (
+                <div
+                    className="max-w-72 truncate"
+                    title={info.getValue() ?? ''}
+                >
+                    {info.getValue() || '-'}
+                </div>
+            ),
+        }),
+    ];
+}
+
+export { vrblColumns };

apps/cs/src/pages/linkParams/ui/link-params-dialog.tsx

@@ -0,0 +1,351 @@
+'use client';
+
+import {
+    Dialog,
+    DialogTrigger,
+    DialogContent,
+    DialogHeader,
+    DialogTitle,
+    DialogFooter,
+    DialogClose,
+    Button,
+    Input,
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableRow,
+    Checkbox,
+    RadioGroup,
+    RadioGroupItem,
+    Label
+} from "@common/components";
+import { FormItem, FormControl, FormField, Form } from "@/shared/ui/form";
+import { type LinkVrblFormData } from "@/entities/link";
+import dayjs from "dayjs";
+import type { UseFormReturn } from "react-hook-form";
+import { useConfirm } from "@frontend-opensource/use-react-hooks";
+import { useState, useEffect } from "react";
+import { ConfirmDialog } from "@/shared/ui/confirm-dialog";
+
+type LinkParamsDialogProps = {
+    selectedLink: {
+        linkSn: string;
+        linkNm: string;
+    };
+    form: UseFormReturn<LinkVrblFormData>;
+    insertLinkVrbl: (data: LinkVrblFormData) => void;
+    dialogOpen: boolean;
+    onOpenChange: (val: boolean) => void;
+    updateLinkVrbl: (data: LinkVrblFormData) => void;
+}
+
+function LinkParamsDialog({ selectedLink, form, insertLinkVrbl, dialogOpen, onOpenChange, updateLinkVrbl }: LinkParamsDialogProps) {
+
+    const isModifyMode = !!form.getValues('link_vrbl_sn');
+
+    const { confirm } = useConfirm();
+    const [onConfirm, setOnConfirm] = useState<boolean>(false);
+    const [isToday, setIsToday] = useState<boolean>(false);
+    const [checkNowMonth, setCheckNowMonth] = useState<string>('now');
+
+    const handleConfirm = async (callback: () => Promise<void>) => {
+        setOnConfirm(true);
+        await callback();
+        setOnConfirm(false);
+    };
+
+    function replaceEmptyWithNull<T extends Record<string, unknown>>(data: T): T {
+        const result = {} as T;
+        for (const [key, value] of Object.entries(data)) {
+            (result as Record<string, unknown>)[key] = value === '' ? null : value;
+        }
+        return result as T;
+    };
+
+    const handleSubmit = async (data: LinkVrblFormData) => {
+        const confirmMsg = isModifyMode ? '수정 하시겠습니까?' : '저장 하시겠습니까?';
+
+        await handleConfirm(async () => {
+            const cleanData = replaceEmptyWithNull(data);
+
+            if (await confirm(confirmMsg)) {
+                if (isModifyMode) {
+                    updateLinkVrbl(isToday ? { ...cleanData, link_vrbl_vl: checkNowMonth } : cleanData);
+                } else {
+                    insertLinkVrbl(isToday ? { ...cleanData, link_vrbl_vl: checkNowMonth } : cleanData);
+                }
+            }
+        });
+    };
+
+    const handleCheckTodayValue = (check: boolean | string) => {
+        if (check) {
+            setIsToday(true);
+            form.setValue('link_vrbl_vl', (checkNowMonth === 'now' ? '요청일자' : '요청월'));
+        } else {
+            setIsToday(false);
+            form.setValue('link_vrbl_vl', '');
+        }
+    };
+
+    useEffect(() => {
+        if (!dialogOpen) {
+            setIsToday(false);
+            setCheckNowMonth('now');
+            form.reset({
+                link_vrbl_nm: '',
+                link_vrbl_expln: '',
+                link_vrbl_cd: '',
+                link_vrbl_vl: '',
+            });
+        }
+
+        if (isModifyMode && (form.getValues('link_vrbl_vl') === 'now' || form.getValues('link_vrbl_vl') === 'nowMonth')) {
+            setIsToday(true);
+            setCheckNowMonth(form.getValues('link_vrbl_vl'));
+        }
+
+    }, [dialogOpen]);
+
+    return (
+        <Dialog
+            open={dialogOpen}
+            onOpenChange={(open) => {
+                onOpenChange(open);
+            }}
+        >
+            <DialogTrigger asChild>
+                <Button color="green" className="h-[3.2rem]" onClick={() => onOpenChange(true)}>행 추가</Button>
+            </DialogTrigger>
+            <DialogContent className="sm:max-w-[55rem]">
+                <DialogHeader>
+                    <DialogTitle>
+                        {selectedLink.linkNm} ({selectedLink.linkSn})
+                    </DialogTitle>
+                </DialogHeader>
+                <Form {...form}>
+                    <form onSubmit={form.handleSubmit(handleSubmit)}>
+                        <div className="card">
+                            <Table variant="secondary">
+                                <colgroup>
+                                    <col width="30%" />
+                                    <col width="70%" />
+                                </colgroup>
+                                <TableBody>
+                                    {isModifyMode &&
+                                        <TableRow>
+                                            <TableHead>변수 일련번호</TableHead>
+                                            <TableCell>
+                                                <FormField
+                                                    control={form.control}
+                                                    name="link_vrbl_sn"
+                                                    render={({ field }) => (
+                                                        <FormItem>
+                                                            <FormControl>
+                                                                <Input
+                                                                    {...field}
+                                                                    value={field.value ?? ""}
+                                                                    className="!text-[1.3rem]"
+                                                                    disabled
+                                                                />
+                                                            </FormControl>
+                                                        </FormItem>
+                                                    )}
+                                                />
+                                            </TableCell>
+                                        </TableRow>
+                                    }
+                                    <TableRow>
+                                        <TableHead>* 변수 명</TableHead>
+                                        <TableCell>
+                                            <FormField
+                                                control={form.control}
+                                                name="link_vrbl_nm"
+                                                render={({ field }) => (
+                                                    <FormItem>
+                                                        <FormControl>
+                                                            <Input
+                                                                {...field}
+                                                                value={field.value ?? ""}
+                                                                className="!text-[1.3rem]"
+                                                                autoComplete="off"
+                                                            />
+                                                        </FormControl>
+                                                        {form.formState.errors.link_vrbl_nm && (
+                                                            <p className="text-red-500 text-base pt-2">
+                                                                {form.formState.errors.link_vrbl_nm.message}
+                                                            </p>
+                                                        )}
+                                                    </FormItem>
+                                                )}
+                                            />
+                                        </TableCell>
+                                    </TableRow>
+                                    <TableRow>
+                                        <TableHead>변수 설명</TableHead>
+                                        <TableCell>
+                                            <FormField
+                                                control={form.control}
+                                                name="link_vrbl_expln"
+                                                render={({ field }) => (
+                                                    <FormItem>
+                                                        <FormControl>
+                                                            <Input
+                                                                {...field}
+                                                                value={field.value ?? ""}
+                                                                className="!text-[1.3rem]"
+                                                                autoComplete="off"
+                                                            />
+                                                        </FormControl>
+                                                        {form.formState.errors.link_vrbl_expln && (
+                                                            <p className="text-red-500 text-base pt-2">
+                                                                {form.formState.errors.link_vrbl_expln.message}
+                                                            </p>
+                                                        )}
+                                                    </FormItem>
+                                                )}
+                                            />
+                                        </TableCell>
+                                    </TableRow>
+                                    <TableRow>
+                                        <TableHead>변수 코드</TableHead>
+                                        <TableCell>
+                                            <FormField
+                                                control={form.control}
+                                                name="link_vrbl_cd"
+                                                render={({ field }) => (
+                                                    <FormItem>
+                                                        <FormControl>
+                                                            <Input
+                                                                {...field}
+                                                                value={field.value ?? ""}
+                                                                className="!text-[1.3rem]"
+                                                                autoComplete="off"
+                                                            />
+                                                        </FormControl>
+                                                        {form.formState.errors.link_vrbl_cd && (
+                                                            <p className="text-red-500 text-base pt-2">
+                                                                {form.formState.errors.link_vrbl_cd.message}
+                                                            </p>
+                                                        )}
+                                                    </FormItem>
+                                                )}
+                                            />
+                                        </TableCell>
+                                    </TableRow>
+                                    <TableRow>
+                                        <TableHead>* 변수 값</TableHead>
+                                        <TableCell>
+                                            <FormField
+                                                control={form.control}
+                                                name="link_vrbl_vl"
+                                                render={({ field }) => (
+                                                    <FormItem>
+                                                        <div className="flex items-center gap-x-2 mb-4">
+                                                            <Checkbox id="isToday" className="!border-gray-600" checked={isToday} onCheckedChange={(check) => handleCheckTodayValue(check)} />
+                                                            <label htmlFor="isToday" className="text-gray-600">변수 값이 오늘 날짜 일시 체크해 주세요.</label>
+                                                        </div>
+                                                        {isToday &&
+                                                            <div className="flex items-center gap-x-2 mb-4">
+                                                                <RadioGroup
+                                                                    name="checkNowMonth"
+                                                                    onValueChange={(value) => {
+                                                                        setCheckNowMonth(value);
+                                                                        form.setValue('link_vrbl_vl', (value === 'now' ? '요청일자' : '요청월'));
+                                                                    }}
+                                                                >
+                                                                    <div className="flex items-center space-x-2">
+                                                                        <RadioGroupItem value="now" id="now" checked={checkNowMonth === 'now'} />
+                                                                        <Label htmlFor="now">요청일자(YYYY-MM-DD)</Label>
+                                                                    </div>
+                                                                    <div className="flex items-center space-x-2">
+                                                                        <RadioGroupItem value="nowMonth" id="nowMonth" checked={checkNowMonth === 'nowMonth'} />
+                                                                        <Label htmlFor="nowMonth">요청월(YYYY-MM)</Label>
+                                                                    </div>
+                                                                </RadioGroup>
+                                                            </div>
+                                                        }
+                                                        <FormControl>
+                                                            <Input
+                                                                {...field}
+                                                                value={field.value ? (field.value === 'now' ? '요청일자' : field.value === 'nowMonth' ? '요청월' : field.value) : ''}
+                                                                className={`!text-[1.3rem] ${isToday ? 'bg-gray-100' : ''}`}
+                                                                autoComplete="off"
+                                                                disabled={isToday}
+                                                            />
+                                                        </FormControl>
+                                                        {form.formState.errors.link_vrbl_vl && (
+                                                            <p className="text-red-500 text-base pt-2">
+                                                                {form.formState.errors.link_vrbl_vl.message}
+                                                            </p>
+                                                        )}
+                                                    </FormItem>
+                                                )}
+                                            />
+                                        </TableCell>
+                                    </TableRow>
+                                    {isModifyMode &&
+                                        <>
+                                            <TableRow>
+                                                <TableHead>수정자</TableHead>
+                                                <TableCell>
+                                                    <FormField
+                                                        control={form.control}
+                                                        name="mdfr"
+                                                        render={({ field }) => (
+                                                            <FormItem>
+                                                                <FormControl>
+                                                                    <Input
+                                                                        {...field}
+                                                                        value={field.value ?? ""}
+                                                                        className="!text-[1.3rem]"
+                                                                        disabled
+                                                                    />
+                                                                </FormControl>
+                                                            </FormItem>
+                                                        )}
+                                                    />
+                                                </TableCell>
+                                            </TableRow>
+                                            <TableRow>
+                                                <TableHead>수정일시</TableHead>
+                                                <TableCell>
+                                                    <FormField
+                                                        control={form.control}
+                                                        name="mdfcn_dt"
+                                                        render={({ field }) => (
+                                                            <FormItem>
+                                                                <FormControl>
+                                                                    <Input
+                                                                        {...field}
+                                                                        value={field.value ? dayjs(field.value).format('YYYY-MM-DD') : ""}
+                                                                        className="!text-[1.3rem]"
+                                                                        disabled
+                                                                    />
+                                                                </FormControl>
+                                                            </FormItem>
+                                                        )}
+                                                    />
+                                                </TableCell>
+                                            </TableRow>
+                                        </>
+                                    }
+                                </TableBody>
+                            </Table>
+                        </div>
+                        <DialogFooter>
+                            <Button type="submit">저장</Button>
+                            <DialogClose asChild>
+                                <Button color="white">취소</Button>
+                            </DialogClose>
+                        </DialogFooter>
+                    </form>
+                </Form>
+                <ConfirmDialog isOpen={onConfirm} />
+            </DialogContent>
+        </Dialog>
+    )
+};
+
+export { LinkParamsDialog };

apps/cs/src/pages/linkParams/ui/link-params-page.tsx

@@ -0,0 +1,405 @@
+'use client';
+
+import { useState, useMemo } from "react";
+import {
+    Button,
+    DataTable,
+    Input,
+    Label,
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableRow,
+    LoadingWithAnimation,
+} from "@common/components";
+import { getCoreRowModel, useReactTable, type PaginationState, type RowSelectionState, } from "@tanstack/react-table";
+import { LinkApi, type Link, type LinkSearchParam, type LinkVrblFormData, linkVrblFormSchema } from "@/entities/link";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { columns } from "../model/table-columns";
+import { vrblColumns } from "../model/vrbl-table-columns";
+import { type LinkVrbl } from "@/entities/link";
+import { useAlertStore } from "@/shared/lib/use-alert-store";
+import { LinkParamsDialog } from "./link-params-dialog";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { getUserInfo } from "../../../../../../packages/common/components/src/api";
+import { AUTH_USER_ID } from "@/shared/config";
+import { getCookie } from "@common/components";
+import { useConfirm } from "@frontend-opensource/use-react-hooks";
+import { ConfirmDialog } from "@/shared/ui/confirm-dialog";
+import { useDataTable } from "@/shared/lib";
+
+function LinkParamsPage() {
+    const queryClient = useQueryClient();
+
+    const [linkSn, setLinkSn] = useState<string>('');
+    const [linkNm, setLinkNm] = useState<string>('');
+
+    const [linkSearchParam, setLinkSearchParam] = useState<LinkSearchParam>({
+        linkSn: '',
+        linkNm: ''
+    });
+
+    const [selectedLink, setSelectedLink] = useState<{
+        linkSn: string;
+        linkNm: string;
+    }>({
+        linkSn: '',
+        linkNm: ''
+    });
+
+    const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
+
+    const [pagination, setPagination] = useState<PaginationState>({
+        pageIndex: 0,
+        pageSize: 100,
+    });
+
+    const { confirm } = useConfirm();
+
+    const [selectedVrblIds, setSelectedVrblIds] = useState<string[]>([]);
+    const [isDBdata, setIsDBData] = useState<boolean>(false);
+    const [dialogOpen, setDialogOpen] = useState<boolean>(false);
+    const [onConfirm, setOnConfirm] = useState<boolean>(false);
+
+    const userUniqId = getCookie(AUTH_USER_ID) ?? "";
+    const { setMessage: alert } = useAlertStore((state) => state);
+
+    const dbIdList = ['link0001', 'link0002'];
+
+    // Link 목록 쿼리
+    const query = useQuery({
+        queryKey: [`${process.env.NEXT_PUBLIC_LINK_BACKEND_API_HOST}/getLinkList`, linkSearchParam],
+        queryFn: () => LinkApi.getLinkList({
+            ...linkSearchParam,
+            page: pagination.pageIndex,
+            size: pagination.pageSize,
+        }),
+    });
+
+    // LinkVrbl 목록 쿼리 - 별도 관리
+    const linkVrblQuery = useQuery({
+        queryKey: ['linkVrblList', selectedLink.linkSn],
+        queryFn: () => LinkApi.getLinkVrblList(selectedLink.linkSn),
+        enabled: !!selectedLink.linkSn && !dbIdList.includes(selectedLink.linkSn),
+        staleTime: 0, // 항상 최신 데이터를 가져오도록 설정
+    });
+
+    const handleResetSearchParam = () => {
+        setSelectedLink({
+            linkSn: '',
+            linkNm: ''
+        });
+
+        setLinkSn('');
+        setLinkNm('');
+        setLinkSearchParam({
+            ...linkSearchParam,
+            linkSn: '',
+            linkNm: ''
+        });
+    };
+
+    const handleConfirm = async (callback: () => Promise<void>) => {
+        setOnConfirm(true);
+        await callback();
+        setOnConfirm(false);
+    };
+
+    const { mutateAsync: insertLinkVrbl } = useMutation({
+        mutationFn: async (data: LinkVrblFormData) =>
+            await LinkApi.insertLinkVrbl({
+                ...data,
+                link_sn: selectedLink.linkSn,
+                mdfr: userUniqId,
+            }),
+        onSuccess: async () => {
+            // 쿼리 무효화를 통한 최신 데이터 가져오기
+            await queryClient.invalidateQueries({
+                queryKey: ['linkVrblList', selectedLink.linkSn]
+            });
+            setDialogOpen(false);
+            alert('저장되었습니다.');
+        }
+    });
+
+    const { mutateAsync: updateLinkVrbl } = useMutation({
+        mutationFn: async (data: LinkVrblFormData) => await LinkApi.updateLinkVrblInfo({
+            ...data,
+            link_sn: selectedLink.linkSn,
+            mdfr: userUniqId,
+        }),
+        onSuccess: async () => {
+            await queryClient.invalidateQueries({
+                queryKey: ['linkVrblList', selectedLink.linkSn]
+            });
+            setDialogOpen(false);
+            alert('저장되었습니다.');
+        }
+    });
+
+    const { mutateAsync: deleteLinkVrbl } = useMutation({
+        mutationFn: async (data: string[]) => await LinkApi.deleteLinkVrbl(data),
+        onSuccess: async () => {
+            await queryClient.invalidateQueries({
+                queryKey: ['linkVrblList', selectedLink.linkSn]
+            });
+            setSelectedVrblIds([]);
+            alert('삭제되었습니다.');
+        }
+    });
+
+    // linkVrblQuery의 데이터를 사용
+    const tableData = useMemo(() => {
+        return linkVrblQuery.data?.content ?? [];
+    }, [linkVrblQuery.data]);
+
+    const vrblCols = useMemo(
+        () =>
+            vrblColumns({
+                selectedVrblIds,
+                setSelectedVrblIds,
+            }),
+        [selectedVrblIds]
+    );
+
+    const vrblTable = useReactTable({
+        data: tableData,
+        columns: vrblCols,
+        getCoreRowModel: getCoreRowModel(),
+    });
+
+    const form = useForm<LinkVrblFormData>({
+        resolver: zodResolver(linkVrblFormSchema),
+        defaultValues: {},
+    });
+
+    const handleRowClick = async (link: Link) => {
+        setSelectedLink({
+            linkSn: link.link_sn,
+            linkNm: link.link_nm,
+        });
+
+        setSelectedVrblIds([]);
+
+        if (dbIdList.includes(link.link_clsf_cd)) {
+            setIsDBData(true);
+        } else {
+            setIsDBData(false);
+        }
+    };
+
+    const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+        e.preventDefault();
+
+        setSelectedLink({
+            linkSn: '',
+            linkNm: ''
+        });
+
+        setLinkSearchParam({
+            ...linkSearchParam,
+            linkSn,
+            linkNm
+        });
+    };
+
+    const fetchUserInfo = async () => {
+        const userData = await getUserInfo();
+        return userData.userName;
+    };
+
+    const handleDeleteParam = async () => {
+        if (selectedVrblIds.length === 0) {
+            alert('삭제할 파라미터를 선택해 주세요.');
+        } else {
+            await handleConfirm(async () => {
+                if (await confirm('선택한 파라미터 정보를 삭제하시겠습니까?')) {
+                    deleteLinkVrbl(selectedVrblIds);
+                }
+            });
+        }
+    };
+
+    const handleVrblRowClick = async (data: LinkVrbl) => {
+        const linkVrblInfo = await LinkApi.getLinkVrblInfo(data.link_vrbl_sn);
+
+        if (linkVrblInfo) {
+            let newData = { ...linkVrblInfo };
+
+            if (linkVrblInfo.mdfr) {
+                const userName = await fetchUserInfo();
+                newData = {
+                    ...linkVrblInfo,
+                    mdfr: userName,
+                };
+            }
+
+            form.reset(newData);
+        }
+        setDialogOpen(true);
+    };
+
+    const { tableComponent } = useDataTable({
+        query,
+        tableOptions: {
+            columns,
+            state: {
+                pagination,
+                rowSelection,
+            },
+            manualPagination: true,
+            enableMultiRowSelection: true,
+            getCoreRowModel: getCoreRowModel(),
+            onPaginationChange: setPagination,
+            onRowSelectionChange: setRowSelection,
+        },
+        dataTableOptions: {
+            onRowClick: handleRowClick,
+            viewPagination: true,
+        },
+    });
+
+    // LinkVrbl 데이터 표시 로직
+    const renderLinkVrblContent = () => {
+        if (isDBdata) {
+            return (
+                <div className="flex items-center justify-center mt-14 text-gray-500 text-3xl flex-1">
+                    변수를 지원하지 않는 연계 데이터입니다.
+                </div>
+            );
+        }
+
+        if (!selectedLink.linkSn) {
+            return (
+                <div className="flex items-center justify-center mt-14 text-gray-500 text-3xl flex-1">
+                    연계 데이터를 선택해주세요.
+                </div>
+            );
+        }
+
+        if (linkVrblQuery.isLoading) {
+            return (
+                <div className="[data-theme='black']:bg-transparent rounded-lg p-10 flex justify-center items-center h-full">
+                    <div className="relative size-[5rem]">
+                        <LoadingWithAnimation color="primary" />
+                    </div>
+                </div>
+            );
+        }
+
+        return (
+            <>
+                <div className="mb-2 mt-14 flex justify-end items-center flex-none">
+                    {tableData.length > 0 && (
+                        <Button color="red" className="h-[3.2rem] mr-2" type="button" onClick={handleDeleteParam}>
+                            행 삭제
+                        </Button>
+                    )}
+                    <LinkParamsDialog
+                        selectedLink={selectedLink}
+                        form={form}
+                        insertLinkVrbl={insertLinkVrbl}
+                        dialogOpen={dialogOpen}
+                        onOpenChange={setDialogOpen}
+                        updateLinkVrbl={updateLinkVrbl}
+                    />
+                </div>
+                {tableData.length > 0 ? (
+                    <div className="overflow-auto flex-1 min-h-[300px]">
+                        <DataTable table={vrblTable} onRowClick={handleVrblRowClick} />
+                    </div>
+                ) : (
+                    <div className="flex items-center justify-center h-20 text-gray-500 text-3xl">
+                        등록된 연계 변수가 없습니다.
+                    </div>
+                )}
+            </>
+        );
+    };
+
+    return (
+        <div className="card card-border !mt-6">
+            <div className="card card-border">
+                <form className="flex items-center gap-2 p-2" onSubmit={handleSubmit}>
+                    <Label htmlFor="liSnSearchInput" className="mr-2 text-label">
+                        일련번호
+                    </Label>
+                    <Input
+                        className="h-[3.2rem] w-[24rem] rounded-sm !text-[1.3rem] mr-4"
+                        id="liSnSearchInput"
+                        value={linkSn}
+                        onChange={(e) => setLinkSn(e.target.value)}
+                        autoComplete="off"
+                    />
+                    <Label htmlFor="liNmSearchInput" className="mr-2 text-label">
+                        연계 명
+                    </Label>
+                    <Input
+                        className="h-[3.2rem] w-[24rem] rounded-sm !text-[1.3rem] mr-2"
+                        id="liNmSearchInput"
+                        value={linkNm}
+                        onChange={(e) => setLinkNm(e.target.value)}
+                        autoComplete="off"
+                    />
+                    <Button color="green" className="h-[3.2rem]" type="button" onClick={handleResetSearchParam}>
+                        초기화
+                    </Button>
+                    <Button className="h-[3.2rem]" type="submit">
+                        조회
+                    </Button>
+                </form>
+            </div>
+            <div className="card !mb-0 flex h-[calc(100vh-28rem)] gap-5 !p-0">
+                <div className="card card-border w-1/2 !mx-0 flex flex-col">
+                    <div className="card-header">
+                        <h3 className="text-2xl font-medium text-label">연계 목록</h3>
+                    </div>
+                    <div className="card !m-[1.2rem] overflow-auto !p-0 h-full">
+                        {!query.isLoading ? (
+                            <div>{tableComponent}</div>
+                        ) : (
+                            <div className="[data-theme='black']:bg-transparent rounded-lg p-10 flex justify-center items-center h-full">
+                                <div className="relative size-[5rem]">
+                                    <LoadingWithAnimation color="primary" />
+                                </div>
+                            </div>
+                        )}
+                    </div>
+                </div>
+                <div className="card card-border w-1/2 !mx-0 flex flex-col">
+                    <div className="card-header">
+                        <h3 className="text-2xl font-medium text-label">연계 변수 정보</h3>
+                    </div>
+                    <div className="card !m-[1.2rem] !p-0 overflow-auto h-full flex flex-col">
+                        <Table variant="secondary" className="flex-none">
+                            <colgroup>
+                                <col width="20%" />
+                                <col width="80%" />
+                            </colgroup>
+                            <TableBody>
+                                <TableRow>
+                                    <TableHead>연계 일련번호</TableHead>
+                                    <TableCell>
+                                        {selectedLink.linkSn ? selectedLink.linkSn : '-'}
+                                    </TableCell>
+                                </TableRow>
+                                <TableRow>
+                                    <TableHead>연계 명</TableHead>
+                                    <TableCell>
+                                        {selectedLink.linkNm ? selectedLink.linkNm : '-'}
+                                    </TableCell>
+                                </TableRow>
+                            </TableBody>
+                        </Table>
+                        {renderLinkVrblContent()}
+                    </div>
+                </div>
+            </div>
+            <ConfirmDialog isOpen={onConfirm} />
+        </div>
+    );
+}
+
+export { LinkParamsPage };

apps/cs/src/pages/linkStats/index.ts

@@ -0,0 +1 @@
+export { LinkStatsPage } from './ui/link-stats-page';

apps/cs/src/pages/linkStats/ui/link-stats-page.tsx

@@ -0,0 +1,378 @@
+"use client";
+
+import { useState, useEffect, useRef } from "react";
+import dayjs from "dayjs";
+import { LinkApi, type LinkStats, type LinkSearchParam } from "@/entities/link";
+import { Button, Label, DatePicker, LoadingWithAnimation } from "@common/components";
+import {
+    Chart as ChartJS,
+    CategoryScale,
+    LinearScale,
+    PointElement,
+    LineElement,
+    Tooltip,
+    Legend,
+    type ChartOptions,
+    type Chart,
+} from "chart.js";
+import { Line } from "react-chartjs-2";
+import { getCoreRowModel, type PaginationState, type RowSelectionState, } from "@tanstack/react-table";
+import { columns } from "@/pages/linkLog/model/table-columns";
+import { useDataTable } from "@/shared/lib";
+import { useQuery } from "@tanstack/react-query";
+
+interface LinkStatsListObject {
+    linkSuccStats: LinkStats[] | null;
+    linkFailStats: LinkStats[] | null;
+}
+
+function LinkStatsPage() {
+
+    const succChartRef = useRef<Chart<"line"> | null>(null);
+    const failChartRef = useRef<Chart<"line"> | null>(null);
+
+    const [startDate, setStartDate] = useState<string>(dayjs().subtract(7, "day").format('YYYY-MM-DD'));
+    const [endDate, setEndDate] = useState<string>(dayjs().format('YYYY-MM-DD'));
+
+    const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
+
+    const [pagination, setPagination] = useState<PaginationState>({
+        pageIndex: 0,
+        pageSize: 100,
+    });
+
+    const [linkStatsList, setLinkStatsList] = useState<LinkStatsListObject | null>(null);
+    const [logQueryParam, setLogQueryParam] = useState<{
+        isSucc: 'SUCC' | 'FAIL';
+        linkSn?: string;
+        linkNm?: string;
+    } | null>(null);
+
+    const query = useQuery({
+        queryKey: [`${process.env.NEXT_PUBLIC_LINK_BACKEND_API_HOST}/getLinkList`, logQueryParam, pagination],
+        queryFn: () =>
+            LinkApi.getLinkLogList({
+                ...logQueryParam,
+                page: pagination.pageIndex,
+                size: pagination.pageSize,
+                startDate,
+                endDate,
+            }),
+        enabled: !!logQueryParam,
+    });
+
+
+    const { tableComponent } = useDataTable({
+        query,
+        tableOptions: {
+            columns,
+            state: {
+                pagination,
+                rowSelection,
+            },
+            manualPagination: true,
+            enableMultiRowSelection: true,
+            getCoreRowModel: getCoreRowModel(),
+            onPaginationChange: setPagination,
+            onRowSelectionChange: setRowSelection,
+        },
+        dataTableOptions: {
+            viewPagination: true,
+        },
+    });
+
+    const [linkSearchParam, setLinkSearchParam] = useState<LinkSearchParam>({
+        linkSn: '',
+        linkNm: '',
+        startDate: '',
+        endDate: '',
+    });
+
+    ChartJS.register(
+        LineElement,
+        CategoryScale,
+        LinearScale,
+        PointElement,
+        Tooltip,
+        Legend
+    );
+
+    const succData = {
+        labels: linkStatsList?.linkSuccStats?.map((e) => e.link_nm),
+        datasets: [
+            {
+                label: '연계 성공',
+                data: linkStatsList?.linkSuccStats?.map((e) => e.count),
+                fill: false,
+                borderColor: 'rgb(53, 162, 235)',
+                backgroundColor: 'rgb(53, 162, 235)',
+                tension: 0.1,
+                pointRadius: 6,
+                pointHoverRadius: 8,
+            },
+        ],
+    };
+
+    const succOptions: ChartOptions<'line'> = {
+        responsive: true,
+        maintainAspectRatio: false,
+        plugins: {
+            legend: {
+                position: 'top',
+            },
+        },
+        scales: {
+            y: {
+                min: 0,
+            },
+        },
+    };
+
+    const failData = {
+        labels: linkStatsList?.linkFailStats?.map((e) => e.link_nm),
+        datasets: [
+            {
+                label: '연계 실패',
+                data: linkStatsList?.linkFailStats?.map((e) => e.count),
+                fill: false,
+                borderColor: 'rgb(255, 99, 132)',
+                backgroundColor: 'rgb(255, 99, 132)',
+                tension: 0.1,
+                pointRadius: 6,
+                pointHoverRadius: 8,
+            },
+        ],
+    };
+
+    const failOptions: ChartOptions<'line'> = {
+        responsive: true,
+        maintainAspectRatio: false,
+        plugins: {
+            legend: {
+                position: 'top',
+            },
+        },
+        scales: {
+            y: {
+                min: 0,
+            },
+        },
+    };
+
+    const handleResetSearchParam = async () => {
+        setLinkSearchParam({
+            linkSn: '',
+            linkNm: '',
+            startDate: dayjs().subtract(7, "day").format('YYYY-MM-DD'),
+            endDate: dayjs().format('YYYY-MM-DD'),
+        });
+
+        setLogQueryParam({
+            isSucc: 'SUCC',
+            linkNm: '',
+            linkSn: '',
+        });
+
+        setStartDate(dayjs().subtract(7, "day").format('YYYY-MM-DD'));
+        setEndDate(dayjs().format('YYYY-MM-DD'));
+
+        const data = await LinkApi.getLinkStatsList({
+            ...linkSearchParam,
+            linkSn: '',
+            linkNm: '',
+            startDate: dayjs().subtract(7, "day").format('YYYY-MM-DD'),
+            endDate: dayjs().format('YYYY-MM-DD'),
+        });
+        setLinkStatsList(data);
+    };
+
+    const handleSubmit = async (e?: React.FormEvent<HTMLFormElement>) => {
+        e?.preventDefault();
+
+        if (startDate && endDate) {
+
+            if (startDate > endDate) {
+                alert('종료일이 시작일보다 이전일 수 없습니다.');
+                return;
+            } else {
+                const data = await LinkApi.getLinkStatsList({
+                    ...linkSearchParam,
+                    startDate,
+                    endDate
+                });
+                setLinkStatsList(data);
+                setLogQueryParam({
+                    isSucc: 'SUCC',
+                    linkNm: '',
+                    linkSn: '',
+                });
+                setLinkSearchParam({
+                    ...linkSearchParam,
+                    startDate,
+                    endDate
+                });
+            }
+        } else {
+            alert('조회 날짜를 선택해주세요.');
+            return;
+        }
+    };
+
+    const handleSuccChartClick = async (event: React.MouseEvent<HTMLCanvasElement>) => {
+        if (!succChartRef.current) return;
+
+        const chart = succChartRef.current;
+
+        const points = chart.getElementsAtEventForMode(
+            event.nativeEvent,
+            "nearest",
+            { intersect: true },
+            false
+        );
+
+        if (points[0] && linkStatsList?.linkSuccStats) {
+            const index = points[0].index;
+            setPagination({
+                ...pagination,
+                pageIndex: 0,
+                pageSize: 100,
+            });
+            setLogQueryParam({
+                isSucc: 'SUCC',
+                linkNm: linkStatsList.linkSuccStats[index]?.link_nm,
+                linkSn: linkStatsList.linkSuccStats[index]?.link_sn,
+            });
+        }
+    };
+
+    const handleFailChartClick = async (event: React.MouseEvent<HTMLCanvasElement>) => {
+        if (!failChartRef.current) return;
+
+        const chart = failChartRef.current;
+
+        const points = chart.getElementsAtEventForMode(
+            event.nativeEvent,
+            "nearest",
+            { intersect: true },
+            false
+        );
+
+        if (points[0] && linkStatsList?.linkFailStats) {
+            const index = points[0].index;
+            setPagination({
+                ...pagination,
+                pageIndex: 0,
+                pageSize: 100,
+            });
+            setLogQueryParam({
+                isSucc: 'FAIL',
+                linkNm: linkStatsList.linkFailStats[index]?.link_nm,
+                linkSn: linkStatsList.linkFailStats[index]?.link_sn,
+            });
+        }
+    };
+
+    const handleSubmitToday = async () => {
+        const data = await LinkApi.getLinkStatsList({
+            ...linkSearchParam,
+            startDate: dayjs().format('YYYY-MM-DD'),
+            endDate: dayjs().format('YYYY-MM-DD'),
+        });
+        setEndDate(dayjs().format('YYYY-MM-DD'));
+        setStartDate(dayjs().format('YYYY-MM-DD'));
+        setLinkStatsList(data);
+        setLinkSearchParam({
+            ...linkSearchParam,
+            startDate: dayjs().format('YYYY-MM-DD'),
+            endDate: dayjs().format('YYYY-MM-DD'),
+        });
+        setLogQueryParam({
+            isSucc: 'SUCC',
+            linkNm: '',
+            linkSn: '',
+        });
+    };
+
+    useEffect(() => {
+        const fetchData = async () => {
+            const data = await LinkApi.getLinkStatsList({
+                ...linkSearchParam,
+                startDate,
+                endDate
+            });
+            setLinkStatsList(data);
+        };
+
+        setLinkSearchParam({
+            ...linkSearchParam,
+            startDate,
+            endDate
+        });
+
+        fetchData();
+    }, []);
+
+    return (
+        <div className="card !mb-0 !min-h-[calc(100vh-16.8rem)]">
+            <div className="card card-border">
+                <form className="flex items-center gap-2 p-2" onSubmit={handleSubmit}>
+                    <Label htmlFor="sDateSearchInput" className="mx-2 text-label">
+                        시작일
+                    </Label>
+                    <DatePicker id="sDateSearchInput" mode={"single"} selected={dayjs(startDate).toDate()} onSelect={(e) => setStartDate(dayjs(e).format('YYYY-MM-DD'))} />
+                    <Label htmlFor="eDateSearchInput" className="mx-2 text-label">
+                        종료일
+                    </Label>
+                    <DatePicker id="eDateSearchInput" mode={"single"} className="mr-2" selected={dayjs(endDate).toDate()} onSelect={(e) => setEndDate(dayjs(e).format('YYYY-MM-DD'))} />
+                    <Button color="green" className="h-[3.2rem]" type="button" onClick={handleResetSearchParam}>
+                        초기화
+                    </Button>
+                    <Button className="h-[3.2rem]" type="submit">
+                        조회
+                    </Button>
+                    <Button className="h-[3.2rem]" type="button" onClick={handleSubmitToday}>
+                        오늘 날짜로 조회
+                    </Button>
+                </form>
+            </div>
+            <div className="card card-border">
+                <div className="card !m-[1.2rem] !p-0 flex flex-col gap-y-8">
+                    <div className="card-header">
+                        <h3 className="text-2xl font-medium text-label">조회 일자 : {`${linkSearchParam.startDate} ~ ${linkSearchParam.endDate}`}</h3>
+                    </div>
+                    <div className="h-[32rem] w-full">
+                        <Line ref={succChartRef} data={succData} options={succOptions} onClick={handleSuccChartClick} />
+                    </div>
+                    <div className="h-[32rem]">
+                        <Line ref={failChartRef} data={failData} options={failOptions} onClick={handleFailChartClick} />
+                    </div>
+                </div>
+                <div className="card !m-[1.2rem] !p-0">
+                    <div className="card-header">
+                        <h3 className="text-2xl font-medium text-label">
+                            {logQueryParam?.linkNm ? `${logQueryParam.linkNm} 연계 ${logQueryParam.isSucc === 'FAIL' ? '실패' : '성공'} 로그 목록 (${linkSearchParam.startDate} ~ ${linkSearchParam.endDate}) - ${query.data?.totalElements.toLocaleString('ko-KR') ?? 0}건` : '로그 목록'}
+                        </h3>
+                    </div>
+                    <div className="card !m-[1.2rem] h-[40rem] overflow-auto !p-0">
+                        {logQueryParam?.linkNm ?
+                            query.isLoading ?
+                                <div className="[data-theme='black']:bg-transparent rounded-lg p-10 h-full flex justify-center items-center">
+                                    <div className="relative size-[5rem]">
+                                        <LoadingWithAnimation color="primary" />
+                                    </div>
+                                </div>
+                                :
+                                <div>{tableComponent}</div>
+                            :
+                            <div className="flex items-center justify-center h-full text-gray-500 text-3xl">
+                                차트 데이터를 선택해주세요.
+                            </div>
+                        }
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+};
+
+export { LinkStatsPage };

apps/cs/src/pages/linkTable/index.ts

@@ -0,0 +1 @@
+export { LinkTablePage} from "./ui/link-table-page";

apps/cs/src/pages/linkTable/model/table-columns.tsx

@@ -0,0 +1,103 @@
+import { createColumnHelper } from "@tanstack/react-table";
+import { type LinkTableColumns } from "@/entities/link";
+import { Checkbox } from "@common/components";
+
+const columnHelper = createColumnHelper<LinkTableColumns>();
+
+function tableColumns({ selectedColIds, setSelectedColIds }: {
+    selectedColIds: string[];
+    setSelectedColIds: React.Dispatch<React.SetStateAction<string[]>>;
+}) {
+    return [
+        columnHelper.display({
+            id: "select",
+            header: ({ table }) => {
+                const allRows = table.getRowModel().rows;
+                const allSelected =
+                    allRows.length > 0 &&
+                    allRows.every((row) =>
+                        selectedColIds.includes(row.original.col_sn)
+                    );
+
+                return (
+                    <div className="flex justify-center items-center">
+                        <Checkbox
+                            className="bg-white"
+                            checked={
+                                allSelected
+                                    ? true
+                                    : false
+                            }
+                            onCheckedChange={(checked) => {
+                                if (checked) {
+                                    setSelectedColIds(allRows.map((row) => row.original.col_sn));
+                                } else {
+                                    setSelectedColIds([]);
+                                }
+                            }}
+                        />
+                    </div>
+                );
+            },
+            cell: ({ row }) => {
+                const id = row.original.col_sn;
+                const checked = selectedColIds.includes(id);
+
+                return (
+                    <div className="flex justify-center items-center">
+                        <Checkbox
+                            checked={checked}
+                            onClick={(e) => e.stopPropagation()}
+                            onCheckedChange={(checked) => {
+                                setSelectedColIds((prev) =>
+                                    checked ? [...prev, id] : prev.filter((x) => x !== id)
+                                );
+                            }}
+                        />
+                    </div>
+                );
+            },
+        }),
+        columnHelper.accessor('col_sn', {
+            id: 'col_sn',
+            header: '컬럼 일련번호'
+        }),
+        columnHelper.accessor('sou_col_nm', {
+            id: 'sou_col_nm',
+            header: '원천컬럼명',
+            cell: (info) => info.getValue() ? info.getValue() : '-',
+        }),
+        columnHelper.accessor('sou_col_korn_nm', {
+            id: 'sou_col_korn_nm',
+            header: '원천컬럼 한글명',
+            cell: (info) => info.getValue() ? info.getValue() : '-',
+        }),
+        columnHelper.accessor('sou_col_sz', {
+            id: 'sou_col_sz',
+            header: '원천컬럼 크기',
+            cell: (info) => info.getValue() ? info.getValue() : '-',
+        }),
+        columnHelper.accessor('trsf_col_nm', {
+            id: 'trsf_col_nm',
+            header: '변환컬럼명',
+            cell: (info) => info.getValue() ? info.getValue() : '-',
+        }),
+        columnHelper.accessor('trsf_col_korn_nm', {
+            id: 'trsf_col_korn_nm',
+            header: '변환컬럼 한글명',
+            cell: (info) => info.getValue() ? info.getValue() : '-',
+        }),
+        columnHelper.accessor('trsf_col_sz', {
+            id: 'trsf_col_sz',
+            header: '변환컬럼 크기',
+            cell: (info) => info.getValue() ? info.getValue() : '-',
+        }),
+        columnHelper.accessor('pk_yn', {
+            id: 'pk_yn',
+            header: 'PK 여부',
+            cell: (info) => info.getValue() === 'Y' ? '예' : '아니오',
+        }),
+    ]
+}
+
+export { tableColumns };

apps/cs/src/pages/linkTable/ui/link-table-dialog.tsx

@@ -0,0 +1,503 @@
+'use client';
+
+import {
+    Dialog,
+    DialogTrigger,
+    DialogContent,
+    DialogHeader,
+    DialogTitle,
+    DialogFooter,
+    DialogClose,
+    Button,
+    Input,
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableRow,
+    Select,
+    SelectTrigger,
+    SelectContent,
+    SelectItem,
+    SelectValue,
+    Checkbox
+} from "@common/components";
+import { FormItem, FormControl, FormField, Form } from "@/shared/ui/form";
+import { type LinkTableColData, type LinkTable } from "@/entities/link";
+import dayjs from "dayjs";
+import type { UseFormReturn } from "react-hook-form";
+import { useConfirm } from "@frontend-opensource/use-react-hooks";
+import { useState, useEffect } from "react";
+import { ConfirmDialog } from "@/shared/ui/confirm-dialog";
+
+interface LinkTableDialogProps {
+    dialogOpen: boolean;
+    onOpenChange: (val: boolean) => void;
+    form: UseFormReturn<LinkTableColData>;
+    tableInfo: LinkTable;
+    insertLinkTableCol: (data: LinkTableColData) => void;
+    updateLinkTableCol: (data: LinkTableColData) => void;
+}
+
+function LinkTableDialog({ dialogOpen, onOpenChange, form, tableInfo, insertLinkTableCol, updateLinkTableCol }: LinkTableDialogProps) {
+
+    const isModifyMode = !!form.getValues('col_sn');
+
+    const { confirm } = useConfirm();
+    const [onConfirm, setOnConfirm] = useState<boolean>(false);
+    const [useColSeq, setUseColSeq] = useState<boolean>(false);
+
+    const handleConfirm = async (callback: () => Promise<void>) => {
+        setOnConfirm(true);
+        await callback();
+        setOnConfirm(false);
+    };
+
+    const handleSubmit = async (data: LinkTableColData) => {
+        const confirmMsg = isModifyMode ? '수정 하시겠습니까?' : '저장 하시겠습니까?';
+
+        await handleConfirm(async () => {
+            if (await confirm(confirmMsg)) {
+                if (!isModifyMode) {
+                    insertLinkTableCol({
+                        ...data,
+                        link_sn: tableInfo.link_sn,
+                        tbl_sn: tableInfo.tbl_sn,
+                    });
+                } else {
+                    updateLinkTableCol({
+                        ...data,
+                        link_sn: tableInfo.link_sn,
+                        tbl_sn: tableInfo.tbl_sn,
+                    });
+                }
+            }
+        });
+    };
+
+    const handleCheckColSeqValue = (check: boolean | string) => {
+        if (check) {
+            setUseColSeq(false);
+            form.setValue('col_seq', null);
+        } else {
+            setUseColSeq(true);
+        }
+    };
+
+    useEffect(() => {
+        if (!dialogOpen) {
+            setUseColSeq(false);
+            form.reset({
+                tbl_sn: '',
+                col_sn: '',
+                sou_col_nm: '',
+                sou_col_korn_nm: '',
+                sou_col_data_frm: '',
+                sou_col_sz: null,
+                trsf_col_nm: '',
+                trsf_col_korn_nm: '',
+                trsf_col_data_frm: '',
+                trsf_col_sz: null,
+                col_seq: null,
+                pk_yn: 'N',
+                mdfcn_dt: '',
+                mdfr: '',
+            });
+        }
+
+        if (isModifyMode && form.getValues('col_seq')) {
+            setUseColSeq(true);
+        }
+
+    }, [dialogOpen]);
+
+    return (
+        <Dialog
+            open={dialogOpen}
+            onOpenChange={(open) => {
+                onOpenChange(open);
+            }}
+        >
+            <DialogTrigger asChild>
+                <Button color="green" className="h-[3.2rem]" onClick={() => onOpenChange(true)}>행 추가</Button>
+            </DialogTrigger>
+            <DialogContent className="sm:max-w-[55rem]">
+                <DialogHeader>
+                    <DialogTitle>
+                        {tableInfo.trsf_tbl_korn_nm} ({tableInfo.tbl_sn})
+                    </DialogTitle>
+                </DialogHeader>
+                <Form {...form}>
+                    <form onSubmit={form.handleSubmit(handleSubmit)}>
+                        <div className="card">
+                            <Table variant="secondary">
+                                <colgroup>
+                                    <col width="30%" />
+                                    <col width="70%" />
+                                </colgroup>
+                                <TableBody>
+                                    {isModifyMode &&
+                                        <TableRow>
+                                            <TableHead>컬럼 일련번호</TableHead>
+                                            <TableCell>
+                                                <FormField
+                                                    control={form.control}
+                                                    name="col_sn"
+                                                    render={({ field }) => (
+                                                        <FormItem>
+                                                            <FormControl>
+                                                                <Input
+                                                                    {...field}
+                                                                    value={field.value ?? ""}
+                                                                    className="!text-[1.3rem]"
+                                                                    disabled
+                                                                />
+                                                            </FormControl>
+                                                        </FormItem>
+                                                    )}
+                                                />
+                                            </TableCell>
+                                        </TableRow>
+                                    }
+                                    <TableRow>
+                                        <TableHead>* 원천컬럼명</TableHead>
+                                        <TableCell>
+                                            <FormField
+                                                control={form.control}
+                                                name="sou_col_nm"
+                                                render={({ field }) => (
+                                                    <FormItem>
+                                                        <FormControl>
+                                                            <Input
+                                                                {...field}
+                                                                value={field.value ?? ""}
+                                                                className="!text-[1.3rem]"
+                                                                autoComplete="off"
+                                                            />
+                                                        </FormControl>
+                                                        {form.formState.errors.sou_col_nm && (
+                                                            <p className="text-red-500 text-base pt-2">
+                                                                {form.formState.errors.sou_col_nm.message}
+                                                            </p>
+                                                        )}
+                                                    </FormItem>
+                                                )}
+                                            />
+                                        </TableCell>
+                                    </TableRow>
+                                    <TableRow>
+                                        <TableHead>* 원천컬럼 한글명</TableHead>
+                                        <TableCell>
+                                            <FormField
+                                                control={form.control}
+                                                name="sou_col_korn_nm"
+                                                render={({ field }) => (
+                                                    <FormItem>
+                                                        <FormControl>
+                                                            <Input
+                                                                {...field}
+                                                                value={field.value ?? ""}
+                                                                className="!text-[1.3rem]"
+                                                                autoComplete="off"
+                                                            />
+                                                        </FormControl>
+                                                        {form.formState.errors.sou_col_korn_nm && (
+                                                            <p className="text-red-500 text-base pt-2">
+                                                                {form.formState.errors.sou_col_korn_nm.message}
+                                                            </p>
+                                                        )}
+                                                    </FormItem>
+                                                )}
+                                            />
+                                        </TableCell>
+                                    </TableRow>
+                                    <TableRow>
+                                        <TableHead>* 원천컬럼 데이터 형식</TableHead>
+                                        <TableCell>
+                                            <FormField
+                                                control={form.control}
+                                                name="sou_col_data_frm"
+                                                render={({ field }) => (
+                                                    <FormItem>
+                                                        <FormControl>
+                                                            <Input
+                                                                {...field}
+                                                                value={field.value ?? ""}
+                                                                className="!text-[1.3rem]"
+                                                                autoComplete="off"
+                                                            />
+                                                        </FormControl>
+                                                        {form.formState.errors.sou_col_data_frm && (
+                                                            <p className="text-red-500 text-base pt-2">
+                                                                {form.formState.errors.sou_col_data_frm.message}
+                                                            </p>
+                                                        )}
+                                                    </FormItem>
+                                                )}
+                                            />
+                                        </TableCell>
+                                    </TableRow>
+                                    <TableRow>
+                                        <TableHead>원천컬럼 크기</TableHead>
+                                        <TableCell>
+                                            <FormField
+                                                control={form.control}
+                                                name="sou_col_sz"
+                                                render={({ field }) => (
+                                                    <FormItem>
+                                                        <FormControl>
+                                                            <Input
+                                                                {...field}
+                                                                value={field.value ?? ""}
+                                                                className="!text-[1.3rem]"
+                                                                autoComplete="off"
+                                                                type="number"
+                                                                min={0}
+                                                                max={99999999999999}
+                                                                onChange={(e) => {
+                                                                    const onlyDigits = e.target.value.replace(/\D/g, "").slice(0, 14);
+                                                                    field.onChange(onlyDigits); // react-hook-form에 반영
+                                                                }}
+                                                            />
+                                                        </FormControl>
+                                                        <p className="text-gray-500 text-base pt-2">
+                                                            ※ 14자리까지 입력 가능합니다.
+                                                        </p>
+                                                    </FormItem>
+                                                )}
+                                            />
+                                        </TableCell>
+                                    </TableRow>
+                                    <TableRow>
+                                        <TableHead>PK 여부</TableHead>
+                                        <TableCell>
+                                            <FormField
+                                                control={form.control}
+                                                name="pk_yn"
+                                                render={({ field }) => (
+                                                    <FormItem>
+                                                        <FormControl>
+                                                            <Select value={field.value ?? "N"} onValueChange={field.onChange}>
+                                                                <SelectTrigger id="liResultCode" className="w-[10rem] mr-4">
+                                                                    <SelectValue placeholder="아니오"></SelectValue>
+                                                                </SelectTrigger>
+                                                                <SelectContent>
+                                                                    <SelectItem value="Y">예</SelectItem>
+                                                                    <SelectItem value="N">아니오</SelectItem>
+                                                                </SelectContent>
+                                                            </Select>
+                                                        </FormControl>
+                                                    </FormItem>
+                                                )}
+                                            />
+                                        </TableCell>
+                                    </TableRow>
+                                    <TableRow>
+                                        <TableHead>* 변환컬럼명</TableHead>
+                                        <TableCell>
+                                            <FormField
+                                                control={form.control}
+                                                name="trsf_col_nm"
+                                                render={({ field }) => (
+                                                    <FormItem>
+                                                        <FormControl>
+                                                            <Input
+                                                                {...field}
+                                                                value={field.value ?? ""}
+                                                                className="!text-[1.3rem]"
+                                                                autoComplete="off"
+                                                            />
+                                                        </FormControl>
+                                                        {form.formState.errors.trsf_col_nm && (
+                                                            <p className="text-red-500 text-base pt-2">
+                                                                {form.formState.errors.trsf_col_nm.message}
+                                                            </p>
+                                                        )}
+                                                    </FormItem>
+                                                )}
+                                            />
+                                        </TableCell>
+                                    </TableRow>
+                                    <TableRow>
+                                        <TableHead>* 변환컬럼 한글명</TableHead>
+                                        <TableCell>
+                                            <FormField
+                                                control={form.control}
+                                                name="trsf_col_korn_nm"
+                                                render={({ field }) => (
+                                                    <FormItem>
+                                                        <FormControl>
+                                                            <Input
+                                                                {...field}
+                                                                value={field.value ?? ""}
+                                                                className="!text-[1.3rem]"
+                                                                autoComplete="off"
+                                                            />
+                                                        </FormControl>
+                                                        {form.formState.errors.trsf_col_korn_nm && (
+                                                            <p className="text-red-500 text-base pt-2">
+                                                                {form.formState.errors.trsf_col_korn_nm.message}
+                                                            </p>
+                                                        )}
+                                                    </FormItem>
+                                                )}
+                                            />
+                                        </TableCell>
+                                    </TableRow>
+                                    <TableRow>
+                                        <TableHead>* 변환컬럼 데이터 형식</TableHead>
+                                        <TableCell>
+                                            <FormField
+                                                control={form.control}
+                                                name="trsf_col_data_frm"
+                                                render={({ field }) => (
+                                                    <FormItem>
+                                                        <FormControl>
+                                                            <Input
+                                                                {...field}
+                                                                value={field.value ?? ""}
+                                                                className="!text-[1.3rem]"
+                                                                autoComplete="off"
+                                                            />
+                                                        </FormControl>
+                                                        {form.formState.errors.trsf_col_data_frm && (
+                                                            <p className="text-red-500 text-base pt-2">
+                                                                {form.formState.errors.trsf_col_data_frm.message}
+                                                            </p>
+                                                        )}
+                                                    </FormItem>
+                                                )}
+                                            />
+                                        </TableCell>
+                                    </TableRow>
+                                    <TableRow>
+                                        <TableHead>변환컬럼 크기</TableHead>
+                                        <TableCell>
+                                            <FormField
+                                                control={form.control}
+                                                name="trsf_col_sz"
+                                                render={({ field }) => (
+                                                    <FormItem>
+                                                        <FormControl>
+                                                            <Input
+                                                                {...field}
+                                                                value={field.value ?? ""}
+                                                                className="!text-[1.3rem]"
+                                                                autoComplete="off"
+                                                                type="number"
+                                                                min={0}
+                                                                max={99999999999999}
+                                                                onChange={(e) => {
+                                                                    const onlyDigits = e.target.value.replace(/\D/g, "").slice(0, 14);
+                                                                    field.onChange(onlyDigits); // react-hook-form에 반영
+                                                                }}
+                                                            />
+                                                        </FormControl>
+                                                        <p className="text-gray-500 text-base pt-2">
+                                                            ※ 14자리까지 입력 가능합니다.
+                                                        </p>
+                                                    </FormItem>
+                                                )}
+                                            />
+                                        </TableCell>
+                                    </TableRow>
+                                    <TableRow>
+                                        <TableHead>컬럼 매칭 순서</TableHead>
+                                        <TableCell>
+                                            <FormField
+                                                control={form.control}
+                                                name="col_seq"
+                                                render={({ field }) => (
+                                                    <FormItem>
+                                                        <div className="flex items-center gap-x-2 mb-4">
+                                                            <Checkbox id="useColSeq" className="!border-gray-600" checked={!useColSeq} onCheckedChange={(check) => handleCheckColSeqValue(check)} />
+                                                            <label htmlFor="useColSeq" className="text-gray-600">사용안함</label>
+                                                        </div>
+                                                        <FormControl>
+                                                            <Input
+                                                                {...field}
+                                                                value={field.value ?? ""}
+                                                                className="!text-[1.3rem]"
+                                                                autoComplete="off"
+                                                                type="number"
+                                                                min={0}
+                                                                disabled={!useColSeq}
+                                                                max={999}
+                                                                onChange={(e) => {
+                                                                    const onlyDigits = e.target.value.replace(/\D/g, "").slice(0, 3);
+                                                                    field.onChange(onlyDigits); // react-hook-form에 반영
+                                                                }}
+                                                            />
+                                                        </FormControl>
+                                                        <p className="text-gray-500 text-base pt-2">
+                                                            ※ 3자리까지 입력 가능합니다.
+                                                        </p>
+                                                    </FormItem>
+                                                )}
+                                            />
+                                        </TableCell>
+                                    </TableRow>
+                                    {isModifyMode &&
+                                        <>
+                                            <TableRow>
+                                                <TableHead>수정자</TableHead>
+                                                <TableCell>
+                                                    <FormField
+                                                        control={form.control}
+                                                        name="mdfr"
+                                                        render={({ field }) => (
+                                                            <FormItem>
+                                                                <FormControl>
+                                                                    <Input
+                                                                        {...field}
+                                                                        value={field.value ?? ""}
+                                                                        className="!text-[1.3rem]"
+                                                                        disabled
+                                                                    />
+                                                                </FormControl>
+                                                            </FormItem>
+                                                        )}
+                                                    />
+                                                </TableCell>
+                                            </TableRow>
+                                            <TableRow>
+                                                <TableHead>수정일시</TableHead>
+                                                <TableCell>
+                                                    <FormField
+                                                        control={form.control}
+                                                        name="mdfcn_dt"
+                                                        render={({ field }) => (
+                                                            <FormItem>
+                                                                <FormControl>
+                                                                    <Input
+                                                                        {...field}
+                                                                        value={field.value ? dayjs(field.value).format('YYYY-MM-DD') : ""}
+                                                                        className="!text-[1.3rem]"
+                                                                        disabled
+                                                                    />
+                                                                </FormControl>
+                                                            </FormItem>
+                                                        )}
+                                                    />
+                                                </TableCell>
+                                            </TableRow>
+                                        </>
+                                    }
+                                </TableBody>
+                            </Table>
+                        </div>
+                        <DialogFooter>
+                            <Button type="submit">저장</Button>
+                            <DialogClose asChild>
+                                <Button color="white">취소</Button>
+                            </DialogClose>
+                        </DialogFooter>
+                    </form>
+                </Form>
+                <ConfirmDialog isOpen={onConfirm} />
+            </DialogContent>
+        </Dialog>
+    )
+}
+
+export { LinkTableDialog };

apps/cs/src/pages/linkTable/ui/link-table-page.tsx

@@ -0,0 +1,710 @@
+'use client';
+
+import { useState, useMemo } from "react";
+import {
+    Button,
+    DataTable,
+    Input,
+    Label,
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableRow,
+    LoadingWithAnimation,
+} from "@common/components";
+import { getCoreRowModel, type PaginationState, type RowSelectionState, useReactTable } from "@tanstack/react-table";
+import { LinkApi, type Link, type LinkSearchParam, type LinkTable, type LinkTableColumns, type LinkTableColData, type LinkTableFormData, LinkTableColumnsSchema, LinkTableSchema } from "@/entities/link";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { columns } from "../../linkParams/model/table-columns";
+import { tableColumns } from "../model/table-columns";
+import { LinkTableDialog } from "./link-table-dialog";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { getUserInfo } from "../../../../../../packages/common/components/src/api";
+import { AUTH_USER_ID } from "@/shared/config";
+import { getCookie } from "@common/components";
+import { useAlertStore } from "@/shared/lib/use-alert-store";
+import { useConfirm } from "@frontend-opensource/use-react-hooks";
+import { ConfirmDialog } from "@/shared/ui/confirm-dialog";
+import { FormItem, FormControl, FormField, Form } from "@/shared/ui/form";
+import { useDataTable } from "@/shared/lib";
+
+function LinkTablePage() {
+    const queryClient = useQueryClient();
+
+    const userUniqId = getCookie(AUTH_USER_ID) ?? "";
+
+    const [linkSn, setLinkSn] = useState<string>('');
+    const [linkNm, setLinkNm] = useState<string>('');
+
+    const [linkSearchParam, setLinkSearchParam] = useState<LinkSearchParam>({
+        linkSn: '',
+        linkNm: ''
+    });
+
+    const [selectedTableInfo, setSelectedTableInfo] = useState<LinkTable | null>(null);
+    const [tableColList, setTableColList] = useState<LinkTableColumns[]>([]);
+    const [dialogOpen, setDialogOpen] = useState<boolean>(false);
+    const [selectedColIds, setSelectedColIds] = useState<string[]>([]);
+
+    const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
+
+    const [pagination, setPagination] = useState<PaginationState>({
+        pageIndex: 0,
+        pageSize: 100,
+    });
+
+    const { setMessage: alert } = useAlertStore((state) => state);
+
+    const { confirm } = useConfirm();
+    const [onConfirm, setOnConfirm] = useState<boolean>(false);
+
+    const handleConfirm = async (callback: () => Promise<void>) => {
+        setOnConfirm(true);
+        await callback();
+        setOnConfirm(false);
+    };
+
+    const query = useQuery({
+        queryKey: [`${process.env.NEXT_PUBLIC_LINK_BACKEND_API_HOST}/getLinkList`, linkSearchParam],
+        queryFn: () => LinkApi.getLinkList({
+            ...linkSearchParam,
+            page: pagination.pageIndex,
+            size: pagination.pageSize,
+        }),
+    });
+
+    const { mutateAsync: insertLinkTableCol } = useMutation({
+        mutationFn: async (data: LinkTableColData) => await LinkApi.insertLinkTableCol({
+            ...data,
+            mdfr: userUniqId,
+        }),
+        onSuccess: async () => {
+            if (selectedTableInfo) {
+                await queryClient.invalidateQueries({
+                    queryKey: [`${process.env.NEXT_PUBLIC_LINK_BACKEND_API_HOST}/getLinkTableInfo`]
+                });
+                await queryClient.invalidateQueries({
+                    queryKey: [`${process.env.NEXT_PUBLIC_LINK_BACKEND_API_HOST}/getLinkTableColList`]
+                });
+
+                const tableData = await LinkApi.getLinkTableInfo(selectedTableInfo.link_sn);
+                const tableColList = await LinkApi.getLinkTableColList(selectedTableInfo.link_sn);
+
+                setSelectedTableInfo(tableData);
+                setTableColList(tableColList.content);
+                setSelectedColIds([]);
+                setDialogOpen(false);
+                alert('저장되었습니다.');
+            }
+        }
+    });
+
+    const { mutateAsync: updateLinkTableCol } = useMutation({
+        mutationFn: async (data: LinkTableColData) => await LinkApi.updateLinkTableCol({
+            ...data,
+            mdfr: userUniqId,
+        }),
+        onSuccess: async () => {
+            if (selectedTableInfo) {
+                await queryClient.invalidateQueries({
+                    queryKey: [`${process.env.NEXT_PUBLIC_LINK_BACKEND_API_HOST}/getLinkTableInfo`]
+                });
+                await queryClient.invalidateQueries({
+                    queryKey: [`${process.env.NEXT_PUBLIC_LINK_BACKEND_API_HOST}/getLinkTableColList`]
+                });
+
+                const tableData = await LinkApi.getLinkTableInfo(selectedTableInfo.link_sn);
+                const tableColList = await LinkApi.getLinkTableColList(selectedTableInfo.link_sn);
+
+                setSelectedTableInfo(tableData);
+                setTableColList(tableColList.content);
+                setSelectedColIds([]);
+                setDialogOpen(false);
+                alert('수정되었습니다.');
+            }
+        }
+    });
+
+    const { mutateAsync: deleteLinkTableCol } = useMutation({
+        mutationFn: async (data: string[]) => await LinkApi.deleteLinkTableCol(data),
+        onSuccess: async () => {
+            if (selectedTableInfo) {
+                await queryClient.invalidateQueries({
+                    queryKey: [`${process.env.NEXT_PUBLIC_LINK_BACKEND_API_HOST}/getLinkTableInfo`]
+                });
+                await queryClient.invalidateQueries({
+                    queryKey: [`${process.env.NEXT_PUBLIC_LINK_BACKEND_API_HOST}/getLinkTableColList`]
+                });
+
+                const tableData = await LinkApi.getLinkTableInfo(selectedTableInfo.link_sn);
+                const tableColList = await LinkApi.getLinkTableColList(selectedTableInfo.link_sn);
+
+                setSelectedTableInfo(tableData);
+                setTableColList(tableColList.content);
+                setSelectedColIds([]);
+                setDialogOpen(false);
+                alert('삭제되었습니다.');
+            }
+        }
+    });
+
+    const { mutateAsync: insertLinkTableInfo } = useMutation({
+        mutationFn: async (data: LinkTableFormData) => await LinkApi.insertLinkTableInfo(data),
+        onSuccess: async () => {
+            if (selectedTableInfo) {
+                await queryClient.invalidateQueries({
+                    queryKey: [`${process.env.NEXT_PUBLIC_LINK_BACKEND_API_HOST}/getLinkTableInfo`]
+                });
+                await queryClient.invalidateQueries({
+                    queryKey: [`${process.env.NEXT_PUBLIC_LINK_BACKEND_API_HOST}/getLinkTableColList`]
+                });
+
+                const tableData = await LinkApi.getLinkTableInfo(selectedTableInfo.link_sn);
+                const tableColList = await LinkApi.getLinkTableColList(selectedTableInfo.link_sn);
+
+                tableForm.reset({
+                    link_sn: tableData.link_sn,
+                    link_nm: tableData.link_nm,
+                    tbl_sn: tableData.tbl_sn ?? "",
+                    sou_tbl_nm: tableData.sou_tbl_nm ?? "",
+                    sou_tbl_korn_nm: tableData.sou_tbl_korn_nm ?? "",
+                    sou_tbl_expln: tableData.sou_tbl_expln ?? "",
+                    trsf_tbl_expln: tableData.trsf_tbl_expln ?? "",
+                    trsf_tbl_nm: tableData.trsf_tbl_nm ?? "",
+                    trsf_tbl_korn_nm: tableData.trsf_tbl_korn_nm ?? "",
+                });
+                setSelectedTableInfo(tableData);
+                setTableColList(tableColList.content);
+                setSelectedColIds([]);
+                alert('저장되었습니다.');
+            }
+        }
+    });
+
+    const { mutateAsync: updateLinkTableInfo } = useMutation({
+        mutationFn: async (data: LinkTableFormData) => await LinkApi.updateLinkTableInfo(data),
+        onSuccess: async () => {
+            if (selectedTableInfo) {
+                await queryClient.invalidateQueries({
+                    queryKey: [`${process.env.NEXT_PUBLIC_LINK_BACKEND_API_HOST}/getLinkTableInfo`]
+                });
+                await queryClient.invalidateQueries({
+                    queryKey: [`${process.env.NEXT_PUBLIC_LINK_BACKEND_API_HOST}/getLinkTableColList`]
+                });
+                
+                const tableData = await LinkApi.getLinkTableInfo(selectedTableInfo.link_sn);
+                const tableColList = await LinkApi.getLinkTableColList(selectedTableInfo.link_sn);
+
+                setSelectedTableInfo(tableData);
+                setTableColList(tableColList.content);
+                setSelectedColIds([]);
+                alert('수정되었습니다.');
+            }
+        }
+    });
+
+    const tableCol = useMemo(
+        () =>
+            tableColumns({ selectedColIds, setSelectedColIds }),
+        [selectedColIds]
+    );
+
+    const colTable = useReactTable({
+        data: tableColList,
+        columns: tableCol,
+        getCoreRowModel: getCoreRowModel(),
+    });
+
+    const form = useForm<LinkTableColData>({
+        resolver: zodResolver(LinkTableColumnsSchema),
+        defaultValues: {
+            pk_yn: "N"
+        }
+    });
+
+    const tableForm = useForm<LinkTableFormData>({
+        resolver: zodResolver(LinkTableSchema),
+        defaultValues: {},
+    });
+
+    const handleResetSearchParam = async () => {
+        setSelectedTableInfo(null);
+        setTableColList([]);
+        setLinkSn('');
+        setLinkNm('');
+        setLinkSearchParam({
+            ...linkSearchParam,
+            linkSn: '',
+            linkNm: '',
+        });
+    };
+
+    const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+        e.preventDefault();
+        setSelectedTableInfo(null);
+        setTableColList([]);
+
+        setLinkSearchParam({
+            ...linkSearchParam,
+            linkSn,
+            linkNm
+        });
+    };
+
+    const handleRowClick = async (data: Link) => {
+        const tableData = await LinkApi.getLinkTableInfo(data.link_sn);
+        const tableColList = await LinkApi.getLinkTableColList(data.link_sn);
+
+        setSelectedTableInfo(tableData);
+        setTableColList(tableColList.content);
+        setSelectedColIds([]);
+
+        tableForm.reset({
+            link_sn: tableData.link_sn,
+            link_nm: tableData.link_nm,
+            tbl_sn: tableData.tbl_sn ?? "",
+            sou_tbl_nm: tableData.sou_tbl_nm ?? "",
+            sou_tbl_korn_nm: tableData.sou_tbl_korn_nm ?? "",
+            sou_tbl_expln: tableData.sou_tbl_expln ?? "",
+            trsf_tbl_expln: tableData.trsf_tbl_expln ?? "",
+            trsf_tbl_nm: tableData.trsf_tbl_nm ?? "",
+            trsf_tbl_korn_nm: tableData.trsf_tbl_korn_nm ?? "",
+        });
+    };
+
+    const handleColumnRowClick = async (data: LinkTableColumns) => {
+        const colInfo = await LinkApi.getLinkTableColInfo({ colSn: data.col_sn, tblSn: data.tbl_sn });
+
+        if (colInfo) {
+            let newData = { ...colInfo };
+
+            if (colInfo.mdfr) {
+                const userName = await fetchUserInfo();
+                newData = {
+                    ...colInfo,
+                    mdfr: userName,
+                };
+            }
+
+            form.reset(newData);
+
+        }
+        setDialogOpen(true)
+    };
+
+    const fetchUserInfo = async () => {
+        const userData = await getUserInfo();
+        return userData.userName;
+    };
+
+    const handleDeleteParam = async () => {
+        if (selectedColIds.length === 0) {
+            alert('삭제할 컬럼을 선택해 주세요.');
+        } else {
+            await handleConfirm(async () => {
+                if (await confirm('선택한 컬럼 정보를 삭제하시겠습니까?')) {
+                    deleteLinkTableCol(selectedColIds);
+                }
+            });
+        }
+    };
+
+    const handleTableSubmit = async (data: LinkTableFormData) => {
+        const regTblInfo = await LinkApi.countLinkTblNm(data.trsf_tbl_nm);
+        const confirmMsg = (regTblInfo.count > 0 && data.trsf_tbl_nm !== selectedTableInfo?.trsf_tbl_nm) ? `이미 사용중인 테이블 명입니다. 해당 테이블 명으로 ${!data.tbl_sn ? '저장' : '수정'}하시겠습니까?` : `${!data.tbl_sn ? '저장' : '수정'}하시겠습니까?`;
+        if (!data.tbl_sn) {
+            await handleConfirm(async () => {
+                if (await confirm(confirmMsg)) {
+                    insertLinkTableInfo({
+                        ...data,
+                        mdfr: userUniqId,
+                        tbl_sn: (regTblInfo.count > 0) ? regTblInfo.tbl_sn : "",
+                    });
+                }
+            });
+        } else {
+            await handleConfirm(async () => {
+                if (await confirm(confirmMsg)) {
+                    updateLinkTableInfo({
+                        ...data,
+                        tbl_sn: (regTblInfo.count > 0) ? regTblInfo.tbl_sn : "",
+                        mdfr: userUniqId,
+                    });
+                }
+            });
+        }
+
+    };
+
+    const { tableComponent } = useDataTable({
+        query,
+        tableOptions: {
+            columns,
+            state: {
+                pagination,
+                rowSelection,
+            },
+            manualPagination: true,
+            enableMultiRowSelection: true,
+            getCoreRowModel: getCoreRowModel(),
+            onPaginationChange: setPagination,
+            onRowSelectionChange: setRowSelection,
+        },
+        dataTableOptions: {
+            onRowClick: handleRowClick,
+            viewPagination: true,
+        },
+    });
+
+    return (
+        <div className="card card-border !mt-6">
+            <div className="card card-border">
+                <form className="flex items-center gap-2 p-2" onSubmit={handleSubmit}>
+                    <Label htmlFor="liSnSearchInput" className="mr-2 text-label">
+                        일련번호
+                    </Label>
+                    <Input
+                        className="h-[3.2rem] w-[24rem] rounded-sm !text-[1.3rem] mr-4"
+                        id="liSnSearchInput"
+                        value={linkSn}
+                        onChange={(e) => setLinkSn(e.target.value)}
+                        autoComplete="off"
+                    />
+                    <Label htmlFor="liNmSearchInput" className="mr-2 text-label">
+                        연계 명
+                    </Label>
+                    <Input
+                        className="h-[3.2rem] w-[24rem] rounded-sm !text-[1.3rem] mr-2"
+                        id="liNmSearchInput"
+                        value={linkNm}
+                        onChange={(e) => setLinkNm(e.target.value)}
+                        autoComplete="off"
+                    />
+                    <Button color="green" className="h-[3.2rem]" type="button" onClick={handleResetSearchParam}>
+                        초기화
+                    </Button>
+                    <Button className="h-[3.2rem]" type="submit">
+                        조회
+                    </Button>
+                </form>
+            </div>
+            <div className="card !mb-0 flex h-[calc(100vh-28rem)] gap-5 !p-0">
+                <div className="card card-border w-1/2 !mx-0 flex flex-col">
+                    <div className="card-header">
+                        <h3 className="text-2xl font-medium text-label">연계 목록</h3>
+                    </div>
+                    <div className="card !m-[1.2rem] overflow-auto !p-0 h-full">
+                        {!query.isLoading ?
+                            <div>{tableComponent}</div>
+                            :
+                            <div className="[data-theme='black']:bg-transparent rounded-lg p-10 flex justify-center items-center h-full">
+                                <div className="relative size-[5rem]">
+                                    <LoadingWithAnimation color="primary" />
+                                </div>
+                            </div>
+                        }
+                    </div>
+                </div>
+                <div className="card card-border w-1/2 !mx-0 flex flex-col">
+                    <div className="card-header">
+                        <h3 className="text-2xl font-medium text-label">연계 테이블 정보</h3>
+                    </div>
+                    <div className="card !m-[1.2rem] !p-0 h-full overflow-auto flex flex-col">
+                        <Form {...tableForm}>
+                            <form onSubmit={tableForm.handleSubmit(handleTableSubmit)}>
+                                {selectedTableInfo &&
+                                    <div className="flex justify-end mb-2">
+                                        <Button className="h-[3.2rem]" type="submit" color={selectedTableInfo.tbl_sn ? "green" : "primary"}>
+                                            {selectedTableInfo.tbl_sn ? "수정" : "저장"}
+                                        </Button>
+                                    </div>
+                                }
+                                <Table variant="secondary" className="flex-none">
+                                    <colgroup>
+                                        <col width="20%" />
+                                        <col width="80%" />
+                                    </colgroup>
+                                    <TableBody>
+                                        <TableRow>
+                                            <TableHead>연계 일련번호</TableHead>
+                                            <TableCell className="!p-2">
+                                                {selectedTableInfo ?
+                                                    <FormField
+                                                        control={tableForm.control}
+                                                        name="link_sn"
+                                                        render={({ field }) => (
+                                                            <FormItem>
+                                                                <FormControl>
+                                                                    <Input
+                                                                        {...field}
+                                                                        value={field.value ?? ""}
+                                                                        className="!text-[1.3rem] w-[400px]"
+                                                                        disabled
+                                                                    />
+                                                                </FormControl>
+                                                            </FormItem>
+                                                        )}
+                                                    />
+                                                    :
+                                                    <span className="px-2 py-[1.2rem]">-</span>
+                                                }
+                                            </TableCell>
+                                        </TableRow>
+                                        <TableRow>
+                                            <TableHead>연계 명</TableHead>
+                                            <TableCell className="!p-2">
+                                                {selectedTableInfo ?
+                                                    <FormField
+                                                        control={tableForm.control}
+                                                        name="link_nm"
+                                                        render={({ field }) => (
+                                                            <FormItem>
+                                                                <FormControl>
+                                                                    <Input
+                                                                        {...field}
+                                                                        value={field.value ?? ""}
+                                                                        className="!text-[1.3rem] w-[400px]"
+                                                                        disabled
+                                                                    />
+                                                                </FormControl>
+                                                            </FormItem>
+                                                        )}
+                                                    />
+                                                    :
+                                                    <span className="px-2 py-[1.2rem]">-</span>
+                                                }
+                                            </TableCell>
+                                        </TableRow>
+                                        <TableRow>
+                                            <TableHead>원천 테이블 명</TableHead>
+                                            <TableCell className="!p-2">
+                                                {selectedTableInfo ?
+                                                    <FormField
+                                                        control={tableForm.control}
+                                                        name="sou_tbl_nm"
+                                                        render={({ field }) => (
+                                                            <FormItem>
+                                                                <FormControl>
+                                                                    <Input
+                                                                        {...field}
+                                                                        value={field.value ?? ""}
+                                                                        className="!text-[1.3rem] w-[400px]"
+                                                                        placeholder={!field.value ? "-" : ""}
+                                                                        autoComplete="off"
+                                                                    />
+                                                                </FormControl>
+                                                                {tableForm.formState.errors.sou_tbl_nm && (
+                                                                    <p className="text-red-500 text-base pt-2">
+                                                                        {tableForm.formState.errors.sou_tbl_nm.message}
+                                                                    </p>
+                                                                )}
+                                                            </FormItem>
+                                                        )}
+                                                    />
+                                                    :
+                                                    <span className="px-2 py-[1.2rem]">-</span>
+                                                }
+                                            </TableCell>
+                                        </TableRow>
+                                        <TableRow>
+                                            <TableHead>원천 테이블 한글명</TableHead>
+                                            <TableCell className="!p-2">
+                                                {selectedTableInfo ?
+                                                    <FormField
+                                                        control={tableForm.control}
+                                                        name="sou_tbl_korn_nm"
+                                                        render={({ field }) => (
+                                                            <FormItem>
+                                                                <FormControl>
+                                                                    <Input
+                                                                        {...field}
+                                                                        value={field.value ?? ""}
+                                                                        className="!text-[1.3rem] w-[400px]"
+                                                                        placeholder={!field.value ? "-" : ""}
+                                                                        autoComplete="off"
+                                                                    />
+                                                                </FormControl>
+                                                                {tableForm.formState.errors.sou_tbl_korn_nm && (
+                                                                    <p className="text-red-500 text-base pt-2">
+                                                                        {tableForm.formState.errors.sou_tbl_korn_nm.message}
+                                                                    </p>
+                                                                )}
+                                                            </FormItem>
+                                                        )}
+                                                    />
+                                                    :
+                                                    <span className="px-2 py-[1.2rem]">-</span>
+                                                }
+                                            </TableCell>
+                                        </TableRow>
+                                        <TableRow>
+                                            <TableHead>원천 테이블 설명</TableHead>
+                                            <TableCell className="!p-2">
+                                                {selectedTableInfo ?
+                                                    <FormField
+                                                        control={tableForm.control}
+                                                        name="sou_tbl_expln"
+                                                        render={({ field }) => (
+                                                            <FormItem>
+                                                                <FormControl>
+                                                                    <Input
+                                                                        {...field}
+                                                                        value={field.value ?? ""}
+                                                                        className="!text-[1.3rem] w-[400px]"
+                                                                        placeholder={!field.value ? "-" : ""}
+                                                                        autoComplete="off"
+                                                                    />
+                                                                </FormControl>
+                                                                {tableForm.formState.errors.sou_tbl_expln && (
+                                                                    <p className="text-red-500 text-base pt-2">
+                                                                        {tableForm.formState.errors.sou_tbl_expln.message}
+                                                                    </p>
+                                                                )}
+                                                            </FormItem>
+                                                        )}
+                                                    />
+                                                    :
+                                                    <span className="px-2 py-[1.2rem]">-</span>
+                                                }
+                                            </TableCell>
+                                        </TableRow>
+                                        <TableRow>
+                                            <TableHead>* 변환 테이블 명</TableHead>
+                                            <TableCell className="!p-2">
+                                                {selectedTableInfo ?
+                                                    <FormField
+                                                        control={tableForm.control}
+                                                        name="trsf_tbl_nm"
+                                                        render={({ field }) => (
+                                                            <FormItem>
+                                                                <FormControl>
+                                                                    <Input
+                                                                        {...field}
+                                                                        value={field.value ?? ""}
+                                                                        className="!text-[1.3rem] w-[400px]"
+                                                                        placeholder={!field.value ? "-" : ""}
+                                                                        autoComplete="off"
+                                                                    />
+                                                                </FormControl>
+                                                                {tableForm.formState.errors.trsf_tbl_nm && (
+                                                                    <p className="text-red-500 text-base pt-2">
+                                                                        {tableForm.formState.errors.trsf_tbl_nm.message}
+                                                                    </p>
+                                                                )}
+                                                            </FormItem>
+                                                        )}
+                                                    />
+                                                    :
+                                                    <span className="px-2 py-[1.2rem]">-</span>
+                                                }
+                                            </TableCell>
+                                        </TableRow>
+                                        <TableRow>
+                                            <TableHead>* 변환 테이블 한글명</TableHead>
+                                            <TableCell className="!p-2">
+                                                {selectedTableInfo ?
+                                                    <FormField
+                                                        control={tableForm.control}
+                                                        name="trsf_tbl_korn_nm"
+                                                        render={({ field }) => (
+                                                            <FormItem>
+                                                                <FormControl>
+                                                                    <Input
+                                                                        {...field}
+                                                                        value={field.value ?? ""}
+                                                                        className="!text-[1.3rem] w-[400px]"
+                                                                        placeholder={!field.value ? "-" : ""}
+                                                                        autoComplete="off"
+                                                                    />
+                                                                </FormControl>
+                                                                {tableForm.formState.errors.trsf_tbl_korn_nm && (
+                                                                    <p className="text-red-500 text-base pt-2">
+                                                                        {tableForm.formState.errors.trsf_tbl_korn_nm.message}
+                                                                    </p>
+                                                                )}
+                                                            </FormItem>
+                                                        )}
+                                                    />
+                                                    :
+                                                    <span className="px-2 py-[1.2rem]">-</span>
+                                                }
+                                            </TableCell>
+                                        </TableRow>
+                                        <TableRow>
+                                            <TableHead>변환 테이블 설명</TableHead>
+                                            <TableCell className="!p-2">
+                                                {selectedTableInfo ?
+                                                    <FormField
+                                                        control={tableForm.control}
+                                                        name="trsf_tbl_expln"
+                                                        render={({ field }) => (
+                                                            <FormItem>
+                                                                <FormControl>
+                                                                    <Input
+                                                                        {...field}
+                                                                        value={field.value ?? ""}
+                                                                        className="!text-[1.3rem] w-[400px]"
+                                                                        placeholder={!field.value ? "-" : ""}
+                                                                        autoComplete="off"
+                                                                    />
+                                                                </FormControl>
+                                                                {tableForm.formState.errors.trsf_tbl_expln && (
+                                                                    <p className="text-red-500 text-base pt-2">
+                                                                        {tableForm.formState.errors.trsf_tbl_expln.message}
+                                                                    </p>
+                                                                )}
+                                                            </FormItem>
+                                                        )}
+                                                    />
+                                                    :
+                                                    <span className="px-2 py-[1.2rem]">-</span>
+                                                }
+                                            </TableCell>
+                                        </TableRow>
+                                    </TableBody>
+                                </Table>
+                            </form>
+                        </Form>
+                        {selectedTableInfo ?
+                            <>
+                                <div className="mb-2 mt-14 flex justify-end items-center flex-none">
+                                    {tableColList.length > 0 &&
+                                        <Button color="red" className="h-[3.2rem] mr-2" type="button" onClick={handleDeleteParam}>
+                                            행 삭제
+                                        </Button>
+                                    }
+                                    {selectedTableInfo.tbl_sn &&
+                                        <LinkTableDialog dialogOpen={dialogOpen} onOpenChange={setDialogOpen} form={form} tableInfo={selectedTableInfo} insertLinkTableCol={insertLinkTableCol} updateLinkTableCol={updateLinkTableCol} />
+                                    }
+                                </div>
+                                {selectedTableInfo.tbl_sn ?
+                                    (tableColList.length > 0 ?
+                                        <div className="flex-1 overflow-auto min-h-[300px]">
+                                            <DataTable table={colTable} onRowClick={handleColumnRowClick} />
+                                        </div>
+                                        :
+                                        <div className="flex items-center justify-center h-20 text-gray-500 text-3xl">
+                                            등록된 테이블 컬럼이 없습니다.
+                                        </div>)
+                                    :
+                                    <div className="flex items-center justify-center h-20 text-gray-500 text-3xl">
+                                        테이블 정보를 등록해주세요.
+                                    </div>
+                                }
+                            </>
+                            :
+                            <div className="flex items-center justify-center text-gray-500 text-3xl mt-14 flex-1">
+                                연계 데이터를 선택해주세요.
+                            </div>
+                        }
+                    </div>
+                </div>
+            </div>
+            <ConfirmDialog isOpen={onConfirm} />
+        </div >
+    )
+};
+
+export { LinkTablePage };

apps/dm/.env.development

@@ -0,0 +1,19 @@
+NEXT_PUBLIC_SITE_ID = DM
+NEXT_PUBLIC_PORT = 3000
+NEXT_PUBLIC_PROXY_HOST = http://localhost:3000
+NEXT_PUBLIC_SERVER_API_URL = http://con.mind-one.co.kr:11080/api/v1
+NEXT_PUBLIC_FO_SERVER_API_URL = http://con.mind-one.co.kr:11082/api/v1
+NEXT_PUBLIC_CS_SERVER_API_URL = http://dev.onasys.co.kr:8000
+NEXT_PUBLIC_CS_TUS_UPLOAD = /attach-service/api/v1/tus/upload
+NEXT_PUBLIC_CLAIM_NAME = Authorization
+NEXT_PUBLIC_AUTH_USER_ID = token-id
+NEXT_PUBLIC_ACCESS_TOKEN = access-token
+NEXT_PUBLIC_REFRESH_TOKEN = refresh-token
+
+
+
+NEXT_PUBLIC_SEWERAGE_API_URL=http://con.mind-one.co.kr:11083/sewerage-service/api   # 개발 서버 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          # 박이정
+
+

apps/dm/.env.local

@@ -0,0 +1,19 @@
+NEXT_PUBLIC_SITE_ID = DM
+NEXT_PUBLIC_CLAIM_NAME = Authorization
+NEXT_PUBLIC_AUTH_USER_ID = token-id
+NEXT_PUBLIC_ACCESS_TOKEN = access-token
+NEXT_PUBLIC_REFRESH_TOKEN = refresh-token
+NEXT_PUBLIC_PORT = 11035
+#NEXT_PUBLIC_PROXY_HOST = http://con.mind-one.co.kr:11035
+NEXT_PUBLIC_PROXY_HOST = http://localhost:3000/
+NEXT_PUBLIC_SERVER_API_URL = http://con.mind-one.co.kr:11080/api/v1
+NEXT_PUBLIC_FO_SERVER_API_URL = http://con.mind-one.co.kr:11082/api/v1
+NEXT_PUBLIC_CS_SERVER_API_URL = http://dev.onasys.co.kr:8000
+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_SEWERAGE_API_URL=http://con.mind-one.co.kr:11083/sewerage-service/api   # 개발 서버 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          # 박이정
+
+

apps/dm/.env.production

@@ -0,0 +1,17 @@
+NEXT_PUBLIC_SITE_ID = DM
+NEXT_PUBLIC_PORT = 11035
+NEXT_PUBLIC_PROXY_HOST = http://con.mind-one.co.kr:11035
+NEXT_PUBLIC_SERVER_API_URL = http://apigateway.iipbs-dev.svc.cluster.local:8000/api/v1
+NEXT_PUBLIC_FO_SERVER_API_URL = http://apigateway.iipbs-dev.svc.cluster.local:8000/operation-service/api/v1
+NEXT_PUBLIC_CS_SERVER_API_URL = http://apigateway.iipbs-dev.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_CLAIM_NAME = Authorization
+NEXT_PUBLIC_AUTH_USER_ID = token-id
+NEXT_PUBLIC_ACCESS_TOKEN = access-token
+NEXT_PUBLIC_REFRESH_TOKEN = refresh-token
+
+NEXT_PUBLIC_SEWERAGE_API_URL = http://apigateway.iipbs-dev.svc.cluster.local:8000/sewerage-service/api
+
+

apps/dm/.gitignore

@@ -0,0 +1,39 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

apps/dm/app/(base-layout)/layout.tsx

@@ -0,0 +1,16 @@
+"use client";
+import Base from "../base";
+import "../globals.css";
+import { StoreProvider } from "../store";
+
+export default function BaseLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <StoreProvider>
+      <Base>{children}</Base>
+    </StoreProvider>
+  );
+}

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

@@ -0,0 +1,205 @@
+"use client"
+import { Table, TableBody, TableCell, TableRow } from '@common/components/ui/table';
+
+import { useDmStore } from '@/app/store';
+import { ContentsDiv, Title, UiModal, UiTable } from '@common/business_components/ui';
+import ListDiv from '@common/business_components/ui/list_div';
+import { useEffect, useState } from 'react';
+import { Toaster } from 'react-hot-toast';
+import SdmLogin from '../sdmLogin/page';
+import type { DemandCompType } from '@/app/store/sdmMng';
+import TransValueFormat from '@/app/common/transValueFormat';
+import { useRouter } from 'next/navigation';
+
+const TABLE_STYLES = {
+  header: "text-center border border-[var(--border)] bg-[rgb(234,243,251)] text-[rgb(100,119,132)] whitespace-pre-line",
+  cell: "text-right whitespace-pre-line",
+  fullWidth: "text-center border border-[var(--border)] bg-[rgb(234,243,251)] text-[rgb(100,119,132)] whitespace-pre-line",
+  table: "fixed w-full"
+} as const;
+
+type SdmApplyProps = {
+  sdmNo : string;
+}
+
+export default function SdmApplyList({}: SdmApplyProps) {
+
+  const router = useRouter();
+  
+  const {getSdmInfoStatusList, Sdm, Common} = useDmStore((state) => state);
+  const {successLogin, sdmInfoStatusList, upHeadSdmInfoStatus} = Sdm;
+  const {selectSidoData, selectSigunData} = Common;
+  const [isLogin, setIsLogin] = useState(false);
+  const [isLoginStorageInfo, setIsLoginStorageInfo] = useState(false);
+  const [sdmApplyDetail, setSdmApplyDetail] = useState<DemandCompType>({} as DemandCompType);
+  const [transformedList, setTransformedList] = useState<DemandCompType[]>([]);
+
+  useEffect(() => {
+    console.log('sessionStorage : ',sessionStorage.getItem('user'));
+    const user = sessionStorage.getItem('user');
+    if (user) {
+      setIsLoginStorageInfo(true);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (successLogin || isLoginStorageInfo) {
+      setIsLogin(true);
+      const user = sessionStorage.getItem('user');
+      if (user) {
+        try {
+          const userData = JSON.parse(user);
+          getSdmInfoStatusList(userData.dmdInfoId);
+        } catch (error) {
+          console.error('Error parsing user data:', error);
+        }
+      }
+    }
+  }, [successLogin, getSdmInfoStatusList, isLoginStorageInfo]);
+
+  // 데이터 변환을 위한 별도의 useEffect
+  useEffect(() => {
+    if (sdmInfoStatusList.length > 0) {
+      const newTransformedList = sdmInfoStatusList.map((item: DemandCompType) => ({
+        ...item,
+        ctpvCd: selectSidoData.find(sido => sido.val === item.ctpvCd?.trim())?.text || '',
+        sggCd: selectSigunData.find(sigun => sigun.val === item.sggCd?.trim())?.text || ''
+      }));
+      setTransformedList(newTransformedList);
+    }
+  }, [sdmInfoStatusList, selectSidoData, selectSigunData]);
+
+  const onClickSdmStatus = (index: number | undefined) => {
+    if (index !== undefined) {
+      const selectedStatus = transformedList[index];
+      if (selectedStatus) {
+        setSdmApplyDetail(selectedStatus);
+      }
+    }
+  }
+
+  return (
+    <>
+      <Title title="수요신청현황" />
+      <ContentsDiv>
+        <ListDiv>
+          <div className="overflow-y-scroll h-[250px]">
+            <div className="h-[110%] w-[99%]">
+              <UiTable
+                headName='수요정보 신청현황'
+                tableData={transformedList} 
+                headlist={upHeadSdmInfoStatus} 
+                pageSize={0} 
+                total={0} 
+                cellClick={(index) => onClickSdmStatus(index)} 
+                onPageChange={() => {}}
+              />
+            </div>
+          </div>
+        </ListDiv>
+        <ListDiv>
+          <div className="card-header">
+            <h3 className="text-2xl font-medium text-label">수요신청 상세현황</h3>
+          </div>
+          <div className={`card !m-[1.2rem] !p-0r`}>
+            <Table variant="secondary" style={{ tableLayout: 'fixed', width: '100%' }}>
+              <TableBody>
+                <TableRow>
+                  <TableCell colSpan={1} className={TABLE_STYLES.header}>요구시기</TableCell>
+                  <TableCell colSpan={2} className={TABLE_STYLES.cell}>{sdmApplyDetail?.dmndTmng?.toString()}</TableCell>
+                  <TableCell colSpan={1} className={TABLE_STYLES.header}>요구수량(m³/일)</TableCell>
+                  <TableCell colSpan={2} className={TABLE_STYLES.cell}>{<TransValueFormat value={sdmApplyDetail?.dmndQty} format="number"/>}</TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell colSpan={1} className={TABLE_STYLES.header}>사용용도</TableCell>
+                  <TableCell colSpan={2} className={TABLE_STYLES.cell}>{sdmApplyDetail?.useUsgCd}</TableCell>
+                  <TableCell colSpan={1} className={TABLE_STYLES.header}>희망단가(원/m³)</TableCell>
+                  <TableCell colSpan={2} className={TABLE_STYLES.cell}>{<TransValueFormat value={sdmApplyDetail?.wntUntprc} format="number"/>}</TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell colSpan={6} className={TABLE_STYLES.fullWidth}>요구수량</TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell colSpan={1} className={TABLE_STYLES.header}>총대장균군수(개/100ml)</TableCell>
+                  <TableCell colSpan={1} className={TABLE_STYLES.cell}>{<TransValueFormat value={sdmApplyDetail?.grssClfg} format="number"/>}</TableCell>
+                  <TableCell colSpan={1} className={TABLE_STYLES.header}>결합잔류염소(mg/L)​</TableCell>
+                  <TableCell colSpan={1} className={TABLE_STYLES.cell}>{<TransValueFormat value={sdmApplyDetail?.combResdch} format="number"/>}</TableCell>
+                  <TableCell colSpan={1} className={TABLE_STYLES.header}>탁도(NTU)</TableCell>
+                  <TableCell colSpan={1} className={TABLE_STYLES.cell}>{<TransValueFormat value={sdmApplyDetail?.trbt} format="number"/>}</TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell colSpan={1} className={TABLE_STYLES.header}>생물학적 산소요구량(BOD)(mg/L)</TableCell>
+                  <TableCell colSpan={1} className={TABLE_STYLES.cell}>{<TransValueFormat value={sdmApplyDetail?.blgcOxygDmndQnt} format="number"/>}</TableCell>
+                  <TableCell colSpan={1} className={TABLE_STYLES.header}>냄새</TableCell>
+                  <TableCell colSpan={1} className={TABLE_STYLES.cell}>{<TransValueFormat value={sdmApplyDetail?.smll} format="number"/>}</TableCell>
+                  <TableCell colSpan={1} className={TABLE_STYLES.header}>색도(도)</TableCell>
+                  <TableCell colSpan={1} className={TABLE_STYLES.cell}>{<TransValueFormat value={sdmApplyDetail?.crmty} format="number"/>}</TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell colSpan={1} className={TABLE_STYLES.header}>총질소(T-N)(mg/L)</TableCell>
+                  <TableCell colSpan={1} className={TABLE_STYLES.cell}>{<TransValueFormat value={sdmApplyDetail?.tn} format="number"/>}</TableCell>
+                  <TableCell colSpan={1} className={TABLE_STYLES.header}>총인(T-P)(mg/L)​</TableCell>
+                  <TableCell colSpan={1} className={TABLE_STYLES.cell}>{<TransValueFormat value={sdmApplyDetail?.tph} format="number"/>}</TableCell>
+                  <TableCell colSpan={1} className={TABLE_STYLES.header}>수소이온농도(pH)​</TableCell>
+                  <TableCell colSpan={1} className={TABLE_STYLES.cell}>{<TransValueFormat value={sdmApplyDetail?.ph} format="number"/>}</TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell colSpan={1} className={TABLE_STYLES.header}>염화물(mgCL/L)​</TableCell>
+                  <TableCell colSpan={1} className={TABLE_STYLES.cell}>{<TransValueFormat value={sdmApplyDetail?.clIonQnt} format="number"/>}</TableCell>
+                  <TableCell colSpan={1} className={TABLE_STYLES.header}>전기전도도(㎲/cm)​</TableCell>
+                  <TableCell colSpan={1} className={TABLE_STYLES.cell}>{<TransValueFormat value={sdmApplyDetail?.cdtnv} format="number"/>}</TableCell>
+                  <TableCell colSpan={1} className={TABLE_STYLES.header}>비고</TableCell>
+                  <TableCell colSpan={1} className={TABLE_STYLES.cell}>{sdmApplyDetail?.rmrk}</TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell colSpan={6} className={TABLE_STYLES.fullWidth}>공급처 후보지​</TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell colSpan={1} className={TABLE_STYLES.header}>후보지1</TableCell>
+                  <TableCell colSpan={1} className={TABLE_STYLES.cell}></TableCell>
+                  <TableCell colSpan={1} className={TABLE_STYLES.header}>후보지2</TableCell>
+                  <TableCell colSpan={1} className={TABLE_STYLES.cell}></TableCell>
+                  <TableCell colSpan={1} className={TABLE_STYLES.header}>후보지3</TableCell>
+                  <TableCell colSpan={1} className={TABLE_STYLES.cell}></TableCell>
+                </TableRow>
+              </TableBody>
+            </Table>
+          </div>
+        </ListDiv>
+        <ListDiv>
+          <div className="card-header">
+            <h3 className="text-2xl font-medium text-label">수요신청 진행상태</h3>
+          </div>
+          <div className={`card !m-[1.2rem] !p-0r`}>
+            <Table variant="secondary" style={{ tableLayout: 'fixed', width: '100%' }}>
+              <TableBody>
+                <TableRow>
+                  <TableCell colSpan={1} className={TABLE_STYLES.header}>진행상태</TableCell>
+                  <TableCell colSpan={2} className={TABLE_STYLES.cell}>{sdmApplyDetail?.status?.toString()}</TableCell>
+                  <TableCell colSpan={1} className={TABLE_STYLES.header}>공급처매칭결과</TableCell>
+                  <TableCell colSpan={2} className={TABLE_STYLES.cell}></TableCell>
+                </TableRow>
+              </TableBody>
+            </Table>
+          </div>
+        </ListDiv>
+      </ContentsDiv>
+      {!isLogin?
+        <UiModal
+          body={<SdmLogin/>}
+          bodyClass="sm:max-w-[90vw] w-[530px] h-[430px]"
+          open={!isLogin}
+          onOpenChange={(open) => {
+            if(!open){
+              setIsLogin(false)
+              router.push('/');
+            }
+          }}
+          noHeaderYn="Y"
+          noFooterYn="Y"
+        />
+      :null}
+      <Toaster position="top-center" />
+    </>
+  );
+}

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

@@ -0,0 +1,166 @@
+"use client"
+
+import { useDmStore } from '@/app/store';
+import type { MoneyDetailType, SimilarCaseType } from '@/app/store/sdmMng';
+import { SelectBox, Title, UiTable } from '@common/business_components/ui';
+import { HeadMakeColSpan } from '@common/business_components/ui/table/HeadMakeColSpan';
+import { Table, TableBody, TableCell, TableHeader, TableRow } from '@common/components/ui/table';
+import { useEffect, useMemo, useState } from 'react';
+
+type modalType = {
+  sply: number | 0;
+  usageCd: string | '';
+  money: number | 0;
+};
+
+const searchUseTypeList = [
+  { text: '공급량', val: 'S' },
+  { text: '사용용도', val: 'U' },
+];
+
+export default function ModalSimilarPage({ sply = 0, usageCd = '', money = 0 }: modalType) {
+  const { Sdm, getSimilarCaseList } = useDmStore((state) => state);
+  const [searchUseType, setSearchUseType] = useState<{text: string, value: string}>({text: '공급량', value: 'S'});
+  const [moneyDetailList, setMoneyDetailList] = useState<MoneyDetailType[]>([]);
+  const {
+    upHeadSimilarCaseList,
+    similarCaseList,
+    upHeadMoneyDetailList,
+  } = Sdm;
+
+  const rowSpans = useMemo(() => {
+    const spans: { [key: number]: number } = {};
+    let currentValue = '';
+    let currentSpan = 0;
+    let startIndex = 0;
+
+    similarCaseList.forEach((item: SimilarCaseType, index: number) => {
+      if (item.ruseBizNm === currentValue
+        || item.bizBgngDate === currentValue
+        || item.bizEndDate === currentValue
+        || item.reqBizReuseFcltCst === currentValue) {
+        currentSpan++;
+        spans[startIndex] = currentSpan;
+      } else {
+        currentValue = item.ruseBizNm;
+        currentSpan = 1;
+        startIndex = index;
+        spans[index] = 1;
+      }
+    });
+
+    return spans;
+  }, [similarCaseList]);
+
+  const handleCellClick = (index: number) => {
+    setMoneyDetailList([{
+      reqBizGrssCst: similarCaseList[index]?.reqBizGrssCst ?? '',
+      reqBizReuseFcltCst: similarCaseList[index]?.reqBizReuseFcltCst ?? '',
+      reqBizPplCst: similarCaseList[index]?.reqBizPplCst ?? '',
+      reqBizArchCst: similarCaseList[index]?.reqBizArchCst ?? '',
+      reqBizMchnCst: similarCaseList[index]?.reqBizMchnCst ?? '',
+      reqBizMtrngCst: similarCaseList[index]?.reqBizMtrngCst ?? '',
+      reqBizGisCst: similarCaseList[index]?.reqBizGisCst ?? '',
+      reqBizCctvCst: similarCaseList[index]?.reqBizCctvCst ?? '',
+      reqBizCmcnCst: similarCaseList[index]?.reqBizCmcnCst ?? '',
+      reqBizWstCst: similarCaseList[index]?.reqBizWstCst ?? '',
+      reqBizDesignCst: similarCaseList[index]?.reqBizDesignCst ?? '',
+      reqBizSpvsCst: similarCaseList[index]?.reqBizSpvsCst ?? '',
+      reqBizSbsdCst: similarCaseList[index]?.reqBizSbsdCst ?? '',
+      reqBizEtc: similarCaseList[index]?.reqBizEtc ?? '',
+      prcmPlanNlep: similarCaseList[index]?.prcmPlanNlep ?? '',
+      prcmPlanLcep: similarCaseList[index]?.prcmPlanLcep ?? '',
+      prcmPlanBrdnCst: similarCaseList[index]?.prcmPlanBrdnCst ?? '',
+      prcmPlanEcqrRt: similarCaseList[index]?.prcmPlanEcqrRt ?? '',
+      prcmPlanGrssCst: similarCaseList[index]?.prcmPlanGrssCst ?? '',
+      clclnNlep: similarCaseList[index]?.clclnNlep ?? '',
+      clclnLcep: similarCaseList[index]?.clclnLcep ?? '',
+      clclnBrdnCst: similarCaseList[index]?.clclnBrdnCst ?? '',
+      clclnEcqrRt: similarCaseList[index]?.clclnEcqrRt ?? '',
+      clclnGrssCst: similarCaseList[index]?.clclnGrssCst ?? ''
+    }]);
+  }
+
+  useEffect(() => {
+    const type = searchUseType.value;
+    getSimilarCaseList(type, type === 'S' ? sply : type === 'U' ? usageCd : money);
+  }, [getSimilarCaseList, money, searchUseType, sply, usageCd]);
+
+  return (
+    <div className="align-top w-[1360px] overflow-x-auto">
+      <Title title="유사사례 조회" />
+      <div className="overflow-x-auto h-[450px] 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>
+            <SelectBox
+              tabIndex={0}
+              aria-label="검색 기준 선택"
+              selectArray={searchUseTypeList}
+              value={searchUseType.value}
+              onSelectValue={(val) => {
+                setSearchUseType({text: searchUseTypeList.find(item => item.val === val)?.text ?? '', value: val.toString()});
+              }}
+              className="w-[140px] ml-20"
+              label=""
+              selectClass="w-[140px]"
+            />
+          </div>
+          <div className={`card !m-[1.2rem] !p-0r`}>
+            <Table variant="secondary">
+              <TableHeader className="font-bold">
+                <HeadMakeColSpan upHeadList={upHeadSimilarCaseList} />
+              </TableHeader>
+              <TableBody className='text-center'>
+                {similarCaseList.length > 0 ? similarCaseList?.map((el: SimilarCaseType, index) => (
+                  <TableRow key={`similar-case-row-${index}-${el.ruseBizNm}-${el.bizBgngDate}`}>
+                    {upHeadSimilarCaseList.map((head) => (
+                      head.id && head.id.length > 1 && (
+                        <TableCell
+                          tabIndex={head.id === 'someClickableId' ? 0 : undefined}
+                          role="button"
+                          aria-label={`유사사례 ${head.id} 클릭 시 상세 정보 표시`}
+                          className={`${head.align === 'right' ? 'text-right' : head.align === 'center' ? 'text-center' : typeof el[head.id as keyof SimilarCaseType] === 'number' ? 'text-right' : 'text-center'} cursor-pointer`}
+                          key={`similar-case-cell-${head.id}-${index}-${el.ruseBizNm}`}
+                          rowSpan={(head.id === 'businessName' || head.id ==='businessDuration' || head.id === 'money') ? rowSpans[index] : undefined}
+                          style={(head.id === 'businessName' || head.id === 'businessDuration' || head.id === 'money') && index > 0 && similarCaseList[index - 1]?.ruseBizNm === el.ruseBizNm ? { display: 'none' } : undefined}
+                          onClick={() => handleCellClick(index)}
+                          onKeyDown={(e) => {
+                            if (e.key === 'Enter' || e.key === ' ') {
+                              handleCellClick(index);
+                            }
+                          }}
+                        >
+                          {typeof el[head.id as keyof SimilarCaseType] !== 'number' 
+                            ? String(el[head.id as keyof SimilarCaseType] ?? '')
+                            : String(el[head.id as keyof SimilarCaseType]).includes('.') 
+                              ? String(el[head.id as keyof SimilarCaseType]).split('.').map((part, index) => 
+                              index === 0 ? part.replace(/\B(?=(\d{3})+(?!\d))/g, ",") : part
+                            ).join('.')
+                          : String(el[head.id as keyof SimilarCaseType] ?? '').replace(/\B(?=(\d{3})+(?!\d))/g, ",")}
+                        </TableCell>
+                      )
+                    ))}
+                  </TableRow>
+                )) : <></>}
+              </TableBody>
+            </Table>
+          </div>
+        </div>
+      </div>
+      <div className="overflow-x-auto h-[270px] w-full mt-8">
+        <div className="w-[130%]">
+          <UiTable
+            headName={"사업비 상세정보"}
+            tableData={moneyDetailList}
+            headlist={upHeadMoneyDetailList}
+            pageSize={0}
+            total={0}
+            cellClick={undefined}
+            onPageChange={() => {}}
+          />
+        </div>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,275 @@
+"use client";
+
+import { useDmStore } from "@/app/store";
+import type { DemandCompType } from "@/app/store/sdmMng";
+import { SdmInfoRegForm } from "@/components/ui/sdmInfoInsertForm/component";
+import { UiModal } from "@common/business_components/ui/dialog_ui";
+import { Button } from "@common/components/ui";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useRouter, useSearchParams } from "next/navigation";
+import { Suspense, useEffect, useState } from "react";
+import { FormProvider, useForm, type SubmitHandler } from "react-hook-form";
+import { Toaster } from "react-hot-toast";
+import * as z from "zod";
+import SdmLogin from "../sdmLogin/page";
+
+const sdmInfoFormSchema = z.object({
+  sdmNm: z.string()
+    .min(1, "수요처를 선택해주세요"),
+  demandYmd: z.date().optional(),
+  demandQnty: z.string()
+    .min(1, "요구수량을 입력해주세요")
+    .regex(/^[0-9]+$/, "요구수량은 숫자만 입력 가능합니다"),
+  usePurpose: z.string().optional(),
+  money: z.string()
+    .regex(/^[0-9]+$/, "희망단가는 숫자만 입력 가능합니다"),
+  /**요구수질 */
+  reqWaterQlty: z.string().optional(),
+  grssClfg: z.string()
+    .min(1, "총대장균군수를 입력해주세요")
+    .regex(/^[0-9]+$/, "총대장균군수는 숫자만 입력 가능합니다"),
+  tn: z.string()
+    .min(1, "총질소를 입력해주세요")
+    .regex(/^[0-9]+$/, "총질소는 숫자만 입력 가능합니다"),
+  combResdch: z.string()
+    .min(1, "결합잔류염소를  입력해주세요")
+    .regex(/^[0-9]+$/, "결합잔류염소는 숫자만 입력 가능합니다"),
+  tph: z.string()
+    .min(1, "총인산물을 입력해주세요")
+    .regex(/^[0-9]+$/, "총인산물은 숫자만 입력 가능합니다"),
+  trbt: z.string()
+    .min(1, "탁도를 입력해주세요")
+    .regex(/^[0-9]+$/, "탁도는 숫자만 입력 가능합니다"),
+  ph: z.string()
+    .min(1, "수소이온농도를 입력해주세요")
+    .regex(/^[0-9]+$/, "수소이온농도는 숫자만 입력 가능합니다"),
+  bod: z.string()
+    .min(1, "생물학적 산소요구량을 입력해주세요")
+    .regex(/^[0-9]+$/, "생물학적 산소요구량은 숫자만 입력 가능합니다"),
+  /**컬럼확인필요 */
+  clIonQnt: z.string()
+    .min(1, "염화물을 입력해주세요")
+    .regex(/^[0-9]+$/, "염화물은 숫자만 입력 가능합니다"),
+  smll: z.string()
+    .min(1, "냄새를 입력해주세요")
+    .regex(/^[0-9]+$/, "냄새는 숫자만 입력 가능합니다"),
+  cdtnv: z.string()
+    .min(1, "전기전도도를 입력해주세요")
+    .regex(/^[0-9]+$/, "전기전도도는 숫자만 입력 가능합니다"),
+  crmty: z.string()
+    .min(1, "색도를 입력해주세요")
+    .regex(/^[0-9]+$/, "색도는 숫자만 입력 가능합니다"),
+  rmrk: z.string().optional(),
+  /* telno: z.string()
+    .min(8, "전화번호는 8자 이상 입력해주세요")
+    .max(12, "전화번호는 12자 이내로 입력해주세요")
+    .regex(/^[0-9-]+$/, "전화번호는 숫자와 하이픈(-)만 입력 가능합니다"), */
+  candidateTitle: z.array(z.object({
+    ruseUtztnFcltNm: z.string(),
+    ruseUtztnFcltCd: z.string(),
+  })).optional(),
+});
+
+export type FormData = z.infer<typeof sdmInfoFormSchema>;
+
+function SdmInfoInsertContent() {
+  const searchParams = useSearchParams();
+  const {map, insertSdmInfoData, Sdm } = useDmStore((state) => state);
+  const { successLogin } = Sdm;
+  const [ismoneyDisabled, setIsmoneyDisabled] = useState(false);
+  const formSchema = sdmInfoFormSchema;
+
+  const [isLogin, setIsLogin] = useState(false);
+  const [facilityName, setFacilityName] = useState<string>('');
+ const [defaultValues, setDefaultValues] = useState<FormData>({
+    sdmNm: '',
+    demandYmd: new Date(),
+    demandQnty: '',
+    usePurpose: '',
+    money: '',
+    /**요구수질 */
+    reqWaterQlty: '',
+    grssClfg: '',
+    tn: '',
+    combResdch: '',
+    tph: '',
+    trbt: '',
+    ph: '',
+    bod: '',
+    /**컬럼확인필요 */
+    clIonQnt: '',
+    smll: '',
+    cdtnv: '',
+    crmty: '',
+    rmrk: '',
+    /** 후보지 제목 */
+    candidateTitle: [
+      { ruseUtztnFcltNm: '', ruseUtztnFcltCd: '' },
+      { ruseUtztnFcltNm: '', ruseUtztnFcltCd: '' },
+      { ruseUtztnFcltNm: '', ruseUtztnFcltCd: '' },
+    ],
+  });
+
+ 
+
+  useEffect(() => {
+    const user = sessionStorage.getItem('user');
+    setDefaultValues(prev => ({
+      ...prev,
+      sdmNm: searchParams.get('dmdCoNm') || '',
+    }));
+    sessionStorage.setItem('user', searchParams.get('dmdInfoId') || '');
+    setIsLogin(user || searchParams.get('dmdInfoId') ? true : false);
+  }, [searchParams]);
+
+  useEffect(() => {
+    const local = localStorage.getItem('user');
+    if (local) {
+      setIsLogin(true);
+    }
+  }, []);
+
+  const form = useForm<FormData>({
+    resolver: zodResolver(formSchema),
+    defaultValues,
+    mode: "onChange",
+  });
+
+  useEffect(()=>{
+    if(map.subsInfo.length>0){
+      form.setValue('candidateTitle', map.subsInfo)
+    }
+
+},[map.subsInfo, form])
+
+  // 로그인 성공 시 모달 닫기 및 폼 업데이트
+  useEffect(() => {
+    if (successLogin) {
+      setIsLogin(true);
+      const user = sessionStorage.getItem('user');
+      if (user) {
+        try {
+          const userData = JSON.parse(user);
+          if (userData.dmdCoNm) {
+            setFacilityName(userData.dmdCoNm);
+            form.setValue('sdmNm', userData.dmdCoNm);
+          }
+        } catch (error) {
+          console.error('Error parsing user data:', error);
+        }
+      }
+    }
+  }, [successLogin, form]);
+
+  // 체크박스 상태가 변경될 때마다 money 필드의 에러를 초기화
+  useEffect(() => {
+    if (ismoneyDisabled) {
+      form.clearErrors('money');
+      form.setValue('money', '');
+    }
+  }, [ismoneyDisabled, form]);
+const router = useRouter();
+  const onSubmit: SubmitHandler<FormData> = async (data) => {
+    try {
+      // Transform form data to match API schema
+      const apiData: DemandCompType = {
+        dmdInfoId: JSON.parse(sessionStorage.getItem('user') || '{}')?.dmdInfoId?.toString() || searchParams.get('dmdInfoId') + (searchParams.get('bznmTotNo') || ''),
+        dmdInfoFk: JSON.parse(sessionStorage.getItem('user') || '{}')?.dmdInfoId?.toString() || searchParams.get('dmdInfoId') + (searchParams.get('bznmTotNo') || ''),
+        dmdCoNm: JSON.parse(sessionStorage.getItem('user') || '{}')?.dmdCoNm?.toString() || data.sdmNm,
+        ctpvCd: JSON.parse(sessionStorage.getItem('user') || '{}')?.ctpvCd?.toString() || searchParams.get('ctpvCd') || '',
+        sggCd: JSON.parse(sessionStorage.getItem('user') || '{}')?.sggCd?.toString() || searchParams.get('sggCd') || '',
+        daddr: JSON.parse(sessionStorage.getItem('user') || '{}')?.daddr?.toString() || searchParams.get('daddr') || '',
+        telno: JSON.parse(sessionStorage.getItem('user') || '{}')?.telno?.toString() || searchParams.get('telno') || '',
+        rgtr: JSON.parse(sessionStorage.getItem('user') || '{}')?.rgtr?.toString() || searchParams.get('rgtr') || '',
+        useUsgCd: data.usePurpose || '',
+        wntUntprc: Number(data.money) || '',
+        dmndTmng: data.demandYmd || new Date(),
+        dmndQty: Number(data.demandQnty) || '',
+        grssClfg: Number(data.grssClfg) || '',
+        tn: Number(data.tn) || '',
+        combResdch: Number(data.combResdch) || '',
+        tph: Number(data.tph) || '',
+        trbt: Number(data.trbt) || '',
+        ph: Number(data.ph) || '',
+        blgcOxygDmndQnt: Number(data.bod) || '',
+        clIonQnt: Number(data.clIonQnt) || '',
+        smll: Number(data.smll) || '',
+        cdtnv: Number(data.cdtnv) || '',
+        crmty: Number(data.crmty) || '',
+        rmrk: data.rmrk || '',
+        bzmnNo: "",
+        dmdAplyPswd: "",
+        index: 0,
+        reqDt: "",
+        dmdInfoSn: 0,
+        status: '',
+        splyCndtList: data.candidateTitle || [],
+      };
+
+
+
+
+
+      await insertSdmInfoData(apiData);
+    } catch (error) {
+      console.error('Error submitting form:', error);
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-[#F2F2F2]">
+      <div className="container mx-auto px-4 py-8">
+        <div className="text-center mb-8">
+          <h1 className="text-4xl font-bold text-gray-900 underline">
+            수요정보 등록
+          </h1>
+        </div>
+
+        <div className="max-w-3xl mx-auto bg-white rounded-lg shadow-md p-6">
+          <FormProvider {...form}>
+            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+              <SdmInfoRegForm
+                form={form}
+                onCheckboxChange={setIsmoneyDisabled}
+                facilityName={facilityName}
+              />
+              <div className="flex justify-center pt-4">
+                <Button
+                  type="submit"
+                  className="w-40 bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded-md transition-colors duration-200"
+                >
+                  수요정보 등록
+                </Button>
+              </div>
+            </form>
+          </FormProvider>
+        </div>
+      </div>
+
+      {!isLogin ?
+        <UiModal
+          body={<SdmLogin />}
+          bodyClass="sm:max-w-[90vw] w-[530px] h-[430px]"
+          open={!isLogin}
+          onOpenChange={(open) => {
+            if (!open) {
+              router.push("/");
+            }
+          }}
+          noHeaderYn="Y"
+          noFooterYn="Y"
+        />
+        : null}
+      <Toaster position="top-center" />
+    </div>
+  );
+}
+
+export default function MyForm() {
+  return (
+    <Suspense fallback={<div>Loading...</div>}>
+      <SdmInfoInsertContent />
+    </Suspense>
+  );
+}
+

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

@@ -0,0 +1,72 @@
+"use client";
+
+import { useDmStore } from "@/app/store";
+import type { DemandCompType } from "@/app/store/sdmMng";
+import SdmInsertForm from '@common/business_components/ui/sdmInsertForm';
+import { useRouter } from "next/navigation";
+import { useCallback, useEffect, useRef } from "react";
+import { Toaster } from "react-hot-toast";
+
+export default function MyForm() {
+  const { Common, initializeCommonData, getDemandCompList, insertSdmData, Sdm } = useDmStore((state) => state);
+  const { selectSidoData, selectSigunData } = Common;
+  const { demandCompList, successNextPage } = Sdm;
+  const router = useRouter();
+  const formDataRef = useRef<DemandCompType | null>(null);
+
+  useEffect(() => {
+    initializeCommonData();
+  }, [initializeCommonData]);
+
+  useEffect(() => {
+    if (successNextPage && formDataRef.current) {
+      const data = formDataRef.current;
+      console.log(data);
+      const queryParams = new URLSearchParams({
+        dmdCoNm: data.dmdCoNm || '',
+        ctpvCd: data.ctpvCd || '',
+        sggCd: data.sggCd || '',
+        dmdInfoId: data.dmdInfoId || '',
+        daddr: data.daddr || '',
+        telno: data.telno || '',
+      });
+      router.push(`/pages/sdmMng/sdmInfoInsert?${queryParams.toString()}`);
+    }
+  }, [successNextPage, router]);
+
+  const callback = useCallback((searchText: string, pageCnt: number) => {
+    searchText = searchText.trim();
+    if (searchText.length > 0) {
+      getDemandCompList(searchText, pageCnt);
+    }
+  }, [getDemandCompList]);
+
+  const handleInsertSdmData = useCallback((data: import('@common/business_components/ui/sdmInsertForm/form').DemandCompType) => {
+    const convertedData: DemandCompType = {
+      ...data,
+      dmdInfoSn: '',
+      dmdInfoFk: '',
+      status: '',
+    };
+    formDataRef.current = convertedData;
+    insertSdmData(convertedData).catch(error => {
+      console.error('Error inserting SDM data:', error);
+    });
+  }, [insertSdmData]);
+
+  return (
+    <div className="min-h-screen bg-[#F2F2F2]">
+      <div className="pt-12">
+        <SdmInsertForm
+          selectSidoData={selectSidoData}
+          selectSigunData={selectSigunData}
+          dataList={demandCompList}
+          rtnValue={callback}
+          rtnInputData={handleInsertSdmData}
+        />
+        <Toaster position="top-center" />
+      </div>
+    </div>
+  );
+}
+

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

@@ -0,0 +1,18 @@
+'use client'
+
+import { SdmLoginForm } from '@/components/ui/sdmLoginForm/component';
+
+export default function SdmLogin() {
+  return (
+    <div className="container mx-auto px-4 py-8">
+      <div className="text-center mb-8">
+        <h1 className="text-4xl font-bold text-gray-900 underline">
+          수요처 로그인
+        </h1>
+      </div>
+      <div className="max-w-3xl mx-auto bg-white rounded-lg shadow-md p-6">
+        <SdmLoginForm />
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,337 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+import Image from 'next/image';
+
+const NAVS = [
+  { id: 'card1', label: '물재이용이란' },
+  { id: 'card2', label: '물재이용 필요성' },
+  { id: 'card3', label: '빗물 재이용' },
+  { id: 'card4', label: '중수 재이용' },
+  { id: 'card5', label: '하수 재이용' },
+  { id: 'card6', label: '물재이용 목표' },
+];
+
+export default function WrAboutPage() {
+  const [activeIdx, setActiveIdx] = useState(0);
+  const navRefs = useRef<(HTMLLIElement | null)[]>([]);
+  const cardRefs = useRef<(HTMLElement | null)[]>([]);
+
+  // 클릭 시 이동
+  const handleNavClick = (idx: number) => {
+    setActiveIdx(idx);
+    const targetCard = cardRefs.current[idx];
+    if (targetCard) {
+      targetCard.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    }
+  };
+
+  // 키보드 이벤트 처리
+  const handleKeyDown = (e: React.KeyboardEvent, idx: number) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      handleNavClick(idx);
+    }
+  };
+
+  useEffect(() => {
+    const observerOptions = {
+      root: null,
+      rootMargin: '-200px 0px 0px 0px', // 상단에서 200px 지점을 기준으로
+      threshold: 0
+    };
+
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          const idx = cardRefs.current.findIndex(ref => ref === entry.target);
+          if (idx !== -1) {
+            setActiveIdx(idx);
+          }
+        }
+      });
+    }, observerOptions);
+
+    // 각 카드 요소를 관찰
+    cardRefs.current.forEach((card) => {
+      if (card) {
+        observer.observe(card);
+      }
+    });
+
+    return () => {
+      cardRefs.current.forEach((card) => {
+        if (card) {
+          observer.unobserve(card);
+        }
+      });
+    };
+  }, []);
+
+  return (
+    <div className='bg-[#F2F2F2]'>
+      <main className="relative w-[950px] mx-auto pt-[100px] font-sans">
+        {/* 사이드바 */}
+        <nav className="fixed left-[290px] top-[195px] w-[210px] z-50" aria-label="물재이용 정보 섹션 내비게이션">
+          <ul role="list" className="relative space-y-6">
+            {NAVS.map((nav, idx) => (
+              <li
+                key={nav.id}
+                ref={(el) => { navRefs.current[idx] = el; }}
+                role="listitem"
+                tabIndex={0}
+                aria-current={idx === activeIdx ? 'true' : 'false'}
+                aria-label={`현재 위치: ${nav.label}`}
+                onClick={() => handleNavClick(idx)}
+                onKeyDown={(e) => handleKeyDown(e, idx)}
+                className={`font-NotoSansKR nav-item relative pl-6 text-2xl font-bold text-[#383838] cursor-pointer transition-all duration-300
+                after:content-[''] after:absolute after:top-6 after:left-[0.5rem] after:w-[2px] after:h-[24px] after:bg-[#C5C5C5] last:after:hidden 
+                ${idx === activeIdx ? 'text-4xl font-bold text-[#383838]' : ''}`}
+              >
+                <span className={`absolute left-[0.5rem] top-1 w-4 h-4 rounded-full -translate-x-1/2 transition-all duration-300
+                ${idx === activeIdx ? 'bg-blue-500 border-blue-500' : 'bg-white border-gray-400 border'}`}></span>
+                {nav.label}
+              </li>
+            ))}
+          </ul>
+        </nav>
+
+        <article ref={(el) => { cardRefs.current[0] = el; }} className="card-wrap pl-[100px] mb-24 !pt-0" id="card1" aria-labelledby="card1-title">
+          <h2 id="card1-title" className="font-NotoSansKR relative text-center text-4xl font-medium text-gray-900 mb-6">
+            <span className="absolute left-1/2 top-[-15px] -translate-x-1/2 w-24 h-2 bg-blue-500 rounded-full"></span>
+            물재이용이란
+          </h2>
+          <section aria-labelledby="card1-desc" className="bg-white border border-gray-300 rounded-xl p-[60px] pt-[70px] pb-[70px] ">
+            <h1 id="card1-desc" className="font-NotoSansKR text-[#269DDA] text-5xl font-bold mb-8">물 재이용이 무엇인가요?</h1>
+            <p className="font-NotoSansKR text-[#231815] text-2xl mb-10 leading-relaxed">
+              물 재이용은 빗물, 오수, 하수처리수, 폐수처리수 및 발전소 온배수를<br />
+              물 재이용시설을 이용하여 처리하고, 그 처리된 물을 생활, 공업, 농업, 조경,<br />
+              하천 유지 등의 용도로 이용하는 것을 말합니다.
+            </p>
+            <Image
+              src="/img/wrAbout/img_01_1.png"
+              alt="이 이미지는 물 재이용 시스템의 개요를 나타냅니다. 가정, 공공기관, 하수처리장 등에서 발생한 생활하수, 빗물, 하수처리수를 물 재이용 시설에서 처리한 후, 청소나 화장실, 농업, 살수차, 하천 유지, 공장, 공원 및 골프장 등 다양한 용도로 활용하는 과정을 도식화한 것입니다."
+              width={800}
+              height={400}
+              className="w-[90%] mx-auto mb-8 rounded"
+            />
+            <p className="font-NotoSansKR text-center font-normal text-2xl">
+              환경부는 2011년에 &apos;물의 재이용 촉진 및 지원에 관한 법률&apos;을 제정하여<br />
+              한국환경공단과 함께 물 재이용 확대 및 촉진을 위해 노력하고 있습니다.
+            </p>
+          </section>
+        </article>
+
+        {/* 카드2 */}
+        <article ref={(el) => { cardRefs.current[1] = el; }} className="card-wrap pl-[100px] mb-24" id="card2" aria-labelledby="card2-title">
+          <h2 id="card2-title" className="font-NotoSansKR relative text-center text-4xl font-medium text-gray-900 mb-6">
+            <span className="absolute left-1/2 top-[-15px] -translate-x-1/2 w-24 h-2 bg-blue-500 rounded-full"></span>
+            물재이용 필요성
+          </h2>
+          <section aria-labelledby="card2-desc" className="bg-white border border-gray-300 rounded-xl p-[60px] pt-[70px] pb-[70px] ">
+            <h1 id="card2-desc" className="font-NotoSansKR text-[#ED5534] text-5xl font-semibold mb-8">물 재이용, 왜 필요한가요?</h1>
+            <p className="font-NotoSansKR text-2xl font-normal mb-10 leading-relaxed">
+              빗물, 중수, 하수처리수는 지속적으로 이용 가능한 순환자원입니다.<br />
+              물 재이용을 통한 효율적인 수자원 활용은 물 스트레스국가인 우리나라에서<br />가뭄대응능력 향상 및 하천수질보전을 위해 반드시 필요한 일입니다.
+            </p>
+            <Image
+              src="/img/wrAbout/img_02_1.png"
+              alt="이 이미지는 기후변화로 인한 온도 상승 추이를 설명한다. 왼쪽에는 지구 그림과 온도계가 함께 표시되어 있으며, 지구 평균 기온은 지난 100년간 약 0.9℃ 상승했음을 나타낸다. 오른쪽에는 대한민국 지도와 함께 온도계가 있으며, 지난 100년간 약 1.8℃ 상승했음을 보여준다. 이는 지구 평균보다 2배 높은 수치이며, 자료 출처는 「기후변화 평가보고서 2020, 환경부·기상청」이다."
+              width={800}
+              height={400}
+              className="w-[90%] mx-auto mb-8 w-[80%]"
+            />
+            <p className="font-NotoSansKR text-2xl mb-10 leading-relaxed">
+              - 우리나라의 기후변화 진행속도는 세계 평균을 상회하고 있습니다.<br />
+              - 기후변화로 인한 국지적인 가뭄은 더욱 자주, 더욱 심하게 일어나고 있으며, 우리의 물 안보를 위협하고 있습니다.
+            </p>
+            <Image
+              src="/img/wrAbout/img_02_2.png"
+              alt="세계 평균 1인당 강수량은 15,044m³이며, 대한민국은 2,546m³로 약 1/6 수준입니다. 계절별 강수량은 봄 10%, 여름 70%, 가을 15%, 겨울 5%입니다. 이는 여름철에 강수량이 집중되는 문제를 나타냅니다."
+              width={800}
+              height={400}
+              className="w-[90%] mx-auto mb-8"
+            />
+            <p className="font-NotoSansKR text-2xl mb-10 leading-relaxed">
+              - 우리나라의 1인당 강수량은 2,546㎥ 으로 세계 평균 15,044㎥의 약 1/6 수준입니다.<br />
+              - 우리나라 강수량의 70%는 여름철에 집중되어 있어 이용 가능한 수자원확보가 어렵습니다.
+            </p>
+            <Image
+              src="/img/wrAbout/img_02_3.png"
+              alt="물 재이용은 환경을 보호하며 지속 가능한 발전이 가능하게 하고, 안정적인 수자원 확보, 깨끗하고 경제적인 공업용수 공급, 하천 수질 개선을 통한 생태계 회복에 기여합니다."
+              width={800}
+              height={400}
+              className="w-[93%] mx-auto"
+            />
+          </section>
+        </article>
+
+        {/* 카드3 */}
+        <article ref={(el) => { cardRefs.current[2] = el; }} className="card-wrap pl-[100px] mb-24" id="card3" aria-labelledby="card3-title">
+          <h2 id="card3-title" className="font-NotoSansKR relative text-center text-4xl font-medium text-gray-900 mb-6">
+            <span className="absolute left-1/2 top-[-15px] -translate-x-1/2 w-24 h-2 bg-blue-500 rounded-full"></span>
+            빗물 재이용
+          </h2>
+          <section aria-labelledby="card3-desc" className="bg-white border border-gray-300 rounded-xl p-[60px] pt-[70px] pb-[70px] ">
+            <h1 id="card3-desc" className="font-NotoSansKR leading-snug text-[#269DDA] text-5xl font-bold mb-6">친환경 수자원 빗물,<br />편리하게 사용할 수 있어요!</h1>
+            <p className="font-NotoSansKR text-2xl mb-10 leading-relaxed">가뭄을 극복하고 홍수를 예방하기 위해<br />비가 내릴 때 빗물을 모아두었다가 사용합니다.</p>
+            <Image
+              src="/img/wrAbout/img_03_1.png"
+              alt="주택 지붕에 내린 빗물을 저장조에 모아 조경용수, 화장실용수, 세척·살수용수로 재활용하는 과정을 보여줍니다."
+              width={800}
+              height={400}
+              className="w-[90%] mx-auto mb-6"
+            />
+            <Image
+              src="/img/wrAbout/img_03_2.png"
+              alt="빗물이용"
+              width={200}
+              height={100}
+              className="mb-5 w-[20%]"
+            />
+            <p className="font-NotoSansKR text-2xl leading-relaxed">
+              - 의무 설치대상: 지붕면적 1,000㎡ 이상의 운동장, 체육관, 공공업무시설 등<br />
+              - 설 치 기 준: 집수시설, 처리시설, 빗물 저류조(지붕 집수면적 x 0.05m 이상)<br />
+              - 활 용 용 도: 골프장 등의 조경용수, 화장실용수, 세척·살수용수 등
+            </p>
+          </section>
+        </article>
+
+        {/* 카드4 */}
+        <article ref={(el) => { cardRefs.current[3] = el; }} className="card-wrap pl-[100px] mb-24" id="card4" aria-labelledby="card4-title">
+          <h2 id="card4-title" className="font-NotoSansKR relative text-center text-4xl font-medium text-gray-900 mb-6">
+            <span className="absolute left-1/2 top-[-15px] -translate-x-1/2 w-24 h-2 bg-blue-500 rounded-full"></span>
+            중수 재이용
+          </h2>
+          <section aria-labelledby="card4-desc" className="bg-white border border-gray-300 rounded-xl p-[60px] pt-[70px] pb-[70px] ">
+            <h1 id="card4-desc" className="font-NotoSansKR leading-snug text-[#9771B0] text-5xl font-bold mb-6">요모조모 쓸모 많은 중수,<br />알뜰하게 재이용할 수 있어요!</h1>
+            <p className="font-NotoSansKR text-2xl mb-10 leading-relaxed">한번 사용한 물을 중수도 시설을 통해 재생하여<br />개별적 또는 지역적으로 재이용할 수 있습니다.</p>
+            <Image
+              src="/img/wrAbout/img_04_1.png"
+              alt="욕실, 세면대, 주방, 세탁기 등에서 발생한 생활용수를 중수도 시설에서 처리하여 화장실 변기용수와 조경용수로 재이용하는 시스템 흐름도입니다."
+              width={800}
+              height={400}
+              className="w-[90%] mx-auto mb-6"
+            />
+            <Image
+              src="/img/wrAbout/img_04_2.png"
+              alt="중수재이용"
+              width={200}
+              height={100}
+              className="mb-5 w-[20%]"
+            />
+            <p className="font-NotoSansKR text-2xl leading-relaxed">
+              - 의무 설치대상: 일정규모 이상의 대규모점포, 숙박/목욕장, 공장, 각종 개발사업 등<br />
+              - 의무 재이용량: 물 사용량의 10% 이상<br />
+              - 활 용 용 도: 청소·화장실용수, 세척·살수용수, 조경용수, 공업용수 등
+            </p>
+          </section>
+        </article>
+
+        {/* 카드5 */}
+        <article ref={(el) => { cardRefs.current[4] = el; }} className="card-wrap pl-[100px] mb-24" id="card5" aria-labelledby="card5-title">
+          <h2 id="card5-title" className="font-NotoSansKR relative text-center text-4xl font-medium text-gray-900 mb-6">
+            <span className="absolute left-1/2 top-[-15px] -translate-x-1/2 w-24 h-2 bg-blue-500 rounded-full"></span>
+            하수 재이용
+          </h2>
+          <section aria-labelledby="card5-desc" className="bg-white border border-gray-300 rounded-xl p-[60px] pt-[70px] pb-[70px] ">
+            <h1 id="card5-desc" className="font-NotoSansKR leading-snug text-[#0099A4] text-5xl font-bold mb-6">아직 할 일이 많은 하수처리수,<br />풍족하게 재이용할 수 있어요!</h1>
+            <p className="font-NotoSansKR text-2xl mb-10 leading-relaxed">사용하고 버려져 공공하수처리장으로 모여든 물은<br />용도에 맞는 처리 후 재이용 할 수 있습니다.</p>
+            <Image
+              src="/img/wrAbout/img_05_1.png"
+              alt="주택과 건물에서 발생한 하수가 공공하수처리장을 거쳐 처리된 후, 물 재이용 시설에서 정화되어 공업용수, 하천유지용수, 농업용수, 세척·살수용수로 재활용됩니다."
+              width={800}
+              height={400}
+              className="w-[90%] mx-auto mb-6"
+            />
+            <Image
+              src="/img/wrAbout/img_05_2.png"
+              alt="하수처리 재이용"
+              width={200}
+              height={100}
+              className="mb-5 w-[20%]"
+            />
+            <p className="font-NotoSansKR text-2xl leading-relaxed">
+              - 의무 이용대상: 공공하수처리장(시설용량 5,000㎥/일 이상)<br />
+              - 의무 재이용량: 일 하수처리량의 10% 이상<br />
+              - 활 용 용 도: 공업용수, 하천유지용수, 농업용수 등
+            </p>
+          </section>
+        </article>
+
+        {/* 카드6 */}
+        <article ref={(el) => { cardRefs.current[5] = el; }} className="card-wrap pl-[100px] mb-24" id="card6" aria-labelledby="card6-title">
+          <h2 id="card6-title" className="font-NotoSansKR relative text-center text-4xl font-medium text-gray-900 mb-6">
+            <span className="absolute left-1/2 top-[-15px] -translate-x-1/2 w-24 h-2 bg-blue-500 rounded-full"></span>
+            물재이용 목표
+          </h2>
+          <section aria-labelledby="card6-desc" className="bg-white border border-gray-300 rounded-xl p-[60px] pt-[70px] pb-[70px] ">
+            <h1 id="card6-desc" className="font-NotoSansKR leading-snug text-[#269DDA] text-5xl font-bold mb-6">2030년 물 재이용 목표를 위해<br />모두의 관심과 노력이 필요합니다.</h1>
+            <p className="font-NotoSansKR text-2xl mb-6 leading-relaxed">
+              환경부는 2030년까지의 제2차 물 재이용 기본계획을 수립하여<br />한국환경공단과 함께 물 재이용 확대 및 촉진을 위해 노력하고 있습니다.
+            </p>
+            <Image
+              src="/img/wrAbout/img_06_1.png"
+              alt="지속가능한 물 재이용 정착으로 건전한 물순환 확산"
+              width={800}
+              height={400}
+              className="w-[80%] mx-auto mb-6"
+            />
+            <div className="flex gap-3 flex-wrap justify-between bg-gray-100 p-6 rounded-lg mb-8">
+              <div className="flex-1 text-center">
+                <Image
+                  src="/img/wrAbout/icon_01.png"
+                  alt=""
+                  width={70}
+                  height={70}
+                  className="mx-auto mb-4 w-[auto] h-[70px]"
+                />
+                <h3 className="font-NotoSansKR text-center font-medium text-nowrap mb-2 text-2xl">도시 물 순환이용<br />체계로의 전환</h3>
+                <ul className="font-NotoSansKR text-xl text-gray-600 leading-relaxed space-y-1">
+                  <li className="text-nowrap">- 지속가능한 물 순환이용체계 구축</li>
+                  <li>- 물 재이용시설 관리체계 강화</li>
+                </ul>
+              </div>
+              <div className="flex-1 text-center">
+                <Image
+                  src="/img/wrAbout/icon_02.png"
+                  alt=""
+                  width={70}
+                  height={70}
+                  className="mx-auto mb-4 w-[auto] h-[70px]"
+                />
+                <h3 className="font-NotoSansKR text-center font-medium text-nowrap mb-2 text-2xl">유역기반 하수처리수 재이용<br />수요확대 및 공급체계 구축</h3>
+                <ul className="font-NotoSansKR text-xl text-gray-600 leading-relaxed space-y-1">
+                  <li>- 유역기반 통합물관리 연계 강화</li>
+                  <li>- 하수처리수 재이용 공업용수 공급 활성화</li>
+                  <li>- 하수처리수 재이용을 활용한 물순환 촉진</li>
+                </ul>
+              </div>
+              <div className="flex-1 text-center">
+                <Image
+                  src="/img/wrAbout/icon_03.png"
+                  alt=""
+                  width={70}
+                  height={70}
+                  className="mx-auto mb-4 w-[auto] h-[70px]"
+                />
+                <h3 className="font-NotoSansKR text-center font-medium text-nowrap mb-2 text-2xl">물 재이용 인식제고<br />및 산업발전 기반 마련</h3>
+                <ul className="font-NotoSansKR text-xl text-gray-600 leading-relaxed space-y-1">
+                  <li>- 물 재이용 교육 및 대국민 홍보 강화</li>
+                  <li>- 핵심기술 육성 및 산업발전 지원 강화</li>
+                </ul>
+              </div>
+            </div>
+            <Image
+              src="/img/wrAbout/img_06_2.png"
+              alt="물 재이용량은 2014년 13.3억톤에서 2030년 25.9억톤까지 증가할 것으로 예상됩니다. 그에 따른 기대 효과로는 연간 상수대체 17.9억톤, 물산업 시장성장 약 2조3,541억 원, 건천화된 73개 하천 해소, 약 20,550명의 고용 효과가 포함됩니다."
+              width={800}
+              height={400}
+              className="w-[90%] mx-auto"
+            />
+          </section>
+        </article>
+      </main>
+    </div>
+  );
+}

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

@@ -0,0 +1,364 @@
+import Image from "next/image";
+
+export default function WrExamplePage() {
+  return (
+    <div className="bg-[#F2F2F2]">
+      <div className="relative w-[950px] mx-auto pt-[50px] font-sans">
+        <h2 className="font-NotoSansKR relative text-center text-4xl font-bold text-gray-900 mb-6">
+          <span className="absolute left-1/2 top-[-15px] -translate-x-1/2 w-24 h-2 rounded-full"></span>
+          물 재이용사례
+        </h2>
+      </div>
+      <div className="bg-[#F2F2F2] text-gray-800">
+        <div className="relative w-[950px] mx-auto pt-[50px] font-sans">
+          {/* 카드 1 */}
+          <div className="card-wrap mb-24" id="card1">
+            <h2 className="font-NotoSansKR relative text-center text-4xl font-bold text-gray-900 mb-6">
+              <span className="absolute left-1/2 top-[-15px] -translate-x-1/2 w-24 h-2 bg-blue-500 rounded-full"></span>
+              사업사례 1 
+            </h2>
+            <div className="bg-white border border-gray-300 rounded-xl p-[60px] pt-[70px] pb-[70px]">
+              {/* 사업명 */}
+              <section>
+                <h2 className="font-NotoSansKR text-2xl text-[#657D91] font-bold bg-[#EAEFF3] p-3 rounded mb-4">사업명</h2>
+                <p className="font-NotoSansKR text-2xl font-semibold text-gray-800 leading-relaxed">
+                  경기권역 반도체 사업장 물 재이용 사업<br />
+                  : 삼성전자 반도체 사업장 하수재이용수 공급(재이용시설 설치, 공급망 구축 등)
+                </p>
+              </section>
+              {/* 사업 배경 및 목적 */}
+              <section className="mt-8">
+                <h2 className="font-NotoSansKR text-2xl text-[#657D91] font-bold bg-[#EAEFF3] p-3 rounded mb-4">사업 배경 및 목적</h2>
+                <p className="font-NotoSansKR text-2xl font-semibold text-gray-800 leading-relaxed">
+                  삼성전자는 환경경영전략 실현과 반도체 공장의 안정적 용수 공급을 위해 하수 재이용수를 공업용수로 도입하기로 결정
+                </p>
+              </section>
+              {/* 사업 주요 내용 */}
+              <section className="mt-8">
+                <h2 className="font-NotoSansKR text-2xl text-[#657D91] font-bold bg-[#EAEFF3] p-3 rounded mb-4">사업 주요 내용</h2>
+                <p className="font-NotoSansKR text-2xl font-semibold text-gray-800 leading-relaxed">
+                  1단계 사업[화성·오산(12만㎥/일) → 삼성 화성·기흥(29년 공급)]<br />
+                  2단계 사업[수원(21만㎥/일) → 삼성 평택(30년 공급)]
+                </p>
+              </section>
+              {/* 특이사항 */}
+              <section className="mt-8">
+                <h2 className="font-NotoSansKR text-2xl text-[#657D91] font-bold bg-[#EAEFF3] p-3 rounded mb-4">특이사항</h2>
+                <p className="font-NotoSansKR text-2xl font-semibold text-gray-800 leading-relaxed">
+                  본 사업은 광역 하수 재이용 공급망 구축의 첫 사업으로 초기 민관협의체를 구성·운영 후 관계기관(환경부, 경기도, 지자체, 공단, 수공, 삼성전자) 간 MOU 체결을 통해 사업을 추진하였으며, 반도체 사업장에 하수 재이용수를 공업용수로 공급하는 국내 첫 사업으로 위협부담 해소를 위해 사업을 단계별로 시행
+                </p>
+              </section>
+              {/* 단계별 시각 정보 */}
+              <section className="bg-white px-4 mt-8">
+                <Image 
+                  src="/img/wrExample/img_ex_01_1.png" 
+                  alt="사업단계 설명" 
+                  width={800}
+                  height={400}
+                  className="w-[100%] mx-auto mb-8" 
+                />
+              </section>
+            </div>
+          </div>
+
+          {/* 카드2 */}
+          <div className="card-wrap mb-24" id="card2">
+            <h2 className="font-NotoSansKR relative text-center text-4xl font-bold text-gray-900 mb-6">
+              <span className="absolute left-1/2 top-[-15px] -translate-x-1/2 w-24 h-2 bg-blue-500 rounded-full"></span>
+              사업사례 2
+            </h2>
+            <div className="bg-white border border-gray-300 rounded-xl p-[60px] pt-[70px] pb-[70px]">
+              {/* 사업명 */}
+              <section>
+                <h2 className="font-NotoSansKR text-2xl text-[#657D91] font-bold bg-[#EAEFF3] p-3 rounded mb-4">사업명</h2>
+                <p className="font-NotoSansKR text-2xl font-semibold text-gray-800 leading-relaxed">
+                  경기도 파주시 하수재이용<br />
+                  : 운정·금촌하수처리시설의 하수처리수를 막공법(U/F, R/O)으로 재처리하여 파주 LCD 산업단지내 3개 업체*에 공업용수 공급<br /><br />
+                  *LG디스플레이(P10공장), 희성전자, 엔비텍 등
+                </p>
+              </section>
+              {/* 사업 방식 */}
+              <section className="mt-8">
+                <h2 className="font-NotoSansKR text-2xl text-[#657D91] font-bold bg-[#EAEFF3] p-3 rounded mb-4">사업 방식</h2>
+                <p className="font-NotoSansKR text-2xl font-semibold text-gray-800 leading-relaxed">
+                  민간투자사업(시행사 : 파주그린허브(주), 운영사 : 테크로스)
+                </p>
+              </section>
+              {/* 사업 주요 내용 */}
+              <section className="mt-8">
+                <h2 className="font-NotoSansKR text-2xl text-[#657D91] font-bold bg-[#EAEFF3] p-3 rounded mb-4">사업 주요 내용</h2>
+                <p className="font-NotoSansKR text-2xl font-semibold text-gray-800 leading-relaxed">
+                  처리공정 : 전처리분리막(U/F) + 역삼투서비(R/O)<br />
+                  공급량 : 4만m³/일<br />
+                  관로 : 13.6km<br />
+                  사업비 : 651억원
+                </p>
+              </section>
+              {/* 특이사항 */}
+              <section className="mt-8">
+                <h2 className="font-NotoSansKR text-2xl text-[#657D91] font-bold bg-[#EAEFF3] p-3 rounded mb-4">특이사항</h2>
+                <p className="font-NotoSansKR text-2xl font-semibold text-gray-800 leading-relaxed">
+                  하수처리수 재이용시설 자체 농축폐수 처리공정 개발 및 적용 성공사례
+                </p>
+                <div className="grid grid-cols-1 gap-0 items-start">
+                  {/* 좌측 이미지 */}
+                  <div>
+                    <Image 
+                      src="/img/wrExample/img_ex_02_1.png" 
+                      alt="적용 성공사례 지도" 
+                      width={1000}
+                      height={1200}
+                      className="w-[100%] mx-auto" 
+                    />
+                  </div>
+
+                  {/* 우측 표 */}
+                  <div className="space-y-3">
+                    {/* 하수처리수 공급 */}
+                    <div>
+                      <table className="min-w-full h-[500px]text-center border border-black">
+                        <colgroup>
+                          <col style={{ width: "20%" }} />
+                          <col style={{ width: "40%" }} />
+                          <col style={{ width: "40%" }} />
+                        </colgroup>
+                        <tbody>
+                          <tr>
+                            <td colSpan={3} className="font-NotoSansKR bg-[#ffc000] h-[30px] text-xl text-white font-semibold text-center pt-[6px] pb-[6px] px-0">하수처리수 공급</td>
+                          </tr>
+                          <tr className="text-xl h-[30px]">
+                            <td className="font-NotoSansKR text-xl h-[30px] border-black border p-1 font-bold">위치</td>
+                            <td className="font-NotoSansKR text-xl h-[30px] border-black border p-1 font-bold">금촌하수</td>
+                            <td className="font-NotoSansKR text-xl h-[30px] border-black border p-1 font-bold">운정하수</td>
+                          </tr>
+                          <tr className="text-sm">
+                            <td className="font-NotoSansKR text-xl h-[30px] border-black border p-1 font-bold">시설용량</td>
+                            <td className="font-NotoSansKR text-xl h-[30px] border-black border p-1 font-bold">44,000㎥/일</td>
+                            <td className="font-NotoSansKR text-xl h-[30px] border-black border p-1 font-bold">60,000㎥/일</td>
+                          </tr>
+                          <tr className="text-sm">
+                            <td className="font-NotoSansKR text-xl h-[30px] border-black border p-1 font-bold">유입량</td>
+                            <td className="font-NotoSansKR text-xl h-[30px] border-black border p-1 font-bold">27,000㎥/일<br />자연유하</td>
+                            <td className="font-NotoSansKR text-xl h-[30px] border-black border p-1 font-bold">30,000㎥/일<br />이송펌프장</td>
+                          </tr>
+                        </tbody>
+                      </table>
+                      {/* 첫 화살표 (자연유하 / 관로이송) */}
+                      <div className="flex h-[30px] justify-between items-center my-3 px-4">
+                        <div className="flex text-xl items-center gap-1 text-orange-600 font-bold pl-6">
+                          <span className="font-NotoSansKR">자연유하: 161m</span>
+                          <Image 
+                            src="/img/wrExample/img_arrow_down_1.png" 
+                            alt="오른쪽 화살표" 
+                            width={24}
+                            height={24}
+                            className="h-6 w-6" 
+                          />
+                        </div>
+                        <div className="flex text-xl items-center gap-1 text-orange-600 font-bold">
+                          <Image 
+                            src="/img/wrExample/img_arrow_down_1.png" 
+                            alt="왼쪽 화살표" 
+                            width={24}
+                            height={24}
+                            className="h-6 w-6" 
+                          />
+                          <span className="font-NotoSansKR">관로이송: 3.2km</span>
+                        </div>
+                      </div>
+                    </div>
+
+                    {/* 물재이용 처리시설 */}
+                    <div>
+                      <table className="min-w-full text-center border border-black">
+                        <colgroup>
+                          <col style={{ width: "50%" }} />
+                          <col style={{ width: "50%" }} />
+                        </colgroup>
+                        <tbody>
+                          <tr>
+                            <td colSpan={2} className="font-NotoSansKR bg-[#00b050] text-xl h-[30px] text-white font-semibold text-center pt-[6px] pb-[6px] px-0">물재이용 처리시설</td>
+                          </tr>
+                          <tr className="text-sm">
+                            <td className="font-NotoSansKR text-xl h-[30px] border-black border p-1 font-bold">유입유량</td>
+                            <td className="font-NotoSansKR text-xl h-[30px] border-black border p-1 font-bold">57,000㎥/일</td>
+                          </tr>
+                          <tr className="text-sm">
+                            <td className="font-NotoSansKR text-xl h-[30px] border-black border p-1 font-bold">재이용시설</td>
+                            <td className="font-NotoSansKR text-xl h-[30px] border-black border p-1 font-bold">40,000㎥/일</td>
+                          </tr>
+                          <tr className="text-sm">
+                            <td className="font-NotoSansKR text-xl h-[30px] border-black border p-1 font-bold">농축폐수처리</td>
+                            <td className="font-NotoSansKR text-xl h-[30px] border-black border p-1 font-bold">17,000㎥/일</td>
+                          </tr>
+                        </tbody>
+                      </table>
+                      {/* 두 번째 화살표 (공급관로) */}
+                      <div className="flex flex-col items-center my-3">
+                        <div className="flex h-[30px] items-center gap-1 text-xl text-blue-600 font-semibold">
+                          <span className="font-NotoSansKR">공급관로 L=10.4km</span>
+                          <Image 
+                            src="/img/wrExample/img_arrow_down_2.png" 
+                            alt="아래 화살표" 
+                            width={24}
+                            height={24}
+                            className="h-6 w-6" 
+                          />
+                        </div>
+                      </div>
+                    </div>
+
+                    {/* 수요처 공급 */}
+                    <div>
+                      <table className="min-w-full text-center border border-black">
+                        <colgroup>
+                          <col style={{ width: "50%" }} />
+                          <col style={{ width: "50%" }} />
+                        </colgroup>
+                        <tbody>
+                          <tr>
+                            <td colSpan={2} className="font-NotoSansKR bg-[#3399ff] h-[30px] text-xl text-white font-semibold text-center pt-[6px] pb-[6px] px-0">수요처 공급</td>
+                          </tr>
+                          <tr className="text-sm">
+                            <td className="font-NotoSansKR text-xl h-[30px] border-black border p-1 font-bold">수요처</td>
+                            <td className="font-NotoSansKR text-xl h-[30px] border-black border p-1 font-bold">LG디스플레이 외 2개사</td>
+                          </tr>
+                          <tr className="text-sm">
+                            <td className="font-NotoSansKR text-xl h-[30px] border-black border p-1 font-bold">수요량</td>
+                            <td className="font-NotoSansKR text-xl h-[30px] border-black border p-1 font-bold">40,000㎥/일</td>
+                          </tr>
+                        </tbody>
+                      </table>
+                    </div>
+                  </div>
+                </div>
+              </section>
+            </div>
+          </div>
+
+          {/* 카드3 */}
+          <div className="card-wrap mb-24" id="card3">
+            <h2 className="font-NotoSansKR relative text-center text-4xl font-bold text-gray-900 mb-6">
+              <span className="absolute left-1/2 top-[-15px] -translate-x-1/2 w-24 h-2 bg-blue-500 rounded-full"></span>
+              사업사례 3
+            </h2>
+            <div className="bg-white border border-gray-300 rounded-xl p-[60px] pt-[70px] pb-[70px]">
+              {/* 사업명 */}
+              <section>
+                <h2 className="font-NotoSansKR text-2xl text-[#657D91] font-bold bg-[#EAEFF3] p-3 rounded mb-4">사업명</h2>
+                <p className="font-NotoSansKR text-2xl font-semibold text-gray-800 leading-relaxed">
+                  충남 보령 하수재이용<br />
+                  : 보령·신보령화력발전소에 하루 1만톤의 탈황용수 공급을 위해 보령하수처리시설의 하수처리수 재이용 사업 추진
+                </p>
+              </section>
+              {/* 사업 방식 */}
+              <section className="mt-8">
+                <h2 className="font-NotoSansKR text-2xl text-[#657D91] font-bold bg-[#EAEFF3] p-3 rounded mb-4">사업 방식</h2>
+                <p className="font-NotoSansKR text-2xl font-semibold text-gray-800 leading-relaxed">
+                  2017년 한국환경공단과 사업대행 위 · 수탁 협약 체결
+                </p>
+              </section>
+              {/* 사업 주요 내용 */}
+              <section className="mt-8">
+                <h2 className="font-NotoSansKR text-2xl text-[#657D91] font-bold bg-[#EAEFF3] p-3 rounded mb-4">사업 주요 내용</h2>
+                <p className="font-NotoSansKR text-2xl font-semibold text-gray-800 leading-relaxed">
+                  처리공정 : 전처리분리막(U/F) + 역삼투서비(R/O)<br />
+                  공급량 : 1만m3/일<br />
+                  관로 : 8.7km<br />
+                  사업비 : 315억원(국비 216억원, 재원협의(안))
+                </p>
+              </section>
+              {/* 특이사항 */}
+              <section className="mt-8">
+                <h2 className="font-NotoSansKR text-2xl text-[#657D91] font-bold bg-[#EAEFF3] p-3 rounded mb-4">특이사항</h2>
+                <p className="font-NotoSansKR text-2xl font-semibold text-gray-800 leading-relaxed">
+                  국내 유일 하수재이용 공업용수 공급 재정사업으로 2016년 충남 서부권 가뭄 시 지역사회 기여 차원에서 기관간 MOU (환경부, 충청남도, 보령시, 한국중부발전㈜)를 바탕
+                  으로 추진 되어 경제성보다 공익성을 바탕으로 국가전력 기반시설의 안정적 운영 도모
+                </p>
+                <div className="p-2">
+                  <Image 
+                    src="/img/wrExample/img_ex_03_1.png" 
+                    alt="국가전력 기반시설 설명" 
+                    width={700}
+                    height={350}
+                    className="w-[100%] mx-auto" 
+                  />
+                </div>
+              </section>
+            </div>
+          </div>
+
+          {/* 카드4 */}
+          <div className="card-wrap mb-24" id="card4">
+            <h2 className="font-NotoSansKR relative text-center text-4xl font-bold text-gray-900 mb-6">
+              <span className="absolute left-1/2 top-[-15px] -translate-x-1/2 w-24 h-2 bg-blue-500 rounded-full"></span>
+              사업사례 4
+            </h2>
+            <div className="bg-white border border-gray-300 rounded-xl p-[60px] pt-[70px] pb-[70px]">
+              {/* 사업명 */}
+              <section>
+                <h2 className="font-NotoSansKR text-2xl text-[#657D91] font-bold bg-[#EAEFF3] p-3 rounded mb-4">사업명</h2>
+                <p className="font-NotoSansKR text-2xl font-semibold text-gray-800 leading-relaxed">
+                  경기도 수원시 빗물이용과 중수도
+                </p>
+              </section>
+              {/* 사업 내용 */}
+              <section className="mt-8">
+                <h2 className="font-NotoSansKR text-2xl text-[#657D91] font-bold bg-[#EAEFF3] p-3 rounded mb-4">사업 내용</h2>
+                <p className="font-NotoSansKR text-2xl font-semibold text-gray-800 leading-relaxed">
+                  (빗물) 월드컵경기장 등 4개소에 노면 빗물분사시스템 및 빗물 공급기를 설치하여 혹서기 도시 열섬효과 및 도로 비산먼지 저감<br />
+                  &nbsp;&nbsp;※ 시설 가동중 도로 노면 온도의 7.2 ~ 26.3℃ 감소 효과 확인(21.7월, 수원시청).<br />
+                  &nbsp;&nbsp;다만, 가뭄기나 강우량이 적을 경우 빗물을 원활히 공급하기 다소 곤란<br /><br />
+                  - (중수도) 수원시청, 장안구청, 월드컵경기장에 빗물 연계 중수도를 화장실·조경용수 등으로 사용하여 수도요금 절감(연 7백~30백만원)
+                </p>
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-2 items-start p-2">
+                  <div>
+                    <Image 
+                      src="/img/wrExample/img_ex_04_1.png" 
+                      alt="월드컵경기장 인근도로 노면 살수 이미지" 
+                      width={350}
+                      height={250}
+                      className="w-[100%] mx-auto" 
+                    />
+                    <span className="font-NotoSansKR text-xl block text-center font-semibold my-2">＜월드컵경기장 인근도로 노면 살수＞</span>
+                  </div>
+                  <div>
+                    <Image 
+                      src="/img/wrExample/img_ex_04_2.png" 
+                      alt="주유기 모양의 빗물 공급기 이미지" 
+                      width={350}
+                      height={250}
+                      className="w-[100%] mx-auto" 
+                    />
+                    <span className="font-NotoSansKR text-xl block text-center font-semibold my-2">＜주유기 모양의 빗물 공급기＞</span>
+                  </div>
+                  <div>
+                    <Image 
+                      src="/img/wrExample/img_ex_04_3.png" 
+                      alt="빗물주유기에서 살수용수 공급 이미지" 
+                      width={350}
+                      height={250}
+                      className="w-[100%] mx-auto" 
+                    />
+                    <span className="font-NotoSansKR text-xl block text-center font-semibold my-2">＜빗물주유기에서 살수용수 공급＞</span>
+                  </div>
+                  <div>
+                    <Image 
+                      src="/img/wrExample/img_ex_04_4.png" 
+                      alt="빗물 공급기 및 빗물분사장치 위치" 
+                      width={350}
+                      height={250}
+                      className="w-[100%] mx-auto" 
+                    />
+                    <span className="font-NotoSansKR text-xl block text-center font-semibold my-2">＜빗물 공급기 및 빗물분사장치 위치＞</span>
+                  </div>
+                </div>
+              </section>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+

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

@@ -0,0 +1,113 @@
+import Image from "next/image";
+
+export default function WrOverviewPage() {
+  return (
+    <div className="bg-[#F2F2F2]">
+        <div className="relative w-[950px] mx-auto pt-[50px] font-sans">
+          {/* 카드 1 - 물재이용 사업 추진 절차 */}
+          <div className="card-wrap mb-24" id="card1">
+            <h2 className="font-NotoSansKR relative text-center text-4xl font-bold text-gray-900 mb-6">
+              <span className="absolute left-1/2 top-[-15px] -translate-x-1/2 w-24 h-2 bg-blue-500 rounded-full"></span>
+              물재이용 사업 추진 절차 
+            </h2>
+            <div className="bg-white border border-gray-300 rounded-xl p-[60px] py-[50px]">
+              <table className="table-fixed w-full text-center text-sm">
+                <caption className="sr-only">물 재이용 추진 절차 상세 표</caption>
+                <colgroup>
+                  <col style={{ width: "28%" }} />
+                  <col style={{ width: "2%" }} />
+                  <col style={{ width: "35%" }} />
+                  <col style={{ width: "5%" }} />
+                  <col style={{ width: "30%" }} />
+                </colgroup>
+                <tbody>
+                  {/* 1단계 */}
+                  <tr><td></td><td></td><td className="font-NotoSansKR text-[17px] bg-[#EAEFF3] font-bold py-5">타당성 조사</td><td></td><td></td></tr>
+                  <tr><td></td><td></td><td className="font-NotoSansKR text-2xl font-bold text-center">↓</td><td></td><td></td></tr>
+                  {/* 2단계 */}
+                  <tr><td className="font-NotoSansKR text-2xl bg-[#F4D62D] text-black font-bold py-5">매칭시스템 신청</td><td></td><td className="font-NotoSansKR text-[17px] bg-[#EAEFF3] font-bold py-5">사업계획(안) 수립</td><td></td><td></td></tr>
+                  <tr><td></td><td></td><td className="font-NotoSansKR text-2xl font-bold text-center">↓</td><td></td><td></td></tr>
+                  {/* 3단계 */}
+                  <tr><td className="font-NotoSansKR text-2xl bg-[#F4D62D] text-black font-bold py-5">하수도정보시스템 신청</td><td></td><td className="font-NotoSansKR text-[17px] bg-[#EAEFF3] font-bold py-5">국고지원 신청</td><td className="font-NotoSansKR text-2xl font-bold">→</td><td className="font-NotoSansKR text-2xl text-[#fff] bg-[#00B076] font-bold py-5">기술검토(한국환경공단)</td></tr>
+                  <tr><td></td><td></td><td className="font-NotoSansKR text-2xl font-bold text-center">↓</td><td></td><td></td></tr>
+                  {/* 4단계 */}
+                  <tr><td></td><td></td><td className="font-NotoSansKR text-[17px] bg-[#EAEFF3] font-bold py-5">국고지원 확정 통보</td><td></td><td></td></tr>
+                  <tr><td></td><td></td><td className="font-NotoSansKR text-2xl font-bold text-center">↓</td><td></td><td></td></tr>
+                  {/* 5단계 */}
+                  <tr><td></td><td></td><td className="font-NotoSansKR text-[17px] bg-[#EAEFF3] font-bold py-5">사업계획 수립(실시설계)</td><td></td><td></td></tr>
+                  <tr><td></td><td></td><td className="font-NotoSansKR text-2xl font-bold text-center">↓</td><td></td><td></td></tr>
+                  {/* 6단계 */}
+                  <tr><td className="font-NotoSansKR text-2xl bg-[#F4D62D] text-black font-bold py-5">(행정관) 기술검토 신청</td><td></td><td className="font-NotoSansKR text-[17px] bg-[#EAEFF3] font-bold py-5">재원협의(지방환경관서장)</td><td className="font-NotoSansKR text-2xl font-bold">→</td><td className="font-NotoSansKR text-2xl text-[#fff] bg-[#00B076] font-bold py-5">기술검토(한국환경공단)</td></tr>
+                  <tr><td></td><td></td><td className="font-NotoSansKR text-2xl font-bold text-center">↓</td><td></td><td></td></tr>
+                  {/* 7단계 */}
+                  <tr><td className="font-NotoSansKR text-2xl bg-[#F4D62D] text-black font-bold py-5">(행정관) 기술검토 신청</td><td></td><td className="font-NotoSansKR text-[17px] bg-[#EAEFF3] font-bold py-5">설치승인(시도지사)</td><td className="font-NotoSansKR text-2xl font-bold">→</td><td className="font-NotoSansKR text-2xl text-[#fff] bg-[#00B076] font-bold py-5">기술검토(한국환경공단)</td></tr>
+                  <tr><td></td><td></td><td className="font-NotoSansKR text-2xl font-bold text-center">↓</td><td></td><td></td></tr>
+                  {/* 8단계 */}
+                  <tr><td></td><td></td><td className="font-NotoSansKR text-[17px] bg-[#EAEFF3] font-bold py-5">공사시행</td><td></td><td></td></tr>
+                  <tr><td></td><td></td><td className="font-NotoSansKR text-2xl font-bold text-center">↓</td><td></td><td></td></tr>
+                  {/* 9단계 */}
+                  <tr><td className="font-NotoSansKR text-2xl bg-[#F4D62D] text-black font-bold py-5">(행정관) 기술검토 신청</td><td></td><td className="font-NotoSansKR text-[17px] bg-[#EAEFF3] font-bold py-5">준공(국고정산)</td><td className="font-NotoSansKR text-2xl font-bold">→</td><td className="font-NotoSansKR text-2xl text-[#fff] bg-[#00B076] font-bold py-5">기술검토(한국환경공단)</td></tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+
+          {/* 카드 2 - 물재이용 매칭 시스템 */}
+          <div className="mt-36 card-wrap mb-24" id="card2">
+            <h2 className="font-NotoSansKR relative text-center text-4xl font-bold text-gray-900 mb-6">
+              <span className="absolute left-1/2 top-[-15px] -translate-x-1/2 w-24 h-2 bg-blue-500 rounded-full"></span>
+              물재이용 매칭 시스템이란?
+            </h2>
+            <div className="bg-white border border-gray-300 rounded-xl p-[60px] pt-[70px] pb-[70px]">
+              {/* 개요 */}
+              <section>
+                <h2 className="font-NotoSansKR text-2xl text-[#657D91] font-bold bg-[#EAEFF3] p-3 rounded mb-4">개요</h2>
+                <p className="font-NotoSansKR text-2xl font-bold text-gray-800 leading-relaxed">
+                  기후변화 및 지자체의 개발속도 차이에 따라 물 자원의 수요-공급 불균형이 발생하여 빗물, 중수도, 하수처리 재처리수 등의 공급 여유가 있는 지자체의 재이용수를 부족한 지자체 수요처에 공급하여 불균형 해소를 통한 수자원 절약 및 물 자원 순환
+                </p>
+              </section>
+
+              {/* 구성 */}
+              <section className="mt-8">
+                <h2 className="font-NotoSansKR text-2xl text-[#657D91] font-bold bg-[#EAEFF3] p-3 rounded mb-4">구성</h2>
+                <ul className=" font-NotoSansKR list-[square] pl-6 text-2xl font-bold text-gray-800 leading-relaxed space-y-2">
+                  <li>공급자: 하수처리장, 빗물이용시설, 중수도 등</li>
+                  <li>수요자: 산업체(냉각수), 공공시설(조경, 도로청소), 농민(농업용수) 등</li>
+                  <li>시스템: 수질, 수량, 거리 기반 매칭, 중개</li>
+                  <li>운영주체: 한국환경공단</li>
+                </ul>
+              </section>
+
+              {/* 절차 */}
+              <section className="mt-8">
+                <h2 className="font-NotoSansKR text-2xl text-[#657D91] font-bold bg-[#EAEFF3] p-3 rounded mb-4">사업 주요 내용</h2>
+                <p className="font-NotoSansKR text-2xl font-bold text-gray-800 leading-relaxed">
+                  ① 공급자 등록 → ② 수요자 조건 입력 → ③ 매칭 검토 → ④ 시스템 매칭 → ⑤ 계약·공급 이행
+                </p>
+              </section>
+
+              {/* 기대효과 */}
+              <section className="mt-8">
+                <h2 className="font-NotoSansKR text-2xl text-[#657D91] font-bold bg-[#EAEFF3] p-3 rounded mb-4">기대효과</h2>
+                <ul className="font-NotoSansKR list-[square] pl-6 text-2xl font-bold text-gray-800 leading-relaxed space-y-2">
+                  <li>물 자원 수요-공급 조정을 통한 효율적 분배</li>
+                  <li>물 재이용시설 데이터 수집으로 체계적 관리</li>
+                  <li>지자체, 사업시행자 등 재이용 정보 획득 용이</li>
+                </ul>
+                <div className="text-center my-6">
+                  <Image 
+                    src="/img/wrOverview/img_ov_01_1.png" 
+                    alt="하수 재이용 시스템 흐름도. 저장탱크에서 재처리된 물이 손 씻기, 수도, 세정 등에 공급되며 재이용 활성화를 통해 최적의 물공급 방안이 마련되는 과정을 시각화함." 
+                    width={650}
+                    height={500}
+                    className="h-[500px] mx-auto mb-4 rounded" 
+                  />
+                  <p className="font-NotoSansKR text-2xl font-bold text-gray-800 mt-10">(하수 재이용 시스템 개요도)</p>
+                </div>
+              </section>
+              </div>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,549 @@
+'use client';
+
+import { CHART_FORM, MainChart, type ChartConfig } from '@common/business_components';
+import React, { useEffect, useRef, useState } from 'react';
+
+interface RegionData {
+  name: string;
+  x: number;
+  y: number;
+  values: number[];
+}
+
+interface TableData {
+  region: string;
+  sewage: string;
+  rainwater: string;
+  reclaimed: string;
+  thermal: string;
+}
+
+
+const WrStatusPage: React.FC = () => {
+  const [selectedRegion, setSelectedRegion] = useState<string | null>(null);
+  const [hoveredRegion, setHoveredRegion] = useState<string | null>(null);
+  const [tooltipPosition, setTooltipPosition] = useState<{ x: number; y: number } | null>(null);
+  const svgContainerRef = useRef<HTMLDivElement>(null);
+  const [chartData] = useState<any[]>([
+    {
+      label : '서울',
+      하수 : 4,
+      빗물 : 816,
+      중수도 : 371,
+      온배수 : 0
+    },
+    {
+      label : '부산',
+      하수 : 13,
+      빗물 : 68,
+      중수도 : 20,
+      온배수 : 1
+    },
+    {
+      label : '대구',
+      하수 : 9,
+      빗물 : 294,
+      중수도 : 14,
+      온배수 : 2
+    },
+    {
+      label : '인천',
+      하수 : 17,
+      빗물 : 165,
+      중수도 : 35,
+      온배수 : 15
+    },
+    {
+      label : '광주',
+      하수 : 3,
+      빗물 : 74,
+      중수도 : 15,
+      온배수 : 15
+    },
+    {
+      label : '대전',
+      하수 : 2,
+      빗물 : 52,
+      중수도 : 11,
+      온배수 : 20
+    },
+    {
+      label : '울산',
+      하수 : 8,
+      빗물 : 111,
+      중수도 : 19,
+      온배수 : 30
+    },
+    {
+      label : '세종',
+      하수 : 9,
+      빗물 : 65,
+      중수도 : 0,
+      온배수 : 0
+    },
+    {
+      label : '경기',
+      하수 : 176,
+      빗물 : 1009,
+      중수도 : 252,
+      온배수 : 40
+    },
+    {
+      label : '강원',
+      하수 : 69,
+      빗물 : 69,
+      중수도 : 22,
+      온배수 : 0
+    },
+    {
+      label : '충북',
+      하수 : 38,
+      빗물 : 17,
+      중수도 : 91,
+      온배수 : 0
+    },
+    {
+      label : '충남', 
+      하수 : 67,
+      빗물 : 54,
+      중수도 : 188,
+      온배수 : 0
+    },
+    { 
+      label : '전북',
+      하수 : 55,
+      빗물 : 33,
+      중수도 : 220,
+      온배수 : 0
+    },
+    {
+      label : '전남',
+      하수 : 83,
+      빗물 : 16,
+      중수도 : 75,
+      온배수 : 0
+    },
+    {
+      label : '경북',
+      하수 : 81,
+      빗물 : 37,
+      중수도 : 70,
+      온배수 : 0
+    },
+    {
+      label : '경남',
+      하수 : 75,
+      빗물 : 27,
+      중수도 : 140,
+      온배수 : 0
+    },
+    {
+      label : '제주',
+      하수 : 8,
+      빗물 : 47,
+      중수도 : 64,
+      온배수 : 0
+    }
+  ]);
+
+  const chartConfig = chartData.reduce((config, element) => {
+    config[element.label] = {
+      label: element.label,
+      color : "hsl(var(--chart-1))"
+    };
+    return config;
+  }, {} as Record<string, { label: string; color: string; }>) satisfies ChartConfig;
+
+  const chartOption = {
+    chartForm : CHART_FORM.BAR,
+    chartConfig : chartConfig,
+    chartData : chartData,
+    chartTitle : '',
+    chartClassName : "h-[300px] w-full",
+    graphSize : 40,
+    yFieldText : '시설(개소)',
+    showLegend : true
+  }
+
+  const colorLegend = [
+    { label: '하수', color: '#FF6B6B', key: 'sewage' },
+    { label: '빗물', color: '#4ECDC4', key: 'rainwater' },
+    { label: '중수도', color: '#45B7D1', key: 'reclaimed' },
+    { label: '온배수', color: '#FED16A', key: 'thermal' },
+  ];
+
+  const regionIdMap: Record<string, string> = {
+    서울: '서울특별시',
+    부산: '부산광역시',
+    대구: '대구광역시',
+    인천: '인천광역시',
+    광주: '광주광역시',
+    대전: '대전광역시',
+    울산: '울산광역시',
+    세종: '세종특별자치시',
+    경기: '경기도',
+    강원: '강원특별자치도',
+    충북: '충청북도',
+    충남: '충청남도',
+    전북: '전라북도',
+    전남: '전라남도',
+    경북: '경상북도',
+    경남: '경상남도',
+    제주: '제주특별자치도'
+  };
+
+  const tableData: TableData[] = [
+    { region: '전국', sewage: '717(1,137,538)', rainwater: '3544(13,945)', reclaimed: '1018(222,476)', thermal: '123' },
+    { region: '서울특별시', sewage: '4(114,908)', rainwater: '816(430)', reclaimed: '371(341)', thermal: '0' },
+    { region: '부산광역시', sewage: '13(146,197)', rainwater: '68(335)', reclaimed: '20(512)', thermal: '1' },
+    { region: '대구광역시', sewage: '9(102,380)', rainwater: '294(133)', reclaimed: '14(44)', thermal: '2' },
+    { region: '인천광역시', sewage: '17(57,691)', rainwater: '165(642)', reclaimed: '35(7,859)', thermal: '15' },
+    { region: '광주광역시', sewage: '3(28,738)', rainwater: '74(23)', reclaimed: '15(450)', thermal: '15' },
+    { region: '대전광역시', sewage: '2(11,966)', rainwater: '52(2)', reclaimed: '11(492)', thermal: '20' },
+    { region: '울산광역시', sewage: '8(36,076)', rainwater: '111(39)', reclaimed: '19(28,904)', thermal: '30' },
+    { region: '세종특별자치시', sewage: '9(2,555)', rainwater: '65(16)', reclaimed: '0(0)', thermal: '0' },
+    { region: '경기도', sewage: '176(313,298)', rainwater: '1009(4,735)', reclaimed: '252(77,096)', thermal: '40' },
+    { region: '강원특별자치도', sewage: '69(19,677)', rainwater: '69(4)', reclaimed: '22(447)', thermal: '0' },
+    { region: '충청북도', sewage: '38(15,607)', rainwater: '17(91)', reclaimed: '91(2,211)', thermal: '0' },
+    { region: '충청남도', sewage: '67(41,368)', rainwater: '54(77)', reclaimed: '188(50,434)', thermal: '0' },
+    { region: '전라북도', sewage: '55(42,671)', rainwater: '33(199)', reclaimed: '220(9,453)', thermal: '0' },
+    { region: '전라남도', sewage: '83(23,560)', rainwater: '16(885)', reclaimed: '75(15,412)', thermal: '0' },
+    { region: '경상북도', sewage: '81(129,081)', rainwater: '37(341)', reclaimed: '70(27,818)', thermal: '0' },
+    { region: '경상남도', sewage: '75(50,101)', rainwater: '27(244)', reclaimed: '140(343)', thermal: '0' },
+    { region: '제주특별자치도', sewage: '8(1,666)', rainwater: '47(5,746)', reclaimed: '64(660)', thermal: '0' },
+  ];
+
+  const regionData: RegionData[] = [
+    { name: '서울', x: 170, y: 140, values: [0.3, 0.3, 0.2, 0.2] },
+    { name: '인천', x: 120, y: 150, values: [0.3, 0.3, 0.2, 0.2] },
+    { name: '경기', x: 210, y: 210, values: [0.3, 0.3, 0.2, 0.2] },
+    { name: '강원', x: 330, y: 120, values: [0.3, 0.3, 0.2, 0.2] },
+    { name: '충북', x: 260, y: 280, values: [0.3, 0.3, 0.2, 0.2] },
+    { name: '충남', x: 100, y: 320, values: [0.3, 0.3, 0.2, 0.2] },
+    { name: '세종', x: 180, y: 305, values: [0.3, 0.3, 0.2, 0.2] },
+    { name: '대전', x: 195, y: 360, values: [0.3, 0.3, 0.2, 0.2] },
+    { name: '전북', x: 170, y: 450, values: [0.3, 0.3, 0.2, 0.2] },
+    { name: '전남', x: 160, y: 600, values: [0.3, 0.3, 0.2, 0.2] },
+    { name: '광주', x: 120, y: 530, values: [0.3, 0.3, 0.2, 0.2] },
+    { name: '경북', x: 400, y: 320, values: [0.3, 0.3, 0.2, 0.2] },
+    { name: '경남', x: 310, y: 530, values: [0.3, 0.3, 0.2, 0.2] },
+    { name: '대구', x: 350, y: 450, values: [0.3, 0.3, 0.2, 0.2] },
+    { name: '울산', x: 450, y: 500, values: [0.3, 0.3, 0.2, 0.2] },
+    { name: '부산', x: 420, y: 550, values: [0.3, 0.3, 0.2, 0.2] },
+    { name: '제주', x: 60, y: 750, values: [0.3, 0.3, 0.2, 0.2] },
+  ];
+
+  const handleMarkerClick = (regionId: string) => {
+    if (selectedRegion === regionId) {
+      setSelectedRegion(null);
+    } else {
+      setSelectedRegion(regionId);
+    }
+  };
+
+
+  const createDonutMarker = (svg: SVGSVGElement, x: number, y: number, name: string, values: number[]) => {
+    const colors = ['#FF6B6B', '#4ECDC4', '#45B7D1', '#FED16A'];
+    const radius = 26;
+    const innerRadius = 18;
+    // const regionId = regionIdMap[name];
+    const regionId = regionIdMap[name];
+    if (!regionId) {
+      console.warn(`Invalid region name: ${name}`);
+      return;
+    }
+
+    const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+    g.setAttribute('transform', `translate(${x}, ${y})`);
+    g.setAttribute('id', `marker-${name}`);
+    g.style.cursor = 'pointer';
+    g.setAttribute('role', 'button');
+    g.setAttribute('tabindex', '0');
+    g.setAttribute('aria-label', `${name} 지역 선택`);
+
+    const bg = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
+    bg.setAttribute('r', radius.toString());
+    bg.setAttribute('fill', 'white');
+    bg.setAttribute('pointer-events', 'all');
+    g.appendChild(bg);
+
+    let startAngle = 0;
+    values.forEach((value, idx) => {
+      const endAngle = startAngle + value * 2 * Math.PI;
+      const x1 = radius * Math.sin(startAngle);
+      const y1 = -radius * Math.cos(startAngle);
+      const x2 = radius * Math.sin(endAngle);
+      const y2 = -radius * Math.cos(endAngle);
+      const largeArc = endAngle - startAngle > Math.PI ? 1 : 0;
+      const d = `M ${x1} ${y1} A ${radius} ${radius} 0 ${largeArc} 1 ${x2} ${y2} L 0 0 Z`;
+
+      const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+      path.setAttribute('d', d);
+      path.setAttribute('fill', colors[idx % colors.length] as string);
+      g.appendChild(path);
+
+      startAngle = endAngle;
+    });
+
+    const center = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
+    center.setAttribute('r', innerRadius.toString());
+    center.setAttribute('fill', 'white');
+    g.appendChild(center);
+
+    const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+    text.setAttribute('x', '0');
+    text.setAttribute('y', '2');
+    text.setAttribute('text-anchor', 'middle');
+    text.setAttribute('font-size', '13');
+    text.setAttribute('font-weight', 'bold');
+    text.setAttribute('dominant-baseline', 'middle');
+    text.setAttribute('fill', 'black');
+    text.textContent = name || '';
+    g.appendChild(text);
+    
+    g.addEventListener('mouseenter', (e) => {
+      setHoveredRegion(regionId);
+      setTooltipPosition({ x: e.clientX, y: e.clientY });
+    });
+
+    g.addEventListener('mouseleave', () => {
+      setHoveredRegion(null);
+      setTooltipPosition(null);
+    });
+
+    g.addEventListener('click', () => {
+      handleMarkerClick(regionId);
+    });
+
+    g.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+
+        const matrix = g.getScreenCTM();
+        if (!matrix) return; // 또는 console.warn('matrix is null'); return;
+
+        const point = svg.createSVGPoint();
+        point.x = 0;
+        point.y = 0;
+        const transformed = point.matrixTransform(matrix);
+
+        setTooltipPosition({ x: transformed.x, y: transformed.y });
+        setHoveredRegion(regionId);
+        handleMarkerClick(regionId);
+      }
+    });
+
+    svg.appendChild(g);
+  };
+
+  useEffect(() => {
+    const loadSVG = async () => {
+      try {
+        const response = await fetch('/img/wrStatus/southKoreaMap.svg');
+        const svgText = await response.text();
+        
+        if (svgContainerRef.current) {
+          svgContainerRef.current.innerHTML = svgText;
+          
+          const svg = svgContainerRef.current.querySelector('svg') as SVGSVGElement;
+          if (svg) {
+            svg.style.width = '58%';
+            svg.style.height = 'auto';
+            svg.style.objectFit = 'contain';
+
+            // Set default fills
+            const paths = svg.querySelectorAll('path');
+            paths.forEach(path => {
+              if (!path.getAttribute('fill') || path.getAttribute('fill') === 'none') {
+                path.setAttribute('fill', '#ffffff');
+              }
+            });
+
+            // Create markers
+            regionData.forEach(region => {
+              createDonutMarker(svg, region.x, region.y, region.name, region.values);
+            });
+          }
+        }
+      } catch (error) {
+        console.error('SVG 로딩 실패:', error);
+        if (svgContainerRef.current) {
+          svgContainerRef.current.innerHTML = "<p className='text-red-500'>SVG 로딩 실패</p>";
+        }
+      }
+    };
+
+    loadSVG();
+  }, []);
+
+  useEffect(() => {
+    const svg = svgContainerRef.current?.querySelector('svg');
+    if (svg) {
+      const paths = svg.querySelectorAll('path');
+      paths.forEach(path => {
+        const pathId = path.getAttribute('id');
+        if (pathId) {
+          if (selectedRegion === pathId) {
+            path.setAttribute('fill', '#2563eb');
+          } else {
+            const original = '#ffffff';
+            path.setAttribute('fill', original);
+          }
+        }
+      });
+    }
+  }, [selectedRegion]);
+
+  return (
+    <div className="flex h-screen bg-[#F2F2F2] text-gray-800">
+      {/* 우측 콘텐츠 영역 */}
+      <main className="flex-1 p-6 overflow-auto">
+        {/* 상단 제목 */}
+        <div className="mb-6 flex justify-between items-center">
+          <h2 className="text-2xl font-bold">물재이용 현황</h2>
+          <div className="text-sm text-gray-500">관리자 ▼</div>
+        </div>
+
+        {/* 콘텐츠 본문 */}
+        <div className="grid grid-cols-1 xl:grid-cols-2 gap-4">
+          {/* 지도 카드 */}
+          <div className="bg-white rounded-xl shadow border border-[#DBE2E6] overflow-hidden max-h-[900px]">
+            {/* 타이틀 영역 */}
+            <div className="border-b border-[#DBE2E6] px-4 py-3">
+              <h3 className="text-[12px] font-semibold">재이용시설현황(2023)</h3>
+              <p className="text-[12px] text-[#999] font-medium">행정구역별 재이용시설현황(개소)</p>
+            </div>
+            
+            {/* 본문 콘텐츠 */}
+            <div className="p-4">
+              <div className="bg-[#E2EDF3] p-4 rounded shadow relative">
+                <div className="flex justify-center">
+                  <div 
+                    ref={svgContainerRef}
+                    className="w-full max-w-5xl max-h-[680px] overflow-y-auto block mx-auto"
+                    aria-label="대한민국 지역별 재이용시설 분포도" 
+                    role="region" 
+                    tabIndex={0}
+                  />
+                </div>
+
+                {typeof window !== 'undefined' && hoveredRegion && tooltipPosition && (
+                  <div
+                    className="fixed bg-white text-[12px] text-gray-700 border border-gray-300 shadow-lg rounded px-3 py-2 z-50"
+                    style={{
+                      top: tooltipPosition.y + 10,
+                      left: tooltipPosition.x + 10,
+                      pointerEvents: 'none',
+                    }}
+                  >
+                    <div className="font-semibold mb-1">{hoveredRegion}</div>
+                    <div className="space-y-1">
+                      {colorLegend.map(({ label, color, key }) => (
+                        <div key={key} className="flex items-center space-x-2">
+                          <span className="text-[12px] inline-block w-3 h-3 rounded-sm" style={{ backgroundColor: color }}></span>
+                          <span className="text-[12px]">
+                            {label}:{' '}
+                            {tableData.find(d => d.region === hoveredRegion)?.[key as keyof TableData] ?? '-'}
+                          </span>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                )}
+
+                {/* 범례 */}
+                <div className="absolute bottom-2 right-2 bg-white rounded-lg shadow-md p-4 text-sm space-y-2">
+                  <div className="flex items-center space-x-2">
+                    <span className="inline-block w-4 h-4 rounded-sm" style={{backgroundColor: '#FF6B6B'}}></span>
+                    <span className="text-[12px] text-gray-900">하수재이용시설 (총 717개소)</span>
+                  </div>
+                  <div className="flex items-center space-x-2">
+                    <span className="inline-block w-4 h-4 rounded-sm" style={{backgroundColor: '#4ECDC4'}}></span>
+                    <span className="text-[12px] text-gray-900">빗물이용시설 (총 3,730개소)</span>
+                  </div>
+                  <div className="flex items-center space-x-2">
+                    <span className="inline-block w-4 h-4 rounded-sm" style={{backgroundColor: '#45B7D1'}}></span>
+                    <span className="text-[12px] text-gray-900">중수도시설 (총 1,074개소)</span>
+                  </div>
+                  <div className="flex items-center space-x-2">
+                    <span className="inline-block w-4 h-4 rounded-sm" style={{backgroundColor: '#FED16A'}}></span>
+                    <span className="text-[12px] text-gray-900">온배수시설 (총 201개소)</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* 우측 콘텐츠 (표 + 차트) */}
+          <div className="col-span-1 flex flex-col space-y-4">
+            {/* 재이용시설현황 표 */}
+            <div className="bg-white rounded-xl shadow border border-[#DBE2E6] overflow-hidden">
+              {/* 타이틀 + 버튼 영역 */}
+              <div className="flex justify-between items-center border-b border-[#DBE2E6] px-4 py-3">
+                <div>
+                  <h3 className="text-[12px] font-semibold">재이용시설현황(2023)</h3>
+                  <p className="text-[12px] text-[#999] font-medium">행정구역별 재이용시설현황(개소)</p>
+                </div>
+              </div>
+              <div className="p-4">
+                <div className="rounded border border-[#DBE2E6] shadow overflow-auto max-h-[292px] p-4">
+                  <table className="min-w-full text-sm text-center">
+                    <caption className="sr-only text-[12px]">행정구역별 하수, 빗물, 중수도, 온배수 재이용시설 수</caption>
+                    <thead className="bg-gray-50 text-xs text-gray-600 uppercase border-b">
+                      <tr>
+                        <th className="text-[12px] font-semibold px-4 py-2">번호</th>
+                        <th className="text-[12px] font-semibold px-4 py-2">시도</th>
+                        <th className="text-[12px] font-semibold px-4 py-2">하수(이용량,천m³/년)</th>
+                        <th className="text-[12px] font-semibold px-4 py-2">빗물(이용량,천m³/년)</th>
+                        <th className="text-[12px] font-semibold px-4 py-2">중수도(이용량,천m³/년)</th>
+                        <th className="text-[12px] font-semibold px-4 py-2">온배수(이용량,천m³/년)</th>
+                      </tr>
+                    </thead>
+                    <tbody className="divide-y">
+                      {tableData.map((row, index) => (
+                        <tr key={index} className="hover:bg-gray-50">
+                          <td className="text-[12px] px-4 py-2 text-center">
+                            {index+1}
+                          </td>
+                          <td className="text-[12px]">{row.region}</td>
+                          <td className="text-[12px]">{row.sewage}</td>
+                          <td className="text-[12px]">{row.rainwater}</td>
+                          <td className="text-[12px]">{row.reclaimed}</td>
+                          <td className="text-[12px]">{row.thermal}</td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+            </div>
+
+            {/* 재이용통계 차트 */}
+            <div className="bg-white rounded-xl shadow border border-[#DBE2E6] overflow-hidden">
+              <div className="border-b border-[#DBE2E6] px-4 py-3">
+                <h3 className="text-[12px] font-semibold">재이용통계(2023)</h3>
+                <p className="text-[12px] text-[#999] font-medium">행정구역별 재이용시설 현황 개소수 그래프</p>
+              </div>
+              <div className="p-4 bg-[#f9fbfd]">
+                <div className="h-[305px] text-gray-500">
+                  <MainChart 
+                    chartForm={chartOption.chartForm}
+                    chartConfig={chartOption.chartConfig} 
+                    chartData={chartOption.chartData} 
+                    chartTitle={chartOption.chartTitle} 
+                    chartClassName={chartOption.chartClassName}
+                    graphSize={chartOption.graphSize}
+                    yFieldText={chartOption.yFieldText}
+                    showLegend={chartOption.showLegend}
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+};
+
+export default WrStatusPage;

apps/dm/app/(popup-layout)/layout.tsx

@@ -0,0 +1,11 @@
+"use client";
+import "../globals.css";
+import { StoreProvider } from "../store";
+
+export default function PopupLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return <StoreProvider>{children}</StoreProvider>;
+}

apps/dm/app/(popup-layout)/map/popup/page.tsx

@@ -0,0 +1,170 @@
+"use client";
+
+import Gis from "@common/business_components/ui/map/Gis";
+import { useEffect, useRef, useState, useCallback } from "react";
+import { mapService } from "../service";
+import GisApp from "@common/business_components/ui/map/lib/gis.core";
+import { SearchBar } from "@/components/ui/map/searchBar/searchBar";
+import { useDmStore } from "@/app/store";
+
+// export type SubsInfo={
+//   ruseUtztnFcltNm: string;        // 재이용시설명
+//   ruseUtztnFcltCd: string;        // 재이용시설 코드
+// }
+const Map = () => {
+
+  //수요처 저장하는 함수 setSubsInfo
+  //setSubsInfo(subsInfo:SubsInfo[]):void  
+  const { map,setSubsInfo } = useDmStore(
+    (state) => state
+  );
+  //저장된 수요처 리스트
+  const {  subsInfo } = map;
+
+  const [treeData, setTreeData] = useState([]); // 초기값을 객체 또는 null로 설정
+  const gisMaps = useRef<any | null>(null);
+  const [isOpen, setIsOpen] = useState(false); // 팝업 열기/닫기 상태
+  const [isSearchModalOpen, setIsSearchModalOpen] = useState(true); // SearchModal 열림 상태
+  const [featureData, setFeatureData] = useState(null); // 선택된 피쳐 데이터
+  const [checkedLayers, setCheckedLayers] = useState<string[]>([]);
+  const [checkedLayersData, setCheckedLayersData] = useState<any[]>([]);
+  const [selectDataPk, setSelectDataPk] = useState<string>("");
+  const [subs, setSubs] = useState<object[]>([]);
+  
+  //적용 버튼 클릭 이벤트 
+  const onApply = () => {
+     //setSubs([{'41110PB001R1':'수원제1,2 재이용1'},{'41110PB001R2':'수원제1,2 재이용2'}]);
+     console.log(subs)
+  };
+
+  const fetchData = async () => {
+    try {
+      const response = await mapService.getLyrStngs();
+      setTreeData(response); // API 응답 저장
+    } catch (error) {
+      console.error("데이터 불러오기 실패:", error);
+    }
+  };
+
+  // 팝업 닫기 핸들러를 useCallback으로 메모이제이션
+  const handlePopupClose = useCallback(() => {
+    setIsOpen(false);
+    setFeatureData(null);
+  }, []);
+
+  // 컴포넌트 마운트 시 1회 실행
+  useEffect(() => {
+    fetchData();
+  }, []);
+
+  useEffect(() => {
+    console.log("Selected Data Pk: ", selectDataPk);
+  }, [selectDataPk]);
+
+  // 체크된 레이어 정보를 받는 핸들러
+  const handleCheckedLayersChange = (
+    checkedIds: string[],
+    checkedNodesData: any[]
+  ) => {
+    setCheckedLayers(checkedIds);
+    setCheckedLayersData(checkedNodesData);
+  };
+
+  // SearchModal, GisContent 등에서 호출
+  const onFeatureSelect = (data: any) => {
+    const map = gisMaps.current;
+    if (!map) {
+      console.warn("지도가 초기화되지 않았습니다.");
+      return;
+    }
+
+    // 항상 같은 select 객체 사용
+    const select = GisApp.Module.select as any;
+    if (!select) return;
+
+    // 1. 기존 선택 초기화
+    select.resetSelectedFeature();
+
+    // 2. data가 OpenLayers Feature 인스턴스인지 확인
+    let foundFeature: any = null;
+    if (
+      data &&
+      typeof data.getGeometry === "function" &&
+      typeof data.setStyle === "function"
+    ) {
+      // 이미 Feature 인스턴스라면 그대로 사용
+      foundFeature = data;
+    } else {
+      // 아니면 featureId로 맵에서 Feature 인스턴스를 찾아서 사용
+      const featureId = data.fid || data.ftrIdn || data.id;
+      map
+        .getLayers()
+        .getArray()
+        .forEach((layer: any) => {
+          const source = layer.getSource?.();
+          if (source?.getFeatureById) {
+            const feature = source.getFeatureById(String(featureId).trim());
+            if (feature) foundFeature = feature;
+          }
+        });
+    }
+
+    // 3. 피처 선택
+    if (foundFeature) {
+      const geometry = foundFeature.getGeometry();
+      if (geometry) {
+        const extent = geometry.getExtent();
+
+        map.getView().fit(extent, {
+          duration: 300,
+          padding: [50, 50, 50, 50],
+          maxZoom: 16,
+          constrainResolution: true,
+          nearest: true,
+        });
+      }
+      select.selectFeature(foundFeature, true);
+    } else {
+      console.warn("OpenLayers Feature를 찾을 수 없습니다:", data);
+    }
+
+    setFeatureData(data);
+    setIsOpen(true);
+    setIsSearchModalOpen(false);
+  };
+
+  return (
+    <>
+      <SearchBar
+        setHasuPk={(hasuPk: string) => {
+          if (hasuPk !== "") {
+            setSelectDataPk(hasuPk);
+          }
+        }}
+        onApply={onApply}
+      />
+      <div className="bg-container">
+        <Gis
+          treeData={treeData}
+          isSearch={false}
+          gisMaps={gisMaps}
+          isMiniMap={false}
+          searchView={undefined}
+          detailView={null}
+          onFeatureSelect={onFeatureSelect}
+          setIsOpen={setIsOpen}
+          setFeatureData={setFeatureData}
+          featureData={featureData}
+          setIsSearchModalOpen={setIsSearchModalOpen}
+          isOpen={isOpen}
+          isSearchModalOpen={isSearchModalOpen}
+          onCheckedLayersChange={handleCheckedLayersChange}
+          imgVisble={false}
+          setData={setSubs}
+        />
+      </div>
+    </>
+  );
+};
+
+export default Map;

apps/dm/app/(popup-layout)/map/popup/sdmInfoMap.tsx

@@ -0,0 +1,147 @@
+"use client";
+
+import Gis from "@common/business_components/ui/map/Gis";
+import { useEffect, useRef, useState, useCallback } from "react";
+import { mapService } from "../service";
+import GisApp from "@common/business_components/ui/map/lib/gis.core";
+import { SearchBar } from "@/components/ui/map/searchBar/searchBar";
+
+const Map = () => {
+  const [treeData, setTreeData] = useState([]); // 초기값을 객체 또는 null로 설정
+  const gisMaps = useRef<any | null>(null);
+  const [isOpen, setIsOpen] = useState(false); // 팝업 열기/닫기 상태
+  const [isSearchModalOpen, setIsSearchModalOpen] = useState(true); // SearchModal 열림 상태
+  const [featureData, setFeatureData] = useState(null); // 선택된 피쳐 데이터
+  const [checkedLayers, setCheckedLayers] = useState<string[]>([]);
+  const [checkedLayersData, setCheckedLayersData] = useState<any[]>([]);
+  const [selectDataPk, setSelectDataPk] = useState<string>("");
+
+  const fetchData = async () => {
+    try {
+      const response = await mapService.getLyrStngs();
+      setTreeData(response); // API 응답 저장
+    } catch (error) {
+      console.error("데이터 불러오기 실패:", error);
+    }
+  };
+
+  // 팝업 닫기 핸들러를 useCallback으로 메모이제이션
+  const handlePopupClose = useCallback(() => {
+    setIsOpen(false);
+    setFeatureData(null);
+  }, []);
+
+  // 컴포넌트 마운트 시 1회 실행
+  useEffect(() => {
+    fetchData();
+  }, []);
+
+  useEffect(() => {
+    console.log("Selected Data Pk: ", selectDataPk);
+  }, [selectDataPk]);
+
+  // 체크된 레이어 정보를 받는 핸들러
+  const handleCheckedLayersChange = (
+    checkedIds: string[],
+    checkedNodesData: any[]
+  ) => {
+    setCheckedLayers(checkedIds);
+    setCheckedLayersData(checkedNodesData);
+  };
+
+  // SearchModal, GisContent 등에서 호출
+  const onFeatureSelect = (data: any) => {
+    const map = gisMaps.current;
+    if (!map) {
+      console.warn("지도가 초기화되지 않았습니다.");
+      return;
+    }
+
+    // 항상 같은 select 객체 사용
+    const select = GisApp.Module.select as any;
+    if (!select) return;
+
+    // 1. 기존 선택 초기화
+    select.resetSelectedFeature();
+
+    // 2. data가 OpenLayers Feature 인스턴스인지 확인
+    let foundFeature: any = null;
+    if (
+      data &&
+      typeof data.getGeometry === "function" &&
+      typeof data.setStyle === "function"
+    ) {
+      // 이미 Feature 인스턴스라면 그대로 사용
+      foundFeature = data;
+    } else {
+      // 아니면 featureId로 맵에서 Feature 인스턴스를 찾아서 사용
+      const featureId = data.fid || data.ftrIdn || data.id;
+      map
+        .getLayers()
+        .getArray()
+        .forEach((layer: any) => {
+          const source = layer.getSource?.();
+          if (source?.getFeatureById) {
+            const feature = source.getFeatureById(String(featureId).trim());
+            if (feature) foundFeature = feature;
+          }
+        });
+    }
+
+    // 3. 피처 선택
+    if (foundFeature) {
+      const geometry = foundFeature.getGeometry();
+      if (geometry) {
+        const extent = geometry.getExtent();
+
+        map.getView().fit(extent, {
+          duration: 300,
+          padding: [50, 50, 50, 50],
+          maxZoom: 16,
+          constrainResolution: true,
+          nearest: true,
+        });
+      }
+      select.selectFeature(foundFeature, true);
+    } else {
+      console.warn("OpenLayers Feature를 찾을 수 없습니다:", data);
+    }
+
+    setFeatureData(data);
+    setIsOpen(true);
+    setIsSearchModalOpen(false);
+  };
+
+  return (
+    <>
+      <SearchBar
+        setHasuPk={(hasuPk: string) => {
+          if (hasuPk !== "") {
+            setSelectDataPk(hasuPk);
+          }
+        }}
+      />
+      <div className="bg-container">
+        <Gis
+          treeData={treeData}
+          isSearch={false}
+          gisMaps={gisMaps}
+          isMiniMap={false}
+          searchView={undefined}
+          detailView={null}
+          onFeatureSelect={onFeatureSelect}
+          setIsOpen={setIsOpen}
+          setFeatureData={setFeatureData}
+          featureData={featureData}
+          setIsSearchModalOpen={setIsSearchModalOpen}
+          isOpen={isOpen}
+          isSearchModalOpen={isSearchModalOpen}
+          onCheckedLayersChange={handleCheckedLayersChange}
+          imgVisble={false}
+        />
+      </div>
+    </>
+  );
+};
+
+export default Map;

apps/dm/app/(popup-layout)/map/popup/windowPotal.tsx

@@ -0,0 +1,94 @@
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import { createPortal } from 'react-dom';
+
+// 현재 문서의 스타일(CSS)을 새 창으로 복사하는 함수
+const copyStyles = (sourceDoc: Document, targetDoc: Document) => {
+  Array.from(sourceDoc.styleSheets).forEach(styleSheet => {
+    try {
+      if (styleSheet.cssRules) { // <style> 태그로 주입된 CSS
+        const newStyleEl = sourceDoc.createElement('style');
+        Array.from(styleSheet.cssRules).forEach(cssRule => {
+          newStyleEl.appendChild(sourceDoc.createTextNode(cssRule.cssText));
+        });
+        targetDoc.head.appendChild(newStyleEl);
+      } else if (styleSheet.href) { // <link> 태그로 연결된 CSS 파일
+        const newLinkEl = sourceDoc.createElement('link');
+        newLinkEl.rel = 'stylesheet';
+        newLinkEl.href = styleSheet.href;
+        targetDoc.head.appendChild(newLinkEl);
+      }
+    } catch (e) {
+      console.warn('스타일시트를 복사할 수 없습니다:', e);
+    }
+  });
+};
+
+interface NewWindowPortalProps {
+  children: React.ReactNode;
+  onClose: () => void;
+  title?: string;
+  width?: number;
+  height?: number;
+  resizable?: string;
+  scrollbars?: string;
+}
+
+const NewWindowPortal: React.FC<NewWindowPortalProps> = ({ children, onClose, title = "" , width = 900, height = 800, resizable = "yes", scrollbars= "yes" }) => {
+  const [container, setContainer] = useState<HTMLElement | null>(null);
+  const newWindowRef = useRef<Window | null>(null);
+  const onCloseRef = useRef(onClose);
+
+  // onClose 함수를 ref로 저장하여 의존성 문제 해결
+  useEffect(() => {
+    onCloseRef.current = onClose;
+  }, [onClose]);
+
+  const handleUnload = useCallback(() => {
+    onCloseRef.current();
+  }, []);
+
+  useEffect(() => {
+    // 이미 창이 열려있으면 새로 열지 않음
+    if (newWindowRef.current && !newWindowRef.current.closed) return;
+
+    // 1. 새 창을 열고 참조를 저장합니다.
+    const popupOptions =  `width=${width},height=${height},resizable=${resizable},scrollbars=${scrollbars}`;
+    newWindowRef.current = window.open('', title, popupOptions);
+    
+    if (newWindowRef.current) {
+      newWindowRef.current.document.title = title;
+      
+      // 2. React 컴포넌트를 마운트할 컨테이너 div를 생성하여 새 창의 body에 추가합니다.
+      const div = newWindowRef.current.document.createElement('div');
+      newWindowRef.current.document.body.appendChild(div);
+      setContainer(div);
+
+      // 3. 메인 창의 스타일을 새 창으로 복사합니다. (매우 중요)
+      copyStyles(document, newWindowRef.current.document);
+
+      // 4. 사용자가 창을 닫을 때 부모에게 알리기 위한 이벤트 리스너를 설정합니다.
+      // const handleUnload = () => {
+      //   onClose();
+      // };
+      newWindowRef.current.addEventListener('unload', handleUnload);
+
+      // 5. 컴포넌트가 사라질 때 창을 닫는 클린업 함수를 반환합니다.
+      return () => {
+        if (newWindowRef.current) {
+          newWindowRef.current.removeEventListener('unload', handleUnload);
+          if (!newWindowRef.current.closed) {
+            newWindowRef.current.close();
+          }
+        }
+      };
+    } else {
+      alert('팝업이 차단되었습니다. 팝업 차단을 해제하고 다시 시도해주세요.');
+      onCloseRef.current();
+    }
+  }, []);
+
+  // `createPortal`을 사용해 children을 새 창의 container div에 렌더링합니다.
+  return container ? createPortal(children, container) : null;
+};
+
+export default NewWindowPortal;

apps/dm/app/(popup-layout)/map/service/map.ts

@@ -1,10 +1,8 @@
 
-import axios from 'axios'
-
 /**
  * 관망도 API
  */
-const API_URL = `${process.env.NEXT_PUBLIC_SEWERAGE_API_URL}/v1/map`
+ const API_URL = `${process.env.NEXT_PUBLIC_SEWERAGE_API_URL}/v1/map`
 
 export type LyrStngProps = {
   lyr_sn: string
@@ -31,7 +29,18 @@ export type LyrStngProps = {
 
 export const mapService = {
   //레이어 설정 조회
-  getLyrStngs: () => {
-    return axios.get(`${API_URL}/lyrStngs/SN_NETWORK`)
+  getLyrStngs: async () => {
+    const response = await fetch(`${API_URL}/lyrStngs/DM_NETWORK`, {
+      method: 'GET',
+      headers: {
+        'Accept': 'application/json',
+      },
+    });
+
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+
+    return response.json();
   }
 }

apps/dm/app/base.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import { BaseLayout } from "@common/components";
+import type { MenuItem } from "./store/common";
+import { useDmStore } from "./store";
+import { usePathname, useRouter } from "next/navigation";
+
+export default function Base({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  const { getMenuAuth } = useDmStore((state) => state);
+
+  const router = useRouter();
+  const pathname = usePathname();
+
+  const handleClick = (id: MenuItem) => {
+    getMenuAuth(id.menuCd);
+    router.push(id.urlPath);
+  };
+
+  return (
+    <BaseLayout currentPath={pathname ?? ""} handleMenuClick={handleClick}>
+      {children}
+    </BaseLayout>
+  );
+}

apps/dm/app/common/transValueFormat.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+
+type CommonProps = {
+  value: string | number | '';
+  format: string;
+}
+
+export default function TransValueFormat({value='', format=''}: CommonProps) {
+  return (
+    format === 'yyyyMMdd' ? 
+      <>{value.toString().substring(0,4)+'-'+value.toString().substring(4,6)+'-'+value.toString().substring(6,8)}</>
+    : format === 'number' ?
+      <>{String(value ?? '').includes('.') 
+        ? String(value).split('.').map((part, index) => 
+            index === 0 ? part.replace(/\B(?=(\d{3})+(?!\d))/g, ",") : part
+          ).join('.')
+        : String(value ?? '').replace(/\B(?=(\d{3})+(?!\d))/g, ",")}</>
+    : format === 'float1' ?
+      <>{String(value ?? '').includes('.') 
+        ? String(value).split('.').map((part, index) =>
+            index === 0 ? part.replace(/\B(?=(\d{3})+(?!\d))/g, ",") : part
+          ).join('.')
+        : String(value ?? '').replace(/\B(?=(\d{3})+(?!\d))/g, ",")}</>
+    : <>{value}</>
+  )
+}

apps/dm/app/globals.css

@@ -0,0 +1,70 @@
+@import "../../../packages/common/components/src/base.css";
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 0 0% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 3.9%;
+    --primary: 0 0% 9%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 9%;
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 45.1%;
+    --accent: 0 0% 96.1%;
+    --accent-foreground: 0 0% 9%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 89.8%;
+    --input: 0 0% 89.8%;
+    --ring: 0 0% 3.9%;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+    --radius: 0.5rem
+  }
+  .dark {
+    --background: 0 0% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 0 0% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 0 0% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 0 0% 9%;
+    --secondary: 0 0% 14.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 0 0% 14.9%;
+    --muted-foreground: 0 0% 63.9%;
+    --accent: 0 0% 14.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 14.9%;
+    --input: 0 0% 14.9%;
+    --ring: 0 0% 83.1%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

apps/dm/app/layout.tsx

@@ -0,0 +1,17 @@
+"use client"
+import "./globals.css";
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="ko">
+      <body>
+          {children}
+      </body>
+    </html>
+  );
+}
+

apps/dm/app/middleware.ts

@@ -0,0 +1,130 @@
+import { NextRequest, NextResponse } from "next/server";
+import path from "path";
+
+const AUTH_USER_ID = process.env.NEXT_PUBLIC_AUTH_USER_ID || "token-id";
+const CLAIM_NAME = process.env.NEXT_PUBLIC_CLAIM_NAME || "Authorization";
+const SERVER_API_URL = process.env.NEXT_PUBLIC_SERVER_API_URL || "";
+const SEWERAGE_API_URL = process.env.NEXT_PUBLIC_SEWERAGE_API_URL || "";
+const GEOSERVER_URL = process.env.NEXT_PUBLIC_GEOSERVER_URL || "";
+const LX_GEOSERVER_URL = process.env.NEXT_PUBLIC_LX_GEOSERVER_URL || "";
+const DC_URL = process.env.NEXT_PUBLIC_DC_URL || "";
+
+export function middleware(req: NextRequest) {
+  console.log("Middleware 진입:", req.nextUrl.pathname);
+  const pathname = req.nextUrl.pathname;
+  const searchParams = req.nextUrl.searchParams;
+
+  if (pathname.startsWith("/server")) {
+    
+    const decodedParams = Array.from(searchParams.entries())
+    .map(([key, value]) => `${key}=${decodeURIComponent(value)}`)
+    .join("&");
+
+    const newUrl = `${SERVER_API_URL}${pathname.replace("/server", "")}${
+      decodedParams ? `?${decodedParams}` : ""
+    }`;
+    return NextResponse.rewrite(new URL(newUrl));
+  }
+  
+  if (pathname.startsWith("/geoserver")) {
+    let queryParams = searchParams.toString();
+    const typename = searchParams.get("TYPENAME");
+
+    let newUrl = `${GEOSERVER_URL}${pathname.replace("/geoserver", "")}${queryParams ? `?${queryParams}` : ""}`;
+
+    if (
+      typename == "hasudo:tb_il_swage_prcs_fclt"  //하수처리시설
+      || typename == "hasudo:tb_ms_swage_prcs_zone"  //하수처리구역
+      || typename == "hasudo:tb_ms_sbmrg_dngr_map"  //침수위험지도
+      || typename == "hasudo:tb_ms_flood_dngr_map"  //도시침수지도
+    ) {
+      newUrl = `${GEOSERVER_URL}${pathname.replace("/geoserver", "")}${queryParams ? `?${queryParams}` : ""}`;
+    }
+    else if (
+      typename == "hasudo:tb_ms_swage_ppl"  //관로
+      || typename == "hasudo:tb_ms_swage_mhl"  //맨홀
+      || typename == "hasudo:tb_ms_swage_pmstn"  //펌프장
+      || typename == "hasudo:tb_ms_stofcbr" //우수토실
+    ) {
+      newUrl = `${LX_GEOSERVER_URL}${pathname.replace("/geoserver", "")}${queryParams ? `?${queryParams}` : ""}`;
+    }
+    else if (
+      typename == "hasudo:om_dt_untrt_swg_rain"  //중점우수토실
+      || typename == "hasudo:om_wqlt_station"  //관측소
+      || typename == "hasudo:tb_wr_bdst_ruse_fclt"  //재이용시설
+      || typename == "hasudo:tb_wr_rnwtr_utztn_fclt"  //빗물이용시설
+      || typename == "hasudo:tb_wr_rswtr_fclt"  //중수도시설
+      || typename == "hasudo:tb_wr_htdfl_fclt"  //온배수시설
+      || typename == "hasudo:tb_wr_ruse_fclt_dmd_co"  //수요처
+      || typename == "hasudo:tb_wr_tmpr_dmd_co"  //잠재수요처
+    ){
+      const url = req.nextUrl.clone();
+      url.searchParams.set('TYPENAME', typename.replace("hasudo:",""));
+      queryParams = url.searchParams.toString();
+      newUrl = `${SEWERAGE_API_URL}/v1/map/geometry${queryParams ? `?${queryParams}` : ""}`;
+    }
+
+    console.log(`[Middleware] Rewriting from '/geoserver' path to: ${newUrl}`);
+    return NextResponse.rewrite(new URL(newUrl));
+  }
+  
+  if (
+    pathname.startsWith("/attach-service") ||
+    pathname.startsWith("/cms-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 = `${SERVER_API_URL}${pathname}`;
+
+    if (token) requestHeaders.set(CLAIM_NAME, token);
+    if (userId) requestHeaders.set(AUTH_USER_ID, userId);
+
+    console.log(
+      `[Middleware] Rewriting from '/attach-service' path to: ${newUrl}`,
+    );
+    return NextResponse.rewrite(new URL(newUrl), {
+      headers: requestHeaders,
+    });
+  }
+  
+  if (pathname.startsWith("/user-service")) {
+    const requestHeaders = new Headers(req.headers);
+    const newUrl = `${SERVER_API_URL}${pathname}`;
+
+    console.log(
+      `[Middleware] Rewriting from '/user-service' path to: ${newUrl}`,
+    );
+    return NextResponse.rewrite(new URL(newUrl), {
+      headers: requestHeaders,
+    });
+  }
+  
+  if (pathname.startsWith("/dc-service")) {
+    const requestHeaders = new Headers(req.headers);
+    const decodedParams = Array.from(searchParams.entries())
+    .map(([key, value]) => `${key}=${decodeURIComponent(value)}`)
+    .join("&");
+    
+    const newUrl = `${DC_URL}${pathname}${decodedParams ? `?${decodedParams}` : ""}`;
+    console.log(
+      `[Middleware] Rewriting from '/dc-service' path to: ${newUrl}`,
+    );
+    return NextResponse.rewrite(new URL(newUrl), {
+      headers: requestHeaders,
+    });
+  }
+  return NextResponse.next();
+}
+
+export const config = {
+  matcher: [
+    "/server/:path*",
+    "/geoserver/:path*",
+    "/attach-service/:path*",
+    "/user-service/:path*",
+    "/cms-service/:path*",
+    "/dc-service/:path*",
+  ],
+
+};

apps/dm/app/page.tsx

@@ -0,0 +1,36 @@
+"use client"
+
+import Link from 'next/link';
+import { Button } from '@common/components/ui';
+
+export default function Home() {
+  return (
+    <>
+      <div className='flex'>
+        <Button className='ml-5 place-self-auto'> 
+          <Link href="/pages/wrAbout">물재이용이란</Link>
+        </Button>
+        <Button className='ml-5 place-self-auto'> 
+          <Link href="/pages/wrExample">물재이용 사례</Link>
+        </Button>
+        <Button className='ml-5 place-self-auto'> 
+          <Link href="/pages/wrStatus">물재이용 현황</Link>
+        </Button>
+        <Button className='ml-5 place-self-auto'> 
+          <Link href="/pages/wrOverview">물재이용 사업추진절차</Link>
+        </Button>
+        <Button className='ml-5 place-self-auto'> 
+          <Link href="/pages/sdmMng/sdmInsert">수요처 등록</Link>
+        </Button>
+        <Button className='ml-5 place-self-auto'> 
+          <Link href="/pages/sdmMng/sdmInfoInsert">수요처 정보 등록</Link>
+        </Button>
+      </div>
+      <div className='flex'>
+        <Button className='ml-5 place-self-auto'> 
+          <Link href="/pages/sdmMng/sdmApplyList">수요처 신청 현황(개발중)</Link>
+        </Button>
+      </div>
+    </>  
+  );
+}

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

@@ -0,0 +1,419 @@
+/**====================================
+ * 보편적으로 쓰는 store 공간
+ ====================================**/
+
+import { fetchType, getFetch } from '@/components/ui/api';
+
+/**
+ * STORE - TYPE
+ */
+
+// selectBox
+export type SelectDataType = {
+  text: string;
+  val: string;
+}
+
+export interface MenuItem {
+  menuCd: number;
+  menuKornNm: string;
+  menuEngNm: string;
+  parentId: number | null;
+  sortSeq: number;
+  iconNm?: string;
+  children: MenuItem[] | null;
+  levelNo: number;
+  urlPath: string;
+  menuLnkgTypeCd: string;
+  menuLnkgSn: number;
+  menuPath: string;
+  qrcd: string;
+  useYn: string;
+  otptYn: string;
+  newWndwYn: string;
+  requiredUrlPath: boolean;
+}
+
+// grid header 
+export type TableUpperProps = {
+    id: string;
+    title: string;
+    upName?: string;
+    upSequnce?: number;
+    align? : string;
+    row? : number;
+    rowSpan?: number;
+    colSpan?: number;
+}
+
+// 시도 데이터
+export type sidoDataType = {
+  adstDstrCd: number,
+  sido: string,
+}
+
+// 시군구 데이터
+export type sigunDataType = {
+  adstDstrCd: number,
+  gugun: string
+}
+
+// 권역 데이터
+export type regionDataType = {
+  rvbsnCd: string,
+  rvbsn: string,
+}
+
+// 단위유역 데이터
+export type unitWaterShedDataType = {
+  rvbsnCd: string,
+  lgbsn: string,
+}
+
+// 중권역 데이터
+export type middleRegionDataType = {
+  rvbsnCd: string,
+  mdmbsn: string,
+}
+
+// 환경청 데이터
+export type envPartDataType = {
+  lclgvrnmntCd: string,
+  lclgvrnmntNm: string,
+  adstDliStrCd: string,
+  adstDstrCd: string,
+}
+
+export type envPartSelectDataType = SelectDataType & {
+  adstDliStrCd: string,
+}
+
+/**
+ * STORE - DATA
+ */
+
+// 시도 데이터
+let selectSidoData: SelectDataType[] = [
+  { text: "전체", val: '0' }
+];
+
+// 시군구 데이터
+let selectSigunData: SelectDataType[] = [
+  { text: "전체", val: '0' }
+];
+
+// 권역 데이터
+const selectRegionData: SelectDataType[] = [
+  { text: "전체", val: '0' }
+];
+
+// 단위유역 데이터
+const selectUnitWaterShedData: SelectDataType[] = [
+];
+
+// 환경청 데이터
+let selectEnvPartData: envPartSelectDataType[] = [
+  { text: "전체", val: '0', adstDliStrCd: '' }
+];
+
+// 환경청 내 시도 데이터
+const selectEnvPartSidoData: SelectDataType[] = [
+  { text: "전체", val: '0' }
+];
+
+// 환경청 내 시군구 데이터
+const selectEnvPartSigunData: SelectDataType[] = [
+  { text: "전체", val: '0' }
+];
+
+// 구분 데이터
+// const selectPartData:SelectDataType[] = [
+//   { text: "행정별", val: '0' },
+//   { text: "유역별", val: '01' },
+//   { text: "환경청별", val: '02' },
+// ];
+
+// 상향 하향 데이터
+const selectUpdownData:SelectDataType[] = [
+  { text: "전체", val: '0' },
+  { text: "500이하", val: '499' },
+  { text: "500이상", val: '500' },
+];
+
+// 운영 상태 데이터
+const selectOperationData:SelectDataType[] = [
+  { text: "전체", val: '0' },
+  { text: "가동중", val: '1' },
+  { text: "재가동", val: '2' },
+  { text: "가동중지", val: '3' },
+  { text: "시설폐쇄", val: '4' },
+];
+
+// 시설 구분 데이터
+const selectFacilityPartData:SelectDataType[] = [
+  { text: "전체", val: '0' },
+  { text: "공공하수처리시설", val: 'SW' },
+  { text: "오수처리장", val: 'SS' },
+  { text: "개인하수처리시설", val: 'PB' },
+  { text: "분뇨처리장", val: 'NS' },
+  { text: "폐수처리장", val: 'LW' },
+  { text: "침출수처리장", val: 'LC' },
+  { text: "기타기초시설", val: 'ET' },
+];
+
+// 년도 데이터
+const getYearData = () => {
+  const year = new Date().getFullYear();
+  const year1 = year - 1;
+  const year2 = year - 2;
+  const year3 = year - 3;
+  const year4 = year - 4;
+  const year5 = year - 5;
+  return [
+    { text: year1 + "년", val: year1.toString() },
+    { text: year2 + "년", val: year2.toString() },
+    { text: year3 + "년", val: year3.toString() },
+    { text: year4 + "년", val: year4.toString() },
+    { text: year5 + "년", val: year5.toString() },
+  ]
+}
+
+const selectSearchYear:SelectDataType[] = getYearData();
+
+// 유량 기간 구분
+const selectFlowTerm : SelectDataType[] = [
+  { text: "연간", val: '0' },
+  { text: "하절기", val: '01' },
+  { text: "동절기", val: '02' },
+  { text: "청천시", val: '03' },
+  { text: "강우시", val: '04' },
+];
+
+// 유량 기간 구분
+const selectFlowPanel : SelectDataType[] = [
+  { text: "전체", val: '0'},
+    { text: "3mm미만", val: '1'},
+    { text: "3~10mm미만", val: '2'},
+    { text: "10~20mm미만", val: '3'},
+    { text: "20~30mm미만", val: '4'},
+    { text: "30~40mm미만", val: '5'},
+    { text: "40~50mm미만", val: '6'},
+    { text: "50~60mm미만", val: '7'},
+    { text: "60mm이상", val: '8'}, 
+];
+
+// 중권역 데이터
+const selectMiddleRegionData: SelectDataType[] = [
+  { text: "전체", val: '0' }
+];
+
+/**
+ * STORE - API
+ */
+
+// 시도 API 호출 함수 추가
+const fetchSidoData = async (): Promise<SelectDataType[]> => {
+  try {
+    const res = await getFetch(fetchType.COMMON, '/addr/city');
+    const data = res.data;
+    selectSidoData = [
+      { text: "전체", val: '0'},
+      ...data.map((item: sidoDataType) => ({
+          text: item.sido || '',
+          val: String(item.adstDstrCd) || ''
+      }))
+    ];
+    return selectSidoData;
+  } catch (error) {
+      console.error('시도 데이터를 가져오는데 실패했습니다:', error);
+      return selectSidoData;
+  }
+};
+
+// 시군구 API 호출 함수 추가
+const fetchSigunData = async (): Promise<SelectDataType[]> => {
+  try {
+    const res = await getFetch(fetchType.COMMON, '/addr/sgg');
+    const data = res.data;
+    selectSigunData = [
+      { text: "전체", val: '0' },
+      ...data
+      .map((item: sigunDataType) => ({
+          text: item.gugun || '',
+          val: String(item.adstDstrCd) || ''
+      }))
+    ];
+    return selectSigunData;
+  } catch (error) {
+    console.error('시군구 데이터를 가져오는데 실패했습니다:', error);
+    return selectSigunData;
+  }
+};
+
+// 권역 API 호출 함수 추가
+const fetchRegionData = async (): Promise<SelectDataType[]> => {
+  try {
+    const res = await getFetch(fetchType.COMMON, '/addr/sarea');
+    const data = res.data;
+    return [
+      { text: "전체", val: '0'},
+      ...data.map((item: regionDataType) => ({
+        text: item.rvbsn || '',
+        val: String(item.rvbsnCd) || ''
+      }))
+    ];
+  } catch (error) {
+    console.error('권역 데이터를 가져오는데 실패했습니다:', error);
+    return selectRegionData;
+  }
+};
+
+// 중권역 API 호출 함수 추가
+const fetchMiddleRegionData = async (): Promise<SelectDataType[]> => {
+  try {
+    const res = await getFetch(fetchType.COMMON, '/addr/midArea');
+    const data = res.data;
+    return [
+      { text: "전체", val: '0' },
+      ...data
+      .map((item: middleRegionDataType) => ({
+        text: item.mdmbsn || '',
+        val: String(item.rvbsnCd) || ''
+      }))
+    ];
+  } catch (error) {
+    console.error('중권역 데이터를 가져오는데 실패했습니다:', error);
+    return selectMiddleRegionData;
+  }
+};
+
+// 단위유역 API 호출 함수 추가
+const fetchUnitWaterShedData = async (): Promise<SelectDataType[]> => {
+  try {
+    const res = await getFetch(fetchType.COMMON, '/addr/largeArea');
+    const data = res.data;
+    return [
+      { text: "전체", val: '0' },
+      ...data
+      .map((item: unitWaterShedDataType) => ({
+        text: item.lgbsn || '',
+        val: String(item.rvbsnCd) || ''
+      }))
+    ];
+  } catch (error) {
+    console.error('단위유역 데이터를 가져오는데 실패했습니다:', error);
+    return selectUnitWaterShedData;
+  }
+};
+
+// 환경청 데이터
+const fetchEnvPartData = async (): Promise<envPartSelectDataType[]> => {
+  try {
+    const res = await getFetch(fetchType.COMMON, '/addr/govArea');
+    const data = res.data;
+    selectEnvPartData = [
+      { text: "전체", val: '0', adstDliStrCd: '' },
+      ...data
+      .map((item: envPartDataType) => ({
+        text: item.lclgvrnmntNm || '',
+        val: String(item.lclgvrnmntCd) || '',
+        adstDliStrCd: item.adstDliStrCd || ''
+      }))
+    ];
+    return selectEnvPartData;
+  } catch (error) {
+    console.error('환경청 데이터를 가져오는데 실패했습니다:', error);
+    return selectEnvPartData;
+  }
+};
+
+/**====================================
+ * Store - expaort
+ ====================================*/
+export type CommonAction = {
+  initializeCommonData: () => Promise<void>;
+  getMenuAuth: (menuCd:number) => Promise<void>;
+}
+
+export type CommonType = {
+  Common: {
+    isInit: boolean;
+    selectSidoData: SelectDataType[];
+    selectSigunData: SelectDataType[];
+    selectUpdownData: SelectDataType[];
+    selectOperationData: SelectDataType[];
+    selectFacilityPartData: SelectDataType[];
+    selectSearchYear: SelectDataType[];
+    selectUnitWaterShedData: SelectDataType[];
+    selectRegionData: SelectDataType[];
+    selectMiddleRegionData: SelectDataType[];
+    selectEnvPartSidoData: SelectDataType[];
+    selectEnvPartSigunData: SelectDataType[];
+    selectFlowTerm: SelectDataType[];
+    selectFlowPanel: SelectDataType[];
+    selectEnvPartData: envPartSelectDataType[];
+    btnClass: string;
+  }
+}
+
+export const CommonState:CommonType = {
+  Common: {
+    isInit: false,
+    selectSidoData: selectSidoData,
+    selectSigunData: selectSigunData,
+    selectUpdownData: selectUpdownData,
+    selectOperationData: selectOperationData,
+    selectFacilityPartData: selectFacilityPartData,
+    selectSearchYear: selectSearchYear,
+    selectRegionData: selectRegionData,
+    selectUnitWaterShedData: selectUnitWaterShedData,
+    selectMiddleRegionData: selectMiddleRegionData,
+    selectEnvPartSidoData : selectEnvPartSidoData,
+    selectEnvPartSigunData : selectEnvPartSigunData,
+    selectFlowTerm: selectFlowTerm,
+    selectFlowPanel: selectFlowPanel,
+    selectEnvPartData : selectEnvPartData,
+    btnClass: "p-4 m-2 text-white rounded-sm text-lg font-medium"
+  }
+}
+
+export const CommonReducer:(set:any)=>CommonAction=(set: any) => {
+  return {
+    getMenuAuth : async (menuCd : number) =>{
+      const response = await getFetch(
+        "local",
+        `/cms-service/api/v1/menu-authrts/pageinfo/${menuCd}`
+      );
+      set((state: CommonType) => {
+        return {
+          ...state,
+          auth: {
+            mngAuthrtYn: response[0].mngAuthrtYn,
+            inqAuthrtYn: response[0].mngAuthrtYn,
+            regAuthrtYn: response[0].mngAuthrtYn,
+            mdfcnAuthrtYn: response[0].mngAuthrtYn,
+            delAuthrtYn: response[0].mngAuthrtYn,
+          },
+        };
+      });
+    },
+    // 시도 변경 이벤트
+    initializeCommonData: async () => {
+      const promiseSet = await Promise.all([fetchSidoData(), fetchSigunData(), fetchRegionData(), fetchUnitWaterShedData(), fetchMiddleRegionData(), fetchEnvPartData()]);
+      const [sidoData, sggData, regionData, unitData, midData, envData] = promiseSet;
+      set((state: CommonType) => ({
+        Common: {
+          ...state.Common,
+          selectSidoData: sidoData,
+          selectSigunData: sggData,
+          selectRegionData: regionData,
+          selectMiddleRegionData: midData,
+          selectUnitWaterShedData: unitData,
+          selectEnvPartData: envData
+        }
+      })
+    )},
+  }
+}
+
+export type CommonStore = CommonType & CommonAction;

apps/dm/app/store/index.tsx

@@ -0,0 +1,42 @@
+'use client'
+
+import { type ReactNode, createContext, useContext, useRef } from 'react'
+import { useStore } from 'zustand'
+import { type DmStore, StoreZus } from './store'
+
+
+export type StoreApi = ReturnType<typeof StoreZus>
+
+export const StoreContext = createContext<StoreApi | undefined>(
+  undefined,
+)
+
+export interface StoreProviderProps {
+  children: ReactNode
+}
+
+export const StoreProvider = ({
+  children,
+}: StoreProviderProps) => {
+  const storeRef = useRef<StoreApi | null>(null)
+  if (!storeRef.current) {
+    // Create store instance if not initialized
+    storeRef.current = StoreZus() as StoreApi
+  }
+  return (
+    <StoreContext.Provider value={storeRef.current}>
+      {children}
+    </StoreContext.Provider>
+  )
+}
+
+export const useDmStore = <T,>(
+  selector: (store: DmStore) => T,
+): T => {
+  const storeContext = useContext(StoreContext)
+  if (!storeContext) {
+    throw new Error(`useStore must be used within StoreProvider`)
+  }
+
+  return useStore(storeContext, selector)
+}

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

@@ -0,0 +1,108 @@
+import { getFetch } from "@/components/ui/api";
+import { DEV_URL_FO } from "@/components/ui/config";
+import type { FacilityInfo, SubsInfo } from "./type";
+
+const checkWrRegList = async () => {
+  const wrRegList = await getFetch("wr", `/reuseFc/pubFc`);
+  return wrRegList;
+};
+
+const getRuseFclt = async (
+  page: string,
+  sggOrCity: string,
+  searchTxt?: string
+) => {
+  const checkWrRegListRes = await checkWrRegList();
+
+  let url = `/prcsFclt/ruseInfo/${page ? page : 1}/5/A/${sggOrCity ? sggOrCity : "0"}/0/1/SW`;
+
+  console.log(" checkWrRegListRes ", checkWrRegListRes);
+  const ruseList = checkWrRegListRes.data.filter((item: string) => item !== "");
+
+  if (searchTxt) {
+    url = url + `/${searchTxt}`;
+  }
+
+  const response = await fetch(DEV_URL_FO + url, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify(ruseList),
+  });
+
+  const hasuList = await response.json().then((res: any) => {
+    const data = res.data
+      .map((item: any) => {
+        return {
+          ...item,
+          fctCpc: Number(item.fctCpc) || 0,
+          searchNm: item.fctNm,
+          searchPk: item.bscFctNm,
+        };
+      })
+      .filter((hasu) => ruseList.find((ruse) => hasu.bscFctCd === ruse));
+    return { data: data, count: res.count };
+  });
+
+  return hasuList;
+};
+
+export type DmMapActions = {
+  findRuseFclt(sggOrCity: string, searchTxt: string): void;
+  setSubsInfo(subsInfo: SubsInfo[]): void;
+};
+
+export type DmMapType = {
+  map: {
+    ruseFcltList: FacilityInfo[];
+    subsInfo: SubsInfo[];
+  };
+};
+
+export const dmMapState: DmMapType = {
+  map: {
+    ruseFcltList: [],
+    // subsInfo: [
+    //   {
+    //     ruseUtztnFcltNm: "수원제1,2 재이용1", // 재이용시설명
+    //     ruseUtztnFcltCd: "41110PB001R1",
+    //   },
+    //   {
+    //     ruseUtztnFcltNm: "낙양 재이용1", // 재이용시설명
+    //     ruseUtztnFcltCd: "41150SW001R1",
+    //   },
+    //   {
+    //     ruseUtztnFcltNm: "서남 재이용1", // 재이용시설명
+    //     ruseUtztnFcltCd: "11500PB001R1",
+    //   },
+    // ],
+    subsInfo:[]
+  },
+};
+export type DmMapStore = DmMapType & DmMapActions;
+
+export const DmMapReducer = (set: any): DmMapActions => {
+  return {
+    findRuseFclt: async (sggOrCity: string, searchTxt: string) => {
+      const ruseFcltList = await getRuseFclt("1", sggOrCity, searchTxt);
+
+      set((state: DmMapType) => ({
+        ...state,
+        map: {
+          ...state.map,
+          ruseFcltList: ruseFcltList.data,
+        },
+      }));
+    },
+    setSubsInfo: async (subsInfo: SubsInfo[]) => {
+      set((state: DmMapType) => ({
+        ...state,
+        map: {
+          ...state.map,
+          subsInfo: subsInfo,
+        },
+      }));
+    },
+  };
+};

apps/dm/app/store/map/type.tsx

@@ -0,0 +1,39 @@
+export type FacilityInfo= {
+    bscFctCd: string;                 // 기본시설 코드
+    bscFctNm: string;                 // 기본시설명
+    rvbsnCd: string;                  // 유역 코드
+    rvbsn: string;                    // 유역명
+    lgbsn: string;                    // 대권역명
+    mdmbsn: string;                   // 중권역명
+    rgnCd: string;                    // 관할청 코드
+    rgnNm: string;                    // 관할청 명칭
+    adstDstrCd: string;              // 행정구역 코드
+    sido: string;                     // 시도
+    gugun: string;                    // 구군
+    addr: string;                     // 주소
+    fctCpc: string;                   // 시설용량
+    efflWqltStndrdCd: string;        // 방류수 수질기준 코드
+    efflWqltStndrdNm: string;        // 방류수 수질기준명
+    trtFrfNm: string;                // 처리공법명
+    trtDstr: string;                 // 처리구역
+    rnDt: string;                    // 사용개시일 (예: YYYYMMDD)
+    cmplDt: string;                  // 준공일자 (예: YYYYMMDD)
+    trstOprEtpNm: string;            // 위탁운영기관명
+    bscFctClsNm: string;             // 기본시설 구분명
+    sitArea: string;                 // 부지면적
+    trtDstrArea: string;             // 처리구역 면적
+    swrTrtPopl: string;              // 하수처리 인구
+    mnstr: string;                   // 총괄 유역
+    efflWtrrgn: string;              // 방류수역
+    rvNm: string;                    // 하천명
+    bscFctClsCd: string;             // 기본시설 구분 코드
+    rvbsnNm: string;                 // 유역명
+    tel: string;                     // 전화번호
+    rswtrYn: string;                 // 재이용수 여부 ("Y" 또는 "N")
+    ruse: boolean;                   // 재이용 여부 (boolean)
+  }
+
+  export type SubsInfo={
+    ruseUtztnFcltNm: string;        // 재이용시설명
+    ruseUtztnFcltCd: string;        // 재이용시설 코드
+  }

apps/dm/app/store/readme.md

@@ -0,0 +1,121 @@
+# Zustand store
+## Zustand 등록방법 
+**-- index.tsx --**
+### context 등록
+기본적으로 createContext를 통해 react에 context를 생성해서 react에서 사용할 수 있도록 해야함.
+``` js
+//StoreZus는 내부적으로 사용하기 위한 store파일에서 따로 생성함.
+export type StoreApi = ReturnType<typeof StoreZus>
+//react에서 사용하기 위한 context 생성.
+export const StoreContext = createContext<StoreApi | undefined>(
+  undefined,
+)
+```
+
+### component로 작성
+등록된 context를 component화 시키기 위한 작업
+```js
+//외부에서 호출시 <StoreProvider> 형태로 호출.
+//app이나 home에서 전체적인 사용이 되도록 작성해야함.
+export const StoreProvider = ({
+  children,
+}: StoreProviderProps) => {
+  const storeRef = useRef<StoreApi>(null)
+  if (!storeRef.current) {
+    //StoreZus는 store.tsx를 봐야함.
+    storeRef.current = StoreZus()
+  }
+  return (
+    <StoreContext.Provider value={storeRef.current}>
+      {children}
+    </StoreContext.Provider>
+  )
+}
+```
+
+### store 등록
+react에서 사용하는 store에 현재 context 등록
+```js
+export const useWrStore = <T,>(
+  selector: (store: WrStore) => T,
+): T => {
+  const storeContext = useContext(StoreContext)
+  if (!storeContext) {
+    throw new Error(`useStore must be used within StoreProvider`)
+  }
+
+  return useStore(storeContext, selector)
+}
+```
+
+## Zustand 사용방법
+**-- store.tsx, 폴더별 index.tsx --**
+### 기본 store 생성
+index.tsx의 context에 사용되는 StoreZus를 추가하여 사용됨.
+
+외부에서 생성된 state, actions를 사용 가능한 구조
+```js
+import { createStore } from 'zustand/vanilla';
+import { tableActionsExport, tableStateExport, type tableState, type tableType } from './publicReuseFaciltyInsert/index';//외부 파일 위치.
+export type WrStore = tableType;//typescript이므로 사용되는 스크립트를 type1 & type2 형식으로 넣어야함.
+//index.tsx에서 사용하는 store 생성.
+export const StoreZus = (initState: tableState = tableStateExport) => {
+  return createStore<WrStore>()((set) => {
+    return {
+        //아래에서 사용하는 state & actions은 외부 폴더에서 가져다가 사용.
+      ...initState,//외부에 있는 기본 초기값 state
+      ...tableActionsExport(set)//외부에 있는 actions
+    }
+  })
+}
+```
+### 외부 스토어 작성 방법
+외부 스토어는 export를 어떻게 할건지만 정하면됨.
+
+사용하는 store.tsx에서 import를 받기만 하면 사용가능.
+#### 타입을 외부로 빼는 방법
+```js
+export type tableState = {
+    isInit: boolean;
+    upHeadList: TableUpperProps[];
+    publicReuseFacilityUper: PublicReuseFacility[];
+}
+type tableActions = {
+    decrementList: () => void
+}
+
+export type tableType = tableState & tableActions;
+```
+#### 초기값 state를 외부로 빼는 방법
+```js
+export const tableStateExport:tableState= {
+    isInit:false,
+    upHeadList: upHeadList,
+    publicReuseFacilityUper: publicReuseFacilityUper,
+}
+```
+#### actions를 외부로 빼는 방법
+```js
+//tableActionsExport를 import 받아서 실행하여 return 된 값을 사용
+export const tableActionsExport:(set:any)=>tableActions=
+//set을 통해 react store에 등록
+(set: any) => {
+    return {
+        //decrementList Object 형태로 전달
+        decrementList:
+        //set 함수를 실행해서 react store에 등록
+        ()=>set(
+            // store에 등록되는 함수 구조를 가지고 있음.
+            (state:tableState) => {
+                //actions 실질적인 로직 작성하는 곳.
+            return (
+            { 
+                upHeadList: state.upHeadList, 
+                publicReuseFacilityUper: 
+                state.publicReuseFacilityUper.slice(0, state.publicReuseFacilityUper.length - 1)
+            })}
+        )
+    }
+}
+```
+

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

@@ -0,0 +1,533 @@
+import { fetchType, getFetch, postFetch } from "@/components/ui/api";
+import type { SelectDataType } from "@common/business_components/ui";
+import type { TableUpperProps } from "../common";
+import toast from "react-hot-toast";
+
+/**====================================
+ * Store - 타입
+=====================================*/
+// 수요처 정보
+export type DemandCompType = {
+  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 | '';
+  tn : number | '';
+  combResdch : number | '';
+  tph : number | '';
+  trbt : number | '';
+  ph : number | '';
+  blgcOxygDmndQnt : number | '';
+  clIonQnt : number | '';
+  smll : number | '';
+  cdtnv : number | '';
+  crmty : number | '';
+  rmrk : string | '';
+  reqDt : string | '';
+  dmdInfoSn : number | '';
+  status : string | '';
+  splyCndtList:SupplyCandidate[]|[],
+
+}
+
+// 공급 후보자 타입 정의
+export type SupplyCandidate = {
+  ruseUtztnFcltNm: string;
+  ruseUtztnFcltCd: string;
+};
+
+
+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 | '';
+}
+
+// 유사사례
+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 | '';
+}
+
+// 사업비 상세정보
+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 | '';
+  
+  /** 재원조달계획(백만원원) */
+  prcmPlanGrssCst : string | '';
+  prcmPlanNlep : string | '';
+  prcmPlanLcep : string | '';
+  prcmPlanBrdnCst : string | '';
+  prcmPlanEcqrRt : string | '';
+  /** 사업비 정산(백만원) */
+  clclnGrssCst : string | '';
+  clclnNlep : string | '';
+  clclnLcep : string | '';
+  clclnBrdnCst : string | '';
+  clclnEcqrRt : string | '';
+}
+
+/**====================================
+ * Store - 데이터
+ ====================================*/
+// 수요처 정보
+const demandCompList : DemandCompType[] = [
+]
+
+// 사용용도
+const useTypesData : SelectDataType[] = [
+  { text: '청소', val: "청소" },
+  { text: "화장실용수", val: "화장실용수" },
+  { text: "세척", val: "세척" },
+  { text: "살수", val: "살수" },
+  { text: "조경", val: "조경" },
+  { text: "농업", val: "농업" },
+  { text: "하천", val: "하천" },
+  { text: "지하수", val: "지하수" },
+  { text: "공업", val: "공업" },
+];
+
+// 유사사례 모달 헤더
+export const similarCaseModalHeader: TableUpperProps[] = [
+  { id: "ruseBizNm", title: "사업명", row: 0, rowSpan: 2 },
+  { id: "bizBgngDate", title: "사업시작일", row: 0, rowSpan: 2 },
+  { id: "bizEndDate", title: "사업종료일", row: 0, rowSpan: 2 },
+  { id: "A", title: "공급처", row: 0, colSpan: 3 },
+  { id: "splyFcltKnd", title: "시설종류", row: 1 },
+  { id: "splyFcltNm", title: "공급처명", row: 1 },
+  { id: "splyFcltCpct", title: "시설용량\n(㎥/일)", row: 1 },
+  { id: "B", title: "수요처", row: 0, colSpan: 2 },
+  { id: "dmdFcltNm", title: "수요처명", row: 1 },
+  { id: "dmdFcltAddr", title: "주소", row: 1 },
+  { id: "C", title: "재이용시설", row: 0, colSpan: 5 },
+  { id: "ruseFcltCpct", title: "시설용량\n(㎥/일)", row: 1 },
+  { id: "ruseFcltPplLen", title: "관로\n(km)", row: 1 },
+  { id: "ruseFcltUsg", title: "용도", row: 1 },
+  { id: "ruseFcltSplyCpct", title: "공급량\n(㎥/일)", row: 1 },
+  { id: "ruseFcltPrcsMsrc", title: "처리공법", row: 1 },
+  { id: "D", title: "보증수질", row: 0, colSpan: 13 },
+  { id: "grnteWqUsg", title: "용도별", row: 1 },
+  { id: "grnteWqGrssClfg", title: "총대장균군수\n(개/100ml)", row: 1 },
+  { id: "grnteWqCombResdch", title: "결합잔류염소\n(mg/L)", row: 1 },
+  { id: "grnteWqTrbt", title: "탁도\n(NTU)", row: 1 },
+  { id: "grnteWqBod", title: "생물학적산소요구량\n(BOD)\n(mg/L)", row: 1 },
+  { id: "grnteWqSmll", title: "냄새\n(개/100ml)", row: 1 },
+  { id: "grnteWqCrmty", title: "색도\n(도)", row: 1 },
+  { id: "grnteWqTn", title: "총질소\n(T-N)\n(mg/L)", row: 1 },
+  { id: "grnteWqTp", title: "총인\n(T-P)\n(mg/L)", row: 1 },
+  { id: "grnteWqPh", title: "수소이온농도\n(pH)", row: 1 },
+  { id: "grnteWqClIonQnt", title: "염화물\n(mgCL/L)", row: 1 },
+  { id: "grnteWqCndctStat", title: "전기전도도\n(μS/cm)", row: 1 },
+  { id: "grnteWqRmrk", title: "비고", row: 1 },
+  { id: "reqBizGrssCst", title: "소요사업비\n(백만원)", row: 0, rowSpan: 2 },
+]
+
+// 유사사례 데이터
+const similarCaseList : SimilarCaseType[] = [
+    
+]
+
+// 사업비 상세정보 모달 헤더
+export const moneyDetailModalHeader: TableUpperProps[] = [
+  { id: "A", title: "소요사업비(백만원)", row: 0, colSpan: 14 },
+  { id: "reqBizGrssCst", title: "총", row: 1, rowSpan: 2 },
+  { id: "B", title: "토목", row: 1, colSpan: 2 },
+  { id: "reqBizReuseFcltCst", title: "재이용시설", row: 2 },
+  { id: "reqBizPplCst", title: "관로", row: 2 },
+  { id: "reqBizArchCst", title: "건축", row: 1, rowSpan: 2 },
+  { id: "reqBizMchnCst", title: "기계", row: 1, rowSpan: 2 },
+  { id: "reqBizMtrngCst", title: "전기,계측", row: 1, rowSpan: 2 },
+  { id: "reqBizGisCst", title: "GIS/DB", row: 1, rowSpan: 2 },
+  { id: "reqBizCctvCst", title: "CCTV", row: 1, rowSpan: 2 },
+  { id: "reqBizCmcnCst", title: "시공 및 준공", row: 1, rowSpan: 2 },
+  { id: "reqBizWstCst", title: "폐기물", row: 1, rowSpan: 2 },
+  { id: "reqBizDesignCst", title: "설계비", row: 1, rowSpan: 2 },
+  { id: "reqBizSpvsCst", title: "감리비", row: 1, rowSpan: 2 },
+  { id: "reqBizSbsdCst", title: "시설 부대비", row: 1, rowSpan: 2 },
+  { id: "reqBizEtc", title: "기타", row: 1, rowSpan: 2 },
+  { id: "C", title: "재원조달계획(백만원)", row: 0, colSpan: 5 },
+  { id: "prcmPlanGrssCst", title: "총", row: 1, rowSpan: 2 },
+  { id: "prcmPlanNlep", title: "국비", row: 1, rowSpan: 2 },
+  { id: "prcmPlanLcep", title: "지방비", row: 1, rowSpan: 2 },
+  { id: "prcmPlanBrdnCst", title: "원인자부담", row: 1, rowSpan: 2 },
+  { id: "prcmPlanEcqrRt", title: "국고비율", row: 1, rowSpan: 2 },
+  { id: "D", title: "사업비 정산(백만원)", row: 0, colSpan: 5 },
+  { id: "clclnGrssCst", title: "총", row: 1, rowSpan: 2 },
+  { id: "clclnNlep", title: "국비", row: 1, rowSpan: 2 },
+  { id: "clclnLcep", title: "지방비", row: 1, rowSpan: 2 },
+  { id: "clclnBrdnCst", title: "원인자부담", row: 1, rowSpan: 2 },
+  { id: "clclnEcqrRt", title: "국고비율", row: 1, rowSpan: 2 },
+]
+
+// 사업비 상세정보
+const moneyDetailList : MoneyDetailType[] = [
+]
+
+// 수요정보 신청현황 헤더
+export const upHeadSdmInfoStatus: TableUpperProps[] = [
+  { 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 },
+  { id: "daddr", title: "공장주소", row: 0, rowSpan: 2 },
+  { id: "telno", title: "전화번호", row: 0, rowSpan: 2 },
+  { id: "dmndTmng", title: "신청일자", row: 0, rowSpan: 2 },
+  { id: "status", title: "진행상태", row: 0, rowSpan: 2 },
+]
+
+// 수요정보 신청현황 데이터
+
+/**====================================
+ * Store - Api
+=====================================*/
+// 수요처 등록  
+const postSdmData = async (data: DemandCompType) => {
+  try {
+    await postFetch("/reuseFc/request", data);
+    toast.success("수요처 등록에 성공하였습니다.");
+    return true;
+  } catch (error) {
+    console.log(error);
+    toast.error("수요처 등록에 실패하였습니다.");
+    return false;
+  }
+}
+
+// 수요정보 등록
+const postSdmInfoData = async (data: DemandCompType) => {
+  try {
+    await postFetch("/reuseFc/request/demandInfo", data);
+    toast.success('수요 정보 등록에 성공하였습니다.');
+  } catch (error) {
+    console.log(error);
+    toast.error('수요 정보 등록에 실패하였습니다.');
+  }
+}
+
+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) {
+      alert("수요처 로그인에 성공하였습니다.");
+      sessionStorage.setItem("user", JSON.stringify(loginData));
+      loginSuccess = true;
+    } else if(status === 401) {
+      alert("패스워드가 틀렸습니다.");
+      loginSuccess = false;
+    } else {
+      alert("등록된 수요처가 없습니다.");
+      loginSuccess = false;
+    }
+
+    return loginSuccess;
+  } catch (error) {
+    console.log(error);
+    alert("수요처 로그인에 실패하였습니다.");
+  }
+}
+
+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 
+    }
+  } catch (error) {
+    console.error(error+' 수요처 정보를 불러오지 못했습니다.');
+    return { data: [], count: 0 };
+  }
+}
+
+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+' 수요정보 신청현황을 불러오지 못했습니다.');
+    return [];
+  }
+}
+
+// 유사사례 조회
+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+' 유사사례 조회에 실패하였습니다.');
+    return [];
+  }
+}
+
+/**====================================
+ * Store - expaort
+ ====================================*/
+export type SdmActions = {
+    initializeSdmData: () => void;
+    insertSdmData: (data: DemandCompType) => Promise<void>;
+    insertSdmInfoData: (data: DemandCompType) => 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>;
+}
+
+export type SdmType ={ 
+  Sdm :{
+    isInit: boolean;
+    useTypesData: SelectDataType[];
+    demandCompList: DemandCompType[];
+    upHeadSimilarCaseList: TableUpperProps[];
+    similarCaseList: SimilarCaseType[];
+    upHeadMoneyDetailList : TableUpperProps[]; 
+    moneyDetailList: MoneyDetailType[];
+
+    // 수요정보 신청현황
+    sdmInfoStatusList: DemandCompType[];
+    upHeadSdmInfoStatus: TableUpperProps[];
+
+    // 로그인관련
+    successNextPage : boolean;
+    successLogin: boolean;
+  }
+}
+
+export const SdmState: SdmType = {
+  Sdm:{
+    isInit:false,
+    useTypesData: useTypesData,
+    demandCompList: demandCompList,
+    upHeadSimilarCaseList: similarCaseModalHeader,
+    similarCaseList: similarCaseList,
+    upHeadMoneyDetailList : moneyDetailModalHeader,
+    moneyDetailList: moneyDetailList,
+    // 수요정보 신청현황
+    sdmInfoStatusList: [],
+    upHeadSdmInfoStatus: upHeadSdmInfoStatus,
+    // 로그인관련
+    successNextPage : false,
+    successLogin: false,
+  }
+}
+
+export const SdmReducer = (set: any): SdmActions => {
+  return {
+    initializeSdmData: async () => {
+    },
+
+    insertSdmData: async (data: DemandCompType) => {
+      const preRes = await getSdmInfoStatusList(data.dmdInfoId);
+      if(preRes?.dmdInfoId) {
+        toast.error('이미 등록된 수요처입니다.');
+        return;
+      }
+
+      const res = await postSdmData(data);
+      if(res) {
+        set((state: SdmType) => ({
+          Sdm: {
+            ...state.Sdm,
+            successNextPage: true,
+          }
+        }))
+      }
+    },
+
+    insertSdmInfoData: async (data: DemandCompType) => {
+      postSdmInfoData(data);
+    },
+
+    // 수요처 정보
+    getDemandCompList: async (searchText: string, pageCnt: number) => {
+      const res = await getDemandCompList(searchText, pageCnt);
+      if(res.data.length === 0) {
+        set((state: SdmType) => ({
+          Sdm: {
+            ...state.Sdm,
+            demandCompList: [],
+          }
+        }))
+        return;
+      } else {
+        set((state: SdmType) => ({
+          Sdm: {
+            ...state.Sdm,
+            demandCompList: res.data,
+          }
+        }))
+      }
+    },
+
+    // 수요정보 신청현황
+    getSdmInfoStatusList: async (dmdInfoId: string) => {
+      const res = await getSdmInfoStatusList(dmdInfoId);
+      if(res.length === 0) {
+        set((state: SdmType) => ({
+          Sdm: {
+            ...state.Sdm,
+            sdmInfoStatusList: [],
+          }
+        }))
+        return;
+      }
+      const sdmInfoStatusList : DemandCompType[] = [];
+
+      res.demandInfo.map((el: DemandCompType, index: number) => {
+        const matchingInfo = res.demandMatchings.find((matching: DemandMatchings) => matching.dmdInfoSn === el.dmdInfoSn);
+        const status = matchingInfo?.splyFcltFlg?.trim() === 'Sub' ? '검토' : matchingInfo?.splyFcltFlg?.trim() === 'matched' ? '매칭완료' : '신청';
+
+        const tmpData = {
+          ...el,
+          index: ++index,
+          bzmnNo: res.bzmnNo,
+          dmdCoNm: res.dmdCoNm,
+          dmdInfoId: res.dmdInfoId,
+          daddr: res.daddr,
+          telno: res.telno.replace(/(\d{3})(\d{4})(\d{4})/, '$1-$2-$3'),
+          rgtr: res.rgtr,
+          ctpvCd: res.ctpvCd,
+          sggCd: res.sggCd,
+          useUsgCd: el.useUsgCd,
+          dmndTmng: el.dmndTmng,
+          dmdInfoSn : el.dmdInfoSn,
+          status : status
+        }
+        sdmInfoStatusList.push(tmpData);
+      })
+      set((state: SdmType) => ({
+        Sdm: {
+          ...state.Sdm,
+          sdmInfoStatusList: sdmInfoStatusList,
+        }
+      }))
+    },
+
+    actionLogin: async (data: DemandCompType) => {
+      const loginSuccess = await postSdmLoginData(data);
+      set((state: SdmType) => ({
+        Sdm: {
+          ...state.Sdm,
+          successLogin: loginSuccess,
+        }
+      }))
+    },
+
+    // 유사사례 조회
+    getSimilarCaseList: async (part: string, value: number|string) => {
+      const res = await fetchGetSimilarCaseList(part, value);
+      if(res && res.length !== 0) {
+        set((state: SdmType) => ({
+          Sdm: {  
+            ...state.Sdm,
+            similarCaseList: res,
+          }
+        }))
+        return;
+      }else{
+        set((state: SdmType) => ({
+          Sdm: {  
+            ...state.Sdm,
+            similarCaseList: [],
+          }
+        }))
+        return;
+      }
+    }
+  }
+}
+export type SdmStore = SdmType & SdmActions;

apps/dm/app/store/store.tsx

@@ -0,0 +1,27 @@
+import { createStore } from 'zustand/vanilla';
+import { CommonReducer, CommonState, type CommonStore, type CommonType } from './common';
+import { SdmReducer, SdmState, type SdmStore, type SdmType } from './sdmMng';
+import { dmMapState, type DmMapType, type DmMapStore, DmMapReducer } from './map';
+import { tokenManager } from '@/src/entities/auth/lib/token-manager';
+
+export type DmStore = CommonStore & SdmStore &DmMapStore ;
+export type DmState = CommonType & SdmType &DmMapType;
+
+export const StoreZus = (initState: DmState= {
+  ...CommonState,
+  ...SdmState,
+  ...dmMapState,
+}) => {
+  return createStore<DmStore>()((set) => {
+   tokenManager.setToken("site-id-key", 'DM');
+   tokenManager.setToken("site-theme-key", 'green');
+
+    
+    return {
+      ...initState,
+      ...CommonReducer(set),
+      ...SdmReducer(set),
+      ...DmMapReducer(set)
+    }
+  })
+}

apps/dm/app/style/PublicReuseFaciltyInsert.module.css

@@ -0,0 +1,9 @@
+.formInsideTitle{
+    background-color: gray;
+    text-align: center;
+}
+
+
+
+.smallTitle{
+}

apps/dm/components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}

apps/dm/components/toastFromUi.tsx

@@ -0,0 +1,53 @@
+
+import { Button } from "@common/components/ui";
+import Link from "next/link";
+import toast from "react-hot-toast";
+
+export function ToastFormUi(body:string,title:string,url:string,buttonName:string){
+
+  //const router = useRouter();
+
+    return(
+
+      toast.custom((t) => (
+      
+        <div
+          className={`${
+            t.visible ? 'animate-enter' : 'animate-leave'
+          }  w-4/12 h-40 bg-white shadow-lg rounded-lg pointer-events-auto flex ring-1 ring-black ring-opacity-5`}
+        >
+          <div className="w-full flex-1 py-10">
+            <div className="flex items-start">
+              <div className="flex-shrink-0 pt-0.5">
+          
+              </div>
+              <div className="ml-3  flex-1">
+                <p className="text-xl font-medium  underline">
+                {title}
+                </p>
+                <p className="mt-1 text-2xl">
+                  {body}
+                </p>
+              </div>
+            </div>
+          </div>
+          <div className="flex py-20">
+            <Button
+              size='sm'
+              onClick={() => toast.dismiss(t.id)}
+            >
+              <Link href={url}> {buttonName}</Link>
+            </Button>
+          </div>
+          <div className="flex  pl-4 pr-4 py-20">
+            <Button
+              onClick={() => toast.dismiss(t.id)}
+              size='sm'
+            >
+              닫기
+            </Button>
+          </div>
+        </div>
+      ))
+    )
+}

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

@@ -0,0 +1,72 @@
+//8880
+import { DEV_URL_FO, DEV_URL_WR } from "../config";
+
+export const fetchType = {
+  COMMON: "common",
+  WR: "wr"
+};
+
+interface RequestParams {
+  [key: string]: unknown;
+}
+
+export const getFetch = async (type: string, url: string) => {
+  const baseUrl = type === fetchType.COMMON ? DEV_URL_FO : DEV_URL_WR;
+  const response = await fetch(baseUrl + url, {
+    method: "GET",
+    headers: {
+      accept: "application/json",
+    },
+  });
+
+  if (!response.ok) {
+    throw new Error(`오류 발생: ${response.status}`);
+  }
+  const res = await response.json();
+  return res;
+};
+
+export const postFetch = async (url: string, params: RequestParams) => {
+  const response = await fetch(DEV_URL_WR + url, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify(params),
+  });
+
+  if (!response.ok) {
+    throw new Error(`오류 발생: ${response.status}`);
+  }
+  return response;
+};
+
+export const putFetch = async (url: string, params: RequestParams) => {
+  const response = await fetch(DEV_URL_WR + url, {
+    method: "PUT",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify(params),
+  });
+
+  if (!response.ok) {
+    throw new Error(`오류 발생: ${response.status}`);
+  }
+  return response;
+};
+
+export const deleteFetch = async (url: string, params: RequestParams) => {
+  const response = await fetch(DEV_URL_WR + url, {
+    method: "DELETE",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify(params),
+  });
+
+  if (!response.ok) {
+    throw new Error(`오류 발생: ${response.status}`);
+  }
+  return response;
+};   

apps/dm/components/ui/common/searhDemandInput/component.tsx

@@ -0,0 +1,103 @@
+import { useDmStore } from '@/app/store';
+import type { DemandCompType } from '@/app/store/sdmMng';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+
+type thisProps = {
+  label: string | undefined;
+  initValue: string | undefined;
+  setValue : (dmdCoNm?: string) => void;
+  setRtnData : (rtnData: DemandCompType[]) => void;
+}
+
+export default function SearchInputText({label=undefined, initValue=undefined, setValue=()=>{}, setRtnData=()=>{}} :thisProps) {
+  
+  const { getDemandCompList, Sdm } = useDmStore((state) => state);
+
+  const { 
+    demandCompList 
+  } = Sdm;
+  
+  const [isOpen, setIsOpen] = useState(false);
+  const [textValue, setTextValue] = useState(initValue || '');
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  const handleInputChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    setTextValue(value);
+    setValue(value);
+    if (value) {
+      setIsOpen(true);
+      getDemandCompList(value, 20);
+    } else {
+      setIsOpen(false);
+    }
+  }, [getDemandCompList, setValue]);
+
+  const handleSuggestionClick = useCallback((dmdCoNm: string) => {
+    setTextValue(dmdCoNm);
+    setValue(dmdCoNm);
+    setIsOpen(false);
+    setRtnData(demandCompList);
+  }, [demandCompList, setRtnData, setValue]);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (wrapperRef.current && !wrapperRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+
+  return (
+    <div ref={wrapperRef}>
+      <input
+        type="text"
+        value={textValue}
+        onChange={handleInputChange}
+        /* onFocus={() => setIsOpen(true)} */
+        className="w-full h-[3.2rem] !text-xl pl-3 text-gray-600 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+        placeholder={`${label}을(를) 입력하세요`}
+      />
+      {isOpen && (
+        <div className=" z-1 w-full mt-2 bg-white border border-gray-300 rounded-md shadow-lg h-90 overflow-auto">
+          <div className="max-h-72">
+            {demandCompList && demandCompList.length > 0 ? demandCompList.map((item : DemandCompType, index : number) => (
+              <div
+                key={index}
+                className="!text-xl w-full text-left px-5 py-3 hover:bg-gray-100 cursor-pointer overflow-auto"
+                onClick={() => handleSuggestionClick(item.dmdCoNm)}
+                role="button"
+                tabIndex={0}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter' || e.key === ' ') {
+                    handleSuggestionClick(item.dmdCoNm);
+                  }
+                }}
+              >
+                {item.dmdInfoId.substring(10,14) !== '0000' ? (
+                  <>
+                    <span className="text-gray-500">사업자번호 : </span> {item.dmdInfoId.substring(0,10)}&nbsp;
+                    <span className="text-gray-500">종사업자번호 : </span> {item.dmdInfoId.substring(10,14)}&nbsp;
+                  </>
+                ) : (
+                  <>
+                    <span className="text-gray-500">사업자번호 : </span> {item.dmdInfoId.substring(0,10)}&nbsp;
+                  </>
+                )}
+                <span className="float-right">{item.dmdCoNm}</span>
+              </div>
+            )) : (
+              <div className="!text-xl w-full px-5 py-3 hover:bg-gray-100 cursor-pointer overflow-auto">
+                검색 결과가 없습니다.
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

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

@@ -0,0 +1,5 @@
+import { PROXY_HOST, SERVER_API_FO_URL, SERVER_API_WR_URL } from "@/src/shared/config/env";
+
+export const LOCAL_URL = PROXY_HOST;
+export const DEV_URL_FO = SERVER_API_FO_URL;
+export const DEV_URL_WR = SERVER_API_WR_URL;

apps/dm/components/ui/map/SearchInputText/SearchInputText.tsx

@@ -0,0 +1,108 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+
+type SearchType = {
+  searchNm: string;
+  searchPk: string;
+};
+type thisProps = {
+  label: string | undefined;
+  initValue: string | undefined;
+  setValue: (searchNm?: string) => void;
+  setRtnData: (rtnData: any) => void;
+  searchList?: any[];
+};
+export default function SearchInputText({
+  label = undefined,
+  initValue = undefined,
+  setValue = () => {},
+  setRtnData = () => {},
+  searchList = undefined,
+}: thisProps) {
+ 
+  const [isOpen, setIsOpen] = useState(false);
+  const [textValue, setTextValue] = useState(initValue || "");
+
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  const handleInputChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const value = e.target.value;
+
+      setTextValue(value);
+      setValue(value);
+      if (value && value!=='') {
+        setIsOpen(true);
+      } else {
+        setIsOpen(false);
+      }
+    },
+    [setValue]
+  );
+
+  const handleSuggestionClick = useCallback(
+    (searchNm: string) => {
+      // Do not update textValue to keep input unchanged on suggestion click
+      setValue(searchNm);
+      setIsOpen(false);
+      setRtnData(searchList?.find((item) => item.searchNm === searchNm) || {});
+    },
+    [searchList, setRtnData, setValue]
+  );
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        wrapperRef.current &&
+        !wrapperRef.current.contains(event.target as Node)
+      ) {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+
+  return (
+    <div ref={wrapperRef} className="relative">
+      <input
+        type="text"
+        value={textValue ||''}
+        onChange={handleInputChange}
+        /* onFocus={() => setIsOpen(true)} */
+        className="w-full h-[3.2rem] !text-xl pl-3 text-gray-600 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+        placeholder={`${label}을(를) 입력하세요`}
+      />
+      {isOpen && (
+        <div className="absolute top-full left-0 z-50 mb-2 max-h-72 w-full overflow-auto rounded-md border border-gray-300 bg-white shadow-lg">
+          <div className="max-h-72">
+            {searchList && searchList.length > 0 ? (
+              searchList.map((item: SearchType, index: number) => (
+                <div
+                  key={index}
+                  className="w-full cursor-pointer overflow-auto px-5 py-3 text-left !text-xl hover:bg-gray-100"
+                  onClick={() => handleSuggestionClick(item.searchNm)}
+                  role="button"
+                  tabIndex={0}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter" || e.key === " ") {
+                      handleSuggestionClick(item.searchNm);
+                    }
+                  }}
+                >
+                  {item.searchPk?.substring(0, 10)}&nbsp;
+                  <span className="float-right">{item.searchNm}</span>
+                </div>
+              ))
+            ) : (
+              <div className="!text-xl w-full px-5 py-3 hover:bg-gray-100 cursor-pointer overflow-auto">
+                검색 결과가 없습니다.
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

apps/dm/components/ui/map/searchBar/searchBar.tsx

@@ -0,0 +1,145 @@
+"use client";
+import { useDmStore } from "@/app/store";
+import {
+  SearchDiv,
+  SearchFormLeft,
+  SearchFormRight,
+  SelectBox,
+  type SelectDataType,
+} from "@common/business_components/ui";
+import { Button, Label } from "@common/components/ui";
+import { useCallback, useEffect, useState } from "react";
+import SearchInputText from "../SearchInputText/SearchInputText";
+
+export function SearchBar({
+  setHasuPk,
+  onApply
+}: {
+  setHasuPk: (hasuPk: string) => void;
+  onApply: () => void;
+}) {
+  const { map, Common, initializeCommonData, findRuseFclt } = useDmStore(
+    (state) => state
+  );
+  const [sidoValue, setSidoValue] = useState<string>("");
+  const [sigunValue, setSigunValue] = useState<string>("");
+  const [filteredSigunData, setFilteredSigunData] = useState<SelectDataType[]>([
+    { text: "전체", val: "0" },
+  ]);
+  useEffect(() => {
+    initializeCommonData();
+  }, [initializeCommonData]);
+
+  const initializeSigunData = useCallback(
+    (sidoCd: string) => {
+      if (sidoCd === "0") {
+        setSigunValue("0");
+        setFilteredSigunData([{ text: "전체", val: "0" }]);
+      } else {
+        const newFilteredData = [
+          { text: "전체", val: "0" },
+          ...Common.selectSigunData.filter(
+            (item: SelectDataType) => item.val.substring(0, 2) === sidoCd
+          ),
+        ];
+        setSigunValue("0");
+        setFilteredSigunData(newFilteredData);
+      }
+    },
+    [Common.selectSigunData]
+  );
+  const onSelectValue = useCallback(
+    (val: string, type: string) => {
+      switch (type) {
+        case "ctpvCd":
+          initializeSigunData(val);
+          setSidoValue(val);
+          break;
+        case "sggCd":
+          setSigunValue(val);
+      }
+    },
+    [initializeSigunData]
+  );
+
+  useEffect(() => {
+    console.log("map.ruseFcltList ", map.ruseFcltList);
+  }, [map.ruseFcltList]);
+
+  return (
+    <>
+      <div className="grid grid-cols-4 gap-4 ">
+        <div className="col-span-4">
+          <SearchDiv>
+            <SearchFormLeft>
+              <div className="col-span-10 flex flex-row">
+                <SelectBox
+                  className="col-span-2 w-1/6 h-full text-2xl"
+                  label="시도"
+                  selectClass={""}
+                  selectArray={Common.selectSidoData || []}
+                  onSelectValue={(val) =>
+                    onSelectValue(val.toString(), "ctpvCd")
+                  }
+                  value={sidoValue || Common.selectSidoData[0]?.val || ""}
+                />
+                <SelectBox
+                  className="col-span-2 w-1/6 h-full text-2xl ml-10"
+                  label="시군구"
+                  selectClass={""}
+                  selectArray={filteredSigunData || []}
+                  onSelectValue={(val) =>
+                    onSelectValue(val.toString(), "sggCd")
+                  }
+                  value={sigunValue}
+                />
+                <div className="col-span-6 flex flex-row items-center min-w-[27rem] ml-10">
+                  <Label className="text-xl justify-self-center mt-2 mx-3">
+                    하수재이용시설
+                  </Label>
+                  <SearchInputText
+                    label={"시설명"}
+                    initValue={undefined}
+                    setValue={(searchNm?: string) => {
+                      let sggOrCity = "";
+                      if (searchNm) {
+                        if (sigunValue === "0" || sigunValue === "") {
+                          sggOrCity = sidoValue;
+                        } else {
+                          sggOrCity = sigunValue;
+                        }
+                        findRuseFclt(sggOrCity, searchNm);
+                      }
+                    }}
+                    setRtnData={(rtnData: any) => {
+                      setHasuPk(rtnData.bscFctCd || "");
+                    }}
+                    searchList={map.ruseFcltList || []}
+                  />
+                </div>
+                <div className="flex flex-row space-x-2">
+                  <Button
+                    color="red"
+                    className="mx-2 mt-2"
+                    size={"sm"}
+                    onClick={() => {}}
+                  >
+                    후보지선택
+                  </Button>
+                  <Button
+                    color="sky"
+                    className="mt-2"
+                    size={"sm"}
+                    onClick={() => {onApply();}}
+                  >
+                    적용
+                  </Button>
+                </div>
+              </div>
+            </SearchFormLeft>
+          </SearchDiv>
+        </div>
+      </div>
+    </>
+  );
+}

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

@@ -0,0 +1,34 @@
+import { FormUi } from "@common/business_components/ui";
+import type { ReactNode } from "react";
+import type { ControllerRenderProps, FieldError, FieldValues, Path } from "react-hook-form";
+
+
+interface AccessibleFormFieldProps<T extends FieldValues> {
+  field: ControllerRenderProps<T, Path<T>>;
+  label: string;
+  required?: boolean;
+  error?: FieldError;
+  inputComponent: ReactNode;
+}
+
+export function AccessibleFormField<T extends FieldValues>({
+  label,
+  required = false,
+  error,
+  inputComponent,
+}: AccessibleFormFieldProps<T>) {
+  const labelText = required ? `${label} *` : label;
+  
+  return (
+    <FormUi label={labelText}>
+      <div>
+        {inputComponent}
+        {error?.message && Array.from(new Set(error.message.split('\n'))).map((msg, idx) => (
+            <p key={idx} className="text-red-500 text-sm mt-1" role="alert">
+                {msg}
+            </p>
+        ))}
+      </div>
+    </FormUi>
+  );
+}

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

@@ -0,0 +1,606 @@
+import ModalSimilarPage from "@/app/(base-layout)/pages/sdmMng/sdmInfoInsert/modalSimilar/page";
+import type { FormData } from "@/app/(base-layout)/pages/sdmMng/sdmInfoInsert/page";
+import { useDmStore } from "@/app/store";
+import {
+  CANDIDATE,
+  DatePicker,
+  FormField,
+  FormLabel,
+  FormUi,
+  SelectBox,
+  UiModal,
+} from "@common/business_components";
+import { Input } from "@common/components";
+import { Button } from "@common/components/ui";
+import { useSearchParams } from "next/navigation";
+import { useCallback, useEffect, useState } from "react";
+import { AccessibleFormField } from "./AccessibleFormField";
+import type { ControllerRenderProps, UseFormReturn } from "react-hook-form";
+import SearchInputText from "../common/searhDemandInput/component";
+import type { DemandCompType } from "@/app/store/sdmMng";
+import NewWindowPortal from "@/app/(popup-layout)/map/popup/windowPotal";
+import Map from "@/app/(popup-layout)/map/popup/sdmInfoMap";
+
+export interface SdmInfoRegFormProps {
+  form: UseFormReturn<FormData>;
+  onCheckboxChange?: (checked: boolean) => void;
+  facilityName?: string;
+}
+
+type FieldComponent = (
+  field: ControllerRenderProps<FormData, keyof FormData>
+) => JSX.Element;
+
+export function SdmInfoRegForm({
+  form,
+  onCheckboxChange,
+  facilityName,
+}: SdmInfoRegFormProps) {
+  const { initializeCommonData, Sdm } = useDmStore((state) => state);
+  const { useTypesData } = Sdm;
+  const searchParams = useSearchParams();
+
+  const [sdmNmValue, setSdmNmValue] = useState<string>(
+    searchParams.get("dmdCoNm") || ""
+  );
+  const [isBznmTotNoDisabled, setIsBznmTotNoDisabled] = useState(false);
+  const [isSimilarCase, setIsSimilarCase] = useState(false);
+  const [key, setKey] = useState(0);
+  // 후보지 팝업 오픈 상태
+  const [isCandidatePopup, setIsCandidatePopup] = useState(false);
+
+  //모달 조회에 필요한 데이터
+  const [sply, setSply] = useState<number>(0);
+  const [usageCd, setUsageCd] = useState<string>("청소");
+  const [money, setMoney] = useState<number>(0);
+
+  useEffect(() => {
+    initializeCommonData();
+  }, [initializeCommonData]);
+
+
+
+  useEffect(() =>{
+    console.log('candidateTitle ', form.getValues("candidateTitle"))
+  },[form.getValues("candidateTitle") ])
+  useEffect(() => {
+    if (useTypesData && useTypesData.length > 0) {
+      setTimeout(() => {
+        form.setValue("usePurpose", useTypesData[0]?.val?.toString() || "");
+      }, 500);
+    }
+  }, [useTypesData, form]);
+
+  useEffect(() => {
+    if (facilityName) {
+      setSdmNmValue(facilityName);
+      form.setValue("sdmNm", facilityName);
+      setKey((prev) => prev + 1);
+    }
+  }, [facilityName, form]);
+
+  useEffect(() => {
+    if (searchParams.get("dmdCoNm")) {
+      form.setValue("sdmNm", searchParams.get("dmdCoNm") || "");
+      setSdmNmValue(searchParams.get("dmdCoNm") || "");
+      setKey((prev) => prev + 1);
+    }
+  }, [searchParams, form]);
+
+  const handleCandidateClose = useCallback(
+    () => setIsCandidatePopup(false),
+    []
+  );
+
+  const searchCandidate = (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    //setIsCandidatePopup(true);
+    const popupOptions =  `width=1920,height=1080,resizable='y',scrollbars='y'`;
+    window.open("/map/popup", "candidatePopup", popupOptions);
+  };
+
+  const searchSimilarCase = (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsSimilarCase(true);
+  };
+
+  const handleCheckboxChange = (checked: boolean) => {
+    setIsBznmTotNoDisabled(checked);
+    onCheckboxChange?.(checked);
+  };
+
+  // 시설 선택시 이벤트
+  const selectComp = useCallback(
+    (rtnData: DemandCompType[]) => {
+      const rtnCompData = rtnData?.[0];
+      form.setValue("sdmNm", rtnCompData?.dmdCoNm || "");
+    },
+    [form]
+  );
+
+  const formFields: Array<{
+    name: keyof FormData;
+    label: string;
+    component: FieldComponent | undefined;
+    formIndex: number;
+    required?: boolean;
+  }> = [
+    {
+      name: "sdmNm",
+      label: "수요처선택",
+      formIndex: 0,
+      required: true,
+      component: (field) => (
+        <div key={key}>
+          <SearchInputText
+            label="수요처명"
+            setValue={(val) => {
+              setSdmNmValue(val || "");
+              field.onChange(val || "");
+            }}
+            setRtnData={selectComp}
+            initValue={facilityName || sdmNmValue}
+            {...field}
+          />
+        </div>
+      ),
+    },
+    {
+      name: "demandYmd",
+      label: "요구시기",
+      formIndex: 0,
+      required: true,
+      component: (field) => (
+        <div className="w-full">
+          <DatePicker
+            mode="single"
+            selected={field.value as Date}
+            onSelect={(date) => {
+              field.onChange(date as Date);
+            }}
+            className="w-full"
+            defaultMonth={field.value as Date}
+            field={{
+              value: field.value as Date,
+              onChange: (date: Date | undefined) => {
+                field.onChange(date as Date);
+              },
+            }}
+            selectClass={undefined}
+          />
+        </div>
+      ),
+    },
+    {
+      name: "demandQnty",
+      label: "요구수량(㎥/d)",
+      formIndex: 0,
+      required: true,
+      component: (field) => (
+        <Input
+          placeholder="요구수량(㎥/d)을 입력하세요"
+          type="text"
+          className="!text-xl text-gray-600"
+          value={field.value as string}
+          onChange={(e) => {
+            field.onChange(e);
+            setSply(Number(e.target.value));
+          }}
+          onBlur={field.onBlur}
+          name={field.name}
+          ref={field.ref}
+        />
+      ),
+    },
+    {
+      name: "usePurpose",
+      label: "사용용도",
+      formIndex: 0,
+      required: true,
+      component: (field) => (
+        <SelectBox
+          selectClass={undefined}
+          label=""
+          selectArray={useTypesData}
+          onSelectValue={(val) => {
+            field.onChange(val.toString());
+            setUsageCd(val.toString());
+          }}
+          className=""
+          value={field.value as string}
+        />
+      ),
+    },
+    {
+      name: "money",
+      label: "희망단가(원/m3)",
+      formIndex: 0,
+      required: true,
+      component: (field) => (
+        <AccessibleFormField
+          field={field}
+          label="희망단가(원/㎥)"
+          required={true}
+          error={form.formState.errors.money}
+          inputComponent={
+            <FormUi
+              onCheckboxChange={handleCheckboxChange}
+              isDisabled={isBznmTotNoDisabled}
+            >
+              <Input
+                placeholder="희망단가(원/㎥)을 입력하세요"
+                type="text"
+                className="!text-xl text-gray-600"
+                value={field.value as string}
+                onChange={(e) => {
+                  field.onChange(e);
+                  setMoney(Number(e.target.value));
+                }}
+                onBlur={field.onBlur}
+                name={field.name}
+                ref={field.ref}
+              />
+            </FormUi>
+          }
+        />
+      ),
+    },
+    {
+      name: "reqWaterQlty",
+      label: "요구수질",
+      formIndex: 0,
+      required: true,
+      component: undefined,
+    },
+    {
+      name: "grssClfg",
+      label: "총대장균군수(개/100ml)",
+      formIndex: 1,
+      required: true,
+      component: (field) => (
+        <Input
+          placeholder="총대장균군수를 입력하세요"
+          type="text"
+          className="!text-xl text-gray-600"
+          value={field.value as string}
+          onChange={field.onChange}
+          onBlur={field.onBlur}
+          name={field.name}
+          ref={field.ref}
+        />
+      ),
+    },
+    {
+      name: "tn",
+      label: "총질소(T-N)(mg/L)",
+      formIndex: 1,
+      required: true,
+      component: (field) => (
+        <Input
+          placeholder="총질소를 입력하세요"
+          type="text"
+          className="!text-xl text-gray-600"
+          value={field.value as string}
+          onChange={field.onChange}
+          onBlur={field.onBlur}
+          name={field.name}
+          ref={field.ref}
+        />
+      ),
+    },
+    {
+      name: "combResdch",
+      label: "결합잔류염소(mg/L)",
+      formIndex: 1,
+      required: true,
+      component: (field) => (
+        <Input
+          placeholder="결합잔류염소를 입력하세요"
+          type="text"
+          className="!text-xl text-gray-600"
+          value={field.value as string}
+          onChange={field.onChange}
+          onBlur={field.onBlur}
+          name={field.name}
+          ref={field.ref}
+        />
+      ),
+    },
+    {
+      name: "tph",
+      label: "총인(T-P)(mg/L)",
+      formIndex: 1,
+      required: true,
+      component: (field) => (
+        <Input
+          placeholder="총인을 입력하세요"
+          type="text"
+          className="!text-xl text-gray-600"
+          value={field.value as string}
+          onChange={field.onChange}
+          onBlur={field.onBlur}
+          name={field.name}
+          ref={field.ref}
+        />
+      ),
+    },
+    {
+      name: "trbt",
+      label: "탁도(NTU)",
+      formIndex: 1,
+      required: true,
+      component: (field) => (
+        <Input
+          placeholder="탁도를 입력하세요"
+          type="text"
+          className="!text-xl text-gray-600"
+          value={field.value as string}
+          onChange={field.onChange}
+          onBlur={field.onBlur}
+          name={field.name}
+          ref={field.ref}
+        />
+      ),
+    },
+    {
+      name: "ph",
+      label: "수소이온농도(pH)",
+      formIndex: 1,
+      required: true,
+      component: (field) => (
+        <Input
+          placeholder="수소이온농도를 입력하세요"
+          type="text"
+          className="!text-xl text-gray-600"
+          value={field.value as string}
+          onChange={field.onChange}
+          onBlur={field.onBlur}
+          name={field.name}
+          ref={field.ref}
+        />
+      ),
+    },
+    {
+      name: "bod",
+      label: "생물학적 산소요구량(BOD)(mg/L)",
+      formIndex: 1,
+      required: true,
+      component: (field) => (
+        <Input
+          placeholder="생물학적 산소요구량을 입력하세요"
+          type="text"
+          className="!text-xl text-gray-600"
+          value={field.value as string}
+          onChange={field.onChange}
+          onBlur={field.onBlur}
+          name={field.name}
+          ref={field.ref}
+        />
+      ),
+    },
+    {
+      name: "clIonQnt",
+      label: "염화물(mgCL/L)",
+      formIndex: 1,
+      required: true,
+      component: (field) => (
+        <Input
+          placeholder="염화물을 입력하세요"
+          type="text"
+          className="!text-xl text-gray-600"
+          value={field.value as string}
+          onChange={field.onChange}
+          onBlur={field.onBlur}
+          name={field.name}
+          ref={field.ref}
+        />
+      ),
+    },
+    {
+      name: "smll",
+      label: "냄새",
+      formIndex: 1,
+      required: true,
+      component: (field) => (
+        <Input
+          placeholder="냄새를 입력하세요"
+          type="text"
+          className="!text-xl text-gray-600"
+          value={field.value as string}
+          onChange={field.onChange}
+          onBlur={field.onBlur}
+          name={field.name}
+          ref={field.ref}
+        />
+      ),
+    },
+    {
+      name: "cdtnv",
+      label: "전기전도도(㎲/cm)",
+      formIndex: 1,
+      required: true,
+      component: (field) => (
+        <Input
+          placeholder="전기전도도를 입력하세요"
+          type="text"
+          className="!text-xl text-gray-600"
+          value={field.value as string}
+          onChange={field.onChange}
+          onBlur={field.onBlur}
+          name={field.name}
+          ref={field.ref}
+        />
+      ),
+    },
+    {
+      name: "crmty",
+      label: "색도(도)",
+      formIndex: 1,
+      required: true,
+      component: (field) => (
+        <Input
+          placeholder="색도를 입력하세요"
+          type="text"
+          className="!text-xl text-gray-600"
+          value={field.value as string}
+          onChange={field.onChange}
+          onBlur={field.onBlur}
+          name={field.name}
+          ref={field.ref}
+        />
+      ),
+    },
+    {
+      name: "rmrk",
+      label: "비고",
+      formIndex: 1,
+      component: (field) => (
+        <Input
+          placeholder="비고를 입력하세요"
+          type="text"
+          className="!text-xl text-gray-600"
+          value={field.value as string}
+          onChange={field.onChange}
+          onBlur={field.onBlur}
+          name={field.name}
+          ref={field.ref}
+        />
+      ),
+    },
+    {
+      name: "candidateTitle",
+      label: CANDIDATE || "공급처 후보지 선택(필수아님)",
+      formIndex: 2,
+      component: () => (
+        <div>
+          <div className="-mt-14 float-right flex gap-10">
+            <Button className={"bg-gray-200"} onClick={searchCandidate}>
+              후보지 조회
+            </Button>
+            <Button className={"bg-gray-200"} onClick={searchSimilarCase}>
+              유사사례
+            </Button>
+          </div>
+          <div className="flex justify-center gap-10 mt-5">
+            {(form.getValues("candidateTitle") || []).map((candidate: any, index: number) => (
+              <Input
+                key={index}
+                placeholder={`후보지${index + 1}`}
+                type="text"
+                className="!text-xl w-[130px] text-gray-600"
+                value={candidate.ruseUtztnFcltNm}
+                readOnly
+              />
+            ))}
+          </div>
+        </div>
+      ),
+    },
+  ];
+
+  const normalFields = formFields.filter(
+    (f) => f.formIndex === 0 && f.component
+  );
+  const groupFields = formFields.filter(
+    (f) => f.formIndex === 1 && f.component
+  );
+  const candidateFields = formFields.filter(
+    (f) => f.formIndex === 2 && f.component
+  );
+
+  return (
+    <>
+      {normalFields.map(({ name, label, component, required }) =>
+        component ? (
+          <FormField
+            key={name}
+            control={form.control}
+            name={name}
+            render={({ field }) =>
+              name === "money" ? (
+                component(field)
+              ) : (
+                // <FormUi label={label}>
+                //   {component(field)}
+                // </FormUi>
+                <AccessibleFormField
+                  field={field}
+                  label={label}
+                  required={required}
+                  error={form.formState.errors[name]}
+                  inputComponent={component(field)}
+                />
+              )
+            }
+          />
+        ) : null
+      )}
+
+      {groupFields.length > 0 && (
+        <div className="mt-10">
+          <FormLabel className="text-xl">요구수질</FormLabel>
+          <div className="flex flex-wrap justify-start gap-10 mt-3 mb-3">
+            {groupFields.map(({ name, label, component, required }) => (
+              <div key={name} className="min-w-[180px]">
+                <FormField
+                  control={form.control}
+                  name={name}
+                  render={({ field }) => (
+                    // <FormUi label={label}>
+                    //   {component?.(field)}
+                    // </FormUi>
+                    <AccessibleFormField
+                      field={field}
+                      label={label}
+                      required={required}
+                      error={form.formState.errors[name]}
+                      inputComponent={component?.(field)}
+                    />
+                  )}
+                />
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {candidateFields.map(({ name, label, component, required }, index) =>
+        component ? (
+          <FormField
+            key={name + index}
+            control={form.control}
+            name={name}
+            render={({ field }) => (
+              // <FormUi label={label}>
+              //   {component(field)}
+              // </FormUi>
+              <AccessibleFormField
+                field={field}
+                label={label}
+                required={required}
+                error={form.formState.errors[name]}
+                inputComponent={component?.(field)}
+              />
+            )}
+          />
+        ) : null
+      )}
+
+      {isSimilarCase && (
+        <UiModal
+          body={
+            <ModalSimilarPage sply={sply} usageCd={usageCd} money={money} />
+          }
+          bodyClass="sm:max-w-[100vw] w-[1400px] h-[900px]"
+          open={isSimilarCase}
+          onOpenChange={(open) => !open && setIsSimilarCase(false)}
+          noHeaderYn="Y"
+          noFooterYn="Y"
+        />
+      )}
+
+    </>
+  );
+}

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

@@ -0,0 +1,173 @@
+import { useDmStore } from "@/app/store";
+import type { DemandCompType } from "@/app/store/sdmMng";
+import { BZNM_TOT_NO, FormField, FormUi } from "@common/business_components";
+import { Button, Input } from "@common/components";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { sha512 } from 'js-sha512';
+import { useEffect, useState, useMemo } from "react";
+import { FormProvider, useForm, type ControllerRenderProps } from "react-hook-form";
+import * as z from "zod";
+
+export function SdmLoginForm() {
+  const { actionLogin, initializeCommonData } = useDmStore((state) => state);
+  const [isBznmTotNoDisabled, setIsBznmTotNoDisabled] = useState(true);
+
+  const formatBusinessNumber = (value: string) => {
+    // 숫자만 추출
+    const digitsOnly = value.replace(/\D/g, "");
+    
+    // 10자리까지만 처리
+    const limitedDigits = digitsOnly.slice(0, 10);
+    
+    // 3-2-5 형식으로 포맷팅
+    if (limitedDigits.length <= 3) {
+      return limitedDigits;
+    } else if (limitedDigits.length <= 5) {
+      return `${limitedDigits.slice(0, 3)}-${limitedDigits.slice(3)}`;
+    } else {
+      return `${limitedDigits.slice(0, 3)}-${limitedDigits.slice(3, 5)}-${limitedDigits.slice(5)}`;
+    }
+  };
+  
+  // 스키마를 useMemo로 최적화
+  const sdmLoginFormSchema = useMemo(() => z.object({
+    dmdInfoId: z.string()
+      .min(1, "사업자등록번호를 입력해주세요")
+      .regex(/^\d{10}$/, "사업자등록번호는 10자리 숫자만 입력 가능합니다"),
+    bznmTotNo: isBznmTotNoDisabled 
+      ? z.string().optional()
+      : z.string().length(4, "종사업자등록번호는 4자리 숫자만 입력 가능합니다"),
+    password: z.string()
+      .min(1, "비밀번호를 입력해주세요")
+      .min(8, "비밀번호는 8자 이상 입력해주세요") 
+      .max(16, "비밀번호는 16자 이내로 입력해주세요"),
+    rgtr: z.string().optional(),
+    dmdAplyPswd: z.string().optional(),
+  }), [isBznmTotNoDisabled]);
+
+  type FormData = z.infer<typeof sdmLoginFormSchema>;
+  type FieldComponent = (field: ControllerRenderProps<FormData, keyof FormData>) => JSX.Element;
+  
+  const formSchema = sdmLoginFormSchema;
+
+  useEffect(() => {
+    initializeCommonData();
+  }, [initializeCommonData]);
+
+  const defaultValues: FormData = {
+    dmdInfoId: '',
+    bznmTotNo: '',
+    password: '',
+    rgtr: '',
+    dmdAplyPswd: '',
+  };
+
+  const form = useForm<FormData>({
+    resolver: zodResolver(formSchema),
+    defaultValues,
+    mode: "onChange",
+  });
+
+  const handleCheckboxChange = (checked: boolean) => {
+    setIsBznmTotNoDisabled(checked);
+  };
+
+  const handleLogin = () => {
+    const data = form.getValues();
+    const passwordStr = sha512.hex(data.password)
+    data.dmdAplyPswd = passwordStr;
+    const param = {
+      dmdInfoId: data.dmdInfoId + (isBznmTotNoDisabled ? '0000' : data.bznmTotNo),
+      dmdAplyPswd: data.dmdAplyPswd,
+    }
+    actionLogin(param as unknown as DemandCompType);
+  };
+  
+  const formFields: Array<{
+    name: keyof FormData;
+    label: string;
+    component: FieldComponent | undefined;
+  }> = [
+    {
+      name: "dmdInfoId",
+      label: "사업자등록번호",
+      component: (field) => (
+        <Input 
+          placeholder="사업자등록번호를 입력하세요"
+          type="text"
+          className="!mt-5 !mb-5 !text-xl text-gray-600"
+          {...field}
+          value={formatBusinessNumber(field.value as string)}
+          onChange={(e) => {
+            const dmdId = e.target.value.replace(/\D/g, "").slice(0, 10);
+            field.onChange(dmdId);
+          }}
+        />
+      )
+    },
+    {
+      name: "bznmTotNo",
+      label: BZNM_TOT_NO || "종사업자등록번호",
+      component: (field) => (
+        <FormUi 
+          label="종사업자등록번호"
+          onCheckboxChange={handleCheckboxChange}
+          isDisabled={isBznmTotNoDisabled}
+        >
+          <Input 
+            placeholder="여러사업장이 있을 경우 입력해주세요" 
+            type="text"
+            className="!mt-5 !text-xl text-gray-600"
+            disabled={isBznmTotNoDisabled}
+            {...field}
+          />
+        </FormUi>
+      )
+    },
+    {
+      name: "password",
+      label: "비밀번호",
+      component: (field) => (
+        <Input 
+          placeholder="비밀번호를 입력하세요" 
+          type="password"
+          className="!mt-5 !mb-5 !text-xl text-gray-600"
+          {...field} 
+        />
+      )
+    }
+  ];
+
+  return (
+    <>
+      <div>
+        <FormProvider {...form}>
+          {formFields.map(({ name, label, component }) => (
+            <FormField
+              key={name}
+              control={form.control}
+              name={name}
+              render={({ field }) => (
+                label==='종사업자등록번호' ? 
+                  <> 
+                    {component && component(field)}
+                  </>
+                : <FormUi label={label}>
+                    {component && component(field)}
+                  </FormUi>
+              )}
+            />
+          ))}
+        </FormProvider>
+        <div className="flex justify-center pt-4">
+          <Button 
+            onClick={handleLogin} 
+            className="w-32 bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded-md transition-colors duration-200"
+          >
+            로그인
+          </Button>
+        </div>
+      </div>
+    </>
+  );
+}

apps/dm/eslint.config.mjs

@@ -0,0 +1,20 @@
+import { dirname } from "path";
+import { fileURLToPath } from "url";
+import { FlatCompat } from "@eslint/eslintrc";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+});
+
+const eslintConfig = [
+  ...compat.extends("next/core-web-vitals", "next/typescript"),
+  {rules:{
+    // other rules..
+    "@typescript-eslint/no-explicit-any": "off",
+  }},
+];
+
+export default eslintConfig;

apps/dm/middleware.ts

@@ -0,0 +1,132 @@
+import { NextRequest, NextResponse } from "next/server";
+import { CLAIM_NAME, AUTH_USER_ID } from "./src/shared/config";
+
+// 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 || "";
+
+export function middleware(req: NextRequest) {
+  const pathname = req.nextUrl.pathname;
+  console.log(`[Middleware] Request URL: ${req.url}`);
+  const searchParams = req.nextUrl.searchParams;
+
+  // if (pathname.startsWith("/server")) {
+  //   const queryParams = searchParams.toString();
+  //   const newUrl = `${serverApiUrl}${pathname.replace("/server", "")}${
+  //     queryParams ? `?${queryParams}` : ""
+  //   }`;
+  //   console.log(`[Middleware] Rewriting from '/server' path to: ${newUrl}`);
+  //   return NextResponse.rewrite(new URL(newUrl));
+  // }
+
+  if (pathname.startsWith("/server")) {
+    const decodedParams = Array.from(searchParams.entries())
+    .map(([key, value]) => `${key}=${decodeURIComponent(value)}`)
+    .join("&");
+
+    const newUrl = `${serverApiUrl}${pathname.replace("/server", "")}${
+      decodedParams ? `?${decodedParams}` : ""
+    }`;
+    return NextResponse.rewrite(new URL(newUrl));
+  }
+
+  if (pathname === "/") {
+    console.log(" maim 화면이동 ");
+    return NextResponse.redirect(new URL("/pages/wrStatus", req.url));
+  }
+
+
+  if (pathname.startsWith("/attach-service")) {
+    const requestHeaders = new Headers(req.headers);
+    // const token =
+    //   "eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJhMGVjN2EwNy03NTJhLTRmN2YtODlhNi04NTRlNjNkMmUzYTAiLCJhdXRob3JpdGllcyI6IlJPTEVfQURNSU4sUk9MRV9BTk9OWU1PVVMiLCJtbmdyWW4iOiJZIiwiZXhwIjoxNzUyMTM1OTk3fQ.itGY6M6mC2iwKvEpXw2KS6354T_B_OFz4hD26ResIgwJhpwiDJCMuSXD-rZ3AarmAIKd0udpCuJR7UlvFMN2ww";
+    // const userId = "a0ec7a07-752a-4f7f-89a6-854e63d2e3a0";
+    const token = req.cookies.get(CLAIM_NAME)?.value;
+    const userId = req.cookies.get(AUTH_USER_ID)?.value;
+    const newUrl = `${serverApiUrl}${pathname}`;
+
+    //wr:dev: pathname   /attach-service/api/v1/tus/upload/5e60b70a-956e-40c3-be5a-cdd3100bf8ad
+    //http://dev.onasys.co.kr:8000/attach-service/api/v1/tus/upload/5e60b70a-956e-40c3-be5a-cdd3100bf8ad
+    if (token) requestHeaders.set(CLAIM_NAME, token);
+    if (userId) requestHeaders.set(AUTH_USER_ID, userId);
+
+    console.log(
+      `[Middleware] Rewriting from '/attach-service' path to: ${newUrl}`
+    );
+    return NextResponse.rewrite(new URL(newUrl), {
+      headers: requestHeaders,
+    });
+  }
+
+  if (pathname.startsWith("/user-service")) {
+    const requestHeaders = new Headers(req.headers);
+    const newUrl = `${serverApiUrl}${pathname}`;
+
+    console.log(
+      `[Middleware] Rewriting from '/user-service' path to: ${newUrl}`
+    );
+    return NextResponse.rewrite(new URL(newUrl), {
+      headers: requestHeaders
+    });
+  }
+
+  if (pathname.startsWith("/geoserver")) {
+    let queryParams = searchParams.toString();
+    const typename = searchParams.get("TYPENAME");
+    console.log("typename  ", typename);
+
+    let newUrl = `${GEOSERVER_URL}${pathname.replace("/geoserver", "")}${queryParams ? `?${queryParams}` : ""}`;
+
+    if (
+      typename == "hasudo:tb_il_swage_prcs_fclt"  //하수처리시설
+      || typename == "hasudo:tb_ms_swage_prcs_zone"  //하수처리구역
+      || typename == "hasudo:tb_ms_sbmrg_dngr_map"  //침수위험지도
+      || typename == "hasudo:tb_ms_flood_dngr_map"  //도시침수지도
+    ) {
+      newUrl = `${GEOSERVER_URL}${pathname.replace("/geoserver", "")}${queryParams ? `?${queryParams}` : ""}`;
+    }
+    else if (
+      typename == "hasudo:tb_ms_swage_ppl"  //관로
+      || typename == "hasudo:tb_ms_swage_mhl"  //맨홀
+      || typename == "hasudo:tb_ms_swage_pmstn"  //펌프장
+      || typename == "hasudo:tb_ms_stofcbr" //우수토실
+    ) {
+      newUrl = `${LX_GEOSERVER_URL}${pathname.replace("/geoserver", "")}${queryParams ? `?${queryParams}` : ""}`;
+    }
+    else if (
+      typename == "hasudo:om_dt_untrt_swg_rain"  //중점우수토실
+      || typename == "hasudo:om_wqlt_station"  //관측소
+      || typename == "hasudo:tb_wr_bdst_ruse_fclt"  //재이용시설
+      || typename == "hasudo:tb_wr_rnwtr_utztn_fclt"  //빗물이용시설
+      || typename == "hasudo:tb_wr_rswtr_fclt"  //중수도시설
+      || typename == "hasudo:tb_wr_htdfl_fclt"  //온배수시설
+      || typename == "hasudo:tb_wr_ruse_fclt_dmd_co"  //수요처
+      || typename == "hasudo:tb_wr_tmpr_dmd_co"  //잠재수요처
+    ){
+      const url = req.nextUrl.clone();
+      url.searchParams.set('TYPENAME', typename.replace("hasudo:",""));
+      queryParams = url.searchParams.toString();
+      newUrl = `${SEWERAGE_API_URL}/v1/map/geometry${queryParams ? `?${queryParams}` : ""}`;
+    }
+
+    console.log(`[Middleware] Rewriting from '/geoserver' path to: ${newUrl}`);
+    return NextResponse.rewrite(new URL(newUrl));
+  }
+
+  if (pathname.startsWith("/sewerage-service")) {
+    const queryParams = searchParams.toString();
+    const newUrl = `${SEWERAGE_API_URL}${pathname.replace("/sewerage-service/api", "")}${queryParams ? `?${queryParams}` : ""
+      }`;
+    console.log(`[Middleware] Rewriting from '/geoserver' path to: ${newUrl}`);
+    return NextResponse.rewrite(new URL(newUrl));
+  }
+
+  return NextResponse.next();
+}
+
+export const config = {
+  matcher: ["/server/:path*", "/user-service/:path*",   "/attach-service/:path*", "/geoserver/:path*", "/sewerage-service/:path*", "/"],
+};

apps/dm/next.config.ts

@@ -0,0 +1,34 @@
+import type { NextConfig } from "next";
+
+const subDomain =
+  process.env.NEXT_PUBLIC_SUB_DOMAIN || "http://localhost:3000";
+
+const nextConfig: NextConfig = {
+  output: "standalone",
+  async rewrites() {
+    return {
+      beforeFiles: [
+        {
+          source: "/_next/static/:path*",
+          destination: `${subDomain}/_next/static/:path*`,
+          has: [
+            {
+              type: "header",
+              key: "referer",
+              value: "(.*)/pst(.*)",
+            },
+          ],
+        },
+      ],
+      afterFiles: [
+        {
+          source: "/pst/:path*",
+          destination: `${subDomain}/pst/:path*`,
+        },
+      ],
+      fallback: [],
+    };
+  },
+};
+
+export default nextConfig;

apps/dm/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "dm",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev --turbopack",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@common/assets": "workspace:*",
+    "@common/business_components": "workspace:*",
+    "@common/components": "workspace:*",
+    "@hookform/resolvers": "^4.1.3",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "js-cookie": "^3.0.5",
+    "js-sha512": "^0.9.0",
+    "lucide-react": "^0.474.0",
+    "next": "15.1.7",
+    "react-hook-form": "^7.54.2",
+    "react-hot-toast": "^2.5.2",
+    "tailwind-merge": "^3.0.1",
+    "tailwindcss-animate": "^1.0.7",
+    "zod": "^3.24.2"
+  },
+  "devDependencies": {
+    "@eslint/eslintrc": "^3",
+    "@types/webpack": "^5.28.5",
+    "eslint": "^9",
+    "eslint-config-next": "15.1.7",
+    "postcss": "^8",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5"
+  }
+}

apps/dm/postcss.config.mjs

@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    tailwindcss: {},
+  },
+};
+
+export default config;

apps/dm/public/file.svg

@@ -0,0 +1 @@
+<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>