Merge remote-tracking branch 'origin/iipbs/as/dev' into iipbs/as/dev

# Conflicts:
#	apps/as/src/pages/instl-sncn/ui/cnfm-regist-page.tsx

apps/as/src/entities/acntg/api/acntg-service.ts

@@ -1,15 +1,52 @@
 import { client } from "@/shared/api";
 import { ENDPOINT } from "@/shared/config";
+import type { PageResponse } from "@/shared/model";
 
-import type { AcntgSeMngTreeDto, AcntgService } from "../model/acntg-interface";
+import type {
+  AcntgSeMngResponseDto,
+  AcntgSeMngSaveRequestDto,
+  AcntgSeMngSearchDto,
+  AcntgSeMngService,
+  AcntgSeMngTreeDto,
+} from "../model/acntg-interface";
 
-async function findTree(): Promise<AcntgSeMngTreeDto[]> {
-  const response = await client.get<AcntgSeMngTreeDto[]>(
-    `${ENDPOINT.AS_COMMON_SERVICE.ACNTG_SE}/list/tree`,
-  );
+const BASE = ENDPOINT.AS_COMMON_SERVICE.ACNTG_SE;
+
+async function findAll(params: AcntgSeMngSearchDto): Promise<PageResponse<AcntgSeMngResponseDto>> {
+  const response = await client.get<PageResponse<AcntgSeMngResponseDto>>(BASE, { params });
   return response.data;
 }
 
-export const acntgService = {
+async function findTree(): Promise<AcntgSeMngTreeDto[]> {
+  const response = await client.get<AcntgSeMngTreeDto[]>(`${BASE}/list/tree`);
+  return response.data;
+}
+
+async function findById(acntgSeCd: string): Promise<AcntgSeMngResponseDto> {
+  const response = await client.get<AcntgSeMngResponseDto>(`${BASE}/${acntgSeCd}`);
+  return response.data;
+}
+
+async function save(body: AcntgSeMngSaveRequestDto): Promise<string> {
+  const response = await client.post<string>(BASE, body);
+  return response.data;
+}
+
+async function update(acntgSeCd: string, body: AcntgSeMngSaveRequestDto): Promise<string> {
+  const response = await client.put<string>(`${BASE}/${acntgSeCd}`, body);
+  return response.data;
+}
+
+async function deleteAcntgSeCd(acntgSeCd: string): Promise<string> {
+  const response = await client.delete<string>(`${BASE}/${acntgSeCd}`);
+  return response.data;
+}
+
+export const acntgSeMngService = {
+  findAll,
   findTree,
-} satisfies AcntgService;
+  findById,
+  save,
+  update,
+  delete: deleteAcntgSeCd,
+} satisfies AcntgSeMngService;

apps/as/src/entities/acntg/api/queries.ts

@@ -0,0 +1,69 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+
+import { ENDPOINT } from "@/shared/config";
+
+import type { AcntgSeMngSaveRequestDto, AcntgSeMngSearchDto } from "../model/acntg-interface";
+
+import { acntgSeMngService } from "./acntg-service";
+
+const acntgSeMngBaseKey = [ENDPOINT.AS_COMMON_SERVICE.ACNTG_SE] as const;
+
+export function useAcntgSeMngPage(params: AcntgSeMngSearchDto) {
+  return useQuery({
+    queryKey: [...acntgSeMngBaseKey, "findAll", params],
+    queryFn: () => acntgSeMngService.findAll(params),
+  });
+}
+
+export function useAcntgSeMngTree() {
+  return useQuery({
+    queryKey: [...acntgSeMngBaseKey, "findTree"],
+    queryFn: () => acntgSeMngService.findTree(),
+    staleTime: Infinity,
+  });
+}
+
+export function useAcntgSeMng(acntgSeCd: string | null | undefined) {
+  return useQuery({
+    queryKey: [...acntgSeMngBaseKey, "findById", acntgSeCd],
+    queryFn: () => acntgSeMngService.findById(acntgSeCd!),
+    enabled: Boolean(acntgSeCd),
+  });
+}
+
+export function useSaveAcntgSeMng() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (body: AcntgSeMngSaveRequestDto) => acntgSeMngService.save(body),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: acntgSeMngBaseKey });
+    },
+  });
+}
+
+export function useUpdateAcntgSeMng() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ acntgSeCd, body }: { acntgSeCd: string; body: AcntgSeMngSaveRequestDto }) =>
+      acntgSeMngService.update(acntgSeCd, body),
+    onSuccess: (_data, { acntgSeCd }) => {
+      queryClient.invalidateQueries({ queryKey: acntgSeMngBaseKey });
+      queryClient.invalidateQueries({
+        queryKey: [...acntgSeMngBaseKey, "findById", acntgSeCd],
+      });
+    },
+  });
+}
+
+export function useDeleteAcntgSeMng() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (acntgSeCd: string) => acntgSeMngService.delete(acntgSeCd),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: acntgSeMngBaseKey });
+    },
+  });
+}

apps/as/src/entities/acntg/index.ts

@@ -1,2 +1,17 @@
-export type { AcntgSeMngTreeDto, AcntgService } from "./model/acntg-interface";
-export { acntgService } from "./api/acntg-service";
+export { acntgSeMngService } from "./api/acntg-service";
+export {
+  useAcntgSeMng,
+  useAcntgSeMngPage,
+  useAcntgSeMngTree,
+  useDeleteAcntgSeMng,
+  useSaveAcntgSeMng,
+  useUpdateAcntgSeMng,
+} from "./api/queries";
+export type {
+  AcntgSeMngResponseDto,
+  AcntgSeMngSaveRequestDto,
+  AcntgSeMngSearchDto,
+  AcntgSeMngService,
+  AcntgSeMngTreeDto,
+  BizCstTreeDto,
+} from "./model/acntg-interface";

apps/as/src/entities/acntg/model/acntg-interface.ts

