feat: ip 관리 서비스 작업
This commit is contained in:
@@ -0,0 +1,20 @@
|
||||
import { client } from "@/shared/api";
|
||||
import { ENDPOINT } from "@/shared/config";
|
||||
import type { IP, IpList, IpService } from "../model/ip-interface";
|
||||
|
||||
export class IpApiService implements IpService {
|
||||
public async getIpList(): Promise<IpList> {
|
||||
const response = await client.get<IpList>(`${ENDPOINT.CMS_SERVICE.IPS}`);
|
||||
return response.data;
|
||||
}
|
||||
|
||||
public async saveIpList(body: IP[]): Promise<void> {
|
||||
const response = await client.post<void>(
|
||||
`${ENDPOINT.CMS_SERVICE.IPS}`,
|
||||
body,
|
||||
);
|
||||
return response.data;
|
||||
}
|
||||
}
|
||||
|
||||
export const IpApi = new IpApiService();
|
||||
@@ -0,0 +1,50 @@
|
||||
import { z } from "zod";
|
||||
|
||||
export const ipSchema = z.object({
|
||||
mngNo: z.number().nullish(),
|
||||
siteId: z.string(),
|
||||
ipAddr: z.string().nonempty(),
|
||||
prmYn: z.string(),
|
||||
mode: z.string(),
|
||||
});
|
||||
|
||||
export const ipFormSchema = z.object({
|
||||
ips: z.array(ipSchema),
|
||||
});
|
||||
|
||||
export type IP = z.infer<typeof ipSchema>;
|
||||
export type IPFormData = z.infer<typeof ipFormSchema>;
|
||||
|
||||
export interface IpList {
|
||||
content: IP[];
|
||||
pageable: {
|
||||
sort: {
|
||||
empty: boolean;
|
||||
sorted: boolean;
|
||||
unsorted: boolean;
|
||||
};
|
||||
offset: number;
|
||||
pageNumber: number;
|
||||
pageSize: number;
|
||||
paged: boolean;
|
||||
unpaged: boolean;
|
||||
};
|
||||
last: boolean;
|
||||
totalPages: number;
|
||||
totalElements: number;
|
||||
number: number;
|
||||
sort: {
|
||||
empty: boolean;
|
||||
sorted: boolean;
|
||||
unsorted: boolean;
|
||||
};
|
||||
size: number;
|
||||
first: boolean;
|
||||
numberOfElements: number;
|
||||
empty: boolean;
|
||||
}
|
||||
|
||||
export interface IpService {
|
||||
getIpList(): Promise<IpList>;
|
||||
saveIpList(body: IP[]): Promise<void>;
|
||||
}
|
||||
@@ -1,4 +1,8 @@
|
||||
import { useState } from "react";
|
||||
import { useMutation, useQuery } from "@tanstack/react-query";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { useConfirm } from "@frontend-opensource/use-react-hooks";
|
||||
import { useForm, useFieldArray, type FieldArrayWithId } from "react-hook-form";
|
||||
import {
|
||||
Dialog,
|
||||
DialogTrigger,
|
||||
@@ -15,162 +19,241 @@ import {
|
||||
Input,
|
||||
RadioGroup,
|
||||
RadioGroupItem,
|
||||
Checkbox,
|
||||
DialogFooter,
|
||||
DialogClose,
|
||||
Checkbox,
|
||||
} from "@common/components";
|
||||
|
||||
type IP = {
|
||||
id: number;
|
||||
ipAddress: string;
|
||||
allowed: boolean;
|
||||
};
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormMessage,
|
||||
} from "@/shared/ui/form";
|
||||
import { ENDPOINT, SITE_ID } from "@/shared/config";
|
||||
import { IpApi } from "../api/ip-service";
|
||||
import { ipFormSchema, type IP, type IPFormData } from "../model/ip-interface";
|
||||
import { ConfirmDialog } from "@/shared/ui/confirm-dialog";
|
||||
import { useAlertStore } from "@/shared/lib/use-alert-store";
|
||||
|
||||
type IPManagementDialogProps = {
|
||||
triggerDisabled?: boolean;
|
||||
open?: boolean;
|
||||
onOpenChange?: (open: boolean) => void;
|
||||
};
|
||||
|
||||
function IPManagementDialog({ triggerDisabled }: IPManagementDialogProps) {
|
||||
const [rows, setRows] = useState<IP[]>([]);
|
||||
const [rowSelection, setRowSelection] = useState<IP["id"][]>([]);
|
||||
function IPManagementDialog({
|
||||
triggerDisabled,
|
||||
...props
|
||||
}: IPManagementDialogProps) {
|
||||
const { confirm } = useConfirm();
|
||||
const { setAlertMessage } = useAlertStore((state) => state);
|
||||
|
||||
const onSave = () => {};
|
||||
useQuery({
|
||||
queryKey: [ENDPOINT.CMS_SERVICE.IPS, props.open],
|
||||
queryFn: () => IpApi.getIpList(),
|
||||
select: (data) => {
|
||||
const ips = data.content.map((item) => ({
|
||||
...item,
|
||||
mode: "U",
|
||||
}));
|
||||
replace(ips);
|
||||
return data;
|
||||
},
|
||||
});
|
||||
|
||||
const { mutateAsync } = useMutation({
|
||||
mutationFn: (body: IP[]) => IpApi.saveIpList(body),
|
||||
});
|
||||
|
||||
const form = useForm<IPFormData>({
|
||||
resolver: zodResolver(ipFormSchema),
|
||||
});
|
||||
const { fields, append, remove, update, replace } = useFieldArray({
|
||||
control: form.control,
|
||||
name: "ips",
|
||||
});
|
||||
|
||||
const [isOpen, setIsOpen] = useState<boolean>(false);
|
||||
const [selectedRows, setSelectedRows] = useState<number[]>([]);
|
||||
|
||||
const onSubmit = async (data: IPFormData) => {
|
||||
setIsOpen(true);
|
||||
if (await confirm("저장하시겠습니까?")) {
|
||||
setIsOpen(false);
|
||||
try {
|
||||
await mutateAsync(data.ips);
|
||||
setAlertMessage("저장되었습니다.");
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
setAlertMessage("저장에 실패했습니다.");
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleAddIP = () => {
|
||||
const newIP: IP = {
|
||||
id: Date.now(),
|
||||
ipAddress: "",
|
||||
allowed: true,
|
||||
};
|
||||
setRows([...rows, newIP]);
|
||||
};
|
||||
|
||||
const handleDeleteIP = () => {
|
||||
const filteredRows = rows.filter((row) => !rowSelection.includes(row.id));
|
||||
setRows(filteredRows);
|
||||
setRowSelection([]);
|
||||
};
|
||||
|
||||
const handleIPAddressChange = (id: number, value: string) => {
|
||||
setRows(
|
||||
rows.map((row) => (row.id === id ? { ...row, ipAddress: value } : row)),
|
||||
);
|
||||
};
|
||||
|
||||
const handleAllowedChange = (id: number, value: boolean) => {
|
||||
setRows(
|
||||
rows.map((row) => (row.id === id ? { ...row, allowed: value } : row)),
|
||||
);
|
||||
};
|
||||
|
||||
const toggleRowSelection = (id: number) => {
|
||||
setRowSelection((prev) => {
|
||||
if (prev.includes(id)) {
|
||||
return prev.filter((item) => item !== id);
|
||||
} else {
|
||||
return [...prev, id];
|
||||
}
|
||||
append({
|
||||
mngNo: null,
|
||||
siteId: SITE_ID,
|
||||
ipAddr: "",
|
||||
prmYn: "Y",
|
||||
mode: "C",
|
||||
});
|
||||
};
|
||||
|
||||
const handleSelectRow = (i: number) => {
|
||||
setSelectedRows((prev) =>
|
||||
prev.includes(i) ? prev.filter((j) => j !== i) : [...prev, i],
|
||||
);
|
||||
};
|
||||
|
||||
const handleDeleteIP = () => {
|
||||
selectedRows.forEach((i) => {
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
const { id, ...field } = fields[i] as FieldArrayWithId<IPFormData>;
|
||||
if (field.mngNo) {
|
||||
update(i, {
|
||||
...field,
|
||||
mode: "D",
|
||||
});
|
||||
} else {
|
||||
remove(i);
|
||||
}
|
||||
});
|
||||
setSelectedRows([]);
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog>
|
||||
<DialogTrigger asChild>
|
||||
<Button disabled={triggerDisabled}>IP 관리</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="sm:max-w-[60rem]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>IP 관리</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div className="mb-4 flex justify-end gap-2">
|
||||
<Button size="sm" color="green">
|
||||
엑셀 업로드
|
||||
</Button>
|
||||
<Button size="sm" color="white" onClick={handleAddIP}>
|
||||
항목 추가
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
color="red"
|
||||
onClick={handleDeleteIP}
|
||||
disabled={rowSelection.length === 0}
|
||||
>
|
||||
항목 삭제
|
||||
</Button>
|
||||
</div>
|
||||
<div className="card card-border">
|
||||
<Table variant="secondary">
|
||||
<colgroup>
|
||||
<col width="10%" />
|
||||
<col width="10%" />
|
||||
<col width="55%" />
|
||||
<col width="25%" />
|
||||
</colgroup>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>NO</TableHead>
|
||||
<TableHead>선택</TableHead>
|
||||
<TableHead>IP 주소</TableHead>
|
||||
<TableHead>허용여부</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{rows.map((row, idx) => (
|
||||
<TableRow key={row.id}>
|
||||
<TableCell align="center">{idx + 1}</TableCell>
|
||||
<TableCell align="center">
|
||||
<Checkbox
|
||||
checked={rowSelection.includes(row.id)}
|
||||
onCheckedChange={() => toggleRowSelection(row.id)}
|
||||
className="cursor-pointer"
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell align="center">
|
||||
<Input
|
||||
value={row.ipAddress}
|
||||
onChange={(e) =>
|
||||
handleIPAddressChange(row.id, e.target.value)
|
||||
}
|
||||
className="!text-[1.3rem]"
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell align="center">
|
||||
<RadioGroup
|
||||
value={row.allowed ? "true" : "false"}
|
||||
onValueChange={(value) =>
|
||||
handleAllowedChange(row.id, value === "true")
|
||||
}
|
||||
className="flex justify-center"
|
||||
>
|
||||
<div className="flex items-center space-x-2">
|
||||
<RadioGroupItem value="true" id={`allow-${row.id}`} />
|
||||
<label htmlFor={`allow-${row.id}`}>예</label>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<RadioGroupItem value="false" id={`deny-${row.id}`} />
|
||||
<label htmlFor={`deny-${row.id}`}>아니오</label>
|
||||
</div>
|
||||
</RadioGroup>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
<DialogFooter className="!justify-center">
|
||||
<DialogClose asChild>
|
||||
<Button size="lg" onClick={onSave}>
|
||||
저장
|
||||
</Button>
|
||||
</DialogClose>
|
||||
<DialogClose asChild>
|
||||
<Button size="lg" color="white">
|
||||
취소
|
||||
</Button>
|
||||
</DialogClose>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
<>
|
||||
<Dialog {...props}>
|
||||
<DialogTrigger asChild>
|
||||
<Button disabled={triggerDisabled}>IP 관리</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="max-w-[60rem]" aria-describedby={undefined}>
|
||||
<DialogHeader>
|
||||
<DialogTitle>IP 관리</DialogTitle>
|
||||
</DialogHeader>
|
||||
<Form {...form}>
|
||||
<form
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
form.handleSubmit(onSubmit)(e);
|
||||
}}
|
||||
>
|
||||
<div className="mb-4 flex justify-end gap-2">
|
||||
<Button type="button" size="sm" onClick={handleAddIP}>
|
||||
항목 추가
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
color="red"
|
||||
onClick={handleDeleteIP}
|
||||
disabled={selectedRows.length === 0}
|
||||
>
|
||||
항목 삭제
|
||||
</Button>
|
||||
</div>
|
||||
<div className="card card-border max-h-[28.5rem] overflow-auto">
|
||||
<Table variant="secondary">
|
||||
<colgroup>
|
||||
<col width="10%" />
|
||||
<col width="65%" />
|
||||
<col width="25%" />
|
||||
</colgroup>
|
||||
<TableHeader className="sticky -top-[0.6rem]">
|
||||
<TableRow>
|
||||
<TableHead>선택</TableHead>
|
||||
<TableHead>IP 주소</TableHead>
|
||||
<TableHead>허용여부</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{fields.map((field, i) => {
|
||||
if (field.mode === "D") return null;
|
||||
return (
|
||||
<TableRow key={field.id}>
|
||||
<TableCell align="center" className="!px-0">
|
||||
<Checkbox
|
||||
checked={selectedRows.includes(i)}
|
||||
onCheckedChange={() => handleSelectRow(i)}
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell align="center">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name={`ips.${i}.ipAddr`}
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Input
|
||||
{...field}
|
||||
className="!text-[1.3rem]"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage className="text-left" />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell align="center">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name={`ips.${i}.prmYn`}
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<RadioGroup
|
||||
value={field.value}
|
||||
onValueChange={field.onChange}
|
||||
className="flex justify-center"
|
||||
>
|
||||
<div className="flex items-center space-x-2">
|
||||
<RadioGroupItem
|
||||
value="Y"
|
||||
id={`prmY-${i}`}
|
||||
/>
|
||||
<label htmlFor={`prmY-${i}`}>예</label>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<RadioGroupItem
|
||||
value="N"
|
||||
id={`prmN-${i}`}
|
||||
/>
|
||||
<label htmlFor={`prmN-${i}`}>
|
||||
아니오
|
||||
</label>
|
||||
</div>
|
||||
</RadioGroup>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
})}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
<DialogFooter className="!justify-center">
|
||||
<Button type="submit" size="lg">
|
||||
저장
|
||||
</Button>
|
||||
<DialogClose asChild>
|
||||
<Button type="button" size="lg" color="white">
|
||||
취소
|
||||
</Button>
|
||||
</DialogClose>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</Form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
<ConfirmDialog open={isOpen} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -11,6 +11,7 @@ export const ENDPOINT = {
|
||||
CMS_SERVICE: {
|
||||
SITES: "/cms-service/api/v1/sites",
|
||||
CODE: "/cms-service/api/v1/code/cache",
|
||||
IPS: "/cms-service/api/v1/site-ips",
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user