From 021a282655faeed591782329d0971d8d46c64e4b Mon Sep 17 00:00:00 2001
From: truthwing <truthplumage@gmail.com>
Date: Mon, 10 Mar 2025 13:26:39 +0900
Subject: [PATCH] =?UTF-8?q?search=20bar=EC=97=90=20=EA=B0=92=20=EC=9E=85?=
 =?UTF-8?q?=EB=A0=A5=ED=95=98=EB=8A=94=20=ED=98=95=ED=83=9C=EB=A1=9C=20com?=
 =?UTF-8?q?ponent=20=EA=B5=AC=ED=98=84.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../business_components/src/ui/index.ts       |  3 ++
 .../src/ui/search_input/index.tsx             | 16 ++++++++
 .../src/ui/search_input_select/index.tsx      | 38 +++++++++++++++++++
 .../src/ui/select/index.tsx                   |  6 +--
 4 files changed, 60 insertions(+), 3 deletions(-)
 create mode 100644 packages/common/business_components/src/ui/search_input/index.tsx
 create mode 100644 packages/common/business_components/src/ui/search_input_select/index.tsx

diff --git a/packages/common/business_components/src/ui/index.ts b/packages/common/business_components/src/ui/index.ts
index 1876f2b50..6bf01157c 100644
--- a/packages/common/business_components/src/ui/index.ts
+++ b/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";
+
diff --git a/packages/common/business_components/src/ui/search_input/index.tsx b/packages/common/business_components/src/ui/search_input/index.tsx
new file mode 100644
index 000000000..f933428fc
--- /dev/null
+++ b/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 };
diff --git a/packages/common/business_components/src/ui/search_input_select/index.tsx b/packages/common/business_components/src/ui/search_input_select/index.tsx
new file mode 100644
index 000000000..b00615e4b
--- /dev/null
+++ b/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 };
diff --git a/packages/common/business_components/src/ui/select/index.tsx b/packages/common/business_components/src/ui/select/index.tsx
index d1adbb970..dd92774fe 100644
--- a/packages/common/business_components/src/ui/select/index.tsx
+++ b/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>