search bar에 값 입력하는 형태로 component 구현.

packages/common/business_components/src/ui/index.ts

@@ -2,5 +2,8 @@ export * from "./chart";
 export * from "./file-upload";
 export * from "./form";
 export * from "./search_form";
+export * from "./search_input";
+export * from "./search_input_select";
 export * from "./select";
 export * from "./table";
+

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

@@ -0,0 +1,16 @@
+import { Input, Label } from "@common/components";
+import React from "react";
+
+const SearchInput = React.forwardRef<
+    HTMLDivElement& HTMLInputElement,
+    React.HTMLAttributes<HTMLDivElement> & {className:string, label:string}>
+(({className, label}, ref) => {
+    console.log(ref);
+    return (
+        <div className={className+" flex"} >
+            {label && <Label className="m-4 text-lg w-1/4">{label}</Label>}
+            <Input className="ml-8 w-3/4 text-lg" ref={ref}></Input>
+        </div>
+    )
+});
+export { SearchInput };

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

@@ -0,0 +1,38 @@
+import { Input, Label } from "@common/components";
+import React from "react";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../select/lib/selectBox";
+export type SelectDataType = {
+    text: string;
+    val: string;
+}
+/**
+ * 검색 입력 및 선택 컴포넌트
+ * @param className - string tailwindcss class
+ * @param label - string label
+ * @param selectData - SelectDataType[] 선택 데이터
+ * @param onSelectValue - (val:string)=>void 선택 값 콜백
+ * @param refs - React.forwardRef<HTMLInputElement> | null 입력값 ref
+ * @returns React.FC
+ */
+const SearchInputSelect = React.forwardRef<HTMLInputElement, {className:string, label:string, selectData: SelectDataType[], onSelectValue:(val:string)=>void}>(({className, label, selectData, onSelectValue}, refs) => {
+    return (
+        <div className={className+" flex items-center"} >
+            {label && <Label className="m-4 text-lg w-1/4">{label}</Label>}
+            <div className="flex w-full items-center">
+                <Input className="w-2/3 text-lg" ref={refs}/>
+                <Select onValueChange={onSelectValue}>
+                    <SelectTrigger className="ml-2 w-1/3 text-lg" >
+                    <SelectValue placeholder={selectData?.[0]?.text ?? ""} />
+                    </SelectTrigger>
+                    {/* <SelectContent ref={refs ? (refs as unknown as RefType)?.selectValue : null}> */}
+                    <SelectContent >
+                    {selectData.map((selectArray) => (
+                        <SelectItem key={selectArray.val} value={selectArray.val}>{selectArray.text}</SelectItem>
+                    ))}
+                    </SelectContent>
+                </Select>
+            </div>
+        </div>
+    )
+});
+export { SearchInputSelect };

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

@@ -16,10 +16,10 @@ const SelectBox = React.forwardRef<
   const placeHolder = selectArray?.[0]?.text ?? "";
 
   return (
-    <div className={className+" flex"} ref={ref}>
-      {label && <Label className="m-4 text-xs w-1/4">{label}</Label>}
+    <div className={className+" flex items-center"} ref={ref}>
+      {label && <Label className="m-4 text-lg w-1/4">{label}</Label>}
       <Select>
-        <SelectTrigger className="ml-8 flex w-3/4">
+        <SelectTrigger className="ml-8 w-3/4 text-lg">
           <SelectValue placeholder={placeHolder} />
         </SelectTrigger>
         <SelectContent>