diff --git a/packages/common/business_components/src/ui/chart/BarChart.tsx b/packages/common/business_components/src/ui/chart/BarChart.tsx index 02d3a7c60..ddd0ac272 100644 --- a/packages/common/business_components/src/ui/chart/BarChart.tsx +++ b/packages/common/business_components/src/ui/chart/BarChart.tsx @@ -74,17 +74,25 @@ const CustomLegend = (props: any) => { ); }; +// chartData의 모든 값 중 최대값 구하기 +const getGlobalMax = (data: Record[]) => { + if (!data || data.length === 0) return 0; + return Math.max( + ...data.flatMap(item => + Object.entries(item) + .filter(([key]) => key !== 'label') + .map(([, value]) => value as number) + ) + ); +}; + export default function Chart({chartConfig=undefined, chartData=[], chartTitle='차트', chartClassName='w-full h-full', graphSize=40, yFieldText='', showLegend=false} : BarChartProps) { const colors = ["#FF6B6B", "#4ECDC4", "#45B7D1", "#FED16A", "#FFEEAD", "#D4A5A5"]; - const getMaxValue = (data: any[], keyPrefix: string) => { - return Math.max(...data.map(item => - Object.keys(item) - .filter(key => key.includes(keyPrefix)) - .map(key => item[key]) - ).flat()); - }; - - const barMaxValue = getMaxValue(chartData, 'barVal'); + const globalMax = getGlobalMax(chartData); + const tickCount = 5; + // interval을 globalMax / tickCount로 계산 + const interval = globalMax / tickCount; + const ticks = Array.from({ length: tickCount + 1 }, (_, i) => Math.round(interval * i)); return ( <> {chartTitle && chartTitle !== "" && chartTitle !== "undefined" ? ( @@ -93,8 +101,8 @@ export default function Chart({chartConfig=undefined, chartData=[], chartTitle=' ): null}
- - + + }/> {chartData && chartData.length > 0 && ( diff --git a/packages/common/business_components/src/ui/date_picker/index.tsx b/packages/common/business_components/src/ui/date_picker/index.tsx index 9df32b3b5..722b82a3c 100644 --- a/packages/common/business_components/src/ui/date_picker/index.tsx +++ b/packages/common/business_components/src/ui/date_picker/index.tsx @@ -6,62 +6,100 @@ import { format } from "date-fns"; import { CalendarIcon } from "lucide-react"; import type { DayPickerSingleProps } from "react-day-picker"; -import { Button, Calendar, Popover, PopoverContent, PopoverTrigger } from "@common/components/ui"; +import { + Button, + Calendar, + Popover, + PopoverContent, + PopoverTrigger, +} from "@common/components/ui"; import { cn } from "../../lib/utils"; import { FormControl } from "../form"; import { ko } from "date-fns/locale"; import { useState } from "react"; -type DatePickerProps = DayPickerSingleProps & { field: { value: Date; onChange: (date: Date | undefined) => void }, selectClass: string | undefined, readOnly?: boolean }; +type DatePickerProps = DayPickerSingleProps & { + field: { value: Date; onChange: (date: Date | undefined) => void }; + selectClass: string | undefined; + readOnly?: boolean; +}; +export function DatePicker({ + field, + selectClass, + readOnly = false, + ...props +}: DatePickerProps) { + const [open, setOpen] = useState(false); -export function DatePicker({ field, selectClass, readOnly = false, ...props }: DatePickerProps) { - const [open, setOpen] = useState(false); + const handleSelect = (date: Date | undefined) => { + if (!readOnly) { + // readOnly가 아닐 때만 변경 허용 + field.onChange(date); // React Hook Form 업데이트 + setOpen(false); + } + }; - const handleSelect = (date: Date | undefined) => { - if (!readOnly) { // readOnly가 아닐 때만 변경 허용 - field.onChange(date); // React Hook Form 업데이트 - setOpen(false); - } - }; + return ( + + + + - - - - - - - ); + "PPP", + { locale: ko }, + ) + ) : ( + 날짜를 선택해주세요 + )} + + + + + + + + + ); } diff --git a/packages/common/business_components/src/ui/date_picker_range/index.tsx b/packages/common/business_components/src/ui/date_picker_range/index.tsx new file mode 100644 index 000000000..70565230a --- /dev/null +++ b/packages/common/business_components/src/ui/date_picker_range/index.tsx @@ -0,0 +1,46 @@ +import "../date_picker/date-picker.css"; + +import { format } from "date-fns"; +import { CalendarIcon } from "lucide-react"; +import type { DayPickerSingleProps } from "react-day-picker"; + +import { cn } from "../../lib/utils"; +import { Button } from "@common/components/ui"; +import { Calendar } from "@common/components/ui"; +import { Popover, PopoverContent, PopoverTrigger } from "@common/components/ui"; + +type DatePickerRangeProps = { + placeholder?: string; + disabled?: boolean | ((date: Date) => boolean); +} & DayPickerSingleProps; + +export function DatePickerRange({ + className, + placeholder = "날짜 선택", + disabled, + ...props +}: DatePickerRangeProps) { + return ( + + + + + + + + + ); +} diff --git a/packages/common/business_components/src/ui/index.ts b/packages/common/business_components/src/ui/index.ts index fd1e6fe9e..eab3a7eab 100644 --- a/packages/common/business_components/src/ui/index.ts +++ b/packages/common/business_components/src/ui/index.ts @@ -21,4 +21,5 @@ export * from "./table_div"; export * from "./title"; export * from "./sdmInsertForm"; export * from "./popover_ui"; -export * from "./date_month_picker"; \ No newline at end of file +export * from "./date_month_picker"; +export * from "./date_picker_range" \ No newline at end of file diff --git a/packages/common/business_components/src/ui/search_form_left/index.tsx b/packages/common/business_components/src/ui/search_form_left/index.tsx index 4f36c078c..a891ec207 100644 --- a/packages/common/business_components/src/ui/search_form_left/index.tsx +++ b/packages/common/business_components/src/ui/search_form_left/index.tsx @@ -301,7 +301,7 @@ function SearchFormLeft({ isShowPart = false, children, selectSidoData = [], sel resetAllValues(); // 리셋 후 트리거를 false로 설정 if (setRtnPartValue) { - setRtnPartValue('0'); + setRtnPartValue('A'); } } }, [resetTrigger]); diff --git a/packages/common/business_components/src/ui/select/index.tsx b/packages/common/business_components/src/ui/select/index.tsx index 8843aa04e..d09e3023a 100644 --- a/packages/common/business_components/src/ui/select/index.tsx +++ b/packages/common/business_components/src/ui/select/index.tsx @@ -1,57 +1,103 @@ // selectBox import { Label } from "@common/components"; -import React from "react"; -import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./lib/selectBox"; +import React, { useEffect, useState } from "react"; +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from "./lib/selectBox"; /** 차트 기본 스타일 */ interface SelectBox1 { - text:string, - val:string|number, - hidden?: boolean + text: string; + val: string | number; + hidden?: boolean; } const SelectBox = React.forwardRef< HTMLDivElement, React.HTMLAttributes & { - label:string, - selectClass:string|undefined, - className:string, - selectArray:SelectBox1[], - onSelectValue:(val:string|number)=>void, - value?: string|number, - readOnly?: boolean // readOnly 속성 추가 + label: string; + selectClass: string | undefined; + className: string; + selectArray: SelectBox1[]; + onSelectValue: (val: string | number) => void; + value?: string | number; + readOnly?: boolean; // readOnly 속성 추가 } ->(({ label, className, selectClass, selectArray, onSelectValue, value, readOnly = false }, ref)=>{ - // hidden이 true인 첫 번째 항목을 placeholder로 사용 - const hiddenItem = selectArray.find(item => item.hidden); - const placeHolder = hiddenItem?.text ?? "선택"; - - // hidden이 true인 항목만 드롭다운에서 제외 - const visibleItems = selectArray.filter(item => !item.hidden); +>( + ( + { + label, + className, + selectClass, + selectArray, + onSelectValue, + value, + readOnly = false, + }, + ref, + ) => { + // hidden이 true인 첫 번째 항목을 placeholder로 사용 + const hiddenItem = selectArray.find((item) => item.hidden); + const placeHolder = hiddenItem?.text ?? "선택"; + const [isOpen, setIsOpen] = useState(false); + // hidden이 true인 항목만 드롭다운에서 제외 + const visibleItems = selectArray.filter((item) => !item.hidden); - // 현재 값이 hidden 항목이거나 빈 값인 경우 undefined로 설정하여 placeholder가 표시되도록 함 - const currentValue = value !== undefined && - hiddenItem && - (String(value) === String(hiddenItem.val) || value === "" || value === "0" || value === 0) - ? undefined - : (value !== undefined ? String(value) : undefined); + // 현재 값이 hidden 항목이거나 빈 값인 경우 undefined로 설정하여 placeholder가 표시되도록 함 + const currentValue = + value !== undefined && + hiddenItem && + (String(value) === String(hiddenItem.val) || + value === "" || + value === "0" || + value === 0) + ? undefined + : value !== undefined + ? String(value) + : undefined; - return ( -
- {label && } - -
- ) -}) + return ( +
+ {label && ( + + )} + +
+ ); + }, +); export { SelectBox };