메인영역 및 검색영역 스타일 지정 중

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

@@ -9,4 +9,5 @@ export * from "./search_input";
 export * from "./search_input_select";
 export * from "./select";
 export * from "./table";
-
+export * from "./main_content_div";
+export * from "./title";

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

@@ -0,0 +1,11 @@
+import React from 'react'
+
+export default function MainContentDiv(props: {children: React.ReactNode}) {
+  return (
+    <div className="min-h-screen bg-gray-50 p-8">
+        {props.children}
+    </div>
+  )
+}
+
+export { MainContentDiv };

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

@@ -1,6 +1,6 @@
 function SearchDiv ({children}:{ children: React.ReactNode; }) {
    return (
-      <div className="flex border border-black m-4 rounded-lg min-h-[80px]">
+      <div className="flex bg-white rounded-lg shadow-sm mb-6 p-6">
         {children}   
       </div>
     )

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

@@ -7,9 +7,9 @@ const SearchInput = React.forwardRef<HTMLInputElement, {className:string, label:
     }
 
     return (
-        <div className={className+" flex"} >
-            {label && <Label className="m-4 text-2xl w-1/4">{label}</Label>}
-            <Input className="ml-8 w-3/4 text-lg" value={textValue} onChange={changeText}></Input>
+        <div className={className+" flex items-center"} >
+            {label && <Label className="w-20 text-base text-gray-600">{label}</Label>}
+            <Input className="flex-1 h-10 p-2 border rounded" value={textValue} onChange={changeText}></Input>
         </div>
     )
 });

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

@@ -24,9 +24,9 @@ const SearchInputSelect = React.forwardRef<HTMLInputElement, {className:string,
 
     return (
         <div className={className+" flex items-center"} >
-            {label && <Label className="m-4 text-2xl w-1/4">{label}</Label>}
+            {label && <Label className="w-20 text-base text-gray-600">{label}</Label>}
             <div className="flex w-full items-center">
-                <Input className="w-2/3 text-lg" value={textValue} onChange={changeText} />
+                <Input className="w-2/3 text-lg h-10 p-2 border rounded" value={textValue} onChange={changeText} />
                 <Select onValueChange={onSelectValue} value={selectValue}>
                     <SelectTrigger className="ml-2 w-1/3 text-lg" >
                     <SelectValue placeholder={selectData?.[0]?.text ?? ""} />

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

@@ -23,9 +23,9 @@ const SelectBox = React.forwardRef<
 
   return (
     <div className={className+" flex items-center"} ref={ref}>
-      {label && <Label className="m-4 text-2xl w-1/4">{label}</Label>}
+      {label && <Label className="w-20 text-base text-gray-600">{label}</Label>}
       <Select onValueChange={onSelectValue} value={value}>
-        <SelectTrigger className={selectClass?selectClass:"ml-8 w-3/4 text-2xl"}>
+        <SelectTrigger className={selectClass?selectClass:"flex-1 p-2 border rounded"}>
           <SelectValue placeholder={placeHolder} />
         </SelectTrigger>
         <SelectContent>

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

@@ -24,20 +24,19 @@ export function UiTable({ tableData, headlist, pageSize, total, children, headNa
       {headName ? <div className="font-bold m-3">
           {headName}
         </div> : <></>}
-      <Table>
+      <Table className="w-full">
         <TableHeader>
           {children ? <>{children}</> : <TableRow>
             {headlist?.map((head) => (
               <TableHead key={head.id}>{head.title}</TableHead>
             ))}
           </TableRow>}
-
         </TableHeader>
         <TableBody className='text-center'>
           {tableData?.map((el: { [key: string]: string | number | boolean }, index) => (
             <TableRow key={index + "row"} >
               {headlist.map((head) => (
-                <TableCell onClick={()=>cellClick(index)} key={head.id + index}>{el[head.id]}</TableCell>
+                <TableCell className="cursor-pointer" onClick={()=>cellClick(index)} key={head.id + index}>{el[head.id]}</TableCell>
               ))}
             </TableRow>
           ))}

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

@@ -0,0 +1,9 @@
+import React from 'react'
+
+function Title(props: {title: string}) {
+  return (
+    <h1 className="text-2xl font-bold mb-6">{props.title}</h1>
+  )
+}
+
+export { Title };