ONAANDALL/frontend
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[as] feat: 결재선관리 페이지 작업

Browse Source
This commit is contained in:
chanii8
2026-05-18 19:08:38 +09:00
parent 51204e2ec1
commit 86566c7692
35 changed files with 472 additions and 211 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/as/docs/approval-line-management/SPEC.md
+1 -1
View File
@@ -40,7 +40,7 @@
│ │ ⋮⋮ | APLN-0001 | [ 1 ] | [검토자 ▼] | [김민수 ][선택] | … | [저장][삭제] │ │
│ │ ⋮⋮ | (신규) | [ 2 ] | [승인자 ▼] | [ ][선택] | — | [저장][취소] │ │
│ └─────────────────────────────────────────────────────────────────────────────────────────┘ │
│ [행 추가] │
│ [행 추가] │
│ ※ 결재자 등록·수정은 그리드 셀에서 직접 입력. 검토인력만 [선택] 팝업/다이얼로그 │
│ ※ 행 추가·수정 중: 해당 행만 편집 가능, 나머지 행·[행 추가]·드래그 비활성 │
└───────────────────────────────────────────────────────────────────────────────────────────────┘
apps/as/package.json
+1
View File
@@ -24,6 +24,7 @@
"axios": "^1.8.1",
"dayjs": "^1.11.13",
"js-cookie": "^3.0.5",
"lucide-react": "^0.474.0",
"next": "15.3.8",
"react-hook-form": "^7.54.2",
"zod": "^3.24.2"
apps/as/src/app/layouts/base-layout.tsx
+5 -1
View File
@@ -5,6 +5,7 @@ import { usePathname, useRouter } from "next/navigation";
import { useQueryClient } from "@tanstack/react-query";
import { useMenuStore } from "@/shared/lib";
import { PageLayout } from "@/shared/ui/page-layout";
import type { MenuItem } from "@/entities/menu";
import { BaseLayout } from "@common/components";
@@ -18,11 +19,14 @@ export function BaseLayoutWrapper({ children }: BaseLayoutWrapperProps) {
const pathname = usePathname();
const queryClient = useQueryClient();
const setCurrentMenuInfo = useMenuStore((state) => state.setCurrentMenuInfo);
const handleMenuClick = useCallback(
(item: MenuItem) => {
setCurrentMenuInfo(item);
router.push(item.urlPath);
},
[router],
[router, setCurrentMenuInfo],
);
return (
apps/as/src/app/providers/index.tsx
+6 -1
View File
@@ -5,7 +5,9 @@ import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
import { queryClient } from "@/shared/lib";
import { StoreProvider } from "@/shared/providers";
import { AlertDialog } from "@/shared/ui/alert-dialog";
import { AuthWrapper } from "@/entities/auth";
import { MenuWrapper } from "@/entities/menu";
interface ProvidersProps {
children: React.ReactNode;
@@ -15,7 +17,10 @@ export function Providers({ children }: ProvidersProps) {
return (
<QueryClientProvider client={queryClient}>
<StoreProvider>
<AuthWrapper>{children}</AuthWrapper>
<AuthWrapper>
<MenuWrapper>{children}</MenuWrapper>
<AlertDialog />
</AuthWrapper>
</StoreProvider>
<ReactQueryDevtools initialIsOpen={false} />
</QueryClientProvider>
apps/as/src/entities/code/index.ts
+1 -2
View File
@@ -1,6 +1,5 @@
export { codeService } from "./api/code-service";
export { useCodeList, useCodeListByUseYn, useCodeName } from "./api/queries";
export { findCodeLabel } from "./lib/find-code-label";
export { UP_CD } from "./lib/up-cd-constants";
export { CodeSelect } from "./ui/code-select";
export type { Code, CodeService } from "./model/code-interface";
export { CodeSelect } from "./ui/code-select";
apps/as/src/entities/code/lib/up-cd-constants.ts
-5
View File
@@ -1,5 +0,0 @@
/** 결재선 관리 SPEC 상위코드 */
export const UP_CD = {
DOC_SE: "ASDOCSECD",
ATRZ_SE: "ATRZSECD",
} as const;
apps/as/src/entities/menu-authority/@x/menu.ts
+1
View File
@@ -0,0 +1 @@
export { MenuAuthorityApi } from "../api/menu-authority-service";
apps/as/src/entities/menu-authority/api/menu-authority-service.ts
+19
View File
@@ -0,0 +1,19 @@
import { client } from "@/shared/api";
import { ENDPOINT } from "@/shared/config";
import type {
MenuAuthorityService,
PageMenuAuthority,
} from "../model/menu-authority-interface";
export class MenuAuthorityApiService implements MenuAuthorityService {
/** MenuAuthrtApiController GET /api/v1/menu-authrts/pageinfo/{menuCd} */
async getPageMenuAuthority(menuCd: number): Promise<PageMenuAuthority[]> {
const response = await client.get<PageMenuAuthority[]>(
`${ENDPOINT.CMS_SERVICE.MENU_AUTHRTS}/pageinfo/${menuCd}`,
);
return response.data;
}
}
export const MenuAuthorityApi = new MenuAuthorityApiService();
apps/as/src/entities/menu-authority/index.ts
+2
View File
@@ -0,0 +1,2 @@
export { MenuAuthorityApi } from "./api/menu-authority-service";
export type { PageMenuAuthority } from "./model/menu-authority-interface";
apps/as/src/entities/menu-authority/model/menu-authority-interface.ts
+12
View File
@@ -0,0 +1,12 @@
/** MenuAuthrtApiController GET /pageinfo/{menuCd} 응답 DTO */
export interface PageMenuAuthority {
mngAuthrtYn: string;
inqAuthrtYn: string;
regAuthrtYn: string;
mdfcnAuthrtYn: string;
delAuthrtYn: string;
}
export interface MenuAuthorityService {
getPageMenuAuthority(menuCd: number): Promise<PageMenuAuthority[]>;
}
apps/as/src/entities/menu/api/menu-service.ts
+18
View File
@@ -0,0 +1,18 @@
import { client } from "@/shared/api";
import { ENDPOINT } from "@/shared/config";
import { mapMenuTreeResponse } from "../lib/map-menu-tree-response";
import type { MenuTreeResponseDto } from "../model/menu-tree-response";
import type { MenuItem } from "../model/types";
export class MenuApiService {
/** MenuRoleApiController GET /api/v1/menu-roles/{siteId} */
async getMenuRoles(siteId: string): Promise<MenuItem[]> {
const response = await client.get<MenuTreeResponseDto[]>(
`${ENDPOINT.CMS_SERVICE.MENU_ROLES}/${siteId}`,
);
return response.data.map(mapMenuTreeResponse);
}
}
export const MenuApi = new MenuApiService();
apps/as/src/entities/menu/index.ts
+3
View File
@@ -1 +1,4 @@
export { MenuApi } from "./api/menu-service";
export { MenuWrapper } from "./lib/menu-wrapper";
export { getCurrentMenu } from "./lib/utils";
export { type MenuItem } from "./model/types";
apps/as/src/entities/menu/lib/map-menu-tree-response.ts
+28
View File
@@ -0,0 +1,28 @@
import type { MenuTreeResponseDto } from "../model/menu-tree-response";
import type { MenuItem } from "../model/types";
function isRequiredUrlPath(menuLnkgTypeCd: string): boolean {
return menuLnkgTypeCd === "BOARD" || menuLnkgTypeCd === "CONTENTS";
}
export function mapMenuTreeResponse(dto: MenuTreeResponseDto): MenuItem {
return {
menuCd: dto.menuCd,
menuKornNm: dto.menuKornNm,
menuEngNm: dto.menuEngNm,
parentId: dto.parentId,
sortSeq: dto.sortSeq,
iconNm: dto.iconNm,
children: dto.children?.map(mapMenuTreeResponse) ?? null,
levelNo: dto.levelNo,
urlPath: dto.urlPath,
menuLnkgTypeCd: dto.menuLnkgTypeCd,
menuLnkgSn: dto.menuLnkgSn,
menuPath: dto.menuPath,
qrcd: dto.qrcd,
useYn: dto.useYn,
otptYn: dto.otptYn,
newWndwYn: dto.newWndwYn,
requiredUrlPath: isRequiredUrlPath(dto.menuLnkgTypeCd),
};
}
apps/as/src/entities/menu/lib/menu-wrapper.tsx
+62
View File
@@ -0,0 +1,62 @@
"use client";
import { useEffect } from "react";
import { usePathname, useRouter } from "next/navigation";
import { SITE_ID } from "@/shared/config";
import { getCookie, useAlertStore, useMenuStore } from "@/shared/lib";
import { MenuAuthorityApi } from "@/entities/menu-authority/@x/menu";
import { MenuApi } from "../api/menu-service";
import { getCurrentMenu } from "./utils";
function MenuWrapper({ children }: { children: React.ReactNode }) {
const router = useRouter();
const pathname = usePathname();
const alert = useAlertStore((state) => state.setMessage);
const { pageMenuAuthority, setCurrentMenuInfo, setPageMenuAuthority } =
useMenuStore((state) => state);
const getCurrentMenuInfo = async () => {
const menuRoles = await MenuApi.getMenuRoles(SITE_ID);
if (!menuRoles) return;
return getCurrentMenu(menuRoles, pathname ?? "");
};
const getPageMenuAuthority = async () => {
const menuCd = getCookie("menu-code-key");
if (!menuCd) return;
const response = await MenuAuthorityApi.getPageMenuAuthority(
parseInt(menuCd, 10),
);
return response;
};
const checkInquiryAuthority = () => {
return pageMenuAuthority?.inqAuthrtYn === "Y";
};
useEffect(() => {
(async () => {
const currentMenu = await getCurrentMenuInfo();
if (currentMenu) setCurrentMenuInfo(currentMenu);
const response = await getPageMenuAuthority();
if (response?.length) setPageMenuAuthority(response[0]!);
})();
}, [pathname]);
useEffect(() => {
if (!pageMenuAuthority) return;
const inquiryAuthority = checkInquiryAuthority();
if (!inquiryAuthority) {
alert("페이지에 대한 조회 권한이 없습니다.", () => router.push("/"));
}
}, [pageMenuAuthority]);
return <>{children}</>;
}
export { MenuWrapper };
apps/as/src/entities/menu/lib/utils.ts
+21
View File
@@ -0,0 +1,21 @@
import type { MenuItem } from "../model/types";
export function getCurrentMenu(
menus: MenuItem[],
pathname: string,
): MenuItem | null {
for (const menu of menus) {
if (
menu.urlPath !== "" &&
(menu.urlPath === pathname || pathname.startsWith(menu.urlPath))
) {
return menu;
}
if (menu.children) {
const child = getCurrentMenu(menu.children, pathname);
if (child) return child;
}
}
return null;
}
apps/as/src/entities/menu/model/menu-tree-response.ts
+21
View File
@@ -0,0 +1,21 @@
/** MenuRoleApiController GET /api/v1/menu-roles/{siteId} 응답 DTO */
export interface MenuTreeResponseDto {
menuCd: number;
menuKornNm: string;
menuEngNm: string;
parentId: number | null;
sortSeq: number;
iconNm?: string;
children: MenuTreeResponseDto[] | null;
levelNo: number;
urlPath: string;
menuLnkgTypeCd: string;
menuLnkgSn: number;
menuPath: string;
qrcd: string;
useYn: string;
otptYn: string;
newWndwYn: string;
menuHlpCn?: string;
menuSubKornNm?: string;
}
apps/as/src/features/elapr-tmplt-dialog/ui/elapr-tmplt-form-dialog.tsx
+16 -17
View File
@@ -2,6 +2,10 @@
import { useEffect } from "react";
import { useForm } from "react-hook-form";
import { generateClientId } from "@/shared/lib";
import { CodeSelect } from "@/entities/code";
import type { ElaprTmplt } from "@/entities/elapr";
import {
Button,
Dialog,
@@ -14,10 +18,6 @@ import {
Textarea,
} from "@common/components";
import { CodeSelect, UP_CD } from "@/entities/code";
import type { ElaprTmplt } from "@/entities/elapr";
import { generateClientId } from "@/shared/lib";
export interface ElaprTmpltFormValues {
elaprTmpltId: string;
elaprTmpltNm: string;
@@ -77,41 +77,40 @@ function ElaprTmpltFormDialog({
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="max-w-lg">
<DialogContent className="max-w-[52rem]">
<DialogHeader>
<DialogTitle>{mode === "create" ? "결재서식 등록" : "결재서식 수정"}</DialogTitle>
</DialogHeader>
<form className="space-y-4" onSubmit={handleSubmit(onSubmit)}>
<div className="space-y-2">
<Label htmlFor="elaprTmpltId">전자결재서식아이디</Label>
<Input
id="elaprTmpltId"
readOnly
{...register("elaprTmpltId", { required: true })}
/>
<Input id="elaprTmpltId" disabled {...register("elaprTmpltId", { required: true })} />
</div>
<div className="space-y-2">
<Label htmlFor="elaprTmpltNm">결재서식명</Label>
<Input
id="elaprTmpltNm"
{...register("elaprTmpltNm", { required: true })}
/>
<Input id="elaprTmpltNm" {...register("elaprTmpltNm", { required: true })} />
</div>
<div className="space-y-2">
<Label>문서구분</Label>
<CodeSelect
upCd={UP_CD.DOC_SE}
upCd="ASDOCSECD"
value={docSeComCd}
onValueChange={(v) => setValue("docSeComCd", v)}
placeholder="문서구분 선택"
className="w-full"
/>
</div>
<div className="space-y-2">
<Label htmlFor="elaprTmpltExpln">서식 설명</Label>
<Textarea id="elaprTmpltExpln" rows={3} {...register("elaprTmpltExpln")} />
<Textarea
id="elaprTmpltExpln"
rows={3}
{...register("elaprTmpltExpln")}
className="!text-xl"
/>
</div>
<DialogFooter>
<Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
<Button type="button" color="white" onClick={() => onOpenChange(false)}>
취소
</Button>
<Button type="submit" disabled={isSubmitting}>
apps/as/src/pages/approval-line-management/ui/approval-line-management-page.tsx
+6 -12
View File
@@ -5,23 +5,17 @@ import { useState } from "react";
import type { ElaprTmplt } from "@/entities/elapr";
import { ElaprAplnGrid } from "@/widgets/elapr-apln-grid";
import { ElaprTmpltList } from "@/widgets/elapr-tmplt-list";
import { PageTitle } from "@common/components";
const MENU_PATHS = ["디지털행정지원", "시스템관리", "결재선 관리"];
function ApprovalLineManagementPage() {
const [selectedTmplt, setSelectedTmplt] = useState<ElaprTmplt | null>(null);
return (
<div className="min-h-full bg-container pb-6">
<PageTitle title="결재선 관리" menuPaths={MENU_PATHS} />
<div className="space-y-6 px-[1.8rem]">
<ElaprTmpltList
selectedTmpltId={selectedTmplt?.elaprTmpltId ?? null}
onSelectTmplt={setSelectedTmplt}
/>
<ElaprAplnGrid elaprTmpltId={selectedTmplt?.elaprTmpltId ?? null} />
</div>
<div className="space-y-6 px-[1.8rem] pb-6">
<ElaprTmpltList
selectedTmpltId={selectedTmplt?.elaprTmpltId ?? null}
onSelectTmplt={setSelectedTmplt}
/>
<ElaprAplnGrid elaprTmpltId={selectedTmplt?.elaprTmpltId ?? null} />
</div>
);
}
apps/as/src/shared/config/api.ts
+2
View File
@@ -13,6 +13,8 @@ export const ENDPOINT = {
},
CMS_SERVICE: {
CODE: "/cms-service/api/v1/code/cache",
MENU_ROLES: "/cms-service/api/v1/menu-roles",
MENU_AUTHRTS: "/cms-service/api/v1/menu-authrts",
},
};
apps/as/src/shared/lib/index.ts
+4 -2
View File
@@ -1,7 +1,9 @@
export { getCookie, removeCookie, setCookie } from "./cookie";
export { dayjs } from "./dayjs";
export { queryClient } from "./query-client";
export { useUserStore } from "./use-user-store";
export { generateClientId } from "./generate-client-id";
export { matchQueryStatus } from "./match-query-status";
export { queryClient } from "./query-client";
export { useAlertStore } from "./use-alert-store";
export { useDataTable } from "./use-data-table";
export { useMenuStore } from "./use-menu-store";
export { useUserStore } from "./use-user-store";
apps/as/src/shared/lib/use-alert-store.ts
+16
View File
@@ -0,0 +1,16 @@
import { useContext } from "react";
import { useStore } from "zustand";
import { StoreContext } from "../providers/store-provider";
import type { AlertStore } from "../store/alert-store";
export const useAlertStore = <T>(selector: (store: AlertStore) => T): T => {
const storeContext = useContext(StoreContext);
if (!storeContext) {
throw new Error("useAlertStore must be used within StoreProvider");
}
return useStore(storeContext.alertStore, selector);
};
apps/as/src/shared/lib/use-menu-store.ts
+16
View File
@@ -0,0 +1,16 @@
import { useContext } from "react";
import { useStore } from "zustand";
import { StoreContext } from "../providers/store-provider";
import type { MenuStore } from "../store/menu-store";
export const useMenuStore = <T>(selector: (store: MenuStore) => T): T => {
const storeContext = useContext(StoreContext);
if (!storeContext) {
throw new Error("useMenuStore must be used within StoreProvider");
}
return useStore(storeContext.menuStore, selector);
};
apps/as/src/shared/providers/store-provider.tsx
+5 -1
View File
@@ -2,9 +2,11 @@
import { createContext, useRef } from "react";
import { createUserStore } from "../store";
import { createAlertStore, createMenuStore, createUserStore } from "../store";
type StoreContextType = {
alertStore: ReturnType<typeof createAlertStore>;
menuStore: ReturnType<typeof createMenuStore>;
userStore: ReturnType<typeof createUserStore>;
};
@@ -14,6 +16,8 @@ export const StoreProvider = ({ children }: { children: React.ReactNode }) => {
const storeRef = useRef<StoreContextType | null>(null);
if (storeRef.current === null) {
storeRef.current = {
alertStore: createAlertStore(),
menuStore: createMenuStore(),
userStore: createUserStore(),
};
}
apps/as/src/shared/store/alert-store.ts
+25
View File
@@ -0,0 +1,25 @@
import { createStore } from "zustand/vanilla";
export type AlertState = {
message: string;
callback?: () => void;
};
export type AlertActions = {
setMessage: (message: string, callback?: () => void) => void;
};
export type AlertStore = AlertState & AlertActions;
export const defaultInitState: AlertState = {
message: "",
callback: undefined,
};
export const createAlertStore = (initState: AlertState = defaultInitState) => {
return createStore<AlertStore>()((set) => ({
...initState,
setMessage: (message: string, callback?: () => void) =>
set(() => ({ message, callback })),
}));
};
apps/as/src/shared/store/index.ts
+2
View File
@@ -1 +1,3 @@
export { type AlertStore,createAlertStore } from "./alert-store";
export { createMenuStore, type MenuStore } from "./menu-store";
export { createUserStore, type IUserInfo, type UserStore } from "./user-store";
apps/as/src/shared/store/menu-store.ts
+37
View File
@@ -0,0 +1,37 @@
import { createStore } from "zustand/vanilla";
import type { MenuItem } from "@/entities/menu";
interface PageMenuAuthority {
mngAuthrtYn: string;
inqAuthrtYn: string;
regAuthrtYn: string;
mdfcnAuthrtYn: string;
delAuthrtYn: string;
}
export type MenuState = {
currentMenuInfo: MenuItem | null;
pageMenuAuthority: PageMenuAuthority | null;
};
export type MenuActions = {
setCurrentMenuInfo: (menu: MenuItem) => void;
setPageMenuAuthority: (authority: PageMenuAuthority) => void;
};
export type MenuStore = MenuState & MenuActions;
export const defaultInitState: MenuState = {
currentMenuInfo: null,
pageMenuAuthority: null,
};
export const createMenuStore = (initState: MenuState = defaultInitState) => {
return createStore<MenuStore>()((set) => ({
...initState,
setCurrentMenuInfo: (menu: MenuItem) => set({ currentMenuInfo: menu }),
setPageMenuAuthority: (authority: PageMenuAuthority) =>
set({ pageMenuAuthority: authority }),
}));
};
apps/as/src/shared/ui/alert-dialog.tsx
+37
View File
@@ -0,0 +1,37 @@
"use client";
import {
Button,
Dialog,
DialogClose,
DialogContent,
DialogFooter,
} from "@common/components";
import { useAlertStore } from "../lib/use-alert-store";
function AlertDialog() {
const { message, callback, setMessage } = useAlertStore((state) => state);
const handleOpenChange = () => {
setMessage("");
callback?.();
};
return (
<Dialog open={!!message} onOpenChange={handleOpenChange}>
<DialogContent aria-describedby={undefined}>
<div className="py-10">
<p className="text-foreground whitespace-pre-line text-center text-[1.4rem]">
{message}
</p>
</div>
<DialogFooter className="!justify-center">
<DialogClose asChild>
<Button>확인</Button>
</DialogClose>
</DialogFooter>
</DialogContent>
</Dialog>
);
}
export { AlertDialog };
apps/as/src/shared/ui/page-layout.tsx
+10 -22
View File
@@ -1,32 +1,20 @@
"use client";
import { PageTitle } from "@common/components";
const mockCurrentMenuInfo = {
menuCd: 0,
menuKornNm: "메인",
menuEngNm: "Main",
parentId: null,
sortSeq: 0,
children: null,
levelNo: 0,
urlPath: "/",
menuLnkgTypeCd: "",
menuLnkgSn: 0,
menuPath: "메인",
qrcd: "",
useYn: "Y",
otptYn: "Y",
newWndwYn: "N",
requiredUrlPath: false,
};
import { useMenuStore } from "../lib/use-menu-store";
function PageLayout({ children }: { children: React.ReactNode }) {
const menuPaths = mockCurrentMenuInfo.menuPath.split(">").map((path) => path.trim());
const currentMenuInfo = useMenuStore((state) => state.currentMenuInfo);
const menuPaths = currentMenuInfo?.menuPath
?.split(">")
.map((path) => path.trim());
return (
<div className="bg-container h-auto min-h-full pb-2">
<PageTitle title={mockCurrentMenuInfo.menuKornNm} menuPaths={menuPaths} />
<PageTitle
title={currentMenuInfo?.menuKornNm ?? ""}
menuPaths={menuPaths ?? []}
/>
{children}
</div>
);
apps/as/src/widgets/elapr-apln-grid/lib/use-apln-rows.ts
+12 -13
View File
@@ -1,10 +1,11 @@
"use client";
import { useCallback, useEffect, useState } from "react";
import { arrayMove } from "@dnd-kit/sortable";
import type { ElaprApln } from "@/entities/elapr";
import { generateClientId } from "@/shared/lib";
import type { ElaprApln } from "@/entities/elapr";
import type { ElaprAplnRow } from "../model/types";
@@ -60,11 +61,7 @@ export function useAplnRows({ elaprTmpltId, serverRows }: UseAplnRowsOptions) {
if (isEditingLocked) return;
setEditingRowId(aplnId);
setRows((prev) =>
prev.map((row) =>
row.aplnId === aplnId
? { ...row, snapshot: { ...row } }
: row,
),
prev.map((row) => (row.aplnId === aplnId ? { ...row, snapshot: { ...row } } : row)),
);
},
[isEditingLocked],
@@ -74,11 +71,7 @@ export function useAplnRows({ elaprTmpltId, serverRows }: UseAplnRowsOptions) {
(aplnId: string, patch: Partial<ElaprAplnRow>) => {
if (editingRowId !== aplnId) return;
setRows((prev) =>
prev.map((row) =>
row.aplnId === aplnId
? { ...row, ...patch, isDirty: true }
: row,
),
prev.map((row) => (row.aplnId === aplnId ? { ...row, ...patch, isDirty: true } : row)),
);
},
[editingRowId],
@@ -114,8 +107,11 @@ export function useAplnRows({ elaprTmpltId, serverRows }: UseAplnRowsOptions) {
}, []);
const reorderRows = useCallback(
(activeId: string, overId: string) => {
if (isEditingLocked) return;
(activeId: string, overId: string): ElaprAplnRow[] => {
if (isEditingLocked) return [];
let newRows: ElaprAplnRow[] = [];
setRows((prev) => {
const oldIndex = prev.findIndex((r) => r.aplnId === activeId);
const newIndex = prev.findIndex((r) => r.aplnId === overId);
@@ -126,8 +122,11 @@ export function useAplnRows({ elaprTmpltId, serverRows }: UseAplnRowsOptions) {
atrzSeqNo: idx + 1,
isDirty: true,
}));
newRows = moved;
return moved;
});
return newRows;
},
[isEditingLocked],
);
apps/as/src/widgets/elapr-apln-grid/ui/elapr-apln-grid.tsx
+37 -47
View File
@@ -1,16 +1,11 @@
"use client";
import { useState } from "react";
import { closestCenter, DndContext, type DragEndEvent } from "@dnd-kit/core";
import { SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable";
import {
Button,
Table,
TableHead,
TableHeader,
TableRow,
} from "@common/components";
import { useAlertStore } from "@/shared/lib";
import {
useCreateElaprApln,
useDeleteElaprApln,
@@ -18,11 +13,21 @@ import {
useUpdateElaprApln,
} from "@/entities/elapr";
import { AprvrPickerDialog, type ReviewerOption } from "@/features/aprvr-picker";
import {
Button,
LoadingWithAnimation,
Table,
TableBody,
TableHead,
TableHeader,
TableRow,
} from "@common/components";
import { useAplnRows } from "../lib/use-apln-rows";
import { useDndSensors } from "../lib/use-dnd-sensors";
import { validateAplnRow, validateUniqueSeqNo } from "../lib/validators";
import type { ElaprAplnRow } from "../model/types";
import { SortableAplnRow } from "./sortable-apln-row";
interface ElaprAplnGridProps {
@@ -32,7 +37,8 @@ interface ElaprAplnGridProps {
function ElaprAplnGrid({ elaprTmpltId }: ElaprAplnGridProps) {
const [pickerOpen, setPickerOpen] = useState(false);
const [pickingRowId, setPickingRowId] = useState<string | null>(null);
const [statusMessage, setStatusMessage] = useState<string | null>(null);
const alert = useAlertStore((state) => state.setMessage);
const aplnQuery = useElaprAplnPage({
elaprTmpltId: elaprTmpltId ?? undefined,
@@ -67,20 +73,18 @@ function ElaprAplnGrid({ elaprTmpltId }: ElaprAplnGridProps) {
const handleDragEnd = (event: DragEndEvent) => {
const { active, over } = event;
if (!over || active.id === over.id) return;
reorderRows(String(active.id), String(over.id));
const payloadRows = reorderRows(String(active.id), String(over.id));
};
const handleRowSave = async (row: ElaprAplnRow) => {
const fieldError = validateAplnRow(row);
if (fieldError) {
setStatusMessage(fieldError);
alert(fieldError);
return;
}
const dupError = validateUniqueSeqNo(
rows.map((r) => (r.aplnId === row.aplnId ? row : r)),
);
const dupError = validateUniqueSeqNo(rows.map((r) => (r.aplnId === row.aplnId ? row : r)));
if (dupError) {
setStatusMessage(dupError);
alert(dupError);
return;
}
@@ -107,7 +111,6 @@ function ElaprAplnGrid({ elaprTmpltId }: ElaprAplnGridProps) {
}
clearEditing();
setStatusMessage(null);
await aplnQuery.refetch();
};
@@ -130,7 +133,7 @@ function ElaprAplnGrid({ elaprTmpltId }: ElaprAplnGridProps) {
const dupError = validateUniqueSeqNo(rows);
if (dupError) {
setStatusMessage(dupError);
alert(dupError);
return;
}
@@ -139,7 +142,7 @@ function ElaprAplnGrid({ elaprTmpltId }: ElaprAplnGridProps) {
for (const row of dirtyRows) {
const fieldError = validateAplnRow(row);
if (fieldError) {
setStatusMessage(fieldError);
alert(fieldError);
return;
}
@@ -164,7 +167,7 @@ function ElaprAplnGrid({ elaprTmpltId }: ElaprAplnGridProps) {
}
}
setStatusMessage("결재선이 저장되었습니다.");
alert("결재선이 저장되었습니다.");
await aplnQuery.refetch();
};
@@ -178,54 +181,41 @@ function ElaprAplnGrid({ elaprTmpltId }: ElaprAplnGridProps) {
};
return (
<section
className={`rounded-lg border border-border bg-background p-4 ${isDisabled ? "pointer-events-none opacity-50" : ""}`}
>
<div className="mb-4 flex flex-wrap items-center justify-between gap-3">
<h3 className="text-lg font-semibold">결재선 관리</h3>
<section className="card card-border mx-0 pt-0">
<div className="card-header flex flex-wrap items-center justify-between gap-3">
<h3 className="text-2xl font-semibold">결재선 관리</h3>
<div className="flex flex-wrap items-center gap-3">
<span className="text-sm text-muted-foreground">
{elaprTmpltId
? `선택된 서식: ${elaprTmpltId}`
: "서식을 선택하면 결재선을 관리할 수 있습니다."}
</span>
<Button
type="button"
variant="outline"
color="white"
disabled={isDisabled || isEditingLocked}
onClick={addRow}
>
행 추가
+ 행 추가
</Button>
<Button
type="button"
disabled={isDisabled || isEditingLocked}
onClick={handleBulkSave}
>
<Button type="button" disabled={isDisabled || isEditingLocked} onClick={handleBulkSave}>
결재선 저장
</Button>
</div>
</div>
{statusMessage && (
<p className="mb-3 text-sm text-primary" role="status">
{statusMessage}
</p>
)}
{aplnQuery.isPending && elaprTmpltId ? (
<p className="py-8 text-center text-sm text-muted-foreground">로딩 중…</p>
<div className="flex h-full w-full items-center justify-center py-8">
<div className="relative size-[4rem]">
<LoadingWithAnimation />
</div>
</div>
) : !elaprTmpltId ? (
<p className="py-8 text-center text-sm text-muted-foreground">
<p className="py-8 text-center text-lg text-muted-foreground">
상단 목록에서 결재서식을 선택해 주세요.
</p>
) : rows.length === 0 ? (
<p className="py-8 text-center text-sm text-muted-foreground">
<p className="py-8 text-center text-lg text-muted-foreground">
등록된 결재선이 없습니다. [행 추가]로 결재자를 등록하세요.
</p>
) : (
<DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
<Table variant="line" className="w-full">
<Table className="w-full">
<TableHeader>
<TableRow>
<TableHead className="w-10" />
@@ -237,7 +227,7 @@ function ElaprAplnGrid({ elaprTmpltId }: ElaprAplnGridProps) {
<TableHead>관리</TableHead>
</TableRow>
</TableHeader>
<tbody>
<TableBody>
<SortableContext
items={rows.map((r) => r.aplnId)}
strategy={verticalListSortingStrategy}
@@ -261,7 +251,7 @@ function ElaprAplnGrid({ elaprTmpltId }: ElaprAplnGridProps) {
/>
))}
</SortableContext>
</tbody>
</TableBody>
</Table>
</DndContext>
)}
apps/as/src/widgets/elapr-apln-grid/ui/sortable-apln-row.tsx
+26 -51
View File
@@ -2,14 +2,10 @@
import { useSortable } from "@dnd-kit/sortable";
import { CSS } from "@dnd-kit/utilities";
import {
Button,
Input,
TableCell,
TableRow,
} from "@common/components";
import { Equal } from "lucide-react";
import { CodeSelect, findCodeLabel, UP_CD, useCodeList } from "@/entities/code";
import { CodeSelect, findCodeLabel, useCodeList } from "@/entities/code";
import { Button, Input, TableCell, TableRow } from "@common/components";
import type { ElaprAplnRow } from "../model/types";
@@ -38,16 +34,12 @@ function SortableAplnRow({
onChange,
onPickAprvr,
}: SortableAplnRowProps) {
const { data: atrzSeCodes } = useCodeList(UP_CD.ATRZ_SE);
const { data: atrzSeCodes } = useCodeList("ATRZSECD");
const {
attributes,
listeners,
setNodeRef,
transform,
transition,
isDragging,
} = useSortable({ id: row.aplnId, disabled: dragDisabled });
const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
id: row.aplnId,
disabled: dragDisabled,
});
const style = {
transform: CSS.Transform.toString(transform),
@@ -56,26 +48,24 @@ function SortableAplnRow({
};
const rowDisabled = isLocked && !isEditing;
const atrzSeLabel =
row.atrzSeComNm ?? findCodeLabel(atrzSeCodes, row.atrzSeComCd);
const atrzSeLabel = row.atrzSeComNm ?? findCodeLabel(atrzSeCodes, row.atrzSeComCd);
return (
<TableRow ref={setNodeRef} style={style} className={isEditing ? "bg-accent/30" : undefined}>
<TableCell align="center" className="w-10">
<button
<Button
type="button"
className="cursor-grab disabled:cursor-not-allowed disabled:opacity-40"
size="icon"
className="cursor-grab !bg-transparent text-muted-foreground disabled:cursor-not-allowed disabled:opacity-40"
disabled={dragDisabled}
{...attributes}
{...listeners}
aria-label="순서 변경"
>
<span className="select-none text-muted-foreground" aria-hidden>
⋮⋮
</span>
</button>
<Equal className="!size-6" />
</Button>
</TableCell>
<TableCell align="left">{row.aplnId}</TableCell>
<TableCell align="center">{row.aplnId}</TableCell>
<TableCell align="center">
{isEditing ? (
<Input
@@ -88,13 +78,13 @@ function SortableAplnRow({
}
/>
) : (
(row.atrzSeqNo ?? "—")
(row.atrzSeqNo ?? "-")
)}
</TableCell>
<TableCell align="center">
{isEditing ? (
<CodeSelect
upCd={UP_CD.ATRZ_SE}
upCd="ATRZSECD"
className="min-w-[120px]"
value={row.atrzSeComCd ?? ""}
onValueChange={(v) =>
@@ -106,22 +96,20 @@ function SortableAplnRow({
placeholder="결재구분"
/>
) : (
atrzSeLabel || "—"
atrzSeLabel || "-"
)}
</TableCell>
<TableCell align="left">
<div className="flex items-center gap-2">
<span className="min-w-[80px] text-sm">
{row.aprvrNm || row.aprvrUuid || "—"}
</span>
<TableCell align="center">
<div className="flex items-center justify-center gap-4">
<span>{row.aprvrNm || row.aprvrUuid || "-"}</span>
{isEditing && (
<Button type="button" size="sm" variant="outline" onClick={onPickAprvr}>
<Button type="button" size="sm" onClick={onPickAprvr}>
선택
</Button>
)}
</div>
</TableCell>
<TableCell align="center">{row.isNew ? "—" : (row.regDt ?? "—")}</TableCell>
<TableCell align="center">{row.isNew ? "-" : (row.regDt ?? "-")}</TableCell>
<TableCell align="center">
<div className="flex justify-center gap-2">
{isEditing ? (
@@ -129,29 +117,16 @@ function SortableAplnRow({
<Button type="button" size="sm" onClick={onSave}>
저장
</Button>
<Button type="button" size="sm" variant="outline" onClick={onCancel}>
<Button type="button" size="sm" color="white" onClick={onCancel}>
취소
</Button>
</>
) : (
<>
<Button
type="button"
size="sm"
variant="outline"
disabled={rowDisabled}
onClick={onStartEdit}
>
<Button type="button" size="sm" disabled={rowDisabled} onClick={onStartEdit}>
수정
</Button>
<Button
type="button"
size="sm"
variant="outline"
color="red"
disabled={rowDisabled}
onClick={onDelete}
>
<Button type="button" size="sm" color="red" disabled={rowDisabled} onClick={onDelete}>
삭제
</Button>
</>
apps/as/src/widgets/elapr-tmplt-list/model/columns.tsx
+4 -13
View File
@@ -1,9 +1,9 @@
"use client";
import { createColumnHelper } from "@tanstack/react-table";
import { Button } from "@common/components";
import type { ElaprTmplt } from "@/entities/elapr";
import { Button } from "@common/components";
const columnHelper = createColumnHelper<ElaprTmplt>();
@@ -34,20 +34,11 @@ export function createTmpltColumns({ onEdit, onDelete }: CreateTmpltColumnsOptio
id: "actions",
header: "관리",
cell: ({ row }) => (
<div
className="flex justify-center gap-2"
onClick={(e) => e.stopPropagation()}
>
<Button type="button" size="sm" variant="outline" onClick={() => onEdit(row.original)}>
<div className="flex justify-center gap-2" onClick={(e) => e.stopPropagation()}>
<Button type="button" size="sm" onClick={() => onEdit(row.original)}>
수정
</Button>
<Button
type="button"
size="sm"
variant="outline"
color="red"
onClick={() => onDelete(row.original)}
>
<Button type="button" size="sm" color="red" onClick={() => onDelete(row.original)}>
삭제
</Button>
</div>
apps/as/src/widgets/elapr-tmplt-list/ui/elapr-tmplt-list.tsx
+11 -17
View File
@@ -1,21 +1,19 @@
"use client";
import { useMemo, useState } from "react";
import { getCoreRowModel, type RowSelectionState } from "@tanstack/react-table";
import { Button } from "@common/components";
import { getCoreRowModel, type RowSelectionState } from "@tanstack/react-table";
import { useDataTable } from "@/shared/lib";
import {
type ElaprTmplt,
useCreateElaprTmplt,
useDeleteElaprTmplt,
useElaprTmpltPage,
useUpdateElaprTmplt,
type ElaprTmplt,
} from "@/entities/elapr";
import {
ElaprTmpltFormDialog,
type ElaprTmpltFormValues,
} from "@/features/elapr-tmplt-dialog";
import { useDataTable } from "@/shared/lib";
import { ElaprTmpltFormDialog, type ElaprTmpltFormValues } from "@/features/elapr-tmplt-dialog";
import { Button } from "@common/components";
import { createTmpltColumns } from "../model/columns";
@@ -66,23 +64,19 @@ function ElaprTmpltList({ selectedTmpltId, onSelectTmplt }: ElaprTmpltListProps)
enableMultiRowSelection: false,
getRowId: (row) => row.elaprTmpltId,
onRowSelectionChange: (updater) => {
const next =
typeof updater === "function" ? updater(rowSelection) : updater;
const next = typeof updater === "function" ? updater(rowSelection) : updater;
setRowSelection(next);
const selectedId = Object.keys(next)[0];
if (!selectedId) {
onSelectTmplt(null);
return;
}
const selected = tmpltQuery.data?.content.find(
(t) => t.elaprTmpltId === selectedId,
);
const selected = tmpltQuery.data?.content.find((t) => t.elaprTmpltId === selectedId);
onSelectTmplt(selected ?? null);
},
getCoreRowModel: getCoreRowModel(),
},
dataTableOptions: {
variant: "line",
onRowClick: (row) => {
setRowSelection({ [row.elaprTmpltId]: true });
onSelectTmplt(row);
@@ -113,9 +107,9 @@ function ElaprTmpltList({ selectedTmpltId, onSelectTmplt }: ElaprTmpltListProps)
};
return (
<section className="rounded-lg border border-border bg-background p-4">
<div className="mb-4 flex items-center justify-between">
<h3 className="text-lg font-semibold">전자결재선 관리 목록</h3>
<section className="card card-border mx-0 bg-background pt-0">
<div className="card-header flex items-center justify-between">
<h3 className="text-2xl font-semibold">전자결재선 관리 목록</h3>
<Button type="button" onClick={() => setDialogMode("create")}>
서식 등록
</Button>
apps/as/tailwind.config.ts
+2 -6
View File
@@ -1,15 +1,11 @@
import type { Config } from "tailwindcss";
import presetConfig from "../../tailwind.config.preset";
const config: Config = {
presets: [presetConfig],
content: [
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
"./shared/**/*.{js,ts,jsx,tsx,mdx}",
"./entities/**/*.{js,ts,jsx,tsx,mdx}",
"./features/**/*.{js,ts,jsx,tsx,mdx}",
"./widgets/**/*.{js,ts,jsx,tsx,mdx}",
"./app/**/*.{js,ts,jsx,tsx,mdx}",
"./src/**/*.{js,ts,jsx,tsx,mdx}",
"../../packages/common/components/dist/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
pnpm-lock.yaml
Generated
+3
View File
@@ -171,6 +171,9 @@ importers:
js-cookie:
specifier: ^3.0.5
version: 3.0.5
lucide-react:
specifier: ^0.474.0
version: 0.474.0(react@19.2.4)
next:
specifier: 15.3.8
version: 15.3.8(react-dom@19.2.4(react@19.2.4))(react@19.2.4)