중수도 지도점검 엑셀등록 오류 메시지 추가

- 빗물펌프 자체 입력 정보 '처리구역', '처리분구' -> '배수구역', '배수분구'으로 수정
- 운영정보 검색 화면에 일련번호 추가

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/app/(with-base-layout)/user-statistics/page.tsx

@@ -0,0 +1,2 @@
+import { UserStatisticsPage } from "@/pages/user-statistics";
+export default UserStatisticsPage;

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/admin/ui/add-admin-dialog.tsx

@@ -47,7 +47,7 @@ function AddAdminDialog() {
 
   const [open, setOpen] = useState(false);
   const [userSearchQuery, setUserSearchQuery] = useState<UserSearchParams>({
-    keywordType: "",
+    keywordType: "userName",
     keyword: "",
   });
   const [selectedGroupId, setSelectedGroupId] = useState("");
@@ -193,6 +193,7 @@ function AddAdminDialog() {
 
         <form onSubmit={handleSearch} className="flex items-center gap-2">
           <Select
+            value={userSearchQuery.keywordType}
             onValueChange={(value) =>
               setUserSearchQuery({ ...userSearchQuery, keywordType: value })
             }
@@ -201,8 +202,8 @@ function AddAdminDialog() {
               <SelectValue placeholder="선택" />
             </SelectTrigger>
             <SelectContent>
-              <SelectItem value="userId">아이디</SelectItem>
               <SelectItem value="userName">이름</SelectItem>
+              <SelectItem value="userId">아이디</SelectItem>
             </SelectContent>
           </Select>
           <Input

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

@@ -7,7 +7,6 @@ import { getCoreRowModel, type PaginationState } from "@tanstack/react-table";
 import {
   Button,
   Input,
-  InputDatePicker,
   Label,
   Select,
   SelectContent,
@@ -15,10 +14,11 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@common/components";
+import { columns } from "@/pages/apilog/model/table-columns";
 import { ApiLogApi, type ApiLogParams } from "@/entities/apilog";
 import { useDataTable } from "@/shared/lib";
 import { ENDPOINT } from "@/shared/config";
-import { columns } from "@/pages/apilog/model/table-columns";
+import { InputDateRangePicker } from "@/shared/ui/input-date-range-picker";
 
 type DateRange = {
   from?: Date | undefined;
@@ -133,6 +133,11 @@ function ApiLogPage() {
     setDateRange(presetDateRange || defaultDateRange);
   };
 
+  const handleDateRangeChange = (dateRange: DateRange) => {
+    setDateRange(dateRange);
+    setPresetDateRange("");
+  };
+
   return (
     <div className="flex-1">
       <div className="card card-border">
@@ -148,20 +153,9 @@ function ApiLogPage() {
               <SelectItem value="3M">3개월</SelectItem>
             </SelectContent>
           </Select>
-          <InputDatePicker
-            value={dateRange.from}
-            onChange={(date) => {
-              setDateRange({ ...dateRange, from: date });
-              setPresetDateRange("");
-            }}
-          />
-          ~
-          <InputDatePicker
-            value={dateRange.to}
-            onChange={(date) => {
-              setDateRange({ ...dateRange, to: date });
-              setPresetDateRange("");
-            }}
+          <InputDateRangePicker
+            dateRange={dateRange}
+            setDateRange={handleDateRangeChange}
           />
           <Label className="ml-4 mr-2 text-label">사용자ID</Label>
           <Input

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

@@ -110,10 +110,16 @@ function DashboardPage() {
               <div className="absolute left-0 top-0 p-6 tracking-tighter text-white">
                 <h3 className="text-2xl font-medium">총 회원수</h3>
                 <div className="mt-2 text-6xl font-bold">
-                  {data?.memberTotCnt ?? "-"}
+                  {data?.memberTotCnt
+                    ? data.memberTotCnt.toLocaleString()
+                    : "-"}
                 </div>
                 <p className="mt-1 text-2xl opacity-80">
-                  금일 신규 가입자 {data?.memberTodayCnt ?? "-"}명
+                  금일 신규 가입자
+                  {data?.memberTodayCnt
+                    ? data.memberTodayCnt.toLocaleString()
+                    : "-"}
+                  명
                 </p>
               </div>
               {/* 차트 영역 */}
@@ -131,10 +137,12 @@ function DashboardPage() {
               <div className="absolute left-0 top-0 p-6 tracking-tighter">
                 <h3 className="text-2xl font-medium">전체 게시물</h3>
                 <div className="mt-2 text-6xl font-bold">
-                  {data?.pstTotCnt ?? "-"}
+                  {data?.pstTotCnt ? data.pstTotCnt.toLocaleString() : "-"}
                 </div>
                 <p className="mt-1 text-2xl opacity-80">
-                  금일 +{data?.pstTodayCnt ?? "-"} 등록
+                  금일 +
+                  {data?.pstTodayCnt ? data.pstTodayCnt.toLocaleString() : "-"}{" "}
+                  등록
                 </p>
               </div>
               {/* 차트 영역 */}
@@ -152,10 +160,16 @@ function DashboardPage() {
               <div className="absolute left-0 top-0 p-6 tracking-tighter">
                 <h3 className="text-2xl font-medium">오늘 접속자 수</h3>
                 <div className="mt-2 text-6xl font-bold">
-                  {data?.accessTodayCnt ?? "-"}
+                  {data?.accessTodayCnt
+                    ? data.accessTodayCnt.toLocaleString()
+                    : "-"}
                 </div>
                 <p className="mt-1 text-2xl opacity-80">
-                  전일 대비 +{data?.accessBefDayPer ?? "-"}%
+                  전일 대비 +
+                  {data?.accessBefDayPer
+                    ? data.accessBefDayPer.toLocaleString()
+                    : "-"}
+                  %
                 </p>
               </div>
               {/* 차트 영역 */}
@@ -173,7 +187,7 @@ function DashboardPage() {
               <div className="absolute left-0 top-0 p-6 tracking-tighter">
                 <h3 className="text-2xl font-medium">API 호출 건수</h3>
                 <div className="mt-2 text-6xl font-bold">
-                  {data?.apiTodayCnt ?? "-"}
+                  {data?.apiTodayCnt ? data.apiTodayCnt.toLocaleString() : "-"}
                 </div>
                 <p className="mt-1 text-2xl opacity-80">금일 누적</p>
               </div>
@@ -221,7 +235,10 @@ function DashboardPage() {
                   </div>
                   <div className="mt-5">
                     <div className="text-5xl font-bold">
-                      {data?.waitMemberCnt}건
+                      {data?.waitMemberCnt
+                        ? data.waitMemberCnt.toLocaleString()
+                        : "0"}
+                      건
                     </div>
                     <div className="mt-2 text-2xl text-gray-500">
                       신규 가입 승인 대기
@@ -253,7 +270,9 @@ function DashboardPage() {
                     <span className="text-2xl font-medium">메뉴 승인</span>
                   </div>
                   <div className="mt-5">
-                    <div className="text-5xl font-bold">3건</div>
+                    <div className="text-5xl font-bold">
+                      {(3).toLocaleString()}건
+                    </div>
                     <div className="mt-2 text-2xl text-gray-500">
                       매뉴 수정 승인 대기
                     </div>
@@ -283,7 +302,10 @@ function DashboardPage() {
                   </div>
                   <div className="mt-5">
                     <div className="text-5xl font-bold">
-                      {data?.waitCntnCnt}건
+                      {data?.waitCntnCnt
+                        ? data.waitCntnCnt.toLocaleString()
+                        : "0"}
+                      건
                     </div>
                     <div className="mt-2 text-2xl text-gray-500">
                       컨텐츠 수정 승인 대기
@@ -303,19 +325,19 @@ function DashboardPage() {
                 <div className="space-y-4">
                   <div className="flex items-center justify-between border-b border-border pb-4">
                     <span className="font-medium">신규 사용자 가입</span>
-                    <span>1분 전</span>
+                    <span>{(1).toLocaleString()}분 전</span>
                   </div>
                   <div className="flex items-center justify-between border-b border-border pb-4">
                     <span className="font-medium">메뉴 수정 요청</span>
-                    <span>5분 전</span>
+                    <span>{(5).toLocaleString()}분 전</span>
                   </div>
                   <div className="flex items-center justify-between border-b border-border pb-4">
                     <span className="font-medium">게시물 신고</span>
-                    <span>10분 전</span>
+                    <span>{(10).toLocaleString()}분 전</span>
                   </div>
                   <div className="flex items-center justify-between">
                     <span className="font-medium">컨텐츠 승인 요청</span>
-                    <span>15분 전</span>
+                    <span>{(15).toLocaleString()}분 전</span>
                   </div>
                 </div>
               </div>
@@ -328,20 +350,22 @@ function DashboardPage() {
               <div className="p-4">
                 <div className="space-y-4">
                   <div className="flex items-center justify-between border-b border-border pb-4">
-                    <span className="font-medium">3월 정기 시스템 점검</span>
+                    <span className="font-medium">
+                      {(3).toLocaleString()}월 정기 시스템 점검
+                    </span>
                     <span>내일</span>
                   </div>
                   <div className="flex items-center justify-between border-b border-border pb-4">
                     <span className="font-medium">서버 업데이트 예정</span>
-                    <span>3일 후</span>
+                    <span>{(3).toLocaleString()}일 후</span>
                   </div>
                   <div className="flex items-center justify-between border-b border-border pb-4">
                     <span className="font-medium">백업 스케줄</span>
-                    <span>5일 후</span>
+                    <span>{(5).toLocaleString()}일 후</span>
                   </div>
                   <div className="flex items-center justify-between">
                     <span className="font-medium">정기 보안 점검</span>
-                    <span>7일 후</span>
+                    <span>{(7).toLocaleString()}일 후</span>
                   </div>
                 </div>
               </div>

apps/cs/src/pages/groups/ui/group-form.tsx

@@ -161,11 +161,11 @@ function GroupForm({ form }: GroupFormProps) {
                     >
                       <div className="flex items-center space-x-2">
                         <RadioGroupItem value="Y" id="mngrY" />
-                        <Label htmlFor="mngrY">Y</Label>
+                        <Label htmlFor="mngrY">예</Label>
                       </div>
                       <div className="flex items-center space-x-2">
                         <RadioGroupItem value="N" id="mngrN" />
-                        <Label htmlFor="mngrN">N</Label>
+                        <Label htmlFor="mngrN">아니오</Label>
                       </div>
                     </RadioGroup>
                   </FormControl>

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

@@ -1,6 +1,6 @@
 "use client";
 
-import { memo, useState } from "react";
+import { memo, useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useConfirm } from "@frontend-opensource/use-react-hooks";
@@ -43,7 +43,7 @@ const GroupsDialog = memo(
     const { data: group } = useQuery({
       queryKey: [ENDPOINT.CMS_SERVICE.GROUPS, groupId],
       queryFn: () => GroupApi.findGroupById(groupId!),
-      enabled: !!groupId  && open, // open 시점 groupId가 있을 때만 상세 조회 API 호출
+      enabled: !!groupId && open, // open 시점 groupId가 있을 때만 상세 조회 API 호출
     });
 
     const { mutateAsync: createGroup } = useMutationWrapper({
@@ -77,7 +77,7 @@ const GroupsDialog = memo(
         delYn: group?.delYn ?? "",
         authrtId: group?.authrtId ?? "",
         siteId: group?.siteId ?? "",
-        mngrYn: group?.mngrYn ?? "",
+        mngrYn: group?.mngrYn ?? "Y",
       },
     });
 
@@ -91,6 +91,10 @@ const GroupsDialog = memo(
         if (await confirm(confirmMessage)) callback(data);
       };
 
+    useEffect(() => {
+      if (open) form.reset();
+    }, [open]);
+
     return (
       <Dialog open={open} onOpenChange={setOpen} {...props}>
         <DialogTrigger asChild>{children}</DialogTrigger>

apps/cs/src/pages/image/ui/create-page.tsx

@@ -23,6 +23,7 @@ function CreatePage() {
     resolver: zodResolver(imageFormSchema),
     defaultValues: {
       atflYn: "Y",
+      useYn: "Y",
     },
   });
 

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

@@ -124,6 +124,7 @@ function ImageForm({ form, imgSn, ...props }: ImageFormProps) {
                           {...field}
                           type="number"
                           min={0}
+                          max={9999}
                           value={field.value ?? ""}
                           onChange={(e) =>
                             field.onChange(parseInt(e.target.value))

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/cs/src/pages/loginlog/ui/loginlog-page.tsx

@@ -7,7 +7,6 @@ import { getCoreRowModel, type PaginationState } from "@tanstack/react-table";
 import {
   Button,
   Input,
-  InputDatePicker,
   Label,
   Select,
   SelectContent,
@@ -16,10 +15,11 @@ import {
   SelectValue,
   LoadingWithImage,
 } from "@common/components";
+import { columns } from "@/pages/loginlog/model/table-columns";
 import { LoginlogApi, type LoginlogParams } from "@/entities/loginlog";
 import { useDataTable } from "@/shared/lib";
 import { ENDPOINT } from "@/shared/config";
-import { columns } from "@/pages/loginlog/model/table-columns";
+import { InputDateRangePicker } from "@/shared/ui/input-date-range-picker";
 
 type DateRange = {
   from?: Date | undefined;
@@ -141,6 +141,11 @@ function LoginlogPage() {
     setDateRange(presetDateRange || defaultDateRange);
   };
 
+  const handleDateRangeChange = (dateRange: DateRange) => {
+    setDateRange(dateRange);
+    setPresetDateRange("");
+  };
+
   return (
     <div className="flex-1">
       <div className="card card-border">
@@ -156,20 +161,9 @@ function LoginlogPage() {
               <SelectItem value="3M">3개월</SelectItem>
             </SelectContent>
           </Select>
-          <InputDatePicker
-            value={dateRange.from}
-            onChange={(date) => {
-              setDateRange({ ...dateRange, from: date });
-              setPresetDateRange("");
-            }}
-          />
-          ~
-          <InputDatePicker
-            value={dateRange.to}
-            onChange={(date) => {
-              setDateRange({ ...dateRange, to: date });
-              setPresetDateRange("");
-            }}
+          <InputDateRangePicker
+            dateRange={dateRange}
+            setDateRange={handleDateRangeChange}
           />
           <Label className="ml-4 mr-2 text-label">사용자ID</Label>
           <Input

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

@@ -7,7 +7,6 @@ import { getCoreRowModel, type PaginationState } from "@tanstack/react-table";
 import {
   Button,
   Input,
-  InputDatePicker,
   Label,
   Select,
   SelectContent,
@@ -15,13 +14,14 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@common/components";
+import { columns } from "@/pages/privacylog/model/table-columns";
 import {
   PrivacyLogPrivacy,
   type PrivacyLogParams,
 } from "@/entities/privacylog";
 import { useDataTable } from "@/shared/lib";
 import { ENDPOINT } from "@/shared/config";
-import { columns } from "@/pages/privacylog/model/table-columns";
+import { InputDateRangePicker } from "@/shared/ui/input-date-range-picker";
 
 type DateRange = {
   from?: Date | undefined;
@@ -132,6 +132,11 @@ function PrivacyLogPage() {
     setDateRange(presetDateRange || defaultDateRange);
   };
 
+  const handleDateRangeChange = (dateRange: DateRange) => {
+    setDateRange(dateRange);
+    setPresetDateRange("");
+  };
+
   return (
     <div className="flex-1">
       <div className="card card-border">
@@ -147,20 +152,9 @@ function PrivacyLogPage() {
               <SelectItem value="3M">3개월</SelectItem>
             </SelectContent>
           </Select>
-          <InputDatePicker
-            value={dateRange.from}
-            onChange={(date) => {
-              setDateRange({ ...dateRange, from: date });
-              setPresetDateRange("");
-            }}
-          />
-          ~
-          <InputDatePicker
-            value={dateRange.to}
-            onChange={(date) => {
-              setDateRange({ ...dateRange, to: date });
-              setPresetDateRange("");
-            }}
+          <InputDateRangePicker
+            dateRange={dateRange}
+            setDateRange={handleDateRangeChange}
           />
           <Label className="ml-4 mr-2 text-label">조회정보</Label>
           <Input

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

@@ -13,7 +13,6 @@ import {
 import {
   Button,
   Input,
-  InputDatePicker,
   Label,
   Select,
   SelectContent,
@@ -31,8 +30,9 @@ import {
 } from "@/entities/post";
 import { BoardApi } from "@/entities/board";
 import { AuthorityButton } from "@/entities/menu-authority";
-import { useAlertStore, useSelectPrompt, useDataTable } from "@/shared/lib";
 import { ENDPOINT } from "@/shared/config";
+import { InputDateRangePicker } from "@/shared/ui/input-date-range-picker";
+import { useAlertStore, useSelectPrompt, useDataTable } from "@/shared/lib";
 import { columns } from "../model/table-columns";
 import { MovePostDialog } from "./move-post-dialog";
 
@@ -58,7 +58,7 @@ function RecentPage() {
   });
   const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
   const [presetDateRange, setPresetDateRange] = useState("");
-  const [dateRange, setDateRange] = useState<DateRange | undefined>({
+  const [dateRange, setDateRange] = useState<DateRange>({
     from: undefined,
     to: undefined,
   });
@@ -169,7 +169,7 @@ function RecentPage() {
   };
 
   const handlePresetDateRange = (value: string) => {
-    let presetDateRange: DateRange | undefined;
+    let presetDateRange: DateRange;
     switch (value) {
       case "1W":
         presetDateRange = {
@@ -190,12 +190,20 @@ function RecentPage() {
         };
         break;
       default:
-        presetDateRange = undefined;
+        presetDateRange = {
+          from: undefined,
+          to: undefined,
+        };
     }
     setPresetDateRange(value);
     setDateRange(presetDateRange);
   };
 
+  const handleDateRangeChange = (dateRange: DateRange) => {
+    setDateRange(dateRange);
+    setPresetDateRange("");
+  };
+
   const onSoftDeletePost = async () => {
     const { resolved, value: delRsn } =
       await prompt("삭제 사유를 입력해주세요.");
@@ -260,20 +268,9 @@ function RecentPage() {
               <SelectItem value="3M">3개월</SelectItem>
             </SelectContent>
           </Select>
-          <InputDatePicker
-            value={dateRange?.from}
-            onChange={(date) => {
-              setDateRange({ ...dateRange, from: date });
-              setPresetDateRange("");
-            }}
-          />
-          ~
-          <InputDatePicker
-            value={dateRange?.to}
-            onChange={(date) => {
-              setDateRange({ ...dateRange, to: date });
-              setPresetDateRange("");
-            }}
+          <InputDateRangePicker
+            dateRange={dateRange}
+            setDateRange={handleDateRangeChange}
           />
           <Label className="ml-4 mr-2 text-label">게시판</Label>
           <Select

apps/cs/src/pages/user-statistics/api/index.ts

@@ -0,0 +1 @@
+export { UserStatisticsApi } from "./user-statistics-service";

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

@@ -0,0 +1,138 @@
+import {
+  type AccessLog,
+  type AccessLogParams,
+  type AccessLogService,
+  type PageableList,
+} from "../model/user-statistics-interface";
+
+// 목 데이터
+const mockAccessLogs: AccessLog[] = [
+  {
+    no: 1,
+    accessTime: "2024-01-15 14:30:25",
+    accessIp: "192.168.1.100",
+    accessRegion: "서울특별시",
+    urlPath: "/index",
+    browser: "Chrome",
+    site: "SITE1",
+    accessType: "메인",
+  },
+  {
+    no: 2,
+    accessTime: "2024-01-15 14:28:15",
+    accessIp: "203.241.50.123",
+    accessRegion: "부산광역시",
+    urlPath: "/board/list",
+    browser: "Edge",
+    site: "SITE2",
+    accessType: "게시판",
+  },
+  {
+    no: 3,
+    accessTime: "2024-01-15 14:25:42",
+    accessIp: "175.223.45.67",
+    accessRegion: "대구광역시",
+    urlPath: "/statistics",
+    browser: "Safari",
+    site: "SITE1",
+    accessType: "통계",
+  },
+  {
+    no: 4,
+    accessTime: "2024-01-15 14:22:18",
+    accessIp: "211.252.87.45",
+    accessRegion: "인천광역시",
+    urlPath: "/contents/view",
+    browser: "Firefox",
+    site: "SITE3",
+    accessType: "컨텐츠",
+  },
+  {
+    no: 5,
+    accessTime: "2024-01-15 14:20:33",
+    accessIp: "121.254.12.89",
+    accessRegion: "광주광역시",
+    urlPath: "/search",
+    browser: "Chrome",
+    site: "SITE1",
+    accessType: "검색",
+  },
+];
+
+// 목 API 서비스
+class UserStatisticsApiImpl implements AccessLogService {
+  async getAccessLogList(
+    params: AccessLogParams,
+  ): Promise<PageableList<AccessLog>> {
+    // 실제 API 호출 대신 목 데이터 반환
+    const { page = 0, size = 10 } = params;
+
+    // 필터링 로직 (실제로는 서버에서 처리)
+    let filteredLogs = [...mockAccessLogs];
+
+    if (params.urlPath) {
+      filteredLogs = filteredLogs.filter((log) =>
+        log.urlPath.toLowerCase().includes(params.urlPath!.toLowerCase()),
+      );
+    }
+
+    if (params.accessIp) {
+      filteredLogs = filteredLogs.filter((log) =>
+        log.accessIp.includes(params.accessIp!),
+      );
+    }
+
+    if (params.accessRegion) {
+      filteredLogs = filteredLogs.filter((log) =>
+        log.accessRegion.includes(params.accessRegion!),
+      );
+    }
+
+    if (params.browser) {
+      filteredLogs = filteredLogs.filter(
+        (log) => log.browser.toLowerCase() === params.browser!.toLowerCase(),
+      );
+    }
+
+    if (params.siteId) {
+      filteredLogs = filteredLogs.filter((log) => log.site === params.siteId);
+    }
+
+    // 페이지네이션
+    const start = page * size;
+    const end = start + size;
+    const paginatedLogs = filteredLogs.slice(start, end);
+
+    // 목 응답 생성
+    return {
+      content: paginatedLogs,
+      pageable: {
+        pageNumber: page,
+        pageSize: size,
+        sort: {
+          empty: true,
+          sorted: false,
+          unsorted: true,
+        },
+        offset: page * size,
+        paged: true,
+        unpaged: false,
+      },
+      last: (page + 1) * size >= filteredLogs.length,
+      totalPages: Math.ceil(filteredLogs.length / size),
+      totalElements: filteredLogs.length,
+      size,
+      number: page,
+      sort: {
+        empty: true,
+        sorted: false,
+        unsorted: true,
+      },
+      first: page === 0,
+      numberOfElements: paginatedLogs.length,
+      empty: paginatedLogs.length === 0,
+    };
+  }
+}
+
+export const UserStatisticsApi = new UserStatisticsApiImpl();

apps/cs/src/pages/user-statistics/index.ts

@@ -0,0 +1 @@
+export { UserStatisticsPage } from "./ui/user-statistics-page";

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

@@ -0,0 +1,148 @@
+import { type ChartData, type ChartOptions } from "chart.js";
+
+// 일별 접속 현황 차트 데이터
+export const monthlyStatisticsData = {
+  labels: [
+    "1일",
+    "2일",
+    "3일",
+    "4일",
+    "5일",
+    "6일",
+    "7일",
+    "8일",
+    "9일",
+    "10일",
+    "11일",
+    "12일",
+    "13일",
+    "14일",
+    "15일",
+  ],
+  datasets: [
+    {
+      type: "bar" as const,
+      label: "페이지뷰",
+      data: [
+        850, 1000, 750, 750, 700, 750, 780, 800, 850, 900, 1200, 1700, 2300,
+        2100, 2600,
+      ],
+      backgroundColor: "rgba(54, 162, 235, 0.8)",
+      order: 2,
+    },
+    {
+      type: "line" as const,
+      label: "신규 접속자",
+      data: [
+        700, 600, 500, 550, 500, 550, 500, 550, 600, 850, 1200, 1500, 1700,
+        2300, 2200,
+      ],
+      borderColor: "rgba(255, 99, 132, 0.8)",
+      borderWidth: 2,
+      tension: 0.4,
+      pointRadius: 3,
+      order: 0,
+    },
+    {
+      type: "line" as const,
+      label: "총 접속자",
+      data: [
+        200, 300, 400, 500, 600, 500, 550, 500, 400, 500, 350, 800, 900, 1200,
+        1300,
+      ],
+      borderColor: "rgba(75, 192, 192, 0.8)",
+      borderWidth: 2,
+      tension: 0.4,
+      pointRadius: 3,
+      order: 1,
+    },
+  ],
+};
+
+export const monthlyStatisticsOptions: ChartOptions<"bar"> = {
+  responsive: true,
+  maintainAspectRatio: false,
+  plugins: {
+    legend: {
+      position: "top" as const,
+    },
+    tooltip: {
+      mode: "index" as const,
+      intersect: false,
+    },
+  },
+};
+
+// 사이트별 접속자 차트 데이터
+export const siteVisitorsData: ChartData<"bar"> = {
+  labels: ["SITE1", "SITE2", "SITE3", "SITE4", "SITE5"],
+  datasets: [
+    {
+      label: "사이트별 접속자",
+      data: [2500, 2000, 1500, 1200, 800],
+      backgroundColor: [
+        "rgba(54, 162, 235, 0.8)",
+        "rgba(153, 102, 255, 0.8)",
+        "rgba(255, 99, 132, 0.8)",
+        "rgba(255, 159, 64, 0.8)",
+        "rgba(255, 205, 86, 0.8)",
+      ],
+      borderWidth: 1,
+    },
+  ],
+};
+
+export const siteVisitorsOptions: ChartOptions<"bar"> = {
+  responsive: true,
+  maintainAspectRatio: false,
+  indexAxis: "y" as const,
+  plugins: {
+    legend: {
+      display: false,
+    },
+  },
+};
+
+// 브라우저별 접속자 차트 데이터
+export const browserStatisticsData: ChartData<"doughnut"> = {
+  labels: ["Chrome", "Edge", "Safari", "Firefox", "Internet Explorer"],
+  datasets: [
+    {
+      data: [45, 25, 15, 10, 5],
+      backgroundColor: [
+        "rgba(54, 162, 235, 0.8)",
+        "rgba(153, 102, 255, 0.8)",
+        "rgba(255, 99, 132, 0.8)",
+        "rgba(255, 159, 64, 0.8)",
+        "rgba(255, 205, 86, 0.8)",
+      ],
+      borderColor: [
+        "rgba(54, 162, 235, 1)",
+        "rgba(153, 102, 255, 1)",
+        "rgba(255, 99, 132, 1)",
+        "rgba(255, 159, 64, 1)",
+        "rgba(255, 205, 86, 1)",
+      ],
+      borderWidth: 1,
+    },
+  ],
+};
+
+export const browserStatisticsOptions: ChartOptions<"doughnut"> = {
+  responsive: true,
+  maintainAspectRatio: false,
+  plugins: {
+    legend: {
+      position: "bottom" as const,
+    },
+  },
+};
+
+export const chartData = {
+  monthlyStatisticsData,
+  monthlyStatisticsOptions,
+  siteVisitorsData,
+  siteVisitorsOptions,
+  browserStatisticsData,
+  browserStatisticsOptions,
+};

apps/cs/src/pages/user-statistics/model/table-columns.ts

@@ -0,0 +1,39 @@
+import { createColumnHelper } from "@tanstack/react-table";
+import { type AccessLog } from "./user-statistics-interface";
+
+const columnHelper = createColumnHelper<AccessLog>();
+
+export const columns = [
+  columnHelper.accessor("no", {
+    header: "No",
+    cell: (info) => info.getValue(),
+  }),
+  columnHelper.accessor("accessTime", {
+    header: "접속일시",
+    cell: (info) => info.getValue(),
+  }),
+  columnHelper.accessor("accessIp", {
+    header: "접속IP",
+    cell: (info) => info.getValue(),
+  }),
+  columnHelper.accessor("accessRegion", {
+    header: "접속지역",
+    cell: (info) => info.getValue(),
+  }),
+  columnHelper.accessor("urlPath", {
+    header: "URL경로",
+    cell: (info) => info.getValue(),
+  }),
+  columnHelper.accessor("browser", {
+    header: "브라우저",
+    cell: (info) => info.getValue(),
+  }),
+  columnHelper.accessor("site", {
+    header: "사이트",
+    cell: (info) => info.getValue(),
+  }),
+  columnHelper.accessor("accessType", {
+    header: "메뉴명",
+    cell: (info) => info.getValue(),
+  }),
+];

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

@@ -0,0 +1,56 @@
+export interface AccessLog {
+  no: number;
+  accessTime: string;
+  accessIp: string;
+  accessRegion: string;
+  urlPath: string;
+  browser: string;
+  site: string;
+  accessType: string;
+}
+
+export interface AccessLogParams {
+  page?: number;
+  size?: number;
+  urlPath?: string;
+  accessIp?: string;
+  accessRegion?: string;
+  browser?: string;
+  accessDateStart?: string;
+  accessDateEnd?: string;
+  siteId?: string;
+  sort?: string;
+}
+
+export interface AccessLogService {
+  getAccessLogList(params: AccessLogParams): Promise<PageableList<AccessLog>>;
+}
+
+export interface PageableList<T> {
+  content: T[];
+  pageable: {
+    pageNumber: number;
+    pageSize: number;
+    sort: {
+      empty: boolean;
+      sorted: boolean;
+      unsorted: boolean;
+    };
+    offset: number;
+    paged: boolean;
+    unpaged: boolean;
+  };
+  last: boolean;
+  totalPages: number;
+  totalElements: number;
+  size: number;
+  number: number;
+  sort: {
+    empty: boolean;
+    sorted: boolean;
+    unsorted: boolean;
+  };
+  first: boolean;
+  numberOfElements: number;
+  empty: boolean;
+}

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

@@ -0,0 +1,324 @@
+"use client";
+
+import dayjs from "dayjs";
+import { useState } from "react";
+import { keepPreviousData, useQuery } from "@tanstack/react-query";
+import { getCoreRowModel, type PaginationState } from "@tanstack/react-table";
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  BarElement,
+  ArcElement,
+  Filler,
+  Legend,
+  Tooltip,
+  type ChartData,
+} from "chart.js";
+import { Bar, Doughnut } from "react-chartjs-2";
+import {
+  Button,
+  Input,
+  Label,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@common/components";
+import { SiteSelect } from "@/entities/site";
+import { useDataTable } from "@/shared/lib";
+import { InputDateRangePicker } from "@/shared/ui/input-date-range-picker";
+import { UserStatisticsApi } from "../api";
+import { chartData } from "../model/chart-data";
+import { columns } from "../model/table-columns";
+import { type AccessLogParams } from "../model/user-statistics-interface";
+
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  BarElement,
+  ArcElement,
+  Filler,
+  Legend,
+  Tooltip,
+);
+
+type DateRange = {
+  from?: Date | undefined;
+  to?: Date | undefined;
+};
+
+function UserStatisticsPage() {
+  const defaultDateRange: DateRange = {
+    from: dayjs().subtract(7, "day").toDate(),
+    to: dayjs().toDate(),
+  };
+
+  const [pagination, setPagination] = useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: 10,
+  });
+  const [keywordType, setKeywordType] = useState("");
+  const [keyword, setKeyword] = useState("");
+  const [presetDateRange, setPresetDateRange] = useState("1W");
+  const [dateRange, setDateRange] = useState<DateRange>(defaultDateRange);
+  const [searchParams, setSearchParams] = useState<AccessLogParams>({
+    urlPath: "",
+    accessIp: "",
+    accessRegion: "",
+    browser: "",
+    accessDateStart: dayjs().subtract(7, "day").format("YYYY-MM-DD"),
+    accessDateEnd: dayjs().format("YYYY-MM-DD"),
+    sort: "accessTime,desc",
+  });
+
+  const query = useQuery({
+    queryKey: ["user-statistics", searchParams, pagination],
+    queryFn: () =>
+      UserStatisticsApi.getAccessLogList({
+        ...searchParams,
+        page: pagination.pageIndex,
+        size: pagination.pageSize,
+      }),
+    placeholderData: keepPreviousData,
+  });
+
+  const { tableComponent, tableInstance: table } = useDataTable({
+    query,
+    tableOptions: {
+      columns,
+      state: {
+        pagination,
+      },
+      manualPagination: true,
+      getCoreRowModel: getCoreRowModel(),
+      onPaginationChange: setPagination,
+    },
+    dataTableOptions: {
+      viewPagination: true,
+    },
+  });
+
+  const handlePresetDateRange = (value: string) => {
+    let presetDateRange: DateRange;
+    switch (value) {
+      case "1W":
+        presetDateRange = {
+          from: dayjs().subtract(7, "day").toDate(),
+          to: dayjs().toDate(),
+        };
+        break;
+      case "1M":
+        presetDateRange = {
+          from: dayjs().subtract(30, "day").toDate(),
+          to: dayjs().toDate(),
+        };
+        break;
+      case "3M":
+        presetDateRange = {
+          from: dayjs().subtract(90, "day").toDate(),
+          to: dayjs().toDate(),
+        };
+        break;
+      default:
+        presetDateRange = defaultDateRange;
+    }
+    setPresetDateRange(value);
+    setDateRange(presetDateRange);
+  };
+
+  const handleDateRangeChange = (dateRange: DateRange) => {
+    setDateRange(dateRange);
+    setPresetDateRange("");
+  };
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    setPagination({
+      ...pagination,
+      pageIndex: 0,
+    });
+
+    // 검색 조건에 따라 검색 파라미터 설정
+    const params: AccessLogParams = {
+      sort: "accessTime,desc",
+      accessDateStart: dateRange.from
+        ? dayjs(dateRange.from).format("YYYY-MM-DD")
+        : "",
+      accessDateEnd: dateRange.to
+        ? dayjs(dateRange.to).format("YYYY-MM-DD")
+        : "",
+    };
+
+    // 검색어 타입에 따라 파라미터 설정
+    switch (keywordType) {
+      case "urlPath":
+        params.urlPath = keyword;
+        break;
+      case "ip":
+        params.accessIp = keyword;
+        break;
+      case "region":
+        params.accessRegion = keyword;
+        break;
+      case "browser":
+        params.browser = keyword;
+        break;
+    }
+
+    setSearchParams(params);
+  };
+
+  const handleReset = () => {
+    setKeywordType("");
+    setKeyword("");
+    setDateRange(defaultDateRange);
+    setPresetDateRange("1W");
+    setSearchParams({
+      urlPath: "",
+      accessIp: "",
+      accessRegion: "",
+      browser: "",
+      accessDateStart: dayjs().subtract(7, "day").format("YYYY-MM-DD"),
+      accessDateEnd: dayjs().format("YYYY-MM-DD"),
+      sort: "accessTime,desc",
+    });
+  };
+
+  return (
+    <div className="card card-border !mt-6">
+      <div className="card card-border">
+        <form onSubmit={handleSubmit} className="flex items-center gap-2 p-2">
+          <Label className="mr-2">날짜</Label>
+          <Select value={presetDateRange} onValueChange={handlePresetDateRange}>
+            <SelectTrigger className="w-[12rem]">
+              <SelectValue placeholder="기간 선택" className="w-[24rem]" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="1W">일주일</SelectItem>
+              <SelectItem value="1M">1개월</SelectItem>
+              <SelectItem value="3M">3개월</SelectItem>
+            </SelectContent>
+          </Select>
+          <InputDateRangePicker
+            dateRange={dateRange}
+            setDateRange={handleDateRangeChange}
+          />
+          <Label className="ml-4 mr-2 text-label">사이트</Label>
+          <SiteSelect enabledAllSite className="w-[16rem]" />
+          <Label className="ml-4 mr-2 text-label">검색</Label>
+          <Select
+            value={keywordType}
+            onValueChange={(value) => setKeywordType(value)}
+          >
+            <SelectTrigger className="h-[3.2rem] w-[10rem]">
+              <SelectValue placeholder="선택" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="urlPath">URL경로</SelectItem>
+              <SelectItem value="ip">접속IP</SelectItem>
+              <SelectItem value="region">접속지역</SelectItem>
+              <SelectItem value="browser">브라우저</SelectItem>
+            </SelectContent>
+          </Select>
+          <Input
+            value={keyword}
+            onChange={(e) => setKeyword(e.target.value)}
+            className="h-[3.2rem] w-[24rem] rounded-sm !text-[1.3rem]"
+          />
+          <Button className="h-[3.2rem]" type="submit">
+            조회
+          </Button>
+          <Button
+            type="button"
+            color="white"
+            className="h-[3.2rem]"
+            onClick={handleReset}
+          >
+            초기화
+          </Button>
+        </form>
+      </div>
+
+      {/* 차트 영역 */}
+      <div className="grid grid-cols-2">
+        {/* 일별 접속 현황 */}
+        <div className="card card-border">
+          <div className="card-header">
+            <h3 className="text-xl font-medium">일별 접속 현황</h3>
+          </div>
+          <div className="h-96 p-4">
+            <Bar
+              data={chartData.monthlyStatisticsData as ChartData<"bar">}
+              options={chartData.monthlyStatisticsOptions}
+            />
+          </div>
+        </div>
+
+        <div className="grid grid-cols-2">
+          {/* 사이트별 접속자 */}
+          <div className="card card-border">
+            <div className="card-header">
+              <h3 className="text-xl font-medium">사이트별 접속자</h3>
+            </div>
+            <div className="h-96 p-4">
+              <Bar
+                data={chartData.siteVisitorsData}
+                options={chartData.siteVisitorsOptions}
+              />
+            </div>
+          </div>
+
+          {/* 브라우저별 접속자 */}
+          <div className="card card-border">
+            <div className="card-header">
+              <h3 className="text-xl font-medium">브라우저별 접속자</h3>
+            </div>
+            <div className="h-96 p-4">
+              <Doughnut
+                data={chartData.browserStatisticsData}
+                options={chartData.browserStatisticsOptions}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* 접속 로그 상세 */}
+      <div className="card card-border">
+        <div className="card-header">
+          <div className="flex w-full items-center justify-between">
+            <h3 className="text-2xl font-medium text-label">접속 로그 상세</h3>
+            <div className="flex gap-2">
+              <Select
+                value={table.getState().pagination.pageSize.toString()}
+                onValueChange={(value) => {
+                  table.setPageSize(parseInt(value));
+                }}
+              >
+                <SelectTrigger className="h-[3.2rem] w-[12rem]">
+                  <SelectValue placeholder="페이지 크기" />
+                </SelectTrigger>
+                <SelectContent>
+                  {[10, 20, 30, 40, 50].map((pageSize) => (
+                    <SelectItem key={pageSize} value={pageSize.toString()}>
+                      {pageSize}개씩 보기
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+        </div>
+        <div className="card !m-[1.2rem] !p-0">{tableComponent}</div>
+      </div>
+    </div>
+  );
+}
+
+export { UserStatisticsPage };

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

@@ -9,7 +9,6 @@ import {
   Button,
   Checkbox,
   Input,
-  InputDatePicker,
   Label,
   Select,
   SelectContent,
@@ -25,6 +24,7 @@ import {
 } from "@/entities/user";
 import { ENDPOINT } from "@/shared/config";
 import { useDataTable } from "@/shared/lib";
+import { InputDateRangePicker } from "@/shared/ui/input-date-range-picker";
 import { columns } from "../model/table-columns";
 
 type DateRange = {
@@ -40,7 +40,7 @@ function UsersPage() {
     pageSize: 10,
   });
   const [presetDateRange, setPresetDateRange] = useState("");
-  const [dateRange, setDateRange] = useState<DateRange | undefined>({
+  const [dateRange, setDateRange] = useState<DateRange>({
     from: undefined,
     to: undefined,
   });
@@ -62,7 +62,7 @@ function UsersPage() {
   });
 
   const { data: userSttsStats } = useQuery({
-    queryKey: [ENDPOINT.USER_SERVICE.USERS],
+    queryKey: [ENDPOINT.USER_SERVICE.USERS, "userStatusStatistics"],
     queryFn: () => UserApi.selectUserSttsStats(),
   });
 
@@ -145,7 +145,7 @@ function UsersPage() {
   };
 
   const handlePresetDateRange = (value: string) => {
-    let presetDateRange: DateRange | undefined;
+    let presetDateRange: DateRange;
     switch (value) {
       case "1M":
         presetDateRange = {
@@ -166,15 +166,24 @@ function UsersPage() {
         };
         break;
       default:
-        presetDateRange = undefined;
+        presetDateRange = {
+          from: undefined,
+          to: undefined,
+        };
     }
     setPresetDateRange(value);
     setDateRange(presetDateRange);
   };
 
-  const getUserSttsStatsCnt = (code: string): number => {
-    if (!Array.isArray(userSttsStats)) return 0;
-    return userSttsStats.find((item) => item.sttsCd === code)?.cnt ?? 0;
+  const handleDateRangeChange = (dateRange: DateRange) => {
+    setDateRange(dateRange);
+    setPresetDateRange("");
+  };
+
+  const getUserSttsStatsCnt = (code: string): string => {
+    if (!Array.isArray(userSttsStats)) return "0";
+    const count = userSttsStats.find((item) => item.sttsCd === code)?.cnt ?? 0;
+    return count.toLocaleString();
   };
 
   const handleUserStateCodeChange = (code: string, checked: boolean) => {
@@ -292,20 +301,9 @@ function UsersPage() {
                   <SelectItem value="6M">6개월</SelectItem>
                 </SelectContent>
               </Select>
-              <InputDatePicker
-                value={dateRange?.from}
-                onChange={(date) => {
-                  setDateRange({ ...dateRange, from: date });
-                  setPresetDateRange("");
-                }}
-              />
-              ~
-              <InputDatePicker
-                value={dateRange?.to}
-                onChange={(date) => {
-                  setDateRange({ ...dateRange, to: date });
-                  setPresetDateRange("");
-                }}
+              <InputDateRangePicker
+                dateRange={dateRange}
+                setDateRange={handleDateRangeChange}
               />
             </div>
           </div>

apps/cs/src/shared/ui/input-date-range-picker.tsx

@@ -0,0 +1,47 @@
+import { InputDatePicker } from "@common/components";
+import { useEffect } from "react";
+import { useAlertStore } from "../lib";
+
+type DateRange = {
+  from?: Date;
+  to?: Date;
+};
+
+type InputDateRangePickerProps = {
+  dateRange: DateRange;
+  setDateRange: (dateRange: DateRange) => void;
+};
+
+function InputDateRangePicker({
+  dateRange,
+  setDateRange,
+}: InputDateRangePickerProps) {
+  const alert = useAlertStore((state) => state.setMessage);
+
+  useEffect(() => {
+    if (dateRange.from && dateRange.to && dateRange.from > dateRange.to) {
+      alert("시작일보다 종료일이 커야 합니다.");
+      setDateRange({ ...dateRange, to: dateRange.from });
+    }
+  }, [dateRange]);
+
+  return (
+    <>
+      <InputDatePicker
+        value={dateRange.from}
+        onChange={(date) => {
+          setDateRange({ ...dateRange, from: date });
+        }}
+      />
+      ~
+      <InputDatePicker
+        value={dateRange.to}
+        onChange={(date) => {
+          setDateRange({ ...dateRange, to: date });
+        }}
+      />
+    </>
+  );
+}
+
+export { InputDateRangePicker };

apps/dm/.env.development

@@ -1,7 +1,8 @@
 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_DM_SERVER_API_URL = http://con.mind-one.co.kr:11080/api/v1
+NEXT_PUBLIC_SERVER_API_URL = http://dev.onasys.co.kr:8000
 NEXT_PUBLIC_FO_SERVER_API_URL = http://con.mind-one.co.kr: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
@@ -9,9 +10,7 @@ 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_REUSE_API_URL=http://con.mind-one.co.kr:11080/api/v1
 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

@@ -6,10 +6,14 @@ 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_DM_SERVER_API_URL = http://con.mind-one.co.kr:11080/api/v1
+NEXT_PUBLIC_SERVER_API_URL = http://dev.onasys.co.kr:8000
 NEXT_PUBLIC_FO_SERVER_API_URL = http://con.mind-one.co.kr: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_REUSE_API_URL=http://con.mind-one.co.kr:11080/api/v1
 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

@@ -11,7 +11,7 @@ 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_REUSE_API_URL=http://con.mind-one.co.kr:11080/api/v1
 NEXT_PUBLIC_SEWERAGE_API_URL = http://apigateway.iipbs-dev.svc.cluster.local:8000/sewerage-service/api
 
 

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

@@ -9,6 +9,7 @@ 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",
@@ -22,6 +23,9 @@ type SdmApplyProps = {
 }
 
 export default function SdmApplyList({}: SdmApplyProps) {
+
+  const router = useRouter();
+  
   const {getSdmInfoStatusList, Sdm, Common} = useDmStore((state) => state);
   const {successLogin, sdmInfoStatusList, upHeadSdmInfoStatus} = Sdm;
   const {selectSidoData, selectSigunData} = Common;
@@ -185,7 +189,12 @@ export default function SdmApplyList({}: SdmApplyProps) {
           body={<SdmLogin/>}
           bodyClass="sm:max-w-[90vw] w-[530px] h-[430px]"
           open={!isLogin}
-          onOpenChange={(open) => !open && setIsLogin(false)}
+          onOpenChange={(open) => {
+            if(!open){
+              setIsLogin(false)
+              router.push('/');
+            }
+          }}
           noHeaderYn="Y"
           noFooterYn="Y"
         />

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

@@ -6,7 +6,7 @@ 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 { useSearchParams } from "next/navigation";
+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";
@@ -24,61 +24,64 @@ const sdmInfoFormSchema = z.object({
   money: z.string()
     .regex(/^[0-9]+$/, "희망단가는 숫자만 입력 가능합니다"),
   /**요구수질 */
-  reqWaterQlty : z.string().optional(),
+  reqWaterQlty: z.string().optional(),
   grssClfg: z.string()
     .min(1, "총대장균군수를 입력해주세요")
     .regex(/^[0-9]+$/, "총대장균군수는 숫자만 입력 가능합니다"),
-  tn : z.string()
+  tn: z.string()
     .min(1, "총질소를 입력해주세요")
     .regex(/^[0-9]+$/, "총질소는 숫자만 입력 가능합니다"),
-  combResdch : z.string()
+  combResdch: z.string()
     .min(1, "결합잔류염소를  입력해주세요")
     .regex(/^[0-9]+$/, "결합잔류염소는 숫자만 입력 가능합니다"),
-  tph : z.string()
+  tph: z.string()
     .min(1, "총인산물을 입력해주세요")
     .regex(/^[0-9]+$/, "총인산물은 숫자만 입력 가능합니다"),
-  trbt : z.string()
+  trbt: z.string()
     .min(1, "탁도를 입력해주세요")
     .regex(/^[0-9]+$/, "탁도는 숫자만 입력 가능합니다"),
-  ph : z.string()
+  ph: z.string()
     .min(1, "수소이온농도를 입력해주세요")
     .regex(/^[0-9]+$/, "수소이온농도는 숫자만 입력 가능합니다"),
-  bod : z.string()
+  bod: z.string()
     .min(1, "생물학적 산소요구량을 입력해주세요")
     .regex(/^[0-9]+$/, "생물학적 산소요구량은 숫자만 입력 가능합니다"),
   /**컬럼확인필요 */
-  clIonQnt : z.string()
+  clIonQnt: z.string()
     .min(1, "염화물을 입력해주세요")
     .regex(/^[0-9]+$/, "염화물은 숫자만 입력 가능합니다"),
-  smll : z.string()
+  smll: z.string()
     .min(1, "냄새를 입력해주세요")
     .regex(/^[0-9]+$/, "냄새는 숫자만 입력 가능합니다"),
-  cdtnv : z.string()
+  cdtnv: z.string()
     .min(1, "전기전도도를 입력해주세요")
     .regex(/^[0-9]+$/, "전기전도도는 숫자만 입력 가능합니다"),
-  crmty : z.string()
+  crmty: z.string()
     .min(1, "색도를 입력해주세요")
     .regex(/^[0-9]+$/, "색도는 숫자만 입력 가능합니다"),
-  rmrk : z.string().optional(),
+  rmrk: z.string().optional(),
   /* telno: z.string()
     .min(8, "전화번호는 8자 이상 입력해주세요")
     .max(12, "전화번호는 12자 이내로 입력해주세요")
     .regex(/^[0-9-]+$/, "전화번호는 숫자와 하이픈(-)만 입력 가능합니다"), */
-  candidateTitle: z.string().optional(),
+  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 {insertSdmInfoData, Sdm} = useDmStore((state) => state);
-  const {successLogin} = Sdm;
+  const {insertSdmInfoData, Sdm ,setSubsInfo} = 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>({
+ const [defaultValues, setDefaultValues] = useState<FormData>({
     sdmNm: '',
     demandYmd: new Date(),
     demandQnty: '',
@@ -100,9 +103,15 @@ function SdmInfoInsertContent() {
     crmty: '',
     rmrk: '',
     /** 후보지 제목 */
-    candidateTitle: '',
+    candidateTitle: [
+      { ruseUtztnFcltNm: '', ruseUtztnFcltCd: '' },
+      { ruseUtztnFcltNm: '', ruseUtztnFcltCd: '' },
+      { ruseUtztnFcltNm: '', ruseUtztnFcltCd: '' },
+    ],
   });
 
+ 
+
   useEffect(() => {
     const user = sessionStorage.getItem('user');
     setDefaultValues(prev => ({
@@ -115,10 +124,12 @@ function SdmInfoInsertContent() {
 
   useEffect(() => {
     const local = localStorage.getItem('user');
-    if(local) {
+    if (local) {
       setIsLogin(true);
     }
-  }, []);
+    setSubsInfo([]); // subsInfo 초기화 후보지 처음 화면 들어올때 초기화(스토어내 객체만)
+
+  }, [setSubsInfo]);
 
   const form = useForm<FormData>({
     resolver: zodResolver(formSchema),
@@ -126,6 +137,28 @@ function SdmInfoInsertContent() {
     mode: "onChange",
   });
 
+  const subsInfo = useDmStore((state) => state.map.subsInfo);
+
+  useEffect(()=>{
+    //map.subsInfo 스토어 객체 값이 변경되면 해당 값이 폼에 자동으로 들어가도록 수정 대신 값이 있어야함
+    if(subsInfo.length>0){
+      form.setValue('candidateTitle', subsInfo)
+    }
+
+},[subsInfo, form])
+
+//후보지 팝업 값 셋팅
+useEffect(() => {
+  const handleMessage = (event: MessageEvent) => {
+    if (event.data?.type === 'SET_SUBS_INFO') {
+      setSubsInfo(event.data.payload); // zustand로 값 설정
+    }
+  };
+
+  window.addEventListener('message', handleMessage);
+  return () => window.removeEventListener('message', handleMessage);
+}, [setSubsInfo]);
+
   // 로그인 성공 시 모달 닫기 및 폼 업데이트
   useEffect(() => {
     if (successLogin) {
@@ -138,6 +171,7 @@ function SdmInfoInsertContent() {
             setFacilityName(userData.dmdCoNm);
             form.setValue('sdmNm', userData.dmdCoNm);
           }
+
         } catch (error) {
           console.error('Error parsing user data:', error);
         }
@@ -152,11 +186,11 @@ function SdmInfoInsertContent() {
       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 = {
+      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,
@@ -186,17 +220,22 @@ function SdmInfoInsertContent() {
         index: 0,
         reqDt: "",
         dmdInfoSn: 0,
-        status : '',
+        status: '',
+        splyCndtList: data.candidateTitle || [],
       };
-      
+
+
+
+
+
       await insertSdmInfoData(apiData);
     } catch (error) {
       console.error('Error submitting form:', error);
     }
   };
-  
+
   return (
-    <div className="min-h-screen bg-gray-50">
+    <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">
@@ -207,14 +246,14 @@ function SdmInfoInsertContent() {
         <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 
+              <SdmInfoRegForm
                 form={form}
                 onCheckboxChange={setIsmoneyDisabled}
                 facilityName={facilityName}
               />
               <div className="flex justify-center pt-4">
-                <Button 
-                  type="submit" 
+                <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"
                 >
                   수요정보 등록
@@ -225,16 +264,20 @@ function SdmInfoInsertContent() {
         </div>
       </div>
 
-      {!isLogin?
-      <UiModal
-          body={<SdmLogin/>}
+      {!isLogin ?
+        <UiModal
+          body={<SdmLogin />}
           bodyClass="sm:max-w-[90vw] w-[530px] h-[430px]"
           open={!isLogin}
-          onOpenChange={(open) => !open && setIsLogin(false)}
+          onOpenChange={(open) => {
+            if (!open) {
+              router.push("/");
+            }
+          }}
           noHeaderYn="Y"
           noFooterYn="Y"
         />
-      :null}
+        : null}
       <Toaster position="top-center" />
     </div>
   );

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

@@ -8,7 +8,7 @@ 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 { Common, initializeCommonData, getDemandCompList, insertSdmData, Sdm } = useDmStore((state) => state);
   const { selectSidoData, selectSigunData } = Common;
   const { demandCompList, successNextPage } = Sdm;
   const router = useRouter();
@@ -33,10 +33,10 @@ export default function MyForm() {
       router.push(`/pages/sdmMng/sdmInfoInsert?${queryParams.toString()}`);
     }
   }, [successNextPage, router]);
-  
+
   const callback = useCallback((searchText: string, pageCnt: number) => {
     searchText = searchText.trim();
-    if(searchText.length > 0) {
+    if (searchText.length > 0) {
       getDemandCompList(searchText, pageCnt);
     }
   }, [getDemandCompList]);
@@ -47,6 +47,7 @@ export default function MyForm() {
       dmdInfoSn: '',
       dmdInfoFk: '',
       status: '',
+      splyCndtList: []
     };
     formDataRef.current = convertedData;
     insertSdmData(convertedData).catch(error => {
@@ -55,15 +56,17 @@ export default function MyForm() {
   }, [insertSdmData]);
 
   return (
-    <div className="min-h-screen bg-gray-50">
-      <SdmInsertForm 
-        selectSidoData={selectSidoData} 
-        selectSigunData={selectSigunData} 
-        dataList={demandCompList} 
-        rtnValue={callback}
-        rtnInputData={handleInsertSdmData}
-      />
-      <Toaster position="top-center" />
+    <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/wrAbout/page.tsx

@@ -53,14 +53,16 @@ export default function WrAboutPage() {
     }, observerOptions);
 
     // 각 카드 요소를 관찰
-    cardRefs.current.forEach((card) => {
+    const cardsSnapshot = [...cardRefs.current];
+
+    cardsSnapshot.forEach((card) => {
       if (card) {
         observer.observe(card);
       }
     });
-
+  
     return () => {
-      cardRefs.current.forEach((card) => {
+      cardsSnapshot.forEach((card) => {
         if (card) {
           observer.unobserve(card);
         }

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

@@ -12,10 +12,10 @@ interface RegionData {
 
 interface TableData {
   region: string;
-  sewage: number;
-  rainwater: number;
-  reclaimed: number;
-  thermal: number;
+  sewage: string;
+  rainwater: string;
+  reclaimed: string;
+  thermal: string;
 }
 
 
@@ -161,7 +161,7 @@ const WrStatusPage: React.FC = () => {
     chartTitle : '',
     chartClassName : "h-[300px] w-full",
     graphSize : 40,
-    yFieldText : '개소수(건)',
+    yFieldText : '시설(개소)',
     showLegend : true
   }
 
@@ -193,24 +193,24 @@ const WrStatusPage: React.FC = () => {
   };
 
   const tableData: TableData[] = [
-    { region: '서울특별시', sewage: 4, rainwater: 816, reclaimed: 371, thermal: 0 },
-    { region: '부산광역시', sewage: 13, rainwater: 68, reclaimed: 20, thermal: 1 },
-    { region: '대구광역시', sewage: 9, rainwater: 294, reclaimed: 14, thermal: 2 },
-    { region: '인천광역시', sewage: 17, rainwater: 165, reclaimed: 35, thermal: 15 },
-    { region: '광주광역시', sewage: 3, rainwater: 74, reclaimed: 15, thermal: 15 },
-    { region: '대전광역시', sewage: 2, rainwater: 52, reclaimed: 11, thermal: 20 },
-    { region: '울산광역시', sewage: 8, rainwater: 111, reclaimed: 19, thermal: 30 },
-    { region: '세종특별자치시', sewage: 9, rainwater: 65, reclaimed: 0, thermal: 0 },
-    { region: '경기도', sewage: 176, rainwater: 1009, reclaimed: 252, thermal: 40 },
-    { region: '강원특별자치도', sewage: 69, rainwater: 69, reclaimed: 22, thermal: 0 },
-    { region: '충청북도', sewage: 38, rainwater: 17, reclaimed: 91, thermal: 0 },
-    { region: '충청남도', sewage: 67, rainwater: 54, reclaimed: 188, thermal: 0 },
-    { region: '전라북도', sewage: 55, rainwater: 33, reclaimed: 220, thermal: 0 },
-    { region: '전라남도', sewage: 83, rainwater: 16, reclaimed: 75, thermal: 0 },
-    { region: '경상북도', sewage: 81, rainwater: 37, reclaimed: 70, thermal: 0 },
-    { region: '경상남도', sewage: 75, rainwater: 27, reclaimed: 140, thermal: 0 },
-    { region: '제주특별자치도', sewage: 8, rainwater: 47, reclaimed: 64, thermal: 0 },
-    
+    { region: '전국', sewage: '717(1,137,538)', rainwater: '3544(13,945)', reclaimed: '1018(222,476)', thermal: '123(492)' },
+    { 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(18)' },
+    { region: '대구광역시', sewage: '9(102,380)', rainwater: '294(133)', reclaimed: '14(44)', thermal: '2(12)' },
+    { region: '인천광역시', sewage: '17(57,691)', rainwater: '165(642)', reclaimed: '35(7,859)', thermal: '15(32)' },
+    { region: '광주광역시', sewage: '3(28,738)', rainwater: '74(23)', reclaimed: '15(450)', thermal: '15(6)' },
+    { region: '대전광역시', sewage: '2(11,966)', rainwater: '52(2)', reclaimed: '11(492)', thermal: '20(100)' },
+    { region: '울산광역시', sewage: '8(36,076)', rainwater: '111(39)', reclaimed: '19(28,904)', thermal: '30(130)' },
+    { 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(143)' },
+    { 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[] = [
@@ -410,8 +410,8 @@ const WrStatusPage: React.FC = () => {
           <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>
+              <h3 className="text-[12px] font-semibold">재이용시설현황(2023)</h3>
+              <p className="text-[12px] text-[#999] font-medium">행정구역별 재이용시설현황(개소)</p>
             </div>
             
             {/* 본문 콘텐츠 */}
@@ -455,19 +455,19 @@ const WrStatusPage: React.FC = () => {
                 <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>
+                    <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>
+                    <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>
+                    <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>
+                    <span className="text-[12px] text-gray-900">온배수시설 (총 201개소)</span>
                   </div>
                 </div>
               </div>
@@ -482,7 +482,7 @@ const WrStatusPage: React.FC = () => {
               <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>
+                  <p className="text-[12px] text-[#999] font-medium">행정구역별 재이용시설현황(개소)</p>
                 </div>
               </div>
               <div className="p-4">
@@ -493,10 +493,10 @@ const WrStatusPage: React.FC = () => {
                       <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">하수</th>
-                        <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">온배수</th>
+                        <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">중수도(이용량,천𝓂³/년)</th>
+                        <th className="text-[12px] font-semibold px-4 py-2">온배수(이용량,천𝓂³/년)</th>
                       </tr>
                     </thead>
                     <tbody className="divide-y">

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,270 @@
+"use client";
+
+import Gis from "@common/business_components/ui/map/Gis";
+import { useEffect, useRef, useState } 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 SelectedFcltList from "./selectedFcltList";
+import type { SubsInfo } from "@/app/store/map/type";
+
+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 [selectDataPk, setSelectDataPk] = useState<Record<string, any>>({});
+  const [selectedFclts, setSelectedFclts] = useState<any[]>([]);
+
+  //적용 버튼 클릭 이벤트
+  const onApply = () => {
+    if (selectedFclts.length > 3) {
+      alert("재이용시설 후보지는 최대 3개까지만 선택할 수 있습니다.");
+      return;
+    }
+
+    const subsInfoList: SubsInfo[] = selectedFclts.map((fclt) => ({
+      ruseUtztnFcltNm: fclt.ruseUtztnFcltNm,
+      ruseUtztnFcltCd: fclt.pbnstRuseFcltId,
+    }));
+
+    window.opener.postMessage(
+      {
+        type: "SET_SUBS_INFO",
+        payload: subsInfoList, // 또는 필요한 데이터
+      },
+      "*"
+    );
+
+    window.close();
+  };
+
+  //트리 레이어 데이터 조회
+  const fetchData = async () => {
+    try {
+      const response = await mapService.getLyrStngs();
+      setTreeData(response); // API 응답 저장
+    } catch (error) {
+      console.error("데이터 불러오기 실패:", error);
+    }
+  };
+
+  //하수처리시설코드로 재이용시설 목록 조회
+  const reuseData = async (ruseFcltPk: any) => {
+    try {
+      const response = await mapService.getPbnstRuseFclts(ruseFcltPk);
+      const data = response.data || [];
+      setSelectedFclts((prev) => {
+        const newItems = data.filter(
+          (item: any) =>
+            item &&
+            Object.keys(item).length > 0 &&
+            !prev.some((f) => f.pbnstRuseFcltId === item.pbnstRuseFcltId)
+        );
+        console.log(newItems)
+        return [...prev, ...newItems];
+      });
+
+    } catch (error) {
+      console.error("데이터 불러오기 실패:", error);
+    }
+  };
+
+  // 컴포넌트 마운트 시 1회 실행
+  useEffect(() => {
+    fetchData();
+  }, []);
+
+  // 레이어 생성 후 초기화 처리
+  const onCheckedLayersChange = () => {
+    //수요처 ID
+    const urlParams = new URLSearchParams(window.location.search);
+    const dmdInfoId = urlParams.get("dmdInfoId");
+
+    //수요처 위치로 화면 이동
+    const maps = gisMaps.current;
+    const layer = GisApp.Module.layer as any;
+    const layerNm = "tb_wr_ruse_fclt_dmd_co";
+    const featureId = `${layerNm}.${dmdInfoId}`;
+    let foundFeature: any = null;
+
+    maps
+      .getLayers()
+      .getArray()
+      .forEach((layer: any) => {
+        if (layer.get("lyrTyNm") == layerNm) {
+          const source = layer.getSource?.();
+          if (source?.getFeatureById) {
+            const feature = source.getFeatureById(String(featureId).trim());
+            if (feature) {
+              foundFeature = feature;
+              return;
+            }
+          }
+        }
+      });
+
+    if (foundFeature) {
+      const geometry = foundFeature.getGeometry();
+
+      if (geometry) {
+        const extent = geometry.getExtent();
+
+        if (geometry.getType() === "Point") {
+          maps.getView().setCenter(geometry.getCoordinates());
+          maps.getView().setZoom(11);
+        } else {
+          maps.getView().fit(extent, {
+            duration: 300,
+            padding: [30, 30, 30, 30],
+            maxZoom: 16,
+          });
+        }
+      }
+
+      layer.highLightFeature(
+        [foundFeature],
+        {
+          id: GisApp.hlLayerId,
+          zIndex: 10,
+          opacity: 1,
+          selectable: true,
+        },
+        { width: 30 }
+      );
+    }
+
+    const formatNumber = (val: any) => {
+      const num = Number(val);
+      return isNaN(num) ? "-" : num.toLocaleString();
+    };
+
+    // 재이용시설 오버레이
+    maps
+      .getLayers()
+      .getArray()
+      .forEach((layer: any) => {
+        if (layer.get("lyrTyNm") === "tb_wr_bdst_ruse_fclt") {
+          const source = layer.getSource?.();
+          if (source?.getFeatures) {
+            const features = source.getFeatures();
+
+            features.forEach((feature: any) => {
+              // 필요한 고유 ID 또는 속성 가져오기 (예: ftrIdn 또는 feature.getId())
+              const featureId =
+                feature.getId() || feature.get("ftrIdn") || Math.random();
+
+              // HTML 또는 React 오버레이 컴포넌트 구성
+              const overlayContent = `
+              <div class="rounded-md border border-gray-300 bg-white shadow-md text-sm w-[120px]">
+                <!-- 헤더 -->
+                <div class="bg-cyan-700 text-white px-3 py-2 text-[11px] font-semibold text-center rounded-t-md">
+                  ${feature.get("swtrmt_fclt_nm") || "-"} 
+                </div>
+            
+                <!-- 테이블 -->
+                <table class="w-full text-sm text-gray-800 border-t border-gray-200">
+                  <tbody>
+                    <tr class="border-b border-gray-200">
+                      <th class="bg-gray-100 text-gray-600 font-semibold text-[10px] text-left">용량(m³/일)</th>
+                      <td class="text-right text-[10px] font-bold">${formatNumber(feature.get("fclt_cpct"))}</td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            `;
+              feature.set("html", overlayContent);
+              feature.set("overLayId", `overLay.${featureId}`);
+            });
+          }
+        }
+      });
+  };
+
+  // 검색해서 재이용시설 선택하면 해당 시설로 화면 이동 처리
+  useEffect(() => {
+    if (!selectDataPk || Object.keys(selectDataPk).length === 0) return;
+    const maps = gisMaps.current;
+    let foundFeature: any = null;
+    const layerNm = "tb_wr_bdst_ruse_fclt";
+    const featureId = `${layerNm}.${selectDataPk.bscFctCd}`;
+    maps
+      .getLayers()
+      .getArray()
+      .forEach((layer: any) => {
+        if (layer.get("lyrTyNm") == layerNm) {
+          const source = layer.getSource?.();
+          if (source?.getFeatureById) {
+            const feature = source.getFeatureById(String(featureId).trim());
+            if (feature) {
+              foundFeature = feature;
+              return;
+            }
+          }
+        }
+      });
+
+    if (foundFeature) {
+      const geometry = foundFeature.getGeometry();
+      if (geometry) {
+        const extent = geometry.getExtent();
+
+        maps.getView().fit(extent, {
+          duration: 300,
+          padding: [50, 50, 50, 50],
+          maxZoom: 16,
+          constrainResolution: true,
+          nearest: true,
+        });
+      }
+    } else {
+      console.warn("OpenLayers Feature를 찾을 수 없습니다:", selectDataPk);
+    }
+  }, [selectDataPk]);
+
+  // 재이용시설 클릭 시 선택 시설목록에 추가
+  const onFeatureSelect = (data: any) => {
+    // 처리시설코드
+    const swtrmtFcltCd = data.get("swtrmt_fclt_cd");
+    reuseData(swtrmtFcltCd);
+  };
+
+  return (
+    <>
+      <SearchBar
+        setHasuPk={(hasuPk: any) => {
+          if (hasuPk) {
+            setSelectDataPk(hasuPk);
+          }
+        }}
+        onApply={onApply}
+      />
+      <div className="bg-container">
+        <Gis
+          treeData={treeData}
+          isSearch={false}
+          gisMaps={gisMaps}
+          isMiniMap={false}
+          searchView={undefined}
+          detailView={undefined}
+          onFeatureSelect={onFeatureSelect}
+          setIsOpen={setIsOpen}
+          setFeatureData={setFeatureData}
+          featureData={featureData}
+          setIsSearchModalOpen={setIsSearchModalOpen}
+          isOpen={isOpen}
+          isSearchModalOpen={isSearchModalOpen}
+          onCheckedLayersChange={onCheckedLayersChange}
+          imgVisble={false}
+        />
+      </div>
+      <SelectedFcltList
+        data={selectedFclts}
+        onRemove={(updatedList) => setSelectedFclts(updatedList)}
+      />
+    </>
+  );
+};
+
+export default Map;

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

@@ -0,0 +1,81 @@
+import React from "react";
+
+type FcltItem = {
+  pbnstRuseFcltId: string;
+  ruseUtztnFcltNm: string;
+  splyExtraCpct?: number;
+  ruseCpct?: number;
+  [key: string]: any;
+};
+
+export default function SelectedFcltList({
+  data = [],
+  onRemove,
+}: {
+  data: FcltItem[];
+  onRemove: (updatedList: FcltItem[]) => void;
+}) {
+  const handleDelete = (code: string) => {
+    const updatedList = data.filter((item) => item.pbnstRuseFcltId !== code);
+    onRemove(updatedList);
+  };
+
+  const TableContent = (
+    <>
+      <thead className="bg-gray-100 text-gray-700 text-[13px]">
+        <tr>
+          <th className="px-3 py-2 text-left border-b">시설명</th>
+          <th className="px-3 py-2 text-right border-b">
+            하수처리량
+            <br />
+            (㎥/일)
+          </th>
+          <th className="px-3 py-2 text-right border-b">
+            재이용량
+            <br />
+            (㎥/일)
+          </th>
+          <th className="px-3 py-2 border-b">삭제</th>
+        </tr>
+      </thead>
+      <tbody>
+        {data.map((item) => (
+          <tr key={item.pbnstRuseFcltId} className="border-b last:border-none">
+            <td className="px-3 py-2 text-[12px]">{item.ruseUtztnFcltNm}</td>
+            <td className="px-3 py-2 text-right text-[12px]">
+              {Number(item.splyExtraCpct || 0).toLocaleString()}
+            </td>
+            <td className="px-3 py-2 text-right text-[12px]">
+              {Number(item.ruseCpct || 0).toLocaleString()}
+            </td>
+            <td className="px-3 py-2 text-center">
+              <button
+                onClick={() => handleDelete(item.pbnstRuseFcltId)}
+                className="text-red-500 hover:text-red-700 text-sm font-bold"
+                aria-label="삭제"
+                title="삭제"
+              >
+                ✕
+              </button>
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </>
+  );
+
+  if (data.length === 0) return null;
+
+  return (
+    <div className="fixed right-40 top-[8rem] w-[40rem] max-h-[130rem] overflow-auto bg-white shadow-lg rounded p-4 border border-gray-300 z-50">
+      <h3 className="bg-cyan-700 text-white text-xl font-bold mb-2 p-2">
+        선택된 시설
+      </h3>
+      <div className="overflow-x-auto">
+        <table className="w-full text-sm text-gray-800 border border-gray-200">
+          {TableContent}
+        </table>
+      </div>
+    </div>
+  );
+}

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

@@ -3,6 +3,7 @@
  * 관망도 API
  */
  const API_URL = `${process.env.NEXT_PUBLIC_SEWERAGE_API_URL}/v1/map`
+ const REUSE_API_URL = `${process.env.NEXT_PUBLIC_REUSE_API_URL}`
 
 export type LyrStngProps = {
   lyr_sn: string
@@ -30,7 +31,21 @@ export type LyrStngProps = {
 export const mapService = {
   //레이어 설정 조회
   getLyrStngs: async () => {
-    const response = await fetch(`${API_URL}/lyrStngs/WR_NETWORK`, {
+    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();
+  },
+  getPbnstRuseFclts: async (ruseFcltPk:any) => {
+    const response = await fetch(`${REUSE_API_URL}/reuseFc/pubFc/${ruseFcltPk}`, {
       method: 'GET',
       headers: {
         'Accept': 'application/json',

apps/dm/app/base.tsx

@@ -3,7 +3,7 @@
 import { BaseLayout } from "@common/components";
 import type { MenuItem } from "./store/common";
 import { useDmStore } from "./store";
-import { useRouter } from "next/navigation";
+import { usePathname, useRouter } from "next/navigation";
 
 export default function Base({
   children,
@@ -13,10 +13,16 @@ export default function Base({
   const { getMenuAuth } = useDmStore((state) => state);
 
   const router = useRouter();
-  const handleClick = (id:MenuItem) =>{
+  const pathname = usePathname();
+
+  const handleClick = (id: MenuItem) => {
     getMenuAuth(id.menuCd);
     router.push(id.urlPath);
-  }
+  };
 
-  return <BaseLayout handleMenuClick={handleClick}>{children}</BaseLayout>;
+  return (
+    <BaseLayout currentPath={pathname ?? ""} handleMenuClick={handleClick}>
+      {children}
+    </BaseLayout>
+  );
 }

apps/dm/app/layout.tsx

@@ -1,7 +1,5 @@
 "use client"
-import Base from "./base";
 import "./globals.css";
-import { StoreProvider } from "./store";
 
 export default function RootLayout({
   children,
@@ -9,12 +7,11 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en">
+    <html lang="ko">
       <body>
-        <StoreProvider>
-          <Base>{children}</Base>
-        </StoreProvider>
+          {children}
       </body>
     </html>
   );
-}
+}
+

apps/dm/app/middleware.ts

@@ -0,0 +1,129 @@
+import { NextRequest, NextResponse } from "next/server";
+
+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_DM_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

@@ -30,9 +30,6 @@ export default function Home() {
         <Button className='ml-5 place-self-auto'> 
           <Link href="/pages/sdmMng/sdmApplyList">수요처 신청 현황(개발중)</Link>
         </Button>
-        <Button className='ml-5 place-self-auto'> 
-          <Link href="/pages/map/mainMap">수요처 신청 현황(개발중)</Link>
-        </Button>
       </div>
     </>  
   );

apps/dm/app/pages/map/mainMap/page.tsx

@@ -1,28 +0,0 @@
-"use client";
-
-import { SearchBar } from "@/components/ui/map/searchBar/searchBar";
-import { useEffect, useState } from "react";
-
-const Map = () => {
-
-   const [selectDataPk, setSelectDataPk]  = useState <string>('')
-
-   // 삭제요망 데이터 선ㅌ
-   useEffect(() =>{
-    console.log("Selected Data Pk: ", selectDataPk);
-   },[selectDataPk])
-  return (
-    <>
-      <SearchBar
-        setHasuPk={(hasuPk: string) => {
-          console.log("Selected HasuPk: ", hasuPk);
-          if(hasuPk !==""){
-            setSelectDataPk(hasuPk);
-          }
-        }}
-      />
-    </>
-  );
-};
-
-export default Map;

apps/dm/app/pages/map/popup/windowPotal.tsx

@@ -1,94 +0,0 @@
-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();
-    }
-  }, [handleUnload, onClose, title]);
-
-  // `createPortal`을 사용해 children을 새 창의 container div에 렌더링합니다.
-  return container ? createPortal(children, container) : null;
-};
-
-export default NewWindowPortal;

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

@@ -1,6 +1,6 @@
 import { getFetch } from "@/components/ui/api";
 import { DEV_URL_FO } from "@/components/ui/config";
-import type { FacilityInfo } from "./type";
+import type { FacilityInfo, SubsInfo } from "./type";
 
 const checkWrRegList = async () => {
   const wrRegList = await getFetch("wr", `/reuseFc/pubFc`);
@@ -14,9 +14,8 @@ const getRuseFclt = async (
 ) => {
   const checkWrRegListRes = await checkWrRegList();
 
-  let url = `/prcsFclt/ruseInfo/${page ? page : 1}/11/A/${sggOrCity ? sggOrCity : "11"}/0/1/SW`;
+  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) {
@@ -30,54 +29,77 @@ const getRuseFclt = async (
     },
     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 };
-
+    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
+
+  return hasuList;
 };
 
 export type DmMapActions = {
-  findRuseFclt(sggOrCity:string, searchTxt: string): void;
+  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);
+    findRuseFclt: async (sggOrCity: string, searchTxt: string) => {
+      const ruseFcltList = await getRuseFclt("1", sggOrCity, searchTxt);
 
       set((state: DmMapType) => ({
+        ...state,
         map: {
           ...state.map,
-          ruseFcltList :ruseFcltList.data
+          ruseFcltList: ruseFcltList.data,
+        },
+      }));
+    },
+    setSubsInfo: async (subsInfo: SubsInfo[]) => {
+      set((state: DmMapType) => ({
+        ...state,
+        map: {
+          ...state.map,
+          subsInfo: subsInfo,
         },
       }));
     },

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

@@ -31,4 +31,9 @@ export type FacilityInfo= {
     tel: string;                     // 전화번호
     rswtrYn: string;                 // 재이용수 여부 ("Y" 또는 "N")
     ruse: boolean;                   // 재이용 여부 (boolean)
+  }
+
+  export type SubsInfo={
+    ruseUtztnFcltNm: string;        // 재이용시설명
+    ruseUtztnFcltCd: string;        // 재이용시설 코드
   }

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

@@ -38,8 +38,17 @@ export type DemandCompType = {
   reqDt : string | '';
   dmdInfoSn : number | '';
   status : string | '';
+  splyCndtList:SupplyCandidate[]|[],
+
 }
 
+// 공급 후보자 타입 정의
+export type SupplyCandidate = {
+  ruseUtztnFcltNm: string;
+  ruseUtztnFcltCd: string;
+};
+
+
 export type DemandMatchings = {
   splyFcltFk : string | '';
   splyFcltFlg : string | '';

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

@@ -1,53 +1,76 @@
 import React, { useCallback, useEffect, useRef, useState } from "react";
 
 type SearchType = {
-  searchNm: string;
-  searchPk: string;
+  bscFctNm: string;
+  bscFctCd: string;
 };
+
 type thisProps = {
   label: string | undefined;
   initValue: string | undefined;
   setValue: (searchNm?: string) => void;
   setRtnData: (rtnData: any) => void;
-  searchList?: any[];
+  searchList?: SearchType[];
 };
+
 export default function SearchInputText({
   label = undefined,
   initValue = undefined,
   setValue = () => {},
   setRtnData = () => {},
-  searchList = undefined,
+  searchList = [],
 }: thisProps) {
- 
   const [isOpen, setIsOpen] = useState(false);
   const [textValue, setTextValue] = useState(initValue || "");
+  const [highlightIndex, setHighlightIndex] = useState<number>(-1);
 
   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);
-      }
+      setHighlightIndex(-1);
+      setIsOpen(value !== "");
     },
     [setValue]
   );
 
   const handleSuggestionClick = useCallback(
     (searchNm: string) => {
-      // Do not update textValue to keep input unchanged on suggestion click
       setValue(searchNm);
+      setTextValue(searchNm);
       setIsOpen(false);
-      setRtnData(searchList?.find((item) => item.searchNm === searchNm) || {});
+      setRtnData(searchList?.find((item) => item.bscFctNm === searchNm) || {});
     },
     [searchList, setRtnData, setValue]
   );
 
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (!isOpen || searchList.length === 0) return;
+
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setHighlightIndex((prev) => (prev + 1) % searchList.length);
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setHighlightIndex((prev) =>
+          prev <= 0 ? searchList.length - 1 : prev - 1
+        );
+      } else if (e.key === "Enter") {
+        e.preventDefault();
+        if (searchList.length === 1 && searchList[0]) {
+          handleSuggestionClick(searchList[0].bscFctNm);
+        } else if (highlightIndex >= 0 && highlightIndex < searchList.length && searchList[highlightIndex]) {
+          handleSuggestionClick(searchList[highlightIndex].bscFctNm);
+        }
+      }
+    },
+    [highlightIndex, isOpen, searchList, handleSuggestionClick]
+  );
+
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
       if (
@@ -68,31 +91,39 @@ export default function SearchInputText({
     <div ref={wrapperRef} className="relative">
       <input
         type="text"
-        value={textValue ||''}
+        value={textValue || ""}
         onChange={handleInputChange}
-        /* onFocus={() => setIsOpen(true)} */
+        onKeyDown={handleKeyDown}
         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}을(를) 입력하세요`}
+        onClick={() => {
+          setTextValue("");
+          setValue("");
+          setIsOpen(false);
+        }}
       />
       {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) => (
+            {searchList.length > 0 ? (
+              searchList.map((item, index) => (
                 <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)}
+                  className={`w-full cursor-pointer overflow-auto px-5 py-3 text-left !text-xl ${
+                    highlightIndex === index
+                      ? "bg-blue-100"
+                      : "hover:bg-gray-100"
+                  }`}
+                  onClick={() => handleSuggestionClick(item.bscFctNm)}
                   role="button"
                   tabIndex={0}
                   onKeyDown={(e) => {
                     if (e.key === "Enter" || e.key === " ") {
-                      handleSuggestionClick(item.searchNm);
+                      handleSuggestionClick(item.bscFctNm);
                     }
                   }}
                 >
-                  {item.searchPk?.substring(0, 10)}&nbsp;
-                  <span className="float-right">{item.searchNm}</span>
+                  <span className="float-left">{item.bscFctNm}</span>
                 </div>
               ))
             ) : (

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

@@ -3,28 +3,29 @@ import { useDmStore } from "@/app/store";
 import {
   SearchDiv,
   SearchFormLeft,
-  SearchFormRight,
   SelectBox,
   type SelectDataType,
 } from "@common/business_components/ui";
-import {  Label } from "@common/components/ui";
+import { Button, Label } from "@common/components/ui";
 import { useCallback, useEffect, useState } from "react";
 import SearchInputText from "../SearchInputText/SearchInputText";
 
 export function SearchBar({
-
-  setHasuPk
-}:{
-  setHasuPk: (hasuPk: string) => void,
-}
-
-) {
-  const {map, Common, initializeCommonData ,findRuseFclt} = useDmStore((state) => state);
+  setHasuPk,
+  onApply,
+}: {
+  setHasuPk: (hasuPk: any) => 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]);
@@ -59,12 +60,11 @@ export function SearchBar({
       }
     },
     [initializeSigunData]
-  );  
+  );
 
-
-useEffect(()=>{
-  console.log('map.ruseFcltList ', map.ruseFcltList)
-},[map.ruseFcltList])
+  // useEffect(() => {
+  //   console.log("map.ruseFcltList ", map.ruseFcltList);
+  // }, [map.ruseFcltList]);
 
   return (
     <>
@@ -81,10 +81,10 @@ useEffect(()=>{
                   onSelectValue={(val) =>
                     onSelectValue(val.toString(), "ctpvCd")
                   }
-                  value={sidoValue|| Common.selectSidoData[0]?.val || ""}
+                  value={sidoValue || Common.selectSidoData[0]?.val || ""}
                 />
                 <SelectBox
-                  className="col-span-2 w-1/6 h-full text-2xl ml-2"
+                  className="col-span-2 w-1/6 h-full text-2xl ml-10"
                   label="시군구"
                   selectClass={""}
                   selectArray={filteredSigunData || []}
@@ -93,39 +93,52 @@ useEffect(()=>{
                   }
                   value={sigunValue}
                 />
-               <div className="col-span-6 flex flex-row items-center min-w-[40rem]">
-                <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;
+                <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);
                       }
-                      findRuseFclt(sggOrCity, searchNm);
-                    }
-                  }}
-                  setRtnData={(rtnData: any)=> {
-                    setHasuPk(rtnData.bscFctCd || "");
-                  }}
-                  searchList={map.ruseFcltList || []}
-                />
+                    }}
+                    setRtnData={(rtnData: any) => {
+                      setHasuPk(rtnData);
+                    }}
+                    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>
-            <SearchFormRight className="w-2/12 mx-5 flex flex-col items-center justify-center space-x-2 ">
-              <div className="flex flex-row space-x-2">
-                {/* <Button className="mt-2" size={"sm"} onClick={() => {}}>
-                  조회
-                </Button> */}
-              </div>
-            </SearchFormRight>
           </SearchDiv>
         </div>
       </div>

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

@@ -23,11 +23,11 @@ export function AccessibleFormField<T extends FieldValues>({
     <FormUi label={labelText}>
       <div>
         {inputComponent}
-        {error?.message && Array.from(new Set(error.message.split('\n'))).map((msg, idx) => (
+        {/* {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

@@ -1,5 +1,5 @@
-import ModalSimilarPage from "@/app/pages/sdmMng/sdmInfoInsert/modalSimilar/page";
-import type { FormData } from "@/app/pages/sdmMng/sdmInfoInsert/page";
+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,
@@ -15,11 +15,9 @@ 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 type { ControllerRenderProps, UseFormReturn, FieldError } from "react-hook-form";
 import SearchInputText from "../common/searhDemandInput/component";
 import type { DemandCompType } from "@/app/store/sdmMng";
-import NewWindowPortal from "@/app/pages/map/popup/windowPotal";
-import Map from "@/app/pages/map/popup/sdmInfoMap";
 
 export interface SdmInfoRegFormProps {
   form: UseFormReturn<FormData>;
@@ -47,7 +45,6 @@ export function SdmInfoRegForm({
   const [isSimilarCase, setIsSimilarCase] = useState(false);
   const [key, setKey] = useState(0);
   // 후보지 팝업 오픈 상태
-  const [isCandidatePopup, setIsCandidatePopup] = useState(false);
 
   //모달 조회에 필요한 데이터
   const [sply, setSply] = useState<number>(0);
@@ -58,6 +55,9 @@ export function SdmInfoRegForm({
     initializeCommonData();
   }, [initializeCommonData]);
 
+  useEffect(() => {
+    console.log("candidateTitle ", form.getValues("candidateTitle"));
+  }, [form.getValues("candidateTitle")]);
   useEffect(() => {
     if (useTypesData && useTypesData.length > 0) {
       setTimeout(() => {
@@ -85,8 +85,17 @@ export function SdmInfoRegForm({
   const searchCandidate = (e: React.MouseEvent) => {
     e.preventDefault();
     e.stopPropagation();
-    console.log(1);
-    setIsCandidatePopup(true);
+    const dmdInfoId = JSON.parse(
+      sessionStorage.getItem("user") || "{}"
+    )?.dmdInfoId?.toString();
+
+    const url = `/map/popup?dmdInfoId=${encodeURIComponent(dmdInfoId)}`;
+    const width = window.screen.availWidth;
+    const height = window.screen.availHeight;
+    const left = 0;
+    const top = 0;
+    const popupOptions = `width=${width},height=${height},left=${left},top=${top},resizable=yes,scrollbars=yes`;
+    window.open(url, "candidatePopup", popupOptions);
   };
 
   const searchSimilarCase = (e: React.MouseEvent) => {
@@ -208,32 +217,24 @@ export function SdmInfoRegForm({
       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>
-          }
-        />
+        <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>
       ),
     },
     {
@@ -462,7 +463,7 @@ export function SdmInfoRegForm({
       name: "candidateTitle",
       label: CANDIDATE || "공급처 후보지 선택(필수아님)",
       formIndex: 2,
-      component: (field) => (
+      component: () => (
         <div>
           <div className="-mt-14 float-right flex gap-10">
             <Button className={"bg-gray-200"} onClick={searchCandidate}>
@@ -473,36 +474,18 @@ export function SdmInfoRegForm({
             </Button>
           </div>
           <div className="flex justify-center gap-10 mt-5">
-            <Input
-              placeholder="후보지1"
-              type="text"
-              className="!text-xl w-[130px] text-gray-600"
-              value={field.value as string}
-              onChange={field.onChange}
-              onBlur={field.onBlur}
-              name={field.name}
-              ref={field.ref}
-            />
-            <Input
-              placeholder="후보지2"
-              type="text"
-              className="!text-xl w-[130px] text-gray-600"
-              value={field.value as string}
-              onChange={field.onChange}
-              onBlur={field.onBlur}
-              name={field.name}
-              ref={field.ref}
-            />
-            <Input
-              placeholder="후보지3"
-              type="text"
-              className="!text-xl w-[130px] text-gray-600"
-              value={field.value as string}
-              onChange={field.onChange}
-              onBlur={field.onBlur}
-              name={field.name}
-              ref={field.ref}
-            />
+            {(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>
       ),
@@ -538,7 +521,11 @@ export function SdmInfoRegForm({
                   field={field}
                   label={label}
                   required={required}
-                  error={form.formState.errors[name]}
+                  error={
+                    typeof form.formState.errors[name]?.message === 'string'
+                      ? (form.formState.errors[name] as FieldError)
+                      : undefined
+                  }
                   inputComponent={component(field)}
                 />
               )
@@ -564,7 +551,11 @@ export function SdmInfoRegForm({
                       field={field}
                       label={label}
                       required={required}
-                      error={form.formState.errors[name]}
+                      error={
+                        typeof form.formState.errors[name]?.message === 'string'
+                          ? (form.formState.errors[name] as FieldError)
+                          : undefined
+                      }
                       inputComponent={component?.(field)}
                     />
                   )}
@@ -589,7 +580,11 @@ export function SdmInfoRegForm({
                 field={field}
                 label={label}
                 required={required}
-                error={form.formState.errors[name]}
+                error={
+                  typeof form.formState.errors[name]?.message === 'string'
+                    ? (form.formState.errors[name] as FieldError)
+                    : undefined
+                }
                 inputComponent={component?.(field)}
               />
             )}
@@ -609,20 +604,6 @@ export function SdmInfoRegForm({
           noFooterYn="Y"
         />
       )}
-
-      {/* 후보지 조회 새 창 포털 */}
-      {isCandidatePopup && (
-        <NewWindowPortal
-          onClose={() => setIsCandidatePopup(false)}
-          title="공급처 후보지 조회"
-          width={window.screen.availWidth}
-          height={window.screen.availHeight}
-          resizable="no"
-          scrollbars="yes"
-        >
-          <Map />
-        </NewWindowPortal>
-      )}
     </>
   );
 }

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

@@ -10,7 +10,7 @@ import * as z from "zod";
 
 export function SdmLoginForm() {
   const { actionLogin, initializeCommonData } = useDmStore((state) => state);
-  const [isBznmTotNoDisabled, setIsBznmTotNoDisabled] = useState(false);
+  const [isBznmTotNoDisabled, setIsBznmTotNoDisabled] = useState(true);
 
   const formatBusinessNumber = (value: string) => {
     // 숫자만 추출

apps/dm/src/entities/auth/api/login-service.ts

@@ -16,7 +16,6 @@ export class LoginApiService implements LoginService {
 
   public async login(payload: ILogin): Promise<void> {
     try {
-      console.log(' ENDPOINT.USER_SERVICE.LOGIN ', ENDPOINT.USER_SERVICE.LOGIN)
       const response = await fetch( PROXY_HOST+ ENDPOINT.USER_SERVICE.LOGIN, {
         method: "POST",
         body: JSON.stringify({

apps/dm/src/shared/config/env.ts

@@ -1,7 +1,7 @@
 export const SITE_ID = process.env.NEXT_PUBLIC_SITE_ID || "DM";
 export const PORT = process.env.NEXT_PUBLIC_PORT || "3000";
 export const PROXY_HOST = process.env.NEXT_PUBLIC_PROXY_HOST || `http://localhost:${PORT}`;
-export const SERVER_API_URL = process.env.NEXT_PUBLIC_SERVER_API_URL ||'http://con.mind-one.co.kr:11035/api/v1';
+export const SERVER_API_DM_URL = process.env.NEXT_PUBLIC_DM_SERVER_API_URL ||'http://con.mind-one.co.kr:11035/api/v1';
 export const SERVER_API_FO_URL = process.env.NEXT_PUBLIC_FO_SERVER_API_URL||' http://con.mind-one.co.kr:11082/api/v1';
 export const SERVER_API_WR_URL = process.env.NEXT_PUBLIC_WR_SERVER_API_URL||' http://con.mind-one.co.kr:11080/api/v1';
 export const SERVER_API_CS_URL = process.env.NEXT_PUBLIC_CS_SERVER_API_URL||'http://dev.onasys.co.kr:8000';

apps/fo/.env.local

@@ -1,6 +1,6 @@
 NEXT_PUBLIC_SITE_ID = FO
-NEXT_PUBLIC_PORT = 11300
-NEXT_PUBLIC_PROXY_HOST = http://con.mind-one.co.kr:11300
+NEXT_PUBLIC_PORT = 3000
+NEXT_PUBLIC_PROXY_HOST = http://localhost:3000
 NEXT_PUBLIC_SERVER_API_URL = http://con.mind-one.co.kr:11082/api/v1
 NEXT_PUBLIC_WR_SERVER_API_URL = http://con.mind-one.co.kr:11080/api/v1
 NEXT_PUBLIC_CS_SERVER_API_URL = http://dev.onasys.co.kr:8000

apps/fo/app/base.tsx

@@ -3,7 +3,7 @@
 import { BaseLayout } from "@common/components";
 import type { MenuItem } from "./store/common";
 import { useFoStore } from "./store";
-import { useRouter } from "next/navigation";
+import { usePathname, useRouter } from "next/navigation";
 
 export default function Base({
   children,
@@ -11,12 +11,17 @@ export default function Base({
   children: React.ReactNode;
 }>) {
   const { getMenuAuth } = useFoStore((state) => state);
-
+  const pathname = usePathname();
   const router = useRouter();
-  const handleClick = (id:MenuItem) =>{
+
+  const handleClick = (id: MenuItem) => {
     getMenuAuth(id.menuCd);
     router.push(id.urlPath);
-  }
+  };
 
-  return <BaseLayout handleMenuClick={handleClick}>{children}</BaseLayout>;
+  return (
+    <BaseLayout currentPath={pathname ?? ""} handleMenuClick={handleClick}>
+      {children}
+    </BaseLayout>
+  );
 }

apps/fo/app/pages/dashboard/facilityInfo/page.tsx

@@ -2,7 +2,7 @@
 import { useFoStore } from "@/app/store";
 import type { TableUpperProps } from "@/app/store/processFacility";
 import { ContentsDiv, UiModal, UiTable } from "@common/business_components";
-import { cn, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@common/components";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@common/components";
 import { useEffect, useState } from "react";
 import DashBoardChartModal from "./modal/page";
 
@@ -30,20 +30,20 @@ const headMakeColSpanPlanFclty = (upHeadList: TableUpperProps[], planYearList: s
 const headMakeColSpanOperationStatus = (upHeadList: TableUpperProps[], searchYear: string) => {
   return  ( <>
     <TableRow>
-      <TableHead rowSpan={1} colSpan={16} style={{ whiteSpace: 'pre-line' }}>{searchYear+'년도 운영실태'}</TableHead>
+      <TableHead rowSpan={1} colSpan={17} style={{ whiteSpace: 'pre-line' }}>{searchYear+'년도 운영실태'}</TableHead>
     </TableRow>
     <TableRow>{
     upHeadList.map((head: TableUpperProps) =>
     (head.upName === 'upChangeRe1'&&head.upSequnce===1?<TableHead key={head.id} rowSpan={2}colSpan={2} style={{ whiteSpace: 'pre-line' }}>{head.title}</TableHead>:
-    !head.upSequnce?<TableHead rowSpan={2}key={head.id}>{head.title}</TableHead>:
+    !head.upSequnce?<TableHead style={{ whiteSpace: 'pre-line' }} rowSpan={2}key={head.id}>{head.title}</TableHead>:
     head.upName === 'upChangeRe2'&&head.upSequnce===1?<TableHead key={head.id} colSpan={3} style={{ whiteSpace: 'pre-line' }}>{'연간 운영실태'}</TableHead>:
     head.upName === 'upChangeRe3'&&head.upSequnce===1?<TableHead key={head.id} colSpan={3} style={{ whiteSpace: 'pre-line' }}>{'하절기 운영실태\n(6~8월)'}</TableHead>:
     head.upName === 'upChangeRe4'&&head.upSequnce===1?<TableHead key={head.id} colSpan={4} style={{ whiteSpace: 'pre-line' }}>{'동절기 운영실태\n(1~2월)'}</TableHead>:
-    head.upName === 'upChangeRe5'&&head.upSequnce===1?<TableHead key={head.id} colSpan={3} style={{ whiteSpace: 'pre-line' }}>{'지하수유입량'}</TableHead>:null))}
+    head.upName === 'upChangeRe5'&&head.upSequnce===1?<TableHead key={head.id} colSpan={3} style={{ whiteSpace: 'pre-line' }}>{'지하수 유입량 추정'}</TableHead>:null))}
     </TableRow>
     <TableRow>
       {upHeadList.map((head: TableUpperProps) =>
-        (head.upName === 'upChangeRe2'||head.upName === 'upChangeRe3'||head.upName === 'upChangeRe4'||head.upName === 'upChangeRe5' ?<TableHead key={head.id}>{head.title}</TableHead>:null))}
+        (head.upName === 'upChangeRe2'||head.upName === 'upChangeRe3'||head.upName === 'upChangeRe4'||head.upName === 'upChangeRe5'?<TableHead style={{ whiteSpace: 'pre-line' }} key={head.id}>{head.title}</TableHead>:null))}
     </TableRow>
     </> )
 }
@@ -238,10 +238,10 @@ export default function ProcessFacilitySearch({searchYear = '', fcltyList = []}:
                       (head.id === 'flowRate' && index === 11)?<TableCell rowSpan={2} className="text-center" style={{ whiteSpace: 'pre-line' }} key={head.id+index}>{el[head.id]}</TableCell>:
                       (head.id === 'groundWaterAvg'||head.id === 'groundWaterSummer'||head.id === 'groundWaterWinter')&&(index === 0)?<TableCell rowSpan={7} className="text-right" style={{ whiteSpace: 'pre-line' }} key={head.id+index}>{el[head.id]}</TableCell>:
                       (head.id === 'groundWaterAvg'||head.id === 'groundWaterSummer'||head.id === 'groundWaterWinter')&&(index === 7)?<TableCell rowSpan={6} className="text-right" style={{ whiteSpace: 'pre-line' }} key={head.id+index}>{el[head.id]}</TableCell>:
-                      (head.id === 'rdi'&&index === 0)?<TableCell rowSpan={2} className="text-right" style={{ whiteSpace: 'pre-line' }} key={head.id+index}>{el[head.id]}</TableCell>:
-                      (head.id === 'rdi'&&index === 2)?<TableCell rowSpan={3} className={cn("sticky top-0 bg-secondary [&_tr]:border-b", "text-center"  )}  style={{ whiteSpace: 'pre-line' }} key={head.id+index}>{'RDII추정시\n일강수량(mm)'}</TableCell>:
-                      (head.id === 'rdi'&&index === 5)?<TableCell rowSpan={2} className="text-right" style={{ whiteSpace: 'pre-line' }} key={head.id+index}>{el['rdiRain']}</TableCell>:
+                      (head.id === 'rdi'&&index === 0)?<TableCell rowSpan={7} className="text-right" style={{ whiteSpace: 'pre-line' }} key={head.id+index}>{el[head.id]}</TableCell>:
                       (head.id === 'rdi'&&index === 7)?<TableCell rowSpan={6} className="text-right" style={{ whiteSpace: 'pre-line' }} key={head.id+index}></TableCell>:
+                      (head.id === 'rdiRain'&&index === 0)?<TableCell rowSpan={7} className="text-right" style={{ whiteSpace: 'pre-line' }} key={head.id+index}>{el['rdiRain']}</TableCell>:
+                      (head.id === 'rdiRain'&&index === 7)?<TableCell rowSpan={6} className="text-right" style={{ whiteSpace: 'pre-line' }} key={head.id+index}></TableCell>:
                       (head.id === 'waterQlty')?<TableCell className="text-center" style={{ whiteSpace: 'pre-line' }} key={head.id+index}>{el[head.id]}</TableCell>:
                       ((head.id === 'yearAvg' || head.id === 'yearMax' || head.id === 'yearMin') && (index>=0 && index<=4))?<TableCell className="bg-yellow-50 text-right cursor-pointer" style={{ whiteSpace: 'pre-line' }} key={head.id+index} onClick={()=>{fncLoadModal('flowRate', 'year', el['waterQlty'] as string);}}>{el[head.id]}</TableCell>:
                       ((head.id === 'yearAvg' || head.id === 'yearMax' || head.id === 'yearMin') && (index>=5 && index<=10))?<TableCell className="bg-green-50 text-right cursor-pointer" style={{ whiteSpace: 'pre-line' }} key={head.id+index} onClick={()=>{fncLoadModal('waterQlty', 'year', el['waterQlty'] as string);}}>{el[head.id]}</TableCell>:

apps/fo/app/pages/dashboard/page.tsx

@@ -14,7 +14,7 @@ const tabList = [
   { value: 'facilityInfo', label: '시설정보 및 운영현황' },
   { value: 'mainGraph', label:  '주요그래프' },
   { value: 'rainManage', label: '강우일 운영현황' },
-  { value: 'drainageEquipment', label: '배수설비 정비현황' }
+  //{ value: 'drainageEquipment', label: '배수설비 정비현황' }
 ];
 
 export default function DashBoard() {
@@ -57,9 +57,18 @@ export default function DashBoard() {
 
   /******************선택된 데이터******************/
   // 연도
-  const [searchYear, setSearchYear] = useState<string>(selectSearchYear[0]?.val || '0');
+  //const [searchYear, setSearchYear] = useState<string>(selectSearchYear[0]?.val || '0');
+  const [searchYear, setSearchYear] = useState<string>('2023');
   // 시설명
   const [fcltyList, setFcltyList] = useState<{bscFctCd: string, bscFctNm: string, fcltyCpc: number | '', trtFrfNm: string | '', efflWqltStndrdNm: string | ''}>({
+    bscFctCd: '26260PB001R',
+    bscFctNm: '수영',
+    fcltyCpc: 452000,
+    trtFrfNm: '표준활성슬러지법, MLE, MBR',
+    efflWqltStndrdNm: '500톤 이상(Ⅳ지역)'
+  });
+
+  const [searchFcltyList, setSearchFcltyList] = useState<{bscFctCd: string, bscFctNm: string, fcltyCpc: number | '', trtFrfNm: string | '', efflWqltStndrdNm: string | ''}>({
     bscFctCd: '',
     bscFctNm: '',
     fcltyCpc: '',
@@ -70,12 +79,12 @@ export default function DashBoard() {
   useEffect(() => {
     if (!isInit) {
       initializeCommonData();
-      setFcltyList({
-        bscFctCd: '11000SW001R',
-        bscFctNm: '난지',
-        fcltyCpc: 860000,
-        trtFrfNm: '표준활성슬러지법, MLE, A2O',
-        efflWqltStndrdNm: '500톤 이상(Ⅲ지역)'
+      setSearchFcltyList({
+        bscFctCd: '26260PB001R',
+        bscFctNm: '수영',
+        fcltyCpc: 452000,
+        trtFrfNm: '표준활성슬러지법, MLE, MBR',
+        efflWqltStndrdNm: '500톤 이상(Ⅳ지역)'
       });
     }
   }, [isInit, initializeCommonData]);
@@ -257,12 +266,29 @@ export default function DashBoard() {
 
   const initVal = () => {
     setFcltyList({
-      bscFctCd: '11000SW001R',
-      bscFctNm: '난지',
-      fcltyCpc: 860000,
-      trtFrfNm: '표준활성슬러지법, MLE, A2O',
-      efflWqltStndrdNm: '500톤 이상(Ⅲ지역)'
+      bscFctCd: '26260PB001R',
+      bscFctNm: '수영',
+      fcltyCpc: 452000,
+      trtFrfNm: '표준활성슬러지법, MLE, MBR',
+      efflWqltStndrdNm: '500톤 이상(Ⅳ지역)'
     });
+
+    setSearchFcltyList({
+      bscFctCd: '26260PB001R',
+      bscFctNm: '수영',
+      fcltyCpc: 452000,
+      trtFrfNm: '표준활성슬러지법, MLE, MBR',
+      efflWqltStndrdNm: '500톤 이상(Ⅳ지역)'
+    });
+    setSearchYear('2023');
+    searchFcltyList.bscFctNm = '수영';
+  }
+
+  const searchVal = () => {
+    setSearchFcltyList(fcltyList);
+    if(searchFcltyList.bscFctCd) {
+      searchOperationStatus(false, searchYear, fcltyList.bscFctCd);
+    }
   }
 
   return (
@@ -274,10 +300,13 @@ export default function DashBoard() {
             <SelectBox className="col-span-3" label={'시도'} selectArray={selectSidoData} onSelectValue={(val) => onSelectValue(val.toString(), 'sido')} value={sidoValue} selectClass={undefined}/>
             <SelectBox className="col-span-3" label={'시군구'} selectArray={filteredSigunData} onSelectValue={(val) => onSelectValue(val.toString(), 'sigun')} value={sigunValue} selectClass={undefined}/>
             <div className="col-span-4 flex">
-              <DashBoardFclty onFacilityChange={handleFacilityChange} sidoSigun={sigunValue!='0'?sigunValue:sidoValue!='0'?sidoValue:''} facilityNm={fcltyList.bscFctNm}></DashBoardFclty>
+              <DashBoardFclty onFacilityChange={handleFacilityChange} sidoSigun={sigunValue!='0'?sigunValue:sidoValue!='0'?sidoValue:''} facilityNm={searchFcltyList.bscFctNm}></DashBoardFclty>
             </div>
           </div>
           <div className="w-4/12 mx-5 flex items-center justify-end space-x-2">
+            <Button className={btnClass} onClick={searchVal}>
+              조회
+            </Button>
             <Button className={btnClass} onClick={initVal}>
               초기화
             </Button>
@@ -288,16 +317,16 @@ export default function DashBoard() {
         </div>
         <UITab tabList={tabList} defaultValue="facilityInfo" onValueChange={setActiveTab}>
           <TabsContent value="facilityInfo">
-            <ProcessFacilitySearch searchYear={searchYear} fcltyList={[fcltyList]} onFacilityChange={handleFacilityChange} />
+            <ProcessFacilitySearch searchYear={searchYear} fcltyList={[searchFcltyList]} onFacilityChange={handleFacilityChange} />
           </TabsContent>
           <TabsContent value="mainGraph">
-            <DashBoardChart searchYear={searchYear} fcltyList={[fcltyList]}/>
+            <DashBoardChart searchYear={searchYear} fcltyList={[searchFcltyList]}/>
           </TabsContent>
           <TabsContent value="rainManage">
-            <RainManageTab searchYear={searchYear} fcltyList={[fcltyList]}/>
+            <RainManageTab searchYear={searchYear} fcltyList={[searchFcltyList]}/>
           </TabsContent>
           <TabsContent value="drainageEquipment">
-            <DrainageEquipment searchYear={searchYear} fcltyList={[fcltyList]}/>
+            <DrainageEquipment searchYear={searchYear} fcltyList={[searchFcltyList]}/>
           </TabsContent>
         </UITab>
       </ContentsDiv>

apps/fo/app/pages/dashboardMain/page.tsx

@@ -3,7 +3,7 @@ import { useFoStore } from "@/app/store";
 import { useEffect, useState } from "react";
 import SearchInput from "../../components/common/SearchInput";
 
-export default function DashBoardFclty({ onFacilityChange, sidoSigun, facilityNm }: { onFacilityChange?: (facility: { bscFctCd: string, bscFctNm: string, fcltyCpc: number | '', trtFrfNm: string | '', efflWqltStndrdNm: string | '' }) => void, sidoSigun?: string, facilityNm?: string }) {
+export default function DashBoardFclty({ onFacilityChange, sidoSigun, facilityNm,  }: { onFacilityChange?: (facility: { bscFctCd: string, bscFctNm: string, fcltyCpc: number | '', trtFrfNm: string | '', efflWqltStndrdNm: string | '' }) => void, sidoSigun?: string, facilityNm?: string }) {
   // 입력값 상태 관리
   const { Common, initializeCommonData } = useFoStore((state) => state);
 
@@ -12,7 +12,7 @@ export default function DashBoardFclty({ onFacilityChange, sidoSigun, facilityNm
   } = Common;
 
   // 시설명
-  const [bscFctNm, setFcltyName] = useState<string>(facilityNm || '난지');
+  const [bscFctNm, setFcltyName] = useState<string>(facilityNm || '수영');
   const [bscFctCd, setbscFctCd] = useState<string>('11000SW001R');
   const [fcltyCpc, setFcltyCpc] = useState<number | ''>(860000);
   const [trtFrfNm, setTrtFrfNm] = useState<string | ''>('표준활성슬러지법, MLE, A2O');
@@ -48,8 +48,6 @@ export default function DashBoardFclty({ onFacilityChange, sidoSigun, facilityNm
     }
   }
 
-  console.log('bscFctNm : ', bscFctNm);
-
   return (
     <div className="z-50">
       <SearchInput label={'시설명'} setValue={fncNextPage} sidoSigun={sidoSigun} fcltyName={bscFctNm}/>

apps/fo/app/pages/facilityPrecipitation/page.tsx

@@ -81,7 +81,8 @@ export default function FacilityPrecipitation() {
   // 시설상태
   const [operationValue, setOperationValue] = useState<string>("0");
   // 조회기간
-  const [searchYear, setSearchYear] = useState<string>(selectSearchYear[0]?.val || "0");
+  //const [searchYear, setSearchYear] = useState<string>(selectSearchYear[0]?.val || "0");
+  const [searchYear, setSearchYear] = useState<string>("2023");
 
   /**
    * 페이지 함수
@@ -125,9 +126,9 @@ export default function FacilityPrecipitation() {
   useEffect(() => {
     if (!isInit) {
       initializeCommonData();
-      searchFacilityPrecipitationList(1, 10, selectSearchYear[0]?.val || "0");
+      searchFacilityPrecipitationList(1, 10, searchYear || "0");
     }
-  }, [isInit, initializeCommonData, searchFacilityPrecipitationList, selectSearchYear]);
+  }, [isInit, initializeCommonData, searchFacilityPrecipitationList, searchYear]);
 
   useEffect(() => {
     if (excelList && excelList.length > 0) {

apps/fo/app/pages/facilityWaterQlty/modal/page.tsx

@@ -63,7 +63,7 @@ export default function WaterQualityModal({fcltyName='', facilityCd='', searchYe
     let maxEfflWqltBod = 0;
     let maxEfflWqltTn = 0;
     let maxEfflWqltTp = 0;
-    let maxefflWqltCod = 0;
+    let maxefflWqltToc = 0;
     let maxEfflWqltSs = 0;
 
     let maxInflAssctAftWqltBod = 0;
@@ -80,7 +80,7 @@ export default function WaterQualityModal({fcltyName='', facilityCd='', searchYe
     let minEfflWqltBod = filteredData.length > 0 ? parseNumber(filteredData[0]?.efflWqltBod) : 0;
     let minEfflWqltTn = filteredData.length > 0 ? parseNumber(filteredData[0]?.efflWqltTn) : 0;
     let minEfflWqltTp = filteredData.length > 0 ? parseNumber(filteredData[0]?.efflWqltTp) : 0;
-    let minefflWqltCod = filteredData.length > 0 ? parseNumber(filteredData[0]?.efflWqltCod) : 0;
+    let minefflWqltToc = filteredData.length > 0 ? parseNumber(filteredData[0]?.efflWqltToc) : 0;
     let minEfflWqltSs = filteredData.length > 0 ? parseNumber(filteredData[0]?.efflWqltSs) : 0;
     
     let minInflAssctAftWqltBod = filteredData.length > 0 ? parseNumber(filteredData[0]?.inflAssctAftWqltBod) : 0;
@@ -97,7 +97,7 @@ export default function WaterQualityModal({fcltyName='', facilityCd='', searchYe
     let avgEfflWqltBod = 0;
     let avgEfflWqltTn = 0;
     let avgEfflWqltTp = 0;
-    let avgefflWqltCod = 0;
+    let avgefflWqltToc = 0;
     let avgEfflWqltSs = 0;
 
     let avgInflAssctAftWqltBod = 0;
@@ -115,7 +115,7 @@ export default function WaterQualityModal({fcltyName='', facilityCd='', searchYe
       const efflWqltBod = parseNumber(item.efflWqltBod);
       const efflWqltTn = parseNumber(item.efflWqltTn);
       const efflWqltTp = parseNumber(item.efflWqltTp);
-      const efflWqltCod = parseNumber(item.efflWqltCod);
+      const efflWqltToc = parseNumber(item.efflWqltToc);
       const efflWqltSs = parseNumber(item.efflWqltSs);
 
       const inflAssctAftWqltBod = parseNumber(item.inflAssctAftWqltBod);
@@ -133,7 +133,7 @@ export default function WaterQualityModal({fcltyName='', facilityCd='', searchYe
       maxEfflWqltBod = Math.max(maxEfflWqltBod, efflWqltBod);
       maxEfflWqltTn = Math.max(maxEfflWqltTn, efflWqltTn);
       maxEfflWqltTp = Math.max(maxEfflWqltTp, efflWqltTp);
-      maxefflWqltCod = Math.max(maxefflWqltCod, efflWqltCod);
+      maxefflWqltToc = Math.max(maxefflWqltToc, efflWqltToc);
       maxEfflWqltSs = Math.max(maxEfflWqltSs, efflWqltSs);
       
       maxInflAssctAftWqltBod = Math.max(maxInflAssctAftWqltBod, inflAssctAftWqltBod);
@@ -150,7 +150,7 @@ export default function WaterQualityModal({fcltyName='', facilityCd='', searchYe
       minEfflWqltBod = Math.min(minEfflWqltBod, efflWqltBod);
       minEfflWqltTn = Math.min(minEfflWqltTn, efflWqltTn);
       minEfflWqltTp = Math.min(minEfflWqltTp, efflWqltTp);
-      minefflWqltCod = Math.min(minefflWqltCod, efflWqltCod);
+      minefflWqltToc = Math.min(minefflWqltToc, efflWqltToc);
       minEfflWqltSs = Math.min(minEfflWqltSs, efflWqltSs);
 
       minInflAssctAftWqltBod = Math.min(minInflAssctAftWqltBod, inflAssctAftWqltBod);
@@ -167,7 +167,7 @@ export default function WaterQualityModal({fcltyName='', facilityCd='', searchYe
       avgEfflWqltBod += efflWqltBod;
       avgEfflWqltTn += efflWqltTn;
       avgEfflWqltTp += efflWqltTp;
-      avgefflWqltCod += efflWqltCod;
+      avgefflWqltToc += efflWqltToc;
       avgEfflWqltSs += efflWqltSs;
 
       avgInflAssctAftWqltBod += inflAssctAftWqltBod;
@@ -186,7 +186,7 @@ export default function WaterQualityModal({fcltyName='', facilityCd='', searchYe
       {
         msrDt: '평균',
         efflWqltBod: filteredData.length==0?'0.0':(Math.round(avgEfflWqltBod / filteredData.length * 10) / 10).toFixed(1),
-        efflWqltCod: filteredData.length==0?'0.0':(Math.round(avgefflWqltCod / filteredData.length * 10) / 10).toFixed(1),
+        efflWqltToc: filteredData.length==0?'0.0':(Math.round(avgefflWqltToc / filteredData.length * 10) / 10).toFixed(1),
         efflWqltSs: filteredData.length==0?'0.0':(Math.round(avgEfflWqltSs / filteredData.length * 10) / 10).toFixed(1),
         efflWqltTn: filteredData.length==0?'0.000':(Math.round(avgEfflWqltTn / filteredData.length * 1000) / 1000).toFixed(3),
         efflWqltTp: filteredData.length==0?'0.000':(Math.round(avgEfflWqltTp / filteredData.length * 1000) / 1000).toFixed(3),
@@ -209,7 +209,7 @@ export default function WaterQualityModal({fcltyName='', facilityCd='', searchYe
       {
         msrDt : '최대',
         efflWqltBod : Math.round(maxEfflWqltBod * 10) / 10?(Math.round(maxEfflWqltBod * 10) / 10).toFixed(1):'0.0',
-        efflWqltCod : Math.round(maxefflWqltCod * 10) / 10?(Math.round(maxefflWqltCod * 10) / 10).toFixed(1):'0.0',
+        efflWqltToc : Math.round(maxefflWqltToc * 10) / 10?(Math.round(maxefflWqltToc * 10) / 10).toFixed(1):'0.0',
         efflWqltSs : Math.round(maxEfflWqltSs * 10) / 10?(Math.round(maxEfflWqltSs * 10) / 10).toFixed(1):'0.0',
         efflWqltTn : Math.round(maxEfflWqltTn * 1000) / 1000?(Math.round(maxEfflWqltTn * 1000) / 1000).toFixed(3):'0.000',
         efflWqltTp : Math.round(maxEfflWqltTp * 1000) / 1000?(Math.round(maxEfflWqltTp * 1000) / 1000).toFixed(3):'0.000',
@@ -232,7 +232,7 @@ export default function WaterQualityModal({fcltyName='', facilityCd='', searchYe
       {
         msrDt : '최소',
         efflWqltBod : Math.round(minEfflWqltBod * 10) / 10?(Math.round(minEfflWqltBod?minEfflWqltBod:0 * 10) / 10).toFixed(1) : '0.0',
-        efflWqltCod : Math.round(minefflWqltCod * 10) / 10?(Math.round(minefflWqltCod?minefflWqltCod:0 * 10) / 10).toFixed(1) : '0.0',
+        efflWqltToc : Math.round(minefflWqltToc * 10) / 10?(Math.round(minefflWqltToc?minefflWqltToc:0 * 10) / 10).toFixed(1) : '0.0',
         efflWqltSs : Math.round(minEfflWqltSs * 10) / 10?(Math.round(minEfflWqltSs * 10) / 10).toFixed(1) : '0.0',
         efflWqltTn : Math.round(minEfflWqltTn * 1000) / 1000?(Math.round(minEfflWqltTn * 1000) / 1000).toFixed(3) : '0.000',
         efflWqltTp : Math.round(minEfflWqltTp * 1000) / 1000?(Math.round(minEfflWqltTp * 1000) / 1000).toFixed(3) : '0.000',
@@ -299,16 +299,16 @@ export default function WaterQualityModal({fcltyName='', facilityCd='', searchYe
           "유입TN(mg/L)": item.inflAssctAftWqltTn,
           "유입TP(mg/L)": item.inflAssctBfrWqltTp,
           "유출BOD(mg/L)": item.efflWqltBod,
-          "유출TOC(COD)(mg/L)": item.efflWqltCod,
+          "유출TOC(COD)(mg/L)": item.efflWqltToc,
           "유출SS(mg/L)": item.efflWqltSs,
           "유출TN(mg/L)": item.efflWqltTn,
           "유출TP(mg/L)": item.efflWqltTp,
-          "강우량(일)": item.infoRnDay?item.infoRnDay.toString():"0.0",
+/*           "강우량(mm/일)": item.infoRnDay?item.infoRnDay.toString():"0.0", */
         });
       });
     }
     if (excelDownList && excelDownList.length > 0) {
-      downloadExcel({ data: JSON.parse(JSON.stringify(excelDownList)), fileName: searchYear+'년 '+fcltyName + ' 수질현황', sheetNameArray: [fcltyName + ' 수질현황'], headerRange: 'A1:L1' });
+      downloadExcel({ data: JSON.parse(JSON.stringify(excelDownList)), fileName: searchYear+'년 '+fcltyName + ' 수질현황', sheetNameArray: [fcltyName + ' 수질현황'], headerRange: 'A1:K1' });
     } else if (prevExcelListRef.current && prevExcelListRef.current.length > 0) {
       alert('다운받을 데이터가 없습니다.');
     }
@@ -351,7 +351,7 @@ export default function WaterQualityModal({fcltyName='', facilityCd='', searchYe
               </div>
               <div className="card-header">
                 <h3 className="text-2xl font-medium text-label">수질 TMS</h3>
-                <h3 className="text-2xl font-medium text-label text-right">({msrmtDate?msrmtDate.substring(0,4)+'-'+msrmtDate.substring(4,6)+'-'+msrmtDate.substring(6,8):yesterDayStr})</h3>
+                {/*<h3 className="text-2xl font-medium text-label text-right">({msrmtDate?msrmtDate.substring(0,4)+'-'+msrmtDate.substring(4,6)+'-'+msrmtDate.substring(6,8):yesterDayStr})</h3> */}
               </div>
               <div className="overflow-y-auto h-[250px]">
                 <UiTable 
@@ -449,6 +449,9 @@ export default function WaterQualityModal({fcltyName='', facilityCd='', searchYe
                   <HeadMakeColSpan upHeadList={upHeadListModalYear} layoutNum={3} />
                 </UiTable>
               </div>
+              <div className="mt-14">
+                <span className="text-2xl font-bold text-gray-500">☞ 청천시 : 강우량이 3mm미만의 날</span>
+              </div>
             </TabsContent>
 
             <TabsContent value="tab_term_rain">
@@ -476,6 +479,9 @@ export default function WaterQualityModal({fcltyName='', facilityCd='', searchYe
                   <HeadMakeColSpan upHeadList={upHeadListModalYear} layoutNum={3} />
                 </UiTable>
               </div>
+              <div className="mt-14">
+                <span className="text-2xl font-bold text-gray-500">☞ 강우량 3mm 이상만 날과 강우영향일(강우일+2일)의 날</span>
+              </div>
             </TabsContent>
           </UITab>
         </TabsContent>

apps/fo/app/pages/facilityWaterQlty/page.tsx

@@ -48,7 +48,8 @@ export default function ProcessFacilitySearch() {
   const [upheadList, setUpheadList] = useState<TableUpperProps[]>(upHeadList1);
   const [fcltyName, setFcltyName] = useState<string>("");
   const [operationValue, setOperationValue] = useState<string>("0");
-  const [searchYearValue, setSearchYearValue] = useState<string>(selectSearchYear[0]?.val || "0");
+  //const [searchYearValue, setSearchYearValue] = useState<string>(selectSearchYear[0]?.val || "0");
+  const [searchYearValue, setSearchYearValue] = useState<string>("2023");
   const [fcltCpct, setFcltCpct] = useState<string>("0");
 
   // 모달 상태 추가
@@ -196,7 +197,7 @@ export default function ProcessFacilitySearch() {
       {selectedRow !== null && (
         <UiModal
           body={<WaterQualityModal fcltyName={fcltyNm} facilityCd={fcltyCd} searchYear={modalYear}></WaterQualityModal>}
-          bodyClass="sm:max-w-[90vw] w-[1200px] h-[920px]"
+          bodyClass="sm:max-w-[90vw] w-[1300px] h-[920px]"
           open={selectedRow !== null}
           onOpenChange={(open) => !open && closeModal()}
           noHeaderYn="Y"

apps/fo/app/pages/flowRate/modal/page.tsx

@@ -52,6 +52,7 @@ export default function FlowRateModal(props: { fcltyName: string; facilityCd: st
       return Number(value.replace(/,/g, ''));
     };
 
+    console.log('filteredData : ', filteredData);
     let maxtotInflAmnt = 0;
     let maxinflAmnt = 0;
     let maxsumFlow = 0;
@@ -65,7 +66,7 @@ export default function FlowRateModal(props: { fcltyName: string; facilityCd: st
     let minsumFlow = parseNumber(filteredData[0]?.sumFlow);
     let minreturnAmnt = parseNumber(filteredData[0]?.returnAmnt);
     let minefflAmnt = parseNumber(filteredData[0]?.efflAmnt);
-    let mininfoRnDay = parseNumber(filteredData[0]?.infoRnDay);
+    let mininfoRnDay = parseNumber(filteredData[0]?.infoRnDay && filteredData[0]?.infoRnDay.toString().trim() !== 'x' ? filteredData[0]?.infoRnDay.toString().trim() : 0);
 
     let avgtotInflAmnt = 0;
     let avginflAmnt = 0;
@@ -80,7 +81,7 @@ export default function FlowRateModal(props: { fcltyName: string; facilityCd: st
       const sumFlow = parseNumber(item.sumFlow);
       const returnAmnt = parseNumber(item.returnAmnt);
       const efflAmnt = parseNumber(item.efflAmnt);
-      const infoRnDay = parseNumber(item.infoRnDay);
+      const infoRnDay = parseNumber(item.infoRnDay && item.infoRnDay.toString().trim() !== 'x' ? item.infoRnDay.toString().trim() : 0);
       maxtotInflAmnt = Math.max(maxtotInflAmnt, totInflAmnt);
       maxinflAmnt = Math.max(maxinflAmnt, inflAmnt);
       maxsumFlow = Math.max(maxsumFlow, sumFlow);
@@ -166,7 +167,7 @@ export default function FlowRateModal(props: { fcltyName: string; facilityCd: st
           "연계처리량(m³/일)": item.sumFlow,
           "총인반류수량(m³/일)": item.returnAmnt,
           "방류량(m³/일)": item.efflAmnt,
-          "강우량": item.infoRnDay,
+          /* "강우량(mm/일)": item.infoRnDay, */
         });
       });
     }
@@ -194,20 +195,18 @@ export default function FlowRateModal(props: { fcltyName: string; facilityCd: st
             ref={ref}
             queryClick={filterData}
           />
-          <div className="h-[370px] overflow-y-auto overflow-x-auto">
-            <div className="w-[120%]">
-              <UiTable 
-                headName="유량현황" 
-                tableData={copyYearList} 
-                headlist={upHeadListFlowRateModalYear} 
-                pageSize={0} 
-                total={0} 
-                cellClick={undefined} 
-                onPageChange={() => {}} 
-                className="h-[370px]" 
-                boldArray={[0,1,2]}
-              />
-            </div>
+          <div className="h-[370px] overflow-y-auto overflow-x-hidden">
+            <UiTable 
+              headName="유량현황" 
+              tableData={copyYearList} 
+              headlist={upHeadListFlowRateModalYear} 
+              pageSize={0} 
+              total={0} 
+              cellClick={undefined} 
+              onPageChange={() => {}} 
+              className="h-[370px]" 
+              boldArray={[0,1,2]}
+            />
           </div>
         </TabsContent>
         <TabsContent value="tab_term_summer">
@@ -220,20 +219,18 @@ export default function FlowRateModal(props: { fcltyName: string; facilityCd: st
             ref={ref}
             queryClick={filterData}
           />
-          <div className="h-[370px] overflow-y-auto overflow-x-auto">
-            <div className="w-[120%]">
-              <UiTable 
-                headName="유량현황" 
-                tableData={copyYearList} 
-                headlist={upHeadListFlowRateModalYear} 
-                pageSize={0} 
-                total={0} 
-                cellClick={undefined} 
-                onPageChange={() => {}} 
-                className="h-[370px]" 
-                boldArray={[0,1,2]}
-              />
-            </div>
+          <div className="h-[370px] overflow-y-auto overflow-x-hidden">
+            <UiTable 
+              headName="유량현황" 
+              tableData={copyYearList} 
+              headlist={upHeadListFlowRateModalYear} 
+              pageSize={0} 
+              total={0} 
+              cellClick={undefined} 
+              onPageChange={() => {}} 
+              className="h-[370px]" 
+              boldArray={[0,1,2]}
+            />
           </div>
         </TabsContent>
         <TabsContent value="tab_term_winter">
@@ -246,20 +243,18 @@ export default function FlowRateModal(props: { fcltyName: string; facilityCd: st
             ref={ref}
             queryClick={filterData}
           />
-          <div className="h-[370px] overflow-y-auto overflow-x-auto">
-            <div className="w-[120%]">
-              <UiTable 
-                headName="유량현황" 
-                tableData={copyYearList} 
-                headlist={upHeadListFlowRateModalYear} 
-                pageSize={0} 
-                total={0} 
-                cellClick={undefined} 
-                onPageChange={() => {}} 
-                className="h-[370px]" 
-                boldArray={[0,1,2]}
-              />
-            </div>
+          <div className="h-[370px] overflow-y-auto overflow-x-hidden">
+            <UiTable 
+              headName="유량현황" 
+              tableData={copyYearList} 
+              headlist={upHeadListFlowRateModalYear} 
+              pageSize={0} 
+              total={0} 
+              cellClick={undefined} 
+              onPageChange={() => {}} 
+              className="h-[370px]" 
+              boldArray={[0,1,2]}
+            />
           </div>
         </TabsContent>
         <TabsContent value="tab_term_chuncheon">  
@@ -272,20 +267,21 @@ export default function FlowRateModal(props: { fcltyName: string; facilityCd: st
             ref={ref}
             queryClick={filterData}
           />
-          <div className="h-[370px] overflow-y-auto overflow-x-auto">
-            <div className="w-[120%]">
-              <UiTable 
-                headName="유량현황" 
-                tableData={copyYearList} 
-                headlist={upHeadListFlowRateModalYear} 
-                pageSize={0} 
-                total={0} 
-                cellClick={undefined} 
-                onPageChange={() => {}} 
-                className="h-[370px]" 
-                boldArray={[0,1,2]}
-              />
-            </div>
+          <div className="h-[370px] overflow-y-auto overflow-x-hidden">
+            <UiTable 
+              headName="유량현황" 
+              tableData={copyYearList} 
+              headlist={upHeadListFlowRateModalYear} 
+              pageSize={0} 
+              total={0} 
+              cellClick={undefined} 
+              onPageChange={() => {}} 
+              className="h-[370px]" 
+              boldArray={[0,1,2]}
+            />
+          </div>
+          <div className="mt-14">
+            <span className="text-2xl font-bold text-gray-500">☞ 청천시 : 강우량이 3mm미만의 날</span>
           </div>
         </TabsContent>
         <TabsContent value="tab_term_rain">
@@ -298,10 +294,11 @@ export default function FlowRateModal(props: { fcltyName: string; facilityCd: st
             ref={ref}
             queryClick={filterData}
           />
-          <div className="h-[370px] overflow-y-auto overflow-x-auto">
-            <div className="w-[120%]">
+          <div className="h-[370px] overflow-y-auto overflow-x-hidden">
             <UiTable headName="유량현황" tableData={copyYearList} headlist={upHeadListFlowRateModalYear} pageSize={0} total={0} cellClick={undefined} onPageChange={() => {}} className="h-[370px]" boldArray={[0,1,2]}/>
-            </div>
+          </div>
+          <div className="mt-14">
+            <span className="text-2xl font-bold text-gray-500">☞ 강우량 3mm 이상만 날과 강우영향일(강우일+2일)의 날</span>
           </div>
         </TabsContent>
       </UITab>

apps/fo/app/pages/flowRate/page.tsx

@@ -49,7 +49,8 @@ export default function ProcessFacilitySearch() {
   const [fcltCpct, setFcltCpct] = useState<string>("0");
   const [fcltyName, setFcltyName] = useState<string>("");
   const [operationValue, setOperationValue] = useState<string>("0");
-  const [searchYearValue, setSearchYearValue] = useState<string>(selectSearchYear[0]?.val || "0");
+  //const [searchYearValue, setSearchYearValue] = useState<string>(selectSearchYear[0]?.val || "0");
+  const [searchYearValue, setSearchYearValue] = useState<string>("2023");
   const [widthSize, setWidthSize] = useState<string>("w-[120%]");
   const [upheadList, setUpheadList] = useState<TableUpperProps[]>(upHeadList1);
   const [resetPage, setResetPage] = useState<boolean>(false);
@@ -125,10 +126,11 @@ export default function ProcessFacilitySearch() {
   // 시도 데이터 초기화
   useEffect(() => {
     if(!isInit) {
+      console.log('searchYearValue', searchYearValue, isInit);
       initializeCommonData();
-      searchFlowRateList(1, 10, selectSearchYear[0]?.val || "0");
+      searchFlowRateList(1, 10, searchYearValue || "0");
     }
-  }, [isInit, initializeCommonData, searchFlowRateList, selectSearchYear]);
+  }, [isInit, initializeCommonData, searchFlowRateList, searchYearValue]);
   
   useEffect(() => {
     if (excelList && excelList.length > 0) {
@@ -197,7 +199,7 @@ export default function ProcessFacilitySearch() {
       {selectedRow !== null && (
         <UiModal
           body={<FlowRateModal fcltyName={fcltyNm} facilityCd={fcltyCd} searchYear={searchYearValue}></FlowRateModal>} 
-          bodyClass="sm:max-w-[90vw] w-[1050px] h-[700px]"
+          bodyClass="sm:max-w-[90vw] w-[1250px] h-[780px]"
           open={selectedRow !== null}
           onOpenChange={(open: boolean) => !open && closeModal()}
         />

apps/fo/app/pages/planSewage/page.tsx

@@ -70,7 +70,8 @@ export default function PlanSewage() {
   // 시설상태
   const [operationValue, setOperationValue] = useState<string>("0");
   // 조회기간
-  const [searchYear, setSearchYear] = useState<string>(selectSearchYear[0]?.val || "0");
+  //const [searchYear, setSearchYear] = useState<string>(selectSearchYear[0]?.val || "0");
+  const [searchYear, setSearchYear] = useState<string>("2023");
   
   /**
    * 페이지 함수
@@ -190,6 +191,11 @@ export default function PlanSewage() {
           <div className={widthSize}>
             <UiTable cellClick={ undefined } headName={"계획하수량 산정지표 현황"} tableData={mainList} headlist={upheadList} pageSize={10} total={total} resetPageNo={resetPage} onPageChange={handlePageChange} />
           </div>
+          <div className="mt-14">
+            <span className="text-2xl font-bold text-gray-500">☞ 여유용량 = 하수처리시설 시설용량 – 건기시 유입유량(평균)​</span><br/>
+            <span className="text-2xl font-bold text-gray-500">☞ 변동부하율 = 건기시 일최대 유량/일평균​유량(기준 최근 3개년)​</span><br/>
+            <span className="text-2xl font-bold text-gray-500">☞ 분류식화율 = 분류식지역 면적(㎢) / 처리​구역 면적합계(㎢) ×100</span><br/>
+          </div>
         </div>
       </ListDiv>
     </MainDiv>

apps/fo/app/pages/sewageOccur/modal/page.tsx

@@ -1,103 +1,34 @@
 "use client"
 import { useFoStore } from "@/app/store";
-import type { SewageOccurDetailProps } from "@/app/store/sewageOccur";
+import type { modalTableType } from "@/app/store/sewageOccur";
 import { DateMonthPicker, UiTable } from "@common/business_components/ui";
 import ListDiv from "@common/business_components/ui/list_div";
 import { Table, TableCell, TableHead, TableRow } from "@common/components/ui";
 import { useEffect, useState } from "react";
 
+
 export default function SewageOccurModal(props: { fcltyName: string; facilityCd : string; searchYear : string}) {
   // 그리드 관련
-  const {SewageOccurDetail} = useFoStore((state) => state);
+  const {SewageOccurDetail, searchSewageOccurDetailList} = useFoStore((state) => state);
   
   // searchYear 유효성 검사 및 기본값 설정
   const validSearchYear = props.searchYear && /^\d{4}$/.test(props.searchYear) ? props.searchYear : new Date().getFullYear().toString();
   
   const [startYearMonth, setStartYearMonth] = useState(validSearchYear+'01');
   const [endYearMonth, setEndYearMonth] = useState(validSearchYear+'12');
-  const [detailList, setDetailList] = useState<SewageOccurDetailProps[]>([]);
+  const [detailList, setDetailList] = useState<modalTableType[]>([]);
   const {
     upHeadListSewageOccurDetail,
     gridListSewageOccurDetail
   } = SewageOccurDetail;
 
   useEffect(() => {
-    setDetailList(gridListSewageOccurDetail);
-  }, [gridListSewageOccurDetail]);
+    searchSewageOccurDetailList(props.facilityCd, validSearchYear);
+  }, [searchSewageOccurDetailList, props.facilityCd, validSearchYear]);
 
   useEffect(() => {
-    const filteredList = gridListSewageOccurDetail.filter(item => item.msrDt.replace(/-/g, '') >= startYearMonth && item.msrDt.replace(/-/g, '') <= endYearMonth); 
-    let maxWaterUsage = 0;
-    let maxSwageChangePercent = 0;
-    let maxEstimationSewage = 0;
-
-    let minWaterUsage = filteredList[0]?.waterUsage || 0;
-    let minSwageChangePercent = filteredList[0]?.swageChangePercent || 0;
-    let minEstimationSewage = filteredList[0]?.estimationSewage || 0;
-
-    let totalWaterUsage = 0;
-    let totalSwageChangePercent = 0;
-    let totalEstimationSewage = 0;
-
-    let avgWaterUsage = 0;
-    let avgSwageChangePercent = 0;
-    let avgEstimationSewage = 0;
-
-    filteredList.forEach(item => {
-      if (item.waterUsage > maxWaterUsage) {
-        maxWaterUsage = item.waterUsage;  
-      }
-      if (item.swageChangePercent > maxSwageChangePercent) {
-        maxSwageChangePercent = item.swageChangePercent;
-      }
-      if (item.estimationSewage > maxEstimationSewage) {
-        maxEstimationSewage = item.estimationSewage;
-      }
-
-      if (item.waterUsage < minWaterUsage) {
-        minWaterUsage = item.waterUsage;
-      }
-      if (item.swageChangePercent < minSwageChangePercent) {
-        minSwageChangePercent = item.swageChangePercent;
-      }
-      if (item.estimationSewage < minEstimationSewage) {
-        minEstimationSewage = item.estimationSewage;
-      } 
-
-      totalWaterUsage += item.waterUsage;
-      totalSwageChangePercent += item.swageChangePercent;
-      totalEstimationSewage += item.estimationSewage;
-    });
-
-    avgWaterUsage = totalWaterUsage?totalWaterUsage / filteredList.length:0;
-    avgSwageChangePercent = totalSwageChangePercent?totalSwageChangePercent / filteredList.length:0;
-    avgEstimationSewage = totalEstimationSewage?totalEstimationSewage / filteredList.length:0;
-
-    const newData = [
-      {
-        msrDt: '평균',
-        waterUsage: Math.round(avgWaterUsage * 100) / 100,
-        swageChangePercent: Math.round(avgSwageChangePercent * 100) / 100,
-        estimationSewage: Math.round(avgEstimationSewage * 100) / 100
-      },
-      {
-        msrDt: '최대',
-        waterUsage: maxWaterUsage,
-        swageChangePercent: maxSwageChangePercent,
-        estimationSewage: maxEstimationSewage
-      },
-      {
-        msrDt: '최소',
-        waterUsage: minWaterUsage,
-        swageChangePercent: minSwageChangePercent,
-        estimationSewage: minEstimationSewage
-      },
-      ...filteredList
-    ]
-    setDetailList(newData);
-
-
-  }, [startYearMonth, endYearMonth, gridListSewageOccurDetail]);
+    setDetailList(gridListSewageOccurDetail);
+  }, [gridListSewageOccurDetail]);
 
   return (
     <>

apps/fo/app/pages/sewageOccur/page.tsx

@@ -18,7 +18,8 @@ export default function PlanSewage() {
     SewageOccur: { sewageOccurList: [], sewageOccurCount: 0, excelList: [], upHeadList1: [], upHeadList2: [], upHeadList3: [] },
     SewageOccurSearch: { labelArray: [] },
     initializeCommonData: () => {},
-    searchSewageOccurList: () => {}
+    searchSewageOccurList: () => {},
+    calculateModalDataForAllFacilities: async () => []
   };
   
   const {
@@ -83,7 +84,8 @@ export default function PlanSewage() {
   // 시설상태
   const [operationValue, setOperationValue] = useState<string>("0");
   // 조회기간
-  const [searchYear, setSearchYear] = useState<string>(selectSearchYear[0]?.val || "0");
+  // const [searchYear, setSearchYear] = useState<string>(selectSearchYear[0]?.val || "0");
+  const [searchYear, setSearchYear] = useState<string>("2023");
 
   /**
    * 페이지 함수
@@ -126,9 +128,9 @@ export default function PlanSewage() {
   useEffect(() => {
     if (!isInit) {
       initializeCommonData();
-      searchSewageOccurList(1, 10, selectSearchYear[0]?.val || "0");
+      searchSewageOccurList(1, 10, searchYear || "0");
     }
-  }, [isInit, initializeCommonData, searchSewageOccurList, selectSearchYear]);
+  }, [isInit, initializeCommonData, searchSewageOccurList, searchYear]);
 
   useEffect(() => {
     if (excelList && excelList.length > 0) {
@@ -224,7 +226,11 @@ export default function PlanSewage() {
       </ContentsDiv>
       {selectedRow !== null && (
         <UiModal
-          body={<SewageOccurModal fcltyName={fcltyNm} facilityCd={fcltyCd} searchYear={searchYear}></SewageOccurModal>}
+          body={<SewageOccurModal 
+            fcltyName={fcltyNm} 
+            facilityCd={fcltyCd} 
+            searchYear={searchYear}
+          />}
           bodyClass="sm:max-w-[90vw] w-[1000px] h-[770px]"
           open={selectedRow !== null}
           onOpenChange={(open) => !open && closeModal()}

apps/fo/app/pages/underWaterInput/modal/page.tsx

@@ -1,6 +1,6 @@
 "use client"
 import { useFoStore } from "@/app/store";
-import type { UnderWaterInputModalProps } from "@/app/store/underWaterInput";
+import type { UnderWaterInputModalProps } from "@/app/store/underWaterInput/types";
 import { DateMonthPicker, UITab, UiTable } from "@common/business_components/ui";
 import ListDiv from "@common/business_components/ui/list_div";
 import { Table, TableCell, TableHead, TableRow, TabsContent } from "@common/components/ui";
@@ -19,7 +19,7 @@ const tabList1 = [
 
 export default function UnderWaterInputModal({fcltyName='', searchYear=new Date().getFullYear().toString()} : ModalProps) {
   // 그리드 관련
-  const {UnderWaterDetail} = useFoStore((state) => state);
+  const {UnderWaterDetail, unserWaterModal} = useFoStore((state) => state);
   
   const [startYmDate, setStartYmDate] = useState<string>(searchYear+'01');
   const [endYmDate, setEndYmDate] = useState<string>(searchYear+'12');
@@ -115,7 +115,10 @@ export default function UnderWaterInputModal({fcltyName='', searchYear=new Date(
         setPrevEndYmDate(searchYear+'12');
     }
   }, [searchYear, tabTerm]);
-
+  useEffect(()=>{
+    console.log(fcltyName, searchYear);
+    unserWaterModal(fcltyName, searchYear);
+  }, [])
   useEffect(() => {
     if(endYmDate < startYmDate) {
       alert('종료일이 시작일보다 작습니다.')

apps/fo/app/pages/underWaterInput/page.tsx

@@ -5,7 +5,7 @@ import { ContentsDiv, downloadExcel, MainDiv, SearchBaseForm, SearchInput, Selec
 import ListDiv from "@common/business_components/ui/list_div";
 import { useCallback, useEffect, useRef, useState } from "react";
 import UnderWaterInputModal from "./modal/page";
-import type { UnderWaterProps } from "@/app/store/underWaterInput";
+import type { UnderWaterProps } from "@/app/store/underWaterInput/types";
 
 export default function UnderWaterInput() {
   const {Common
@@ -82,7 +82,8 @@ export default function UnderWaterInput() {
   // 시설상태
   const [operationValue, setOperationValue] = useState<string>("0");
   // 조회기간
-  const [searchYear, setSearchYear] = useState<string>(selectSearchYear[0]?.val || "0");
+  //const [searchYear, setSearchYear] = useState<string>(selectSearchYear[0]?.val || "0");
+  const [searchYear, setSearchYear] = useState<string>("2023");
 
   /**
    * 페이지 함수
@@ -114,7 +115,7 @@ export default function UnderWaterInput() {
   // 셀 클릭 시 모달 표시
   const cellClick = (index: number) => {
     if (underWater[index]) {
-      setFcltyNm(underWater[index].bscFctNm);
+      setFcltyNm(underWater[index].bscFctCd);
       setSelectedRow(index); // 클릭한 행의 index 저장
     }
   };