diff --git a/.gitignore b/.gitignore index 40f0d864b..5a1eba87e 100644 --- a/.gitignore +++ b/.gitignore @@ -14,6 +14,8 @@ dist # misc .DS_Store +apps/wr/.next/**/* +apps/fo/.next/**/* # env .env* diff --git a/packages/common/business_components/src/base.css b/packages/common/business_components/src/base.css index 6b56f5eff..daaa92719 100644 --- a/packages/common/business_components/src/base.css +++ b/packages/common/business_components/src/base.css @@ -1,3 +1,7 @@ +@import "@common/assets/styles/base.css"; +@import "@common/assets/styles/diveicon.css"; +@import "@common/assets/styles/components.css"; + @tailwind base; @tailwind components; @tailwind utilities; @@ -70,4 +74,4 @@ body { @apply bg-background text-foreground; } -} +} \ No newline at end of file diff --git a/packages/common/business_components/src/ui/alert_dialog_ui/index.tsx b/packages/common/business_components/src/ui/alert_dialog_ui/index.tsx new file mode 100644 index 000000000..8437c87a8 --- /dev/null +++ b/packages/common/business_components/src/ui/alert_dialog_ui/index.tsx @@ -0,0 +1,53 @@ +import { Button, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@common/components"; +import React from "react"; + +type ModalType = { + bodyClass: string; + butNm: string; + title: string; + body: React.ReactNode; + open?: boolean; + onOpenChange?: (open: boolean) => void; +} + +export function UiModal({ bodyClass, butNm, title, body, open, onOpenChange }: ModalType) { + const dialogProps = open !== undefined && onOpenChange !== undefined + ? { open, onOpenChange } + : {}; + + return ( + <> + {!open && ( + + + + + + + {title} + + + + {body} + + + + + )} + {open && ( + + + + {title} + + + + {body} + + + + + )} + + ); +} diff --git a/packages/common/business_components/src/ui/dialog_ui/index.tsx b/packages/common/business_components/src/ui/dialog_ui/index.tsx new file mode 100644 index 000000000..27c67458d --- /dev/null +++ b/packages/common/business_components/src/ui/dialog_ui/index.tsx @@ -0,0 +1,52 @@ +import { Button, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@common/components"; + +type ModalType = { + bodyClass: string; + butNm: string; + title: string; + body: React.ReactNode; + open?: boolean; + onOpenChange?: (open: boolean) => void; +} + +export function UiModal({ bodyClass, butNm, title, body, open, onOpenChange }: ModalType) { + const dialogProps = open !== undefined && onOpenChange !== undefined + ? { open, onOpenChange } + : {}; + + return ( + <> + {!open && ( + + + + + + + {title} + + + + {body} + + + + + )} + {open && ( + + + + {title} + + + + {body} + + + + + )} + + ); +} diff --git a/packages/common/business_components/src/ui/index.ts b/packages/common/business_components/src/ui/index.ts index 795fffa2a..c3022740d 100644 --- a/packages/common/business_components/src/ui/index.ts +++ b/packages/common/business_components/src/ui/index.ts @@ -9,4 +9,11 @@ export * from "./search_input"; export * from "./search_input_select"; export * from "./select"; export * from "./table"; - +export * from "./main_content_div"; +export * from "./title"; +export * from "./search_form_left"; +export * from "./search_form_right"; +export * from "./table_div"; +export * from "./list_div"; +export * from "./tab"; +export * from "./dialog_ui" \ No newline at end of file diff --git a/packages/common/business_components/src/ui/list_div/index.tsx b/packages/common/business_components/src/ui/list_div/index.tsx new file mode 100644 index 000000000..a096a4c04 --- /dev/null +++ b/packages/common/business_components/src/ui/list_div/index.tsx @@ -0,0 +1,11 @@ +import React from 'react' + +function ListDiv(props: {children: React.ReactNode}) { + return ( +
+ {props.children} +
+ ) +} + +export default ListDiv \ No newline at end of file diff --git a/packages/common/business_components/src/ui/main_content_div/index.tsx b/packages/common/business_components/src/ui/main_content_div/index.tsx new file mode 100644 index 000000000..1432f472e --- /dev/null +++ b/packages/common/business_components/src/ui/main_content_div/index.tsx @@ -0,0 +1,11 @@ +import React from 'react' + +export default function MainDiv(props: {children: React.ReactNode}) { + return ( +
+ {props.children} +
+ ) +} + +export { MainDiv }; \ No newline at end of file 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 d9dd6a8df..34a6d41e6 100644 --- a/packages/common/business_components/src/ui/search_form/index.tsx +++ b/packages/common/business_components/src/ui/search_form/index.tsx @@ -1,9 +1,9 @@ function SearchDiv ({children}:{ children: React.ReactNode; }) { return ( -
- {children} -
- ); +
+ {children} +
+ ) } export { SearchDiv }; diff --git a/packages/common/business_components/src/ui/search_form_left/index.tsx b/packages/common/business_components/src/ui/search_form_left/index.tsx new file mode 100644 index 000000000..950306231 --- /dev/null +++ b/packages/common/business_components/src/ui/search_form_left/index.tsx @@ -0,0 +1,11 @@ +import React from 'react' + +function SearchFormLeft(props: {children: React.ReactNode}) { + return ( +
+ {props.children} +
+ ) +} + +export { SearchFormLeft }; \ No newline at end of file diff --git a/packages/common/business_components/src/ui/search_form_right/index.tsx b/packages/common/business_components/src/ui/search_form_right/index.tsx new file mode 100644 index 000000000..676b90849 --- /dev/null +++ b/packages/common/business_components/src/ui/search_form_right/index.tsx @@ -0,0 +1,11 @@ +import React from 'react' + +function SearchFormRight(props: {children: React.ReactNode}) { + return ( +
+ {props.children} +
+ ) +} + +export { SearchFormRight }; \ No newline at end of file diff --git a/packages/common/business_components/src/ui/search_input/index.tsx b/packages/common/business_components/src/ui/search_input/index.tsx index 61ff8ec3f..0da6cffdc 100644 --- a/packages/common/business_components/src/ui/search_input/index.tsx +++ b/packages/common/business_components/src/ui/search_input/index.tsx @@ -1,15 +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) => { +const SearchInput = React.forwardRefvoid}>(({className, label, textValue, setText}, ref) => { + const changeText=(e:React.ChangeEvent)=>{ + if(e?.target?.value) setText(e.target.value) + } + return ( -
- {label && } - +
+ {label && } +
) }); -export { SearchInput }; +export { SearchInput }; \ No newline at end of file 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 index c6face023..5a386b77b 100644 --- a/packages/common/business_components/src/ui/search_input_select/index.tsx +++ b/packages/common/business_components/src/ui/search_input_select/index.tsx @@ -11,19 +11,23 @@ export type SelectDataType = { * @param label - string label * @param selectData - SelectDataType[] 선택 데이터 * @param onSelectValue - (val:string)=>void 선택 값 콜백 + * @param textValue - string 입력 값 + * @param setText - (val:string)=>void 입력 값 설정 콜백 + * @param selectValue - string select 선택 값 * @param refs - React.forwardRef | null 입력값 ref * @returns React.FC */ -const SearchInputSelect = React.forwardRefvoid, textValue:string, setText:(val:string)=>void}>(({className, label, selectData, onSelectValue, textValue, setText}) => { +const SearchInputSelect = React.forwardRefvoid, textValue:string, setText:(val:string)=>void, selectValue:string}>(({className, label, selectData, onSelectValue, textValue, setText, selectValue}, ref) => { const changeText=(e:React.ChangeEvent)=>{ if(e?.target?.value) setText(e.target.value) } + return (
- {label && } + {label && }
- - + - + {label && } + diff --git a/packages/common/business_components/src/ui/tab/index.tsx b/packages/common/business_components/src/ui/tab/index.tsx new file mode 100644 index 000000000..9d24562f8 --- /dev/null +++ b/packages/common/business_components/src/ui/tab/index.tsx @@ -0,0 +1,36 @@ +import { Tabs, TabsList, TabsTrigger } from '@common/components/ui'; +import React from 'react'; + +interface TabItem { + value: string; + label: string; +} + +interface UITabProps extends React.HTMLAttributes { + defaultValue?: string; + tabList: TabItem[]; + children: React.ReactNode; +} + +const UITab = React.forwardRef< + HTMLDivElement, + UITabProps +>(({defaultValue, tabList, children}, ref)=>{ + return ( + + + {tabList.map((tab) => ( + + {tab.label} + + ))} + + {children} + + ) +}) +export { UITab }; diff --git a/packages/common/business_components/src/ui/table/index.tsx b/packages/common/business_components/src/ui/table/index.tsx index 2c026f6c4..b8c2706bc 100644 --- a/packages/common/business_components/src/ui/table/index.tsx +++ b/packages/common/business_components/src/ui/table/index.tsx @@ -8,7 +8,7 @@ type UiTableProps = { pageSize: number; total: number; children: React.ReactNode | undefined; - cellClick : (index:number)=>void | undefined; + cellClick : ((index:number|undefined)=>void) | undefined; } type UiHeadProps = { @@ -21,28 +21,29 @@ export function UiTable({ tableData, headlist, pageSize, total, children, headNa return ( <> - {headName ? headName : <>} -
- - + {headName ?
+

{headName}

+
: <>} +
+
+ {children ? <>{children} : {headlist?.map((head) => ( {head.title} ))} } - {tableData?.map((el: { [key: string]: string | number | boolean }, index) => ( {headlist.map((head) => ( - cellClick(index)} key={head.id + index}>{el[head.id]} + cellClick && cellClick(index)} key={head.id + index}>{el[head.id]} ))} ))} -
- {total <= 0 ? <> : } + + {total <= 0 ? <> : }
); diff --git a/packages/common/business_components/src/ui/table_div/index.tsx b/packages/common/business_components/src/ui/table_div/index.tsx new file mode 100644 index 000000000..b0e580b9c --- /dev/null +++ b/packages/common/business_components/src/ui/table_div/index.tsx @@ -0,0 +1,11 @@ +import React from 'react' + +function ContentsDiv(props: {children: React.ReactNode}) { + return ( +
+ {props.children} +
+ ) +} + +export { ContentsDiv }; \ No newline at end of file diff --git a/packages/common/business_components/src/ui/title/index.tsx b/packages/common/business_components/src/ui/title/index.tsx new file mode 100644 index 000000000..5b6d9bff4 --- /dev/null +++ b/packages/common/business_components/src/ui/title/index.tsx @@ -0,0 +1,11 @@ +import React from 'react' + +function Title(props: {title: string}) { + return ( +

+ {props.title} +

+ ) +} + +export { Title }; \ No newline at end of file