From 0539b7f1f945de5458f93e393ec4e006a5a81a49 Mon Sep 17 00:00:00 2001 From: bicochan Date: Wed, 21 May 2025 15:00:16 +0900 Subject: [PATCH] =?UTF-8?q?refactor:=20=EC=BD=94=EB=93=9C=20=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EB=A6=AC=ED=8C=A9=ED=86=A0=EB=A7=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/entities/code/api/lwpocode-service.ts | 22 +- .../src/entities/code/api/upcode-service.ts | 3 +- apps/cs/src/entities/code/index.ts | 23 +- .../entities/code/model/lwpocode-interface.ts | 99 ++-- .../entities/code/model/upcode-interface.ts | 75 ++- .../code/model/lwpocode-table-columns.tsx | 70 +++ .../cs/src/pages/code/model/table-columns.tsx | 119 ----- .../pages/code/model/upcode-table-columns.tsx | 64 +++ apps/cs/src/pages/code/ui/code-page.tsx | 249 +--------- apps/cs/src/pages/code/ui/lowcode-dialog.tsx | 292 ----------- apps/cs/src/pages/code/ui/lwpocode-dialog.tsx | 321 ++++++++++++ .../cs/src/pages/code/ui/lwpocode-section.tsx | 98 ++++ apps/cs/src/pages/code/ui/upcode-dialog.tsx | 465 +++++++++--------- apps/cs/src/pages/code/ui/upcode-section.tsx | 101 ++++ .../module/ui/management-authority-dialog.tsx | 201 ++++---- packages/common/assets/src/styles/base.css | 2 + .../components/src/ui/data-table/index.tsx | 41 +- tailwind.config.preset.ts | 1 + 18 files changed, 1164 insertions(+), 1082 deletions(-) create mode 100644 apps/cs/src/pages/code/model/lwpocode-table-columns.tsx delete mode 100644 apps/cs/src/pages/code/model/table-columns.tsx create mode 100644 apps/cs/src/pages/code/model/upcode-table-columns.tsx delete mode 100644 apps/cs/src/pages/code/ui/lowcode-dialog.tsx create mode 100644 apps/cs/src/pages/code/ui/lwpocode-dialog.tsx create mode 100644 apps/cs/src/pages/code/ui/lwpocode-section.tsx create mode 100644 apps/cs/src/pages/code/ui/upcode-section.tsx diff --git a/apps/cs/src/entities/code/api/lwpocode-service.ts b/apps/cs/src/entities/code/api/lwpocode-service.ts index 045a6ee6d..b8f11fa22 100644 --- a/apps/cs/src/entities/code/api/lwpocode-service.ts +++ b/apps/cs/src/entities/code/api/lwpocode-service.ts @@ -25,9 +25,12 @@ export class LwpoCodeApiService implements LwpoCodeService { return response.data; } - public async LwpoCodeDetail(upCd: string, LwpoCd: string): Promise { + public async lwpoCodeDetail( + upCd: string, + lwpoCd: string, + ): Promise { const response = await client.get( - `${ENDPOINT.CMS_SERVICE.LWPO_CODE}/${LwpoCd}/up-cd/${upCd}`, + `${ENDPOINT.CMS_SERVICE.LWPO_CODE}/${lwpoCd}/up-cd/${upCd}`, ); return response.data; } @@ -41,21 +44,24 @@ export class LwpoCodeApiService implements LwpoCodeService { return response.data; } - public async updateLwpoCode(upCd: string, LwpoCd: string, data: LwpoCodeFormData): Promise { + public async updateLwpoCode( + upCd: string, + lwpoCd: string, + data: LwpoCodeFormData, + ): Promise { const validatedData = LwpoCodeFormSchema.parse(data); const response = await client.put( - `${ENDPOINT.CMS_SERVICE.LWPO_CODE}/${LwpoCd}/up-cd/${upCd}`, + `${ENDPOINT.CMS_SERVICE.LWPO_CODE}/${lwpoCd}/up-cd/${upCd}`, validatedData, ); return response.data; } - public async deleteLwpoCode(upCd: string, LwpoCd: string): Promise { + public async deleteLwpoCode(upCd: string, lwpoCd: string): Promise { await client.delete( - `${ENDPOINT.CMS_SERVICE.LWPO_CODE}/${LwpoCd}/up-cd/${upCd}`, + `${ENDPOINT.CMS_SERVICE.LWPO_CODE}/${lwpoCd}/up-cd/${upCd}`, ); } - } -export const lwpoCodeApi = new LwpoCodeApiService(); +export const LwpoCodeApi = new LwpoCodeApiService(); diff --git a/apps/cs/src/entities/code/api/upcode-service.ts b/apps/cs/src/entities/code/api/upcode-service.ts index 86c936a1f..dcccd9534 100644 --- a/apps/cs/src/entities/code/api/upcode-service.ts +++ b/apps/cs/src/entities/code/api/upcode-service.ts @@ -42,7 +42,6 @@ export class UpCodeApiService implements UpCodeService { ); return response.data; } - } -export const upCodeApi = new UpCodeApiService(); +export const UpCodeApi = new UpCodeApiService(); diff --git a/apps/cs/src/entities/code/index.ts b/apps/cs/src/entities/code/index.ts index 4cb1c1547..e166e2c29 100644 --- a/apps/cs/src/entities/code/index.ts +++ b/apps/cs/src/entities/code/index.ts @@ -2,13 +2,18 @@ export { CodeApi } from "./api/code-service"; export type { ICode } from "./model/code-interface"; export { CodeSelect } from "./ui/code-select"; +export { UpCodeApi } from "./api/upcode-service"; +export { + upCodeFormSchema, + type UpCode, + type UpCodeFormData, + type UpCodeParams, +} from "./model/upcode-interface"; -export { upCodeApi } from "./api/upcode-service"; -export type { UpCode } from "./model/upcode-interface"; -export { upCodeFormSchema, type UpCodeFormData } from "./model/upcode-interface"; - -export { lwpoCodeApi} from "./api/lwpocode-service"; -export type { LwpoCode } from "./model/lwpocode-interface"; -export { LwpoCodeFormSchema, type LwpoCodeFormData } from "./model/lwpocode-interface"; - - +export { LwpoCodeApi } from "./api/lwpocode-service"; +export { + LwpoCodeFormSchema, + type LwpoCode, + type LwpoCodeFormData, + type LwpoCodeParams, +} from "./model/lwpocode-interface"; diff --git a/apps/cs/src/entities/code/model/lwpocode-interface.ts b/apps/cs/src/entities/code/model/lwpocode-interface.ts index eec2b82d2..785d86e1e 100644 --- a/apps/cs/src/entities/code/model/lwpocode-interface.ts +++ b/apps/cs/src/entities/code/model/lwpocode-interface.ts @@ -2,60 +2,67 @@ import { z } from "zod"; import type { PageableParams, PageableList } from "@/shared/model"; export interface LwpoCodeParams extends PageableParams { - upCd?: string; - lwpoCd?: string; - lwpoCdNm?: string; - useYn?: string; + upCd?: string; + lwpoCd?: string; + lwpoCdNm?: string; + useYn?: string; } - + export interface LwpoCode { - lwpoCd: string; - upCd: string; - lwpoCdNm: string; - lwpoCdExpln: string; - unit: string; - prntLwpoCd: string; - useYn: string; - sortSeq: number; - regDt: string; - rgTr: string; - rgTrNm: string; - mdfcnDt: string; - mdFr: string; + lwpoCd: string; + upCd: string; + lwpoCdNm: string; + lwpoCdExpln: string; + unit: string; + prntLwpoCd: string; + useYn: string; + sortSeq: number; + regDt: string; + rgTr: string; + rgTrNm: string; + mdfcnDt: string; + mdFr: string; } - + export interface LwpoCodeDetail extends LwpoCodeFormData { - lwpoCd: string; - upCd: string; - lwpoCdNm: string; - lwpoCdExpln: string; - unit: string; - prntLwpoCd: string; - useYn: string; - sortSeq: 0; + lwpoCd: string; + upCd: string; + lwpoCdNm: string; + lwpoCdExpln: string; + unit: string; + prntLwpoCd: string; + useYn: string; + sortSeq: 0; } - + export const LwpoCodeFormSchema = z.object({ - lwpoCd: z.string().max(10).nonempty(), - upCd: z.string().max(10).nonempty(), - lwpoCdNm: z.string().max(100).nonempty(), - lwpoCdExpln: z.string().max(1000).nullish(), - unit: z.string().max(20).nullish(), - prntLwpoCd: z.string().max(10).nullish(), - useYn: z.string(), - sortSeq: z.number(), - delYn: z.string(), + lwpoCd: z.string().max(10).nonempty(), + upCd: z.string().max(10).nonempty(), + lwpoCdNm: z.string().max(100).nonempty(), + lwpoCdExpln: z.string().max(1000).nullish(), + unit: z.string().max(20).nullish(), + prntLwpoCd: z.string().max(10).nullish(), + useYn: z.string(), + sortSeq: z.number(), + delYn: z.string(), }); - + export type LwpoCodeFormData = z.infer; export type LwpoCodeList = PageableList; - + export interface LwpoCodeService { - getLwpoCodeList(params: LwpoCodeParams): Promise; - getUpCodeLwpoCodeList(upCd: string): Promise; - LwpoCodeDetail(upCd: string, LwpoCode: string): Promise; - updateLwpoCode(upCd: string, LwpoCode: string, data: LwpoCodeFormData): Promise; - createLwpoCode(data: LwpoCodeFormData): Promise; - deleteLwpoCode(upCd: string, LwpoCode: string, data: LwpoCodeFormData): Promise; + getLwpoCodeList(params: LwpoCodeParams): Promise; + getUpCodeLwpoCodeList(upCd: string): Promise; + lwpoCodeDetail(upCd: string, lwpoCd: string): Promise; + updateLwpoCode( + upCd: string, + lwpoCd: string, + data: LwpoCodeFormData, + ): Promise; + createLwpoCode(data: LwpoCodeFormData): Promise; + deleteLwpoCode( + upCd: string, + lwpoCd: string, + data: LwpoCodeFormData, + ): Promise; } - \ No newline at end of file diff --git a/apps/cs/src/entities/code/model/upcode-interface.ts b/apps/cs/src/entities/code/model/upcode-interface.ts index d3e9680c1..73bf4f3ae 100644 --- a/apps/cs/src/entities/code/model/upcode-interface.ts +++ b/apps/cs/src/entities/code/model/upcode-interface.ts @@ -2,52 +2,51 @@ import { z } from "zod"; import type { PageableParams, PageableList } from "@/shared/model"; export interface UpCodeParams extends PageableParams { - keyword?: string; - upCd?: string; - cdSe?: string; - useYn?: string; - siteId?: string; + keyword?: string; + upCd?: string; + cdSe?: string; + useYn?: string; + siteId?: string; } - + export interface UpCode { - upCd: string; - upCdNm: string; - upCdExpln: string; - cdSe: string; - siteId: string; - useYn: string; - regDt: string; + upCd: string; + upCdNm: string; + upCdExpln: string; + cdSe: string; + siteId: string; + useYn: string; + regDt: string; } - + export interface UpCodeDetail extends UpCodeFormData { - upCd: string; - upCdNm: string; - upCdExpln: string; - cdSe: string; - siteId: string; - useYn: string; - delYn: string; - regDt: string; - rgTrNm: string; + upCd: string; + upCdNm: string; + upCdExpln: string; + cdSe: string; + siteId: string; + useYn: string; + delYn: string; + regDt: string; + rgTrNm: string; } - + export const upCodeFormSchema = z.object({ - upCd: z.string().max(10).nonempty(), - upCdNm: z.string().max(100).nonempty(), - upCdExpln: z.string().max(1000).nullish(), - cdSe: z.string().max(10).nonempty(), - siteId: z.string().max(2).nullish(), - useYn: z.string(), - delYn: z.string(), + upCd: z.string().max(10).nonempty(), + upCdNm: z.string().max(100).nonempty(), + upCdExpln: z.string().max(1000).nullish(), + cdSe: z.string().max(10).nonempty(), + siteId: z.string().max(2).nullish(), + useYn: z.string(), + delYn: z.string(), }); - + export type UpCodeFormData = z.infer; export type UpCodeList = PageableList; - + export interface UpCodeService { - getUpCodeList(params: UpCodeParams): Promise; - upCodeDetail(upCodeId: string): Promise; - updateUpCode(upCodeId: string, data: UpCodeFormData): Promise; - createUpCode(data: UpCodeFormData): Promise; + getUpCodeList(params: UpCodeParams): Promise; + upCodeDetail(upCodeId: string): Promise; + updateUpCode(upCodeId: string, data: UpCodeFormData): Promise; + createUpCode(data: UpCodeFormData): Promise; } - \ No newline at end of file diff --git a/apps/cs/src/pages/code/model/lwpocode-table-columns.tsx b/apps/cs/src/pages/code/model/lwpocode-table-columns.tsx new file mode 100644 index 000000000..1bea87275 --- /dev/null +++ b/apps/cs/src/pages/code/model/lwpocode-table-columns.tsx @@ -0,0 +1,70 @@ +import dayjs from "dayjs"; +import type { ColumnDef } from "@tanstack/react-table"; +import { Button } from "@common/components"; +import type { LwpoCode } from "@/entities/code"; +import { LwpoCodeManagementDialog } from "../ui/lwpocode-dialog"; +import { useState } from "react"; + +export const columns: ColumnDef[] = [ + { + id: "no", + header: "NO", + cell: ({ row, table }) => { + const totalRows = table.getRowCount(); + const { pageIndex, pageSize } = table.getState().pagination; + return totalRows - (pageIndex * pageSize + row.index); + }, + }, + { + accessorKey: "lwpoCd", + header: "하위코드", + }, + { + accessorKey: "lwpoCdNm", + header: "하위코드명", + }, + { + accessorKey: "useYn", + header: "사용 여부", + }, + { + accessorKey: "regDt", + header: "등록일", + cell: ({ row }) => { + const date = dayjs(row.original.regDt); + return date.format("YYYY-MM-DD"); + }, + }, + { + id: "actions", + header: "관리", + cell: ({ row }) => ( +
e.stopPropagation()}> + +
+ ), + }, +]; + +const LwpoCodeManageButton = ({ + lwpoCd, + upCd, +}: { + lwpoCd: string; + upCd: string; +}) => { + const [dialogOpen, setDialogOpen] = useState(false); + return ( + + + + ); +}; diff --git a/apps/cs/src/pages/code/model/table-columns.tsx b/apps/cs/src/pages/code/model/table-columns.tsx deleted file mode 100644 index f42f6463f..000000000 --- a/apps/cs/src/pages/code/model/table-columns.tsx +++ /dev/null @@ -1,119 +0,0 @@ -import dayjs from "dayjs"; -import { type ColumnDef } from "@tanstack/react-table"; -import { Button } from "@common/components"; -import type { UpCode } from "@/entities/code/model/upcode-interface"; -import type { LwpoCode } from "@/entities/code/model/lwpocode-interface"; - -const UpCodeManageButton = () => { - return ( - - ); -}; - -const LwpoCodeManageButton = () => { - return ( - - ); -}; - -export const upCodecolumns: ColumnDef[] = [ - { - id: "no", - header: "NO", - cell: ({ row, table }) => { - const isSelected = row.getIsSelected(); - if (isSelected) { - return "▶"; - } - const totalRows = table.getRowCount(); - const currentPage = table.getState().pagination.pageIndex; - const pageSize = table.getState().pagination.pageSize; - return totalRows - (currentPage * pageSize + row.index); - }, - }, - { - accessorKey: "upCd", - header: "상위코드", - }, - { - accessorKey: "upCdNm", - header: "상위코드명", - }, - { - accessorKey: "cdSe", - header: "코드구분", - }, - { - accessorKey: "useYn", - header: "사용여부", - }, - { - accessorKey: "regDt", - header: "등록일", - cell: ({ row }) => { - const date = dayjs(row.original.regDt); - return date.format("YYYY-MM-DD"); - }, - }, - { - id: "actions", - header: "관리", - cell: () => , - } -]; - -export const lowCodecolumns: ColumnDef[] = [ - { - id: "no", - header: "NO", - cell: ({ row, table }) => { - const totalRows = table.getRowCount(); - const currentPage = table.getState().pagination.pageIndex; - const pageSize = table.getState().pagination.pageSize; - return totalRows - (currentPage * pageSize + row.index); - }, - }, - { - accessorKey: "lwpoCd", - header: "하위코드", - }, - { - accessorKey: "lwpoCdNm", - header: "하위코드명", - }, - { - accessorKey: "useYn", - header: "사용 여부", - }, - { - accessorKey: "regDt", - header: "등록일", - cell: ({ row }) => { - const date = dayjs(row.original.regDt); - return date.format("YYYY-MM-DD"); - }, - }, - { - id: "actions", - header: "관리", - cell: () => , - } -]; diff --git a/apps/cs/src/pages/code/model/upcode-table-columns.tsx b/apps/cs/src/pages/code/model/upcode-table-columns.tsx new file mode 100644 index 000000000..c35ea4d70 --- /dev/null +++ b/apps/cs/src/pages/code/model/upcode-table-columns.tsx @@ -0,0 +1,64 @@ +import dayjs from "dayjs"; +import { useState } from "react"; +import type { ColumnDef } from "@tanstack/react-table"; +import { Button } from "@common/components"; +import type { UpCode } from "@/entities/code"; +import { UpCodeManagementDialog } from "../ui/upcode-dialog"; + +export const columns: ColumnDef[] = [ + { + id: "no", + header: "NO", + cell: ({ row, table }) => { + const totalRows = table.getRowCount(); + const { pageIndex, pageSize } = table.getState().pagination; + return totalRows - (pageIndex * pageSize + row.index); + }, + }, + { + accessorKey: "upCd", + header: "상위코드", + }, + { + accessorKey: "upCdNm", + header: "상위코드명", + }, + { + accessorKey: "cdSe", + header: "코드구분", + }, + { + accessorKey: "useYn", + header: "사용여부", + }, + { + accessorKey: "regDt", + header: "등록일", + cell: ({ row }) => { + const date = dayjs(row.original.regDt); + return date.format("YYYY-MM-DD"); + }, + }, + { + id: "actions", + header: "관리", + cell: ({ row }) => ( +
e.stopPropagation()}> + +
+ ), + }, +]; + +const UpCodeManageButton = ({ upCd }: { upCd: string }) => { + const [dialogOpen, setDialogOpen] = useState(false); + return ( + + + + ); +}; diff --git a/apps/cs/src/pages/code/ui/code-page.tsx b/apps/cs/src/pages/code/ui/code-page.tsx index 237676c8a..61e7fb8ea 100644 --- a/apps/cs/src/pages/code/ui/code-page.tsx +++ b/apps/cs/src/pages/code/ui/code-page.tsx @@ -1,241 +1,20 @@ "use client"; -import "@common/assets/styles/grid.css"; +import { useState } from "react"; -import { useEffect, useState } from "react"; -import { keepPreviousData, useQuery } from "@tanstack/react-query"; -import { - getCoreRowModel, - useReactTable, - type PaginationState, -} from "@tanstack/react-table"; -import { Button, DataTable, Input, Label } from "@common/components"; -import { upCodeApi } from "@/entities/code/api/upcode-service"; -import { type UpCode, type UpCodeParams } from "@/entities/code/model/upcode-interface"; -import { type LwpoCode, type LwpoCodeParams } from "@/entities/code/model/lwpocode-interface"; -import { ENDPOINT } from "@/shared/config"; -import { upCodecolumns, lowCodecolumns } from "../model/table-columns"; -import { lwpoCodeApi } from "@/entities/code/api/lwpocode-service"; -import { ManagementUpCodeDialog } from "./upcode-dialog"; -import { ManagementLwpoCodeDialog } from "./lowcode-dialog"; +import { UpCodeSection } from "./upcode-section"; +import { LwpoCodeSection } from "./lwpocode-section"; function CodePage() { - const [selectedUpCode, setSelectedUpCode] = useState(null); - const [isManagementDialogOpen, setIsManagementDialogOpen] = useState(false); - - const [isRegistrationMode, setIsRegistrationMode] = useState(false); - const [isLwpoCodeRegistrationMode, setIsLwpoCodeRegistrationMode] = useState(false); - - const [selectedLwpoCode, setSelectedLwpoCode] = useState(null); - const [isLwpoCodeManagementDialogOpen, setIsLwpoCodeManagementDialogOpen] = useState(false); - - const [upCodeQuery, setUpCodeQuery] = useState({ - upCd: "", - }); - const [lwpoCodeQuery, setLwpoCodeQuery] = useState({ - upCd: "", - lwpoCd: "", - }); - const [upCodePagination, setUpCodePagination] = useState({ - pageIndex: 0, - pageSize: 10, - }); - - const [lwpoCodePagination, setLwpoCodePagination] = useState({ - pageIndex: 0, - pageSize: 1000, - }); - - const { data: upCodeList, refetch: refetchUpCode } = useQuery({ - queryKey: [ENDPOINT.CMS_SERVICE.UP_CODE], - queryFn: () => - upCodeApi.getUpCodeList({ - ...upCodeQuery, - page: upCodePagination.pageIndex, - size: upCodePagination.pageSize, - }), - placeholderData: keepPreviousData, - }); - - const { data: lwpoCodeList, refetch: refetchLwpoCode } = useQuery({ - queryKey: [ENDPOINT.CMS_SERVICE.LWPO_CODE, lwpoCodeQuery], - queryFn: () => - lwpoCodeApi.getLwpoCodeList({ - ...lwpoCodeQuery, - page: lwpoCodePagination.pageIndex, - size: lwpoCodePagination.pageSize, - }), - enabled: !!lwpoCodeQuery.upCd, - }); - - const upCodehandleSubmit = (e: React.FormEvent) => { - e.preventDefault(); - refetchUpCode(); - }; - - const upCodehandleRowClick = (row: UpCode) => { - if (selectedUpCode?.upCd === row.upCd) { - setIsRegistrationMode(false); - setIsManagementDialogOpen(true); - } else { - setSelectedUpCode(row); - setLwpoCodeQuery({ ...lwpoCodeQuery, upCd: row.upCd }); - refetchLwpoCode(); - } - }; - - const handleRegistrationClick = () => { - setSelectedUpCode(null); - setIsRegistrationMode(true); - setIsManagementDialogOpen(true); - }; - - const lwpoCodehandleRowClick = (row: LwpoCode) => { - setSelectedLwpoCode(row); - setIsLwpoCodeRegistrationMode(false); - setIsLwpoCodeManagementDialogOpen(true); - }; - - const handleLwpoCodeRegistrationClick = () => { - if (!selectedUpCode?.upCd) { - alert("상위코드를 선택해주세요."); - return; - } - setSelectedLwpoCode(null); - setIsLwpoCodeRegistrationMode(true); - setIsLwpoCodeManagementDialogOpen(true); - }; - - const upCodeTable = useReactTable({ - data: upCodeList?.content ?? [], - columns: upCodecolumns, - rowCount: upCodeList?.totalElements ?? 0, - state: { - pagination: upCodePagination, - rowSelection: selectedUpCode ? { [selectedUpCode.upCd]: true } : {}, - }, - onPaginationChange: setUpCodePagination, - getCoreRowModel: getCoreRowModel(), - manualPagination: true, - getRowId: (row) => row.upCd, - }); - - const lwpoCodeTable = useReactTable({ - data: lwpoCodeList?.content ?? [], - columns: lowCodecolumns, - rowCount: lwpoCodeList?.totalElements ?? 0, - state: { - pagination: lwpoCodePagination, - rowSelection: selectedLwpoCode ? { [selectedLwpoCode.lwpoCd]: true } : {}, - }, - onPaginationChange: setLwpoCodePagination, - getCoreRowModel: getCoreRowModel(), - manualPagination: true, - getRowId: (row) => row.lwpoCd, - }); - - const lwpoCodehandleSubmit = (e: React.FormEvent) => { - e.preventDefault(); - refetchLwpoCode(); - }; - - useEffect(() => { - refetchUpCode(); - }, [upCodePagination]); - - return ( -
-
-
-
-
- - - setUpCodeQuery({ - ...upCodeQuery, - keyword: e.target.value, - }) - } - /> - -
-
-
-
-

상위코드 목록

- -
-
- -
-
-
-
-
-
- - setLwpoCodeQuery({ - ...lwpoCodeQuery, - lwpoCdNm: e.target.value - }) - } - /> - -
-
-
-
-

