From 87031def3c7d77e5867290ceffd1b228edcdba31 Mon Sep 17 00:00:00 2001
From: truthwing <truthplumage@gmail.com>
Date: Fri, 7 Mar 2025 18:11:26 +0900
Subject: [PATCH] =?UTF-8?q?searchbar=20=EA=B5=AC=EC=A1=B0=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/common/business_components/README.md | 17 ++++++++--
 .../src/ui/search_form/index.tsx              | 14 +-------
 .../src/ui/select/index.tsx                   | 32 ++++++++-----------
 3 files changed, 28 insertions(+), 35 deletions(-)

diff --git a/packages/common/business_components/README.md b/packages/common/business_components/README.md
index 597f49a5c..670a8ac47 100644
--- a/packages/common/business_components/README.md
+++ b/packages/common/business_components/README.md
@@ -1,6 +1,6 @@
 ## business_components 패키지
 ### 원앤올에서 제공받는 컴포넌트 외에 업무 파트에서 사용할 수 있는 별도 components 패키지지
-&emsp; 1) 설정
+&emsp; 1) 환경설정
 
 &emsp; &emsp; (1) tsconfig.json 'path'에 '@common/business_components' 변수를 추가
 ```json
@@ -8,7 +8,7 @@
   "@/*": ["./*"],
   "@common/components/*": ["../../packages/common/components/src/*"],
   "@common/components": ["../../packages/common/components/src/index"],
-  // 작성구문문
+  //아래에 해당하는 부분을 추가해줘야함.
   "@common/business_components/*": ["../../packages/common/business_components/src/*"],
   "@common/business_components": ["../../packages/common/business_components/src/index"]
 }
@@ -19,4 +19,15 @@
   "@common/business_components": "workspace:*",
   "next": "15.1.7"
 },
-```
\ No newline at end of file
+```
+
+&emsp; &emsp; (3) tailwind.config.ts 추가
+``` json
+content: [
+  "./app/**/*.{js,ts,jsx,tsx,mdx}",
+  "../../packages/common/components/src/ui/**/*.{js,ts,jsx,tsx,mdx}",
+  //아래에 해당하는 부분을 추가해줘야함.
+  "../../packages/common/business_components/src/ui/**/*.{js,ts,jsx,tsx,mdx}",
+],
+```
+
diff --git a/packages/common/business_components/src/ui/search_form/index.tsx b/packages/common/business_components/src/ui/search_form/index.tsx
index 13391dc01..45444a68f 100644
--- a/packages/common/business_components/src/ui/search_form/index.tsx
+++ b/packages/common/business_components/src/ui/search_form/index.tsx
@@ -1,18 +1,6 @@
-/**
- *  검색영역 스타일 
- */
-const styles = {
-    divStyle : {
-      border: '1px solid black',
-      margin: '1rem',
-      display: 'flex',
-      borderRadius: '1rem'
-    } as React.CSSProperties
-}
-
 function SearchDiv ({children}:{ children: React.ReactNode; }) {
    return (
-      <div style={styles.divStyle}>
+      <div className="flex border border-black m-4 rounded-lg">
         {children}   
       </div>
     )
diff --git a/packages/common/business_components/src/ui/select/index.tsx b/packages/common/business_components/src/ui/select/index.tsx
index 370ee52e8..d1adbb970 100644
--- a/packages/common/business_components/src/ui/select/index.tsx
+++ b/packages/common/business_components/src/ui/select/index.tsx
@@ -1,41 +1,35 @@
 import { Label } from "@common/components";
+import React from "react";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./lib/selectBox";
 
 /** 차트 기본 스타일 */
-const styles = {
-    selectBoxDiv : {
-      marginLeft : '2rem',
-      display : 'flex'
-    } as React.CSSProperties,
-    labelStyle : {
-      margin:'0.8rem 0.8rem 0.8rem 1rem',
-      fontSize: '10px',
-    } as React.CSSProperties
-}
-
 interface SelectBox1 {
   text:string,
   val:string
 }
 
-function SelectBox(props: {label : string, selectArray: SelectBox1[], styleClassName : string, styleSelect : React.CSSProperties}){
-  const placeHolder = props.selectArray?.[0]?.text ?? "";
+
+const SelectBox = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & {label:string, className:string, selectArray:SelectBox1[]}
+>(({ label, className, selectArray }, ref)=>{
+  const placeHolder = selectArray?.[0]?.text ?? "";
 
   return (
-    <div className={props.styleClassName+" flex"} >
-      {props.label && <Label style={styles.labelStyle}>{props.label}</Label>}
+    <div className={className+" flex"} ref={ref}>
+      {label && <Label className="m-4 text-xs w-1/4">{label}</Label>}
       <Select>
-        <SelectTrigger style={props.styleSelect} className="">
+        <SelectTrigger className="ml-8 flex w-3/4">
           <SelectValue placeholder={placeHolder} />
         </SelectTrigger>
         <SelectContent>
-          {props.selectArray.map((selectArray) => (
+          {selectArray.map((selectArray) => (
             <SelectItem key={selectArray.val} value={selectArray.val}>{selectArray.text}</SelectItem>
           ))}
         </SelectContent>
       </Select>
     </div>
   )  
-}
+})
 
-export { SelectBox };
\ No newline at end of file
+export { SelectBox };