Merge remote-tracking branch 'origin/iipbs/common/main' into iipbs/wr/dev

packages/common/business_components/package.json

@@ -28,6 +28,7 @@
     "@common/components": "workspace:*",
     "@hookform/resolvers": "^4.1.3",
     "@radix-ui/react-label": "^2.1.2",
+    "@radix-ui/react-scroll-area": "^1.2.3",
     "@radix-ui/react-select": "^2.1.6",
     "@radix-ui/react-slot": "^1.1.2",
     "class-variance-authority": "^0.7.1",

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";
+export * from "./scroll"

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

@@ -0,0 +1,46 @@
+import * as React from "react"
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+
+import { cn } from "@/lib/utils"
+
+const ScrollArea = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root
+    ref={ref}
+    className={cn("relative overflow-hidden", className)}
+    {...props}
+  >
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+      {children}
+    </ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+))
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
+
+const ScrollBar = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = "vertical", ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      "flex touch-none select-none transition-colors",
+      orientation === "vertical" &&
+        "h-full w-2.5 border-l border-l-transparent p-[1px]",
+      orientation === "horizontal" &&
+        "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+      className
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+))
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
+
+export { ScrollArea, ScrollBar }

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

@@ -11,15 +11,15 @@ interface SelectBox1 {
 
 const SelectBox = React.forwardRef<
   HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement> & {label:string, className:string, selectArray:SelectBox1[]}
->(({ label, className, selectArray }, ref)=>{
+  React.HTMLAttributes<HTMLDivElement> & {label:string, className:string, selectArray:SelectBox1[], onSelectValue:(val:string)=>void}
+>(({ label, className, selectArray, onSelectValue }, ref)=>{
   const placeHolder = selectArray?.[0]?.text ?? "";
 
   return (
-    <div className={className+" flex"} ref={ref}>
-      {label && <Label className="m-4 text-xs w-1/4">{label}</Label>}
-      <Select>
-        <SelectTrigger className="ml-8 flex w-3/4">
+    <div className={className+" flex items-center"} ref={ref}>
+      {label && <Label className="m-4 text-lg w-1/4">{label}</Label>}
+      <Select onValueChange={onSelectValue}>
+        <SelectTrigger className="ml-8 w-3/4 text-lg">
           <SelectValue placeholder={placeHolder} />
         </SelectTrigger>
         <SelectContent>