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

Merge commit 'e5265a10d0b9d2f7df9aa53e1d482deb821ba4e7' into iipbs/wr/main_merge

Browse Source
This commit is contained in:
truthwing
2025-03-17 17:54:40 +09:00
parent c7039294c9 e5265a10d0
commit 0b9b5bd22c
3 changed files with 120 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/common/business_components/src/form.md
+93
View File
@@ -0,0 +1,93 @@
## form 모듈
### 공통 모듈 중 chart를 다양한 테마로 적용시킬 수 있도록 해주는 모듈
  1. 폼 모듈 사용법
    1-1) 패키지 사용법
      (1) zod 사용법
https://zod.dev/?id=introduction
    1-2) 호출방법
      (1) form에 필요한 Form,FormField,useForm useForm,z, zodResolver import
```js
import {
Form,
FormField,
SelectBox,
} from "@common/business_components/ui";
import { Input } from "@common/components/ui";
import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
import { z } from "zod";
import { FormUi } from "@common/business_components";
```
      (2)zod 정의
```js
const formSchema = z.object({
facilityName: z.string().min(2).max(50),
instlCmptnDt:z.string(), // FormField 내 name의 타입및 min max 구성 가능
});
const form = useForm<z.infer<typeof formSchema>>({
resolver: zodResolver(formSchema),
//초기값 세팅 z.object에 등록한 값은 반드시 세팅해야함.
defaultValues: {
facilityName :'',
instlCmptnDt:'', //
},
});
function onSubmit(values: z.infer<typeof formSchema>) {
// form submit 함수
console.log(values);// zod.object에 등록하고 form에 구현한 값이 출력됨.
}
```
&emsp; &emsp; &emsp; (3) form구성
```js
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)}>
<div className="col-span-3 pl-6" >
<FormField
control={form.control}
name="grntchCstSprtYn" //zodobject에 등록한 값 삽입
render={({ field }) => (
// zod에 등록된 name 값의 폼 객체 생성
//select box 삽입시
<FormUi label="인증여부">
<SelectBox className={""} selectClass={selectClass} label={""} selectArray={rain.selectYN} onSelectValue={onSelectValue} {...field}/>
</FormUi>
)}
/>
</div>
<div className="col-span-3" >
<FormField
control={form.control}
name="grntchBdstCertYr"
render={({ field }) => (
// zod에 등록된 name 값의 폼 객체 생성
//input 삽입시
<FormUi label="인증년도">
<Input className="" placeholder="2024" type="" {...field} />
</FormUi>
)}
/>
</div>
</form>
</Form>
```
packages/common/business_components/src/ui/chart/LineChart.tsx
+23 -4
View File
@@ -76,7 +76,24 @@ const CustomLegend = (props: any) => {
);
};
export default function Linechart(props: { chartConfig: ChartConfig; chartData: any[] | undefined; chartTitle:string}) {
type DataType = {label : string; val:number};
type ChartDataType = {
chartData1: DataType[];
chartData2: DataType[];
};
export default function Linechart(props: { chartConfig: ChartConfig; chartData: ChartDataType; chartTitle:string}) {
const mergedData = Object.values(props.chartData).reduce((acc, dataset) => {
dataset.forEach((entry, index) => {
if (!acc[index]) {
acc[index] = { label: entry.label }; // label 추가
}
const key = Object.keys(props.chartData).find(k => props.chartData[k] === dataset);
if (key) acc[index][key] = entry.val;
});
return acc;
}, [] as any[]);
return (
<Card className="h-full">
<CardContent className="h-full">
@@ -86,13 +103,15 @@ export default function Linechart(props: { chartConfig: ChartConfig; chartData:
</div>): null}
<div className="h-[calc(100%-42px)] flex justify-center">
<ChartContainer config={props.chartConfig} className="h-full w-full">
<LineChart data={props.chartData} className="h-full">
<CartesianGrid vertical={false} />
<LineChart data={mergedData} className="h-full">
<CartesianGrid vertical={false} />
<XAxis dataKey="label" fontSize="8px" fontWeight="bold"/>
<YAxis yAxisId="left" orientation="left" />
<Tooltip content={<CustomTooltip active={undefined} payload={undefined} label={undefined} />} />
<Legend content={CustomLegend}/>
<Line yAxisId="left" dataKey="val" type="linear" strokeWidth={2} dot={false} name="값"/>
{Object.keys(props.chartData).map((key, index) => (
<Line key={key} yAxisId="left" dataKey={key} type="linear" strokeWidth={2} dot={false} name={key} />
))}
</LineChart>
</ChartContainer>
</div>
packages/common/business_components/src/ui/table/index.tsx
+4 -6
View File
@@ -1,7 +1,6 @@
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@common/components";
import UiPageNations from "./uiPageNations";
type UiTableProps = {
headName: React.ReactNode | undefined;
tableData: { [key: string]: string | number | boolean }[];
@@ -9,14 +8,15 @@ type UiTableProps = {
pageSize: number;
total: number;
children: React.ReactNode | undefined;
cellClick : (index:number)=>void | undefined;
}
type UiHeadProps = {
id: string;
title: string;
}
export function UiTable({ tableData, headlist, pageSize, total, children, headName }: UiTableProps) {
export function UiTable({ tableData, headlist, pageSize, total, children, headName, cellClick }: UiTableProps) {
const cur = 1;
return (
@@ -35,13 +35,11 @@ export function UiTable({ tableData, headlist, pageSize, total, children, headNa
{tableData?.map((el: { [key: string]: string | number | boolean }, index) => (
<TableRow key={index + "row"} >
{headlist.map((head) => (
<TableCell key={head.id + index}>{el[head.id]}</TableCell>
<TableCell onClick={()=>cellClick(index)} key={head.id + index}>{el[head.id]}</TableCell>
))}
</TableRow>
))}
</TableBody>
</Table>
{total <= 0 ? <></> : <UiPageNations total={total} cur={cur} pageSize={pageSize} />}
</>