toast 메시지 추가

alert 글로벌화
loading 글로벌화

src/components/common/Custom/CaliTable.js

@@ -0,0 +1,112 @@
+import { DetailMessage, TableStyle, TableWrapper } from '../../../styles/Components';
+import { StatusLabel } from '../../../styles/ModuleComponents';
+import { Button, CheckBox } from '../index';
+import { convertKTC, getOptionsArray } from '../../../utils';
+import { styled } from 'styled-components';
+
+const CaliTable = ({
+						  columns,
+						  data,
+						  selectedRows = [],
+						  onSelectRow,
+						  onAction,
+						  refProp
+					  }) => {
+
+	const renderCell = (column, item) => {
+		const { type, id, option_name, format, action } = column;
+		const value = item[id];
+
+		const options = getOptionsArray(option_name);
+
+		switch (type) {
+			case 'text':
+				return value;
+
+			case 'date':
+				return convertKTC(value);
+
+			case 'status':
+				const statusOption = options.find(opt => opt.value === value);
+				return (
+					<StatusWapper>
+						<StatusLabel $status={value}>
+							{statusOption ? statusOption.name : value}
+						</StatusLabel>
+					</StatusWapper>
+				);
+
+			case 'button':
+				return (
+					<Button
+						theme="line"
+						text={column.text || "액션"}
+						handleClick={() => onAction(id, item)}
+					/>
+				);
+
+			case 'checkbox':
+				return (
+					<CheckBox
+						name={column.name || 'select'}
+						id={item.id}
+						setData={(e) => onSelectRow(e, item)}
+						checked={selectedRows.some(row => row.id === item.id)}
+					/>
+				);
+
+			case 'option':
+				const dataOption = options.find(opt => opt.value === value);
+				return (
+					dataOption ? dataOption.name : value
+				);
+
+			case "link":
+				return (
+					<DetailMessage onClick={() => onAction(action)}>
+						{value.content.length > 20 ? value.content.slice(0, 20) + '...' : value.content || ''}
+					</DetailMessage>
+				);
+
+			default:
+				return value;
+		}
+	};
+
+	return (
+		<TableWrapper>
+			<TableStyle ref={refProp}>
+				<caption></caption>
+				<thead>
+				<tr>
+					{columns.map((column, index) => (
+						<th key={index} width={column.width || 'auto'}>
+							{column.title}
+						</th>
+					))}
+				</tr>
+				</thead>
+				<tbody>
+				{data?.map((item, rowIndex) => (
+					<tr key={rowIndex}>
+						{columns.map((column, colIndex) => (
+							<td key={colIndex}>
+								{renderCell(column, item)}
+							</td>
+						))}
+					</tr>
+				))}
+				</tbody>
+			</TableStyle>
+		</TableWrapper>
+	);
+};
+
+export default CaliTable;
+
+const StatusWapper = styled.div`
+    display: flex;
+    gap: 0.35rem;
+    align-items: center;
+    justify-content: center;
+`;