Merge pull request 'iipbs_cs' (#11) from iipbs_cs into main

Reviewed-on: #11
This commit was merged in pull request #11.
This commit is contained in:
2025-03-21 11:32:11 +09:00
41 changed files with 1075 additions and 580 deletions
+8 -3
View File
@@ -5,10 +5,15 @@ const serverApiUrl =
export function middleware(req: NextRequest) {
const pathname = req.nextUrl.pathname;
const searchParams = req.nextUrl.searchParams;
if (pathname.startsWith("/server")) {
return NextResponse.rewrite(
`${serverApiUrl}${pathname.replace("/server", "")}`,
);
const queryParams = searchParams.toString();
const newUrl = `${serverApiUrl}${pathname.replace("/server", "")}${
queryParams ? `?${queryParams}` : ""
}`;
console.log("Rewriting to: ", newUrl);
return NextResponse.rewrite(new URL(newUrl));
}
return NextResponse.next();
+5 -2
View File
@@ -1,10 +1,13 @@
import "./styles/base.css";
import "./styles/components.css";
import { AppProvider } from "./providers";
import { cookies } from "next/headers";
const App = async ({ children }: Readonly<{ children: React.ReactNode }>) => {
const theme = (await cookies()).get("site-theme-key");
const App = ({ children }: Readonly<{ children: React.ReactNode }>) => {
return (
<html lang="ko">
<html lang="ko" data-theme={theme?.value}>
<body>
<AppProvider>{children}</AppProvider>
</body>
+8 -6
View File
@@ -2,16 +2,18 @@
import { ConfirmProvider } from "@frontend-opensource/use-react-hooks";
import { AuthWrapper } from "@/entities/auth";
import { QueryProvider, StoreProvider } from "@/shared/providers";
import { StoreProvider } from "@/shared/providers";
import { AlertDialog } from "@/shared/ui/alert-dialog";
const AppProvider = ({ children }: Readonly<{ children: React.ReactNode }>) => {
return (
<StoreProvider>
<QueryProvider>
<ConfirmProvider>
<AuthWrapper>{children}</AuthWrapper>
</ConfirmProvider>
</QueryProvider>
<ConfirmProvider>
<AuthWrapper>
{children}
<AlertDialog />
</AuthWrapper>
</ConfirmProvider>
</StoreProvider>
);
};
+1 -1
View File
@@ -14,7 +14,7 @@
@apply -mx-[0.6rem] mt-2 flex items-center justify-center border-t border-t-[#e1e7eb] py-4;
}
[data-mode="dark"] {
[data-theme="black"] {
.card-border {
@apply border-[#3f4042] bg-[rgba(255,255,255,0.065)];
}
@@ -0,0 +1,28 @@
import { client } from "@/shared/api";
import { ENDPOINT } from "@/shared/config";
import type {
Domain,
DomainService,
DomainList,
IDomainParams,
} from "../model/domain-interface";
export class DomainApiService implements DomainService {
public async getDomainList(params: IDomainParams): Promise<DomainList> {
const response = await client.get<DomainList>(
`${ENDPOINT.CMS_SERVICE.DOMAINS}`,
{ params },
);
return response.data;
}
public async saveDomainList(body: Domain[]): Promise<void> {
const response = await client.post<void>(
`${ENDPOINT.CMS_SERVICE.DOMAINS}`,
body,
);
return response.data;
}
}
export const DomainApi = new DomainApiService();
+22
View File
@@ -0,0 +1,22 @@
import { client } from "@/shared/api";
import { ENDPOINT } from "@/shared/config";
import type { IIpParams, IP, IpList, IpService } from "../model/ip-interface";
export class IpApiService implements IpService {
public async getIpList(params: IIpParams): Promise<IpList> {
const response = await client.get<IpList>(`${ENDPOINT.CMS_SERVICE.IPS}`, {
params,
});
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();
+3 -3
View File
@@ -2,16 +2,16 @@ import { client } from "@/shared/api";
import { ENDPOINT } from "@/shared/config";
import {
siteFormSchema,
type ISiteInfo,
type SiteService,
type SiteList,
type ISiteDetail,
type ISiteParams,
type SiteFormData,
} from "../model/site-interface";
export class SiteApiService implements SiteService {
public async siteInfo(params: ISiteParams): Promise<ISiteInfo> {
const response = await client.get<ISiteInfo>(
public async getSiteList(params: ISiteParams): Promise<SiteList> {
const response = await client.get<SiteList>(
`${ENDPOINT.CMS_SERVICE.SITES}`,
{ params },
);
@@ -0,0 +1,31 @@
import { z } from "zod";
import type { IPageableParams, PageableList } from "@/shared/model";
export interface IDomainParams extends IPageableParams {
keywordType?: string;
keyword?: string;
siteId?: string;
useYn?: string;
}
export const domainSchema = z.object({
siteDmnNo: z.number().nullish(),
siteId: z.string(),
dmnAddr: z.string().nonempty(),
useYn: z.string(),
rprsDmnYn: z.string(),
mode: z.string(),
});
export const domainFormSchema = z.object({
domains: z.array(domainSchema),
});
export type Domain = z.infer<typeof domainSchema>;
export type DomainFormData = z.infer<typeof domainFormSchema>;
export type DomainList = PageableList<Domain[]>;
export interface DomainService {
getDomainList(params: IDomainParams): Promise<DomainList>;
saveDomainList(body: Domain[]): Promise<void>;
}
@@ -0,0 +1,29 @@
import { z } from "zod";
import type { IPageableParams, PageableList } from "@/shared/model";
export interface IIpParams extends IPageableParams {
siteId: string;
ipAddr?: string;
prmYn?: string;
}
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 type IpList = PageableList<IP[]>;
export interface IpService {
getIpList(params: IIpParams): Promise<IpList>;
saveIpList(body: IP[]): Promise<void>;
}
+14 -44
View File
@@ -1,12 +1,10 @@
import { z } from "zod";
import type { IPageableParams, PageableList } from "@/shared/model";
export interface ISiteParams {
siteNm: string;
siteKndCd: string;
useYn: string;
page: number;
size: number;
sort: string[];
export interface ISiteParams extends IPageableParams {
siteNm?: string;
siteKndCd?: string;
useYn?: string;
}
export interface ISite {
@@ -20,35 +18,6 @@ export interface ISite {
rgTrNm: string;
}
export interface ISiteInfo {
totalPages: number;
totalElements: number;
number: number;
sort: {
empty: boolean;
sorted: boolean;
unsorted: boolean;
};
size: number;
content: ISite[];
pageable: {
sort: {
empty: boolean;
sorted: boolean;
unsorted: boolean;
};
offset: number;
pageNumber: number;
pageSize: number;
paged: boolean;
unpaged: boolean;
};
numberOfElements: number;
first: boolean;
last: boolean;
empty: boolean;
}
export interface ISiteDetail extends SiteFormData {
siteId: string;
siteKindNm: string;
@@ -65,22 +34,23 @@ export interface ISiteDetail extends SiteFormData {
export const siteFormSchema = z.object({
siteId: z.string().max(2).nonempty(),
siteNm: z.string().max(100).nonempty(),
siteExpln: z.string().max(1000).optional(),
siteExpln: z.string().max(1000).nullable(),
siteKndCd: z.string().max(10).nonempty(),
siteAddr: z.string().max(2000).optional(),
faxNo: z.string().max(100).optional(),
telNo: z.string().max(1000).optional(),
lwndCn: z.string().max(2000).optional(),
siteAddr: z.string().max(2000).nullable(),
faxNo: z.string().max(100).nullable(),
telNo: z.string().max(1000).nullable(),
lwndCn: z.string().max(2000).nullable(),
bscSiteYn: z.string(),
bkmkIcon: z.string().max(100).optional(),
bkmkIcon: z.string().max(100).nullable(),
useYn: z.string(),
siteSkn: z.string().max(10).optional(),
siteSkn: z.string().max(10).nullable(),
});
export type SiteFormData = z.infer<typeof siteFormSchema>;
export type SiteList = PageableList<ISite[]>;
export interface SiteService {
siteInfo(query: ISiteParams): Promise<ISiteInfo>;
getSiteList(params: ISiteParams): Promise<SiteList>;
siteDetail(siteId: string): Promise<ISiteDetail>;
modifySite(siteId: string, data: SiteFormData): Promise<void>;
createSite(data: SiteFormData): Promise<void>;
+17 -23
View File
@@ -1,6 +1,5 @@
"use client";
import { useState } from "react";
import { useRouter } from "next/navigation";
import { useForm } from "react-hook-form";
import { useMutation } from "@tanstack/react-query";
@@ -9,44 +8,39 @@ import { SiteApi } from "../api/site-service";
import { siteFormSchema, type SiteFormData } from "../model/site-interface";
import { SitePageLayout } from "./layout";
import { SiteForm } from "./site-form";
import {
Button,
Dialog,
DialogClose,
DialogContent,
DialogFooter,
} from "@common/components/ui";
import { useAlertStore } from "@/shared/lib/use-alert-store";
function CreatePage() {
const router = useRouter();
const { setMessage: alert } = useAlertStore((state) => state);
const { mutateAsync: createSite } = useMutation({
mutationFn: (data: SiteFormData) => SiteApi.createSite(data),
onSuccess: () => {
setIsCreateSuccess(true);
alert("등록되었습니다.", router.back);
},
});
const [isCreateSuccess, setIsCreateSuccess] = useState(false);
const form = useForm<SiteFormData>({
resolver: zodResolver(siteFormSchema),
defaultValues: {
siteId: "",
siteNm: "",
siteExpln: "",
siteKndCd: "",
siteAddr: "",
faxNo: "",
telNo: "",
lwndCn: "",
bscSiteYn: "",
bkmkIcon: "",
useYn: "",
siteSkn: "",
},
});
return (
<SitePageLayout>
<SiteForm form={form} handleSave={createSite} />
<Dialog open={isCreateSuccess} onOpenChange={() => router.back()}>
<DialogContent aria-describedby={undefined}>
<div className="py-10">
<p className="text-center text-[1.4rem]">등록되었습니다.</p>
</div>
<DialogFooter className="!justify-center">
<DialogClose asChild>
<Button>확인</Button>
</DialogClose>
</DialogFooter>
</DialogContent>
</Dialog>
</SitePageLayout>
);
}
@@ -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 } from "react-hook-form";
import {
Dialog,
DialogTrigger,
@@ -13,197 +17,304 @@ import {
TableHeader,
TableRow,
Input,
Checkbox,
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
RadioGroup,
RadioGroupItem,
DialogFooter,
DialogClose,
Checkbox,
} from "@common/components";
export type Domain = {
id: number;
domainUrl: string;
isRepresentative: boolean;
isActive: "true" | "false";
};
import {
Form,
FormControl,
FormField,
FormItem,
FormMessage,
} from "@/shared/ui/form";
import { ENDPOINT } from "@/shared/config";
import { DomainApi } from "../api/domain-service";
import {
domainFormSchema,
type Domain,
type DomainFormData,
} from "../model/domain-interface";
import { ConfirmDialog } from "@/shared/ui/confirm-dialog";
import { useAlertStore } from "@/shared/lib/use-alert-store";
type DomainManagementDialogProps = {
triggerDisabled?: boolean;
handleSave: (rows: Domain[]) => void;
siteId: string;
open?: boolean;
onOpenChange?: (open: boolean) => void;
handleSaveDomain?: (rows: Domain[]) => void;
};
function DomainManagementDialog({
triggerDisabled,
handleSave,
siteId,
handleSaveDomain,
...props
}: DomainManagementDialogProps) {
const [rows, setRows] = useState<Domain[]>([]);
const [rowSelection, setRowSelection] = useState<Domain["id"][]>([]);
const { confirm } = useConfirm();
const { setMessage: alert } = useAlertStore((state) => state);
const onSave = () => {
handleSave(rows);
const { data: domainList } = useQuery({
queryKey: [ENDPOINT.CMS_SERVICE.DOMAINS, props.open],
queryFn: () => DomainApi.getDomainList({ siteId }),
select: (data) => {
const domains = data.content.map((item) => ({
...item,
mode: "U",
}));
initialForm();
return domains;
},
});
const { mutateAsync } = useMutation({
mutationFn: (body: Domain[]) => DomainApi.saveDomainList(body),
});
const form = useForm<DomainFormData>({
resolver: zodResolver(domainFormSchema),
values: {
domains: domainList ?? [],
},
});
const { fields, append, remove, update } = useFieldArray({
control: form.control,
name: "domains",
});
const [onConfirm, setOnConfirm] = useState(false);
const [selectedRows, setSelectedRows] = useState<number[]>([]);
const initialForm = () => {
form.reset();
setSelectedRows([]);
};
const onSubmit = async (data: DomainFormData) => {
setOnConfirm(true);
if (await confirm("저장하시겠습니까?")) {
setOnConfirm(false);
await mutateAsync(data.domains);
handleSaveDomain?.(data.domains);
alert("저장되었습니다.");
}
setOnConfirm(false);
};
const handleAddDomain = () => {
const newDomain: Domain = {
id: Date.now(),
domainUrl: "",
isRepresentative: rows.length === 0,
isActive: "true",
};
setRows([...rows, newDomain]);
};
const handleDeleteDomain = () => {
const filteredRows = rows.filter((row) => !rowSelection.includes(row.id));
const hasRepresentative = filteredRows.some((row) => row.isRepresentative);
let updatedRows = filteredRows;
if (!hasRepresentative && filteredRows.length > 0) {
updatedRows = filteredRows.map((row, index) =>
index === 0 ? { ...row, isRepresentative: true } : row,
);
}
setRows(updatedRows);
setRowSelection([]);
};
const handleDomainUrlChange = (id: number, value: string) => {
setRows(
rows.map((row) => (row.id === id ? { ...row, domainUrl: value } : row)),
);
};
const handleRepresentativeChange = (id: number) => {
setRows(
rows.map((row) => ({
...row,
isRepresentative: row.id === id,
})),
);
};
const handleActiveChange = (id: number, value: "true" | "false") => {
setRows(
rows.map((row) => (row.id === id ? { ...row, isActive: value } : row)),
);
};
const toggleRowSelection = (id: number) => {
setRowSelection((prev) => {
if (prev.includes(id)) {
return prev.filter((item) => item !== id);
} else {
return [...prev, id];
}
append({
siteDmnNo: null,
siteId,
dmnAddr: "",
useYn: "Y",
rprsDmnYn: "N",
mode: "C",
});
};
const handleSelectAll = () => {
if (selectedRows.length === fields.length) {
setSelectedRows([]);
} else {
setSelectedRows(fields.map((_, index) => index));
}
};
const handleSelectRow = (i: number) => {
setSelectedRows((prev) =>
prev.includes(i) ? prev.filter((j) => j !== i) : [...prev, i],
);
};
const handleDeleteDomain = async () => {
if (selectedRows.length === 0) return;
const sortedIndices = [...selectedRows].sort((a, b) => b - a);
sortedIndices.forEach((i) => {
const field = fields[i];
if (field?.siteDmnNo) {
update(i, {
...field,
mode: "D",
});
} else {
remove(i);
}
});
setSelectedRows([]);
};
const handleChangeRprsDmnYn = (i: number) => {
fields.forEach((_, j) => {
if (j === i) return;
form.setValue(`domains.${j}.rprsDmnYn`, "N");
});
};
const isAllSelected =
fields.length > 0 && selectedRows.length === fields.length;
return (
<Dialog>
<DialogTrigger asChild>
<Button disabled={triggerDisabled}>도메인 관리</Button>
</DialogTrigger>
<DialogContent className="sm:max-w-[60rem]">
<DialogHeader>
<DialogTitle>도메인 관리</DialogTitle>
</DialogHeader>
<div className="mb-4 flex justify-end gap-2">
<Button size="sm" color="white" onClick={handleAddDomain}>
항목 추가
</Button>
<Button
size="sm"
color="red"
onClick={handleDeleteDomain}
disabled={rowSelection.length === 0}
>
항목 삭제
</Button>
</div>
<div className="card card-border">
<Table variant="secondary">
<colgroup>
<col width="8%" />
<col width="12%" />
<col width="40%" />
<col width="20%" />
<col width="20%" />
</colgroup>
<TableHeader>
<TableRow>
<TableHead>NO</TableHead>
<TableHead>선택</TableHead>
<TableHead>도메인URL</TableHead>
<TableHead>대표URL</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.domainUrl}
onChange={(e) =>
handleDomainUrlChange(row.id, e.target.value)
}
className="!text-[1.3rem]"
/>
</TableCell>
<TableCell align="center">
<Checkbox
checked={row.isRepresentative}
onCheckedChange={() => handleRepresentativeChange(row.id)}
className="cursor-pointer"
/>
</TableCell>
<TableCell align="center">
<Select
value={row.isActive}
onValueChange={(value: "true" | "false") =>
handleActiveChange(row.id, value)
}
>
<SelectTrigger className="mx-auto w-[10rem]">
<SelectValue placeholder="선택" />
</SelectTrigger>
<SelectContent>
<SelectItem value="true">예</SelectItem>
<SelectItem value="false">아니오</SelectItem>
</SelectContent>
</Select>
</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>도메인 관리</Button>
</DialogTrigger>
<DialogContent className="max-w-[60rem]" aria-describedby={undefined}>
<DialogHeader>
<DialogTitle>도메인 관리</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={handleAddDomain}>
항목 추가
</Button>
<Button
type="button"
size="sm"
color="red"
onClick={handleDeleteDomain}
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="auto" />
<col width="15%" />
<col width="25%" />
</colgroup>
<TableHeader className="sticky -top-[0.6rem]">
<TableRow>
<TableHead className="!px-0">
<Checkbox
checked={isAllSelected}
onCheckedChange={handleSelectAll}
/>
</TableHead>
<TableHead>도메인 주소</TableHead>
<TableHead>대표 URL</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={`domains.${i}.dmnAddr`}
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={`domains.${i}.rprsDmnYn`}
render={({ field }) => (
<FormItem>
<FormControl>
<Checkbox
checked={field.value === "Y"}
onCheckedChange={(checked) => {
field.onChange(checked ? "Y" : "N");
handleChangeRprsDmnYn(i);
}}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</TableCell>
<TableCell align="center">
<FormField
control={form.control}
name={`domains.${i}.useYn`}
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={`useY-${i}`}
/>
<label htmlFor={`useY-${i}`}>예</label>
</div>
<div className="flex items-center space-x-2">
<RadioGroupItem
value="N"
id={`useN-${i}`}
/>
<label htmlFor={`useN-${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={onConfirm} />
</>
);
}
+249 -141
View File
@@ -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 } from "react-hook-form";
import {
Dialog,
DialogTrigger,
@@ -15,162 +19,266 @@ 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 } 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 = {
siteId: string;
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({
siteId,
triggerDisabled,
...props
}: IPManagementDialogProps) {
const { confirm } = useConfirm();
const { setMessage: alert } = useAlertStore((state) => state);
const onSave = () => {};
const { data: ipList } = useQuery({
queryKey: [ENDPOINT.CMS_SERVICE.IPS, props.open],
queryFn: () => IpApi.getIpList({ siteId, sort: [] }),
select: (data) => {
const ips = data.content.map((item) => ({
...item,
mode: "U",
}));
initialForm();
return ips;
},
});
const { mutateAsync } = useMutation({
mutationFn: (body: IP[]) => IpApi.saveIpList(body),
});
const form = useForm<IPFormData>({
resolver: zodResolver(ipFormSchema),
values: {
ips: ipList ?? [],
},
});
const { fields, append, remove, update } = useFieldArray({
control: form.control,
name: "ips",
});
const [onConfirm, setOnConfirm] = useState(false);
const [selectedRows, setSelectedRows] = useState<number[]>([]);
const initialForm = () => {
form.reset();
setSelectedRows([]);
};
const onSubmit = async (data: IPFormData) => {
setOnConfirm(true);
if (await confirm("저장하시겠습니까?")) {
setOnConfirm(false);
await mutateAsync(data.ips);
alert("저장되었습니다.");
}
};
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,
ipAddr: "",
prmYn: "Y",
mode: "C",
});
};
const handleSelectAll = () => {
if (selectedRows.length === fields.length) {
setSelectedRows([]);
} else {
setSelectedRows(fields.map((_, index) => index));
}
};
const handleSelectRow = (i: number) => {
setSelectedRows((prev) =>
prev.includes(i) ? prev.filter((j) => j !== i) : [...prev, i],
);
};
const handleDeleteIP = async () => {
if (selectedRows.length === 0) return;
const sortedIndices = [...selectedRows].sort((a, b) => b - a);
sortedIndices.forEach((i) => {
const field = fields[i];
if (field?.mngNo) {
update(i, {
...field,
mode: "D",
});
} else {
remove(i);
}
});
setSelectedRows([]);
};
const isAllSelected =
fields.length > 0 && selectedRows.length === fields.length;
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 className="!px-0">
<Checkbox
checked={isAllSelected}
onCheckedChange={handleSelectAll}
/>
</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={onConfirm} />
</>
);
}
+28 -46
View File
@@ -1,73 +1,67 @@
"use client";
import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import { useForm } from "react-hook-form";
import { useMutation, useQuery } from "@tanstack/react-query";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { zodResolver } from "@hookform/resolvers/zod";
import { ENDPOINT } from "@/shared/config";
import { useAlertStore } from "@/shared/lib/use-alert-store";
import { SiteApi } from "../api/site-service";
import {
siteFormSchema,
type ISiteDetail,
type SiteFormData,
} from "../model/site-interface";
import { siteFormSchema, type SiteFormData } from "../model/site-interface";
import { SitePageLayout } from "./layout";
import { SiteForm } from "./site-form";
import {
Button,
Dialog,
DialogClose,
DialogContent,
DialogFooter,
} from "@common/components/ui";
function ModifyPage({ siteId }: { siteId: string }) {
const isModifyMode = !!siteId;
const router = useRouter();
const queryClient = useQueryClient();
const { setMessage: alert } = useAlertStore((state) => state);
const { data: siteDetail } = useQuery({
queryKey: [ENDPOINT.CMS_SERVICE.SITES, siteId],
queryFn: () => SiteApi.siteDetail(siteId),
select: (data) => ({
...data,
faxNo: data.faxNumber,
bscSiteYn: data.basicSiteYn,
}),
select: (data) => {
const keys = Object.keys(siteFormSchema.shape);
const filteredData = Object.fromEntries(
Object.entries(data).filter(([key]) => keys.includes(key)),
);
return {
...filteredData,
faxNo: data.faxNumber,
bscSiteYn: data.basicSiteYn,
};
},
enabled: isModifyMode,
});
const { mutateAsync: modifySite } = useMutation({
mutationFn: (data: SiteFormData) => SiteApi.modifySite(siteId, data),
onSuccess: () => {
setMessage("수정되었습니다.");
alert("수정되었습니다.", () => {
queryClient.invalidateQueries({
queryKey: [ENDPOINT.CMS_SERVICE.SITES],
});
});
},
});
const { mutateAsync: deleteSite } = useMutation({
mutationFn: () => SiteApi.deleteSite(siteId),
onSuccess: () => {
setMessage("삭제되었습니다.");
alert("삭제되었습니다.", () => {
queryClient.invalidateQueries({
queryKey: [ENDPOINT.CMS_SERVICE.SITES],
});
router.back();
});
},
});
const [message, setMessage] = useState("");
const form = useForm<SiteFormData>({
resolver: zodResolver(siteFormSchema),
values: siteDetail as SiteFormData,
});
useEffect(() => {
if (!siteDetail) return;
const keys = Object.keys(siteFormSchema.shape);
for (const key of keys) {
form.setValue(
key as keyof SiteFormData,
siteDetail[key as keyof ISiteDetail] ?? "",
);
}
}, [siteDetail]);
return (
<SitePageLayout>
<SiteForm
@@ -76,18 +70,6 @@ function ModifyPage({ siteId }: { siteId: string }) {
handleSave={modifySite}
handleDelete={deleteSite}
/>
<Dialog open={!!message} onOpenChange={() => router.back()}>
<DialogContent aria-describedby={undefined}>
<div className="py-10">
<p className="text-center text-[1.4rem]">{message}</p>
</div>
<DialogFooter className="!justify-center">
<DialogClose asChild>
<Button>확인</Button>
</DialogClose>
</DialogFooter>
</DialogContent>
</Dialog>
</SitePageLayout>
);
}
+47 -53
View File
@@ -4,10 +4,6 @@ import { useConfirm } from "@frontend-opensource/use-react-hooks";
import { type UseFormReturn } from "react-hook-form";
import {
Button,
Dialog,
DialogClose,
DialogContent,
DialogFooter,
Input,
Label,
RadioGroup,
@@ -26,47 +22,53 @@ import {
Form,
FormMessage,
} from "@/shared/ui/form";
import { type ISiteDetail, type SiteFormData } from "../model/site-interface";
import { ConfirmDialog } from "@/shared/ui/confirm-dialog";
import type { SiteFormData } from "../model/site-interface";
import type { Domain } from "../model/domain-interface";
import { IPManagementDialog } from "./ip-management-dialog";
import {
DomainManagementDialog,
type Domain,
} from "./domain-management-dialog";
import { DomainManagementDialog } from "./domain-management-dialog";
type SiteFormProps = {
form: UseFormReturn<SiteFormData>;
siteId?: string;
handleSave: (data: SiteFormData) => void;
handleDelete?: () => void;
handleSave: (data: SiteFormData) => Promise<void>;
handleDelete?: () => Promise<void>;
};
function SiteForm({ form, siteId, handleSave, handleDelete }: SiteFormProps) {
const router = useRouter();
const { message, confirm, onConfirm, onCancel } = useConfirm();
const [viewState, setViewState] = useState<Partial<ISiteDetail>>({});
const [representativeDomain, setRepresentativeDomain] = useState<string>("");
const isModifyMode = !!siteId;
const handleViewStateChange = (key: keyof ISiteDetail) => (value: string) => {
setViewState({ ...viewState, [key]: value });
const router = useRouter();
const { confirm } = useConfirm();
const [onConfirm, setOnConfirm] = useState(false);
const [isIpManagementOpen, setIsIpManagementOpen] = useState(false);
const [isDomainManagementOpen, setIsDomainManagementOpen] = useState(false);
const [domainUrl, setDomainUrl] = useState("");
const handleSaveDomain = (rows: Domain[]) => {
setDomainUrl(rows.find((row) => row.rprsDmnYn === "Y")?.dmnAddr || "");
};
const handleDomainSave = (rows: Domain[]) => {
setRepresentativeDomain(
rows.find((row) => row.isRepresentative)?.domainUrl || "",
);
};
const onSubmit = async (data: SiteFormData) => {
const confirmMessage = isModifyMode
? "수정하시겠습니까?"
: "저장하시겠습니까?";
const onSubmit = (data: SiteFormData) => {
handleSave(data);
setOnConfirm(true);
if (await confirm(confirmMessage)) {
setOnConfirm(false);
handleSave(data);
}
setOnConfirm(false);
};
const onDelete = async () => {
if (await confirm("정말 삭제하시겠습니까?")) {
setOnConfirm(true);
if (await confirm("삭제하시겠습니까?")) {
setOnConfirm(false);
handleDelete?.();
}
setOnConfirm(false);
};
return (
@@ -120,10 +122,7 @@ function SiteForm({ form, siteId, handleSave, handleDelete }: SiteFormProps) {
<CodeSelect
{...field}
upCd="SITEKNDCD"
onValueChange={(value) => {
handleViewStateChange("siteKndCd")(value);
field.onChange(value);
}}
onValueChange={field.onChange}
/>
</FormControl>
<FormMessage />
@@ -132,7 +131,10 @@ function SiteForm({ form, siteId, handleSave, handleDelete }: SiteFormProps) {
/>
{isModifyMode && (
<IPManagementDialog
triggerDisabled={viewState.siteKndCd === "O"}
siteId={siteId}
triggerDisabled={form.watch("siteKndCd") === "O"}
open={isIpManagementOpen}
onOpenChange={setIsIpManagementOpen}
/>
)}
</div>
@@ -149,6 +151,7 @@ function SiteForm({ form, siteId, handleSave, handleDelete }: SiteFormProps) {
<FormControl>
<CodeSelect
{...field}
value={field.value ?? ""}
upCd="SITESKINCD"
onValueChange={field.onChange}
/>
@@ -191,6 +194,7 @@ function SiteForm({ form, siteId, handleSave, handleDelete }: SiteFormProps) {
<FormControl>
<Input
{...field}
value={field.value ?? ""}
className="!text-[1.3rem]"
placeholder="사이트 설명을 입력하십시오."
/>
@@ -207,10 +211,13 @@ function SiteForm({ form, siteId, handleSave, handleDelete }: SiteFormProps) {
<TableCell className="border">
<div className="flex gap-2">
<div className="h-[3.2rem] w-[21.5rem] cursor-not-allowed rounded-md border border-input bg-form px-3 py-2 text-[1.3rem] opacity-50">
{representativeDomain}
{domainUrl}
</div>
<DomainManagementDialog
handleSave={handleDomainSave}
siteId={siteId}
open={isDomainManagementOpen}
onOpenChange={setIsDomainManagementOpen}
handleSaveDomain={handleSaveDomain}
/>
</div>
</TableCell>
@@ -227,6 +234,7 @@ function SiteForm({ form, siteId, handleSave, handleDelete }: SiteFormProps) {
<FormControl>
<Input
{...field}
value={field.value ?? ""}
className="!text-[1.3rem]"
placeholder="사이트 하단 주소를 입력하십시오."
/>
@@ -248,6 +256,7 @@ function SiteForm({ form, siteId, handleSave, handleDelete }: SiteFormProps) {
<FormControl>
<Input
{...field}
value={field.value ?? ""}
className="!text-[1.3rem]"
placeholder="사이트 하단 전화번호를 입력하십시오."
/>
@@ -269,6 +278,7 @@ function SiteForm({ form, siteId, handleSave, handleDelete }: SiteFormProps) {
<FormControl>
<Input
{...field}
value={field.value ?? ""}
className="!text-[1.3rem]"
placeholder="사이트 하단 팩스번호를 입력하십시오."
/>
@@ -290,6 +300,7 @@ function SiteForm({ form, siteId, handleSave, handleDelete }: SiteFormProps) {
<FormControl>
<Input
{...field}
value={field.value ?? ""}
className="!text-[1.3rem]"
placeholder="사이트 표기 내용을 입력하십시오. (ex. COPYRIGHT c 2013 KECO. ALL RIGHTS RESERVED.)"
/>
@@ -311,6 +322,7 @@ function SiteForm({ form, siteId, handleSave, handleDelete }: SiteFormProps) {
<FormControl>
<Input
{...field}
value={field.value ?? ""}
className="!text-[1.3rem]"
placeholder="아이콘 파일 경로 및 파일명을 입력하여 주십시오."
/>
@@ -405,25 +417,7 @@ function SiteForm({ form, siteId, handleSave, handleDelete }: SiteFormProps) {
</div>
</form>
</Form>
<Dialog open={!!message} onOpenChange={onCancel}>
<DialogContent aria-describedby={undefined}>
<div className="py-10">
<p className="text-center text-[1.4rem]">{message}</p>
</div>
<DialogFooter className="!justify-center">
<DialogClose asChild>
<Button color="red" onClick={onConfirm}>
삭제
</Button>
</DialogClose>
<DialogClose asChild>
<Button color="white" onClick={onCancel}>
취소
</Button>
</DialogClose>
</DialogFooter>
</DialogContent>
</Dialog>
<ConfirmDialog open={onConfirm} />
</>
);
}
+5 -12
View File
@@ -7,7 +7,7 @@ import { useEffect, useState } from "react";
import { useQuery } from "@tanstack/react-query";
import { getCoreRowModel, useReactTable } from "@tanstack/react-table";
import { Button, DataTable, Input } from "@common/components";
import { ENDPOINT } from "@/shared/config/api";
import { ENDPOINT } from "@/shared/config";
import { SiteApi } from "../api/site-service";
import { columns } from "../model/table-columns";
import { type ISite, type ISiteParams } from "../model/site-interface";
@@ -15,23 +15,18 @@ import { SitePageLayout } from "./layout";
function SitePage() {
const router = useRouter();
const { data: siteInfo, refetch } = useQuery({
const { data: siteList, refetch } = useQuery({
queryKey: [ENDPOINT.CMS_SERVICE.SITES],
queryFn: () => SiteApi.siteInfo(siteQuery),
queryFn: () => SiteApi.getSiteList(siteQuery),
enabled: false,
});
const [siteQuery, setSiteQuery] = useState<ISiteParams>({
siteNm: "",
siteKndCd: "",
useYn: "",
page: 0,
size: 0,
sort: [],
});
const table = useReactTable({
data: siteInfo?.content ?? [],
data: siteList?.content ?? [],
columns,
getCoreRowModel: getCoreRowModel(),
});
@@ -61,9 +56,7 @@ function SitePage() {
<Input
className="h-[3.2rem] w-[24rem] rounded-sm !text-[1.3rem]"
value={siteQuery.siteNm}
onChange={(e) =>
setSiteQuery({ ...siteQuery, siteNm: e.target.value })
}
onChange={(e) => setSiteQuery({ siteNm: e.target.value })}
/>
<Button className="h-[3.2rem]" type="submit">
조회
+2
View File
@@ -11,6 +11,8 @@ 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",
DOMAINS: "/cms-service/api/v1/site-dmns",
},
};
+14
View File
@@ -0,0 +1,14 @@
import { useStore } from "zustand";
import { useContext } from "react";
import type { AlertStore } from "../store/alert-store";
import { StoreContext } from "../providers/store-provider";
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);
};
+1 -1
View File
@@ -1,6 +1,6 @@
import { useStore } from "zustand";
import { useContext } from "react";
import { type UserStore } from "@/shared/store/user-store";
import type { UserStore } from "../store/user-store";
import { StoreContext } from "../providers/store-provider";
export const useUserStore = <T>(selector: (store: UserStore) => T): T => {
+34
View File
@@ -0,0 +1,34 @@
interface SortConfig {
empty: boolean;
sorted: boolean;
unsorted: boolean;
}
interface PageableConfig {
sort: SortConfig;
offset: number;
pageNumber: number;
pageSize: number;
paged: boolean;
unpaged: boolean;
}
export interface PageableList<T> {
content: T;
pageable: PageableConfig;
sort: SortConfig;
totalPages: number;
totalElements: number;
number: number;
numberOfElements: number;
size: number;
first: boolean;
last: boolean;
empty: boolean;
}
export interface IPageableParams {
page?: number;
size?: number;
sort?: string[];
}
+1
View File
@@ -0,0 +1 @@
export * from "./api-interface";
-1
View File
@@ -1,2 +1 @@
export { QueryProvider } from "./query-provider";
export { StoreProvider } from "./store-provider";
@@ -1,9 +1,11 @@
"use client";
import { createContext, useRef } from "react";
import { createUserStore } from "@/shared/store/user-store";
import { createAlertStore } from "../store/alert-store";
import { createUserStore } from "../store/user-store";
type StoreContextType = {
alertStore: ReturnType<typeof createAlertStore>;
userStore: ReturnType<typeof createUserStore>;
};
@@ -15,6 +17,7 @@ export const StoreProvider = ({ children }: { children: React.ReactNode }) => {
const storeRef = useRef<StoreContextType | null>(null);
if (storeRef.current === null) {
storeRef.current = {
alertStore: createAlertStore(),
userStore: createUserStore(),
};
}
+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 })),
}));
};
+32
View File
@@ -0,0 +1,32 @@
import {
Dialog,
DialogContent,
DialogFooter,
DialogClose,
Button,
} from "@common/components/ui";
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-center text-[1.4rem] text-foreground">{message}</p>
</div>
<DialogFooter className="!justify-center">
<DialogClose asChild>
<Button>확인</Button>
</DialogClose>
</DialogFooter>
</DialogContent>
</Dialog>
);
}
export { AlertDialog };
+46
View File
@@ -0,0 +1,46 @@
import { useConfirm } from "@frontend-opensource/use-react-hooks";
import {
Dialog,
DialogContent,
DialogFooter,
DialogClose,
Button,
type ButtonProps,
} from "@common/components/ui";
type ConfirmDialogProps = {
open: boolean;
confirmButtonProps?: ButtonProps & { label?: string };
cancelButtonProps?: ButtonProps & { label?: string };
};
function ConfirmDialog({
open,
confirmButtonProps,
cancelButtonProps,
}: ConfirmDialogProps) {
const { message, onConfirm, onCancel } = useConfirm();
return (
<Dialog open={open} onOpenChange={onCancel}>
<DialogContent aria-describedby={undefined}>
<div className="py-10">
<p className="text-center text-[1.4rem] text-foreground">{message}</p>
</div>
<DialogFooter className="!justify-center">
<DialogClose asChild>
<Button onClick={onConfirm} {...confirmButtonProps}>
{confirmButtonProps?.label ?? "확인"}
</Button>
</DialogClose>
<DialogClose asChild>
<Button onClick={onCancel} color="white" {...cancelButtonProps}>
{cancelButtonProps?.label ?? "취소"}
</Button>
</DialogClose>
</DialogFooter>
</DialogContent>
</Dialog>
);
}
export { ConfirmDialog };
-1
View File
@@ -4,7 +4,6 @@ import presetConfig from "../../tailwind.config.preset";
export default {
presets: [presetConfig],
darkMode: ["class", "[data-mode='dark']"],
content: [
"./src/**/*.{js,ts,jsx,tsx,mdx}",
"../../packages/common/components/src/ui/**/*.{js,ts,jsx,tsx,mdx}",
+1 -1
View File
@@ -45,7 +45,7 @@
--container: #f1f6f9;
--title: #4c5e6f;
}
[data-mode="dark"] {
[data-theme="black"] {
--background: #0a0a0a;
--foreground: #fafafa;
--card: #0a0a0a;
@@ -25,10 +25,10 @@ const preview: Preview = {
withThemeByDataAttribute({
themes: {
light: "light",
dark: "dark",
black: "black",
},
defaultTheme: "light",
attributeName: "data-mode",
attributeName: "data-theme",
}),
(Story) => (
<div className="rounded-lg bg-background px-28 py-16">
@@ -1,3 +1,4 @@
export * from "./client";
export * from "./menu";
export * from "./site";
export * from "./user";
@@ -0,0 +1,31 @@
import { client } from "./client";
import { ENDPOINT } from "../config";
export interface SiteInfo {
siteId: string;
siteNm: string;
siteExpln: string;
siteKndCd: string;
siteKindNm: string;
siteAddr: string;
faxNumber: string;
telNo: string;
lwndCn: string;
basicSiteYn: string;
bkmkIcon: string;
useYn: string;
siteSkn: string;
regDt: string;
rgTr: string;
mdfcnDt: string;
mdFr: string;
rgTrNm: string;
mdFrNm: string;
}
export const getSiteInfo = async (siteId: string) => {
const response = await client.get<SiteInfo>(
`${ENDPOINT.CMS_SERVICE.SITES}/${siteId}`,
);
return response.data;
};
@@ -5,6 +5,7 @@ export const BASE_URL = `${PROXY_HOST}/server`;
export const ENDPOINT = {
CMS_SERVICE: {
MENU_ROLES: "/cms-service/api/v1/menu-roles",
SITES: "/cms-service/api/v1/sites",
},
USER_SERVICE: {
USERS: "/user-service/api/v1/users",
+2 -21
View File
@@ -10,7 +10,7 @@ export function getCookie(name: string): string | undefined {
export function setCookie(
name: string,
value: string,
options: Cookies.CookieAttributes,
options?: Cookies.CookieAttributes,
): void {
if (typeof window === "undefined") {
return;
@@ -20,29 +20,10 @@ export function setCookie(
export function removeCookie(
name: string,
options: Cookies.CookieAttributes,
options?: Cookies.CookieAttributes,
): void {
if (typeof window === "undefined") {
return;
}
Cookies.remove(name, options);
}
export function getToken(key: string): string | undefined {
return getCookie(key);
}
export function setToken(
key: string,
token: string,
options: Cookies.CookieAttributes,
): void {
setCookie(key, token, {
...options,
path: "/",
});
}
export function removeToken(key: string): void {
removeCookie(key, { path: "/" });
}
@@ -1,9 +1,14 @@
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
const queryClient = new QueryClient();
export const QueryProvider = ({ children }: { children: React.ReactNode }) => {
export function QueryProvider({
children,
client,
}: {
children: React.ReactNode;
client?: QueryClient;
}) {
const queryClient = client ?? new QueryClient();
return (
<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
);
};
}
@@ -10,16 +10,16 @@
/* 버튼 색상 */
div[role="radiogroup"][data-variant="button"][data-color="primary"] {
@apply border border-primary dark:border-[#404040];
@apply border border-primary;
}
div[role="radiogroup"][data-variant="button"][data-color="primary"] button {
@apply text-[#6f98bd] hover:bg-[#ecf3f9] hover:text-[#498bc7] data-[state=checked]:bg-primary data-[state=checked]:text-white dark:bg-[#505050] dark:text-[#aeb7bf] dark:hover:bg-[#525e69] dark:data-[state=checked]:bg-primary dark:data-[state=checked]:text-white;
@apply text-[#6f98bd] hover:bg-[#ecf3f9] hover:text-[#498bc7] data-[state=checked]:bg-primary data-[state=checked]:text-white;
}
div[role="radiogroup"][data-variant="button"][data-color="secondary"] {
@apply border border-[#ababab] dark:border-[#808080];
@apply border border-[#ababab];
}
div[role="radiogroup"][data-variant="button"][data-color="secondary"] button {
@apply bg-[#f3f3f3] text-[#8a8a8a] hover:bg-[#ececec] hover:text-[#808080] data-[state=checked]:bg-[#848484] data-[state=checked]:text-white dark:bg-[#505050] dark:text-[#a5a5a5] dark:hover:bg-[#444444] dark:data-[state=checked]:bg-[#848484] dark:data-[state=checked]:text-white;
@apply bg-[#f3f3f3] text-[#8a8a8a] hover:bg-[#ececec] hover:text-[#808080] data-[state=checked]:bg-[#848484] data-[state=checked]:text-white;
}
/* 버튼 모양 */
@@ -28,13 +28,37 @@
}
div[role="radiogroup"][data-variant="button"][data-color="primary"][data-shape="rounded"]
button {
@apply bg-[#70bcff] text-white hover:bg-[#6bb0ec] data-[state=checked]:bg-primary dark:bg-[#505050] dark:hover:bg-[#525e69] dark:data-[state=checked]:bg-primary;
@apply bg-[#70bcff] text-white hover:bg-[#6bb0ec] data-[state=checked]:bg-primary;
}
div[role="radiogroup"][data-variant="button"][data-color="secondary"][data-shape="rounded"] {
@apply border-[#7b7b7b];
}
div[role="radiogroup"][data-variant="button"][data-color="secondary"][data-shape="rounded"]
button {
@apply bg-[#b7b7b7] text-white hover:bg-[#a9a9a9] data-[state=checked]:bg-[#797979] dark:bg-[#505050] dark:hover:bg-[#444444] dark:data-[state=checked]:bg-[#797979];
@apply bg-[#b7b7b7] text-white hover:bg-[#a9a9a9] data-[state=checked]:bg-[#797979];
}
[data-theme="black"] {
div[role="radiogroup"][data-variant="button"][data-color="primary"] {
@apply border-[#404040];
}
div[role="radiogroup"][data-variant="button"][data-color="primary"] button {
@apply bg-[#505050] text-[#aeb7bf] hover:bg-[#525e69] data-[state=checked]:bg-primary data-[state=checked]:text-white;
}
div[role="radiogroup"][data-variant="button"][data-color="secondary"] {
@apply border-[#808080];
}
div[role="radiogroup"][data-variant="button"][data-color="secondary"]
button {
@apply bg-[#505050] text-[#a5a5a5] hover:bg-[#444444] data-[state=checked]:bg-[#848484] data-[state=checked]:text-white;
}
div[role="radiogroup"][data-variant="button"][data-color="primary"][data-shape="rounded"]
button {
@apply bg-[#505050] hover:bg-[#525e69] data-[state=checked]:bg-primary;
}
div[role="radiogroup"][data-variant="button"][data-color="secondary"][data-shape="rounded"]
button {
@apply bg-[#505050] hover:bg-[#444444] data-[state=checked]:bg-[#797979];
}
}
}
@@ -1,8 +1,8 @@
import { useQuery } from "@tanstack/react-query";
import { images } from "@common/assets";
import { getUserInfo } from "../../api";
import { AUTH_USER_ID, ENDPOINT } from "../../config";
import { getToken } from "../../lib";
import { getCookie, setCookie } from "../../lib";
import { getSiteInfo, getUserInfo } from "../../api";
import { AUTH_USER_ID, ENDPOINT, SITE_ID } from "../../config";
import {
DropdownMenu,
DropdownMenuTrigger,
@@ -12,13 +12,28 @@ import {
import { Button } from "../button";
export function Header({ viewOnly }: { viewOnly?: boolean }) {
const userUniqId = getToken(AUTH_USER_ID) ?? "";
const userUniqId = getCookie(AUTH_USER_ID) ?? "";
const { data: userInfo } = useQuery({
queryKey: [ENDPOINT.USER_SERVICE.USERS],
queryFn: () => getUserInfo(userUniqId),
enabled: !viewOnly,
});
const { data: siteInfo } = useQuery({
queryKey: [ENDPOINT.CMS_SERVICE.SITES, SITE_ID],
queryFn: () => getSiteInfo(SITE_ID),
select: (data) => {
if (data.siteSkn) {
const siteSkin = data.siteSkn.toLowerCase();
setCookie("site-theme-key", siteSkin);
document.documentElement.setAttribute("data-theme", siteSkin);
}
return data;
},
enabled: !viewOnly,
});
return (
<header className="sticky top-0 z-30 box-border flex h-[5rem] w-full items-center justify-between border-b border-solid border-border bg-background">
<div className="flex items-center">
@@ -28,7 +43,7 @@ export function Header({ viewOnly }: { viewOnly?: boolean }) {
<h1 className="flex items-center gap-4">
<img src={images.logo} className="h-[3rem]" alt="logo" />
<span className="text-[1.8rem] font-semibold text-foreground">
통합플랫폼관리
{siteInfo?.siteNm}
</span>
</h1>
</div>
@@ -1,17 +1,21 @@
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { QueryProvider } from "../../provider/query-provider";
import { SidebarProvider } from "../sidebar";
import { LNB } from "../lnb";
import { Header } from "../header";
import { Footer } from "./footer";
import "./common.css";
import type { QueryClient } from "@tanstack/react-query";
const queryClient = new QueryClient();
export function BaseLayout({ children }: { children: React.ReactNode }) {
export function BaseLayout({
children,
queryClient,
}: {
children: React.ReactNode;
queryClient?: QueryClient;
}) {
return (
<QueryClientProvider client={queryClient}>
<QueryProvider client={queryClient}>
<SidebarProvider>
<div className="flex-1">
<Header />
@@ -26,6 +30,6 @@ export function BaseLayout({ children }: { children: React.ReactNode }) {
</div>
</div>
</SidebarProvider>
</QueryClientProvider>
</QueryProvider>
);
}
@@ -1,28 +1,35 @@
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { QueryProvider } from "../../provider/query-provider";
import { SidebarProvider } from "../sidebar";
import { LNB } from "../lnb";
import { Header } from "../header";
import { Footer } from "./footer";
import "./common.css";
import type { QueryClient } from "@tanstack/react-query";
const queryClient = new QueryClient();
export function VBaseLayout({ children }: { children: React.ReactNode }) {
export function BaseLayout({
children,
queryClient,
}: {
children: React.ReactNode;
queryClient?: QueryClient;
}) {
return (
<QueryClientProvider client={queryClient}>
<div>
<Header viewOnly />
<div className="flex h-[calc(100vh-50px)]">
<LNB viewOnly />
<div className="flex flex-1 flex-col">
<div className="max-h-[calc(100%-50px)] flex-1 overflow-auto">
{children}
<QueryProvider client={queryClient}>
<SidebarProvider>
<div className="flex-1">
<Header viewOnly />
<div className="flex h-[calc(100vh-50px)]">
<LNB viewOnly />
<div className="flex flex-1 flex-col">
<div className="max-h-[calc(100%-50px)] flex-1 overflow-auto">
{children}
</div>
<Footer />
</div>
<Footer />
</div>
</div>
</div>
</QueryClientProvider>
</SidebarProvider>
</QueryProvider>
);
}
@@ -11,7 +11,7 @@ type Story = StoryObj<typeof LoadingWithAnimation>;
export const Primary: Story = {
render: () => (
<div className="rounded-lg bg-secondary p-10 dark:bg-transparent">
<div className="[data-theme='black']:bg-transparent rounded-lg bg-secondary p-10">
<div className="relative size-[5rem]">
<LoadingWithAnimation color="primary" />
</div>
@@ -21,7 +21,7 @@ export const Primary: Story = {
export const Secondary: Story = {
render: () => (
<div className="rounded-lg bg-secondary p-10 dark:bg-transparent">
<div className="[data-theme='black']:bg-transparent rounded-lg bg-secondary p-10">
<div className="relative size-[5rem]">
<LoadingWithAnimation color="secondary" />
</div>
@@ -31,7 +31,7 @@ export const Secondary: Story = {
export const PrimaryWithImage: Story = {
render: () => (
<div className="rounded-lg bg-secondary p-10 dark:bg-transparent">
<div className="[data-theme='black']:bg-transparent rounded-lg bg-secondary p-10">
<div className="relative size-[5rem]">
<LoadingWithImage color="primary" />
</div>
@@ -41,7 +41,7 @@ export const PrimaryWithImage: Story = {
export const SecondaryWithImage: Story = {
render: () => (
<div className="rounded-lg bg-secondary p-10 dark:bg-transparent">
<div className="[data-theme='black']:bg-transparent rounded-lg bg-secondary p-10">
<div className="relative size-[5rem]">
<LoadingWithImage color="secondary" />
</div>
@@ -24,7 +24,7 @@
@apply border-b border-b-border;
}
[data-mode="dark"] {
[data-theme="black"] {
.table-ui th {
@apply bg-[#5e7b9c] text-[#fff];
}
@@ -3,7 +3,6 @@ import presetConfig from "../../../tailwind.config.preset";
/** @type {import('tailwindcss').Config} */
export default {
presets: [presetConfig],
darkMode: ["class", "[data-mode='dark']"],
content: ["./src/**/*.{ts,tsx,js,jsx}", "./.storybook/**/*.{ts,tsx,js,jsx}"],
plugins: [require("tailwindcss-animate")],
};