Merge remote-tracking branch 'origin/main' into iipbs/sn/dev

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/wr/.env.production

@@ -1,17 +1,39 @@
+# NEXT_PUBLIC_SITE_ID = WR
+# NEXT_PUBLIC_PORT = 3000
+# NEXT_PUBLIC_PROXY_HOST = http://wr.hasuon.or.kr
+# NEXT_PUBLIC_SERVER_API_URL = http://apigateway.iipbs-dev.svc.cluster.local:8000/api/v1
+# NEXT_PUBLIC_FO_SERVER_API_URL = http://apigateway.iipbs-dev.svc.cluster.local:8000/operation-service/api/v1
+# NEXT_PUBLIC_CS_SERVER_API_URL = http://apigateway.iipbs-dev.svc.cluster.local:8000
+# NEXT_PUBLIC_CS_TUS_UPLOAD = /attach-service/api/v1/tus/upload
+# NEXT_PUBLIC_GEOSERVER_URL = http://172.29.143.87:8080/geoserver
+# NEXT_PUBLIC_LX_GEOSERVER_URL = http://172.29.143.87:8080/geoserver_swl
+# NEXT_PUBLIC_CLAIM_NAME = Authorization
+# NEXT_PUBLIC_AUTH_USER_ID = token-id
+# NEXT_PUBLIC_ACCESS_TOKEN = access-token
+# NEXT_PUBLIC_REFRESH_TOKEN = refresh-token
+
+# NEXT_PUBLIC_SEWERAGE_API_URL = http://apigateway.iipbs-dev.svc.cluster.local:8000/sewerage-service/api
+
+
+
+
+
+
+
+
 NEXT_PUBLIC_SITE_ID = WR
-NEXT_PUBLIC_PORT = 3000
-NEXT_PUBLIC_PROXY_HOST = http://wr.hasuon.or.kr
-NEXT_PUBLIC_SERVER_API_URL = http://apigateway.iipbs-dev.svc.cluster.local:8000/api/v1
-NEXT_PUBLIC_FO_SERVER_API_URL = http://apigateway.iipbs-dev.svc.cluster.local:8000/operation-service/api/v1
-NEXT_PUBLIC_CS_SERVER_API_URL = http://apigateway.iipbs-dev.svc.cluster.local:8000
+NEXT_PUBLIC_PORT = 11301
+NEXT_PUBLIC_PROXY_HOST = http://con.mind-one.co.kr:11301
+# NEXT_PUBLIC_SERVER_API_URL = http://dev.onasys.co.kr:8000
+NEXT_PUBLIC_SERVER_API_URL = http://con.mind-one.co.kr:11080/api/v1
+NEXT_PUBLIC_FO_SERVER_API_URL = http://con.mind-one.co.kr:11082/api/v1
+NEXT_PUBLIC_CS_SERVER_API_URL = http://dev.onasys.co.kr:8000
 NEXT_PUBLIC_CS_TUS_UPLOAD = /attach-service/api/v1/tus/upload
-NEXT_PUBLIC_GEOSERVER_URL = http://172.29.143.87:8080/geoserver
-NEXT_PUBLIC_LX_GEOSERVER_URL = http://172.29.143.87:8080/geoserver_swl
+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_CLAIM_NAME = Authorization
 NEXT_PUBLIC_AUTH_USER_ID = token-id
 NEXT_PUBLIC_ACCESS_TOKEN = access-token
 NEXT_PUBLIC_REFRESH_TOKEN = refresh-token
 
-NEXT_PUBLIC_SEWERAGE_API_URL = http://apigateway.iipbs-dev.svc.cluster.local:8000/sewerage-service/api
-
-
+NEXT_PUBLIC_SEWERAGE_API_URL=http://con.mind-one.co.kr:11083/sewerage-service/api   # 개발 서버 API

apps/wr/app/map/newWindowPopup.tsx

@@ -7,12 +7,14 @@ import type { customRainBdst } from "@/app/store/ruseFcltMng/fcltReg/rainReg";
 import type { customRswtBdst } from "@/app/store/ruseFcltMng/fcltReg/rswtReg";
 import type { WaterReuseFacility } from "@/app/store/ruseFcltMng/fcltSttn/pbnstSttn/type";
 import { fetchType, getFetch, postFectch } from "@/components/lib/api";
-import { tableData } from "@/components/lib/func/commom";
+import { formatPhoneNumber, tableData } from "@/components/lib/func/commom";
 import { PbnstSttnModal } from "@/components/ui/modal/sttn/pbnstSttnModal/pbnstSttnModal";
 import SttnDetailModal from "@/components/ui/modal/sttn/sttnDetailModal/sttnDetailModal";
 import { Title, UITab, UiTable } from '@common/business_components';
 import { useGisContext } from "@common/business_components/ui/map/Gis";
+import type { DemandCompType } from '@common/business_components/ui/sdmInsertForm/form';
 import { HeadMakeColSpan } from "@common/business_components/ui/table/HeadMakeColSpan";
+import moment from 'moment';
 import React, { useCallback, useEffect, useState } from 'react';
 
 interface NewWindowPopupProps {
@@ -74,7 +76,7 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
 
   // 온배수시설 변수
   const { htdflSttn, htdflSttnSearch, initHtdfl } = useWrStore((state) => state);
-  const { htdflSttnRes,htdflSttnResCount } = htdflSttn;
+  const { htdflSttnRes, htdflSttnResCount } = htdflSttn;
   const [htdflTable, setHtdflTable] = useState<customHtdflBdst[]>();
   const [htdflDetailModal, setHtdflDetailModal] = useState<{ isOpen: boolean, data: customHtdflBdst | undefined }>({ data: undefined, isOpen: false });
   const [htdflPage, setHtdflPage] = useState(1)
@@ -92,11 +94,31 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
   }>({ data: undefined });
   const [hasuTable, setHasuTable] = useState<pubHasuType[]>();
   const [hasuPage, setHasuPage] = useState<number>(1);
+
+  // 수요처관리 변수
+  const {
+    coSttn,
+    coSttnInit,
+    coSttnSearch,
+    // getDemandCompList,
+    // regDemandCompany,
+    // updateDemandCompany,
+    // coSttnTxtSearch,
+    // demandCompList,
+  } = useWrStore((state) => state);
+  const [mngTable, setMngTable] = useState<DemandCompType[]>();
+  const [mngPage, setMngPage] = useState(1);
+  const { coSttnRes, coSttnResCount, coSttHeadList } = coSttn;
+  const [isDmdModal, setIsDmdModal] = useState<{
+    isMoal: boolean;
+    data: any | undefined;
+  }>({ isMoal: false, data: undefined});
+  const [mngList, setMngList] = useState<DemandCompType[]>(coSttnRes || []);
   ///////////////////////////////////////////// 피쳐데이터 선택 시 각 시설별 데이터 처리 ///////////////////////////////////////////////
   const getSelectedLayers = () => {
     let result = null;
     const layers = gisMap ? gisMap.getLayers().getArray().filter((l: any) => l.getVisible()) : []; // gisMap이 null인지 확인 후 레이어 가져오기
-    let featureLayer: { get: (key: string) => any } = {get:()=> null};
+    let featureLayer: { get: (key: string) => any } = { get: () => null };
     layers.forEach((layer: any) => {
       const source = layer.getSource();
       if (source && source.hasFeature && featureData
@@ -122,13 +144,13 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
       const rainRes = await postFectch(`/prcsFclt/ruseInfo/1/10/A/0/0/1/SW/${featureCd}`, [data], fetchType.COMMON)
       setHasuList(
         rainRes.data.map((item: any) => {
-        return {
-          ...item,
-          fctCpc: Number(item.fctCpc) || 0,
-          ruse: item.ruse === false ? "N" : "Y",
-        };
-      })
-      ) 
+          return {
+            ...item,
+            fctCpc: Number(item.fctCpc) || 0,
+            ruse: item.ruse === false ? "N" : "Y",
+          };
+        })
+      )
     } catch (error) {
       console.error("Error fetching data:", error);
     }
@@ -138,56 +160,63 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
       const res = await getFetch(fetchType.WR, `/reuseFc/rainyInfoList/1/20/0/${featureCd}`)
       setRainList(res)
     }
-    else if(layerNm == '중수도시설'){
-      const res = await getFetch(fetchType.WR,`/reuseFc/waterreuseFc/1/20/0/${featureCd}`)
+    else if (layerNm == '중수도시설') {
+      const res = await getFetch(fetchType.WR, `/reuseFc/waterreuseFc/1/20/0/${featureCd}`)
       setRswtrList(res)
     }
-    else{
+    else if(layerNm =='수요처'){
+      const res = await getFetch(fetchType.WR, `/reuseFc/request/1/20/0/${featureCd}`)
+      setMngList(res)
+    }
+    else {
       const res = await getFetch(fetchType.WR, `/drain/facilityList/1/20/0/${featureCd}`)
       setHtdflList(res)
       setHtdflDetailModal({ isOpen: true, data: htdflSttnRes[0] });
     }
   }
   // 상세 목록 데이터 상태 처리
-  useEffect(()=>{
+  useEffect(() => {
     if (hasuList.length > 0) setIsRuseReg({ data: [hasuList[0]] });
-  },[hasuList])  
-  useEffect(()=>{
+  }, [hasuList])
+  useEffect(() => {
     if (rainList.length > 0) setRainDetailModal({ isOpen: true, data: rainList[0] });
-  },[rainList])
-  useEffect(()=>{
+  }, [rainList])
+  useEffect(() => {
     if (rswtrList.length > 0) setRswtrDetailModal({ isOpen: true, data: rswtrList[0] });
-  },[rswtrList])
-  useEffect(()=>{
+  }, [rswtrList])
+  useEffect(() => {
     if (htdflList.length > 0) setHtdflDetailModal({ isOpen: true, data: htdflList[0] });
-  },[htdflList])
+  }, [htdflList])
+  useEffect(() => {
+    if(mngList.length > 0) setIsDmdModal({ isMoal: true, data: [mngList[0]] });
+  },[mngList])
 
   const layerId = getSelectedLayers();
-    if (featureData && typeof featureData.getProperties === "function") {
-      const selectedVal = featureData.getProperties();
-      let featureCd = layerId == '하수재이용시설' ? selectedVal?.swtrmt_fclt_cd : layerId == '빗물이용시설' || layerId == '중수도시설' || layerId == '온배수시설' ? selectedVal?.bdst_nm : layerId == '하수처리시설' ? selectedVal?.swtrmt_fclt_nm : null;
-      if (featureCd && featureCd !== fcltPk) {
-        if (layerId == '하수재이용시설') {
-          featureCd = selectedVal?.swtrmt_fclt_cd;
-          setFcltPk(featureCd); // 현재 호출된 featureCd 저장
-          setActiveTab(featureCd)
-          fetchpbnstDetail(featureCd); // 상세정보 
-        }
-        else if (layerId == '하수처리시설') {
-          featureCd = selectedVal?.swtrmt_fclt_nm;
-          setFcltPk(featureCd); // 현재 호출된 featureCd 저장
-          fetchHasuDetail(featureCd, selectedVal?.swtrmt_fclt_cd);
-        }
-        else {
-          featureCd = selectedVal?.bdst_nm;
-          setFcltPk(featureCd)
-          if (layerId) {
-            detainSttn(featureCd, layerId);
-          }
-        }
-        setViewMode("detail")
+  if (featureData && typeof featureData.getProperties === "function") {
+    const selectedVal = featureData.getProperties();
+    let featureCd = layerId == '하수재이용시설' ? selectedVal?.swtrmt_fclt_cd : layerId == '빗물이용시설' || layerId == '중수도시설' || layerId == '온배수시설' || layerId == '수요처' ? selectedVal?.bdst_nm : layerId == '하수처리시설' ? selectedVal?.swtrmt_fclt_nm : null;
+    if (featureCd && featureCd !== fcltPk) {
+      if (layerId == '하수재이용시설') {
+        featureCd = selectedVal?.swtrmt_fclt_cd;
+        setFcltPk(featureCd); // 현재 호출된 featureCd 저장
+        setActiveTab(featureCd)
+        fetchpbnstDetail(featureCd); // 상세정보 
       }
-    } else if (layerId === null && seletectedLayerNm) { setViewMode("list") }
+      else if (layerId == '하수처리시설') {
+        featureCd = selectedVal?.swtrmt_fclt_nm;
+        setFcltPk(featureCd); // 현재 호출된 featureCd 저장
+        fetchHasuDetail(featureCd, selectedVal?.swtrmt_fclt_cd);
+      }
+      else {
+        featureCd = selectedVal?.bdst_nm;
+        setFcltPk(featureCd)
+        if (layerId) {
+          detainSttn(featureCd, layerId);
+        }
+      }
+      setViewMode("detail")
+    }
+  } else if (layerId === null && seletectedLayerNm) { setViewMode("list") }
   ///////////////////////////////////////////// 피쳐데이터 선택 시 각 시설별 데이터 처리 ///////////////////////////////////////////////
 
   ///////////////////////////////////////////// 하수재이용시설 //////////////////////////////////////////////////
@@ -210,7 +239,7 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
       getFlcts()
     }
   }, [seletectedLayerNm, pbnstSttn.isInit, getFlcts]);