하위코드 목록

- -
-
- -
-
-
-
- {isManagementDialogOpen && ( - - )} - {isLwpoCodeManagementDialogOpen && ( - - )} + const [selectedUpCd, setSelectedUpCd] = useState(""); + return ( +
+
+ +
- ); - } - - export { CodePage }; - - \ No newline at end of file +
+ ); +} + +export { CodePage }; diff --git a/apps/cs/src/pages/code/ui/lowcode-dialog.tsx b/apps/cs/src/pages/code/ui/lowcode-dialog.tsx deleted file mode 100644 index 1c64c8ade..000000000 --- a/apps/cs/src/pages/code/ui/lowcode-dialog.tsx +++ /dev/null @@ -1,292 +0,0 @@ -import { useForm } from "react-hook-form"; -import { zodResolver } from "@hookform/resolvers/zod"; -import { useMutation, useQuery } from "@tanstack/react-query"; -import { useConfirm } from "@frontend-opensource/use-react-hooks"; -import { - Button, - Dialog, - DialogClose, - DialogContent, - DialogFooter, - DialogHeader, - DialogTitle, - Table, - TableBody, - TableCell, - TableHead, - TableRow, - Input, - RadioGroup, - RadioGroupItem, - Label, -} from "@common/components"; -import { Form, FormField, FormItem, FormControl } from "@/shared/ui/form"; -import { useAlertStore } from "@/shared/lib/use-alert-store"; -import { lwpoCodeApi } from "@/entities/code/api/lwpocode-service"; -import { LwpoCodeFormSchema, type LwpoCodeFormData } from "@/entities/code/model/lwpocode-interface"; -import { ENDPOINT } from "@/shared/config"; -import { upCodeApi } from "@/entities/code/api/upcode-service"; - -type ManagementLwpoCodeDialogProps = { - upCd?: string; - lwpoCd?: string; - open?: boolean; - onOpenChange?: (open: boolean) => void; - isRegistration?: boolean; -} & Omit, 'open' | 'onOpenChange'>; - -function ManagementLwpoCodeDialog({ - lwpoCd, - upCd, - open, - onOpenChange, - isRegistration = false, - ...props -}: ManagementLwpoCodeDialogProps) { - const { confirm } = useConfirm(); - const { setMessage: alert } = useAlertStore((state) => state); - - const { data: detailData } = useQuery({ - queryKey: [ENDPOINT.CMS_SERVICE.LWPO_CODE, upCd, lwpoCd], - queryFn: () => lwpoCodeApi.LwpoCodeDetail(upCd as string, lwpoCd as string), - enabled: !!upCd && !!lwpoCd && !isRegistration, - }); - - const { data: upCodeData } = useQuery({ - queryKey: [ENDPOINT.CMS_SERVICE.UP_CODE, upCd], - queryFn: () => upCodeApi.upCodeDetail(upCd as string), - enabled: !!upCd, - }); - - const { mutateAsync: saveLwpoCode } = useMutation({ - mutationFn: (data: LwpoCodeFormData) => - isRegistration ? lwpoCodeApi.createLwpoCode(data) : lwpoCodeApi.updateLwpoCode(upCd as string, lwpoCd as string, data), - onSuccess: () => { - alert(isRegistration ? "등록되었습니다." : "수정되었습니다."); - onOpenChange?.(false); - }, - }); - - const form = useForm({ - resolver: zodResolver(LwpoCodeFormSchema), - values: { - upCd: upCd ?? "", - lwpoCd: detailData?.lwpoCd ?? "", - lwpoCdNm: detailData?.lwpoCdNm ?? "", - lwpoCdExpln: detailData?.lwpoCdExpln ?? "", - useYn: detailData?.useYn ?? "Y", - delYn: "N", - unit: detailData?.unit ?? "", - prntLwpoCd: detailData?.prntLwpoCd ?? "", - sortSeq: detailData?.sortSeq ?? 0, - }, - }); - - const handleSave = async () => { - if (await confirm(isRegistration ? "등록하시겠습니까?" : "수정하시겠습니까?")) { - const data = form.getValues(); - await saveLwpoCode(data); - } - }; - - return ( - - - - {isRegistration ? "하위코드 등록" : "하위코드 관리"} - -
- { - e.preventDefault(); - handleSave(); - }} className="space-y-4"> - - - - - - - - 하위코드 - - ( - - - - - - )} - /> - - - - 하위코드명 - - ( - - - - - - )} - /> - - - - 하위코드설명 - - ( - - - - - - )} - /> - - - {upCodeData?.cdSe === "CODECLUNIT" && ( - - 단위 - - ( - - - - - - )} - /> - - - )} - {upCodeData?.cdSe === "CODECLTREE" && ( - - 상위하위코드 - - ( - - - - - - )} - /> - - - )} - - 정렬순서 - - ( - - - - - - )} - /> - - - - 사용여부 - - ( - - - -
- - -
-
- - -
- - - - )} - /> - - - -
- - - - - - -
- - - - ); -} - -export { ManagementLwpoCodeDialog }; diff --git a/apps/cs/src/pages/code/ui/lwpocode-dialog.tsx b/apps/cs/src/pages/code/ui/lwpocode-dialog.tsx new file mode 100644 index 000000000..40615c33b --- /dev/null +++ b/apps/cs/src/pages/code/ui/lwpocode-dialog.tsx @@ -0,0 +1,321 @@ +import { memo } from "react"; +import { useForm } from "react-hook-form"; +import { zodResolver } from "@hookform/resolvers/zod"; +import { useMutation, useQuery } from "@tanstack/react-query"; +import { useConfirm } from "@frontend-opensource/use-react-hooks"; +import { + Button, + Dialog, + DialogClose, + DialogContent, + DialogFooter, + DialogHeader, + DialogTitle, + Table, + TableBody, + TableCell, + TableHead, + TableRow, + Input, + RadioGroup, + RadioGroupItem, + Label, + DialogTrigger, +} from "@common/components"; +import { + UpCodeApi, + LwpoCodeApi, + LwpoCodeFormSchema, + type LwpoCodeFormData, +} from "@/entities/code"; +import { ENDPOINT } from "@/shared/config"; +import { useAlertStore } from "@/shared/lib/use-alert-store"; +import { Form, FormField, FormItem, FormControl } from "@/shared/ui/form"; + +type ManagementLwpoCodeDialogProps = { + lwpoCd?: string; + upCd?: string; + children?: React.ReactNode; + open?: boolean; + onOpenChange?: (open: boolean) => void; +}; + +const LwpoCodeManagementDialog = memo( + ({ + lwpoCd, + upCd, + children, + open, + onOpenChange, + ...props + }: ManagementLwpoCodeDialogProps) => { + const isRegistration = !lwpoCd; + + const { confirm } = useConfirm(); + const { setMessage: alert } = useAlertStore((state) => state); + + const { data: detailData } = useQuery({ + queryKey: [ENDPOINT.CMS_SERVICE.LWPO_CODE, upCd, lwpoCd], + queryFn: () => LwpoCodeApi.lwpoCodeDetail(upCd!, lwpoCd!), + enabled: !!upCd && !isRegistration, + }); + + const { data: upCodeData } = useQuery({ + queryKey: [ENDPOINT.CMS_SERVICE.UP_CODE, upCd], + queryFn: () => UpCodeApi.upCodeDetail(upCd!), + enabled: !!upCd, + }); + + const { mutateAsync: createLwpoCode } = useMutation({ + mutationFn: (data: LwpoCodeFormData) => LwpoCodeApi.createLwpoCode(data), + onSuccess: () => { + alert("등록되었습니다.", () => onOpenChange?.(false)); + }, + }); + + const { mutateAsync: updateLwpoCode } = useMutation({ + mutationFn: (data: LwpoCodeFormData) => + LwpoCodeApi.updateLwpoCode(upCd!, lwpoCd!, data), + onSuccess: () => { + alert("수정되었습니다.", () => onOpenChange?.(false)); + }, + }); + + const form = useForm({ + resolver: zodResolver(LwpoCodeFormSchema), + values: { + lwpoCd: detailData?.lwpoCd ?? "", + upCd: upCd ?? "", + lwpoCdNm: detailData?.lwpoCdNm ?? "", + lwpoCdExpln: detailData?.lwpoCdExpln ?? "", + unit: detailData?.unit ?? "", + prntLwpoCd: detailData?.prntLwpoCd ?? "", + useYn: detailData?.useYn ?? "Y", + sortSeq: detailData?.sortSeq ?? 0, + delYn: "N", + }, + }); + + const onSubmit = + (callback: (data: LwpoCodeFormData) => void) => + async (data: LwpoCodeFormData) => { + const confirmMessage = isRegistration + ? "등록하시겠습니까?" + : "수정하시겠습니까?"; + + if (await confirm(confirmMessage)) callback(data); + }; + + return ( + + {children} + + + + {isRegistration ? "하위코드 등록" : "하위코드 관리"} + + +
+ + + + + + + + + 하위코드 + + ( + + + + + + )} + /> + + + + 하위코드명 + + ( + + + + + + )} + /> + + + + 하위코드설명 + + ( + + + + + + )} + /> + + + {upCodeData?.cdSe === "CODECLUNIT" && ( + + 단위 + + ( + + + + + + )} + /> + + + )} + {upCodeData?.cdSe === "CODECLTREE" && ( + + 상위하위코드 + + ( + + + + + + )} + /> + + + )} + + 정렬순서 + + ( + + + + + + )} + /> + + + + 사용여부 + + ( + + + +
+ + +
+
+ + +
+ + + + )} + /> + + + +
+ + + + + + +
+ + + + ); + }, + (prevProps, nextProps) => { + return ( + prevProps.lwpoCd === nextProps.lwpoCd && + prevProps.upCd === nextProps.upCd && + prevProps.open === nextProps.open + ); + }, +); + +LwpoCodeManagementDialog.displayName = "LwpoCodeManagementDialog"; + +export { LwpoCodeManagementDialog }; diff --git a/apps/cs/src/pages/code/ui/lwpocode-section.tsx b/apps/cs/src/pages/code/ui/lwpocode-section.tsx new file mode 100644 index 000000000..fd1df2d8e --- /dev/null +++ b/apps/cs/src/pages/code/ui/lwpocode-section.tsx @@ -0,0 +1,98 @@ +import { useState } from "react"; +import { keepPreviousData, useQuery } from "@tanstack/react-query"; +import { + getCoreRowModel, + useReactTable, + type PaginationState, +} from "@tanstack/react-table"; +import { Button, DataTable, Input, Label } from "@common/components"; +import { LwpoCodeApi, type LwpoCodeParams } from "@/entities/code"; +import { ENDPOINT } from "@/shared/config"; +import { columns } from "../model/lwpocode-table-columns"; +import { LwpoCodeManagementDialog } from "./lwpocode-dialog"; + +type LwpoCodeSectionProps = { + upCd?: string; +}; + +function LwpoCodeSection({ upCd }: LwpoCodeSectionProps) { + const [dialogOpen, setDialogOpen] = useState(false); + const [lwpoCodeQuery, setLwpoCodeQuery] = useState({ + lwpoCdNm: "", + }); + const [pagination, setPagination] = useState({ + pageIndex: 0, + pageSize: 10, + }); + + const { data: lwpoCodeList, refetch } = useQuery({ + queryKey: [ENDPOINT.CMS_SERVICE.LWPO_CODE, upCd, pagination], + queryFn: () => + LwpoCodeApi.getLwpoCodeList({ + ...lwpoCodeQuery, + upCd, + page: pagination.pageIndex, + size: pagination.pageSize, + }), + enabled: !!upCd, + placeholderData: keepPreviousData, + }); + + const table = useReactTable({ + data: lwpoCodeList?.content ?? [], + columns, + rowCount: lwpoCodeList?.totalElements ?? 0, + state: { pagination }, + manualPagination: true, + enableMultiRowSelection: false, + getCoreRowModel: getCoreRowModel(), + onPaginationChange: setPagination, + getRowId: (row) => row.lwpoCd, + }); + + const handleSubmit = (e: React.FormEvent) => { + e.preventDefault(); + refetch(); + }; + + return ( +
+
+
+ + + setLwpoCodeQuery({ + ...lwpoCodeQuery, + lwpoCdNm: e.target.value, + }) + } + /> + +
+
+
+
+

하위코드 목록

+ + + +
+
+ +
+
+
+ ); +} + +export { LwpoCodeSection }; diff --git a/apps/cs/src/pages/code/ui/upcode-dialog.tsx b/apps/cs/src/pages/code/ui/upcode-dialog.tsx index 034ba6e56..03bd2fd0b 100644 --- a/apps/cs/src/pages/code/ui/upcode-dialog.tsx +++ b/apps/cs/src/pages/code/ui/upcode-dialog.tsx @@ -1,8 +1,8 @@ +import { memo } from "react"; import { useForm } from "react-hook-form"; import { zodResolver } from "@hookform/resolvers/zod"; import { useMutation, useQuery } from "@tanstack/react-query"; import { useConfirm } from "@frontend-opensource/use-react-hooks"; -import { ENDPOINT } from "@/shared/config"; import { Button, Dialog, @@ -20,237 +20,262 @@ import { RadioGroup, RadioGroupItem, Label, + DialogTrigger, } from "@common/components"; -import { Form, FormField, FormItem, FormControl } from "@/shared/ui/form"; -import { useAlertStore } from "@/shared/lib/use-alert-store"; -import { upCodeApi } from "@/entities/code/api/upcode-service"; -import { upCodeFormSchema, type UpCodeFormData } from "@/entities/code/model/upcode-interface"; -import { CodeSelect } from "@/entities/code"; +import { + CodeSelect, + UpCodeApi, + upCodeFormSchema, + type UpCodeFormData, +} from "@/entities/code"; import { SiteSelect } from "@/entities/site"; +import { ENDPOINT } from "@/shared/config"; +import { useAlertStore } from "@/shared/lib/use-alert-store"; +import { Form, FormField, FormItem, FormControl } from "@/shared/ui/form"; -type ManagementUpCodeDialogProps = { +type UpCodeManagementDialogProps = { upCd?: string; + children?: React.ReactNode; open?: boolean; onOpenChange?: (open: boolean) => void; - isRegistration?: boolean; -} & Omit, 'open' | 'onOpenChange'>; +}; +const UpCodeManagementDialog = memo( + ({ + upCd, + children, + open, + onOpenChange, + ...props + }: UpCodeManagementDialogProps) => { + const isRegistration = !upCd; -function ManagementUpCodeDialog({ - upCd, - open, - onOpenChange, - isRegistration = false, - ...props -}: ManagementUpCodeDialogProps) { - const { confirm } = useConfirm(); - const { setMessage: alert } = useAlertStore((state) => state); + const { confirm } = useConfirm(); + const { setMessage: alert } = useAlertStore((state) => state); - const { data: detailData } = useQuery({ - queryKey: [ENDPOINT.CMS_SERVICE.UP_CODE, upCd], - queryFn: () => upCodeApi.upCodeDetail(upCd as string), - enabled: !!upCd && !isRegistration, - }); + const { data: detailData } = useQuery({ + queryKey: [ENDPOINT.CMS_SERVICE.UP_CODE, upCd], + queryFn: () => UpCodeApi.upCodeDetail(upCd!), + enabled: !!upCd, + }); - const { mutateAsync: saveUpCode } = useMutation({ - mutationFn: (data: UpCodeFormData) => - isRegistration ? upCodeApi.createUpCode(data) : upCodeApi.updateUpCode(upCd as string, data), - onSuccess: () => { - alert(isRegistration ? "등록되었습니다." : "수정되었습니다."); - onOpenChange?.(false); - }, - }); + const { mutateAsync: createUpCode } = useMutation({ + mutationFn: (data: UpCodeFormData) => UpCodeApi.createUpCode(data), + onSuccess: () => { + alert("등록되었습니다.", () => onOpenChange?.(false)); + }, + }); - const form = useForm({ - resolver: zodResolver(upCodeFormSchema), - values: { - upCd: detailData?.upCd ?? "", - upCdNm: detailData?.upCdNm ?? "", - cdSe: detailData?.cdSe ?? "", - siteId: detailData?.siteId ?? "", - upCdExpln: detailData?.upCdExpln ?? "", - useYn: detailData?.useYn ?? "Y", - delYn: "N", - }, - }); + const { mutateAsync: updateUpCode } = useMutation({ + mutationFn: (data: UpCodeFormData) => UpCodeApi.updateUpCode(upCd!, data), + onSuccess: () => { + alert("수정되었습니다.", () => onOpenChange?.(false)); + }, + }); - const handleSave = async () => { - if (await confirm(isRegistration ? "등록하시겠습니까?" : "수정하시겠습니까?")) { - const data = form.getValues(); - await saveUpCode(data); - } - }; + const form = useForm({ + resolver: zodResolver(upCodeFormSchema), + values: { + upCd: detailData?.upCd ?? "", + upCdNm: detailData?.upCdNm ?? "", + cdSe: detailData?.cdSe ?? "", + siteId: detailData?.siteId ?? "", + upCdExpln: detailData?.upCdExpln ?? "", + useYn: detailData?.useYn ?? "Y", + delYn: "N", + }, + }); - return ( - - - - {isRegistration ? "상위코드 등록" : "상위코드 관리"} - -
- { - e.preventDefault(); - handleSave(); - }} className="space-y-4"> - - - - - - - - 상위코드 - - ( - - - - - - )} - /> - - - - 상위코드명 - - ( - - - - - - )} - /> - - - - 상위코드설명 - - ( - - - - - - )} - /> - - - - 코드구분 - - ( - - - - - - )} - /> - - - - 사이트 - - ( - - - - - - )} - /> - - - - 사용여부 - - ( - - - -
- - -
-
- - -
- - - - )} - /> - - - -
- - - - - - -
- - - - ); -} + + + + + + + + + ); + }, + (prevProps, nextProps) => { + return ( + prevProps.upCd === nextProps.upCd && prevProps.open === nextProps.open + ); + }, +); -export { ManagementUpCodeDialog }; +UpCodeManagementDialog.displayName = "UpCodeManagementDialog"; + +export { UpCodeManagementDialog }; diff --git a/apps/cs/src/pages/code/ui/upcode-section.tsx b/apps/cs/src/pages/code/ui/upcode-section.tsx new file mode 100644 index 000000000..7e3baefc9 --- /dev/null +++ b/apps/cs/src/pages/code/ui/upcode-section.tsx @@ -0,0 +1,101 @@ +import { useState } from "react"; +import { keepPreviousData, useQuery } from "@tanstack/react-query"; +import { + getCoreRowModel, + useReactTable, + type PaginationState, +} from "@tanstack/react-table"; +import { Button, DataTable, Input, Label } from "@common/components"; +import { UpCodeApi, type UpCode, type UpCodeParams } from "@/entities/code"; +import { ENDPOINT } from "@/shared/config"; +import { columns } from "../model/upcode-table-columns"; +import { UpCodeManagementDialog } from "./upcode-dialog"; + +type UpCodeSectionProps = { + handleSelectedUpCd: (upCd: string) => void; +}; + +function UpCodeSection({ handleSelectedUpCd }: UpCodeSectionProps) { + const [dialogOpen, setDialogOpen] = useState(false); + const [upCodeQuery, setUpCodeQuery] = useState({ + keyword: "", + }); + const [pagination, setPagination] = useState({ + pageIndex: 0, + pageSize: 10, + }); + + const { data: upCodeList, refetch } = useQuery({ + queryKey: [ENDPOINT.CMS_SERVICE.UP_CODE, pagination], + queryFn: () => + UpCodeApi.getUpCodeList({ + ...upCodeQuery, + page: pagination.pageIndex, + size: pagination.pageSize, + }), + placeholderData: keepPreviousData, + }); + + const table = useReactTable({ + data: upCodeList?.content ?? [], + columns, + rowCount: upCodeList?.totalElements ?? 0, + state: { pagination }, + manualPagination: true, + enableMultiRowSelection: false, + getCoreRowModel: getCoreRowModel(), + onPaginationChange: setPagination, + getRowId: (row) => row.upCd, + }); + + const handleRowClick = (row: UpCode) => { + table.setRowSelection({ [row.upCd]: true }); + handleSelectedUpCd(row.upCd); + }; + + const handleSubmit = (e: React.FormEvent) => { + e.preventDefault(); + refetch(); + }; + + return ( +
+
+
+ + + setUpCodeQuery({ + ...upCodeQuery, + keyword: e.target.value, + }) + } + /> + +
+
+
+
+

상위코드 목록

+ + + +
+
+ +
+
+
+ ); +} + +export { UpCodeSection }; diff --git a/apps/cs/src/pages/module/ui/management-authority-dialog.tsx b/apps/cs/src/pages/module/ui/management-authority-dialog.tsx index dae061340..737b12121 100644 --- a/apps/cs/src/pages/module/ui/management-authority-dialog.tsx +++ b/apps/cs/src/pages/module/ui/management-authority-dialog.tsx @@ -1,4 +1,4 @@ -import { useState } from "react"; +import { useState, memo } from "react"; import { useForm } from "react-hook-form"; import { zodResolver } from "@hookform/resolvers/zod"; import { useMutation, useQuery } from "@tanstack/react-query"; @@ -41,110 +41,117 @@ type ManagementAuthorityDialogProps = { rowData?: Authorizations; } & React.ComponentProps; -function ManagementAuthorityDialog({ - authorizationNo, - rowData, - ...props -}: ManagementAuthorityDialogProps) { - const { confirm } = useConfirm(); - const { setMessage: alert } = useAlertStore((state) => state); +const ManagementAuthorityDialog = memo( + ({ authorizationNo, rowData, ...props }: ManagementAuthorityDialogProps) => { + const { confirm } = useConfirm(); + const { setMessage: alert } = useAlertStore((state) => state); - const [isOpened, setIsOpened] = useState(false); - const [rowSelection, setRowSelection] = useState({}); + const [isOpened, setIsOpened] = useState(false); + const [rowSelection, setRowSelection] = useState({}); - const { data: roleAuthorizationList } = useQuery({ - queryKey: [ENDPOINT.USER_SERVICE.ROLE_AUTHORIZATIONS, authorizationNo], - queryFn: () => - RoleAuthorizationsApi.getRoleAuthorizationsList({ authorizationNo }), - enabled: !!authorizationNo && isOpened, - }); + const { data: roleAuthorizationList } = useQuery({ + queryKey: [ENDPOINT.USER_SERVICE.ROLE_AUTHORIZATIONS, authorizationNo], + queryFn: () => + RoleAuthorizationsApi.getRoleAuthorizationsList({ authorizationNo }), + enabled: !!authorizationNo && isOpened, + }); - const { mutateAsync: saveRoleAuthorization } = useMutation({ - mutationFn: (data: RoleAuthorizationsData) => - RoleAuthorizationsApi.createRoleAuthorizations(data), - onSuccess: () => { - alert("저장되었습니다."); - }, - }); + const { mutateAsync: saveRoleAuthorization } = useMutation({ + mutationFn: (data: RoleAuthorizationsData) => + RoleAuthorizationsApi.createRoleAuthorizations(data), + onSuccess: () => { + alert("저장되었습니다."); + }, + }); - const form = useForm({ - resolver: zodResolver(roleAuthorizationsFormSchema), - values: { - roleAuthorizations: - roleAuthorizationList?.content.map( - ({ roleId, authorizationNo, useYn }) => ({ - roleId, - authorizationNo, - authYn: useYn, - }), - ) ?? [], - }, - }); + const form = useForm({ + resolver: zodResolver(roleAuthorizationsFormSchema), + values: { + roleAuthorizations: + roleAuthorizationList?.content.map( + ({ roleId, authorizationNo, useYn }) => ({ + roleId, + authorizationNo, + authYn: useYn, + }), + ) ?? [], + }, + }); - const table = useReactTable({ - data: roleAuthorizationList?.content ?? [], - columns: createColumns(form), - state: { - rowSelection, - }, - getCoreRowModel: getCoreRowModel(), - onRowSelectionChange: setRowSelection, - }); + const table = useReactTable({ + data: roleAuthorizationList?.content ?? [], + columns: createColumns(form), + state: { + rowSelection, + }, + getCoreRowModel: getCoreRowModel(), + onRowSelectionChange: setRowSelection, + }); - const handleSave = async () => { - if (await confirm("저장하시겠습니까?")) { - const data = form.getValues("roleAuthorizations"); - await saveRoleAuthorization(data); - } - }; + const handleSave = async () => { + if (await confirm("저장하시겠습니까?")) { + const data = form.getValues("roleAuthorizations"); + await saveRoleAuthorization(data); + } + }; - return ( - - - - - - - 모듈API 권한관리 - -
- - - - API명 - 요청 메소드 - API URL - - - - - - {rowData?.authorizationName} - - {rowData?.httpMethodCode} - {rowData?.urlPatternValue} - - -
-
- -
-
- - - - - - - - - ); -} + + + + + + + ); + }, + (prevProps, nextProps) => { + return prevProps.authorizationNo === nextProps.authorizationNo; + }, +); + +ManagementAuthorityDialog.displayName = "ManagementAuthorityDialog"; export { ManagementAuthorityDialog }; diff --git a/packages/common/assets/src/styles/base.css b/packages/common/assets/src/styles/base.css index 7fc103b43..006382076 100644 --- a/packages/common/assets/src/styles/base.css +++ b/packages/common/assets/src/styles/base.css @@ -12,6 +12,7 @@ --popover-foreground: #0a0a0a; --primary: #2094fa; --primary-foreground: #fafafa; + --primary-transparent: rgba(32, 148, 250, 0.1); --secondary: #f5f5f5; --secondary-foreground: #0f1e33; --muted: #f5f5f5; @@ -54,6 +55,7 @@ --popover-foreground: #fafafa; --primary: #2094fa; --primary-foreground: #171717; + --primary-transparent: rgba(32, 148, 250, 0.1); --secondary: #262626; --secondary-foreground: #fafafa; --muted: #262626; diff --git a/packages/common/components/src/ui/data-table/index.tsx b/packages/common/components/src/ui/data-table/index.tsx index 2b9879879..82492cd66 100644 --- a/packages/common/components/src/ui/data-table/index.tsx +++ b/packages/common/components/src/ui/data-table/index.tsx @@ -42,22 +42,31 @@ function DataTable({ - {table.getRowModel().rows.map((row) => ( - onRowClick?.(row.original)} - className={cn(onRowClick && "cursor-pointer hover:bg-accent")} - > - {row.getVisibleCells().map((cell) => { - const { meta } = cell.column.columnDef; - return ( - - {flexRender(cell.column.columnDef.cell, cell.getContext())} - - ); - })} - - ))} + {table.getRowModel().rows.map((row) => { + const isSelectedRow = row.getIsSelected(); + return ( + onRowClick?.(row.original)} + className={cn( + onRowClick && "cursor-pointer hover:bg-accent", + isSelectedRow && "!bg-primary-transparent", + )} + > + {row.getVisibleCells().map((cell) => { + const { meta } = cell.column.columnDef; + return ( + + {flexRender( + cell.column.columnDef.cell, + cell.getContext(), + )} + + ); + })} + + ); + })}
{viewPagination && } diff --git a/tailwind.config.preset.ts b/tailwind.config.preset.ts index 5e59ebb5b..4637a88a0 100644 --- a/tailwind.config.preset.ts +++ b/tailwind.config.preset.ts @@ -21,6 +21,7 @@ export default { primary: { DEFAULT: "var(--primary)", foreground: "var(--primary-foreground)", + transparent: "var(--primary-transparent)", }, secondary: { DEFAULT: "var(--secondary)",