@@ -1,23 +1,67 @@
-/** 회계구분 트리 노드 DTO */
-export interface AcntgSeMngTreeDto {
-  /** 들여쓰기 포함 표시명 (앞 공백 수 = 레벨 인디케이터) */
-  indAcntgSeCdNm: string;
-  /** 회계구분코드 */
+import type { PageableParams, PageResponse } from "@/shared/model";
+
+/** 백엔드 AcntgSeMngResponseDto */
+export interface AcntgSeMngResponseDto {
   acntgSeCd: string;
-  /** 회계구분코드명 */
   acntgSeCdNm: string;
-  /** 상위 회계구분코드 (null = 최상위) */
-  upAcntgSeCd: string | null;
-  /** 사용여부 */
+  upAcntgSeCd?: string;
+  cdLvNo: number;
+  useYn: string;
+  expln?: string;
+  rgtr?: string;
+  rgtrNm?: string;
+  mdfr?: string;
+  regDt?: string;
+  mdfcnDt?: string;
+}
+
+/** 백엔드 AcntgSeMngSearchDto + Pageable */
+export interface AcntgSeMngSearchDto extends PageableParams {
+  acntgSeCd?: string;
+  acntgSeCdNm?: string;
+  useYn?: string;
+}
+
+/** 백엔드 AcntgSeMngSaveRequestDto */
+export interface AcntgSeMngSaveRequestDto {
+  acntgSeCd: string;
+  acntgSeCdNm: string;
+  upAcntgSeCd?: string;
+  cdLvNo: number;
+  useYn?: string;
+  expln?: string;
+}
+
+/** 백엔드 AcntgSeMngTreeDto */
+export interface AcntgSeMngTreeDto {
+  indAcntgSeCdNm: string;
+  acntgSeCd: string;
+  acntgSeCdNm: string;
+  upAcntgSeCd?: string;
   useYn: string;
-  /** 트리 레벨 (1 = 총사업비, 2 = 1.공사비/2.보상비/3.부대경비, …) */
   treeLevel: number;
-  /** 최상위~현재 노드까지 "|" 구분 경로 */
   treePath: string;
 }
 
-/** 회계구분 서비스 인터페이스 */
-export interface AcntgService {
-  /** 회계구분 트리 전체 조회 */
-  findTree(): Promise<AcntgSeMngTreeDto[]>;
+/** 백엔드 BizCstTreeDto (InstlSncnMngDetResponseDto 등에서 참조) */
+export interface BizCstTreeDto {
+  indAcntgSeCdNm: string;
+  acntgSeCd: string;
+  acntgSeCdNm: string;
+  useYn: string;
+  treeLevel: number;
+  treePath: string;
+  bscPlanAmt?: number;
+  bgtRfltAmt?: number;
+  tstmDesignAmt?: number;
+}
+
+/** Controller public 메서드명·시그니처와 동일 */
+export interface AcntgSeMngService {
+  findAll(params: AcntgSeMngSearchDto): Promise<PageResponse<AcntgSeMngResponseDto>>;
+  findTree(): Promise<AcntgSeMngTreeDto[]>;
+  findById(acntgSeCd: string): Promise<AcntgSeMngResponseDto>;
+  save(body: AcntgSeMngSaveRequestDto): Promise<string>;
+  update(acntgSeCd: string, body: AcntgSeMngSaveRequestDto): Promise<string>;
+  delete(acntgSeCd: string): Promise<string>;
 }

apps/as/src/entities/cnstp/api/cnstp-service.ts

@@ -1,15 +1,52 @@
 import { client } from "@/shared/api";
 import { ENDPOINT } from "@/shared/config";
+import type { PageResponse } from "@/shared/model";
 
-import type { CnstpSeMngTreeDto, CnstpService } from "../model/cnstp-interface";
+import type {
+  CnstpSeMngResponseDto,
+  CnstpSeMngSaveRequestDto,
+  CnstpSeMngSearchDto,
+  CnstpSeMngService,
+  CnstpSeMngTreeDto,
+} from "../model/cnstp-interface";
 
-async function findTree(): Promise<CnstpSeMngTreeDto[]> {
-  const response = await client.get<CnstpSeMngTreeDto[]>(
-    `${ENDPOINT.AS_COMMON_SERVICE.CNSTP_SE}/list/tree`,
-  );
+const BASE = ENDPOINT.AS_COMMON_SERVICE.CNSTP_SE;
+
+async function findAll(params: CnstpSeMngSearchDto): Promise<PageResponse<CnstpSeMngResponseDto>> {
+  const response = await client.get<PageResponse<CnstpSeMngResponseDto>>(BASE, { params });
   return response.data;
 }
 
-export const cnstpService = {
+async function findTree(): Promise<CnstpSeMngTreeDto[]> {
+  const response = await client.get<CnstpSeMngTreeDto[]>(`${BASE}/list/tree`);
+  return response.data;
+}
+
+async function findById(cnstpSeCd: string): Promise<CnstpSeMngResponseDto> {
+  const response = await client.get<CnstpSeMngResponseDto>(`${BASE}/${cnstpSeCd}`);
+  return response.data;
+}
+
+async function save(body: CnstpSeMngSaveRequestDto): Promise<string> {
+  const response = await client.post<string>(BASE, body);
+  return response.data;
+}
+
+async function update(cnstpSeCd: string, body: CnstpSeMngSaveRequestDto): Promise<string> {
+  const response = await client.put<string>(`${BASE}/${cnstpSeCd}`, body);
+  return response.data;
+}
+
+async function deleteCnstpSeCd(cnstpSeCd: string): Promise<string> {
+  const response = await client.delete<string>(`${BASE}/${cnstpSeCd}`);
+  return response.data;
+}
+
+export const cnstpSeMngService = {
+  findAll,
   findTree,
-} satisfies CnstpService;
+  findById,
+  save,
+  update,
+  delete: deleteCnstpSeCd,
+} satisfies CnstpSeMngService;

apps/as/src/entities/cnstp/api/queries.ts

@@ -0,0 +1,69 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+
+import { ENDPOINT } from "@/shared/config";
+
+import type { CnstpSeMngSaveRequestDto, CnstpSeMngSearchDto } from "../model/cnstp-interface";
+
+import { cnstpSeMngService } from "./cnstp-service";
+
+const cnstpSeMngBaseKey = [ENDPOINT.AS_COMMON_SERVICE.CNSTP_SE] as const;
+
+export function useCnstpSeMngPage(params: CnstpSeMngSearchDto) {
+  return useQuery({
+    queryKey: [...cnstpSeMngBaseKey, "findAll", params],
+    queryFn: () => cnstpSeMngService.findAll(params),
+  });
+}
+
+export function useCnstpSeMngTree() {
+  return useQuery({
+    queryKey: [...cnstpSeMngBaseKey, "findTree"],
+    queryFn: () => cnstpSeMngService.findTree(),
+    staleTime: Infinity,
+  });
+}
+
+export function useCnstpSeMng(cnstpSeCd: string | null | undefined) {
+  return useQuery({
+    queryKey: [...cnstpSeMngBaseKey, "findById", cnstpSeCd],
+    queryFn: () => cnstpSeMngService.findById(cnstpSeCd!),
+    enabled: Boolean(cnstpSeCd),
+  });
+}
+
+export function useSaveCnstpSeMng() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (body: CnstpSeMngSaveRequestDto) => cnstpSeMngService.save(body),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: cnstpSeMngBaseKey });
+    },
+  });
+}
+
+export function useUpdateCnstpSeMng() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ cnstpSeCd, body }: { cnstpSeCd: string; body: CnstpSeMngSaveRequestDto }) =>
+      cnstpSeMngService.update(cnstpSeCd, body),
+    onSuccess: (_data, { cnstpSeCd }) => {
+      queryClient.invalidateQueries({ queryKey: cnstpSeMngBaseKey });
+      queryClient.invalidateQueries({
+        queryKey: [...cnstpSeMngBaseKey, "findById", cnstpSeCd],
+      });
+    },
+  });
+}
+
+export function useDeleteCnstpSeMng() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (cnstpSeCd: string) => cnstpSeMngService.delete(cnstpSeCd),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: cnstpSeMngBaseKey });
+    },
+  });
+}

