diff --git a/.gitignore b/.gitignore index 3f815ea23..a4574580d 100644 --- a/.gitignore +++ b/.gitignore @@ -5,4 +5,6 @@ node_modules # misc -.DS_Store \ No newline at end of file +.DS_Store +apps/wr/.next/**/* +apps/fo/.next/**/* \ No newline at end of file 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 패키지지 -  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" }, -``` \ No newline at end of file +``` + +    (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/package.json b/packages/common/business_components/package.json index 9618ff295..eb3c0e8cb 100644 --- a/packages/common/business_components/package.json +++ b/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", diff --git a/packages/common/business_components/src/ui/date_picker/date-picker.css b/packages/common/business_components/src/ui/date_picker/date-picker.css new file mode 100644 index 000000000..bf9415652 --- /dev/null +++ b/packages/common/business_components/src/ui/date_picker/date-picker.css @@ -0,0 +1,7 @@ +@tailwind components; + +@layer components { + .date-picker-trigger { + @apply h-[3rem] w-[12rem] justify-between border-input !bg-background px-4 py-2 text-left text-[1.3rem] font-normal leading-none text-muted-foreground hover:!bg-accent; + } +} diff --git a/packages/common/business_components/src/ui/date_picker/index.tsx b/packages/common/business_components/src/ui/date_picker/index.tsx new file mode 100644 index 000000000..37dbcb096 --- /dev/null +++ b/packages/common/business_components/src/ui/date_picker/index.tsx @@ -0,0 +1,46 @@ +"use client"; + +import "./date-picker.css"; + +import { format } from "date-fns"; +import { CalendarIcon } from "lucide-react"; +import type { DayPickerSingleProps } from "react-day-picker"; + +import { Button, Calendar, Popover, PopoverContent, PopoverTrigger } from "@common/components/ui"; +import { cn } from "../../lib/utils"; +import { FormControl } from "../form"; + +type DatePickerProps = DayPickerSingleProps & { field: { value: Date; onChange: (date: Date | undefined) => void } }; + +export function DatePicker({ field }: DatePickerProps) { + return ( + + + + + + + + + + + ); +} diff --git a/packages/common/business_components/src/ui/form_ui/index.tsx b/packages/common/business_components/src/ui/form_ui/index.tsx new file mode 100644 index 000000000..bd9930c3c --- /dev/null +++ b/packages/common/business_components/src/ui/form_ui/index.tsx @@ -0,0 +1,19 @@ +import React from "react"; +import { FormControl, FormItem, FormLabel, FormMessage } from "../form"; + +const FormUi = React.forwardRef< + HTMLDivElement, + React.HTMLAttributes & {label:string|undefined} +>(({children, label},ref)=>{ + return ( + + {label?{label}:<>} + + {children} + + + + ) +}) +FormUi.displayName = 'FormUi'; +export { FormUi }; diff --git a/packages/common/business_components/src/ui/index.ts b/packages/common/business_components/src/ui/index.ts index 1876f2b50..795fffa2a 100644 --- a/packages/common/business_components/src/ui/index.ts +++ b/packages/common/business_components/src/ui/index.ts @@ -1,6 +1,12 @@ export * from "./chart"; +export * from "./date_picker"; export * from "./file-upload"; export * from "./form"; +export * from "./form_ui"; +export * from "./scroll"; 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/scroll/index.tsx b/packages/common/business_components/src/ui/scroll/index.tsx new file mode 100644 index 000000000..cd32e8856 --- /dev/null +++ b/packages/common/business_components/src/ui/scroll/index.tsx @@ -0,0 +1,46 @@ +import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area" +import * as React from "react" + +import { cn } from "../../lib/utils" + +const ScrollArea = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + + + {children} + + + + +)) +ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName + +const ScrollBar = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, orientation = "vertical", ...props }, ref) => ( + + + +)) +ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName + +export { ScrollArea, ScrollBar } 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..7c6024748 100644 --- a/packages/common/business_components/src/ui/search_form/index.tsx +++ b/packages/common/business_components/src/ui/search_form/index.tsx @@ -1,21 +1,9 @@ -/** - * 검색영역 스타일 - */ -const styles = { - divStyle : { - border: '1px solid black', - margin: '1rem', - display: 'flex', - borderRadius: '1rem' - } as React.CSSProperties -} - function SearchDiv ({children}:{ children: React.ReactNode; }) { return ( -
+
{children}
) } -export { SearchDiv }; \ No newline at end of file +export { SearchDiv }; 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..f2d1caeb4 --- /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 & {className:string, label:string}> +(({className, label}, ref) => { + console.log(ref); + return ( +
+ {label && } + +
+ ) +}); +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..1496d9ddd --- /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 | null 입력값 ref + * @returns React.FC + */ +const SearchInputSelect = React.forwardRefvoid}>(({className, label, selectData, onSelectValue}, refs) => { + return ( +
+ {label && } +
+ + +
+
+ ) +}); +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 72f304caa..d039c2c2a 100644 --- a/packages/common/business_components/src/ui/select/index.tsx +++ b/packages/common/business_components/src/ui/select/index.tsx @@ -1,45 +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, - selectStyle : { - marginLeft: '1rem', - width:'8rem' - } as React.CSSProperties, - labelStyle : { - margin:'0.8rem 0.8rem 0.8rem 0.8rem', - fontSize: '10px', - } as React.CSSProperties -} - interface SelectBox1 { text:string, val:string } -function SelectBox(props: {label : string, selectArray: SelectBox1[]}){ - const placeHolder = props.selectArray.length > 0 ? props.selectArray[0].text : ""; + +const SelectBox = React.forwardRef< + HTMLDivElement, + React.HTMLAttributes & {label:string, className:string, selectArray:SelectBox1[], onSelectValue:(val:string)=>void} +>(({ label, className, selectArray, onSelectValue }, ref)=>{ + const placeHolder = selectArray?.[0]?.text ?? ""; return ( -
- {props.label && } - + - {props.selectArray.map((selectArray) => ( + {selectArray.map((selectArray) => ( {selectArray.text} ))}
) -} +}) -export { SelectBox }; \ No newline at end of file +export { SelectBox }; diff --git a/packages/common/business_components/src/ui/table/index.tsx b/packages/common/business_components/src/ui/table/index.tsx index 17360af12..c96cabe7c 100644 --- a/packages/common/business_components/src/ui/table/index.tsx +++ b/packages/common/business_components/src/ui/table/index.tsx @@ -1,46 +1,49 @@ import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@common/components"; import UiPageNations from "./uiPageNations"; - - -interface UiTableProps { - headName: string; - publicReuseFacility: any[]; - headlist: { id: string; title: string; }[]; + + +type UiTableProps = { + headName: React.ReactNode | undefined; + tableData: { [key: string]: string | number | boolean }[]; + headlist: UiHeadProps[]; pageSize: number; total: number; - children: React.ReactNode|undefined; + children: React.ReactNode | undefined; } -export function UiTable(UiTableProps: UiTableProps) { - const { publicReuseFacility, headlist,pageSize , total, children,headName} = UiTableProps; +type UiHeadProps = { + id: string; + title: string; + +} +export function UiTable({ tableData, headlist, pageSize, total, children, headName }: UiTableProps) { const cur = 1; - - return ( - <> -

{headName}

- - - {children? <>{children}: - {headlist.map((head) => ( - {head.title} - ))} - } - - - - {publicReuseFacility.map((el: any,index) => ( - - {headlist.map((head) => ( - {el[head.id]} - ))} - - + return ( + <> + {headName ? headName : <>} +
+ + {children ? <>{children} : + {headlist?.map((head) => ( + {head.title} ))} - - -
- - - ); - } \ No newline at end of file + } + + + + {tableData?.map((el: { [key: string]: string | number | boolean }, index) => ( + + {headlist.map((head) => ( + {el[head.id]} + ))} + + + ))} + + + + {total <= 0 ? <> : } + + ); +}