팝업 크기 적용

- featureClickEventPopup.tsx 경로 수정
- 이전 시도, 시군구 리스트 삭제

.idea/.gitignore

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

apps/common/features/src/entities/posting/ui/posting-dialog.tsx

@@ -185,6 +185,15 @@ function PostingDialog({ postingType, postingTargets }: PostingDialogProps) {
       ...prev,
       [siteId]: value,
     }));
+
+    // 상시 선택 시 게시 기간 미설정
+    if (value === "99") {
+      handleUpdateFields(siteId)({
+        pstgPrdSeCd: value,
+      });
+      return;
+    }
+
     setRememberPeriodDate((prev) => ({
       ...prev,
       [siteId]: { from, to },

apps/common/features/src/pages/(post)/faq/ui/faq-page.tsx

@@ -20,7 +20,7 @@ import {
   Skeleton,
 } from "@common/components";
 import { AttachmentApi } from "@/entities/attachment";
-import { PostApi, type PostParams } from "@/entities/post";
+import { PostApi, PostPageGuard, type PostParams } from "@/entities/post";
 import { useAlertStore, useMenuStore, useUserStore } from "@/shared/lib";
 import { ENDPOINT } from "@/shared/config";
 import dayjs from "dayjs";
@@ -103,6 +103,7 @@ function FaqPage({ bbsId }: { bbsId: string }) {
   };
 
   return (
+    <PostPageGuard bbsId={bbsId}>
       <div className="card card-border !mt-6">
         <div className="card card-border">
           <form onSubmit={handleSubmit} className="flex items-center gap-2 p-2">
@@ -160,7 +161,9 @@ function FaqPage({ bbsId }: { bbsId: string }) {
             <div className="mb-4 flex items-center gap-2 rounded-sm border border-border bg-background p-4">
               <Checkbox
                 id="all-select"
-              checked={selectedPostNumbers.length === postList?.content.length}
+                checked={
+                  selectedPostNumbers.length === postList?.content.length
+                }
                 onClick={(e) => e.stopPropagation()}
                 onCheckedChange={handleAllCheckboxChange}
               />
@@ -240,6 +243,7 @@ function FaqPage({ bbsId }: { bbsId: string }) {
           </div>
         </div>
       </div>
+    </PostPageGuard>
   );
 }
 

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/middleware.ts

@@ -1,23 +1,38 @@
 import { NextRequest, NextResponse } from "next/server";
-import { CLAIM_NAME, AUTH_USER_ID } from "./src/shared/config";
+import {
+  CLAIM_NAME,
+  AUTH_USER_ID,
+  PORT,
+  PROXY_HOST,
+  SERVER_API_URL,
+  SITE_ID,
+} from "./src/shared/config";
 
 const serverApiUrl =
   process.env.NEXT_PUBLIC_SERVER_API_URL ?? "http://localhost:3000";
 
+const linkBackendApiHost = process.env.NEXT_PUBLIC_LINK_BACKEND_API_HOST ?? "http://localhost:8080";
+
 export function middleware(req: NextRequest) {
   const pathname = req.nextUrl.pathname;
   const searchParams = req.nextUrl.searchParams;
 
+  const logMessages: string[] = [
+    `[Middleware Request] ${new Date().toISOString()}`,
+    `[Environment]\n  Mode: ${process.env.NODE_ENV}\n  Port: ${PORT}\n  Proxy Host: ${PROXY_HOST}\n  Server API URL: ${SERVER_API_URL}\n  Site ID: ${SITE_ID}`,
+    `[Request]\n  Original Pathname: ${pathname}`,
+  ];
 
   if (pathname.startsWith("/server")) {
-    
-    const decodedParams = Array.from(searchParams.entries())
-    .map(([key, value]) => `${key}=${decodeURIComponent(value)}`)
-    .join("&");
-
+    const queryParams = searchParams.toString();
     const newUrl = `${serverApiUrl}${pathname.replace("/server", "")}${
-      decodedParams ? `?${decodedParams}` : ""
+      queryParams ? `?${queryParams}` : ""
     }`;
+
+    logMessages.push(`  Rewritten URL: ${newUrl}`);
+    logMessages.push("\n--------------------------------\n");
+    console.log(logMessages.join("\n"));
+
     return NextResponse.rewrite(new URL(newUrl));
   }
 
@@ -30,6 +45,34 @@ export function middleware(req: NextRequest) {
     if (token) requestHeaders.set(CLAIM_NAME, token);
     if (userId) requestHeaders.set(AUTH_USER_ID, userId);
 
+    logMessages.push(`  Rewritten URL: ${newUrl}`);
+    logMessages.push("\n--------------------------------\n");
+    console.log(logMessages.join("\n"));
+
+    return NextResponse.rewrite(new URL(newUrl), {
+      headers: requestHeaders,
+    });
+  }
+
+  if (pathname.startsWith("/api/link")) {
+    const requestHeaders = new Headers(req.headers);
+    const token = req.cookies.get(CLAIM_NAME)?.value;
+    const userId = req.cookies.get(AUTH_USER_ID)?.value;
+    
+    // /api/link 경로를 제거하고 백엔드 API 경로로 변환
+    const apiPath = pathname.replace("/api/link", "");
+    const queryParams = searchParams.toString();
+    const newUrl = `${linkBackendApiHost}${apiPath}${
+      queryParams ? `?${queryParams}` : ""
+    }`;
+
+    if (token) requestHeaders.set(CLAIM_NAME, token);
+    if (userId) requestHeaders.set(AUTH_USER_ID, userId);
+
+    logMessages.push(`  Link API Rewritten URL: ${newUrl}`);
+    logMessages.push("\n--------------------------------\n");
+    console.log(logMessages.join("\n"));
+
     return NextResponse.rewrite(new URL(newUrl), {
       headers: requestHeaders,
     });
@@ -39,9 +82,11 @@ export function middleware(req: NextRequest) {
     return NextResponse.redirect(new URL("/dashboard", req.url));
   }
 
+  logMessages.push("\n--------------------------------\n");
+  console.log(logMessages.join("\n"));
   return NextResponse.next();
 }
 
 export const config = {
-  matcher: ["/server/:path*", "/attach-service/:path*", "/"],
+  matcher: ["/server/:path*", "/attach-service/:path*", "/api/link/:path*", "/"],
 };

apps/cs/src/entities/content/model/contents-interface.ts

@@ -67,11 +67,22 @@ export const contentsDetailSchema = z.object({
   useYn: z.string(),
 });
 
-export const contentsFormSchema = contentsDetailSchema.omit({
+export const contentsFormSchema = contentsDetailSchema
+  .omit({
     contsVer: true,
     aprvDt: true,
     autzr: true,
-});
+  })
+  .extend({
+    contsSn: z.number().optional(),
+    aprvCd: z
+      .enum([
+        CONTENTS_APPROVE_STATUS.DRAFT,
+        CONTENTS_APPROVE_STATUS.REQUESTED,
+        CONTENTS_APPROVE_STATUS.APPROVED,
+      ])
+      .optional(),
+  });
 
 export type Contents = z.infer<typeof contentsSchema>;
 export type ContentsDetail = z.infer<typeof contentsDetailSchema>;

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>(
+            `/api/link/getLinkList`,
+            { params }
+        );
+        return response.data;
+    }
+
+    public async getLinkInfo(linkSn: string): Promise<LinkInfo> {
+        const response = await axios.get<LinkInfo>(
+            `/api/link/getLinkInfo/${linkSn}`,
+        );
+        return response.data;
+    }
+
+    public async linkQuickStart(linkSn: string): Promise<string> {
+        const response = await axios.patch<string>(
+            `/api/link/linkQuickStart/${linkSn}`,
+        );
+        return response.data;
+    }
+
+    public async updateLinkInfo(data: LinkFormData): Promise<void> {
+        await axios.put<void>(
+            '/api/link/updateLinkInfo',
+            data,
+        );
+    }
+
+    public async insertLinkInfo(data: LinkFormData): Promise<void> {
+        await axios.post<void>(
+            '/api/link/insertLinkInfo',
+            data,
+        );
+    }
+
+    public async deleteLink(linkSn: string): Promise<void> {
+        await axios.delete<void>(
+            `/api/link/deleteLink/${linkSn}`,
+        );
+    }
+
+    public async getLinkLogList(params: LinkSearchParam): Promise<LinkLogList> {
+        const response = await axios.get<LinkLogList>(
+            '/api/link/selectLinkLoglist',
+            { params }
+        );
+        return response.data;
+    }
+
+    public async getLinkStatsList(params: LinkSearchParam): Promise<LinkStatsList> {
+        const response = await axios.get<LinkStatsList>(
+            '/api/link/selectLinkStats',
+            { params }
+        );
+        return response.data;
+    }
+
+    public async getLinkVrblList(linkSn: string): Promise<LinkVrblList> {
+        const response = await axios.get<LinkVrblList>(
+            `/api/link/getLinkVrblList/${linkSn}`,
+        );
+        return response.data;
+    }
+
+    public async insertLinkVrbl(data: LinkVrblFormData): Promise<number> {
+        const response = await axios.post<number>(
+            '/api/link/insertLinkVrbl',
+            data,
+        );
+
+        return response.data;
+    }
+
+    public async deleteLinkVrbl(data: string[]): Promise<void> {
+        await axios.delete<void>(
+            '/api/link/deleteLinkVrbl',
+            {
+                data
+            }
+        );
+    }
+
+    public async getLinkVrblInfo(linkVrblSn: string): Promise<LinkVrbl> {
+        const response = await axios.get<LinkVrbl>(
+            `/api/link/getLinkVrblInfo/${linkVrblSn}`,
+        );
+        return response.data;
+    }
+
+    public async updateLinkVrblInfo(data: LinkVrblFormData): Promise<void> {
+        await axios.put<void>(
+            '/api/link/updateLinkVrblInfo',
+            data,
+        );
+    }
+
+    public async getLinkTableInfo(linkSn: string): Promise<LinkTable> {
+        const response = await axios.get<LinkTable>(
+            `/api/link/getLinkTableInfo/${linkSn}`,
+        );
+        return response.data;
+    }
+
+    public async getLinkTableColList(linkSn: string): Promise<LinkTableColumnsList> {
+        const response = await axios.get<LinkTableColumnsList>(
+            `/api/link/getLinkTableColList/${linkSn}`,
+        );
+        return response.data;
+    }
+
+    public async getLinkTableColInfo(params: { colSn: string; tblSn:string; }): Promise<LinkTableColumns> {
+        const response = await axios.get<LinkTableColumns>(
+            '/api/link/getLinkTableColInfo',
+            { params }
+        );
+        return response.data;
+    }
+
+    public async insertLinkTableCol(data: LinkTableColData): Promise<void> {
+        await axios.post<void>(
+            '/api/link/insertLinkTableCol',
+            data
+        );
+    }
+
+    public async deleteLinkTableCol(data: string[]): Promise<void> {
+        await axios.delete<void>(
+            '/api/link/deleteLinkTableCol',
+            {
+                data
+            },
+        );
+    }
+
+    public async updateLinkTableCol(data: LinkTableColData): Promise<void> {
+        axios.put<void>(
+            '/api/link/updateLinkTableCol',
+            data,
+        );
+    }
+
+    public async insertLinkTableInfo(data: LinkTableFormData): Promise<void> {
+        await axios.post<void>(
+            '/api/link/insertLinkTableInfo',
+            data
+        );
+    }
+
+    public async updateLinkTableInfo(data: LinkTableFormData): Promise<void> {
+        await axios.put<void>(
+            '/api/link/updateLinkTableInfo',
+            data
+        );
+    }
+
+    public async countLinkTblNm(tblNm: string): Promise<{count: number, tbl_sn: string}> {
+        const response = await axios.get<{count: number, tbl_sn: string}>(
+            `/api/link/countLinkTblNm/${tblNm}`,
+        );
+        return response.data;
+    }
+
+    public async updateLinkResultCode(linkSn: string): Promise<void> {
+        await axios.patch<void>(
+            `/api/link/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/entities/menu/api/menu-service.ts

@@ -6,6 +6,7 @@ import type {
   MenuItem,
   MenuFormData,
   MenuTemporarilyStoredData,
+  SiteMapFormData,
 } from "../model/menu-interface";
 
 export class MenuApiService implements MenuService {
@@ -65,6 +66,14 @@ export class MenuApiService implements MenuService {
     );
     return response.data;
   }
+
+  public async publishSiteMap(data: SiteMapFormData["siteMap"]): Promise<void> {
+    const response = await client.post<void>(
+      `${ENDPOINT.CMS_SERVICE.MENUS}/sitemap/publish`,
+      data,
+    );
+    return response.data;
+  }
 }
 
 export const MenuApi = new MenuApiService();

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

@@ -2,8 +2,11 @@ export { MenuApi } from "./api/menu-service";
 export {
   MENU_TYPE,
   menuFormSchema,
+  siteMapFormSchema,
   type MenuType,
   type MenuItem,
   type MenuFormData,
+  type SiteMapFormData,
+  type SiteMapPayloadData,
 } from "./model/menu-interface";
 export { MenuWrapper } from "./lib/menu-wrapper";

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

@@ -72,8 +72,19 @@ export const menuFormSchema = z.object({
   menuPicDsgnYmd: z.string().nullish(),
 });
 
-export type MenuFormData = z.infer<typeof menuFormSchema>;
+export const siteMapPayloadSchema = z.object({
+  menuCd: z.number(),
+  menuSubKornNm: z.string(),
+  otptYn: z.string(),
+});
 
+export const siteMapFormSchema = z.object({
+  siteMap: z.array(siteMapPayloadSchema),
+});
+
+export type MenuFormData = z.infer<typeof menuFormSchema>;
+export type SiteMapFormData = z.infer<typeof siteMapFormSchema>;
+export type SiteMapPayloadData = z.infer<typeof siteMapPayloadSchema>;
 export type Menu = Omit<MenuFormData, "iconNm"> & {
   menuCd: number;
   iconName?: string;
@@ -92,4 +103,5 @@ export interface MenuService {
   getMenuTemporarilyStoredData: (
     menuCd: number,
   ) => Promise<MenuTemporarilyStoredData[]>;
+  publishSiteMap: (data: SiteMapFormData["siteMap"]) => Promise<void>;
 }

apps/cs/src/entities/posting/ui/posting-dialog.tsx

@@ -194,6 +194,15 @@ function PostingDialog({
       ...prev,
       [siteId]: value,
     }));
+
+    // 상시 선택 시 게시 기간 미설정
+    if (value === "99") {
+      handleUpdateFields(siteId)({
+        pstgPrdSeCd: value,
+      });
+      return;
+    }
+
     setRememberPeriodDate((prev) => ({
       ...prev,
       [siteId]: { from, to },

apps/cs/src/entities/tree-menu/index.ts

@@ -0,0 +1,2 @@
+export { TreeMenuApi } from "./api/tree-menu-service";
+export type { TreeMenu, TreeNode } from "./model/tree-menu-interface";

apps/cs/src/entities/tree-menu/model/tree-menu-interface.ts

@@ -19,6 +19,7 @@ export interface TreeMenu extends Omit<TreeNode, "name" | "icon" | "children"> {
   qrcd?: string;
   useYn: string;
   otptYn: string;
+  menuSubKornNm?: string;
   requiredUrlPath?: boolean;
 }
 

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

@@ -4,6 +4,7 @@ export {
   userSaveSchema,
   userPasswordUpdateSchema,
   userUpdateSchema,
+  type UserStateCode,
   type UserSearchParams,
   type UserListResponse,
   type UserSaveData,

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

@@ -9,7 +9,8 @@ export const USER_STATE_CODE = {
   삭제: "09",
 } as const;
 
-type UserStateCode = (typeof USER_STATE_CODE)[keyof typeof USER_STATE_CODE];
+export type UserStateCode =
+  (typeof USER_STATE_CODE)[keyof typeof USER_STATE_CODE];
 
 // 사용자 검색 파라미터
 export interface UserSearchParams extends PageableParams {

apps/cs/src/pages/(post)/faq/ui/faq-page.tsx

@@ -23,6 +23,7 @@ import {
 import { AttachmentApi } from "@/entities/attachment";
 import {
   PostApi,
+  PostPageGuard,
   deleteReasonMessages,
   type PostParams,
 } from "@/entities/post";
@@ -120,6 +121,7 @@ function FaqPage({ bbsId }: { bbsId: string }) {
   };
 
   return (
+    <PostPageGuard bbsId={bbsId}>
       <div className="card card-border !mt-6">
         <div className="card card-border">
           <form onSubmit={handleSubmit} className="flex items-center gap-2 p-2">
@@ -177,7 +179,9 @@ function FaqPage({ bbsId }: { bbsId: string }) {
             <div className="mb-4 flex items-center gap-2 rounded-sm border border-border bg-background p-4">
               <Checkbox
                 id="all-select"
-              checked={selectedPostNumbers.length === postList?.content.length}
+                checked={
+                  selectedPostNumbers.length === postList?.content.length
+                }
                 onClick={(e) => e.stopPropagation()}
                 onCheckedChange={handleAllCheckboxChange}
               />
@@ -257,6 +261,7 @@ function FaqPage({ bbsId }: { bbsId: string }) {
           </div>
         </div>
       </div>
+    </PostPageGuard>
   );
 }
 

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

@@ -38,7 +38,7 @@ function AdminPage() {
   const alert = useAlertStore((state) => state.setMessage);
   const { confirm } = useConfirm();
 
-  const [keywordType, setKeywordType] = useState("");
+  const [keywordType, setKeywordType] = useState("userId");
   const [keyword, setKeyword] = useState("");
   const [grpId, setGrpId] = useState("");
   const [searchParams, setSearchParams] = useState<UserSearchParams>({

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

@@ -6,7 +6,6 @@ import { keepPreviousData, useQuery } from "@tanstack/react-query";
 import { getCoreRowModel, type PaginationState } from "@tanstack/react-table";
 import {
   Button,
-  DateRangePicker,
   Input,
   Label,
   Select,
@@ -15,14 +14,14 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@common/components";
-import { ApiLogApi } from "@/entities/apilog";
-import { type ApiLogParams } from "@/entities/apilog/model/apilog-interface";
+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;
+  from?: Date | undefined;
   to?: Date | undefined;
 };
 
@@ -36,6 +35,7 @@ function ApiLogPage() {
     pageIndex: 0,
     pageSize: 10,
   });
+  const [presetDateRange, setPresetDateRange] = useState("");
   const [dateRange, setDateRange] = useState<DateRange>(defaultDateRange);
   const [userId, setUserId] = useState("");
   const [apiHttpPmhd, setApiHttpPmhd] = useState("");
@@ -85,8 +85,10 @@ function ApiLogPage() {
       ...searchParams,
       userId,
       apiHttpPmhd,
-      dmndDtStart: dayjs(dateRange.from).format("YYYY-MM-DD"),
-      dmndDtEnd: dayjs(dateRange.to).format("YYYY-MM-DD"),
+      dmndDtStart: dateRange.from
+        ? dayjs(dateRange.from).format("YYYY-MM-DD")
+        : "",
+      dmndDtEnd: dateRange.to ? dayjs(dateRange.to).format("YYYY-MM-DD") : "",
     });
   };
 
@@ -127,21 +129,22 @@ function ApiLogPage() {
       default:
         presetDateRange = undefined;
     }
+    setPresetDateRange(value);
     setDateRange(presetDateRange || defaultDateRange);
   };
 
+  const handleDateRangeChange = (dateRange: DateRange) => {
+    setDateRange(dateRange);
+    setPresetDateRange("");
+  };
+
   return (
     <div className="flex-1">
       <div className="card card-border">
         <form onSubmit={handleSubmit} className="flex items-center gap-2 p-2">
           <Label className="mr-2">조회기간</Label>
-          <DateRangePicker
-            value={dateRange}
-            onValueChange={(value) => setDateRange(value || defaultDateRange)}
-          >
-            <div className="card card-border flex items-center gap-2">
-              <Select onValueChange={handlePresetDateRange}>
-                <SelectTrigger>
+          <Select value={presetDateRange} onValueChange={handlePresetDateRange}>
+            <SelectTrigger className="w-[12rem]">
               <SelectValue placeholder="기간 선택" className="w-[24rem]" />
             </SelectTrigger>
             <SelectContent>
@@ -150,8 +153,10 @@ function ApiLogPage() {
               <SelectItem value="3M">3개월</SelectItem>
             </SelectContent>
           </Select>
-            </div>
-          </DateRangePicker>
+          <InputDateRangePicker
+            dateRange={dateRange}
+            setDateRange={handleDateRangeChange}
+          />
           <Label className="ml-4 mr-2 text-label">사용자ID</Label>
           <Input
             value={userId}

apps/cs/src/pages/banner/model/posting-table-columns.tsx

@@ -35,9 +35,14 @@ export const columns: ColumnDef<Post>[] = [
     accessorKey: "pstgPrdSeNm",
     header: "게시기간",
     cell: ({ row }) => {
+      const pstgPrdSeCd = row.original.pstgPrdSeCd;
       const pstgPrdSeNm = row.original.pstgPrdSeNm;
       const pstgBgngDt = row.original.pstgBgngDt;
       const pstgEndDt = row.original.pstgEndDt;
+
+      if (pstgPrdSeCd === "99") {
+        return pstgPrdSeNm;
+      }
       return `${pstgPrdSeNm} (${dayjs(pstgBgngDt).format("YYYY-MM-DD")} ~ ${dayjs(pstgEndDt).format("YYYY-MM-DD")})`;
     },
   },

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

@@ -34,7 +34,7 @@ function CreatePage() {
       <div className="card-header">
         <h3 className="text-2xl font-medium text-label">콘텐츠 등록</h3>
       </div>
-      <ContentsForm form={form} handleSave={createContents} />
+      <ContentsForm isEditable form={form} handleSave={createContents} />
     </div>
   );
 }

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

@@ -1,5 +1,6 @@
 "use client";
 
+import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { useConfirm } from "@frontend-opensource/use-react-hooks";
@@ -24,6 +25,7 @@ import { useAlertStore, useMutationWrapper } from "@/shared/lib";
 import { ContentsForm } from "./contents-form";
 
 function ModifyPage({ sequential }: { sequential: string }) {
+  const router = useRouter();
   const { confirm } = useConfirm();
   const queryClient = useQueryClient();
   const alert = useAlertStore((state) => state.setMessage);
@@ -51,10 +53,12 @@ function ModifyPage({ sequential }: { sequential: string }) {
     mutationFn: (data: ContentsFormData) => ContentsApi.createContents(data),
     onSuccess: () => {
       setContsVer(0);
-      alert("수정되었습니다.");
+      alert("수정되었습니다.", () => {
         queryClient.invalidateQueries({
           queryKey: [ENDPOINT.CMS_SERVICE.CONTENTS_DETAILS, contsSn],
         });
+        router.back();
+      });
     },
   });
 
@@ -62,7 +66,7 @@ function ModifyPage({ sequential }: { sequential: string }) {
     mutationFn: (data: ContentsFormData) =>
       ContentsApi.updateContents(contsSn, contsVer, data),
     onSuccess: () => {
-      alert("수정되었습니다.");
+      alert("수정되었습니다.", router.back);
     },
   });
 
@@ -70,10 +74,12 @@ function ModifyPage({ sequential }: { sequential: string }) {
     mutationFn: () => ContentsApi.deleteContents(contsSn, contsVer),
     onSuccess: () => {
       setContsVer(0);
-      alert("삭제되었습니다.");
+      alert("삭제되었습니다.", () => {
         queryClient.invalidateQueries({
           queryKey: [ENDPOINT.CMS_SERVICE.CONTENTS_DETAILS, contsSn],
         });
+        router.back();
+      });
     },
   });
 

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

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

apps/cs/src/pages/dashboard/lib/utils.ts

@@ -0,0 +1,49 @@
+import type { ChartData, ChartDataset } from "chart.js";
+import { getCssVariableValue } from "@common/components";
+import type {
+  MenuStatisticsContent,
+  SiteStatisticsContent,
+} from "../model/dashboard-interface";
+
+export function processSiteAccessData(
+  siteAccessList: SiteStatisticsContent[],
+): ChartData<"line">["datasets"] {
+  const siteGroups: Record<string, ChartDataset> = siteAccessList.reduce(
+    (acc, item) => {
+      if (!acc[item.siteNm]) {
+        acc[item.siteNm] = {
+          label: item.siteNm,
+          data: Array(24).fill(0), // 24시간 데이터 초기화
+          borderColor: getCssVariableValue(
+            `--chart-${Math.floor(Math.random() * 5) + 1}`,
+          ),
+        };
+      }
+
+      // 시간대별 접속 카운트 누적
+      const hourIndex = parseInt(item.accessHour, 10);
+      if (!isNaN(hourIndex) && hourIndex >= 0 && hourIndex < 24) {
+        acc[item.siteNm]!.data[hourIndex] = item.accessCnt;
+      }
+
+      return acc;
+    },
+    {} as Record<string, ChartDataset>,
+  );
+
+  return Object.values(siteGroups) as ChartData<"line">["datasets"];
+}
+
+export function processMenuAccessData(
+  menuAccessList: MenuStatisticsContent[],
+): ChartData<"bar">["datasets"] {
+  const data = menuAccessList.map((item) => item.accessCnt);
+
+  return [
+    {
+      label: "메뉴별 접속 횟수",
+      data,
+      backgroundColor: "rgb(32, 148, 250)",
+    },
+  ] as ChartData<"bar">["datasets"];
+}

apps/cs/src/pages/dashboard/model/chart-data.ts

@@ -0,0 +1,172 @@
+import { type ChartData, type ChartOptions } from "chart.js";
+
+const commonData = {
+  labels: ["1", "2", "3", "4", "5", "6", "7"],
+  datasets: [
+    {
+      fill: true,
+      pointRadius: 0,
+      tension: 0.5,
+    },
+  ],
+};
+
+const commonOptions = {
+  responsive: true,
+  maintainAspectRatio: false,
+  plugins: {
+    legend: {
+      display: false,
+    },
+  },
+  scales: {
+    x: {
+      display: false,
+    },
+    y: {
+      display: false,
+    },
+  },
+};
+
+export const chartData: Record<
+  string,
+  { data: ChartData<"line" | "bar">; options: ChartOptions<"line" | "bar"> }
+> = {
+  memberChartData: {
+    data: {
+      ...commonData,
+      datasets: [
+        {
+          ...commonData.datasets[0],
+          data: [8, 10, 7, 12, 9, 13, 12],
+          borderColor: "rgba(255, 255, 255, 0.6)",
+          backgroundColor: "rgba(255, 255, 255, 0.1)",
+        },
+      ],
+    },
+    options: {
+      ...commonOptions,
+      scales: {
+        ...commonOptions.scales,
+        y: {
+          ...commonOptions.scales.y,
+          min: 5,
+          max: 15,
+        },
+      },
+    },
+  },
+  postChartData: {
+    data: {
+      ...commonData,
+      datasets: [
+        {
+          ...commonData.datasets[0],
+          data: [5200, 5350, 5450, 5520, 5600, 5650, 5678],
+          borderColor: "rgba(86, 138, 255, 1)",
+          backgroundColor: "rgba(86, 138, 255, 0.1)",
+        },
+      ],
+    },
+    options: {
+      ...commonOptions,
+    },
+  },
+  visitorChartData: {
+    data: {
+      ...commonData,
+      datasets: [
+        {
+          ...commonData.datasets[0],
+          data: [1800, 2100, 1950, 2300, 2150, 2250, 2345],
+          borderColor: "rgba(149, 131, 252)",
+          backgroundColor: "rgba(149, 131, 252, 0.1)",
+        },
+      ],
+    },
+    options: {
+      ...commonOptions,
+    },
+  },
+  apiChartData: {
+    data: {
+      ...commonData,
+      datasets: [
+        {
+          ...commonData.datasets[0],
+          data: [41000, 42500, 43200, 44100, 44800, 45200, 45678],
+          borderColor: "rgba(220, 103, 206)",
+          backgroundColor: "rgba(220, 103, 206, 0.1)",
+        },
+      ],
+    },
+    options: {
+      ...commonOptions,
+    },
+  },
+  siteAccessChartData: {
+    data: {
+      labels: Array.from({ length: 24 }, (_, i) =>
+        i.toString().padStart(2, "0"),
+      ),
+      datasets: [],
+    },
+    options: {
+      ...commonOptions,
+      plugins: {
+        legend: {
+          position: "top",
+        },
+        tooltip: {
+          mode: "index",
+          intersect: false,
+        },
+      },
+      scales: {
+        x: {
+          title: {
+            text: "시간대",
+          },
+        },
+        y: {
+          title: {
+            text: "접속자 수",
+          },
+          beginAtZero: true,
+        },
+      },
+    },
+  },
+  menuAccessChartData: {
+    data: {
+      labels: [],
+      datasets: [],
+    },
+    options: {
+      ...commonOptions,
+      plugins: {
+        legend: {
+          position: "top",
+        },
+        tooltip: {
+          mode: "index",
+          intersect: false,
+        },
+      },
+      scales: {
+        x: {
+          title: {
+            text: "메뉴명",
+          },
+        },
+        y: {
+          title: {
+            text: "접속 횟수",
+          },
+          beginAtZero: true,
+        },
+      },
+    },
+  },
+};

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

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

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

@@ -0,0 +1,74 @@
+import dayjs from "dayjs";
+import type { ColumnDef } from "@tanstack/react-table";
+import { Badge } from "@common/components";
+import type { RecentPost } from "@/entities/post";
+
+const noticePostTableColumns: ColumnDef<RecentPost>[] = [
+  {
+    header: "번호",
+    cell: ({ row, table }) => {
+      if (row.original.upndFixYn === "Y") {
+        return (
+          <Badge
+            color="orange"
+            className="flex size-8 items-center justify-center"
+          >
+            <i className="diveicon di-volume-up-fill" />
+          </Badge>
+        );
+      }
+      const totalRows = table.getRowCount();
+      const currentPage = table.getState().pagination.pageIndex;
+      const pageSize = table.getState().pagination.pageSize;
+      return totalRows - (currentPage * pageSize + row.index);
+    },
+  },
+  {
+    accessorKey: "pstTtl",
+    header: "제목",
+  },
+  {
+    accessorKey: "wrtrNm",
+    header: "작성자",
+  },
+  {
+    accessorKey: "regDt",
+    header: "작성일",
+    cell: ({ row }) => dayjs(row.original.regDt).format("YYYY-MM-DD"),
+  },
+  {
+    accessorKey: "inqNocs",
+    header: "조회수",
+  },
+];
+
+const recentPostTableColumns: ColumnDef<RecentPost>[] = [
+  {
+    header: "번호",
+    cell: ({ row, table }) => {
+      const totalRows = table.getRowCount();
+      const currentPage = table.getState().pagination.pageIndex;
+      const pageSize = table.getState().pagination.pageSize;
+      return totalRows - (currentPage * pageSize + row.index);
+    },
+  },
+  {
+    accessorKey: "pstTtl",
+    header: "제목",
+  },
+  {
+    accessorKey: "wrtrNm",
+    header: "작성자",
+  },
+  {
+    accessorKey: "regDt",
+    header: "작성일",
+    cell: ({ row }) => dayjs(row.original.regDt).format("YYYY-MM-DD"),
+  },
+  {
+    accessorKey: "inqNocs",
+    header: "조회수",
+  },
+];
+
+export { noticePostTableColumns, recentPostTableColumns };

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

@@ -1,5 +1,433 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useQuery } from "@tanstack/react-query";
+import { getCoreRowModel } from "@tanstack/react-table";
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  BarElement,
+  Filler,
+  Legend,
+  Tooltip,
+  type ChartData,
+} from "chart.js";
+import { Bar, Line } from "react-chartjs-2";
+import { PostApi, type RecentPost } from "@/entities/post";
+import { ENDPOINT } from "@/shared/config";
+import { useDataTable } from "@/shared/lib";
+import { DashboardApi } from "../api/dashboard-service";
+import { chartData } from "../model/chart-data";
+import {
+  noticePostTableColumns,
+  recentPostTableColumns,
+} from "../model/table-columns";
+import { processMenuAccessData, processSiteAccessData } from "../lib/utils";
+
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  BarElement,
+  Filler,
+  Legend,
+  Tooltip,
+);
+
 function DashboardPage() {
-  return <></>;
+  const router = useRouter();
+  const { data } = useQuery({
+    queryKey: [ENDPOINT.CMS_SERVICE.DASHBOARD],
+    queryFn: () => DashboardApi.getDashboard(),
+  });
+
+  const noticePostQuery = useQuery({
+    queryKey: [ENDPOINT.BOARD_SERVICE.POSTS],
+    queryFn: () =>
+      PostApi.getRecentPostList({
+        page: 0,
+        size: 5,
+        keywordType: "bbsTypeCd",
+        keyword: "BBSNOTICE",
+      }),
+  });
+
+  const recentPostQuery = useQuery({
+    queryKey: [ENDPOINT.BOARD_SERVICE.POSTS],
+    queryFn: () =>
+      PostApi.getRecentPostList({
+        page: 0,
+        size: 5,
+      }),
+  });
+
+  const handleNoticePostRowClick = (row: RecentPost) => {
+    router.push(`/bbs/bbsnotice/${row.bbsId}/${row.pstNo}`);
+  };
+
+  const handleRecentPostRowClick = (row: RecentPost) => {
+    router.push(
+      `/bbs/${row.bbsTypeCd.toLowerCase()}/${row.bbsId}/${row.pstNo}`,
+    );
+  };
+
+  const { tableComponent: noticePostTableComponent } = useDataTable({
+    query: noticePostQuery,
+    tableOptions: {
+      columns: noticePostTableColumns,
+      getCoreRowModel: getCoreRowModel(),
+    },
+    dataTableOptions: {
+      variant: "line",
+      onRowClick: handleNoticePostRowClick,
+    },
+  });
+
+  const { tableComponent: recentPostTableComponent } = useDataTable({
+    query: recentPostQuery,
+    tableOptions: {
+      columns: recentPostTableColumns,
+      getCoreRowModel: getCoreRowModel(),
+    },
+    dataTableOptions: {
+      variant: "line",
+      onRowClick: handleRecentPostRowClick,
+    },
+  });
+
+  return (
+    <div className="p-6">
+      <div className="flex flex-col gap-1">
+        {/* 첫번째 라인 */}
+        <div className="grid grid-cols-4 gap-1">
+          {/* 총 회원수 카드 */}
+          <div className="card card-border h-80 !bg-primary !p-0">
+            <div className="relative h-full">
+              <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.toLocaleString()
+                    : "-"}
+                </div>
+                <p className="mt-1 text-2xl opacity-80">
+                  금일 신규 가입자
+                  {data?.memberTodayCnt
+                    ? data.memberTodayCnt.toLocaleString()
+                    : "0"}
+                  명
+                </p>
+              </div>
+              {/* 차트 영역 */}
+              <div className="h-full">
+                <Line
+                  data={chartData.memberChartData!.data as ChartData<"line">}
+                  options={chartData.memberChartData!.options}
+                />
+              </div>
+            </div>
+          </div>
+          {/* 전체 게시물 카드 */}
+          <div className="card card-border h-80 !p-0">
+            <div className="relative h-full">
+              <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.toLocaleString() : "-"}
+                </div>
+                <p className="mt-1 text-2xl opacity-80">
+                  금일 +
+                  {data?.pstTodayCnt ? data.pstTodayCnt.toLocaleString() : "0"}
+                  등록
+                </p>
+              </div>
+              {/* 차트 영역 */}
+              <div className="h-full">
+                <Line
+                  data={chartData.postChartData!.data as ChartData<"line">}
+                  options={chartData.postChartData!.options}
+                />
+              </div>
+            </div>
+          </div>
+          {/* 오늘 접속자 수 카드 */}
+          <div className="card card-border h-80 !p-0">
+            <div className="relative h-full">
+              <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.toLocaleString()
+                    : "-"}
+                </div>
+                <p className="mt-1 text-2xl opacity-80">
+                  전일 대비 +
+                  {data?.accessBefDayPer
+                    ? data.accessBefDayPer.toLocaleString()
+                    : "0"}
+                  %
+                </p>
+              </div>
+              {/* 차트 영역 */}
+              <div className="h-full">
+                <Line
+                  data={chartData.visitorChartData!.data as ChartData<"line">}
+                  options={chartData.visitorChartData!.options}
+                />
+              </div>
+            </div>
+          </div>
+          {/* API 호출 건수 카드 */}
+          <div className="card card-border h-80 !p-0">
+            <div className="relative h-full">
+              <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.toLocaleString() : "-"}
+                </div>
+                <p className="mt-1 text-2xl opacity-80">금일 누적</p>
+              </div>
+              {/* 차트 영역 */}
+              <div className="h-full">
+                <Line
+                  data={chartData.apiChartData!.data as ChartData<"line">}
+                  options={chartData.apiChartData!.options}
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* 두번째 라인 */}
+        <div className="grid grid-cols-2 gap-1">
+          {/* 승인 대기 알림 */}
+          <div className="card card-border">
+            <div className="card-header">
+              <h3 className="text-2xl font-medium">승인 대기 알림</h3>
+            </div>
+            <div className="p-4">
+              <div className="flex gap-4">
+                {/* 사용자 승인 */}
+                <div className="flex flex-1 flex-col items-start rounded-md bg-accent p-6">
+                  <div className="flex items-center">
+                    <div className="mr-4 flex h-10 w-10 items-center justify-center rounded-lg bg-red-100">
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="24"
+                        height="24"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        strokeWidth="2"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        className="text-red-500"
+                      >
+                        <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
+                        <circle cx="12" cy="7" r="4"></circle>
+                      </svg>
+                    </div>
+                    <span className="text-2xl font-medium">사용자 승인</span>
+                  </div>
+                  <div className="mt-5">
+                    <div className="text-5xl font-bold">
+                      {data?.waitMemberCnt
+                        ? data.waitMemberCnt.toLocaleString()
+                        : "0"}
+                      건
+                    </div>
+                    <div className="mt-2 text-2xl text-gray-500">
+                      신규 가입 승인 대기
+                    </div>
+                  </div>
+                </div>
+                {/* 매뉴 승인 */}
+                <div className="flex flex-1 flex-col items-start rounded-md bg-accent p-6">
+                  <div className="flex items-center">
+                    <div className="mr-4 flex h-10 w-10 items-center justify-center rounded-lg bg-blue-100">
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="24"
+                        height="24"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        strokeWidth="2"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        className="text-blue-500"
+                      >
+                        <rect x="3" y="3" width="7" height="7"></rect>
+                        <rect x="14" y="3" width="7" height="7"></rect>
+                        <rect x="14" y="14" width="7" height="7"></rect>
+                        <rect x="3" y="14" width="7" height="7"></rect>
+                      </svg>
+                    </div>
+                    <span className="text-2xl font-medium">메뉴 승인</span>
+                  </div>
+                  <div className="mt-5">
+                    <div className="text-5xl font-bold">
+                      {(3).toLocaleString()}건
+                    </div>
+                    <div className="mt-2 text-2xl text-gray-500">
+                      매뉴 수정 승인 대기
+                    </div>
+                  </div>
+                </div>
+                {/* 컨텐츠 승인 */}
+                <div className="flex flex-1 flex-col items-start rounded-md bg-accent p-6">
+                  <div className="flex items-center">
+                    <div className="mr-4 flex h-10 w-10 items-center justify-center rounded-lg bg-yellow-100">
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="24"
+                        height="24"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        strokeWidth="2"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        className="text-yellow-500"
+                      >
+                        <path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"></path>
+                        <polyline points="14 2 14 8 20 8"></polyline>
+                      </svg>
+                    </div>
+                    <span className="text-2xl font-medium">컨텐츠 승인</span>
+                  </div>
+                  <div className="mt-5">
+                    <div className="text-5xl font-bold">
+                      {data?.waitCntnCnt
+                        ? data.waitCntnCnt.toLocaleString()
+                        : "0"}
+                      건
+                    </div>
+                    <div className="mt-2 text-2xl text-gray-500">
+                      컨텐츠 수정 승인 대기
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="grid grid-cols-2 gap-1">
+            {/* 실시간 알림 */}
+            <div className="card card-border">
+              <div className="card-header">
+                <h3 className="text-2xl font-medium">실시간 알림</h3>
+              </div>
+              <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">신규 사용자 가입</span>
+                    <span>{(1).toLocaleString()}분 전</span>
+                  </div>
+                  <div className="flex items-center justify-between border-b border-border pb-4">
+                    <span className="font-medium">메뉴 수정 요청</span>
+                    <span>{(5).toLocaleString()}분 전</span>
+                  </div>
+                  <div className="flex items-center justify-between border-b border-border pb-4">
+                    <span className="font-medium">게시물 신고</span>
+                    <span>{(10).toLocaleString()}분 전</span>
+                  </div>
+                  <div className="flex items-center justify-between">
+                    <span className="font-medium">컨텐츠 승인 요청</span>
+                    <span>{(15).toLocaleString()}분 전</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+            {/* 일정 알림 */}
+            <div className="card card-border">
+              <div className="card-header">
+                <h3 className="text-2xl font-medium">일정 알림</h3>
+              </div>
+              <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).toLocaleString()}월 정기 시스템 점검
+                    </span>
+                    <span>내일</span>
+                  </div>
+                  <div className="flex items-center justify-between border-b border-border pb-4">
+                    <span className="font-medium">서버 업데이트 예정</span>
+                    <span>{(3).toLocaleString()}일 후</span>
+                  </div>
+                  <div className="flex items-center justify-between border-b border-border pb-4">
+                    <span className="font-medium">백업 스케줄</span>
+                    <span>{(5).toLocaleString()}일 후</span>
+                  </div>
+                  <div className="flex items-center justify-between">
+                    <span className="font-medium">정기 보안 점검</span>
+                    <span>{(7).toLocaleString()}일 후</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* 세번째 라인 */}
+        <div className="grid grid-cols-2 gap-1">
+          {/* 접속자 통계 */}
+          <div className="card card-border">
+            <div className="card-header">
+              <h3 className="text-2xl font-medium">접속자 통계</h3>
+            </div>
+            <div className="h-80 p-4">
+              <Line
+                data={{
+                  ...chartData.siteAccessChartData!.data,
+                  datasets: processSiteAccessData(data?.siteAccessList ?? []),
+                }}
+                options={chartData.siteAccessChartData!.options}
+              />
+            </div>
+          </div>
+          {/* 메뉴별 접속 통계 */}
+          <div className="card card-border">
+            <div className="card-header">
+              <h3 className="text-2xl font-medium">메뉴별 접속 통계</h3>
+            </div>
+            <div className="h-80 p-4">
+              <Bar
+                data={{
+                  labels:
+                    data?.menuAccessList?.map((item) => item.menuNm) || [],
+                  datasets: processMenuAccessData(data?.menuAccessList || []),
+                }}
+                options={chartData.menuAccessChartData!.options}
+              />
+            </div>
+          </div>
+        </div>
+
+        {/* 네번째 라인 */}
+        <div className="grid grid-cols-2 gap-1">
+          {/* 공지사항 */}
+          <div className="card card-border !p-0">
+            <div className="card-header !m-0 !border-none">
+              <h3 className="text-2xl font-medium">공지사항</h3>
+            </div>
+            {noticePostTableComponent}
+          </div>
+          {/* 신규 게시글 */}
+          <div className="card card-border !p-0">
+            <div className="card-header !m-0 !border-none">
+              <h3 className="text-2xl font-medium">신규 게시글</h3>
+            </div>
+            {recentPostTableComponent}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
 }
 
 export { DashboardPage };

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

@@ -39,8 +39,7 @@ function FilePage() {
     mutationFn: (atflId: string) =>
       AttachmentApi.deleteAttachmentByAtflId(atflId),
     onSuccess: () => {
-      query.refetch();
-      alert("삭제되었습니다.");
+      alert("삭제되었습니다.", query.refetch);
     },
   });
 

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

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import {
   keepPreviousData,
   useQuery,
@@ -22,6 +22,7 @@ import {
   DialogFooter,
   Input,
   Checkbox,
+  Label,
 } from "@common/components";
 import {
   UserApi,
@@ -41,7 +42,8 @@ function AddUserDialog({ groupId }: AdditionalUserDialogProps) {
   const alert = useAlertStore((state) => state.setMessage);
 
   const [open, setOpen] = useState(false);
-  const [userSearchQuery, setUserSearchQuery] = useState<UserSearchParams>({
+  const [userName, setUserName] = useState("");
+  const [searchParam, setSearchParam] = useState<UserSearchParams>({
     userName: "",
   });
   const [pagination, setPagination] = useState<PaginationState>({
@@ -53,10 +55,10 @@ function AddUserDialog({ groupId }: AdditionalUserDialogProps) {
   );
 
   const query = useQuery({
-    queryKey: [ENDPOINT.USER_SERVICE.USERS, userSearchQuery, pagination],
+    queryKey: [ENDPOINT.USER_SERVICE.USERS, searchParam, pagination],
     queryFn: () =>
       UserApi.findPageUser({
-        ...userSearchQuery,
+        ...searchParam,
         page: pagination.pageIndex,
         size: pagination.pageSize,
       }),
@@ -118,6 +120,9 @@ function AddUserDialog({ groupId }: AdditionalUserDialogProps) {
       onRowSelectionChange: setUserRowSelection,
       getRowId: (row) => row.userUnqId,
     },
+    dataTableOptions: {
+      viewPagination: true,
+    },
   });
 
   const handleAddUsers = async () => {
@@ -144,10 +149,30 @@ function AddUserDialog({ groupId }: AdditionalUserDialogProps) {
     }
   };
 
-  const handleSearch = () => {
-    setPagination({ pageIndex: 0, pageSize: 10 });
+  const handleSearch = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setPagination({
+      ...pagination,
+      pageIndex: 0,
+    });
+    setSearchParam({ userName });
   };
 
+  const resetSearch = () => {
+    setPagination({
+      pageIndex: 0,
+      pageSize: 10,
+    });
+    setUserName("");
+    setSearchParam({ userName: "" });
+    setUserRowSelection({});
+  };
+
+  useEffect(() => {
+    if (open) resetSearch();
+  }, [open]);
+
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>
@@ -157,20 +182,31 @@ function AddUserDialog({ groupId }: AdditionalUserDialogProps) {
         <DialogHeader>
           <DialogTitle>사용자 추가</DialogTitle>
         </DialogHeader>
-        <div className="mb-4 flex items-end gap-2">
+        <form onSubmit={handleSearch} className="mb-4 flex items-end gap-2">
+          <div className="flex items-center gap-2">
+            <Label htmlFor="userName" className="mr-2 text-label">
+              사용자 이름
+            </Label>
             <Input
-            value={userSearchQuery.userName}
-            onChange={(e) =>
-              setUserSearchQuery({
-                ...userSearchQuery,
-                userName: e.target.value,
-              })
-            }
-            className="!text-[1.3rem]"
+              id="userName"
+              className="h-[3.2rem] w-[24rem] rounded-sm !text-[1.3rem]"
+              value={userName}
+              onChange={(e) => setUserName(e.target.value)}
               placeholder="사용자 이름으로 검색"
             />
-          <Button onClick={handleSearch}>검색</Button>
           </div>
+          <Button className="h-[3.2rem]" type="submit">
+            조회
+          </Button>
+          <Button
+            type="button"
+            color="white"
+            className="h-[3.2rem]"
+            onClick={resetSearch}
+          >
+            초기화
+          </Button>
+        </form>
         {tableComponent}
         <DialogFooter>
           <Button color="white" onClick={() => setOpen(false)}>

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";
@@ -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/model/posting-table-columns.tsx

@@ -35,9 +35,14 @@ export const columns: ColumnDef<Post>[] = [
     accessorKey: "pstgPrdSeNm",
     header: "게시기간",
     cell: ({ row }) => {
+      const pstgPrdSeCd = row.original.pstgPrdSeCd;
       const pstgPrdSeNm = row.original.pstgPrdSeNm;
       const pstgBgngDt = row.original.pstgBgngDt;
       const pstgEndDt = row.original.pstgEndDt;
+
+      if (pstgPrdSeCd === "99") {
+        return pstgPrdSeNm;
+      }
       return `${pstgPrdSeNm} (${dayjs(pstgBgngDt).format("YYYY-MM-DD")} ~ ${dayjs(pstgEndDt).format("YYYY-MM-DD")})`;
     },
   },

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,406 @@
+'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: ['api/link/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.refetchQueries({
+                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: ['/api/link/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

@@ -6,7 +6,6 @@ import { keepPreviousData, useQuery } from "@tanstack/react-query";
 import { getCoreRowModel, type PaginationState } from "@tanstack/react-table";
 import {
   Button,
-  DateRangePicker,
   Input,
   Label,
   Select,
@@ -16,14 +15,14 @@ import {
   SelectValue,
   LoadingWithImage,
 } from "@common/components";
-import { LoginlogApi } from "@/entities/loginlog";
-import { type LoginlogParams } from "@/entities/loginlog/model/loginlog-interface";
+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;
+  from?: Date | undefined;
   to?: Date | undefined;
 };
 
@@ -33,13 +32,12 @@ function LoginlogPage() {
     to: dayjs().toDate(),
   };
 
-  const [dateRange, setDateRange] = useState<DateRange>(defaultDateRange);
-  const [isManualLoading, setIsManualLoading] = useState(false);
-
   const [pagination, setPagination] = useState<PaginationState>({
     pageIndex: 0,
     pageSize: 10,
   });
+  const [presetDateRange, setPresetDateRange] = useState("");
+  const [dateRange, setDateRange] = useState<DateRange>(defaultDateRange);
   const [userId, setUserId] = useState("");
   const [errOcrnYn, setErrOcrnYn] = useState("N");
   const [searchParams, setSearchParams] = useState<LoginlogParams>({
@@ -49,6 +47,7 @@ function LoginlogPage() {
     searchDateTo: dayjs().format("YYYY-MM-DD"),
     sort: "lgnDt,desc",
   });
+  const [isManualLoading, setIsManualLoading] = useState(false);
 
   const query = useQuery({
     queryKey: [ENDPOINT.USER_SERVICE.LOGINLOG, searchParams, pagination],
@@ -89,8 +88,12 @@ function LoginlogPage() {
       ...searchParams,
       userId,
       errOcrnYn,
-      searchDateFrom: dayjs(dateRange.from).format("YYYY-MM-DD"),
-      searchDateTo: dayjs(dateRange.to).format("YYYY-MM-DD"),
+      searchDateFrom: dateRange.from
+        ? dayjs(dateRange.from).format("YYYY-MM-DD")
+        : "",
+      searchDateTo: dateRange.to
+        ? dayjs(dateRange.to).format("YYYY-MM-DD")
+        : "",
     });
     query.refetch().finally(() => {
       setIsManualLoading(false);
@@ -134,21 +137,22 @@ function LoginlogPage() {
       default:
         presetDateRange = undefined;
     }
+    setPresetDateRange(value);
     setDateRange(presetDateRange || defaultDateRange);
   };
 
+  const handleDateRangeChange = (dateRange: DateRange) => {
+    setDateRange(dateRange);
+    setPresetDateRange("");
+  };
+
   return (
     <div className="flex-1">
       <div className="card card-border">
         <form onSubmit={handleSubmit} className="flex items-center gap-2 p-2">
           <Label className="mr-2">조회기간</Label>
-          <DateRangePicker
-            value={dateRange}
-            onValueChange={(value) => setDateRange(value || defaultDateRange)}
-          >
-            <div className="card card-border flex items-center gap-2">
-              <Select onValueChange={handlePresetDateRange}>
-                <SelectTrigger>
+          <Select value={presetDateRange} onValueChange={handlePresetDateRange}>
+            <SelectTrigger className="w-[12rem]">
               <SelectValue placeholder="기간 선택" className="w-[24rem]" />
             </SelectTrigger>
             <SelectContent>
@@ -157,8 +161,10 @@ function LoginlogPage() {
               <SelectItem value="3M">3개월</SelectItem>
             </SelectContent>
           </Select>
-            </div>
-          </DateRangePicker>
+          <InputDateRangePicker
+            dateRange={dateRange}
+            setDateRange={handleDateRangeChange}
+          />
           <Label className="ml-4 mr-2 text-label">사용자ID</Label>
           <Input
             className="h-[3.2rem] w-[20rem] rounded-sm !text-[1.3rem]"

apps/cs/src/pages/menu/lib/utils.ts

@@ -3,7 +3,7 @@ import type {
   TreeUserOrganization,
   TreeUser,
 } from "@/entities/user-organization";
-import type { TreeMenu, TreeNode } from "../model/tree-menu-interface";
+import type { TreeMenu, TreeNode } from "@/entities/tree-menu";
 
 export const generateMenuTreeData = (
   data: TreeMenu[],

apps/cs/src/pages/menu/ui/editable-node.tsx

@@ -1,5 +1,6 @@
 import type { ComponentProps } from "react";
 import { Button, Input } from "@common/components";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/shared/ui/tooltip";
 
 type EditableNodeProps = {
   depth?: number;
@@ -20,22 +21,34 @@ function EditableNode({
     >
       <Input {...props} className="h-[2.5rem] !text-[1.3rem] text-foreground" />
       <div className="flex items-center gap-1">
+        <Tooltip>
+          <TooltipTrigger asChild>
             <Button
               variant="ghost"
               size="icon"
               className="size-8 !bg-transparent"
               onClick={onSave}
+              aria-label="저장"
             >
               <i className="diveicon di-check text-2xl" />
             </Button>
+          </TooltipTrigger>
+          <TooltipContent>저장</TooltipContent>
+        </Tooltip>
+        <Tooltip>
+          <TooltipTrigger asChild>
             <Button
               variant="ghost"
               size="icon"
               className="size-8 !bg-transparent"
               onClick={onCancel}
+              aria-label="취소"
             >
               <i className="diveicon di-x" />
             </Button>
+          </TooltipTrigger>
+          <TooltipContent>취소</TooltipContent>
+        </Tooltip>
       </div>
     </div>
   );

apps/cs/src/pages/menu/ui/menu-node.tsx

@@ -2,10 +2,9 @@ import { useEffect, useState } from "react";
 import { useQueryClient } from "@tanstack/react-query";
 import type { NodeModel, TreeMethods } from "@minoru/react-dnd-treeview";
 import { Button, cn } from "@common/components";
+import { TreeMenuApi, type TreeMenu } from "@/entities/tree-menu";
 import { useMutationWrapper } from "@/shared/lib";
 import { ENDPOINT } from "@/shared/config";
-import { TreeMenuApi } from "../api/tree-menu-service";
-import type { TreeMenu } from "../model/tree-menu-interface";
 import { EditableNode } from "./editable-node";
 
 type MenuNodeProps = {

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

@@ -21,11 +21,10 @@ import {
   type MenuFormData,
 } from "@/entities/menu";
 import { SiteApi } from "@/entities/site";
+import { TreeMenuApi, type TreeMenu } from "@/entities/tree-menu";
 import { ENDPOINT } from "@/shared/config";
 import { useAlertStore, useMutationWrapper } from "@/shared/lib";
 import { generateMenuTreeData } from "../lib/utils";
-import { TreeMenuApi } from "../api/tree-menu-service";
-import type { TreeMenu } from "../model/tree-menu-interface";
 import { MenuTree } from "./menu-tree";
 import { MenuForm } from "./menu-form";
 
@@ -111,6 +110,7 @@ function MenuPage() {
       queryClient.invalidateQueries({
         queryKey: [ENDPOINT.CMS_SERVICE.MENU_ROLES],
       });
+      form.reset();
     },
   });
 

apps/cs/src/pages/menu/ui/menu-tree.tsx

@@ -12,8 +12,11 @@ import { Button } from "@common/components";
 import { ENDPOINT } from "@/shared/config";
 import { useMutationWrapper } from "@/shared/lib";
 import type { MenuFormData } from "@/entities/menu";
-import { TreeMenuApi } from "../api/tree-menu-service";
-import type { TreeMenu, TreeNode } from "../model/tree-menu-interface";
+import {
+  TreeMenuApi,
+  type TreeMenu,
+  type TreeNode,
+} from "@/entities/tree-menu";
 import { handleDropNode, handleSelectNode } from "../lib/utils";
 import { MenuNode } from "./menu-node";
 import { EditableNode } from "./editable-node";

apps/cs/src/pages/organization/ui/add-user-dialog.tsx

@@ -72,7 +72,7 @@ function AddUserDialog({ onAddUsers, ...props }: AddUserDialogProps) {
       </DialogTrigger>
       <DialogContent className="max-w-[60rem]" aria-describedby={undefined}>
         <DialogHeader>
-          <DialogTitle>콘텐츠 조회</DialogTitle>
+          <DialogTitle>사용자 조회</DialogTitle>
         </DialogHeader>
         <div className="flex flex-col gap-4">
           <div className="card card-border !m-0 flex w-full items-center gap-2">

apps/cs/src/pages/organization/ui/user-organization-section.tsx

@@ -242,6 +242,16 @@ function UserOrganizationSection({ ognzSn }: UserOrganizationSectionProps) {
       </div>
       <div className="card max-h-[calc(100vh-58rem)] overflow-auto !p-0">
         <Table>
+          <colgroup>
+            <col width="5%" />
+            <col width="5%" />
+            <col width="auto" />
+            <col width="10%" />
+            <col width="10%" />
+            <col width="10%" />
+            <col width="15%" />
+            <col width="15%" />
+          </colgroup>
           <TableHeader className="sticky top-0">
             <TableRow>
               <TableHead>
@@ -300,6 +310,9 @@ const UserCells = memo(
     jobPositionCodeData,
     jobGradeCodeData,
   }: UserCellsProps) => {
+    const [jbpsSeCd, setJbpsSeCd] = useState(user.jbpsSeCd);
+    const [jbgdSeCd, setJbgdSeCd] = useState(user.jbgdSeCd);
+
     const updateMode = (index: number) => {
       const mode = form.watch(`userOrganization.${index}.mode`);
       if (mode === "R") {
@@ -322,17 +335,33 @@ const UserCells = memo(
           <CodeSelect
             codeData={jobPositionCodeData}
             defaultValue={user.jbpsSeCd}
-            onValueChange={updateFormValue(index, "jbpsSeCd")}
+            onValueChange={(value) => {
+              setJbpsSeCd(value);
+              updateFormValue(index, "jbpsSeCd")(value);
+            }}
             {...form.register(`userOrganization.${index}.jbpsSeCd`)}
           />
+          {!jbpsSeCd && (
+            <p className="pt-1 text-base text-destructive">
+              직위를 선택해주세요.
+            </p>
+          )}
         </TableCell>
         <TableCell align="center">
           <CodeSelect
             codeData={jobGradeCodeData}
             defaultValue={user.jbgdSeCd}
-            onValueChange={updateFormValue(index, "jbgdSeCd")}
+            onValueChange={(value) => {
+              setJbgdSeCd(value);
+              updateFormValue(index, "jbgdSeCd")(value);
+            }}
             {...form.register(`userOrganization.${index}.jbgdSeCd`)}
           />
+          {!jbgdSeCd && (
+            <p className="pt-1 text-base text-destructive">
+              직급을 선택해주세요.
+            </p>
+          )}
         </TableCell>
         <TableCell align="center">
           <Input

apps/cs/src/pages/popup/model/posting-table-columns.tsx

@@ -33,9 +33,14 @@ export const columns: ColumnDef<Post>[] = [
     accessorKey: "pstgPrdSeNm",
     header: "게시기간",
     cell: ({ row }) => {
+      const pstgPrdSeCd = row.original.pstgPrdSeCd;
       const pstgPrdSeNm = row.original.pstgPrdSeNm;
       const pstgBgngDt = row.original.pstgBgngDt;
       const pstgEndDt = row.original.pstgEndDt;
+
+      if (pstgPrdSeCd === "99") {
+        return pstgPrdSeNm;
+      }
       return `${pstgPrdSeNm} (${dayjs(pstgBgngDt).format("YYYY-MM-DD")} ~ ${dayjs(pstgEndDt).format("YYYY-MM-DD")})`;
     },
   },

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

@@ -6,7 +6,6 @@ import { keepPreviousData, useQuery } from "@tanstack/react-query";
 import { getCoreRowModel, type PaginationState } from "@tanstack/react-table";
 import {
   Button,
-  DateRangePicker,
   Input,
   Label,
   Select,
@@ -15,14 +14,17 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@common/components";
-import { PrivacyLogPrivacy } from "@/entities/privacylog";
-import type { PrivacyLogParams } from "@/entities/privacylog/model/privacylog-interface";
+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;
+  from?: Date | undefined;
   to?: Date | undefined;
 };
 
@@ -36,6 +38,7 @@ function PrivacyLogPage() {
     pageIndex: 0,
     pageSize: 10,
   });
+  const [presetDateRange, setPresetDateRange] = useState("");
   const [dateRange, setDateRange] = useState<DateRange>(defaultDateRange);
   const [inqInfoKeyword, setInqInfoKeyword] = useState("");
   const [searchParams, setSearchParams] = useState<PrivacyLogParams>({
@@ -83,8 +86,10 @@ function PrivacyLogPage() {
     setSearchParams({
       ...searchParams,
       inqInfoKeyword,
-      inqDtStart: dayjs(dateRange.from).format("YYYY-MM-DD"),
-      inqDtEnd: dayjs(dateRange.to).format("YYYY-MM-DD"),
+      inqDtStart: dateRange.from
+        ? dayjs(dateRange.from).format("YYYY-MM-DD")
+        : "",
+      inqDtEnd: dateRange.to ? dayjs(dateRange.to).format("YYYY-MM-DD") : "",
     });
   };
 
@@ -123,21 +128,22 @@ function PrivacyLogPage() {
       default:
         presetDateRange = undefined;
     }
+    setPresetDateRange(value);
     setDateRange(presetDateRange || defaultDateRange);
   };
 
+  const handleDateRangeChange = (dateRange: DateRange) => {
+    setDateRange(dateRange);
+    setPresetDateRange("");
+  };
+
   return (
     <div className="flex-1">
       <div className="card card-border">
         <form onSubmit={handleSubmit} className="flex items-center gap-2 p-2">
           <Label className="mr-2">조회기간</Label>
-          <DateRangePicker
-            value={dateRange}
-            onValueChange={(value) => setDateRange(value || defaultDateRange)}
-          >
-            <div className="card card-border flex items-center gap-2">
-              <Select onValueChange={handlePresetDateRange}>
-                <SelectTrigger>
+          <Select value={presetDateRange} onValueChange={handlePresetDateRange}>
+            <SelectTrigger className="w-[12rem]">
               <SelectValue placeholder="기간 선택" className="w-[24rem]" />
             </SelectTrigger>
             <SelectContent>
@@ -146,15 +152,16 @@ function PrivacyLogPage() {
               <SelectItem value="3M">3개월</SelectItem>
             </SelectContent>
           </Select>
-            </div>
-          </DateRangePicker>
+          <InputDateRangePicker
+            dateRange={dateRange}
+            setDateRange={handleDateRangeChange}
+          />
           <Label className="ml-4 mr-2 text-label">조회정보</Label>
           <Input
             className="h-[3.2rem] w-[20rem] rounded-sm !text-[1.3rem]"
             value={inqInfoKeyword}
             onChange={(e) => setInqInfoKeyword(e.target.value)}
           />
-
           <Button className="h-[3.2rem]" type="submit">
             조회
           </Button>

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

@@ -12,7 +12,6 @@ import {
 } from "@tanstack/react-table";
 import {
   Button,
-  DateRangePicker,
   Input,
   Label,
   Select,
@@ -31,13 +30,14 @@ 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";
 
 type DateRange = {
-  from: Date | undefined;
+  from?: Date | undefined;
   to?: Date | undefined;
 };
 
@@ -51,22 +51,21 @@ function RecentPage() {
   const { confirm } = useConfirm();
   const alert = useAlertStore((state) => state.setMessage);
 
-  const [dateRange, setDateRange] = useState<DateRange | undefined>({
-    from: undefined,
-    to: undefined,
-  });
   const [tableSort, setTableSort] = useState("regDt,desc");
   const [pagination, setPagination] = useState<PaginationState>({
     pageIndex: 0,
     pageSize: 10,
   });
   const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
-
+  const [presetDateRange, setPresetDateRange] = useState("");
+  const [dateRange, setDateRange] = useState<DateRange>({
+    from: undefined,
+    to: undefined,
+  });
   const [keywordType, setKeywordType] = useState("");
   const [keyword, setKeyword] = useState("");
   const [bbsId, setBbsId] = useState<string | null>(null);
   const [delYn, setDelYn] = useState("N");
-
   const [searchParams, setSearchParams] = useState<RecentPostParams>({
     keywordType: "",
     keyword: "",
@@ -170,7 +169,7 @@ function RecentPage() {
   };
 
   const handlePresetDateRange = (value: string) => {
-    let presetDateRange: DateRange | undefined;
+    let presetDateRange: DateRange;
     switch (value) {
       case "1W":
         presetDateRange = {
@@ -191,11 +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("삭제 사유를 입력해주세요.");
@@ -250,10 +258,8 @@ function RecentPage() {
       <div className="card card-border">
         <form onSubmit={handleSubmit} className="flex items-center gap-2 p-2">
           <Label className="mr-2">날짜</Label>
-          <DateRangePicker value={dateRange} onValueChange={setDateRange}>
-            <div className="card card-border flex items-center gap-2">
-              <Select onValueChange={handlePresetDateRange}>
-                <SelectTrigger>
+          <Select value={presetDateRange} onValueChange={handlePresetDateRange}>
+            <SelectTrigger className="w-[12rem]">
               <SelectValue placeholder="기간 선택" className="w-[24rem]" />
             </SelectTrigger>
             <SelectContent>
@@ -262,9 +268,10 @@ function RecentPage() {
               <SelectItem value="3M">3개월</SelectItem>
             </SelectContent>
           </Select>
-            </div>
-          </DateRangePicker>
-
+          <InputDateRangePicker
+            dateRange={dateRange}
+            setDateRange={handleDateRangeChange}
+          />
           <Label className="ml-4 mr-2 text-label">게시판</Label>
           <Select
             value={bbsId?.toString() || ""}
@@ -281,7 +288,6 @@ function RecentPage() {
               ))}
             </SelectContent>
           </Select>
-
           <Label className="ml-4 mr-2 text-label">상태</Label>
           <Select value={delYn} onValueChange={(value) => setDelYn(value)}>
             <SelectTrigger className="w-[10rem]">
@@ -292,7 +298,6 @@ function RecentPage() {
               <SelectItem value="Y">삭제</SelectItem>
             </SelectContent>
           </Select>
-
           <Label className="ml-4 mr-2 text-label">검색</Label>
           <Select
             value={keywordType}

apps/cs/src/pages/role/api/site-authority-service.ts

@@ -0,0 +1,28 @@
+import { client } from "@/shared/api";
+import type {
+  SiteAuthorityCreatePayload,
+  SiteAuthorityList,
+  SiteAuthoritySearchParams,
+  SiteAuthorityService,
+} from "../model/site-authority-interface";
+import { ENDPOINT } from "@/shared/config";
+
+export class SiteAuthorityApiService implements SiteAuthorityService {
+  public async getSiteAuthorityList(
+    params: SiteAuthoritySearchParams,
+  ): Promise<SiteAuthorityList> {
+    const response = await client.get<SiteAuthorityList>(
+      ENDPOINT.CMS_SERVICE.SITE_AUTHORITY,
+      { params },
+    );
+    return response.data;
+  }
+
+  public async createSiteAuthority(
+    data: SiteAuthorityCreatePayload[],
+  ): Promise<void> {
+    await client.post(ENDPOINT.CMS_SERVICE.SITE_AUTHORITY, data);
+  }
+}
+
+export const SiteAuthorityApi = new SiteAuthorityApiService();

apps/cs/src/pages/role/model/site-authority-interface.ts

@@ -0,0 +1,24 @@
+import type { PageableList, PageableParams } from "@/shared/model";
+
+export interface SiteAuthoritySearchParams extends PageableParams {
+  siteId?: string;
+  authrtId?: string;
+}
+
+export interface SiteAuthority {
+  siteId: string;
+  authrtId: string;
+  siteNm: string;
+  mode: string;
+}
+
+export type SiteAuthorityCreatePayload = Omit<SiteAuthority, "siteNm">;
+
+export type SiteAuthorityList = PageableList<SiteAuthority>;
+
+export interface SiteAuthorityService {
+  getSiteAuthorityList: (
+    params: SiteAuthoritySearchParams,
+  ) => Promise<SiteAuthorityList>;
+  createSiteAuthority: (data: SiteAuthorityCreatePayload[]) => Promise<void>;
+}

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

@@ -3,8 +3,13 @@ import { useState } from "react";
 import type { Role } from "@/entities/role";
 import type { ColumnDef } from "@tanstack/react-table";
 import { MappingRoleDialog } from "../ui/mapping-role-dialog";
+import { Button } from "@common/components";
 
-export const columns: ColumnDef<Role>[] = [
+export const createColumns = ({
+  deleteRole,
+}: {
+  deleteRole: (roleId: string) => void;
+}): ColumnDef<Role>[] => [
   {
     id: "no",
     header: "NO",
@@ -39,7 +44,18 @@ export const columns: ColumnDef<Role>[] = [
   {
     id: "action",
     header: "관리",
-    cell: ({ row }) => <MappingRoleButton roleId={row.original.roleId} />,
+    cell: ({ row }) => (
+      <div className="flex items-center justify-center gap-2">
+        <MappingRoleButton roleId={row.original.roleId} />
+        <Button
+          size="sm"
+          color="red"
+          onClick={() => deleteRole(row.original.roleId)}
+        >
+          삭제
+        </Button>
+      </div>
+    ),
   },
 ];
 

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

@@ -1,5 +1,6 @@
-import { getCoreRowModel, type ColumnDef } from "@tanstack/react-table";
+import { useState, useRef } from "react";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { getCoreRowModel, type ColumnDef } from "@tanstack/react-table";
 import {
   Dialog,
   DialogTrigger,
@@ -8,6 +9,7 @@ import {
   DialogTitle,
   Button,
   Switch,
+  Input,
 } from "@common/components";
 import {
   RoleAuthorizationsApi,
@@ -31,12 +33,18 @@ function MappingRoleDialog({
 }: MappingRoleDialogProps) {
   const queryClient = useQueryClient();
   const alert = useAlertStore((state) => state.setMessage);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [searchParams, setSearchParams] = useState({
+    keyword: "",
+    keywordType: "authorizationName",
+  });
 
   const query = useQuery({
-    queryKey: [ENDPOINT.USER_SERVICE.AUTHORIZATIONS],
+    queryKey: [ENDPOINT.USER_SERVICE.ROLE_AUTHORIZATIONS, searchParams],
     queryFn: () =>
       RoleAuthorizationsApi.getRoleAuthorizationsListByRoleId({
         roleId,
+        ...searchParams,
       }),
     enabled: open,
   });
@@ -46,7 +54,7 @@ function MappingRoleDialog({
       RoleAuthorizationsApi.createRoleAuthorizations(data),
     onSuccess: () => {
       queryClient.invalidateQueries({
-        queryKey: [ENDPOINT.USER_SERVICE.AUTHORIZATIONS],
+        queryKey: [ENDPOINT.USER_SERVICE.ROLE_AUTHORIZATIONS],
       });
       alert("권한 맵핑이 완료되었습니다.");
     },
@@ -66,6 +74,26 @@ function MappingRoleDialog({
     );
   };
 
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    const formData = new FormData(e.target as HTMLFormElement);
+    const keyword = formData.get("keyword") as string;
+    setSearchParams({
+      ...searchParams,
+      keyword,
+    });
+  };
+
+  const handleReset = () => {
+    if (inputRef.current) {
+      inputRef.current.value = "";
+    }
+    setSearchParams({
+      ...searchParams,
+      keyword: "",
+    });
+  };
+
   const { tableComponent } = useDataTable({
     query,
     tableOptions: {
@@ -79,21 +107,31 @@ function MappingRoleDialog({
       <DialogTrigger asChild>
         <Button size="sm">권한맵핑</Button>
       </DialogTrigger>
-      <DialogContent className="max-w-[60rem]" aria-describedby={undefined}>
+      <DialogContent className="max-w-[80rem]" aria-describedby={undefined}>
         <DialogHeader>
           <DialogTitle>모듈 목록</DialogTitle>
         </DialogHeader>
-        <div className="max-h-[40rem] overflow-y-auto">
-          <div className="mb-4 flex justify-end gap-2">
-            <Button size="sm" onClick={() => handleApplyAll("Y")}>
-              일괄적용
+        <div className="flex items-center justify-between">
+          <form onSubmit={handleSubmit} className="flex items-center gap-2">
+            <Input
+              ref={inputRef}
+              type="text"
+              name="keyword"
+              className="w-[32rem]"
+            />
+            <Button type="submit">검색</Button>
+            <Button type="button" color="white" onClick={handleReset}>
+              초기화
             </Button>
-            <Button size="sm" color="gray" onClick={() => handleApplyAll("N")}>
+          </form>
+          <div className="flex items-center justify-end gap-2">
+            <Button onClick={() => handleApplyAll("Y")}>일괄적용</Button>
+            <Button color="gray" onClick={() => handleApplyAll("N")}>
               일괄해제
             </Button>
           </div>
-          {tableComponent}
         </div>
+        <div className="max-h-[60rem] overflow-y-auto">{tableComponent}</div>
       </DialogContent>
     </Dialog>
   );

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

@@ -1,7 +1,9 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
 import type { UseFormReturn } from "react-hook-form";
 import {
   Button,
+  Checkbox,
   Input,
   Label,
   RadioGroup,
@@ -16,6 +18,9 @@ import { FormWrapper } from "@/widgets/form-wrapper";
 import { RoleApi, type RoleFormData } from "@/entities/role";
 import { FormField, FormItem, FormControl } from "@/shared/ui/form";
 import { useAlertStore, useMutationWrapper } from "@/shared/lib";
+import { ENDPOINT } from "@/shared/config";
+import { SiteAuthorityApi } from "../api/site-authority-service";
+import type { SiteAuthorityCreatePayload } from "../model/site-authority-interface";
 
 type RoleFormProps = {
   roleId?: string;
@@ -24,12 +29,24 @@ type RoleFormProps = {
   handleDelete?: () => Promise<void>;
 };
 
-function RoleForm({ roleId, form, ...props }: RoleFormProps) {
+function RoleForm({ roleId, form, handleSave, ...props }: RoleFormProps) {
   const isModifyMode = !!roleId;
-
+  const queryClient = useQueryClient();
   const alert = useAlertStore((state) => state.setMessage);
-
   const [isValidRoleId, setIsValidRoleId] = useState(false);
+  const [checkedSiteAuthority, setCheckedSiteAuthority] = useState<string[]>(
+    [],
+  );
+
+  const { data: siteAuthorityList } = useQuery({
+    queryKey: [ENDPOINT.CMS_SERVICE.SITE_AUTHORITY, roleId],
+    queryFn: () =>
+      SiteAuthorityApi.getSiteAuthorityList({
+        authrtId: roleId,
+        page: 0,
+        size: 100,
+      }),
+  });
 
   const { mutateAsync: checkDuplicateRoleId } = useMutationWrapper({
     mutationFn: (roleId: string) => RoleApi.checkDuplicateRoleId(roleId),
@@ -43,8 +60,49 @@ function RoleForm({ roleId, form, ...props }: RoleFormProps) {
     },
   });
 
+  const handleSiteAuthorityChecked = (checked: boolean, siteId: string) => {
+    if (checked) {
+      setCheckedSiteAuthority((prev) => [...prev, siteId]);
+    } else {
+      setCheckedSiteAuthority((prev) => prev.filter((id) => id !== siteId));
+    }
+  };
+
+  const saveInterceptor = async (data: RoleFormData) => {
+    const siteAuthorityPayload: SiteAuthorityCreatePayload[] =
+      checkedSiteAuthority.map((siteId) => ({
+        siteId,
+        authrtId: data.roleId,
+        mode: "C",
+      }));
+
+    try {
+      await handleSave(data);
+      if (data.mngrYn === "N") return;
+      await SiteAuthorityApi.createSiteAuthority(siteAuthorityPayload);
+      queryClient.invalidateQueries({
+        queryKey: [ENDPOINT.CMS_SERVICE.SITE_AUTHORITY],
+      });
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  useEffect(() => {
+    if (!siteAuthorityList?.content.length) return;
+    const checkedSiteAuthority = siteAuthorityList.content.filter(
+      (item) => item.mode === "R",
+    );
+    setCheckedSiteAuthority(checkedSiteAuthority.map((item) => item.siteId));
+  }, [siteAuthorityList]);
+
   return (
-    <FormWrapper form={form} isModifyMode={isModifyMode} {...props}>
+    <FormWrapper
+      form={form}
+      isModifyMode={isModifyMode}
+      handleSave={saveInterceptor}
+      {...props}
+    >
       <div className="card">
         <Table variant="secondary">
           <colgroup>
@@ -165,6 +223,29 @@ function RoleForm({ roleId, form, ...props }: RoleFormProps) {
                 />
               </TableCell>
             </TableRow>
+            {form.watch("mngrYn") === "Y" && (
+              <TableRow>
+                <TableHead data-required>관리사이트</TableHead>
+                <TableCell className="border">
+                  <div className="flex flex-wrap items-center gap-4">
+                    {siteAuthorityList?.content.map((item) => (
+                      <div
+                        key={item.siteId}
+                        className="flex items-center gap-2"
+                      >
+                        <Checkbox
+                          defaultChecked={item.mode === "R"}
+                          onCheckedChange={(checked: boolean) => {
+                            handleSiteAuthorityChecked(checked, item.siteId);
+                          }}
+                        />
+                        <span className="whitespace-nowrap">{item.siteNm}</span>
+                      </div>
+                    ))}
+                  </div>
+                </TableCell>
+              </TableRow>
+            )}
             <TableRow>
               <TableHead data-required>사용여부</TableHead>
               <TableCell className="border">

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

@@ -7,11 +7,12 @@ import { getCoreRowModel, type PaginationState } from "@tanstack/react-table";
 import { Button, Input, Label } from "@common/components";
 import { RoleApi, type Role, type RoleParams } from "@/entities/role";
 import { ENDPOINT } from "@/shared/config";
-import { useDataTable } from "@/shared/lib";
-import { columns } from "../model/table-columns";
+import { useAlertStore, useDataTable, useMutationWrapper } from "@/shared/lib";
+import { createColumns } from "../model/table-columns";
 
 function RolePage() {
   const router = useRouter();
+  const alert = useAlertStore((state) => state.setMessage);
 
   const [keyword, setKeyword] = useState("");
   const [searchParams, setSearchParams] = useState<RoleParams>({
@@ -33,6 +34,13 @@ function RolePage() {
       }),
   });
 
+  const { mutateAsync: deleteRole } = useMutationWrapper({
+    mutationFn: (roleId: string) => RoleApi.deleteRole(roleId),
+    onSuccess: () => {
+      alert("삭제되었습니다.", query.refetch);
+    },
+  });
+
   const handleRowClick = (row: Role) => {
     router.push(`/role/register/${row.roleId}`);
   };
@@ -40,7 +48,9 @@ function RolePage() {
   const { tableComponent } = useDataTable({
     query,
     tableOptions: {
-      columns,
+      columns: createColumns({
+        deleteRole,
+      }),
       state: {
         pagination,
       },

apps/cs/src/pages/site/lib/utils.ts

@@ -0,0 +1,24 @@
+import type { NodeModel } from "@minoru/react-dnd-treeview";
+import type { TreeMenu } from "@/entities/tree-menu";
+
+export const generateMenuTreeData = (
+  data: TreeMenu[],
+): NodeModel<TreeMenu>[] => {
+  return data.reduce<NodeModel<TreeMenu>[]>((acc, menu) => {
+    const node: NodeModel<TreeMenu> = {
+      id: menu.menuCd ?? 0,
+      parent: menu.parentId ?? 0,
+      text: menu.menuSubKornNm ?? "",
+      droppable: true,
+      data: menu,
+    };
+
+    acc.push(node);
+
+    if (menu.children?.length) {
+      acc.push(...generateMenuTreeData(menu.children));
+    }
+
+    return acc;
+  }, []);
+};

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

@@ -1,6 +1,32 @@
 import dayjs from "dayjs";
+import { memo, useState } from "react";
+import { useFieldArray, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useQuery } from "@tanstack/react-query";
 import { type ColumnDef } from "@tanstack/react-table";
+import { useConfirm } from "@frontend-opensource/use-react-hooks";
+import {
+  Button,
+  Checkbox,
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@common/components";
 import type { Site } from "@/entities/site";
+import { TreeMenuApi } from "@/entities/tree-menu";
+import {
+  MenuApi,
+  siteMapFormSchema,
+  type SiteMapFormData,
+} from "@/entities/menu";
+import { ENDPOINT } from "@/shared/config";
+import { useAlertStore, useMutationWrapper } from "@/shared/lib";
+import { MenuTree } from "../ui/menu-tree";
+import { generateMenuTreeData } from "../lib/utils";
 
 export const columns: ColumnDef<Site>[] = [
   {
@@ -45,4 +71,81 @@ export const columns: ColumnDef<Site>[] = [
       return date.format("YYYY-MM-DD");
     },
   },
+  {
+    id: "action",
+    header: "관리",
+    cell: ({ row }) => {
+      return (
+        <div onClick={(e) => e.stopPropagation()}>
+          <ActionCell data={row.original} />
+        </div>
+      );
+    },
+  },
 ];
+
+const ActionCell = memo(({ data }: { data: Site }) => {
+  const { confirm } = useConfirm();
+  const alert = useAlertStore((state) => state.setMessage);
+  const [open, setOpen] = useState(false);
+
+  const { data: menuTreeData, refetch } = useQuery({
+    queryKey: [ENDPOINT.CMS_SERVICE.MENUS, data.siteId],
+    queryFn: () => TreeMenuApi.getTreeMenuList(data.siteId),
+    select: (data) => generateMenuTreeData(data),
+    enabled: !!data.siteId && open,
+  });
+
+  const { mutate: publishSiteMap } = useMutationWrapper({
+    mutationFn: (data: SiteMapFormData["siteMap"]) =>
+      MenuApi.publishSiteMap(data),
+    onSuccess: () => {
+      alert("사이트맵이 저장되었습니다.", () => {
+        setOpen(false);
+        refetch();
+      });
+    },
+  });
+
+  const form = useForm<SiteMapFormData>({
+    resolver: zodResolver(siteMapFormSchema),
+  });
+  const fieldArray = useFieldArray({
+    control: form.control,
+    name: "siteMap",
+  });
+
+  const handlePublishSiteMap = async () => {
+    if (await confirm("저장하시겠습니까?")) {
+      publishSiteMap(form.getValues("siteMap"));
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button size="sm">사이트맵</Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{data.siteNm} - 사이트맵 관리</DialogTitle>
+        </DialogHeader>
+        <div>
+          <div className="flex items-center justify-end gap-2 p-2">
+            <span className="text-xl">표시여부</span>
+            <Checkbox checked />
+          </div>
+          <MenuTree tree={menuTreeData ?? []} fieldArray={fieldArray} />
+        </div>
+        <DialogFooter>
+          <Button onClick={handlePublishSiteMap}>저장</Button>
+          <DialogClose asChild>
+            <Button color="white">취소</Button>
+          </DialogClose>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+});
+
+ActionCell.displayName = "ActionCell";

apps/cs/src/pages/site/ui/editable-node.tsx

@@ -0,0 +1,58 @@
+import type { ComponentProps } from "react";
+import { Button, Input } from "@common/components";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/shared/ui/tooltip";
+
+type EditableNodeProps = {
+  depth?: number;
+  onSave: () => void;
+  onCancel: () => void;
+} & ComponentProps<typeof Input>;
+
+function EditableNode({
+  depth,
+  onSave,
+  onCancel,
+  ...props
+}: EditableNodeProps) {
+  return (
+    <div
+      className="flex items-center gap-2 rounded-sm bg-accent p-2"
+      style={{ marginInlineStart: !depth ? 0 : depth * 5 + 5 }}
+      onClick={(e) => e.stopPropagation()}
+    >
+      <Input {...props} className="h-[2.5rem] !text-[1.3rem] text-foreground" />
+      <div className="flex items-center gap-1">
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              variant="ghost"
+              size="icon"
+              className="size-8 !bg-transparent"
+              onClick={onSave}
+              aria-label="저장"
+            >
+              <i className="diveicon di-check text-2xl" />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>저장</TooltipContent>
+        </Tooltip>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              variant="ghost"
+              size="icon"
+              className="size-8 !bg-transparent"
+              onClick={onCancel}
+              aria-label="취소"
+            >
+              <i className="diveicon di-x" />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>취소</TooltipContent>
+        </Tooltip>
+      </div>
+    </div>
+  );
+}
+
+export { EditableNode };

apps/cs/src/pages/site/ui/menu-node.tsx

@@ -0,0 +1,128 @@
+import { useState } from "react";
+import type { NodeModel } from "@minoru/react-dnd-treeview";
+import type { UseFieldArrayReturn } from "react-hook-form";
+import { Button, Checkbox, cn } from "@common/components";
+import { type TreeMenu } from "@/entities/tree-menu";
+import type { SiteMapFormData, SiteMapPayloadData } from "@/entities/menu";
+import { EditableNode } from "./editable-node";
+
+type MenuNodeProps = {
+  node: NodeModel<TreeMenu>;
+  depth: number;
+  isOpen: boolean;
+  fieldArray: UseFieldArrayReturn<SiteMapFormData>;
+  onToggle: (id: NodeModel["id"]) => void;
+};
+
+function MenuNode({
+  node,
+  depth,
+  isOpen,
+  fieldArray,
+  onToggle,
+}: MenuNodeProps) {
+  const { id, text, data } = node;
+  const indent = depth * 10 + 5;
+
+  const [editMode, setEditMode] = useState(false);
+  const [nodeName, setNodeName] = useState(text);
+  const [otptYn, setOtptYn] = useState(data?.otptYn ?? "N");
+
+  const updateField = (id: number, newField: SiteMapPayloadData) => {
+    const existingFieldIndex = fieldArray.fields.findIndex(
+      (field) => field.menuCd === id,
+    );
+    if (existingFieldIndex !== -1) {
+      fieldArray.update(existingFieldIndex, newField);
+    } else {
+      fieldArray.append(newField);
+    }
+  };
+
+  const handleToggle = () => onToggle(id);
+
+  const handleSave = async () => {
+    const newField = {
+      menuCd: id as number,
+      menuSubKornNm: nodeName,
+      otptYn,
+    };
+    updateField(id as number, newField);
+    setEditMode(false);
+  };
+
+  const handleCancel = () => {
+    setEditMode(false);
+    setNodeName(text);
+  };
+
+  const handleOtptYnChange = (checked: boolean) => {
+    const newField = {
+      menuCd: id as number,
+      menuSubKornNm: nodeName,
+      otptYn: checked ? "Y" : "N",
+    };
+    updateField(id as number, newField);
+    setOtptYn(checked ? "Y" : "N");
+  };
+
+  return (
+    <div
+      style={{ paddingInlineStart: indent }}
+      className={cn(
+        "group flex cursor-pointer items-center gap-2 rounded-sm p-2 hover:bg-accent",
+        editMode && "p-0 pr-2 hover:bg-transparent",
+      )}
+      onClick={(e) => {
+        e.stopPropagation();
+        handleToggle();
+      }}
+    >
+      {editMode ? (
+        <EditableNode
+          value={nodeName}
+          onChange={(e) => setNodeName(e.target.value)}
+          onSave={handleSave}
+          onCancel={handleCancel}
+        />
+      ) : (
+        <div className="flex w-full items-center justify-between">
+          <div className="flex items-center">
+            {data?.children?.length && (
+              <i
+                className={cn(
+                  "diveicon di-arrow-forward mr-2 text-base text-label",
+                  isOpen && "rotate-90",
+                )}
+              />
+            )}
+            <span className="text-[1.4rem] font-medium text-label">
+              {nodeName}
+            </span>
+          </div>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="invisible !bg-transparent group-hover:visible"
+            onClick={(e) => {
+              e.stopPropagation();
+              setEditMode(true);
+            }}
+          >
+            <i className="diveicon di-pencil" />
+          </Button>
+        </div>
+      )}
+      <Checkbox
+        className="ml-auto"
+        checked={otptYn === "Y"}
+        onClick={(e) => {
+          e.stopPropagation();
+        }}
+        onCheckedChange={handleOtptYnChange}
+      />
+    </div>
+  );
+}
+
+export { MenuNode };

apps/cs/src/pages/site/ui/menu-tree.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+import { useRef } from "react";
+import type { UseFieldArrayReturn } from "react-hook-form";
+import {
+  Tree,
+  type NodeModel,
+  type TreeMethods,
+} from "@minoru/react-dnd-treeview";
+import { Button } from "@common/components";
+import type { SiteMapFormData } from "@/entities/menu";
+import { type TreeMenu } from "@/entities/tree-menu";
+import { MenuNode } from "./menu-node";
+
+type MenuTreeProps = {
+  tree: NodeModel<TreeMenu>[];
+  fieldArray: UseFieldArrayReturn<SiteMapFormData>;
+};
+
+function MenuTree({ tree, fieldArray }: MenuTreeProps) {
+  const treeMethods = useRef<TreeMethods>(null);
+
+  return (
+    <>
+      <div className="max-h-[calc(100vh-33.5rem)] min-h-[40vh] overflow-auto">
+        <Tree
+          tree={tree}
+          rootId={0}
+          ref={treeMethods}
+          render={(node: NodeModel<TreeMenu>, props) => {
+            return <MenuNode node={node} fieldArray={fieldArray} {...props} />;
+          }}
+          onDrop={() => {}}
+          canDrag={() => false}
+          canDrop={() => false}
+          classes={{
+            container: "flex flex-col",
+            dropTarget: "!bg-[rgba(32,148,250,0.5)] rounded-sm",
+            placeholder: "relative",
+          }}
+          sort={false}
+        />
+      </div>
+      <div className="flex gap-2">
+        <Button
+          color="lightGray"
+          className="flex-1 items-center px-0"
+          onClick={() => {
+            treeMethods.current?.openAll();
+          }}
+        >
+          <i className="diveicon di-arrows-angle-expand" />
+          전체펼침
+        </Button>
+        <Button
+          color="lightGray"
+          className="flex-1 items-center px-0"
+          onClick={() => {
+            treeMethods.current?.closeAll();
+          }}
+        >
+          <i className="diveicon di-arrows-angle-contract" />
+          전체접기
+        </Button>
+      </div>
+    </>
+  );
+}
+
+export { MenuTree };

apps/cs/src/pages/survey/model/posting-table-columns.tsx

@@ -36,9 +36,14 @@ export const columns: ColumnDef<Post>[] = [
     accessorKey: "pstgPrdSeNm",
     header: "게시기간",
     cell: ({ row }) => {
+      const pstgPrdSeCd = row.original.pstgPrdSeCd;
       const pstgPrdSeNm = row.original.pstgPrdSeNm;
       const pstgBgngDt = row.original.pstgBgngDt;
       const pstgEndDt = row.original.pstgEndDt;
+
+      if (pstgPrdSeCd === "99") {
+        return pstgPrdSeNm;
+      }
       return `${pstgPrdSeNm} (${dayjs(pstgBgngDt).format("YYYY-MM-DD")} ~ ${dayjs(pstgEndDt).format("YYYY-MM-DD")})`;
     },
   },

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

@@ -0,0 +1,33 @@
+import { client } from "@/shared/api";
+import { ENDPOINT } from "@/shared/config";
+import {
+  type ConnectionLogParams,
+  type ConnectionLogList,
+  type ConnectionStatisticsParams,
+  type ConnectionStatistics,
+  type ConnectionLogService,
+} from "../model/connection-log-interface";
+
+class ConnectionLogApiService implements ConnectionLogService {
+  async getConnectionLog(
+    params: ConnectionLogParams,
+  ): Promise<ConnectionLogList> {
+    const response = await client.get<ConnectionLogList>(
+      `${ENDPOINT.CMS_SERVICE.CONNECTION_LOG}`,
+      { params },
+    );
+    return response.data;
+  }
+
+  async getConnectionStatistics(
+    params: ConnectionStatisticsParams,
+  ): Promise<ConnectionStatistics> {
+    const response = await client.get<ConnectionStatistics>(
+      `${ENDPOINT.CMS_SERVICE.CONNECTION_LOG}/stat`,
+      { params },
+    );
+    return response.data;
+  }
+}
+
+export const ConnectionLogApi = new ConnectionLogApiService();

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,103 @@
+import type { ChartData, ChartOptions } from "chart.js";
+import { getCssVariableValue } from "@common/components";
+import type { ConnectionStatistics } from "./connection-log-interface";
+
+export const chartData = {
+  day: (
+    data: ConnectionStatistics,
+  ): {
+    data: ChartData<"line">;
+    options: ChartOptions<"line">;
+  } => {
+    return {
+      data: {
+        labels: data.dayList.map((item) => item.dayYmd),
+        datasets: [
+          {
+            type: "line",
+            label: "접속자 수",
+            data: data.dayList.map((item) => item.accessCnt),
+            borderColor: getCssVariableValue("--chart-1"),
+          },
+        ],
+      },
+      options: {
+        maintainAspectRatio: false,
+        scales: {
+          y: {
+            ticks: {
+              precision: 0,
+            },
+          },
+        },
+      },
+    };
+  },
+  site: (
+    data: ConnectionStatistics,
+  ): {
+    data: ChartData<"bar">;
+    options: ChartOptions<"bar">;
+  } => {
+    return {
+      data: {
+        labels: data.siteList.map((item) => item.siteNm),
+        datasets: [
+          {
+            type: "bar",
+            label: "사이트별 접속자",
+            data: data.siteList.map((item) => item.accessCnt),
+            backgroundColor: data.siteList.map((_, index) =>
+              getCssVariableValue(`--chart-${(index % 5) + 1}`),
+            ),
+          },
+        ],
+      },
+      options: {
+        maintainAspectRatio: false,
+        indexAxis: "y",
+        scales: {
+          x: {
+            ticks: {
+              precision: 0,
+            },
+          },
+        },
+        plugins: {
+          legend: {
+            display: false,
+          },
+        },
+      },
+    };
+  },
+  browser: (
+    data: ConnectionStatistics,
+  ): {
+    data: ChartData<"doughnut">;
+    options: ChartOptions<"doughnut">;
+  } => {
+    return {
+      data: {
+        labels: data.browserList.map((item) => item.wbsrKndNm),
+        datasets: [
+          {
+            type: "doughnut",
+            data: data.browserList.map((item) => item.accessCnt),
+            backgroundColor: data.browserList.map((_, index) =>
+              getCssVariableValue(`--chart-${(index % 5) + 1}`),
+            ),
+          },
+        ],
+      },
+      options: {
+        maintainAspectRatio: false,
+        plugins: {
+          legend: {
+            position: "bottom",
+          },
+        },
+      },
+    };
+  },
+};

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

@@ -0,0 +1,72 @@
+import type { PageableList, PageableParams } from "@/shared/model";
+
+export interface ConnectionLogParams extends PageableParams {
+  keywordType?: string;
+  keyword?: string;
+  siteId?: string;
+  cntnIp?: string;
+  cntnRgn?: string;
+  wbsrKnd?: string;
+  urlPath?: string;
+  cntnDtStart?: string;
+  cntnDtEnd?: string;
+}
+
+export interface ConnectionLog {
+  cntnSn: number;
+  cntnDt: string;
+  cntnId: string;
+  cntnIp: string;
+  cntnRgn: string;
+  wbsrKnd: string;
+  menuCd: number;
+  siteId: string;
+  urlPath: string;
+  siteNm: string;
+  menuNm: string;
+  wbsrKndNm: string;
+}
+
+export interface ConnectionStatisticsParams {
+  keywordType?: string;
+  keyword?: string;
+  siteId?: string;
+  cntnIp?: string;
+  cntnRgn?: string;
+  wbsrKnd?: string;
+  urlPath?: string;
+  cntnDtStart?: string;
+  cntnDtEnd?: string;
+}
+
+interface DayConnectionStatistics {
+  dayYmd: string;
+  accessCnt: number;
+}
+
+interface SiteConnectionStatistics {
+  siteId: string;
+  siteNm: string;
+  accessCnt: number;
+}
+
+interface BrowserConnectionStatistics {
+  wbsrKnd: string;
+  wbsrKndNm: string;
+  accessCnt: number;
+}
+
+export interface ConnectionStatistics {
+  dayList: DayConnectionStatistics[];
+  siteList: SiteConnectionStatistics[];
+  browserList: BrowserConnectionStatistics[];
+}
+
+export type ConnectionLogList = PageableList<ConnectionLog>;
+
+export interface ConnectionLogService {
+  getConnectionLog(params: ConnectionLogParams): Promise<ConnectionLogList>;
+  getConnectionStatistics(
+    params: ConnectionStatisticsParams,
+  ): Promise<ConnectionStatistics>;
+}

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

@@ -0,0 +1,46 @@
+import type { ColumnDef } from "@tanstack/react-table";
+import type { ConnectionLog } from "./connection-log-interface";
+import dayjs from "dayjs";
+
+export const columns: ColumnDef<ConnectionLog>[] = [
+  {
+    header: "No",
+    cell: ({ row, table }) => {
+      const totalRows = table.getRowCount();
+      const currentPage = table.getState().pagination.pageIndex;
+      const pageSize = table.getState().pagination.pageSize;
+      return totalRows - (currentPage * pageSize + row.index);
+    },
+  },
+  {
+    accessorKey: "cntnDt",
+    header: "접속일시",
+    cell: ({ row }) => {
+      return dayjs(row.original.cntnDt).format("YYYY-MM-DD HH:mm:ss");
+    },
+  },
+  {
+    accessorKey: "cntnIp",
+    header: "접속IP",
+  },
+  {
+    accessorKey: "cntnRgn",
+    header: "접속지역",
+  },
+  {
+    accessorKey: "urlPath",
+    header: "URL경로",
+  },
+  {
+    accessorKey: "wbsrKndNm",
+    header: "브라우저",
+  },
+  {
+    accessorKey: "siteNm",
+    header: "사이트",
+  },
+  {
+    accessorKey: "menuNm",
+    header: "메뉴명",
+  },
+];

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

@@ -0,0 +1,310 @@
+"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,
+} from "chart.js";
+import { Bar, Doughnut, Line } 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 { ENDPOINT } from "@/shared/config";
+import { NoData } from "@/shared/ui/no-data";
+import { InputDateRangePicker } from "@/shared/ui/input-date-range-picker";
+import { ConnectionLogApi } from "../api/connection-log-service";
+import { chartData } from "../model/chart-data";
+import { columns } from "../model/table-columns";
+import type { ConnectionStatisticsParams } from "../model/connection-log-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 [siteId, setSiteId] = useState("");
+  const [presetDateRange, setPresetDateRange] = useState("1W");
+  const [dateRange, setDateRange] = useState<DateRange>(defaultDateRange);
+  const [searchParams, setSearchParams] = useState<ConnectionStatisticsParams>({
+    keywordType: "",
+    keyword: "",
+    siteId: "",
+    cntnDtStart: dayjs(defaultDateRange.from).format("YYYY-MM-DD"),
+    cntnDtEnd: dayjs(defaultDateRange.to).format("YYYY-MM-DD"),
+  });
+
+  const query = useQuery({
+    queryKey: [ENDPOINT.CMS_SERVICE.CONNECTION_LOG, searchParams],
+    queryFn: () =>
+      ConnectionLogApi.getConnectionLog({
+        ...searchParams,
+      }),
+    placeholderData: keepPreviousData,
+  });
+
+  const { data: connectionStatisticsData } = useQuery({
+    queryKey: [ENDPOINT.CMS_SERVICE.CONNECTION_LOG, searchParams],
+    queryFn: () =>
+      ConnectionLogApi.getConnectionStatistics({
+        ...searchParams,
+      }),
+    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();
+    const params: ConnectionStatisticsParams = {
+      keywordType,
+      keyword,
+      siteId,
+      cntnDtStart: dateRange.from
+        ? dayjs(dateRange.from).format("YYYY-MM-DD")
+        : "",
+      cntnDtEnd: dateRange.to ? dayjs(dateRange.to).format("YYYY-MM-DD") : "",
+    };
+    setSearchParams(params);
+  };
+
+  const handleReset = () => {
+    setKeywordType("");
+    setKeyword("");
+    setSiteId("");
+    setDateRange(defaultDateRange);
+    setPresetDateRange("1W");
+    setSearchParams({
+      keywordType: "",
+      keyword: "",
+      siteId: "",
+      cntnDtStart: dayjs(defaultDateRange.from).format("YYYY-MM-DD"),
+      cntnDtEnd: dayjs(defaultDateRange.to).format("YYYY-MM-DD"),
+    });
+  };
+
+  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
+            className="w-[16rem]"
+            value={siteId}
+            onValueChange={(value) => setSiteId(value)}
+          />
+          <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="cntnIp">접속IP</SelectItem>
+              <SelectItem value="cntnRgn">접속지역</SelectItem>
+              <SelectItem value="wbsrKnd">브라우저</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-2xl font-medium">일별 접속 현황</h3>
+          </div>
+          <div className="h-96 p-4">
+            {connectionStatisticsData?.dayList?.length ? (
+              <Line {...chartData.day(connectionStatisticsData)} />
+            ) : (
+              <NoData />
+            )}
+          </div>
+        </div>
+
+        <div className="grid grid-cols-2">
+          <div className="card card-border">
+            <div className="card-header">
+              <h3 className="text-2xl font-medium">사이트별 접속자</h3>
+            </div>
+            <div className="h-96 p-4">
+              {connectionStatisticsData?.siteList?.length ? (
+                <Bar {...chartData.site(connectionStatisticsData)} />
+              ) : (
+                <NoData />
+              )}
+            </div>
+          </div>
+
+          <div className="card card-border">
+            <div className="card-header">
+              <h3 className="text-2xl font-medium">브라우저별 접속자</h3>
+            </div>
+            <div className="h-96 p-4">
+              {connectionStatisticsData?.browserList?.length ? (
+                <Doughnut {...chartData.browser(connectionStatisticsData)} />
+              ) : (
+                <NoData />
+              )}
+            </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/model/table-columns.tsx

@@ -1,6 +1,11 @@
 import dayjs from "dayjs";
 import type { ColumnDef } from "@tanstack/react-table";
-import type { UserListResponse } from "@/entities/user";
+import {
+  USER_STATE_CODE,
+  type UserListResponse,
+  type UserStateCode,
+} from "@/entities/user";
+import { Badge } from "@common/components";
 
 export const columns: ColumnDef<UserListResponse>[] = [
   {
@@ -42,8 +47,11 @@ export const columns: ColumnDef<UserListResponse>[] = [
     header: "기관/부서",
   },
   {
-    accessorKey: "userStateCodeName",
+    accessorKey: "userStateCode",
     header: "회원상태",
+    cell: ({ row }) => {
+      return getUserStateBadge(row.original.userStateCode);
+    },
   },
   {
     accessorKey: "aprvYmd",
@@ -63,3 +71,18 @@ export const columns: ColumnDef<UserListResponse>[] = [
     },
   },
 ];
+
+const getUserStateBadge = (userStateCode: UserStateCode) => {
+  switch (userStateCode) {
+    case USER_STATE_CODE.대기:
+      return <Badge color="gray">대기</Badge>;
+    case USER_STATE_CODE.정상:
+      return <Badge color="green">정상</Badge>;
+    case USER_STATE_CODE.정지:
+      return <Badge color="yellow">정지</Badge>;
+    case USER_STATE_CODE.탈퇴:
+      return <Badge color="purple">탈퇴</Badge>;
+    case USER_STATE_CODE.삭제:
+      return <Badge color="red">삭제</Badge>;
+  }
+};

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

@@ -16,20 +16,11 @@ function CreatePage() {
     defaultValues: {
       userId: "",
       userName: "",
-      email: "",
       password: "",
       pswdHnt: "",
-      pswdAns: "",
-      mphn: "",
-      telno: "",
-      zip: "",
-      addr: "",
-      daddr: "",
       laeSeCd: "",
       ogdpSeCd: "",
       expryYmd: "",
-      instSeCd: "",
-      enoCd: "",
     },
   });
 

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

@@ -8,7 +8,6 @@ import { getCoreRowModel, type PaginationState } from "@tanstack/react-table";
 import {
   Button,
   Checkbox,
-  DateRangePicker,
   Input,
   Label,
   Select,
@@ -25,10 +24,11 @@ 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 = {
-  from: Date | undefined;
+  from?: Date | undefined;
   to?: Date | undefined;
 };
 
@@ -39,7 +39,8 @@ function UsersPage() {
     pageIndex: 0,
     pageSize: 10,
   });
-  const [dateRange, setDateRange] = useState<DateRange | undefined>({
+  const [presetDateRange, setPresetDateRange] = useState("");
+  const [dateRange, setDateRange] = useState<DateRange>({
     from: undefined,
     to: undefined,
   });
@@ -61,7 +62,7 @@ function UsersPage() {
   });
 
   const { data: userSttsStats } = useQuery({
-    queryKey: [ENDPOINT.USER_SERVICE.USERS],
+    queryKey: [ENDPOINT.USER_SERVICE.USERS, "userStatusStatistics"],
     queryFn: () => UserApi.selectUserSttsStats(),
   });
 
@@ -144,7 +145,7 @@ function UsersPage() {
   };
 
   const handlePresetDateRange = (value: string) => {
-    let presetDateRange: DateRange | undefined;
+    let presetDateRange: DateRange;
     switch (value) {
       case "1M":
         presetDateRange = {
@@ -165,14 +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) => {
@@ -277,14 +288,12 @@ function UsersPage() {
             </div>
             <div className="flex items-center gap-2">
               <Label className="mr-2 text-label">기간</Label>
-              <DateRangePicker value={dateRange} onValueChange={setDateRange}>
-                <div className="card card-border flex items-center gap-2">
-                  <Select onValueChange={handlePresetDateRange}>
-                    <SelectTrigger>
-                      <SelectValue
-                        placeholder="기간 선택"
-                        className="w-[24rem]"
-                      />
+              <Select
+                value={presetDateRange}
+                onValueChange={handlePresetDateRange}
+              >
+                <SelectTrigger className="w-[12rem]">
+                  <SelectValue placeholder="기간 선택" className="w-[24rem]" />
                 </SelectTrigger>
                 <SelectContent>
                   <SelectItem value="1M">1개월</SelectItem>
@@ -292,8 +301,10 @@ function UsersPage() {
                   <SelectItem value="6M">6개월</SelectItem>
                 </SelectContent>
               </Select>
-                </div>
-              </DateRangePicker>
+              <InputDateRangePicker
+                dateRange={dateRange}
+                setDateRange={handleDateRangeChange}
+              />
             </div>
           </div>
           <div className="flex items-center gap-2">

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

@@ -23,6 +23,7 @@ export const ENDPOINT = {
     PRIVACYLOG: "/user-service//api/v1/prvc-inq-logs",
   },
   CMS_SERVICE: {
+    DASHBOARD: "/cms-service/api/v1/dashboard",
     SITES: "/cms-service/api/v1/sites",
     IPS: "/cms-service/api/v1/site-ips",
     DOMAINS: "/cms-service/api/v1/site-dmns",
@@ -53,6 +54,8 @@ export const ENDPOINT = {
     GROUP_USERS: "/cms-service/api/v1/group-users",
     MANAGER_IP: "/cms-service/api/v1/mgrip",
     APILOG: "/cms-service/api/v1/api-logs",
+    SITE_AUTHORITY: "/cms-service/api/v1/site-authrt",
+    CONNECTION_LOG: "/cms-service/api/v1/cntnlog",
   },
   BOARD_SERVICE: {
     BBS: "/board-service/api/v1/bbs",

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 };