apps/as/src/entities/cnstp/index.ts

@@ -1,2 +1,17 @@
-export type { CnstpSeMngTreeDto, CnstpService } from "./model/cnstp-interface";
-export { cnstpService } from "./api/cnstp-service";
+export { cnstpSeMngService } from "./api/cnstp-service";
+export {
+  useCnstpSeMng,
+  useCnstpSeMngPage,
+  useCnstpSeMngTree,
+  useDeleteCnstpSeMng,
+  useSaveCnstpSeMng,
+  useUpdateCnstpSeMng,
+} from "./api/queries";
+export type {
+  BizSclTreeDto,
+  CnstpSeMngResponseDto,
+  CnstpSeMngSaveRequestDto,
+  CnstpSeMngSearchDto,
+  CnstpSeMngService,
+  CnstpSeMngTreeDto,
+} from "./model/cnstp-interface";

apps/as/src/entities/cnstp/model/cnstp-interface.ts

@@ -1,23 +1,67 @@
-/** 공종구분 트리 노드 DTO */
-export interface CnstpSeMngTreeDto {
-  /** 들여쓰기 포함 표시명 */
-  indCnstpSeCdNm: string;
-  /** 공종구분코드 */
+import type { PageableParams, PageResponse } from "@/shared/model";
+
+/** 백엔드 CnstpSeMngResponseDto */
+export interface CnstpSeMngResponseDto {
   cnstpSeCd: string;
-  /** 공종구분코드명 */
   cnstpSeCdNm: string;
-  /** 상위 공종구분코드 (null = 최상위) */
-  upCnstpCd: string | null;
-  /** 사용여부 */
+  upCnstpCd?: string;
+  cdLvNo: number;
+  useYn: string;
+  expln?: string;
+  rgtr?: string;
+  rgtrNm?: string;
+  mdfr?: string;
+  regDt?: string;
+  mdfcnDt?: string;
+}
+
+/** 백엔드 CnstpSeMngSearchDto + Pageable */
+export interface CnstpSeMngSearchDto extends PageableParams {
+  cnstpSeCd?: string;
+  cnstpSeCdNm?: string;
+  useYn?: string;
+}
+
+/** 백엔드 CnstpSeMngSaveRequestDto */
+export interface CnstpSeMngSaveRequestDto {
+  cnstpSeCd: string;
+  cnstpSeCdNm?: string;
+  upCnstpCd?: string;
+  cdLvNo?: number;
+  useYn?: string;
+  expln?: string;
+}
+
+/** 백엔드 CnstpSeMngTreeDto */
+export interface CnstpSeMngTreeDto {
+  indCnstpSeCdNm: string;
+  cnstpSeCd: string;
+  cnstpSeCdNm: string;
+  upCnstpCd?: string;
   useYn: string;
-  /** 트리 레벨 */
   treeLevel: number;
-  /** 최상위~현재 노드까지 "|" 구분 경로 */
   treePath: string;
 }
 
-/** 공종구분 서비스 인터페이스 */
-export interface CnstpService {
-  /** 공종구분 트리 전체 조회 */
-  findTree(): Promise<CnstpSeMngTreeDto[]>;
+/** 백엔드 BizSclTreeDto */
+export interface BizSclTreeDto {
+  indCnstpSeCdNm: string;
+  cnstpSeCd: string;
+  cnstpSeCdNm: string;
+  useYn: string;
+  treeLevel: number;
+  treePath: string;
+  bscPlanQty?: number;
+  bgtRfltQty?: number;
+  tstmDesignQty?: number;
+}
+
+/** Controller public 메서드명·시그니처와 동일 */
+export interface CnstpSeMngService {
+  findAll(params: CnstpSeMngSearchDto): Promise<PageResponse<CnstpSeMngResponseDto>>;
+  findTree(): Promise<CnstpSeMngTreeDto[]>;
+  findById(cnstpSeCd: string): Promise<CnstpSeMngResponseDto>;
+  save(body: CnstpSeMngSaveRequestDto): Promise<string>;
+  update(cnstpSeCd: string, body: CnstpSeMngSaveRequestDto): Promise<string>;
+  delete(cnstpSeCd: string): Promise<string>;
 }

apps/as/src/pages/checklist-management/model/cklst-artcl-columns.tsx

@@ -20,25 +20,25 @@ export function createCklstArtclColumns({ onEdit, onDelete }: CreateCklstArtclCo
     }),
     columnHelper.accessor("cklstArtclNm", {
       header: "점검항목명",
-      cell: ({ getValue }) => getValue() ?? "—",
+      cell: ({ getValue }) => getValue() ?? "-",
     }),
     columnHelper.accessor("useYn", {
       header: "사용여부",
       cell: ({ getValue }) => {
         const value = getValue();
-        return value === "Y" ? "예" : value === "N" ? "아니오" : "—";
+        return value === "Y" ? "예" : value === "N" ? "아니오" : "-";
       },
     }),
     columnHelper.accessor("regDt", {
       header: "등록일시",
-      cell: ({ getValue }) => getValue() ?? "—",
+      cell: ({ getValue }) => getValue() ?? "-",
     }),
     columnHelper.display({
       id: "actions",
       header: "관리",
       cell: ({ row }) => (
         <div className="flex justify-center gap-2">
-          <Button type="button" size="sm" onClick={() => onEdit(row.original)}>
+          <Button type="button" size="sm" color="white" onClick={() => onEdit(row.original)}>
             관리
           </Button>
           <Button type="button" size="sm" color="red" onClick={() => onDelete(row.original)}>

apps/as/src/pages/checklist-management/model/cklst-mng-columns.tsx

@@ -29,29 +29,29 @@ export function createCklstMngColumns({ onEdit, onDelete }: CreateCklstMngColumn
     }),
     columnHelper.accessor("docSeComNm", {
       header: "문서구분",
-      cell: ({ getValue, row }) => getValue() ?? row.original.docSeComCd ?? "—",
+      cell: ({ getValue, row }) => getValue() ?? row.original.docSeComCd ?? "-",
     }),
     columnHelper.accessor("taskSeCdNm", {
       header: "업무구분",
-      cell: ({ getValue, row }) => getValue() ?? row.original.taskSeComCd ?? "—",
+      cell: ({ getValue, row }) => getValue() ?? row.original.taskSeComCd ?? "-",
     }),
     columnHelper.accessor("useYn", {
       header: "사용여부",
       cell: ({ getValue }) => {
         const value = getValue();
-        return value === "Y" ? "예" : value === "N" ? "아니오" : "—";
+        return value === "Y" ? "예" : value === "N" ? "아니오" : "-";
       },
     }),
     columnHelper.accessor("regDt", {
       header: "등록일시",
-      cell: ({ getValue }) => getValue() ?? "—",
+      cell: ({ getValue }) => getValue() ?? "-",
     }),
     columnHelper.display({
       id: "actions",
       header: "관리",
       cell: ({ row }) => (
         <div className="flex justify-center gap-2" onClick={(e) => e.stopPropagation()}>
-          <Button type="button" size="sm" onClick={() => onEdit(row.original)}>
+          <Button type="button" size="sm" color="white" onClick={() => onEdit(row.original)}>
             관리
           </Button>
           <Button type="button" size="sm" color="red" onClick={() => onDelete(row.original)}>

apps/as/src/pages/checklist-management/ui/cklst-rvw-grid.tsx

@@ -248,11 +248,12 @@ function CklstRvwGrid({ selectedCklst }: CklstRvwGridProps) {
           >
             미리보기
           </Button>
-          <Button type="button" color="white" disabled={isDisabled} onClick={addRootRow}>
-            + 체크리스트 추가
+          <Button type="button" disabled={isDisabled} onClick={addRootRow}>
+            체크리스트 추가
           </Button>
           <Button
             type="button"
+            color="green"
             disabled={getDirtyRows().length === 0 || isDisabled || isSaving}
             onClick={handleSave}
           >

apps/as/src/pages/code-management/index.ts

@@ -0,0 +1 @@
+export { CodeManagementPage } from "./ui/code-management-page";

apps/as/src/pages/code-management/model/acntg-se-table-columns.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import { createColumnHelper } from "@tanstack/react-table";
+
+import type { AcntgSeMngResponseDto } from "@/entities/acntg";
+import { Button } from "@common/components";
+
+const columnHelper = createColumnHelper<AcntgSeMngResponseDto>();
+
+interface CreateAcntgSeColumnsOptions {
+  onEdit: (row: AcntgSeMngResponseDto) => void;
+  onDelete: (row: AcntgSeMngResponseDto) => void;
+}
+
+function formatUseYn(value: string | undefined) {
+  if (value === "Y") return "사용";
+  if (value === "N") return "미사용";
+  return "-";
+}
+
+function formatOptional(value: string | undefined) {
+  return value?.trim() ? value : "-";
+}
+
+export function createAcntgSeColumns({ onEdit, onDelete }: CreateAcntgSeColumnsOptions) {
+  return [
+    columnHelper.accessor("acntgSeCd", {
+      header: "코드",
+      meta: { align: "center" },
+    }),
+    columnHelper.accessor("acntgSeCdNm", {
+      header: "코드명",
+      meta: { align: "left" },
+      cell: ({ getValue }) => formatOptional(getValue()),
+    }),
+    columnHelper.accessor("expln", {
+      header: "설명",
+      meta: { align: "left" },
+      cell: ({ getValue }) => formatOptional(getValue()),
+    }),
+    columnHelper.accessor("useYn", {
+      header: "사용여부",
+      meta: { align: "center" },
+      cell: ({ getValue }) => formatUseYn(getValue()),
+    }),
+    columnHelper.display({
+      id: "actions",
+      header: "관리",
+      cell: ({ row }) => (
+        <div className="flex justify-center gap-2">
+          <Button type="button" size="sm" color="white" onClick={() => onEdit(row.original)}>
+            수정
+          </Button>
+          <Button type="button" size="sm" color="red" onClick={() => onDelete(row.original)}>
+            삭제
+          </Button>
+        </div>
+      ),
+    }),
+  ];
+}

apps/as/src/pages/code-management/model/cnstp-se-table-columns.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import { createColumnHelper } from "@tanstack/react-table";
+
+import type { CnstpSeMngResponseDto } from "@/entities/cnstp";
+import { Button } from "@common/components";
+
+const columnHelper = createColumnHelper<CnstpSeMngResponseDto>();
+
+interface CreateCnstpSeColumnsOptions {
+  onEdit: (row: CnstpSeMngResponseDto) => void;
+  onDelete: (row: CnstpSeMngResponseDto) => void;
+}
+
+function formatUseYn(value: string | undefined) {
+  if (value === "Y") return "사용";
+  if (value === "N") return "미사용";
+  return "-";
+}
+
+function formatOptional(value: string | undefined) {
+  return value?.trim() ? value : "-";
+}
+
+export function createCnstpSeColumns({ onEdit, onDelete }: CreateCnstpSeColumnsOptions) {
+  return [
+    columnHelper.accessor("cnstpSeCd", {
+      header: "코드",
+      meta: { align: "center" },
+    }),
+    columnHelper.accessor("cnstpSeCdNm", {
+      header: "코드명",
+      meta: { align: "left" },
+      cell: ({ getValue }) => formatOptional(getValue()),
+    }),
+    columnHelper.accessor("expln", {
+      header: "설명",
+      meta: { align: "left" },
+      cell: ({ getValue }) => formatOptional(getValue()),
+    }),
+    columnHelper.accessor("useYn", {
+      header: "사용여부",
+      meta: { align: "center" },
+      cell: ({ getValue }) => formatUseYn(getValue()),
+    }),
+    columnHelper.display({
+      id: "actions",
+      header: "관리",
+      cell: ({ row }) => (
+        <div className="flex justify-center gap-2">
+          <Button type="button" size="sm" color="white" onClick={() => onEdit(row.original)}>
+            수정
+          </Button>
+          <Button type="button" size="sm" color="red" onClick={() => onDelete(row.original)}>
+            삭제
+          </Button>
+        </div>
+      ),
+    }),
+  ];
+}

apps/as/src/pages/code-management/ui/acntg-se-form-dialog.tsx

@@ -0,0 +1,151 @@
+"use client";
+
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+
+import { useAcntgSeMng } from "@/entities/acntg";
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  Input,
+  Label,
+  RadioGroup,
+  RadioGroupItem,
+  Skeleton,
+} from "@common/components";
+
+export interface AcntgSeFormValues {
+  acntgSeCd: string;
+  acntgSeCdNm: string;
+  expln: string;
+  useYn: "Y" | "N";
+}
+
+interface AcntgSeFormDialogProps {
+  mode: "create" | "edit";
+  open: boolean;
+  acntgSeCd?: string | null;
+  onOpenChange: (open: boolean) => void;
+  isSubmitting?: boolean;
+  onSubmit: (values: AcntgSeFormValues) => void;
+}
+
+function AcntgSeFormDialog({
+  mode,
+  open,
+  acntgSeCd,
+  onOpenChange,
+  isSubmitting,
+  onSubmit,
+}: AcntgSeFormDialogProps) {
+  const detailQuery = useAcntgSeMng(mode === "edit" ? acntgSeCd : null);
+
+  const { register, handleSubmit, reset, setValue, watch } = useForm<AcntgSeFormValues>({
+    defaultValues: {
+      acntgSeCd: "",
+      acntgSeCdNm: "",
+      expln: "",
+      useYn: "Y",
+    },
+  });
+
+  const useYn = watch("useYn");
+
+  useEffect(() => {
+    if (!open) return;
+
+    if (mode === "edit") {
+      if (!detailQuery.data) return;
+      reset({
+        acntgSeCd: detailQuery.data.acntgSeCd,
+        acntgSeCdNm: detailQuery.data.acntgSeCdNm ?? "",
+        expln: detailQuery.data.expln ?? "",
+        useYn: detailQuery.data.useYn === "N" ? "N" : "Y",
+      });
+      return;
+    }
+
+    reset({
+      acntgSeCd: "",
+      acntgSeCdNm: "",
+      expln: "",
+      useYn: "Y",
+    });
+  }, [open, mode, detailQuery.data, reset]);
+
+  const isLoading = mode === "edit" && detailQuery.isPending;
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-[52rem]">
+        <DialogHeader>
+          <DialogTitle>{mode === "create" ? "회계코드 등록" : "회계코드 수정"}</DialogTitle>
+        </DialogHeader>
+        {isLoading ? (
+          <div className="space-y-4">
+            <Skeleton className="h-[4rem]" />
+            <Skeleton className="h-[4rem]" />
+            <Skeleton className="h-[4rem]" />
+          </div>
+        ) : (
+          <form className="space-y-6" onSubmit={handleSubmit(onSubmit)}>
+            <div className="space-y-2">
+              <Label htmlFor="acntgSeCd">코드</Label>
+              <Input
+                id="acntgSeCd"
+                placeholder="코드 입력"
+                maxLength={10}
+                readOnly={mode === "edit"}
+                {...register("acntgSeCd", { required: true })}
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="acntgSeCdNm">코드명</Label>
+              <Input
+                id="acntgSeCdNm"
+                placeholder="코드명 입력"
+                maxLength={100}
+                {...register("acntgSeCdNm", { required: true })}
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="expln">설명</Label>
+              <Input id="expln" placeholder="설명 입력" maxLength={1000} {...register("expln")} />
+            </div>
+            <div className="space-y-2">
+              <Label>사용여부</Label>
+              <RadioGroup
+                value={useYn}
+                onValueChange={(v) => setValue("useYn", v as "Y" | "N")}
+                className="flex gap-6"
+              >
+                <div className="flex items-center gap-2">
+                  <RadioGroupItem value="Y" id="acntg-use-y" />
+                  <Label htmlFor="acntg-use-y">사용</Label>
+                </div>
+                <div className="flex items-center gap-2">
+                  <RadioGroupItem value="N" id="acntg-use-n" />
+                  <Label htmlFor="acntg-use-n">미사용</Label>
+                </div>
+              </RadioGroup>
+            </div>
+            <DialogFooter>
+              <Button type="button" color="white" onClick={() => onOpenChange(false)}>
+                취소
+              </Button>
+              <Button type="submit" disabled={isSubmitting}>
+                저장
+              </Button>
+            </DialogFooter>
+          </form>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export { AcntgSeFormDialog };

apps/as/src/pages/code-management/ui/acntg-se-section.tsx

@@ -0,0 +1,144 @@
+"use client";
+
+import { useCallback, useMemo, useState } from "react";
+
+import { useConfirm } from "@frontend-opensource/use-react-hooks";
+import { getCoreRowModel, type PaginationState } from "@tanstack/react-table";
+
+import { useDataTable } from "@/shared/lib";
+import {
+  type AcntgSeMngResponseDto,
+  useAcntgSeMng,
+  useAcntgSeMngPage,
+  useDeleteAcntgSeMng,
+  useSaveAcntgSeMng,
+  useUpdateAcntgSeMng,
+} from "@/entities/acntg";
+import { Button } from "@common/components";
+
+import { createAcntgSeColumns } from "../model/acntg-se-table-columns";
+
+import { AcntgSeFormDialog, type AcntgSeFormValues } from "./acntg-se-form-dialog";
+
+interface AcntgSeSectionProps {
+  pagination: PaginationState;
+  onPaginationChange: (pagination: PaginationState) => void;
+}
+
+function AcntgSeSection({ pagination, onPaginationChange }: AcntgSeSectionProps) {
+  const { confirm } = useConfirm();
+  const [dialogMode, setDialogMode] = useState<"create" | "edit" | null>(null);
+  const [editingCd, setEditingCd] = useState<string | null>(null);
+
+  const pageQuery = useAcntgSeMngPage({
+    page: pagination.pageIndex,
+    size: pagination.pageSize,
+  });
+
+  const detailQuery = useAcntgSeMng(dialogMode === "edit" ? editingCd : null);
+  const saveMutation = useSaveAcntgSeMng();
+  const updateMutation = useUpdateAcntgSeMng();
+  const deleteMutation = useDeleteAcntgSeMng();
+
+  const handleDelete = useCallback(
+    async (row: AcntgSeMngResponseDto) => {
+      if (!(await confirm("삭제하시겠습니까?"))) return;
+      await deleteMutation.mutateAsync(row.acntgSeCd);
+    },
+    [confirm, deleteMutation],
+  );
+
+  const columns = useMemo(
+    () =>
+      createAcntgSeColumns({
+        onEdit: (row) => {
+          setEditingCd(row.acntgSeCd);
+          setDialogMode("edit");
+        },
+        onDelete: handleDelete,
+      }),
+    [handleDelete],
+  );
+
+  const { tableComponent } = useDataTable({
+    query: pageQuery,
+    tableOptions: {
+      columns,
+      state: { pagination },
+      onPaginationChange: (updater) => {
+        const next = typeof updater === "function" ? updater(pagination) : updater;
+        onPaginationChange(next);
+      },
+      getCoreRowModel: getCoreRowModel(),
+      manualPagination: true,
+    },
+    dataTableOptions: {
+      viewPagination: true,
+    },
+  });
+
+  const handleFormSubmit = async (values: AcntgSeFormValues) => {
+    if (!values.acntgSeCd.trim() || !values.acntgSeCdNm.trim()) return;
+
+    if (dialogMode === "create") {
+      if (!(await confirm("저장하시겠습니까?"))) return;
+      await saveMutation.mutateAsync({
+        acntgSeCd: values.acntgSeCd.trim(),
+        acntgSeCdNm: values.acntgSeCdNm.trim(),
+        expln: values.expln.trim() || undefined,
+        useYn: values.useYn,
+        cdLvNo: 1,
+      });
+    } else if (dialogMode === "edit" && detailQuery.data) {
+      if (!(await confirm("수정하시겠습니까?"))) return;
+      await updateMutation.mutateAsync({
+        acntgSeCd: detailQuery.data.acntgSeCd,
+        body: {
+          acntgSeCd: detailQuery.data.acntgSeCd,
+          acntgSeCdNm: values.acntgSeCdNm.trim(),
+          expln: values.expln.trim() || undefined,
+          useYn: values.useYn,
+          upAcntgSeCd: detailQuery.data.upAcntgSeCd,
+          cdLvNo: detailQuery.data.cdLvNo,
+        },
+      });
+    }
+
+    setDialogMode(null);
+    setEditingCd(null);
+  };
+
+  const handleOpenCreate = () => {
+    setEditingCd(null);
+    setDialogMode("create");
+  };
+
+  return (
+    <section className="card card-border mx-0 bg-background pb-6 pt-0">
+      <div className="card-header flex items-center justify-between">
+        <h3 className="text-2xl font-semibold">회계코드 관리</h3>
+        <Button type="button" onClick={handleOpenCreate}>
+          등록
+        </Button>
+      </div>
+      {tableComponent}
+      {dialogMode ? (
+        <AcntgSeFormDialog
+          mode={dialogMode}
+          open={Boolean(dialogMode)}
+          acntgSeCd={editingCd}
+          onOpenChange={(open) => {
+            if (!open) {
+              setDialogMode(null);
+              setEditingCd(null);
+            }
+          }}
+          isSubmitting={saveMutation.isPending || updateMutation.isPending}
+          onSubmit={handleFormSubmit}
+        />
+      ) : null}
+    </section>
+  );
+}
+
+export { AcntgSeSection };

apps/as/src/pages/code-management/ui/cnstp-se-form-dialog.tsx

@@ -0,0 +1,151 @@
+"use client";
+
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+
+import { useCnstpSeMng } from "@/entities/cnstp";
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  Input,
+  Label,
+  RadioGroup,
+  RadioGroupItem,
+  Skeleton,
+} from "@common/components";
+
+export interface CnstpSeFormValues {
+  cnstpSeCd: string;
+  cnstpSeCdNm: string;
+  expln: string;
+  useYn: "Y" | "N";
+}
+
+interface CnstpSeFormDialogProps {
+  mode: "create" | "edit";
+  open: boolean;
+  cnstpSeCd?: string | null;
+  onOpenChange: (open: boolean) => void;
+  isSubmitting?: boolean;
+  onSubmit: (values: CnstpSeFormValues) => void;
+}
+
+function CnstpSeFormDialog({
+  mode,
+  open,
+  cnstpSeCd,
+  onOpenChange,
+  isSubmitting,
+  onSubmit,
+}: CnstpSeFormDialogProps) {
+  const detailQuery = useCnstpSeMng(mode === "edit" ? cnstpSeCd : null);
+
+  const { register, handleSubmit, reset, setValue, watch } = useForm<CnstpSeFormValues>({
+    defaultValues: {
+      cnstpSeCd: "",
+      cnstpSeCdNm: "",
+      expln: "",
+      useYn: "Y",
+    },
+  });
+
+  const useYn = watch("useYn");
+
+  useEffect(() => {
+    if (!open) return;
+
+    if (mode === "edit") {
+      if (!detailQuery.data) return;
+      reset({
+        cnstpSeCd: detailQuery.data.cnstpSeCd,
+        cnstpSeCdNm: detailQuery.data.cnstpSeCdNm ?? "",
+        expln: detailQuery.data.expln ?? "",
+        useYn: detailQuery.data.useYn === "N" ? "N" : "Y",
+      });
+      return;
+    }
+
+    reset({
+      cnstpSeCd: "",
+      cnstpSeCdNm: "",
+      expln: "",
+      useYn: "Y",
+    });
+  }, [open, mode, detailQuery.data, reset]);
+
+  const isLoading = mode === "edit" && detailQuery.isPending;
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-[52rem]">
+        <DialogHeader>
+          <DialogTitle>{mode === "create" ? "공종코드 등록" : "공종코드 수정"}</DialogTitle>
+        </DialogHeader>
+        {isLoading ? (
+          <div className="space-y-4">
+            <Skeleton className="h-[4rem]" />
+            <Skeleton className="h-[4rem]" />
+            <Skeleton className="h-[4rem]" />
+          </div>
+        ) : (
+          <form className="space-y-6" onSubmit={handleSubmit(onSubmit)}>
+            <div className="space-y-2">
+              <Label htmlFor="cnstpSeCd">코드</Label>
+              <Input
+                id="cnstpSeCd"
+                placeholder="코드 입력"
+                maxLength={10}
+                readOnly={mode === "edit"}
+                {...register("cnstpSeCd", { required: true })}
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="cnstpSeCdNm">코드명</Label>
+              <Input
+                id="cnstpSeCdNm"
+                placeholder="코드명 입력"
+                maxLength={100}
+                {...register("cnstpSeCdNm")}
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="expln">설명</Label>
+              <Input id="expln" placeholder="설명 입력" maxLength={1000} {...register("expln")} />
+            </div>
+            <div className="space-y-2">
+              <Label>사용여부</Label>
+              <RadioGroup
+                value={useYn}
+                onValueChange={(v) => setValue("useYn", v as "Y" | "N")}
+                className="flex gap-6"
+              >
+                <div className="flex items-center gap-2">
+                  <RadioGroupItem value="Y" id="cnstp-use-y" />
+                  <Label htmlFor="cnstp-use-y">사용</Label>
+                </div>
+                <div className="flex items-center gap-2">
+                  <RadioGroupItem value="N" id="cnstp-use-n" />
+                  <Label htmlFor="cnstp-use-n">미사용</Label>
+                </div>
+              </RadioGroup>
+            </div>
+            <DialogFooter>
+              <Button type="button" color="white" onClick={() => onOpenChange(false)}>
+                취소
+              </Button>
+              <Button type="submit" disabled={isSubmitting}>
+                저장
+              </Button>
+            </DialogFooter>
+          </form>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export { CnstpSeFormDialog };

apps/as/src/pages/code-management/ui/cnstp-se-section.tsx

@@ -0,0 +1,147 @@
+"use client";
+
+import { useCallback, useMemo, useState } from "react";
+
+import { useConfirm } from "@frontend-opensource/use-react-hooks";
+import { getCoreRowModel, type PaginationState } from "@tanstack/react-table";
+
+import { useDataTable } from "@/shared/lib";
+import {
+  type CnstpSeMngResponseDto,
+  useCnstpSeMng,
+  useCnstpSeMngPage,
+  useDeleteCnstpSeMng,
+  useSaveCnstpSeMng,
+  useUpdateCnstpSeMng,
+} from "@/entities/cnstp";
+import { Button } from "@common/components";
+
+import { createCnstpSeColumns } from "../model/cnstp-se-table-columns";
+
+import { CnstpSeFormDialog, type CnstpSeFormValues } from "./cnstp-se-form-dialog";
+
+const DEFAULT_PAGE_INDEX = 0;
+const DEFAULT_PAGE_SIZE = 10;
+
+interface CnstpSeSectionProps {
+  pagination: PaginationState;
+  onPaginationChange: (pagination: PaginationState) => void;
+}
+
+function CnstpSeSection({ pagination, onPaginationChange }: CnstpSeSectionProps) {
+  const { confirm } = useConfirm();
+  const [dialogMode, setDialogMode] = useState<"create" | "edit" | null>(null);
+  const [editingCd, setEditingCd] = useState<string | null>(null);
+
+  const pageQuery = useCnstpSeMngPage({
+    page: pagination.pageIndex,
+    size: pagination.pageSize,
+  });
+
+  const detailQuery = useCnstpSeMng(dialogMode === "edit" ? editingCd : null);
+  const saveMutation = useSaveCnstpSeMng();
+  const updateMutation = useUpdateCnstpSeMng();
+  const deleteMutation = useDeleteCnstpSeMng();
+
+  const handleDelete = useCallback(
+    async (row: CnstpSeMngResponseDto) => {
+      if (!(await confirm("삭제하시겠습니까?"))) return;
+      await deleteMutation.mutateAsync(row.cnstpSeCd);
+    },
+    [confirm, deleteMutation],
+  );
+
+  const columns = useMemo(
+    () =>
+      createCnstpSeColumns({
+        onEdit: (row) => {
+          setEditingCd(row.cnstpSeCd);
+          setDialogMode("edit");
+        },
+        onDelete: handleDelete,
+      }),
+    [handleDelete],
+  );
+
+  const { tableComponent } = useDataTable({
+    query: pageQuery,
+    tableOptions: {
+      columns,
+      state: { pagination },
+      onPaginationChange: (updater) => {
+        const next = typeof updater === "function" ? updater(pagination) : updater;
+        onPaginationChange(next);
+      },
+      getCoreRowModel: getCoreRowModel(),
+      manualPagination: true,
+    },
+    dataTableOptions: {
+      viewPagination: true,
+    },
+  });
+
+  const handleFormSubmit = async (values: CnstpSeFormValues) => {
+    if (!values.cnstpSeCd.trim()) return;
+
+    if (dialogMode === "create") {
+      if (!(await confirm("저장하시겠습니까?"))) return;
+      await saveMutation.mutateAsync({
+        cnstpSeCd: values.cnstpSeCd.trim(),
+        cnstpSeCdNm: values.cnstpSeCdNm.trim() || undefined,
+        expln: values.expln.trim() || undefined,
+        useYn: values.useYn,
+        cdLvNo: 1,
+      });
+    } else if (dialogMode === "edit" && detailQuery.data) {
+      if (!(await confirm("수정하시겠습니까?"))) return;
+      await updateMutation.mutateAsync({
+        cnstpSeCd: detailQuery.data.cnstpSeCd,
+        body: {
+          cnstpSeCd: detailQuery.data.cnstpSeCd,
+          cnstpSeCdNm: values.cnstpSeCdNm.trim() || undefined,
+          expln: values.expln.trim() || undefined,
+          useYn: values.useYn,
+          upCnstpCd: detailQuery.data.upCnstpCd,
+          cdLvNo: detailQuery.data.cdLvNo,
+        },
+      });
+    }
+
+    setDialogMode(null);
+    setEditingCd(null);
+  };
+
+  const handleOpenCreate = () => {
+    setEditingCd(null);
+    setDialogMode("create");
+  };
+
+  return (
+    <section className="card card-border mx-0 bg-background pb-6 pt-0">
+      <div className="card-header flex items-center justify-between">
+        <h3 className="text-2xl font-semibold">공종코드 관리</h3>
+        <Button type="button" onClick={handleOpenCreate}>
+          등록
+        </Button>
+      </div>
+      {tableComponent}
+      {dialogMode ? (
+        <CnstpSeFormDialog
+          mode={dialogMode}
+          open={Boolean(dialogMode)}
+          cnstpSeCd={editingCd}
+          onOpenChange={(open) => {
+            if (!open) {
+              setDialogMode(null);
+              setEditingCd(null);
+            }
+          }}
+          isSubmitting={saveMutation.isPending || updateMutation.isPending}
+          onSubmit={handleFormSubmit}
+        />
+      ) : null}
+    </section>
+  );
+}
+
+export { CnstpSeSection, DEFAULT_PAGE_INDEX, DEFAULT_PAGE_SIZE };

apps/as/src/pages/code-management/ui/code-management-page.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import { useState } from "react";
+
+import type { PaginationState } from "@tanstack/react-table";
+
+import { AcntgSeSection } from "./acntg-se-section";
+import { CnstpSeSection, DEFAULT_PAGE_INDEX, DEFAULT_PAGE_SIZE } from "./cnstp-se-section";
+
+function CodeManagementPage() {
+  const [cnstpPagination, setCnstpPagination] = useState<PaginationState>({
+    pageIndex: DEFAULT_PAGE_INDEX,
+    pageSize: DEFAULT_PAGE_SIZE,
+  });
+  const [acntgPagination, setAcntgPagination] = useState<PaginationState>({
+    pageIndex: DEFAULT_PAGE_INDEX,
+    pageSize: DEFAULT_PAGE_SIZE,
+  });
+
+  return (
+    <div className="space-y-6 px-[1.8rem] pb-6">
+      <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
+        <CnstpSeSection pagination={cnstpPagination} onPaginationChange={setCnstpPagination} />
+        <AcntgSeSection pagination={acntgPagination} onPaginationChange={setAcntgPagination} />
+      </div>
+    </div>
+  );
+}
+
+export { CodeManagementPage };