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

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

Browse Source
This commit is contained in:
yschoi
2025-07-19 14:43:13 +09:00
parent 981d700624 b933b9149e
commit e70dec580c
24 changed files with 641 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/cs/src/entities/menu/api/menu-service.ts
+9
View File
@@ -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
+3
View File
@@ -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
+13 -1
View File
@@ -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/pages/menu/api/tree-menu-service.ts → apps/cs/src/entities/tree-menu/api/tree-menu-service.ts
View File
apps/cs/src/entities/tree-menu/index.ts
+2
View File
@@ -0,0 +1,2 @@
export { TreeMenuApi } from "./api/tree-menu-service";
export type { TreeMenu, TreeNode } from "./model/tree-menu-interface";
apps/cs/src/pages/menu/model/tree-menu-interface.ts → apps/cs/src/entities/tree-menu/model/tree-menu-interface.ts
+1
View File
@@ -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/pages/apilog/ui/apilog-page.tsx
+1 -2
View File
@@ -15,8 +15,7 @@ import {
SelectTrigger,
SelectValue,
} from "@common/components";
import { ApiLogApi } from "@/entities/apilog";
import { type ApiLogParams } from "@/entities/apilog/model/apilog-interface";
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";
apps/cs/src/pages/loginlog/ui/loginlog-page.tsx
+1 -2
View File
@@ -16,8 +16,7 @@ import {
SelectValue,
LoadingWithImage,
} from "@common/components";
import { LoginlogApi } from "@/entities/loginlog";
import { type LoginlogParams } from "@/entities/loginlog/model/loginlog-interface";
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";
apps/cs/src/pages/menu/lib/utils.ts
+1 -1
View File
@@ -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
+29 -16
View File
@@ -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">
<Button
variant="ghost"
size="icon"
className="size-8 !bg-transparent"
onClick={onSave}
>
<i className="diveicon di-check text-2xl" />
</Button>
<Button
variant="ghost"
size="icon"
className="size-8 !bg-transparent"
onClick={onCancel}
>
<i className="diveicon di-x" />
</Button>
<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
+1 -2
View File
@@ -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
+1 -2
View File
@@ -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";
apps/cs/src/pages/menu/ui/menu-tree.tsx
+5 -2
View File
@@ -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/privacylog/ui/privacylog-page.tsx
+4 -2
View File
@@ -15,8 +15,10 @@ import {
SelectTrigger,
SelectValue,
} from "@common/components";
import { PrivacyLogPrivacy } from "@/entities/privacylog";
import type { PrivacyLogParams } from "@/entities/privacylog/model/privacylog-interface";
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";
apps/cs/src/pages/role/api/site-authority-service.ts
+28
View File
@@ -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
+24
View File
@@ -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/ui/mapping-role-dialog.tsx
+48 -10
View File
@@ -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
+86 -5
View File
@@ -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/site/lib/utils.ts
+24
View File
@@ -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
+103
View File
@@ -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
+58
View File
@@ -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
+128
View File
@@ -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
+70
View File
@@ -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/shared/config/api.ts
+1
View File
@@ -53,6 +53,7 @@ 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",
},
BOARD_SERVICE: {
BBS: "/board-service/api/v1/bbs",