ONAANDALL/frontend
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'iipbs/common/main' into iipbs/dm/design

Browse Source
This commit is contained in:
jyha00
2025-07-24 19:41:31 +09:00
parent 79bc10cdce 523925459c
commit 9e95ad3fad
9 changed files with 189 additions and 312 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/common/business_components/src/ui/chart/BarChart.tsx
+2
View File
@@ -6,6 +6,7 @@ import {
type ChartConfig
} from "./lib/chart";
import type { CSSProperties } from "react";
import { formatCommaNumber } from "./lib/function";
const customStyles = {
legendContainer: {
@@ -119,6 +120,7 @@ export default function Chart({chartConfig=undefined, chartData=[], chartTitle='
fontWeight={500}
domain={[0, globalMax]}
ticks={ticks}
tickFormatter={(value) => formatCommaNumber(value)}
label={yFieldText ? { value: yFieldText, className:"text-[15px] font-bold", position: 'insideLeft', angle: -90, offset: -30 } : undefined}
/>
<ChartTooltip cursor={false} content={<CustomTooltip active={undefined} payload={undefined} label={undefined} />}/>
packages/common/business_components/src/ui/chart/DoughnutChart.tsx
+1 -1
View File
@@ -50,7 +50,7 @@ const customStyles = {
fontWeight: "normal",
marginTop: "16px",
marginBottom: "8px",
minHeight: "32px", // 범례 영역 높이 통일
minHeight: "60px", // 범례 영역 높이 통일
} as CSSProperties,
};
const renderCustomizedLabel = ({
packages/common/business_components/src/ui/chart/lib/function.tsx
+12
View File
@@ -0,0 +1,12 @@
// 숫자입력시 , 삽입
export const formatCommaNumber = (
value: number | string | undefined | null
): string => {
if (value === undefined || value === null || value === "") return "";
const num = Number(value);
// 숫자로 변환할 수 없는 값이 들어올 경우 빈 문자열을 반환하여 예상치 못한 "NaN" 출력을 방지합니다.
if (isNaN(num)) {
return "";
}
return num.toLocaleString();
};
packages/common/business_components/src/ui/date_picker/index.tsx
+1 -2
View File
@@ -108,12 +108,11 @@ export function DatePicker({
// captionLayout="dropdown-buttons"
// fromYear={2000}
// toYear={new Date().getFullYear()}
toDate={new Date()} // 금일까지만 표시됨 (금일 이후는 안보임)
showOutsideDays={false} // 금월 까지만 표출되도록
mode="single"
selected={field?.value}
onSelect={handleSelect}
initialFocus
disabled={{ after: new Date() }} // 금일까지만 표시됨 (금일 이후는 안보임) 20250721 캘린더가 변경됨!!
locale={ko}
/>
</PopoverContent>
packages/common/business_components/src/ui/select/index-2.tsx
-45
View File
@@ -1,45 +0,0 @@
/**
* @remarks
* 이 버전은 SearchModal에서 사용하기 위해 `SelectContent`의 z-index를 `z-[101]`로 수정하였습니다.
*/
import { Label } from "@common/components";
import React from "react";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./lib/selectBox";
/** 차트 기본 스타일 */
interface SelectBox1 {
text:string,
val:string|number
}
const SelectBox2 = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement> & {
label:string,
selectClass:string|undefined,
className:string,
selectArray:SelectBox1[],
onSelectValue:(val:string|number)=>void,
value?: string|number
}
>(({ label, className, selectClass, selectArray, onSelectValue, value }, ref)=>{
const placeHolder = selectArray?.[0]?.text ?? "";
return (
<div className={className+" flex items-center flex-nowrap"} ref={ref}>
{label && <Label className="inline-block w-auto whitespace-nowrap text-xl text-gray-600 mr-2">{label}</Label>}
<Select onValueChange={onSelectValue} value={value !== undefined ? String(value) : undefined}>
<SelectTrigger className={selectClass?selectClass:"flex-1 p-2 border rounded"}>
<SelectValue placeholder={placeHolder} />
</SelectTrigger>
<SelectContent className="z-[101]">
{selectArray.map((selectArray) => (
<SelectItem key={selectArray.val} value={String(selectArray.val)}>{selectArray.text}</SelectItem>
))}
</SelectContent>
</Select>
</div>
)
})
export { SelectBox2 };
packages/common/business_components/src/ui/select/index.tsx
+3 -1
View File
@@ -27,6 +27,7 @@ const SelectBox = React.forwardRef<
onSelectValue: (val: string | number) => void;
value?: string | number;
readOnly?: boolean; // readOnly 속성 추가
selectContentClass?: string;
}
>(
(
@@ -38,6 +39,7 @@ const SelectBox = React.forwardRef<
onSelectValue,
value,
readOnly = false,
selectContentClass,
},
ref,
) => {
@@ -87,7 +89,7 @@ const SelectBox = React.forwardRef<
>
<SelectValue placeholder={placeHolder} />
</SelectTrigger>
<SelectContent>
<SelectContent className={selectContentClass}>
{visibleItems.map((selectArray) => (
<SelectItem key={selectArray.val} value={String(selectArray.val)}>
{selectArray.text}
packages/common/business_components/src/ui/tab/index-2.tsx
-38
View File
@@ -1,38 +0,0 @@
import { Tabs, TabsList, TabsTrigger } from '@common/components/ui';
import React from 'react';
interface TabItem {
value: string;
label: string;
onClick?: () => void;
}
interface UITabProps extends React.HTMLAttributes<HTMLDivElement> {
defaultValue?: string;
tabList: TabItem[];
children: React.ReactNode;
}
const UITab2 = React.forwardRef<
HTMLDivElement,
UITabProps
>(({defaultValue, tabList, children}, ref)=>{
return (
<Tabs defaultValue={defaultValue || tabList[0]?.value} className={"w-full"}>
<TabsList className="flex">
{tabList.map((tab) => (
<TabsTrigger
key={tab.value}
value={tab.value}
onClick={tab.onClick}
className="py-2 px-4 text-sm font-medium border-b-2 focus:outline-none data-[state=active]:border-blue-500 data-[state=active]:text-blue-600 data-[state=inactive]:border-transparent data-[state=inactive]:text-gray-500 hover:text-gray-700 hover:border-gray-300"
>
{tab.label}
</TabsTrigger>
))}
</TabsList>
{children}
</Tabs>
)
})
export { UITab2 };
packages/common/business_components/src/ui/table/index-2.tsx
-155
View File
@@ -1,155 +0,0 @@
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@common/components";
import { useEffect, useState } from "react";
import UiPageNations from "./uiPageNations";
type UiTableProps = {
headName: React.ReactNode | undefined;
tableData: { [key: string]: string | number | boolean | object }[];
headlist: UiHeadProps[];
pageSize: number;
total: number;
children: React.ReactNode | undefined;
cellClick: ((index: number | undefined, headId: string) => void) | undefined;
onPageChange: (page: number) => void;
className?: string;
resetPageNo?: boolean;
cur?: number;
height?: string; // ✅ 추가된 prop
};
type UiHeadProps = {
id: string;
title: string;
align?: string;
};
export function UiTable2({
tableData,
headlist,
pageSize,
total,
children,
headName,
cellClick,
onPageChange,
className = '',
resetPageNo = false,
cur,
height = '45vh', // ✅ 기본값 설정
}: UiTableProps) {
const [idx, setIdx] = useState<number>(-1);
const [curState, setCurState] = useState<number>(cur ?? 1);
useEffect(() => {
setCurState(cur ?? 1);
}, [cur]);
useEffect(() => {
if (resetPageNo) {
setCurState(1);
onPageChange(1);
}
}, [onPageChange, resetPageNo]);
const handlePageChange = (page: number) => {
setCurState(page);
onPageChange(page);
};
const handleCellClick = (index: number, headId: string) => {
if (cellClick) {
cellClick(index, headId);
setIdx(index);
}
};
const startIdx = (curState - 1) * pageSize;
return (
<>
{headName && (
<div className="card-header">
<div className="flex w-full items-center justify-between">
<h3 className="text-2xl font-medium text-label">{headName}</h3>
</div>
</div>
)}
<div className={`card !m-[1.2rem] !p-0 relative ${className}`}>
{/* ✅ 외부에서 조절 가능한 높이 적용 */}
<div className="overflow-auto" style={{ height }}>
<Table variant="secondary" className="w-full">
<TableHeader className="bg-white">
{children ? (
<>{children}</>
) : (
<TableRow>
{headlist.map((head) => (
<TableHead
key={head.id}
className="min-w-[120px] max-w-[180px] w-[150px]
text-center whitespace-nowrap overflow-hidden
text-ellipsis bg-white"
>
{head.title}
</TableHead>
))}
</TableRow>
)}
</TableHeader>
<TableBody className="text-center">
{tableData.length > 0 ? (
tableData.map((el, index) => (
<TableRow key={index + "row"}>
{headlist.map((head) => (
<TableCell
key={head.id + index}
className={`
${head.align === 'right'
? 'text-right'
: head.align === 'center'
? 'text-center'
: 'text-center'
}
${cellClick && idx === index ? '!font-[1000] cursor-pointer' :
cellClick ? 'cursor-pointer' : ''}
`}
onClick={() => handleCellClick(startIdx + index, head.id)}
>
{typeof el[head.id] === 'number'
? String(el[head.id]).replace(/\B(?=(\d{3})+(?!\d))/g, ",")
: String(el[head.id] ?? '')}
</TableCell>
))}
</TableRow>
))
) : (
<TableRow>
<TableCell colSpan={headlist.length} className="p-0">
{/* ✅ 높이 보장 + 가운데 정렬용 div */}
<div className="flex justify-center items-center text-gray-500" style={{ height: `calc(${height} - 70px)` }}>
<span className="text-xl">🔍 검색 결과가 없습니다.</span>
</div>
</TableCell>
</TableRow>
)}
</TableBody>
</Table>
</div>
{/* 페이지네이션 하단 고정 */}
{(
<div className="sticky left-0 right-0 bottom-0 bg-white z-20 mt-5">
<UiPageNations
total={total}
cur={curState}
pageSize={pageSize}
onPageChange={handlePageChange}
/>
</div>
)}
</div>
</>
);
}
packages/common/business_components/src/ui/table/index.tsx
+170 -70
View File
@@ -1,11 +1,21 @@
"use client"
"use client";
import { Checkbox, Table, TableBody, TableCell, TableHeader, TableRow } from "@common/components";
import {
Checkbox,
Table,
TableBody,
TableCell,
TableHeader,
TableRow,
} from "@common/components";
import { useEffect, useState, useRef } from "react";
import { HeadMakeColSpan } from "./HeadMakeColSpan";
import UiPageNations from "./uiPageNations";
import { Check } from "lucide-react";
export type ChkClass = {
chk: boolean;
readonly: boolean;
};
type UiTableProps = {
headName: React.ReactNode | undefined;
tableData: { [key: string]: any }[];
@@ -20,22 +30,35 @@ type UiTableProps = {
boldArray?: number[];
resetSelection?: boolean;
index?: number;
}
};
type UiHeadProps = {
id: string;
title: string;
align?: string;
visible?: boolean;
}
};
export function UiTable({ tableData, headlist, pageSize, total, headName, children, cellClick, onPageChange, className = '', resetPageNo = false, boldArray = [], resetSelection = false, index = -1 }: UiTableProps) {
export function UiTable({
tableData,
headlist,
pageSize,
total,
headName,
children,
cellClick,
onPageChange,
className = "",
resetPageNo = false,
boldArray = [],
resetSelection = false,
index = -1,
}: UiTableProps) {
const [cur, setCur] = useState<number>(1);
const [idx, setIdx] = useState<number>(index);
const [headerHeight, setHeaderHeight] = useState<number>(0);
const headerRef = useRef<HTMLTableSectionElement>(null);
useEffect(() => {
if (resetPageNo) {
setCur(1);
@@ -51,14 +74,14 @@ export function UiTable({ tableData, headlist, pageSize, total, headName, childr
useEffect(() => {
if (headerRef.current) {
setHeaderHeight(headerRef.current.offsetHeight-5);
setHeaderHeight(headerRef.current.offsetHeight - 5);
}
}, [tableData, headlist]);
const handlePageChange = (page: number) => {
setCur(page);
onPageChange(page);
}
};
const handleCellClick = (index: number, headId: string) => {
if (cellClick) {
@@ -67,81 +90,158 @@ export function UiTable({ tableData, headlist, pageSize, total, headName, childr
}
};
return (
<>
{headName ? <div className="card-header">
<h3 className="text-2xl font-medium text-label">{headName}</h3>
</div> : <></>}
<div className={`card !m-[1.2rem] !p-0r ${className}`}>
{headName ? (
<div className="card-header">
<h3 className="text-2xl font-medium text-label">{headName}</h3>
</div>
) : (
<></>
)}
<div className={`card !p-0r !m-[1.2rem] ${className}`}>
<Table variant="secondary">
<TableHeader ref={headerRef} className="font-bold">
{children ? children : <HeadMakeColSpan upHeadList={headlist} />}
</TableHeader>
<TableBody className='text-center'>
{tableData.length > 0 ? tableData?.map((el: Record<string, unknown>, index) => (
<TableRow key={`row-${index}`}>
{headlist
.filter((item) => item.visible != false)
.map((head) => (
head.id && head.id.length > 1 && (
boldArray.includes(index)
?
<TableCell
className={`${head.align === 'right' ? 'text-right' : head.align === 'center' ? 'text-center' : 'text-center'} ${cellClick && idx === index ? '!font-[1000] cursor-pointer' :
cellClick ? 'cursor-pointer' : ''
} !font-bold sticky bg-secondary z-40`}
style={{ top: `${headerHeight + (index * 39)}px` }}
onClick={() => handleCellClick(index, head.id)}
key={`cell-${head.id}-${index}`}
>
{typeof el[head.id] !== 'number' ? String(el[head.id] ?? '') : String(el[head.id]).includes('.')
? String(el[head.id]).split('.').map((part, index) =>
index === 0 ? part.replace(/\B(?=(\d{3})+(?!\d))/g, ",") : part
).join('.')
: String(el[head.id] ?? '').replace(/\B(?=(\d{3})+(?!\d))/g, ",")}
</TableCell>
:
<TableCell
className={`${head.align === 'right' ? 'text-right' : head.align === 'center' ? 'text-center' : 'text-center'} ${cellClick && idx === index ? '!font-[1000] cursor-pointer' :
cellClick ? 'cursor-pointer' : ''
<TableBody className="text-center">
{tableData.length > 0 ? (
tableData?.map((el: Record<string, unknown>, index) => (
<TableRow key={`row-${index}`}>
{headlist
.filter((item) => item.visible != false)
.map(
(head) =>
head.id &&
head.id.length > 1 &&
(boldArray.includes(index) ? (
<TableCell
className={`${head.align === "right" ? "text-right" : head.align === "center" ? "text-center" : "text-center"} ${
cellClick && idx === index
? "cursor-pointer !font-[1000]"
: cellClick
? "cursor-pointer"
: ""
} sticky z-40 bg-secondary !font-bold`}
style={{ top: `${headerHeight + index * 39}px` }}
onClick={() => handleCellClick(index, head.id)}
key={`cell-${head.id}-${index}`}
>
{typeof el[head.id] !== "number"
? String(el[head.id] ?? "")
: String(el[head.id]).includes(".")
? String(el[head.id])
.split(".")
.map((part, index) =>
index === 0
? part.replace(
/\B(?=(\d{3})+(?!\d))/g,
",",
)
: part,
)
.join(".")
: String(el[head.id] ?? "").replace(
/\B(?=(\d{3})+(?!\d))/g,
",",
)}
</TableCell>
) : (
<TableCell
className={`${head.align === "right" ? "text-right" : head.align === "center" ? "text-center" : "text-center"} ${
cellClick && idx === index
? "cursor-pointer !font-[1000]"
: cellClick
? "cursor-pointer"
: ""
} mt-[${boldArray.length * 40}px]`}
onClick={() => handleCellClick(index, head.id)}
key={`cell-${head.id}-${index}`}
>
{typeof el[head.id] === 'boolean'
? <Checkbox
checked={el[head.id] === true}
onCheckedChange={(checked) => {
el[head.id] = checked;
}}
>
<Check className="h-6 w-6 text-primary" />
</Checkbox>
:
typeof el[head.id] !== 'number' ?
String(el[head.id] ?? '') :
String(el[head.id]).includes('.')
? String(el[head.id]).split('.').map((part, index) =>
index === 0 ? part.replace(/\B(?=(\d{3})+(?!\d))/g, ",") : part
).join('.')
:
String(el[head.id] ?? '').replace(/\B(?=(\d{3})+(?!\d))/g, ",")}
</TableCell>
)
))}
</TableRow>
)) : (
onClick={() => handleCellClick(index, head.id)}
key={`cell-${head.id}-${index}`}
>
{
//체크박스 유형애서 readOnly가 필요한 경우를 위해서 ChkClass 를 사용해서 readOnly 처리함.
typeof el[head.id] === "object" &&
el[head.id] !== null &&
"chk" in (el[head.id] as object) &&
"readonly" in (el[head.id] as object) ? (
<Checkbox
checked={
(el[head.id] as ChkClass)?.chk === true
}
onCheckedChange={(checked) => {
{
console.log(el[head.id]);
}
if (
(el[head.id] as ChkClass).readonly == true
)
return;
(el[head.id] as ChkClass).chk =
Boolean(checked);
}}
>
<Check className="h-6 w-6 text-primary" />
</Checkbox>
) : typeof el[head.id] === "boolean" ? (
<Checkbox
checked={el[head.id] === true}
onCheckedChange={(checked) => {
el[head.id] = checked;
}}
>
<Check className="h-6 w-6 text-primary" />
</Checkbox>
) : typeof el[head.id] !== "number" ? (
String(el[head.id] ?? "")
) : String(el[head.id]).includes(".") ? (
String(el[head.id])
.split(".")
.map((part, index) =>
index === 0
? part.replace(
/\B(?=(\d{3})+(?!\d))/g,
",",
)
: part,
)
.join(".")
) : (
String(el[head.id] ?? "").replace(
/\B(?=(\d{3})+(?!\d))/g,
",",
)
)
}
</TableCell>
)),
)}
</TableRow>
))
) : (
<TableRow>
<TableCell colSpan={headlist.filter((item) => item.visible != false).length} className="h-24 text-center text-gray-500">
<TableCell
colSpan={
headlist.filter((item) => item.visible != false).length
}
className="h-24 text-center text-gray-500"
>
조회된 결과가 없습니다.
</TableCell>
</TableRow>
)}
</TableBody>
</Table>
{total <= 0 ? <></> : <UiPageNations total={total} cur={cur} pageSize={pageSize} onPageChange={handlePageChange} />}
{total <= 0 ? (
<></>
) : (
<UiPageNations
total={total}
cur={cur}
pageSize={pageSize}
onPageChange={handlePageChange}
/>
)}
</div>
</>
);
}
}