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/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 };