자동 채우기 핸들
This commit is contained in:
kjs
@@ -24,8 +24,6 @@ import {
|
||||
FileSpreadsheet,
|
||||
AlertCircle,
|
||||
CheckCircle2,
|
||||
Plus,
|
||||
Minus,
|
||||
ArrowRight,
|
||||
Zap,
|
||||
} from "lucide-react";
|
||||
@@ -34,6 +32,7 @@ import { DynamicFormApi } from "@/lib/api/dynamicForm";
|
||||
import { getTableSchema, TableColumn } from "@/lib/api/tableSchema";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { findMappingByColumns, saveMappingTemplate } from "@/lib/api/excelMapping";
|
||||
import { EditableSpreadsheet } from "./EditableSpreadsheet";
|
||||
|
||||
export interface ExcelUploadModalProps {
|
||||
open: boolean;
|
||||
@@ -167,56 +166,6 @@ export const ExcelUploadModal: React.FC<ExcelUploadModalProps> = ({
|
||||
}
|
||||
};
|
||||
|
||||
// 행 추가
|
||||
const handleAddRow = () => {
|
||||
const newRow: Record<string, any> = {};
|
||||
excelColumns.forEach((col) => {
|
||||
newRow[col] = "";
|
||||
});
|
||||
setDisplayData([...displayData, newRow]);
|
||||
toast.success("행이 추가되었습니다.");
|
||||
};
|
||||
|
||||
// 행 삭제
|
||||
const handleRemoveRow = () => {
|
||||
if (displayData.length > 1) {
|
||||
setDisplayData(displayData.slice(0, -1));
|
||||
toast.success("마지막 행이 삭제되었습니다.");
|
||||
} else {
|
||||
toast.error("최소 1개의 행이 필요합니다.");
|
||||
}
|
||||
};
|
||||
|
||||
// 열 추가
|
||||
const handleAddColumn = () => {
|
||||
const newColName = `Column${excelColumns.length + 1}`;
|
||||
setExcelColumns([...excelColumns, newColName]);
|
||||
setDisplayData(
|
||||
displayData.map((row) => ({
|
||||
...row,
|
||||
[newColName]: "",
|
||||
}))
|
||||
);
|
||||
toast.success("열이 추가되었습니다.");
|
||||
};
|
||||
|
||||
// 열 삭제
|
||||
const handleRemoveColumn = () => {
|
||||
if (excelColumns.length > 1) {
|
||||
const lastCol = excelColumns[excelColumns.length - 1];
|
||||
setExcelColumns(excelColumns.slice(0, -1));
|
||||
setDisplayData(
|
||||
displayData.map((row) => {
|
||||
const { [lastCol]: removed, ...rest } = row;
|
||||
return rest;
|
||||
})
|
||||
);
|
||||
toast.success("마지막 열이 삭제되었습니다.");
|
||||
} else {
|
||||
toast.error("최소 1개의 열이 필요합니다.");
|
||||
}
|
||||
};
|
||||
|
||||
// 테이블 스키마 가져오기 (2단계 진입 시)
|
||||
useEffect(() => {
|
||||
if (currentStep === 2 && tableName) {
|
||||
@@ -336,6 +285,42 @@ export const ExcelUploadModal: React.FC<ExcelUploadModalProps> = ({
|
||||
return;
|
||||
}
|
||||
|
||||
// 1단계 → 2단계 전환 시: 빈 헤더 열 제외
|
||||
if (currentStep === 1) {
|
||||
// 빈 헤더가 아닌 열만 필터링
|
||||
const validColumnIndices: number[] = [];
|
||||
const validColumns: string[] = [];
|
||||
|
||||
excelColumns.forEach((col, index) => {
|
||||
if (col && col.trim() !== "") {
|
||||
validColumnIndices.push(index);
|
||||
validColumns.push(col);
|
||||
}
|
||||
});
|
||||
|
||||
// 빈 헤더 열이 있었다면 데이터에서도 해당 열 제거
|
||||
if (validColumns.length < excelColumns.length) {
|
||||
const removedCount = excelColumns.length - validColumns.length;
|
||||
|
||||
// 새로운 데이터: 유효한 열만 포함
|
||||
const cleanedData = displayData.map((row) => {
|
||||
const newRow: Record<string, any> = {};
|
||||
validColumns.forEach((colName) => {
|
||||
newRow[colName] = row[colName];
|
||||
});
|
||||
return newRow;
|
||||
});
|
||||
|
||||
setExcelColumns(validColumns);
|
||||
setDisplayData(cleanedData);
|
||||
setAllData(cleanedData);
|
||||
|
||||
if (removedCount > 0) {
|
||||
toast.info(`빈 헤더 ${removedCount}개 열이 제외되었습니다.`);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
setCurrentStep((prev) => Math.min(prev + 1, 3));
|
||||
};
|
||||
|
||||
@@ -599,8 +584,8 @@ export const ExcelUploadModal: React.FC<ExcelUploadModalProps> = ({
|
||||
{/* 파일이 선택된 경우에만 미리보기 표시 */}
|
||||
{file && displayData.length > 0 && (
|
||||
<>
|
||||
{/* 시트 선택 + 행/열 편집 버튼 */}
|
||||
<div className="flex flex-wrap items-center gap-3">
|
||||
{/* 시트 선택 */}
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<Label className="text-xs text-muted-foreground sm:text-sm">
|
||||
시트:
|
||||
@@ -622,115 +607,36 @@ export const ExcelUploadModal: React.FC<ExcelUploadModalProps> = ({
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="ml-auto flex flex-wrap gap-1">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={handleAddRow}
|
||||
className="h-7 px-2 text-xs"
|
||||
>
|
||||
<Plus className="mr-1 h-3 w-3" />행
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={handleRemoveRow}
|
||||
className="h-7 px-2 text-xs"
|
||||
>
|
||||
<Minus className="mr-1 h-3 w-3" />행
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={handleAddColumn}
|
||||
className="h-7 px-2 text-xs"
|
||||
>
|
||||
<Plus className="mr-1 h-3 w-3" />열
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={handleRemoveColumn}
|
||||
className="h-7 px-2 text-xs"
|
||||
>
|
||||
<Minus className="mr-1 h-3 w-3" />열
|
||||
</Button>
|
||||
</div>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{displayData.length}개 행 · 셀을 클릭하여 편집, Tab/Enter로 이동
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* 감지된 범위 */}
|
||||
<div className="text-xs text-muted-foreground">
|
||||
감지된 범위: <span className="font-medium">{detectedRange}</span>
|
||||
<span className="ml-2">({displayData.length}개 행)</span>
|
||||
</div>
|
||||
|
||||
{/* 데이터 미리보기 테이블 */}
|
||||
<div className="max-h-[280px] overflow-auto rounded-md border border-border">
|
||||
<table className="min-w-full text-[10px] sm:text-xs">
|
||||
<thead className="sticky top-0 bg-muted">
|
||||
<tr>
|
||||
<th className="whitespace-nowrap border-b border-r border-border bg-primary/10 px-2 py-1 text-center font-medium"></th>
|
||||
{excelColumns.map((col, index) => (
|
||||
<th
|
||||
key={col}
|
||||
className="whitespace-nowrap border-b border-r border-border bg-primary/10 px-2 py-1 text-center font-medium"
|
||||
>
|
||||
{String.fromCharCode(65 + index)}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr className="bg-primary/5">
|
||||
<td className="whitespace-nowrap border-b border-r border-border bg-primary/10 px-2 py-1 text-center font-medium">
|
||||
1
|
||||
</td>
|
||||
{excelColumns.map((col) => (
|
||||
<td
|
||||
key={col}
|
||||
className="whitespace-nowrap border-b border-r border-border px-2 py-1 font-medium text-primary"
|
||||
>
|
||||
{col}
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
{displayData.slice(0, 10).map((row, rowIndex) => (
|
||||
<tr
|
||||
key={rowIndex}
|
||||
className="border-b border-border last:border-0"
|
||||
>
|
||||
<td className="whitespace-nowrap border-r border-border bg-muted/50 px-2 py-1 text-center font-medium text-muted-foreground">
|
||||
{rowIndex + 2}
|
||||
</td>
|
||||
{excelColumns.map((col) => (
|
||||
<td
|
||||
key={col}
|
||||
className="max-w-[150px] truncate whitespace-nowrap border-r border-border px-2 py-1"
|
||||
title={String(row[col])}
|
||||
>
|
||||
{String(row[col] || "")}
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
))}
|
||||
{displayData.length > 10 && (
|
||||
<tr>
|
||||
<td
|
||||
colSpan={excelColumns.length + 1}
|
||||
className="bg-muted/30 px-2 py-1 text-center text-muted-foreground"
|
||||
>
|
||||
... 외 {displayData.length - 10}개 행
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{/* 엑셀처럼 편집 가능한 스프레드시트 */}
|
||||
<EditableSpreadsheet
|
||||
columns={excelColumns}
|
||||
data={displayData}
|
||||
onColumnsChange={(newColumns) => {
|
||||
setExcelColumns(newColumns);
|
||||
// 범위 재계산
|
||||
const lastCol =
|
||||
newColumns.length > 0
|
||||
? String.fromCharCode(64 + newColumns.length)
|
||||
: "A";
|
||||
setDetectedRange(`A1:${lastCol}${displayData.length + 1}`);
|
||||
}}
|
||||
onDataChange={(newData) => {
|
||||
setDisplayData(newData);
|
||||
setAllData(newData);
|
||||
// 범위 재계산
|
||||
const lastCol =
|
||||
excelColumns.length > 0
|
||||
? String.fromCharCode(64 + excelColumns.length)
|
||||
: "A";
|
||||
setDetectedRange(`A1:${lastCol}${newData.length + 1}`);
|
||||
}}
|
||||
maxHeight="320px"
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user