packages/common/business_components/README.md

@@ -1,6 +1,6 @@
 ## business_components 패키지
 ### 원앤올에서 제공받는 컴포넌트 외에 업무 파트에서 사용할 수 있는 별도 components 패키지지
-  1) 설정
+  1) 환경설정
 
     (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"
 },
-```
+```
+
+    (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}",
+],
+```
+

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>
     )

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 };
+export { SelectBox };