feat: SELECTBOX 컴포넌트 hidden props 추가로 placeholder 기능 구현

packages/common/business_components/src/ui/select/index.tsx

@@ -5,7 +5,8 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from ".
 /** 차트 기본 스타일 */
 interface SelectBox1 {
   text:string,
-  val:string|number
+  val:string|number,
+  hidden?: boolean
 }
 
 const SelectBox = React.forwardRef<
@@ -20,17 +21,27 @@ const SelectBox = React.forwardRef<
     readOnly?: boolean // readOnly 속성 추가
   }
 >(({ label, className, selectClass, selectArray, onSelectValue, value, readOnly = false }, ref)=>{
-  const placeHolder = selectArray?.[0]?.text ?? "";
+  // 첫 번째 항목을 placeholder로 사용하고 드롭다운 목록에서는 제외
+  const firstItem = selectArray[0];
+  const placeHolder = firstItem?.text ?? "";
+  
+  // 첫 번째 항목(placeholder)을 제외한 나머지 항목만 드롭다운에 표시
+  const visibleItems = selectArray.filter((_, index) => index !== 0);
+
+  // 현재 값이 첫 번째 항목(placeholder)인 경우 undefined로 설정하여 placeholder가 표시되도록 함
+  const currentValue = value !== undefined && String(value) === String(firstItem?.val) 
+    ? undefined 
+    : (value !== undefined ? String(value) : undefined);
 
   return (
     <div className={className+" flex items-center"} ref={ref}>
       {label && <Label className="whitespace-nowrap w-20 text-xl text-gray-600">{label}</Label>}
-      <Select onValueChange={onSelectValue} value={value !== undefined ? String(value) : undefined}>
+      <Select onValueChange={onSelectValue} value={currentValue} disabled={readOnly}>
         <SelectTrigger className={selectClass?selectClass:"flex-1 p-2 border rounded"}>
           <SelectValue placeholder={placeHolder} />
         </SelectTrigger>
         <SelectContent>
-          {selectArray.map((selectArray) => (
+          {visibleItems.map((selectArray) => (
             <SelectItem key={selectArray.val} value={String(selectArray.val)}>{selectArray.text}</SelectItem>
           ))}
         </SelectContent>