-  useEffect(()=>{
+  useEffect(() => {
     pbnSttnInit("1", "15", {
       partValue: "A",
       sidoValue: '0',
@@ -258,7 +287,7 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
       String(new Date().getFullYear()), fclts
     );
   }, [fclts, pbnstSttnSearch]);
-// FIXME: 윤선화차장님 요구사항으로 엑셀 다운로드 삭제.
+  // FIXME: 윤선화차장님 요구사항으로 엑셀 다운로드 삭제.
   // const excelClick = useCallback(() => {
   //   // if (codeData) pbnstSttnSearch(1, "10000", codeData);
   //   excelDownload(
@@ -283,7 +312,7 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
       onClose();
     }
   }
-  
+
 
   useEffect(() => {
     if (!rainSttn.isInit) {
@@ -427,7 +456,7 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
   useEffect(() => {
     pubHasuInit(String(hasuPage), "0");
   }, [hasuPage, pubHasuInit]);
-  
+
   const hasuCellClick = (index: number | undefined) => {
     if (index !== undefined && pbnstHasuRes !== undefined) {
       onFeatureSelect(pbnstHasuRes[index]);
@@ -436,10 +465,42 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
   };
   ///////////////////////////////////////////// 하수처리 시설 //////////////////////////////////////////////////
 
+  ///////////////////////////////////////////// 수요처 관리 //////////////////////////////////////////////////
+  useEffect(() => {
+    if (!coSttn.isInit) {
+      coSttnInit("1", "13", "0");
+    }
+  }, [coSttn.isInit, coSttnInit]);
+  const coMngCellClick = (index: number | undefined) => {
+    if (index !== undefined && mngTable !== undefined) {
+      onFeatureSelect(mngTable[index]);
+      onClose();
+    }
+  };
+  useEffect(() => {
+    if (coSttnRes) {
+      if (coSttnRes?.length > 0 && code.cityCd.length > 0) {
+        const data = tableData(coSttnRes, { code });
+        const chData = data.map((item: any) => ({
+          ...item,
+          telno: formatPhoneNumber(item.telno || undefined),
+          regDt: moment(item.regDt).format("YYYY-MM-DD"),
+          dmdInfoId: `${item.dmdInfoId.slice(0, 3)}-${item.dmdInfoId.slice(3, 5)}-${item.dmdInfoId.slice(5, 10)}-${item.dmdInfoId.slice(10)}`
+        }));
+        // .filter((item: any) => item !== undefined);
+        setMngTable(chData);
+      }
+    }
+  }, [coSttnRes, code]);
+  useEffect(() => {
+    coSttnSearch(String(mngPage), "13", String(0));
+  }, [coSttnSearch, mngPage]);
+  ///////////////////////////////////////////// 수요처 관리 //////////////////////////////////////////////////
+
   // 체크된 레이어에 따른 조건부 컴포넌트 렌더링 함수
   const renderConditionalContent = () => {
     const actTabData = tabData.find((tab) => tab.id === activeTab);
-    let layerId:string | undefined | null = getSelectedLayers();
+    let layerId: string | undefined | null = getSelectedLayers();
     if (layerId === null || layerId === undefined) {
       layerId = seletectedLayerNm || '';
     }
@@ -453,10 +514,12 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
     const isRswt = layerId == '중수도시설';
     // 온배수시설
     const isHtdfl = layerId == '온배수시설';
+    // 수요처관리
+    const isReuseMng = layerId == '수요처';
     if (isPrcsFclt) {
       if (viewMode == 'list') {
         return (
-          <>
+          <div style={{ overflowY: 'auto' }}>
             <div className="flex justify-between items-center mb-4">
               <Title title="하수처리시설 현황" />
             </div>
@@ -470,11 +533,11 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
               cellClick={hasuCellClick}
               onPageChange={setHasuPage}
             />
-          </>
+          </div>
         )
       } else {
         return (
-          <>
+          <div style={{ overflowX: 'hidden' }}>
             <div className="flex justify-between items-center mb-4">
               <Title title="하수처리시설 상세정보" />
             </div>
@@ -497,7 +560,7 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
               cellClick={() => { }}
               onPageChange={() => { }}
             />
-          </>
+          </div>
         )
       }
     }
@@ -528,7 +591,7 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
       } else {
         // 재이용시설 목록
         return (
-          <>
+          <div style={{ overflowY: 'auto' }}>
             <div className="flex justify-between items-center">
               <Title title="하수재이용시설 현황" />
               {/* <div className="flex gap-2 mt-8">
@@ -550,7 +613,7 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
             >
               <HeadMakeColSpan upHeadList={pbnstSttn.pbnstSttNodeList} />
             </UiTable>
-          </>
+          </div>
         );
       }
     }
@@ -600,7 +663,7 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
       } else {
         // 중수도시설 목록
         return (
-          <>
+          <div style={{ overflowY: 'auto' }}>
             <div className="flex justify-between items-center">
               <Title title="중수도시설 현황" />
               {/* <div className="flex gap-2 mt-8">
@@ -622,7 +685,7 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
             >
               <HeadMakeColSpan upHeadList={rswtSttn.rswtSttNodeList} />
             </UiTable>
-          </>
+          </div>
         );
       }
     }
@@ -636,7 +699,7 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
       } else {
         // 온배수시설 목록
         return (
-          <>
+          <div style={{ overflowY: 'auto' }}>
             <div className="flex justify-between items-center">
               <Title title="온배수시설 현황" />
               {/* <div className="flex gap-2 mt-8">
@@ -658,17 +721,71 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
             >
               <HeadMakeColSpan upHeadList={htdflSttn.htdflSttNodeList} />
             </UiTable>
-          </>
+          </div>
         );
       }
     }
-
+    if (isReuseMng) {
+      if (viewMode == 'detail') {
+          return (
+            <div style={{ overflowX: 'hidden' }}>
+              <div className="flex justify-between items-center mb-4">
+                <Title title="수요처 상세정보" />
+              </div>
+              {/* 높이 조정 */}
+              <UiTable
+                tableData={isDmdModal?.data || []}
+                headlist={coSttHeadList.slice(0, 3)}
+                pageSize={1}
+                total={0}
+                headName={"위치정보"}
+                cellClick={() => { }}
+                onPageChange={() => { }}
+              />
+              <UiTable
+                tableData={isDmdModal?.data || []}
+                headlist={coSttHeadList.slice(3)}
+                pageSize={1}
+                total={0}
+                headName={"기본정보"}
+                cellClick={() => { }}
+                onPageChange={() => { }}
+              />
+            </div>
+          )
+      } else if(viewMode == 'list') {
+      return ( <div>
+          <div className="flex justify-between items-center">
+              <Title title="수요처 현황" />
+            </div>
+        <UiTable
+          headName={[]}
+          tableData={mngTable || []}
+          headlist={coSttHeadList}
+          pageSize={20}
+          total={coSttnResCount + 10 || 0}
+          cellClick={(index: number | undefined) => {
+            coMngCellClick(index);
+            // setUpdateData(coSttnRes[index as number]);
+          }}
+          onPageChange={(page) => {
+            setMngPage(page);
+          }}
+        ></UiTable></div>)
+      }
+    }
     return null; // 조건에 맞는 콘텐츠가 없을 경우
   };
 
   return (
     viewMode == 'nothing' ? <></> :
-      <NewWindowPortal onClose={memoizedOnClose} title="시설 상세 정보">
+      <NewWindowPortal
+        onClose={memoizedOnClose}
+        title="시설 상세 정보"
+        width={viewMode == 'list' ? window.screen.availWidth : 1100}
+        height={viewMode == 'list' ? window.screen.availHeight : layerId == '하수처리시설' && viewMode == 'detail' ? 450 : 900}
+        scrollbars='yes'
+        resizable='no'>
         {/* 체크된 레이어에 따른 조건부 렌더링 */}
         {renderConditionalContent()}
       </NewWindowPortal>

apps/wr/app/map/newWindowPortal.tsx

@@ -27,9 +27,13 @@ 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 = "Detail" }) => {
+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);
@@ -46,13 +50,23 @@ const NewWindowPortal: React.FC<NewWindowPortalProps> = ({ children, onClose, ti
   useEffect(() => {
     // 이미 창이 열려있으면 새로 열지 않음
     if (newWindowRef.current && !newWindowRef.current.closed) return;
+    // 브라우저 화면 정보
+    const screenLeft = window.screenLeft ?? window.screenX;
+    const screenTop = window.screenTop ?? window.screenY;
+    const screenWidth = window.innerWidth ?? document.documentElement.clientWidth;
+    const screenHeight = window.innerHeight ?? document.documentElement.clientHeight;
+
+    // 중앙 위치 계산
+    const left = screenLeft + (screenWidth - width) / 2;
+    const top = screenTop + (screenHeight - height) / 2;
 
     // 1. 새 창을 열고 참조를 저장합니다.
-    newWindowRef.current = window.open('', title, 'width=900,height=800,resizable=yes,scrollbars=yes');
-    
+    const popupOptions = `width=${width},height=${height},left=${left}, top=${top}, 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);
@@ -60,7 +74,6 @@ const NewWindowPortal: React.FC<NewWindowPortalProps> = ({ children, onClose, ti
 
       // 3. 메인 창의 스타일을 새 창으로 복사합니다. (매우 중요)
       copyStyles(document, newWindowRef.current.document);
-
       // 4. 사용자가 창을 닫을 때 부모에게 알리기 위한 이벤트 리스너를 설정합니다.
       // const handleUnload = () => {
       //   onClose();

apps/wr/app/map/popup/page.tsx

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

apps/wr/app/matMng/coMat/coMatRvw/page.tsx

@@ -41,9 +41,11 @@ import toast, { Toaster } from "react-hot-toast";
 import { z } from "zod";
 
 export default function CoMatRvw() {
-  const { code, coRvw, coMatRvwInit, coMatRvwSearch, coMatRvwInqua } =
+  const { auth, code, coRvw, coMatRvwInit, coMatRvwSearch, coMatRvwInqua } =
     useWrStore((state) => state);
-  const { coMatRvwRes,coMatRvwCount } = coRvw;
+  const { coMatRvwRes, coMatRvwCount } = coRvw;
+  const { regAuthrtYn } = auth;
+
   //init, sub, match
   const initRef = useRef<boolean>(false);
   const { coRvwHeadList } = coRvw;
@@ -91,10 +93,9 @@ export default function CoMatRvw() {
   const form = useForm<z.infer<typeof DmdCoReqSchema>>({
     resolver: zodResolver(DmdCoReqSchema),
     shouldUnregister: false,
-   // defaultValues: DmdCoReqSchema.parse({})
+    // defaultValues: DmdCoReqSchema.parse({})
   });
 
-  
   const TableCellClick = (index: number) => {
     if (coMatRvwRes && coMatRvwRes[index]) {
       setSelectData(coMatRvwRes[index]);
@@ -103,23 +104,21 @@ export default function CoMatRvw() {
   };
   const useUsgCdWatch = useWatch({ control: form.control, name: "useUsgCd" });
   useEffect(() => {
-
     if (useUsgCdWatch) {
       form.setValue(
         "demandCst.usgPrcsProcs",
-        usageProcData?.find(
-          (item) => item.usage === useUsgCdWatch
-        )?.process ?? ""
+        usageProcData?.find((item) => item.usage === useUsgCdWatch)?.process ??
+          ""
       );
     }
-  }, [useUsgCdWatch, form,selectionVersion]);
+  }, [useUsgCdWatch, form, selectionVersion]);
 
   useEffect(() => {
-    if (coMatRvwRes&&coMatRvwRes.length > 0) {
+    if (coMatRvwRes && coMatRvwRes.length > 0) {
       const data = coMatRvwRes?.map((item) => {
         let flag = "";
-        
-          flag = getdmdMatFlag(item?.demandMatching?.splyFcltFlg ||undefined);
+
+        flag = getdmdMatFlag(item?.demandMatching?.splyFcltFlg || undefined);
 
         return {
           ...item,
@@ -127,7 +126,7 @@ export default function CoMatRvw() {
           sggCd: item.demandCo?.sggCd,
           dmdCoNm: item.demandCo?.dmdCoNm,
           daddr: item.demandCo?.daddr,
-          telno: formatPhoneNumber(item?.demandCo?.telno||''),
+          telno: formatPhoneNumber(item?.demandCo?.telno || ""),
           dmndTmng: item?.dmndTmng,
           splyFcltFlg: flag,
         };
@@ -156,7 +155,6 @@ export default function CoMatRvw() {
 
   useEffect(() => {
     if (selectData) {
-
       try {
         DmdCoReqSchema.parse(selectData);
       } catch (e) {
@@ -164,15 +162,14 @@ export default function CoMatRvw() {
           console.log(e.flatten());
         }
       }
-      form.reset( selectData);
-        setSelectionVersion((v) => v + 1); // 강제로 바뀌었다고 알리기
+      form.reset(selectData);
+      setSelectionVersion((v) => v + 1); // 강제로 바뀌었다고 알리기
     }
   }, [selectData, form]);
   return (
     <>
       <ContentsDiv>
         <div className="grid grid-cols-4 gap-4">
-
           <div className="col-span-4">
             <Title title={"수요매칭검토"} />
             <SearchDiv>
@@ -195,7 +192,7 @@ export default function CoMatRvw() {
                   <div className="col-span-7 w-full">
                     <div className="flex flex-row items-center">
                       <Label className="text-xl text-gray-600 mx-6">
-                      수요신청년도
+                        수요신청년도
                       </Label>
                       <SelectBox
                         className="h-full w-32 text-2xl"
@@ -248,7 +245,10 @@ export default function CoMatRvw() {
                             if (String(objSearch.city).length > 0) {
                               con = String(objSearch.city);
                             }
-                            if (String(objSearch.sgg).length > 0 && String(objSearch.sgg) !== "0") {
+                            if (
+                              String(objSearch.sgg).length > 0 &&
+                              String(objSearch.sgg) !== "0"
+                            ) {
                               con = String(objSearch.sgg);
                             }
                             getSearch(fromNum, toNum, con, dmdCoNm);
@@ -279,403 +279,410 @@ export default function CoMatRvw() {
                     TableCellClick(index);
                   }
                 }}
-                onPageChange={(val) => {setPageNatiion(val)}}
+                onPageChange={(val) => {
+                  setPageNatiion(val);
+                }}
               ></UiTable>
             </ListDiv>
             <hr />
             {/* <ScrollArea className="h-[49vh]"> */}
-              <ListDiv>
-                <h3 className="mt-4 ml-2 text-2xl font-medium text-label">
-                  수요신청 상세현황
-                </h3>
-                <Form {...form}>
-                  <div className="grid grid-cols-12 gap-4 ml-4 mr-4">
-                    <div className="col-span-3 mt-4">
-                      <FormField
-                        control={form.control}
-                        name="dmndTmng"
-                        render={({ field }) => (
-                          <FormUi label="요구시기">
-                            <Input
-                              placeholder=""
-                              type="text"
-                              onChange={(e) => {
-                                field.onChange(String(e.target.value));
-                              }}
-                              value={
-                                moment(field.value).format("YYYY-MM-DD") ?? ""
-                              }
-                              readOnly
-                            />
-                          </FormUi>
-                        )}
-                      />
-                    </div>
-                    <div className="col-span-3 mt-4">
-                      <FormField
-                        control={form.control}
-                        name="dmndQty"
-                        render={({ field }) => (
-                          <FormUi label="요구수량(m³/일)">
-                            <Input
-                              placeholder=""
-                              type="number"
-                              step="0.1"
-                              onChange={(e) => {
-                                field.onChange(Number(e.target.value));
-                              }}
-                              value={field.value ?? 0}
-                              readOnly
-                            />
-                          </FormUi>
-                        )}
-                      />
-                    </div>
-                    <div className="col-span-3 mt-4">
-                      <FormField
-                        control={form.control}
-                        name="useUsgCd"
-                        render={({ field }) => (
-                          <FormUi label="사용용도">
-                            <Input
-                              placeholder=""
-                              type="text"
-                              step="0.1"
-                              onChange={(e) => {
-                                field.onChange(e.target.value);
-                              }}
-                              value={field.value ?? ""}
-                              readOnly
-                            />
-                          </FormUi>
-                        )}
-                      />
-                    </div>
-                    <div className="col-span-3 mt-4">
-                      <FormField
-                        control={form.control}
-                        name="wntUntprc"
-                        render={({ field }) => (
-                          <FormUi label="희망단가(원/m3)">
-                            <Input
-                              placeholder=""
-                              type="number"
-                              step="0.1"
-                              onChange={(e) => {
-                                field.onChange(Number(e.target.value));
-                              }}
-                              value={field.value ?? 0}
-                              readOnly
-                            />
-                          </FormUi>
-                        )}
-                      />
-                    </div>
-                    <div className="col-span-12 w-full">
-                      <h1 className={formH1Class}>요구수질</h1>
-                    </div>
-                    <div className="col-span-3 mt-4">
-                      <FormField
-                        control={form.control}
-                        name="grssClfg"
-                        render={({ field }) => (
-                          <FormUi label="총대장균군수 (개/100ml)">
-                            <Input
-                              placeholder=""
-                              type="number"
-                              step="0.1"
-                              onChange={(e) => {
-                                field.onChange(Number(e.target.value));
-                              }}
-                              value={field.value ?? 0}
-                              readOnly
-                            />
-                          </FormUi>
-                        )}
-                      />
-                    </div>
-                    <div className="col-span-3 mt-4">
-                      <FormField
-                        control={form.control}
-                        name="combResdch"
-                        render={({ field }) => (
-                          <FormUi label="결합잔류염소(mg/L)">
-                            <Input
-                              placeholder=""
-                              type="number"
-                              step="0.1"
-                              onChange={(e) => {
-                                field.onChange(Number(e.target.value));
-                              }}
-                              value={field.value ?? 0}
-                              readOnly
-                            />
-                          </FormUi>
-                        )}
-                      />
-                    </div>
-                    <div className="col-span-3 mt-4">
-                      <FormField
-                        control={form.control}
-                        name="trbt"
-                        render={({ field }) => (
-                          <FormUi label="탁도(NTU)">
-                            <Input
-                              placeholder=""
-                              type="number"
-                              step="0.1"
-                              onChange={(e) => {
-                                field.onChange(Number(e.target.value));
-                              }}
-                              value={field.value ?? 0}
-                              readOnly
-                            />
-                          </FormUi>
-                        )}
-                      />
-                    </div>
-                    <div className="col-span-3 mt-4">
-                      <FormField
-                        control={form.control}
-                        name="blgcOxygDmndQnt"
-                        render={({ field }) => (
-                          <FormUi label="생물학적 산소요구량(BOD)(mg/L)">
-                            <Input
-                              placeholder=""
-                              type="number"
-                              step="0.1"
-                              onChange={(e) => {
-                                field.onChange(Number(e.target.value));
-                              }}
-                              value={field.value ?? 0}
-                              readOnly
-                            />
-                          </FormUi>
-                        )}
-                      />
-                    </div>
-                    <div className="col-span-3 mt-4">
-                      <FormField
-                        control={form.control}
-                        name="smll"
-                        render={({ field }) => (
-                          <FormUi label="냄새">
-                            <Input
-                              placeholder=""
-                              type="number"
-                              step="0.1"
-                              onChange={(e) => {
-                                field.onChange(Number(e.target.value));
-                              }}
-                              value={field.value ?? 0}
-                              readOnly
-                            />
-                          </FormUi>
-                        )}
-                      />
-                    </div>
-                    <div className="col-span-3 mt-4">
-                      <FormField
-                        control={form.control}
-                        name="crmty"
-                        render={({ field }) => (
-                          <FormUi label="색도(도)">
-                            <Input
-                              placeholder=""
-                              type="number"
-                              step="0.1"
-                              onChange={(e) => {
-                                field.onChange(Number(e.target.value));
-                              }}
-                              value={field.value ?? 0}
-                              readOnly
-                            />
-                          </FormUi>
-                        )}
-                      />
-                    </div>
-                    <div className="col-span-3 mt-4">
-                      <FormField
-                        control={form.control}
-                        name="tn"
-                        render={({ field }) => (
-                          <FormUi label="총질소 (T-N)(mg/L)">
-                            <Input
-                              placeholder=""
-                              type="number"
-                              step="0.1"
-                              onChange={(e) => {
-                                field.onChange(Number(e.target.value));
-                              }}
-                              value={field.value ?? 0}
-                              readOnly
-                            />
-                          </FormUi>
-                        )}
-                      />
-                    </div>
-                    <div className="col-span-3 mt-4">
-                      <FormField
-                        control={form.control}
-                        name="tph"
-                        render={({ field }) => (
-                          <FormUi label="총인(T-P)(mg/L)">
-                            <Input
-                              placeholder=""
-                              type="number"
-                              step="0.1"
-                              onChange={(e) => {
-                                field.onChange(Number(e.target.value));
-                              }}
-                              value={field.value ?? 0}
-                              readOnly
-                            />
-                          </FormUi>
-                        )}
-                      />
-                    </div>
-                    <div className="col-span-3 mt-4">
-                      <FormField
-                        control={form.control}
-                        name="ph"
-                        render={({ field }) => (
-                          <FormUi label="수소이온농도(pH)">
-                            <Input
-                              placeholder=""
-                              type="number"
-                              step="0.1"
-                              onChange={(e) => {
-                                field.onChange(Number(e.target.value));
-                              }}
-                              value={field.value ?? 0}
-                              readOnly
-                            />
-                          </FormUi>
-                        )}
-                      />
-                    </div>
-                    <div className="col-span-3 mt-4">
-                      <FormField
-                        control={form.control}
-                        name="clIonQnt"
-                        render={({ field }) => (
-                          <FormUi label="염화물(mgCL/L)">
-                            <Input
-                              placeholder=""
-                              type="number"
-                              step="0.1"
-                              onChange={(e) => {
-                                field.onChange(Number(e.target.value));
-                              }}
-                              value={field.value ?? 0}
-                              readOnly
-                            />
-                          </FormUi>
-                        )}
-                      />
-                    </div>
-                    <div className="col-span-3 mt-4">
-                      <FormField
-                        control={form.control}
-                        name="cdtnv"
-                        render={({ field }) => (
-                          <FormUi label="전기전도도(㎲/cm)">
-                            <Input
-                              placeholder=""
-                              type="number"
-                              onChange={(e) => {
-                                field.onChange(Number(e.target.value));
-                              }}
-                              value={field.value ?? 0}
-                              readOnly
-                            />
-                          </FormUi>
-                        )}
-                      />
-                    </div>
-                    <div className="col-span-3 mt-4">
-                      <FormField
-                        control={form.control}
-                        name="rmrk"
-                        render={({ field }) => (
-                          <FormUi label="비고">
-                            <Input
-                              placeholder=""
-                              type="text"
-                              onChange={(e) => {
-                                field.onChange(e.target.value);
-                              }}
-                              value={field.value ?? ""}
-                              readOnly
-                            />
-                          </FormUi>
-                        )}
-                      />
-                    </div>
-                    <div className="col-span-12 w-full">
-                      <h1 className={formH1Class}>공급처 후보지</h1>
-                    </div>
-                    <div className="col-span-4 mt-4">
-                      <FormField
-                        control={form.control}
-                        name={`demandMatching.splyCndtList.${0}`}
-                        render={({ field }) => (
-                          <FormUi label="후보지1">
-                            <Input
-                              placeholder=""
-                              type="text"
-                              onChange={(e) => {
-                                field.onChange(String(e.target.value));
-                              }}
-                              value={field.value ?? ""}
-                              readOnly
-                            />
-                          </FormUi>
-                        )}
-                      />
-                    </div>
-                    <div className="col-span-4 mt-4">
-                      <FormField
-                        control={form.control}
-                        name={`demandMatching.splyCndtList.${1}`}
-                        render={({ field }) => (
-                          <FormUi label="후보지2">
-                            <Input
-                              placeholder=""
-                              type="text"
-                              onChange={(e) => {
-                                field.onChange(e.target.value);
-                              }}
-                              value={field.value ?? ""}
-                              readOnly
-                            />
-                          </FormUi>
-                        )}
-                      />
-                    </div>
-                    <div className="col-span-4 mt-4">
-                      <FormField
-                        control={form.control}
-                        name={`demandMatching.splyCndtList.${2}`}
-                        render={({ field }) => (
-                          <FormUi label="후보지3">
-                            <Input
-                              placeholder=""
-                              type="text"
-                              onChange={(e) => {
-                                field.onChange(e.target.value);
-                              }}
-                              value={field.value ?? ""}
-                              readOnly
-                            />
-                          </FormUi>
-                        )}
-                      />
-                    </div>
+            <ListDiv>
+              <h3 className="mt-4 ml-2 text-2xl font-medium text-label">
+                수요신청 상세현황
+              </h3>
+              <Form {...form}>
+                <div className="grid grid-cols-12 gap-4 ml-4 mr-4">
+                  <div className="col-span-3 mt-4">
+                    <FormField
+                      control={form.control}
+                      name="dmndTmng"
+                      render={({ field }) => (
+                        <FormUi label="요구시기">
+                          <Input
+                            placeholder=""
+                            type="text"
+                            onChange={(e) => {
+                              field.onChange(String(e.target.value));
+                            }}
+                            value={
+                              moment(field.value).format("YYYY-MM-DD") ?? ""
+                            }
+                            readOnly
+                          />
+                        </FormUi>
+                      )}
+                    />
                   </div>
-                </Form>
-                <ConCostForm form={form} type={"mat"} selectionVersion={selectionVersion} />
-              </ListDiv>
+                  <div className="col-span-3 mt-4">
+                    <FormField
+                      control={form.control}
+                      name="dmndQty"
+                      render={({ field }) => (
+                        <FormUi label="요구수량(m³/일)">
+                          <Input
+                            placeholder=""
+                            type="number"
+                            step="0.1"
+                            onChange={(e) => {
+                              field.onChange(Number(e.target.value));
+                            }}
+                            value={field.value ?? 0}
+                            readOnly
+                          />
+                        </FormUi>
+                      )}
+                    />
+                  </div>
+                  <div className="col-span-3 mt-4">
+                    <FormField
+                      control={form.control}
+                      name="useUsgCd"
+                      render={({ field }) => (
+                        <FormUi label="사용용도">
+                          <Input
+                            placeholder=""
+                            type="text"
+                            step="0.1"
+                            onChange={(e) => {
+                              field.onChange(e.target.value);
+                            }}
+                            value={field.value ?? ""}
+                            readOnly
+                          />
+                        </FormUi>
+                      )}
+                    />
+                  </div>
+                  <div className="col-span-3 mt-4">
+                    <FormField
+                      control={form.control}
+                      name="wntUntprc"
+                      render={({ field }) => (
+                        <FormUi label="희망단가(원/m3)">
+                          <Input
+                            placeholder=""
+                            type="number"
+                            step="0.1"
+                            onChange={(e) => {
+                              field.onChange(Number(e.target.value));
+                            }}
+                            value={field.value ?? 0}
+                            readOnly
+                          />
+                        </FormUi>
+                      )}
+                    />
+                  </div>
+                  <div className="col-span-12 w-full">
+                    <h1 className={formH1Class}>요구수질</h1>
+                  </div>
+                  <div className="col-span-3 mt-4">
+                    <FormField
+                      control={form.control}
+                      name="grssClfg"
+                      render={({ field }) => (
+                        <FormUi label="총대장균군수 (개/100ml)">
+                          <Input
+                            placeholder=""
+                            type="number"
+                            step="0.1"
+                            onChange={(e) => {
+                              field.onChange(Number(e.target.value));
+                            }}
+                            value={field.value ?? 0}
+                            readOnly
+                          />
+                        </FormUi>
+                      )}
+                    />
+                  </div>
+                  <div className="col-span-3 mt-4">
+                    <FormField
+                      control={form.control}
+                      name="combResdch"
+                      render={({ field }) => (
+                        <FormUi label="결합잔류염소(mg/L)">
+                          <Input
+                            placeholder=""
+                            type="number"
+                            step="0.1"
+                            onChange={(e) => {
+                              field.onChange(Number(e.target.value));
+                            }}
+                            value={field.value ?? 0}
+                            readOnly
+                          />
+                        </FormUi>
+                      )}
+                    />
+                  </div>
+                  <div className="col-span-3 mt-4">
+                    <FormField
+                      control={form.control}
+                      name="trbt"
+                      render={({ field }) => (
+                        <FormUi label="탁도(NTU)">
+                          <Input
+                            placeholder=""
+                            type="number"
+                            step="0.1"
+                            onChange={(e) => {
+                              field.onChange(Number(e.target.value));
+                            }}
+                            value={field.value ?? 0}
+                            readOnly
+                          />
+                        </FormUi>
+                      )}
+                    />
+                  </div>
+                  <div className="col-span-3 mt-4">
+                    <FormField
+                      control={form.control}
+                      name="blgcOxygDmndQnt"
+                      render={({ field }) => (
+                        <FormUi label="생물학적 산소요구량(BOD)(mg/L)">
+                          <Input
+                            placeholder=""
+                            type="number"
+                            step="0.1"
+                            onChange={(e) => {
+                              field.onChange(Number(e.target.value));
+                            }}
+                            value={field.value ?? 0}
+                            readOnly
+                          />
+                        </FormUi>
+                      )}
+                    />
+                  </div>
+                  <div className="col-span-3 mt-4">
+                    <FormField
+                      control={form.control}
+                      name="smll"
+                      render={({ field }) => (
+                        <FormUi label="냄새">
+                          <Input
+                            placeholder=""
+                            type="number"
+                            step="0.1"
+                            onChange={(e) => {
+                              field.onChange(Number(e.target.value));
+                            }}
+                            value={field.value ?? 0}
+                            readOnly
+                          />
+                        </FormUi>
+                      )}
+                    />
+                  </div>
+                  <div className="col-span-3 mt-4">
+                    <FormField
+                      control={form.control}
+                      name="crmty"
+                      render={({ field }) => (
+                        <FormUi label="색도(도)">
+                          <Input
+                            placeholder=""
+                            type="number"
+                            step="0.1"
+                            onChange={(e) => {
+                              field.onChange(Number(e.target.value));
+                            }}
+                            value={field.value ?? 0}
+                            readOnly
+                          />
+                        </FormUi>
+                      )}
+                    />
+                  </div>
+                  <div className="col-span-3 mt-4">
+                    <FormField
+                      control={form.control}
+                      name="tn"
+                      render={({ field }) => (
+                        <FormUi label="총질소 (T-N)(mg/L)">
+                          <Input
+                            placeholder=""
+                            type="number"
+                            step="0.1"
+                            onChange={(e) => {
+                              field.onChange(Number(e.target.value));
+                            }}
+                            value={field.value ?? 0}
+                            readOnly
+                          />
+                        </FormUi>
+                      )}
+                    />
+                  </div>
+                  <div className="col-span-3 mt-4">
+                    <FormField
+                      control={form.control}
+                      name="tph"
+                      render={({ field }) => (
+                        <FormUi label="총인(T-P)(mg/L)">
+                          <Input
+                            placeholder=""
+                            type="number"
+                            step="0.1"
+                            onChange={(e) => {
+                              field.onChange(Number(e.target.value));
+                            }}
+                            value={field.value ?? 0}
+                            readOnly
+                          />
+                        </FormUi>
+                      )}
+                    />
+                  </div>
+                  <div className="col-span-3 mt-4">
+                    <FormField
+                      control={form.control}
+                      name="ph"
+                      render={({ field }) => (
+                        <FormUi label="수소이온농도(pH)">
+                          <Input
+                            placeholder=""
+                            type="number"
+                            step="0.1"
+                            onChange={(e) => {
+                              field.onChange(Number(e.target.value));
+                            }}
+                            value={field.value ?? 0}
+                            readOnly
+                          />
+                        </FormUi>
+                      )}
+                    />
+                  </div>
+                  <div className="col-span-3 mt-4">
+                    <FormField
+                      control={form.control}
+                      name="clIonQnt"
+                      render={({ field }) => (
+                        <FormUi label="염화물(mgCL/L)">
+                          <Input
+                            placeholder=""
+                            type="number"
+                            step="0.1"
+                            onChange={(e) => {
+                              field.onChange(Number(e.target.value));
+                            }}
+                            value={field.value ?? 0}
+                            readOnly
+                          />
+                        </FormUi>
+                      )}
+                    />
+                  </div>
+                  <div className="col-span-3 mt-4">
+                    <FormField
+                      control={form.control}
+                      name="cdtnv"
+                      render={({ field }) => (
+                        <FormUi label="전기전도도(㎲/cm)">
+                          <Input
+                            placeholder=""
+                            type="number"
+                            onChange={(e) => {
+                              field.onChange(Number(e.target.value));
+                            }}
+                            value={field.value ?? 0}
+                            readOnly
+                          />
+                        </FormUi>
+                      )}
+                    />
+                  </div>
+                  <div className="col-span-3 mt-4">
+                    <FormField
+                      control={form.control}
+                      name="rmrk"
+                      render={({ field }) => (
+                        <FormUi label="비고">
+                          <Input
+                            placeholder=""
+                            type="text"
+                            onChange={(e) => {
+                              field.onChange(e.target.value);
+                            }}
+                            value={field.value ?? ""}
+                            readOnly
+                          />
+                        </FormUi>
+                      )}
+                    />
+                  </div>
+                  <div className="col-span-12 w-full">
+                    <h1 className={formH1Class}>공급처 후보지</h1>
+                  </div>
+                  <div className="col-span-4 mt-4">
+                    <FormField
+                      control={form.control}
+                      name={`demandMatching.splyCndtList.${0}`}
+                      render={({ field }) => (
+                        <FormUi label="후보지1">
+                          <Input
+                            placeholder=""
+                            type="text"
+                            onChange={(e) => {
+                              field.onChange(String(e.target.value));
+                            }}
+                            value={field.value ?? ""}
+                            readOnly
+                          />
+                        </FormUi>
+                      )}
+                    />
+                  </div>
+                  <div className="col-span-4 mt-4">
+                    <FormField
+                      control={form.control}
+                      name={`demandMatching.splyCndtList.${1}`}
+                      render={({ field }) => (
+                        <FormUi label="후보지2">
+                          <Input
+                            placeholder=""
+                            type="text"
+                            onChange={(e) => {
+                              field.onChange(e.target.value);
+                            }}
+                            value={field.value ?? ""}
+                            readOnly
+                          />
+                        </FormUi>
+                      )}
+                    />
+                  </div>
+                  <div className="col-span-4 mt-4">
+                    <FormField
+                      control={form.control}
+                      name={`demandMatching.splyCndtList.${2}`}
+                      render={({ field }) => (
+                        <FormUi label="후보지3">
+                          <Input
+                            placeholder=""
+                            type="text"
+                            onChange={(e) => {
+                              field.onChange(e.target.value);
+                            }}
+                            value={field.value ?? ""}
+                            readOnly
+                          />
+                        </FormUi>
+                      )}
+                    />
+                  </div>
+                </div>
+              </Form>
+              <ConCostForm
+                form={form}
+                type={"mat"}
+                selectionVersion={selectionVersion}
+                readonly={regAuthrtYn ==="N"}
+              />
+            </ListDiv>
             {/* </ScrollArea> */}
           </div>
         </div>

apps/wr/app/matMng/coMat/ruseRvwHstry/page.tsx

@@ -30,6 +30,7 @@ import toast, { Toaster } from "react-hot-toast";
 import { useTranslation } from "react-i18next";
 export default function RuseRvwHstry() {
   const {
+    auth,
     code,
     ruseHist,
     ruseRvwHistInit,
@@ -38,6 +39,8 @@ export default function RuseRvwHstry() {
     ruseRvwComplete,
   } = useWrStore((state) => state);
   const { rvwHistRes, ruseHistHeadList, rvwHistCount } = ruseHist;
+  const { regAuthrtYn } = auth;
+
   const [pageNation, setPageNatiion] = useState<number>(1);
 
   const [dmdCoNm, setDmdCoNm] = useState<string>("");
@@ -305,7 +308,7 @@ export default function RuseRvwHstry() {
                   >
                     조회
                   </Button>
-                  <Button size={"sm"} onClick={confrirmToast}>
+                  <Button size={"sm"} onClick={confrirmToast} disabled={regAuthrtYn==='N'}>
                     저장
                   </Button>
                 </div>

apps/wr/app/matMng/coMng/coSttn/page.tsx

@@ -33,6 +33,7 @@ import toast, { Toaster } from "react-hot-toast";
 
 export default function CoSttn() {
   const {
+    auth,
     code,
     coSttn,
     coSttnInit,
@@ -43,6 +44,7 @@ export default function CoSttn() {
     coSttnTxtSearch,
     demandCompList,
   } = useWrStore((state) => state);
+  const { regAuthrtYn, mdfcnAuthrtYn } = auth;
 
   const [bdstTable, setBdstTable] = useState<DemandCompType[]>();
   const [pageNation, setPageNation] = useState(1);
@@ -205,6 +207,7 @@ export default function CoSttn() {
                       setUpdateData(undefined);
                       setIsDmdModal({ ...isDmdModal, isMoal: true });
                     }}
+                    disabled={regAuthrtYn === "N"}
                   >
                     등록
                   </Button>
@@ -222,6 +225,7 @@ export default function CoSttn() {
                         });
                       }
                     }}
+                    disabled={mdfcnAuthrtYn === "N"}
                   >
                     수정
                   </Button>

apps/wr/app/matMng/coMng/drgtSttn/page.tsx

@@ -15,9 +15,9 @@ import { toast, Toaster } from "react-hot-toast";
 export default function DrgtSttn() {
     const { code, drgt, drgtSearch, drgtModalSearch, drgtInit } = useWrStore((state) => state);
     const { drgtRes, drgtMoRes } = drgt;
-    const [fromDate, setFromDate] = useState<string>();
-    const [toDate, setToDate] = useState<string>();
-    const [selectSgg, setSelectSgg] = useState<SelectDataType[] | []>();
+    const [fromDate, setFromDate] = useState<string>('202506');
+    const [toDate, setToDate] = useState<string>('202506');
+    const [selectSgg, setSelectSgg] = useState<SelectDataType[]>([{ val: '0', text: '전체' }]);
     const [objSearch, setObjSearch] = useState<objSearchType>({ sgg: "", city: "" });
     const [tableData, setTableData] = useState<customDrgt[]>();
     const [selectedSgg, setSelectedSgg] = useState<string>('');
@@ -93,9 +93,9 @@ export default function DrgtSttn() {
         const cityValue = String(val);
 
         if (cityValue === "0") {
-            setSelectSgg([]);
-            setSelectedSgg('');
-            setObjSearch({ city: cityValue, sgg: '' });
+            setSelectSgg([{ val: '0', text: '전체' }]);
+            setSelectedSgg('0');
+            setObjSearch({ city: cityValue, sgg: '0' });
         } else {
             const data = getCity(cityValue, code.sggCd);
             setSelectSgg(data);
@@ -136,14 +136,15 @@ export default function DrgtSttn() {
                                         selectClass={""}
                                         selectArray={code.cityCd || []}
                                         onSelectValue={getSelCity}
+                                        value={objSearch?.city ||code.cityCd[0]?.val ||""}
                                     />
                                     <SelectBox
                                         className="col-span-2 w-1/6 h-full text-2xl ml-8"
                                         label="시군구"
                                         selectClass={""}
-                                        selectArray={selectSgg || []}
+                                        selectArray={selectSgg || [{ val: '0', text: '전체' }]}
                                         onSelectValue={getSgg}
-                                        value={selectedSgg}
+                                        value={selectedSgg ||'0'}
                                     />
                                     <div className="col-span-5 w-auto">
                                         <div className="flex flex-row items-center">

apps/wr/app/matMng/coMng/ldrmntCoSttn/page.tsx

@@ -33,7 +33,7 @@ import toast, { Toaster } from "react-hot-toast";
 import { useTranslation } from "react-i18next";
 
 export default function LdrmntCoSttn() {
-  const { code, ldrmnt, ldrmntInit, ldrmntSearch, ldrmntUpdate } = useWrStore(
+  const { auth, code, ldrmnt, ldrmntInit, ldrmntSearch, ldrmntUpdate } = useWrStore(
     (state) => state
   );
   const { ldrmntRes, excelList, ldrmntResCount } = ldrmnt;
@@ -47,6 +47,7 @@ export default function LdrmntCoSttn() {
   const [resetPage, isResetPage] = useState(false);
   const [isDownloadClicked, setIsDownloadClicked] = useState(false);
   const { t } = useTranslation('base');
+  const { regAuthrtYn, mdfcnAuthrtYn } = auth;
 
   const excelClick = useCallback(() => {
     excelDownload(
@@ -224,6 +225,7 @@ export default function LdrmntCoSttn() {
                     onClick={() => {
                       setIsExcelOpen({ isModal: true });
                     }}
+                    disabled={regAuthrtYn === 'N'}
                   >
                     엑셀등록
                   </Button>
@@ -269,14 +271,16 @@ export default function LdrmntCoSttn() {
               setDetailModal({ ...detailModal, isOpen: !detailModal.isOpen })
             }}
             bodyClass={"w-[40vw] max-w-none max-h-[calc(100%-70px)]"}
-            body={<CoDetailModal formObj={detailModal.data} onFormSubmit={async (value) => {
-              const handleConfirm = async () => {
-                await ldrmntUpdate(value);
-                setDetailModal({ ...detailModal, isOpen: false });
-                ldrmntSearch(false, pageNation, '20', computeCityNm(), searchTxt || "");
-              };
-              confirmToast(t('isUpdateMsg'), handleConfirm);
-            }} />}
+            body={<CoDetailModal formObj={detailModal.data}
+            readonly={mdfcnAuthrtYn === 'N'}
+              onFormSubmit={async (value) => {
+                const handleConfirm = async () => {
+                  await ldrmntUpdate(value);
+                  setDetailModal({ ...detailModal, isOpen: false });
+                  ldrmntSearch(false, pageNation, '20', computeCityNm(), searchTxt || "");
+                };
+                confirmToast(t('isUpdateMsg'), handleConfirm);
+              }} />}
           />
 
           <UiModal

apps/wr/app/ruseFcltMng/fcltReg/htdflReg/page.tsx

@@ -21,7 +21,7 @@ import { useEffect, useState } from "react";
 import { Toaster } from "react-hot-toast";
 
 export default function Home() {
-  const { code, htdfl, initHtdflReg, getHtdflBdstData, htdflNmSearch } =
+  const { auth,code, htdfl, initHtdflReg, getHtdflBdstData, htdflNmSearch } =
     useWrStore((state) => state);
   const [searchTxt, setSearchTxt] = useState("");
   const [pageNation, setPageNation] = useState(1);
@@ -30,12 +30,9 @@ export default function Home() {
   const [bdstTable, setbdstTable] = useState<customHtdflBdst[]>();
   const [issNewReg, setIsNewReg] = useState<boolean>(false);
 
-  // const [bdstChgProps, setBdstChgProps] = useState<{
-  //   isOpen: boolean;
-  //   chgBuilding: chgBuilding[];
-  // }>({ isOpen: false, chgBuilding: [] });
 
   const { htdflRes ,htdflResCount} = htdfl;
+  const { regAuthrtYn, mdfcnAuthrtYn } = auth;
 
   useEffect(() => {
     if (!htdfl.isInit) {
@@ -116,7 +113,10 @@ export default function Home() {
                   >
                     조회
                   </Button>
-                  <Button size={"sm"} onClick={() => setIsNewReg(!issNewReg)}>
+                  <Button size={"sm"} 
+                  onClick={() => setIsNewReg(!issNewReg)}
+                  disabled={regAuthrtYn === "N"}
+                  >
                     신규등록
                   </Button>
                 </div>
@@ -149,6 +149,7 @@ export default function Home() {
                 <HtdflRegForm
                   htdflForm={htdflForm ?? ({} as customHtdflBdst)}
                   isModal={false}
+                  readonly={mdfcnAuthrtYn === "N"}
                 />
               </ScrollArea>
             </ListDiv>

apps/wr/app/ruseFcltMng/fcltReg/pbnstReg/page.tsx

@@ -38,6 +38,7 @@ import { useTranslation } from "react-i18next";
 
 export default function PublicReuseFaciltyInsert() {
   const {
+    auth,
     code,
     pbnst,
     pubHasuInit,
@@ -47,8 +48,10 @@ export default function PublicReuseFaciltyInsert() {
     pubHasuSearch,
     pbnstRuseBizUpdate,
   } = useWrStore((state) => state);
+
   const { t } = useTranslation("base");
   const { pubFacHeadList, pbnstHasuResCount, pbnstHasuRes, pbnstRes } = pbnst;
+  const { regAuthrtYn, mdfcnAuthrtYn } = auth;
   const [, setCurrentTab] = useState<string>("mng");
   const [isRuseReg, setIsRuseReg] = useState<{
     isModal: boolean;
@@ -290,6 +293,7 @@ export default function PublicReuseFaciltyInsert() {
                       }
                       isResetPage(true);
                     }}
+                   
                   >
                     조회
                   </Button>
@@ -307,6 +311,7 @@ export default function PublicReuseFaciltyInsert() {
                         appendPbnstRuseFclt();
                       }
                     }}
+                    disabled={regAuthrtYn === "N"}
                   >
                     신규등록
                   </Button>
@@ -319,19 +324,17 @@ export default function PublicReuseFaciltyInsert() {
         <div className="grid grid-cols-8 gap-4">
           <div className="col-span-5 h-full min-h-0">
             <ListDiv className="min-h-0">
-              {/* <ScrollArea className="h-[60vh]"> */}
-                {" "}
-                {/* 높이 조정 */}
-                <UiTable
-                  tableData={bdstTable || []}
-                  headlist={pubFacHeadList}
-                  pageSize={10}
-                  total={pbnstHasuResCount || 20}
-                  headName={"공공 하수처리시설 목록"}
-                  cellClick={cellClick}
-                  onPageChange={setPageNation}
-                  resetPageNo={resetPage}
-                />
+              {/* <ScrollArea className="h-[60vh]"> */} {/* 높이 조정 */}
+              <UiTable
+                tableData={bdstTable || []}
+                headlist={pubFacHeadList}
+                pageSize={10}
+                total={pbnstHasuResCount || 20}
+                headName={"공공 하수처리시설 목록"}
+                cellClick={cellClick}
+                onPageChange={setPageNation}
+                resetPageNo={resetPage}
+              />
               {/* </ScrollArea> */}
             </ListDiv>
           </div>
@@ -351,6 +354,7 @@ export default function PublicReuseFaciltyInsert() {
                     size={"sm"}
                     onClick={form.handleSubmit(onSubmit, onInvalid)}
                     className="mr-5 mt-2"
+                    disabled={mdfcnAuthrtYn === "N"}
                   >
                     저장
                   </Button>
@@ -364,7 +368,7 @@ export default function PublicReuseFaciltyInsert() {
                         setIndexMng(index);
                       }}
                       indexMng={indexMng}
-                      readonly={false}
+                      readonly={mdfcnAuthrtYn === "N"}
                     />
                   </TabsContent>
                   <TabsContent className="max-h-full" value="buse">
@@ -376,9 +380,9 @@ export default function PublicReuseFaciltyInsert() {
                       }}
                       indexMng={indexMng}
                       indexBiz={indexBiz}
+                      readonly={mdfcnAuthrtYn === "N"}
                     />
                   </TabsContent>
-
                 </ScrollArea>
               </Tabs>
             ) : (

apps/wr/app/ruseFcltMng/fcltReg/rainReg/page.tsx

@@ -1,8 +1,6 @@
 "use client";
 import { useWrStore } from "@/app/store";
-import {
-  type customRainBdst,
-} from "@/app/store/ruseFcltMng/fcltReg/rainReg";
+import { type customRainBdst } from "@/app/store/ruseFcltMng/fcltReg/rainReg";
 import { formatCommaNumber, tableData } from "@/components/lib/func/commom";
 import RainRegForm from "@/components/ui/form/fcltReg/rainReg/rainRegForm";
 import { BdstReg } from "@/components/ui/modal/fcltReg/bdstRegModal/bdstRegModal";
@@ -19,14 +17,19 @@ import {
 import ListDiv from "@common/business_components/ui/list_div";
 import { Button } from "@common/components";
 import { useEffect, useState } from "react";
-import { Toaster } from "react-hot-toast";
+import  { Toaster } from "react-hot-toast";
 
 export default function Home() {
-  const { rain, code, initRain, rainSearch, getRainData } = useWrStore(
+  const { auth, rain, code, initRain, rainSearch, getRainData } = useWrStore(
     (state) => {
       return state;
     }
   );
+
+  const { regAuthrtYn, mdfcnAuthrtYn } = auth;
+
+
+
   const { rainRes, rainResCount } = rain;
   const [rainForm, setRainForm] = useState<customRainBdst>();
   const [issNewReg, setIsNewReg] = useState<boolean>(false);
@@ -53,7 +56,7 @@ export default function Home() {
             return {
               ...item,
               archArea: formatCommaNumber(archArea),
-
+              bdstChgYn: item.chgBuilding[0]?.bdstChgNm != null ? "Y" : "N",
             };
           }
         );
@@ -64,13 +67,10 @@ export default function Home() {
       }
     }
   }, [code, rainRes]);
-  const cellClick: (val: number | undefined) => void = (
-    val
-  ) => {
+  const cellClick: (val: number | undefined) => void = (val) => {
     if (val !== undefined) {
       setRainForm(rainRes[val]);
     }
-
   };
 
   useEffect(() => {
@@ -99,7 +99,7 @@ export default function Home() {
                     size={"sm"}
                     onClick={() => {
                       rainSearch(searchTxt || "", 1, "41");
-                    //rainSearch(searchTxt || "", pageNation, "41");
+                      //rainSearch(searchTxt || "", pageNation, "41");
                     }}
                   >
                     조회
@@ -107,7 +107,10 @@ export default function Home() {
                   <Button
                     size={"sm"}
                     className=""
-                    onClick={() => setIsNewReg(!issNewReg)}
+                    onClick={() => {
+                        setIsNewReg(!issNewReg);
+                    }}
+                    disabled={regAuthrtYn === "N"}
                   >
                     신규등록
                   </Button>
@@ -143,6 +146,7 @@ export default function Home() {
                 <RainRegForm
                   rainForm={rainForm ?? ({} as customRainBdst)}
                   isModal={false}
+                  readonly={mdfcnAuthrtYn !== "Y"}
                 ></RainRegForm>
               </ScrollArea>
             </ListDiv>

apps/wr/app/ruseFcltMng/fcltReg/rswtReg/page.tsx

@@ -20,9 +20,11 @@ import { useEffect, useState } from "react";
 import { Toaster } from "react-hot-toast";
 
 export default function Home() {
-  const { code, rswt, initRswt, rswtBdstSearch, getRswtBdstData } = useWrStore(
+  const { auth,code, rswt, initRswt, rswtBdstSearch, getRswtBdstData } = useWrStore(
     (state) => state
   );
+  const { regAuthrtYn, mdfcnAuthrtYn } = auth;
+
   const [rswtForm, setRswtForm] = useState<customRswtBdst>();
   const [searchTxt, setSearchTxt] = useState<string>();
   const [issNewReg, setIsNewReg] = useState<boolean>(false);
@@ -114,6 +116,7 @@ export default function Home() {
                     size={"sm"}
                     className="mr-4"
                     onClick={() => setIsNewReg(!issNewReg)}
+                    disabled={regAuthrtYn === "N"}
                   >
                     신규등록
                   </Button>
@@ -146,6 +149,7 @@ export default function Home() {
                 <RswtrRegForm
                   rswtForm={rswtForm ?? ({} as customRswtBdst)}
                   isModal={false}
+                  readonly={mdfcnAuthrtYn === "N"}
                 />
               </ScrollArea>
             </ListDiv>

apps/wr/app/ruseFcltMng/fcltSttn/pbnstSttn/page.tsx

@@ -1,6 +1,11 @@
 "use client";
 import { useWrStore } from "@/app/store";
 import { btnClass } from "@/app/store/common/code";
+import type { customPbnst } from "@/app/store/ruseFcltMng/fcltReg/pbnstReg/type";
+import type { WaterReuseFacility } from "@/app/store/ruseFcltMng/fcltSttn/pbnstSttn/type";
+import { excelDownload, yearOptions } from "@/components/lib/func/commom";
+import HeadChModal from "@/components/ui/modal/sttn/headChModal/headChModal";
+import { PbnstSttnModal } from "@/components/ui/modal/sttn/pbnstSttnModal/pbnstSttnModal";
 import {
   ContentsDiv,
   SearchBaseForm,
@@ -12,14 +17,9 @@ import {
   type ReturnType,
 } from "@common/business_components/ui";
 import ListDiv from "@common/business_components/ui/list_div";
-import { Button, Label } from "@common/components/ui";
-import HeadChModal from "@/components/ui/modal/sttn/headChModal/headChModal";
-import { useCallback, useEffect, useRef, useState } from "react";
 import { HeadMakeColSpan } from "@common/business_components/ui/table/HeadMakeColSpan";
-import type { customPbnst } from "@/app/store/ruseFcltMng/fcltReg/pbnstReg/type";
-import { excelDownload, yearOptions } from "@/components/lib/func/commom";
-import type { WaterReuseFacility } from "@/app/store/ruseFcltMng/fcltSttn/pbnstSttn/type";
-import { PbnstSttnModal } from "@/components/ui/modal/sttn/pbnstSttnModal/pbnstSttnModal";
+import { Button, Label } from "@common/components/ui";
+import { useCallback, useEffect, useRef, useState } from "react";
 
 export default function PbnstSttn() {
   const {
@@ -29,6 +29,7 @@ export default function PbnstSttn() {
     pbnSttnInit,
     getPbnStnDetail,
     getFlcts,
+    resetPbnstDetail
   } = useWrStore((state) => state);
 
   const { pbnstSttnRes, fclts, pbnstSttnResCount } = pbnstSttn;
@@ -103,9 +104,6 @@ export default function PbnstSttn() {
       });
   }, [pbnstSttn.pbnstDetail]);
 
-  useEffect(() => {
-    console.log("pbnDetaileData.isModal ", pbnDetaileData.isModal);
-  }, [pbnDetaileData.isModal]);
   return (
     <>
       <ContentsDiv>
@@ -233,8 +231,9 @@ export default function PbnstSttn() {
           open={pbnDetaileData.isModal}
           onOpenChange={(open) => {
             //TODO:OPEN 상태 확인필요
-            if(!open)
-            setPbnDetaileData({ data: {} as customPbnst, isModal: open });
+            if (!open)
+              setPbnDetaileData({ data: {} as customPbnst, isModal: open });
+            resetPbnstDetail();
           }}
         />
       </ContentsDiv>

apps/wr/app/ruseFcltMng/prfmncReg/chkgdnReg/page.tsx

@@ -44,6 +44,7 @@ import { useTranslation } from "react-i18next";
 
 export default function Page() {
   const {
+    auth,
     code,
     rainChkgdn,
     rswtChkgdn,
@@ -64,6 +65,7 @@ export default function Page() {
   } = useWrStore((state) => {
     return state;
   });
+  const { regAuthrtYn, mdfcnAuthrtYn, delAuthrtYn } = auth;
   const [isRegExcel, setIsRegExcel] = useState(false);
   const [updateRainDetail, setUpdateRainDetail] = useState<rainChkZodType[]>(
     []
@@ -301,6 +303,7 @@ export default function Page() {
                     onClick={() => {
                       clickDelete(deleteIdx, selFcltDiv);
                     }}
+                    disabled={delAuthrtYn === 'N'}
                   >
                     삭제
                   </Button>
@@ -313,6 +316,7 @@ export default function Page() {
                           onClick={() => {
                             chkUpdateTable(selFcltDiv);
                           }}
+                          disabled={mdfcnAuthrtYn === 'N'}
                         >
                           저장
                         </Button>
@@ -330,6 +334,7 @@ export default function Page() {
                     onClick={() => {
                       setIsRegExcel(!isRegExcel);
                     }}
+                    disabled={regAuthrtYn === 'N'}
                   >
                     결과등록
                   </Button>
@@ -354,6 +359,7 @@ export default function Page() {
                 pageNation={rainPageNation}
                 onPageChange={rainPageChange}
                 pageCount={rainChkgdn.rainChkCount}
+                readonly={mdfcnAuthrtYn === 'N'}
               />
             ) : (
               <RswtChkgdTable
@@ -364,6 +370,7 @@ export default function Page() {
                 pageNation={rswtPageNation}
                 onPageChange={rswtPageChange}
                 pageCount={rswtChkgdn.rswtChkCount}
+                readonly={mdfcnAuthrtYn === 'N'}
               />
             )}
           </ListDiv>
@@ -380,6 +387,7 @@ export default function Page() {
             type={selFcltDiv}
             obj={isModal.data}
             setIsModal={(open) => setIsModal((prev) => ({ ...prev, open }))}
+            readonly={mdfcnAuthrtYn === 'N' ? false : true}
           />
         }
       ></UiModal>

apps/wr/app/ruseFcltMng/prfmncReg/pbnstPrfmncReg/page.tsx

@@ -38,10 +38,11 @@ import { useTranslation } from "react-i18next";
 import { headMakeprfmnc } from "../chkgdnReg/TableHead";
 
 export default function PrfmncPrfmncReg() {
-  const { prfmnc, prfmncHasuInit, prfmnRegData, prfmncHasuNmSearch } = useWrStore(
+  const { auth, prfmnc, prfmncHasuInit, prfmnRegData, prfmncHasuNmSearch } = useWrStore(
     (state) => state
   );
   const { pbnstPrfmncHeadList, monthHeadList, prfmncRes, prfmncResCount } = prfmnc;
+  const { regAuthrtYn, mdfcnAuthrtYn } = auth;
   const [bdstTable, setbdstTable] = useState<FcPrfType[]>();
   const [searchTxt, setSearchTxt] = useState<string>();
   const [isExcelOpen, setIsExcelOPen] = useState<{
@@ -92,7 +93,7 @@ export default function PrfmncPrfmncReg() {
           searchYear,
           pbnstRuseFcltId
         ) as unknown as PrfType
-        ,searchYear
+        , searchYear
       );
     };
 
@@ -124,6 +125,9 @@ export default function PrfmncPrfmncReg() {
         };
         if (prfmncRes[index]?.prfList) {
           prfmncRes[index].prfList?.forEach((prfItem) => {
+           const yr = Number(prfItem.ym?.slice(0, 4)); // "YYYY"
+
+            if(yr === Number(searchYear)) {
             const month = Number(prfItem?.ym?.slice(4)); // "MM"
             const monthKey = `${month}월`;
 
@@ -154,7 +158,11 @@ export default function PrfmncPrfmncReg() {
                 outSubtotal.total += value;
               }
             });
+          }
           });
+
+          if(inSubtotal.total!==0 && outSubtotal.total!==0) {
+
           inUsageData.push(inSubtotal);
           outUsageData.push(outSubtotal);
           const usageTotalObj: { [key: string]: any } = {
@@ -173,18 +181,21 @@ export default function PrfmncPrfmncReg() {
           const tableData = [...inUsageData, ...outUsageData, usageTotalObj];
           setpbnstRuseFcltId(prfmncRes[index].pbnstRuseFcltId);
           setInputData(tableData);
+        }else{
+          setInputData([]);
+        }
         } else {
           setInputData([]);
         }
       }
     },
-    [prfmncRes]
+    [prfmncRes,searchYear]
   );
 
   useEffect(() => {
     if (!prfmnc.isInit) {
       const year = new Date().getFullYear()
-      prfmncHasuInit(1, "41", String(year));
+      prfmncHasuInit(1, '41', String(year));
     }
   }, [prfmnc.isInit, prfmncHasuInit]);
   useEffect(() => {
@@ -259,6 +270,7 @@ export default function PrfmncPrfmncReg() {
                       onClick={() => {
                         onSave();
                       }}
+                      disabled={mdfcnAuthrtYn === 'N'}
                     >
                       저장
                     </Button>
@@ -272,6 +284,7 @@ export default function PrfmncPrfmncReg() {
                           setIsExcelOPen({ ...isExcelOpen, isModal: true });
                         }
                       }}
+                      disabled={regAuthrtYn === 'N'}
                     >
                       파일등록
                     </Button>
@@ -302,7 +315,7 @@ export default function PrfmncPrfmncReg() {
                   }}
                   onPageChange={
                     (page) => {
-                      prfmncHasuInit(page, "41", searchYear);
+                      prfmncHasuInit(page, '41', searchYear);
                       setPageNation(page)
                     }}
                 />
@@ -321,7 +334,7 @@ export default function PrfmncPrfmncReg() {
                   {headMakeprfmnc(monthHeadList, [])}
                 </TableHeader>
                 <TableBody key={prfmnc.pageKey + 'pageKey'}>
-                  {InputTableBody(inputData ?? [], monthHeadList, setInputData)}
+                  {InputTableBody(inputData ?? [], monthHeadList, setInputData, mdfcnAuthrtYn === 'N' ? false : true)}
                 </TableBody>
               </Table>
             </ScrollArea>
@@ -348,7 +361,7 @@ export default function PrfmncPrfmncReg() {
         }
         open={isExcelOpen.isModal}
         onOpenChange={() => {
-          setIsExcelOPen({ isModal: false, data: {} as FcPrfType });
+          setIsExcelOPen({ ...isExcelOpen, isModal: false });
         }}
       ></UiModal>
       <Toaster position="top-center" />

apps/wr/app/ruseFcltMng/prfmncSttn/chkgdnSttn/page.tsx

@@ -99,7 +99,9 @@ export default function Page() {
       isRainSttn(true)
       rainChkSttnInit(1, rainPageSize, new Date().getFullYear().toString(), commonCd);
       setIsModal({ data: {}, open: false });
+      
     }
+
   }, [rainChkSttn.isInit, rainChkSttnInit, rainPageSize]);
 
   useEffect(() => {
@@ -226,6 +228,7 @@ export default function Page() {
                 pageNation={rainPageNation}
                 onPageChange={rainPageChange}
                 pageCount={rainChkSttn.rainChkCount}
+                readonly={true}
               />
             ) : (
               <RswtChkgdTable
@@ -236,6 +239,7 @@ export default function Page() {
                 pageNation={rswtPageNation}
                 onPageChange={rswtPageChange}
                 pageCount={rswtChkSttn.rswtChkCount}
+                readonly={true}
               />
             )}
           </ListDiv>
@@ -247,7 +251,7 @@ export default function Page() {
           setIsModal({ open: !open, data: {} });
         }}
         bodyClass={"w-[80vw] max-w-none"}
-        body={<ChkgdModal type={selFcltDiv} obj={isModal.data} setIsModal={() => { }} />}
+        body={<ChkgdModal readonly={true} type={selFcltDiv} obj={isModal.data} setIsModal={() => { }} />}
       ></UiModal>
       <Toaster position="top-center" />
     </ContentsDiv>

apps/wr/app/store/common/auth/index.tsx

@@ -1,21 +1,6 @@
-import { getFetch, getFetchWithCount } from "@/components/lib/api";
+import {  getFetchWithCount } from "@/components/lib/api";
 import toast from "react-hot-toast";
 
-export const getMenuAuthrts = async (menuCd: number) => {
-  const response = await getFetch(
-    "LOCAL",
-    `/cms-service/api/v1/menu-authrts/pageinfo/${menuCd}`
-  );
-
-  authStateExport.auth = {
-    mngAuthrtYn: response[0].mngAuthrtYn,
-    inqAuthrtYn: response[0].mngAuthrtYn,
-    regAuthrtYn: response[0].mngAuthrtYn,
-    mdfcnAuthrtYn: response[0].mngAuthrtYn,
-    delAuthrtYn: response[0].mngAuthrtYn,
-  };
-};
-
 export type authState = {
   auth: {
     mngAuthrtYn: string;

apps/wr/app/store/matDmd/drgtSttn/index.tsx

@@ -98,9 +98,10 @@ export const drgtActionsExport: (set: any) => drgtActions = (
         const year = today.getFullYear();
         const month = String(today.getMonth() + 1).padStart(2, '0');
         const formatted = `${year}${month}`;
-        const fromDate = formatted;
-        const toDate = formatted;
-
+        let fromDate = formatted;
+        let toDate = formatted;
+        fromDate='202506'
+        toDate='202506'
         const drgtRes = await initFetch(fromDate, toDate, []);
         set((state: drgtState) => {
           return {

apps/wr/app/store/ruseFcltMng/fcltSttn/pbnstSttn/index.tsx

@@ -27,9 +27,9 @@ export type pbnstSttnState = {
     ruseGuranteeHeadList: TableUpperProps[]
     ruseDmdHeadList: TableUpperProps[]
     ruseFcltHeadList: TableUpperProps[]
-    pbnstSttnResCount:number;
+    pbnstSttnResCount: number;
     excelList: [];
-    fclts:string[]
+    fclts: string[]
     isInit: boolean;
   };
 };
@@ -43,15 +43,15 @@ type pbnstSttnActions = {
     reurnValue: ReturnType,
     searchNm: string | undefined,
     year: string,
-    fclts:string[]
+    fclts: string[]
   ) => void;
-  getFlcts:()=>void;
+  getFlcts: () => void;
   pbnSttnInit: (
     page: string,
     total: string,
     reurnValue: ReturnType,
     year: string,
-    flcts:string[]
+    flcts: string[]
   ) => void;
   getPbnStnDetail: (pbnstRuseFcltId: string) => void;
   pbnNmSearch: (
@@ -60,8 +60,9 @@ type pbnstSttnActions = {
     reurnValue: ReturnType,
     searchNm: string | undefined,
     year: string,
-    flcts:string[]
+    flcts: string[]
   ) => void;
+  resetPbnstDetail: () => void;
 };
 
 export type pbnstSttnType = pbnstSttnState & pbnstSttnActions;
@@ -77,11 +78,11 @@ export const pbnstSttnStateExport: pbnstSttnState = {
     ruseDmdHeadList: ruseDmdHeadListExport,
     ruseFcltHeadList: ruseFcltHeadListExport,
     pbnstSttnRes: [],
-    pbnstSttnResCount:1,
+    pbnstSttnResCount: 1,
     pbnstDetail: {} as customPbnst,
     pbnstSearchData: [],
     excelList: [],
-    fclts:[],
+    fclts: [],
     isInit: false,
   },
 };
@@ -92,12 +93,12 @@ const hasuListFetch = async (
   reurnValue: ReturnType,
   searchNm: string | undefined,
   year: string,
-  flcts:string[]
+  flcts: string[]
 ) => {
   let url = `/prcsFclt/ruseInfo/`;
 
   if (reurnValue.partValue === "A") {
-    url+=`${page}/${total}/${reurnValue.partValue}/${
+    url += `${page}/${total}/${reurnValue.partValue}/${
       // reurnValue.sidoValue ? reurnValue.sidoValue : reurnValue.sigunValue
       reurnValue.sigunValue !== '0' ? reurnValue.sigunValue : reurnValue.sidoValue
       }/0/1/SW`
@@ -108,12 +109,12 @@ const hasuListFetch = async (
         ? reurnValue.unitWaterShedValue
         : reurnValue.middleRegionValue
       }/0/1/SW`
-  } else if(  reurnValue.partValue ===  'G'){
+  } else if (reurnValue.partValue === 'G') {
 
 
     url += `${page}/${total}/${reurnValue.envPartValue}/${reurnValue.sigunValue !== '0' ? reurnValue.sigunValue : reurnValue.sidoValue}/0/1/SW`
 
-  }else{
+  } else {
     url += `1/2/A/0/0/1/SW`
   }
 
@@ -121,8 +122,7 @@ const hasuListFetch = async (
     url += "/" + searchNm
   }
 
-  console.log(' flcts ' ,flcts)
-  const pbnList = await postFectch(url,  flcts,fetchType.COMMON);
+  const pbnList = await postFectch(url, flcts, fetchType.COMMON);
   const getRuseList = await postFectch(
     `/reuseFc/pubDetailList/${year}`,
     flcts,
@@ -139,7 +139,7 @@ const hasuListFetch = async (
           fclt.bscFctCd === item.pbnstRuseFcltId.substring(0, 11)
       );
 
-      if(findData){
+      if (findData) {
 
         const usage = item.prfList.reduce(
           (acc, cur) => {
@@ -161,48 +161,42 @@ const hasuListFetch = async (
               cur.rvrKeepUswtr +
               cur.indstUswtr;
             acc.total = acc.inUsage + acc.outUsage;
-  
+
             return acc;
           },
           { total: 0, inUsage: 0, outUsage: 0 }
         );
-  console.log('findData ', findData)
         return {
-          rvbsn: findData?.rvbsn ||'-',
-          lgbsn: findData?.lgbsn||'-',
-          mdmbsn: findData?.mdmbsn||'-',
-          rgnNm: findData?.rgnNm||'-',
-          sido: findData?.sido||'-',
-          gugun: findData?.gugun||'-',
-          bscFctNm: findData?.bscFctNm||'-',
-          efflWqltStndrdNm: findData?.efflWqltStndrdNm||'-',
-          fctCpc: Number(findData?.fctCpc)||0,
+          rvbsn: findData?.rvbsn || '-',
+          lgbsn: findData?.lgbsn || '-',
+          mdmbsn: findData?.mdmbsn || '-',
+          rgnNm: findData?.rgnNm || '-',
+          sido: findData?.sido || '-',
+          gugun: findData?.gugun || '-',
+          bscFctNm: findData?.bscFctNm || '-',
+          efflWqltStndrdNm: findData?.efflWqltStndrdNm || '-',
+          fctCpc: Number(findData?.fctCpc) || 0,
           tel: findData?.tel ?? "-",
-          ruseUtztnFcltNm: item?.ruseUtztnFcltNm||'-',
-          fcltCpct: item?.fcltCpct||'-',
-          splyExtraCpct: item?.splyExtraCpct||'-',
-          ruseCpct: item?.ruseCpct||'-',
-          pbnstRuseFcltId: item.pbnstRuseFcltId||'-',
+          ruseUtztnFcltNm: item?.ruseUtztnFcltNm || '-',
+          fcltCpct: item?.fcltCpct || '-',
+          splyExtraCpct: item?.splyExtraCpct || '-',
+          ruseCpct: item?.ruseCpct || '-',
+          pbnstRuseFcltId: item.pbnstRuseFcltId || '-',
           usageTotal: usage?.total,
           inUsage: usage?.inUsage,
           outUsage: usage?.outUsage,
-          operMthd: item.operList[0]?.operMthd||'-',
+          operMthd: item.operList[0]?.operMthd || '-',
           rprtvBzenty: item.operList[0]?.rprtvBzenty,
           bgngDt: moment(item.operList[0]?.bgngDt).format("YYYY-MM-DD") ?? "",
           endDt: moment(item.operList[0]?.endDt).format("YYYY-MM-DD") ?? "",
-          searchNm: findData?.bscFctNm||'-',
-          searchPk: findData?.bscFctCd||'-',
+          searchNm: findData?.bscFctNm || '-',
+          searchPk: findData?.bscFctCd || '-',
           prfList: item?.prfList ?? []
         };
       }
 
     }
   ).filter(Boolean);
-
-
-  console.log( ' checkWrRegListRes ',  getRuseList.data)
-  console.log( ' data ',  data)
-
   return data;
 };
 
@@ -210,12 +204,12 @@ export const pbnstSttnActionsExport: (set: any) => pbnstSttnActions = (
   set: any
 ) => {
   return {
-    getFlcts:async ()=>{
-     const fclts= await getFetch(fetchType.WR,'/reuseFc/pubFc')
+    getFlcts: async () => {
+      const fclts = await getFetch(fetchType.WR, '/reuseFc/pubFc')
       return set((state: pbnstSttnState) => ({
         pbnstSttn: {
           ...state.pbnstSttn,
-          fclts:fclts
+          fclts: fclts
         },
       }));
     },
@@ -239,11 +233,11 @@ export const pbnstSttnActionsExport: (set: any) => pbnstSttnActions = (
       reurnValue: ReturnType,
       searchNm: string | undefined,
       year: string,
-      fclts:string[]
+      fclts: string[]
     ) => {
       try {
-        
-       
+
+
         const pbnstSttnRes = await hasuListFetch(
           page,
           total,
@@ -265,7 +259,7 @@ export const pbnstSttnActionsExport: (set: any) => pbnstSttnActions = (
               },
             };
           });
-        } else{
+        } else {
 
           set((state: pbnstSttnState) => {
             return {
@@ -273,8 +267,8 @@ export const pbnstSttnActionsExport: (set: any) => pbnstSttnActions = (
               pbnstSttn: {
                 ...state.pbnstSttn,
                 pbnstSttnRes: pbnstSttnRes,
-                pbnstSttnResCount:pbnstSttnRes.length
-               // isInit: false,
+                pbnstSttnResCount: pbnstSttnRes.length
+                // isInit: false,
               },
             };
           });
@@ -283,31 +277,31 @@ export const pbnstSttnActionsExport: (set: any) => pbnstSttnActions = (
         console.log("error", erTxt);
       }
     },
-    pbnSttnInit: async(
+    pbnSttnInit: async (
       page: string,
       total: string,
       reurnValue: ReturnType,
       year: string,
-      fclts:string[]
+      fclts: string[]
     ) => {
       try {
         const pbnstSttnRes = await hasuListFetch(
-            page,
-            total,
-            reurnValue,
-            undefined,
-            year,
-            fclts
-          );
-                      console.log('pbnstSttnRes  ' , pbnstSttnRes)
-        set( (state: pbnstSttnState) => {
+          page,
+          total,
+          reurnValue,
+          undefined,
+          year,
+          fclts
+        );
+        set((state: pbnstSttnState) => {
           return {
             ...state,
             pbnstSttn: {
               ...state.pbnstSttn,
               pbnstSttnRes: pbnstSttnRes,
-              pbnstSttnResCount:pbnstSttnRes.length,
+              pbnstSttnResCount: pbnstSttnRes.length,
               isInit: false,
+              pbnstDetail: {} as customPbnst
             },
           };
         });
@@ -315,6 +309,17 @@ export const pbnstSttnActionsExport: (set: any) => pbnstSttnActions = (
         console.log("error", erTxt);
       }
     },
+    resetPbnstDetail: async () => {
+      set((state: pbnstSttnState) => {
+        return {
+          ...state,
+          pbnstSttn: {
+            ...state.pbnstSttn,
+            pbnstDetail: {} as customPbnst
+          },
+        };
+      })
+    },
     getPbnStnDetail: async (pbnstRuseFcltId: string) => {
       try {
         let pbnstDetail = await getFetch("wr", `/reuseFc/pubFc/${pbnstRuseFcltId}`);
@@ -340,7 +345,7 @@ export const pbnstSttnActionsExport: (set: any) => pbnstSttnActions = (
       reurnValue: ReturnType,
       searchNm: string | undefined,
       year: string,
-      flcts:string[]
+      flcts: string[]
     ) => {
       try {
 
@@ -359,7 +364,7 @@ export const pbnstSttnActionsExport: (set: any) => pbnstSttnActions = (
             pbnstSttn: {
               ...state.pbnstSttn,
               pbnstSearchData: pbnstSttnRes,
-              pbnstSttnResCount:pbnstSttnRes.length,
+              pbnstSttnResCount: pbnstSttnRes.length,
             },
           };
         });

apps/wr/app/store/ruseFcltMng/fcltSttn/rainSttn/excel.tsx

@@ -1,6 +1,7 @@
 import type { SelectDataType } from "@common/business_components/ui";
 import type { customRainBdst } from "../../fcltReg/rainReg";
-
+import { bdstUsgCd } from "@/app/store/common/code/basicCode";
+//TODO: 공통코드시 삭제되니 수정 해야됨
 export const excelRainSttnParsing = (
     excel: { data: customRainBdst[] },
     sidoCode: SelectDataType[],
@@ -9,14 +10,15 @@ export const excelRainSttnParsing = (
     const excelExportData: string[][] = [];
 
     excel.data.forEach((item) => {
+        console.log("item", item)
         excelExportData.push([
             sidoCode.find((sido) => sido.val === item.ctpvCd?.toString())?.text ?? "",
             sggCode.find((sgg) => sgg.val === item.sggCd?.toString())?.text ?? "",
             item.bdstNm ?? "",
             item.daddr ?? "",
-            String(item.bdstInfoSn ?? ""),
+            bdstUsgCd.find((cd) => cd.val === item.reuseBuilding?.[0]?.bdstUsgCd.toString())?.text ?? "",   //건축물용도
             String(item.frstArchPrmsnDt ?? ""),
-            String(item.archArea ?? ""),
+            String(item.archArea.split('.')[0] === '-1' ? '확인불가' : item.archArea.split('.')[0]),
             String(item.chgBuilding.length > 0 ? "Y" : "N"),
             String(item.reuseBuilding?.[0]?.lawTrgtYn ?? ""),
             String(item.reuseBuilding?.[0]?.instlCmptnDt ?? ""),
@@ -28,7 +30,7 @@ export const excelRainSttnParsing = (
             String(item.reuseBuilding?.[0]?.rainyObj?.filtrTrtmfctPrs ?? ""),
             String(item.reuseBuilding?.[0]?.rainyObj?.dtfcltCpct ?? ""),
             String(item.reuseBuilding?.[0]?.instlCstSprtYn ?? ""),
-            String(item.reuseBuilding?.[0]?.instlCstSprtAmt ?? ""),
+            String(item.reuseBuilding?.[0]?.instlCstSprtAmt === -1 ? "확인불가" : String(item.reuseBuilding?.[0]?.instlCstSprtAmt) ?? ""),
             String(item.reuseBuilding?.[0]?.grntchBdstCertYn ?? ""),
             String(item.reuseBuilding?.[0]?.grntchBdstCertYr ?? ""),
             String(item.reuseBuilding?.[0]?.grntchBdstCertNo ?? ""),

apps/wr/app/store/store.tsx

@@ -195,7 +195,7 @@ export const StoreZus = (
     getMiddleRegionCd(set);
     getUnitWaterShedCd(set);
     getEnvPartCd(set);
-    LoginApi.login({userId: "tuser10003", password: "test1234!"})
+    LoginApi.login({userId: "CLEANWATER", password: "gktneh12!@"})
     return {
       ...initState,
       ...comFcltSearchAction(set),

apps/wr/components/lib/func/TableData.tsx

@@ -95,7 +95,8 @@ export const chRowspanTable = (
   ) => void,
   toggleSelection: (pk: number, checked: boolean) => void,
   selectedIds: number[],
-  handleCellClick: (index: number, headId: string) => void
+  handleCellClick: (index: number, headId: string) => void,
+  disable? : boolean
 ) => {
   let order = 0
   // rowspan된 셀 렌더링 여부 추적용
@@ -138,6 +139,7 @@ export const chRowspanTable = (
                         onCheckedChange={(checked) =>
                           toggleSelection(row.chkgdnSn, checked === true)
                         }
+                        disabled={disable}
                       ></Checkbox>
                     ) : key === "order" ? (
                       ++order
@@ -339,7 +341,9 @@ export const InputTableBody = (
                     // className={`${head.id !== "utztnUsgCd" ? "text-right" : "text-center"} !text-xl h-10 w-full`}
                     className={`${textAlignClass} !text-xl h-10 w-full`}
                     onChange={(e) =>
-                      handleChange(dataIndex, head.id, e.target.value, setInputData)
+                      handleCommaNumberChange(e, val =>
+                        handleChange(dataIndex, head.id, String(val), setInputData)
+                      )
                     }
                     value={formatCommaNumber(data[head.id as keyof any]) ?? ""}
                     maxLength={numSize}

apps/wr/components/ui/form/coMat/conCostForm/conCostForm.tsx

@@ -31,10 +31,12 @@ export default function ConCostForm({
   form,
   type,
   selectionVersion,
+  readonly = false,
 }: {
   form: UseFormReturn<DmdCoReqType>;
   type: string;
   selectionVersion: number;
+  readonly: boolean;
 }) {
   const {
     constCostRes,
@@ -58,14 +60,11 @@ export default function ConCostForm({
     }
   }, [ref, getConstCostFee, getRateFee]);
 
-
   useEffect(() => {
     // 다른 행을 선택하면(selectionVersion 변경) 체크박스 상태를 초기화합니다.
     setCheckFinish(false);
   }, [selectionVersion]);
 
-
-
   const zipDowonLoad = () => {
     fetch(`/2024_constarctFeeProgram.zip`, {}).then(async (response) => {
       const blobRet = await response.blob();
@@ -95,7 +94,7 @@ export default function ConCostForm({
       return;
     }
 
-    const dmndQtyYear = dmndQtyWatch * 365;
+    const dmndQtyYear = dmndQtyWatch;
     if (usgPrcsProcs && usgPrcsProcs?.length > 0) {
       const firstProc =
         getConstFctCode(usgPrcsProcs?.split("+")[0] || "") || "";
@@ -165,29 +164,32 @@ export default function ConCostForm({
           cstrnCst: value.demandCst.cstrnCst || 0,
           fcltSbsdCstrnCst: value.demandCst.fcltSbsdCstrnCst || 0,
           prcsFcltCpctCstrnCst: value.demandCst.prcsFcltCpctCstrnCst || 0,
-          flg: checkFinish?'Checked':'Sub',
+          flg: checkFinish ? "Checked" : "Sub",
           rgtr: TEST_UUID,
         };
         if (checkFinish) {
           toast((t) => (
-            <span className="flex flex-col items-center text-2xl" >
-             검토완료 변경시 공사비는 변경할수 없습니다.
+            <span className="flex flex-col items-center text-2xl">
+              검토완료 변경시 공사비는 변경할수 없습니다.
               <br />
               진행하시겠습니까?
               <div className="flex gap-2 mt-2">
-              <Button
-                size='sm'
-                
-                onClick={() => {
-                  toast.dismiss(t.id);
-                  coMatRvwUpdate("11000SW001R1", form.getValues("dmdInfoId"), data);
-                }}
-              >
-                확인
-              </Button>
-              <Button 
-                    size='sm'
-              onClick={() => toast.dismiss(t.id)}>취소</Button>
+                <Button
+                  size="sm"
+                  onClick={() => {
+                    toast.dismiss(t.id);
+                    coMatRvwUpdate(
+                      "11000SW001R1",
+                      form.getValues("dmdInfoId"),
+                      data
+                    );
+                  }}
+                >
+                  확인
+                </Button>
+                <Button size="sm" onClick={() => toast.dismiss(t.id)}>
+                  취소
+                </Button>
               </div>
             </span>
           ));
@@ -229,6 +231,7 @@ export default function ConCostForm({
             className="mr-3"
             size={"sm"}
             onClick={form.handleSubmit(onSubmit)}
+            disabled={readonly}
           >
             저장
           </Button>
@@ -236,9 +239,14 @@ export default function ConCostForm({
           <Checkbox
             className="ml-3 mr-6"
             checked={checkFinish}
-            onCheckedChange={(checked) =>
+            onCheckedChange={
+              (checked) => {
+                if (readonly) return;
+                setCheckFinish(checked === true);
+              }
+
               // 'indeterminate' 상태를 무시하고 순수 boolean 값으로만 상태를 업데이트합니다.
-              setCheckFinish(checked === true)}
+            }
           ></Checkbox>
           <Label>관로 표준공사비 산정 프로그램</Label>
           <Button
@@ -350,10 +358,11 @@ export default function ConCostForm({
                     type="number"
                     step="0.001"
                     onChange={(e) => {
-                    console.log('dmndQty ', e)
+                      console.log("dmndQty ", e);
                       //field.onChange(Number(e.target.value) * 365 );
                     }}
-                    value={Number(field.value) * 365 || 0}
+                   // value={Number(field.value) * 365 || 0}
+                   value={Number(field.value) || 0}
                     readOnly
                   />
                 </FormUi>
@@ -377,7 +386,7 @@ export default function ConCostForm({
                 }
                 childrenBody={
                   <>
-                    <ConstCostFeeTable/>
+                    <ConstCostFeeTable />
                   </>
                 }
                 bodyClassName={"w-[40vw] h-full"}
@@ -414,8 +423,7 @@ export default function ConCostForm({
                 }
                 childrenBody={
                   <>
-                    <RateFeeTableModal/>
-               
+                    <RateFeeTableModal />
                   </>
                 }
                 bodyClassName={"w-[22vw]"}
@@ -476,8 +484,7 @@ export default function ConCostForm({
                     type="number"
                     step="0.01"
                     onChange={(e) => {
-                      console.log('totalConstCost ', e)
-
+                      console.log("totalConstCost ", e);
                     }}
                     value={field.value ?? 0}
                     readOnly
@@ -521,6 +528,9 @@ export default function ConCostForm({
                     type="number"
                     step="0.01"
                     onChange={(e) => {
+
+                      if(readonly) return;
+                      
                       field.onChange(Number(e.target.value));
                     }}
                     value={field.value ?? 0}

apps/wr/components/ui/form/fcltReg/pbnstReg/buseReg/bugRegForm.tsx

@@ -44,6 +44,7 @@ export function PbnstBuseForm({
   indexBiz = 0,
   setIndexBiz,
   form,
+  readonly = false,
 }: {
   formType: string;
   firstBizData?: fcBizType[];
@@ -51,6 +52,7 @@ export function PbnstBuseForm({
   indexMng: number;
   indexBiz: number;
   setIndexBiz: (index: number) => void;
+  readonly?: boolean;
 }) {
   const {
     code,
@@ -329,6 +331,7 @@ export function PbnstBuseForm({
                       onClick={addRuseFcltObj}
                       type="button"
                       size={commonButonSize}
+                      disabled={readonly}
                     >
                       추가
                     </Button>
@@ -343,6 +346,7 @@ export function PbnstBuseForm({
                   sonClass="col-span-4"
                   indexMng={indexMng}
                   indexBiz={indexBiz}
+                  readonly={readonly}
                 />
                 <MngRegFormDetail
                   key={`buziMoney-${indexMng}-${indexBiz}`}
@@ -353,6 +357,7 @@ export function PbnstBuseForm({
                   sonClass="col-span-4"
                   indexMng={indexMng}
                   indexBiz={indexBiz}
+                  readonly={readonly}
                 />
 
                 <MngRegFormDetail
@@ -364,6 +369,7 @@ export function PbnstBuseForm({
                   sonClass="col-span-4"
                   indexMng={indexMng}
                   indexBiz={indexBiz}
+                  readonly={readonly}
                 />
                 <MngRegFormDetail
                   key={`concertedWater-${indexMng}-${indexBiz}`}
@@ -374,6 +380,7 @@ export function PbnstBuseForm({
                   sonClass="col-span-4"
                   indexMng={indexMng}
                   indexBiz={indexBiz}
+                  readonly={readonly}
                 />
                 <MngRegFormDetail
                   key={`wasteFcltinfo-${indexMng}-${indexBiz}`}
@@ -384,6 +391,7 @@ export function PbnstBuseForm({
                   sonClass="col-span-4"
                   indexMng={indexMng}
                   indexBiz={indexBiz}
+                  readonly={readonly}
                 />
 
                 <h1 className={formH1Class}>재이용 원수취수 현황</h1>
@@ -394,6 +402,7 @@ export function PbnstBuseForm({
                       onClick={() => setIsFcOrgwts(true)}
                       size={commonButonSize}
                       className=""
+                      disabled={readonly}
                     >
                       추가등록
                     </Button>
@@ -412,6 +421,7 @@ export function PbnstBuseForm({
                     indexMng={indexMng}
                     formNm={"fcOrgwts"}
                     indexBiz={indexBiz}
+                    readonly={readonly}
                   />
                 </div>
                 <h1 className={formH1Class}>재이용 공급관로 설치 현황</h1>
@@ -424,6 +434,7 @@ export function PbnstBuseForm({
                     className="w-32"
                     selectClass="w-full"
                     onSelectValue={(val) => setPpiYn(String(val))}
+                    readOnly={readonly}
                   />
                   <Label className="text-right">합계</Label>
                   <Input
@@ -439,6 +450,7 @@ export function PbnstBuseForm({
                         size={commonButonSize}
                         className="!text-xl"
                         onClick={plusHist}
+                        disabled={readonly}
                       >
                         추가등록
                       </Button>
@@ -447,6 +459,7 @@ export function PbnstBuseForm({
                         size={commonButonSize}
                         className="!text-xl !bg-red-500 !text-white ml-1"
                         onClick={removeSelected}
+                        disabled={readonly}
                       >
                         삭제
                       </Button>
@@ -471,6 +484,7 @@ export function PbnstBuseForm({
                     form={form}
                     formNm={"pplInstls"}
                     upHeadList={[]}
+                    readonly={readonly}
                   />
                 </div>
 
@@ -494,7 +508,7 @@ export function PbnstBuseForm({
                   sonClass="col-span-4"
                   indexMng={indexMng}
                   indexBiz={indexBiz}
-                  readonly={false}
+                  readonly={readonly}
                 />
                 </div>
 
@@ -510,6 +524,7 @@ export function PbnstBuseForm({
                       }}
                       size={commonButonSize}
                       className="mt-6 mr-3"
+                      disabled={readonly}
                     >
                       수요처 추가
                     </Button>
@@ -523,6 +538,7 @@ export function PbnstBuseForm({
                       }}
                       size={commonButonSize}
                       className="mt-6"
+                      disabled={readonly}
                     >
                       수요처 신규등록
                     </Button>
@@ -575,6 +591,7 @@ export function PbnstBuseForm({
                                       searchPk: item.dmdInfoId,
                                     };
                                   })}
+                                  readonly={readonly}
                                 ></SearchInputText>
                               </FormUi>
                             )}
@@ -611,6 +628,7 @@ export function PbnstBuseForm({
                                   selectArray={code.dmdUszCd}
                                   onSelectValue={f.onChange}
                                   value={f.value ?? code.dmdUszCd[0]?.val}
+                                  readOnly={readonly}
                                 />
                               </FormUi>
                             )}
@@ -630,6 +648,7 @@ export function PbnstBuseForm({
                                       f.onChange(date),
                                   }}
                                   selectClass={"rounded-lg !w-full"}
+                                  readOnly={readonly}
                                 />
                               </FormUi>
                             )}
@@ -652,6 +671,7 @@ export function PbnstBuseForm({
                                       f.onChange(date),
                                   }}
                                   selectClass={"rounded-lg !w-full"}
+                                  readOnly={readonly}
                                 />
                               </FormUi>
                             )}
@@ -670,6 +690,7 @@ export function PbnstBuseForm({
                                     handleCommaNumberChange(e, f.onChange);
                                   }}
                                   value={formatCommaNumber(f.value)}
+                                  readOnly={readonly}
                                 />
                               </FormUi>
                             )}
@@ -690,6 +711,7 @@ export function PbnstBuseForm({
                                     f.onChange(val)
                                   }
                                   value={f.value ?? code.yn[0]?.val}
+                                  readOnly={readonly}
                                 />
                               </FormUi>
                             )}

apps/wr/components/ui/form/fcltReg/pbnstReg/mngReg/mngRegForm.tsx

@@ -41,13 +41,13 @@ export function PbnstMngForm({
   formType,
   indexMng,
   setIndexMng,
-  readonly
+  readonly,
 }: {
   form: UseFormReturn<{ items: PbnstRegArrrayType }>;
   formType: string;
   indexMng: number;
   setIndexMng: (index: number) => void;
-  readonly:boolean
+  readonly: boolean;
 }) {
   const { code, pbnst, fileDelete, fileDownLoad } = useWrStore(
     (state) => state
@@ -60,6 +60,7 @@ export function PbnstMngForm({
   const [mngMtdCode, setMngMtdCode] =
     useState<{ name: string; val: SelectDataType[] }[]>();
 
+
   const {
     fields: fcOpersField,
     prepend,
@@ -87,7 +88,6 @@ export function PbnstMngForm({
       endDt: new Date(),
     });
     //trigger(`items.${indexMng}.fcOpers`);
-
   };
 
   const removeSelected = () => {
@@ -318,6 +318,7 @@ export function PbnstMngForm({
                       size={commonButonSize}
                       className="!text-xl"
                       onClick={plusHist}
+                      disabled={readonly}
                     >
                       추가등록
                     </Button>
@@ -326,6 +327,7 @@ export function PbnstMngForm({
                       size={commonButonSize}
                       className="!text-xl !bg-red-500 !text-white ml-1"
                       onClick={removeSelected}
+                      disabled={readonly}
                     >
                       삭제
                     </Button>
@@ -335,20 +337,11 @@ export function PbnstMngForm({
               <div className="h-[200px] overflow-y-auto">
                 <RuseMngTableForm
                   key={`ruse-table-${indexMng}-${fcOpersField.length}`} // 🔥 length까지 넣어야 동기화됨
-                  tableData={form.getValues(`items.${indexMng}.fcOpers`) ||[]}
-                  headList={
-                    formType === "sttn"
-                      ? pbnst.pbnstMngUpHeadList.map((item) => {
-                          return {
-                            ...item,
-                            readonly: true,
-                          };
-                        })
-                      : pbnst.pbnstMngUpHeadList
-                  }
+                  tableData={form.getValues(`items.${indexMng}.fcOpers`) || []}
+                  headList={pbnst.pbnstMngUpHeadList}
                   upHeadList={pbnst.pbnstMngNm}
                   code={mngMtdCode || []}
-               
+                  readonly={readonly}
                   indexMng={indexMng}
                   form={form}
                   formNm={"fcOpers"}
@@ -372,7 +365,6 @@ export function PbnstMngForm({
                           maxLength={numSize} //입력제한
                           type="text"
                           onChange={(e) => {
-                            if (formType !== "sttn")
                               handleCommaNumberChange(e, field.onChange);
                           }}
                           value={formatCommaNumber(field.value)}
@@ -396,7 +388,6 @@ export function PbnstMngForm({
                           maxLength={numSize} //입력제한
                           type="text"
                           onChange={(e) => {
-                            if (formType !== "sttn")
                               handleCommaNumberChange(e, field.onChange);
                           }}
                           value={formatCommaNumber(field.value)}
@@ -419,7 +410,6 @@ export function PbnstMngForm({
                           maxLength={numSize} //입력제한
                           type="text"
                           onChange={(e) => {
-                            if (formType !== "sttn")
                               handleCommaNumberChange(e, field.onChange);
                           }}
                           value={formatCommaNumber(field.value)}
@@ -435,7 +425,7 @@ export function PbnstMngForm({
               </div>
               <div className="grid grid-cols-12 gap-4 my-4">
                 <div className="col-span-6">
-                  {formType === "sttn" ? (
+                  {readonly ? (
                     relationfiles && relationfiles?.length > 0 ? (
                       <>
                         <Label className="text-3xl">계통도</Label>
@@ -472,7 +462,7 @@ export function PbnstMngForm({
                   )}
                 </div>
                 <div className="col-span-6">
-                  {formType === "sttn" ? (
+                  {readonly ? (
                     planFiles && planFiles?.length > 0 ? (
                       <>
                         <Label className="text-3xl">평면도</Label>

apps/wr/components/ui/form/fcltReg/pbnstReg/mngReg/mngRegFormDetail/mngRegFormDetail.tsx

@@ -21,6 +21,7 @@ export default function MngRegFormDetail({
   sonClass,
   indexBiz,
   indexMng,
+  readonly
 }: {
   formList: formDetailType[];
   h1Title?: string;
@@ -30,6 +31,7 @@ export default function MngRegFormDetail({
   indexBiz?: number;
   indexMng?: number;
   sonClass?: string;
+  readonly?:boolean
 }) {
   const { code } = useWrStore((state) => state);
 
@@ -67,7 +69,10 @@ export default function MngRegFormDetail({
                             field.onChange(date),
                         }}
                         selectClass={"w-full"}
-                        disabled={formHead.option === "disabled" ? true : false}
+                        readOnly={readonly
+                          //||   formHead.option === "disabled" ? true : false
+
+                        }
 
                       />
                     ) : formHead.type === "number" ? (
@@ -81,7 +86,9 @@ export default function MngRegFormDetail({
                           );
                         }}
                         value={formatCommaNumber(field.value)}
-                        readOnly={formHead.option === "readOnly" ? true : false}
+                        readOnly={readonly
+                        //  || formHead.option === "readOnly" ? true : false
+                        }
                         disabled={formHead.option === "disabled" ? true : false}
                         maxLength={numSize}
                       />
@@ -103,7 +110,9 @@ export default function MngRegFormDetail({
                             }
                             onSelectValue={field.onChange}
                             value={field.value?.trim() ?? (Array.isArray(potentialOptions) && potentialOptions[0]?.val)}
-                            readOnly={formHead.option === "readOnly"}
+                            readOnly={readonly
+                           //   || formHead.option === "readOnly"
+                            }
                           />
                         );
                       })()
@@ -113,7 +122,9 @@ export default function MngRegFormDetail({
                         type="text"
                         value={field.value ?? ""}
                         onChange={field.onChange}
-                        readOnly={formHead.option === "readOnly" ? true : false}
+                        readOnly={readonly
+                         // || formHead.option === "readOnly" ? true : false
+                        }
                         disabled={formHead.option === "disabled" ? true : false}
                         maxLength={txtSize}
                       />

apps/wr/components/ui/form/fcltReg/rainReg/rainRegForm.tsx

@@ -511,6 +511,7 @@ export default function RainRegForm({
                         selectArray={code.bdstIncenYn}
                         onSelectValue={readonly ? () => { } : field.onChange}
                         value={field.value ?? code.yn[0]?.val}
+                        readOnly={readonly}
                       />
                     </FormUi>
                   )}

apps/wr/components/ui/modal/chkgd/chkgdModal/chkgdModal.tsx

@@ -8,7 +8,7 @@ import { Button } from "@common/components/ui";
 import React, { useEffect, useState } from "react";
 import type { z } from "zod";
 
-export default function ChkgdModal({ type, obj, setIsModal }: { type: string; obj: any, setIsModal: (open: boolean) => void }) {
+export default function ChkgdModal({ type, obj, setIsModal, readonly }: { type: string; obj: any, setIsModal: (open: boolean) => void, readonly: boolean  }) {
   const {
     rainChkgdn,
     rswtChkgdn,
@@ -247,7 +247,7 @@ export default function ChkgdModal({ type, obj, setIsModal }: { type: string; ob
               }
             ></Title>
             {!rainChkSttn.isSttn ? (
-              <Button className="mt-8 mr-7" onClick={allDataUpdate}>
+              <Button className="mt-8 mr-7" onClick={allDataUpdate} disabled={!readonly}>
                 저장
               </Button>
             ) : (
@@ -274,6 +274,7 @@ export default function ChkgdModal({ type, obj, setIsModal }: { type: string; ob
             setChGuidData={(data) => {
               setChGuidData(data);
             }}
+            readonly={readonly}
           />
           <div className="card-header">
             <h3 className="text-2xl font-medium text-label">
@@ -288,6 +289,7 @@ export default function ChkgdModal({ type, obj, setIsModal }: { type: string; ob
             setChGuidData={(data) => {
               setChGuidData(data);
             }}
+            readonly={readonly}
           />
 
           {type !== "RNB" && polutionData !== undefined ? (
@@ -310,6 +312,7 @@ export default function ChkgdModal({ type, obj, setIsModal }: { type: string; ob
                       setChGuidData={(data) => {
                         getPolutionData(data);
                       }}
+                      readonly={readonly}
                     />
                   </React.Fragment>
                 );

apps/wr/components/ui/modal/sttn/pbnstSttnModal/pbnstSttnModal.tsx

@@ -138,7 +138,6 @@ export function PbnstSttnModal({ data, titleVisible }: { data: customPbnst; titl
         });
       });
     }
-    console.log(tableData);
     if (tableData && tableData.length > 0) {
       setRuseTableData(tableData as any[]);
     }
@@ -216,9 +215,6 @@ export function PbnstSttnModal({ data, titleVisible }: { data: customPbnst; titl
         (usageTotalObj as any)[key] = val;
       }
       const tableData = [...inUsageData, ...outUsageData, usageTotalObj];
-      console.log("inusageData", inUsageData)
-      console.log("outUsageData", outUsageData)
-      console.log("tableData", tableData)
       setPrfData({
         inPrf: inUsageData,
         outPrf: outUsageData,
@@ -248,10 +244,6 @@ export function PbnstSttnModal({ data, titleVisible }: { data: customPbnst; titl
 
   }, [data, form])
 
-
-  useEffect(() => {
-    console.log("prfData", prfData);
-  }, [prfData])
   return (
     <>
       <div>

apps/wr/components/ui/modal/sttn/sttnDetailModal/coDatailModal.tsx

@@ -12,10 +12,13 @@ import { useForm } from "react-hook-form";
 import type { z } from "zod";
 
 export default function CoDetailModal({
-  formObj,onFormSubmit
+  formObj,
+  onFormSubmit,
+  readonly
 }: {
   formObj: any;
-  onFormSubmit:(values:customLdrmnt)=>void;
+  onFormSubmit: (values: customLdrmnt) => void;
+  readonly?: boolean;
 }) {
   const defaultValues: z.infer<typeof ldrmntZod> = ldrmntZod.parse({});
   const form = useForm<z.infer<typeof ldrmntZod>>({
@@ -52,7 +55,11 @@ export default function CoDetailModal({
               <h1 className="text-2xl font-medium text-label col-span-10">
                 잠재수요처 상세정보
               </h1>
-              <Button type="submit" className="col-start-12 col-span-1" size={"sm"}>
+              <Button type="submit"
+                className="col-start-12 col-span-1"
+                size={"sm"}
+                disabled={readonly}
+              >
                 저장
               </Button>
             </div>
@@ -71,7 +78,6 @@ export default function CoDetailModal({
                 </FormUi>
               )}
             />
-
             <div className="grid grid-cols-4 gap-2 mt-4">
               <div className="col-span-2">
                 <FormField
@@ -86,8 +92,9 @@ export default function CoDetailModal({
                         onChange={(e) => {
                           field.onChange(e.target.value);
                         }}
-                        value={field.value ??  ""}
+                        value={field.value ?? ""}
                         maxLength={txtSize}
+                        readOnly={readonly}
                       />
                     </FormUi>
                   )}
@@ -108,13 +115,13 @@ export default function CoDetailModal({
                         }}
                         value={field.value ?? ""}
                         maxLength={txtSize}
+                        readOnly={readonly}
                       />
                     </FormUi>
                   )}
                 />
               </div>
             </div>
-
             <div className="grid grid-cols-4 gap-2 mt-4">
               <div className="col-span-2">
                 <FormField
@@ -131,6 +138,7 @@ export default function CoDetailModal({
                         }}
                         value={field.value ?? ""}
                         maxLength={txtSize}
+                        readOnly={readonly}
                       />
                     </FormUi>
                   )}
@@ -151,6 +159,7 @@ export default function CoDetailModal({
                         }}
                         value={field.value ?? ""}
                         maxLength={txtSize}
+                        readOnly={readonly}
                       />
                     </FormUi>
                   )}
@@ -173,6 +182,7 @@ export default function CoDetailModal({
                         }}
                         value={field.value ?? ""}
                         maxLength={txtSize}
+                        readOnly={readonly}
                       />
                     </FormUi>
                   )}
@@ -193,6 +203,7 @@ export default function CoDetailModal({
                         }}
                         value={field.value ?? ""}
                         maxLength={txtSize}
+                        readOnly={readonly}
                       />
                     </FormUi>
                   )}
@@ -213,6 +224,7 @@ export default function CoDetailModal({
                         }}
                         value={field.value ?? ""}
                         maxLength={txtSize}
+                        readOnly={readonly}
                       />
                     </FormUi>
                   )}
@@ -235,12 +247,12 @@ export default function CoDetailModal({
                         }}
                         value={field.value ?? ""}
                         maxLength={txtSize}
+                        readOnly={readonly}
                       />
                     </FormUi>
                   )}
                 />
               </div>
-
               <div className="col-span-2">
                 <FormField
                   control={form.control}
@@ -256,6 +268,7 @@ export default function CoDetailModal({
                         }}
                         value={field.value ?? ""}
                         maxLength={txtSize}
+                        readOnly={readonly}
                       />
                     </FormUi>
                   )}
@@ -278,6 +291,7 @@ export default function CoDetailModal({
                         }}
                         value={field.value ?? ""}
                         maxLength={txtSize}
+                        readOnly={readonly}
                       />
                     </FormUi>
                   )}
@@ -298,6 +312,7 @@ export default function CoDetailModal({
                         }}
                         value={field.value ?? ""}
                         maxLength={txtSize}
+                        readOnly={readonly}
                       />
                     </FormUi>
                   )}
@@ -318,14 +333,13 @@ export default function CoDetailModal({
                         }}
                         value={field.value ?? ""}
                         maxLength={13}
+                        readOnly={readonly}
                       />
                     </FormUi>
                   )}
                 />
               </div>
             </div>
-
-
             <div className="grid grid-cols-5 gap-2 mt-4">
               <div className="col-span-1">
                 <FormField
@@ -344,6 +358,7 @@ export default function CoDetailModal({
                         value={formatCommaNumber(field.value)}
                         min={0}
                         maxLength={8}
+                        readOnly={readonly}
                       />
                     </FormUi>
                   )}
@@ -365,6 +380,7 @@ export default function CoDetailModal({
                         value={formatCommaNumber(field.value)}
                         min={0}
                         maxLength={8}
+                        readOnly={readonly}
                       />
                     </FormUi>
                   )}
@@ -386,6 +402,7 @@ export default function CoDetailModal({
                         value={formatCommaNumber(field.value)}
                         min={0}
                         maxLength={8}
+                        readOnly={readonly}
                       />
                     </FormUi>
                   )}
@@ -407,6 +424,7 @@ export default function CoDetailModal({
                         value={formatCommaNumber(field.value)}
                         min={0}
                         maxLength={8}
+                        readOnly={readonly}
                       />
                     </FormUi>
                   )}
@@ -434,7 +452,6 @@ export default function CoDetailModal({
                 />
               </div>
             </div>
-
             <div className="grid grid-cols-12 gap-2 mt-4">
               <div className="col-span-4">
                 <FormField
@@ -451,6 +468,7 @@ export default function CoDetailModal({
                         }}
                         value={field.value ?? ""}
                         maxLength={txtSize}
+                        readOnly={readonly}
                       />
                     </FormUi>
                   )}
@@ -471,6 +489,7 @@ export default function CoDetailModal({
                         }}
                         value={field.value ?? ""}
                         maxLength={txtSize}
+                        readOnly={readonly}
                       />
                     </FormUi>
                   )}
@@ -491,13 +510,13 @@ export default function CoDetailModal({
                         }}
                         value={field.value ?? ""}
                         maxLength={txtSize}
+                        readOnly={readonly}
                       />
                     </FormUi>
                   )}
                 />
               </div>
             </div>
-
             <div className="grid grid-cols-12 gap-2 mt-4">
               <div className="col-span-4">
                 <FormField
@@ -514,6 +533,7 @@ export default function CoDetailModal({
                         }}
                         value={field.value ?? ""}
                         maxLength={txtSize}
+                        readOnly={readonly}
                       />
                     </FormUi>
                   )}
@@ -534,6 +554,7 @@ export default function CoDetailModal({
                         }}
                         value={field.value ?? ""}
                         maxLength={txtSize}
+                        readOnly={readonly}
                       />
                     </FormUi>
                   )}
@@ -554,14 +575,13 @@ export default function CoDetailModal({
                         }}
                         value={field.value ?? ""}
                         maxLength={txtSize}
+                        readOnly={readonly}
                       />
                     </FormUi>
                   )}
                 />
               </div>
             </div>
-
-
             <div className="grid grid-cols-12 gap-2 mt-4">
               <div className="col-span-4">
                 <FormField
@@ -578,6 +598,7 @@ export default function CoDetailModal({
                         }}
                         value={field.value ?? ""}
                         maxLength={txtSize}
+                        readOnly={readonly}
                       />
                     </FormUi>
                   )}
@@ -598,6 +619,7 @@ export default function CoDetailModal({
                         }}
                         value={field.value ?? ""}
                         maxLength={txtSize}
+                        readOnly={readonly}
                       />
                     </FormUi>
                   )}
@@ -618,14 +640,13 @@ export default function CoDetailModal({
                         }}
                         value={field.value ?? ""}
                         maxLength={txtSize}
+                        readOnly={readonly}
                       />
                     </FormUi>
                   )}
                 />
               </div>
             </div>
-
-
             <div className="grid grid-cols-12 gap-2 mt-4">
               <div className="col-span-4">
                 <FormField
@@ -642,6 +663,7 @@ export default function CoDetailModal({
                         }}
                         value={field.value ?? ""}
                         maxLength={txtSize}
+                        readOnly={readonly}
                       />
                     </FormUi>
                   )}
@@ -662,6 +684,7 @@ export default function CoDetailModal({
                         }}
                         value={field.value ?? ""}
                         maxLength={txtSize}
+                        readOnly={readonly}
                       />
                     </FormUi>
                   )}
@@ -682,13 +705,13 @@ export default function CoDetailModal({
                         }}
                         value={field.value ?? ""}
                         maxLength={txtSize}
+                        readOnly={readonly}
                       />
                     </FormUi>
                   )}
                 />
               </div>
             </div>
-
             <div className="grid grid-cols-12 gap-2 mt-4">
               <div className="col-span-4">
                 <FormField
@@ -705,6 +728,7 @@ export default function CoDetailModal({
                         }}
                         value={field.value ?? ""}
                         maxLength={txtSize}
+                        readOnly={readonly}
                       />
                     </FormUi>
                   )}
@@ -725,6 +749,7 @@ export default function CoDetailModal({
                         }}
                         value={field.value ?? ""}
                         maxLength={txtSize}
+                        readOnly={readonly}
                       />
                     </FormUi>
                   )}
@@ -745,6 +770,7 @@ export default function CoDetailModal({
                         }}
                         value={field.value ?? ""}
                         maxLength={txtSize}
+                        readOnly={readonly}
                       />
                     </FormUi>
                   )}
@@ -767,6 +793,7 @@ export default function CoDetailModal({
                         }}
                         value={field.value ?? ""}
                         maxLength={txtSize}
+                        readOnly={readonly}
                       />
                     </FormUi>
                   )}
@@ -787,13 +814,13 @@ export default function CoDetailModal({
                         }}
                         value={field.value ?? ""}
                         maxLength={txtSize}
+                        readOnly={readonly}
                       />
                     </FormUi>
                   )}
                 />
               </div>
             </div>
-
             <div className="grid grid-cols-4 gap-2 mt-4">
               <div className="col-span-2">
                 <FormField
@@ -810,6 +837,7 @@ export default function CoDetailModal({
                         }}
                         value={field.value ?? ""}
                         maxLength={50}
+                        readOnly={readonly}
                       />
                     </FormUi>
                   )}
@@ -830,6 +858,7 @@ export default function CoDetailModal({
                         }}
                         value={field.value ?? ""}
                         maxLength={50}
+                        readOnly={readonly}
                       />
                     </FormUi>
                   )}

apps/wr/components/ui/searchInput/searchInput.tsx

@@ -1,3 +1,4 @@
+import { Input } from "@common/components/ui";
 import React, { useCallback, useEffect, useRef, useState } from "react";
 
 type SearchType = {
@@ -10,6 +11,7 @@ type thisProps = {
   setValue: (searchNm?: string) => void;
   setRtnData: (rtnData: any) => void;
   searchList?: any[];
+  readonly?:boolean
 };
 export default function SearchInputText({
   label = undefined,
@@ -17,6 +19,7 @@ export default function SearchInputText({
   setValue = () => {},
   setRtnData = () => {},
   searchList = undefined,
+  readonly = false, // 추가: readonly prop
 }: thisProps) {
  
   const [isOpen, setIsOpen] = useState(false);
@@ -65,13 +68,14 @@ export default function SearchInputText({
 
   return (
     <div ref={wrapperRef}>
-      <input
+      <Input
         type="text"
         value={textValue}
         onChange={handleInputChange}
         /* onFocus={() => setIsOpen(true)} */
         className="w-full h-[3.2rem] !text-xl pl-3 text-gray-600 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
         placeholder={`${label}을(를) 입력하세요`}
+        readOnly={readonly} // readonly 상태 적용 
       />
       {isOpen && (
         <div className=" z-1 w-full mt-2 bg-white border border-gray-300 rounded-md shadow-lg h-90 overflow-auto">

apps/wr/components/ui/table/chkgdTable/guideDetailTable/guideDetailTable.tsx

@@ -17,12 +17,14 @@ export function GuideDetailsTable({
   headList,
   upheadList,
   setChGuidData,
+  readonly
 }: {
   chgRes: any[];
   headList: TableUpperProps[];
   upheadList: chHeadType[];
   type: string;
   setChGuidData: (chgRes: any[]) => void;
+  readonly?: boolean;
 }) {
   const [inputData, setInputData] = useState<any[]>();
 
@@ -30,7 +32,6 @@ export function GuideDetailsTable({
     setInputData(chgRes);
   }, [chgRes]);
 
-
   useEffect(() => {
     setChGuidData(inputData ?? []);
 
@@ -43,7 +44,7 @@ export function GuideDetailsTable({
         <Table variant="secondary">
           <TableHeader className="font-bold">{headMakeprfmnc(headList, upheadList)}</TableHeader>
           <TableBody >
-            {InputTableBody(inputData ?? [], headList, setInputData)}
+            {InputTableBody(inputData ?? [], headList, setInputData, readonly)}
           </TableBody>
         </Table>
       </div>

apps/wr/components/ui/table/chkgdTable/rainChkgd/rainChkgdTable.tsx

@@ -25,6 +25,7 @@ export default function RainChkgdTable({
   pageNation,
   onPageChange,
   pageCount,
+  readonly,
 }: {
   detailUp: (data: rainChkZodType[]) => void;
   handleClick?: (data: any) => void;
@@ -33,6 +34,7 @@ export default function RainChkgdTable({
   pageNation: number;
   onPageChange: (page: number) => void;
   pageCount: number;
+  readonly: boolean;
 }) {
   const { code, rainChkgdn, rainChkSttn, getRainSttnExcel } = useWrStore((state) => state);
   const [makeTableData, setMakeTableData] = useState<any[]>([]);
@@ -191,7 +193,8 @@ export default function RainChkgdTable({
             handleChange,
             toggleSelection,
             selectedIds,
-            handleCellClick
+            handleCellClick,
+            readonly
           )}
         </TableBody>
       </Table>

apps/wr/components/ui/table/chkgdTable/rswtChkgd/rswtChkgdTable.tsx

@@ -26,6 +26,7 @@ export default function RswtChkgdTable({
   pageNation,
   onPageChange,
   pageCount,
+  readonly = false,
 }: {
   detaiRswtlUpdate: (data: rswtrChkDetailsZodType[]) => void;
   handleRswtClick?: (data: any) => void;
@@ -34,6 +35,7 @@ export default function RswtChkgdTable({
   pageNation: number;
   onPageChange: (page: number) => void;
   pageCount: number;
+  readonly:boolean
 }) {
   const { code, rswtChkgdn, rswtChkSttn,  rswtChkPolAndGuide, getRswtSttnExcel } = useWrStore(
     (state) => state
@@ -149,7 +151,8 @@ export default function RswtChkgdTable({
             handleChange,
             toggleSelection,
             selectedIds,
-            handleCellClick
+            handleCellClick,
+            readonly
           )}
         </TableBody>
       </Table>

apps/wr/components/ui/table/pbnstReg/ruseMngTableForm/ruseMngTableForm.tsx

@@ -35,6 +35,7 @@ type RuseMngTableProps = {
   indexBiz?: number;
   form?: any;
   formNm?: string;
+  readonly?: boolean;
 };
 
 const RuseMngTableForm = React.forwardRef<any, RuseMngTableProps>(
@@ -48,6 +49,7 @@ const RuseMngTableForm = React.forwardRef<any, RuseMngTableProps>(
       form,
       formNm,
       indexBiz,
+      readonly= false
     },
     ref
   ) => {
@@ -111,7 +113,7 @@ const RuseMngTableForm = React.forwardRef<any, RuseMngTableProps>(
                                   ? formatCommaNumber(field.value)
                                   : field.value || ""
                               }
-                              readOnly={head.readonly ? true : false}
+                              readOnly={readonly|| head.readonly ? true : false}
                               maxLength={head.maxLength?head.maxLength:15}
                             />
                           ) : head.type === "select" ? (
@@ -132,7 +134,7 @@ const RuseMngTableForm = React.forwardRef<any, RuseMngTableProps>(
                                   field.onChange(val);
                                 }
                               }}
-                              readOnly={head.readonly ? true : false}
+                              readOnly={ readonly||head.readonly ? true : false}
                             // Disabled prop removed as SelectBox does not support it
                             ></SelectBox>
                           ) : head.type === "date" ? (
@@ -149,14 +151,18 @@ const RuseMngTableForm = React.forwardRef<any, RuseMngTableProps>(
                                 },
                               }}
                               selectClass={"w-full"}
-                              readOnly={head.readonly ? true : false}
+                              readOnly={readonly||head.readonly ? true : false}
                             />
                           ) : head.type === "checkbox" ? (
                             <Checkbox
                               className=""
                               checked={field.value || false}
                               onCheckedChange={(checked) => {
-                                field.onChange(checked);
+                                if(readonly || head.readonly) {
+                                  return;
+                                }else{
+                                  field.onChange(checked);
+                                }
                               }}
                             ></Checkbox>
                           ) : (