chpark/vexplor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

테이블 추가기능 수정사항

Browse Source
This commit is contained in:
kjs
2025-09-23 10:40:21 +09:00
parent 474cc33aee
commit e653effac0
19 changed files with 1931 additions and 201 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
frontend/components/admin/AddColumnModal.tsx
View File

@@ -20,17 +20,17 @@ import { ddlApi } from "../../lib/api/ddl";
import {
AddColumnModalProps,
CreateColumnDefinition,
WEB_TYPE_OPTIONS,
VALIDATION_RULES,
RESERVED_WORDS,
RESERVED_COLUMNS,
} from "../../types/ddl";
import { INPUT_TYPE_OPTIONS } from "../../types/input-types";
export function AddColumnModal({ isOpen, onClose, tableName, onSuccess }: AddColumnModalProps) {
const [column, setColumn] = useState<CreateColumnDefinition>({
name: "",
label: "",
webType: "text",
inputType: "text",
nullable: true,
order: 0,
});
@@ -44,7 +44,7 @@ export function AddColumnModal({ isOpen, onClose, tableName, onSuccess }: AddCol
setColumn({
name: "",
label: "",
webType: "text",
inputType: "text",
nullable: true,
order: 0,
});
@@ -114,14 +114,14 @@ export function AddColumnModal({ isOpen, onClose, tableName, onSuccess }: AddCol
}
}
// 웹타입 검증
if (!columnData.webType) {
errors.push("웹타입을 선택해주세요.");
// 입력타입 검증
if (!columnData.inputType) {
errors.push("입력타입을 선택해주세요.");
}
// 길이 검증 (길이를 지원하는 타입인 경우)
const webTypeOption = WEB_TYPE_OPTIONS.find((opt) => opt.value === columnData.webType);
if (webTypeOption?.supportsLength && columnData.length !== undefined) {
const inputTypeOption = INPUT_TYPE_OPTIONS.find((opt) => opt.value === columnData.inputType);
if (inputTypeOption?.supportsLength && columnData.length !== undefined) {
if (
columnData.length < VALIDATION_RULES.columnLength.min ||
columnData.length > VALIDATION_RULES.columnLength.max
@@ -135,19 +135,19 @@ export function AddColumnModal({ isOpen, onClose, tableName, onSuccess }: AddCol
};
/**
* 웹타입 변경 처리
* 입력타입 변경 처리
*/
const handleWebTypeChange = (webType: string) => {
const webTypeOption = WEB_TYPE_OPTIONS.find((opt) => opt.value === webType);
const updates: Partial<CreateColumnDefinition> = { webType: webType as any };
const handleInputTypeChange = (inputType: string) => {
const inputTypeOption = INPUT_TYPE_OPTIONS.find((opt) => opt.value === inputType);
const updates: Partial<CreateColumnDefinition> = { inputType: inputType as any };
// 길이를 지원하는 타입이고 현재 길이가 없으면 기본값 설정
if (webTypeOption?.supportsLength && !column.length && webTypeOption.defaultLength) {
updates.length = webTypeOption.defaultLength;
if (inputTypeOption?.supportsLength && !column.length && inputTypeOption.defaultLength) {
updates.length = inputTypeOption.defaultLength;
}
// 길이를 지원하지 않는 타입이면 길이 제거
if (!webTypeOption?.supportsLength) {
if (!inputTypeOption?.supportsLength) {
updates.length = undefined;
}
@@ -185,9 +185,9 @@ export function AddColumnModal({ isOpen, onClose, tableName, onSuccess }: AddCol
/**
* 폼 유효성 확인
*/
const isFormValid = validationErrors.length === 0 && column.name && column.webType;
const isFormValid = validationErrors.length === 0 && column.name && column.inputType;
const webTypeOption = WEB_TYPE_OPTIONS.find((opt) => opt.value === column.webType);
const inputTypeOption = INPUT_TYPE_OPTIONS.find((opt) => opt.value === column.inputType);
return (
<Dialog open={isOpen} onOpenChange={onClose}>
@@ -248,14 +248,14 @@ export function AddColumnModal({ isOpen, onClose, tableName, onSuccess }: AddCol
<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
<div className="space-y-2">
<Label>
웹타입 <span className="text-red-500">*</span>
입력타입 <span className="text-red-500">*</span>
</Label>
<Select value={column.webType} onValueChange={handleWebTypeChange} disabled={loading}>
<Select value={column.inputType} onValueChange={handleInputTypeChange} disabled={loading}>
<SelectTrigger>
<SelectValue placeholder="웹타입 선택" />
<SelectValue placeholder="입력타입 선택" />
</SelectTrigger>
<SelectContent>
{WEB_TYPE_OPTIONS.map((option) => (
{INPUT_TYPE_OPTIONS.map((option) => (
<SelectItem key={option.value} value={option.value}>
<div>
<div className="font-medium">{option.label}</div>
@@ -280,13 +280,13 @@ export function AddColumnModal({ isOpen, onClose, tableName, onSuccess }: AddCol
length: e.target.value ? parseInt(e.target.value) : undefined,
})
}
placeholder={webTypeOption?.defaultLength?.toString() || ""}
disabled={loading || !webTypeOption?.supportsLength}
placeholder={inputTypeOption?.defaultLength?.toString() || ""}
disabled={loading || !inputTypeOption?.supportsLength}
min={1}
max={65535}
/>
<p className="text-muted-foreground text-xs">
{webTypeOption?.supportsLength ? "1-65535 범위에서 설정 가능" : "이 타입은 길이 설정이 불가능합니다"}
{inputTypeOption?.supportsLength ? "1-65535 범위에서 설정 가능" : "이 타입은 길이 설정이 불가능합니다"}
</p>
</div>
</div>

42
frontend/components/admin/ColumnDefinitionTable.tsx
View File

@@ -17,11 +17,11 @@ import { Alert, AlertDescription } from "@/components/ui/alert";
import {
CreateColumnDefinition,
ColumnDefinitionTableProps,
WEB_TYPE_OPTIONS,
VALIDATION_RULES,
RESERVED_WORDS,
RESERVED_COLUMNS,
} from "../../types/ddl";
import { INPUT_TYPE_OPTIONS } from "../../types/input-types";
export function ColumnDefinitionTable({ columns, onChange, disabled = false }: ColumnDefinitionTableProps) {
const [validationErrors, setValidationErrors] = useState<Record<number, string[]>>({});
@@ -105,14 +105,14 @@ export function ColumnDefinitionTable({ columns, onChange, disabled = false }: C
}
}
// 웹타입 검증
if (!column.webType) {
errors.push("웹타입을 선택해주세요");
// 입력타입 검증
if (!column.inputType) {
errors.push("입력타입을 선택해주세요");
}
// 길이 검증 (길이를 지원하는 타입인 경우)
const webTypeOption = WEB_TYPE_OPTIONS.find((opt) => opt.value === column.webType);
if (webTypeOption?.supportsLength && column.length !== undefined) {
const inputTypeOption = INPUT_TYPE_OPTIONS.find((opt) => opt.value === column.inputType);
if (inputTypeOption?.supportsLength && column.length !== undefined) {
if (column.length < VALIDATION_RULES.columnLength.min || column.length > VALIDATION_RULES.columnLength.max) {
errors.push(VALIDATION_RULES.columnLength.errorMessage);
}
@@ -128,19 +128,19 @@ export function ColumnDefinitionTable({ columns, onChange, disabled = false }: C
};
/**
* 웹타입 변경 시 길이 기본값 설정
* 입력타입 변경 시 길이 기본값 설정
*/
const handleWebTypeChange = (index: number, webType: string) => {
const webTypeOption = WEB_TYPE_OPTIONS.find((opt) => opt.value === webType);
const updates: Partial<CreateColumnDefinition> = { webType: webType as any };
const handleInputTypeChange = (index: number, inputType: string) => {
const inputTypeOption = INPUT_TYPE_OPTIONS.find((opt) => opt.value === inputType);
const updates: Partial<CreateColumnDefinition> = { inputType: inputType as any };
// 길이를 지원하는 타입이고 현재 길이가 없으면 기본값 설정
if (webTypeOption?.supportsLength && !columns[index].length && webTypeOption.defaultLength) {
updates.length = webTypeOption.defaultLength;
if (inputTypeOption?.supportsLength && !columns[index].length && inputTypeOption.defaultLength) {
updates.length = inputTypeOption.defaultLength;
}
// 길이를 지원하지 않는 타입이면 길이 제거
if (!webTypeOption?.supportsLength) {
if (!inputTypeOption?.supportsLength) {
updates.length = undefined;
}
@@ -172,7 +172,7 @@ export function ColumnDefinitionTable({ columns, onChange, disabled = false }: C
</TableHead>
<TableHead className="w-[150px]">라벨</TableHead>
<TableHead className="w-[120px]">
웹타입 <span className="text-red-500">*</span>
입력타입 <span className="text-red-500">*</span>
</TableHead>
<TableHead className="w-[80px]">필수</TableHead>
<TableHead className="w-[100px]">길이</TableHead>
@@ -183,7 +183,7 @@ export function ColumnDefinitionTable({ columns, onChange, disabled = false }: C
</TableHeader>
<TableBody>
{columns.map((column, index) => {
const webTypeOption = WEB_TYPE_OPTIONS.find((opt) => opt.value === column.webType);
const inputTypeOption = INPUT_TYPE_OPTIONS.find((opt) => opt.value === column.inputType);
const rowErrors = validationErrors[index] || [];
const hasRowError = rowErrors.length > 0;
@@ -219,15 +219,15 @@ export function ColumnDefinitionTable({ columns, onChange, disabled = false }: C
<TableCell>
<Select
value={column.webType}
onValueChange={(value) => handleWebTypeChange(index, value)}
value={column.inputType}
onValueChange={(value) => handleInputTypeChange(index, value)}
disabled={disabled}
>
<SelectTrigger>
<SelectValue placeholder="선택" />
<SelectValue placeholder="입력 타입 선택" />
</SelectTrigger>
<SelectContent>
{WEB_TYPE_OPTIONS.map((option) => (
{INPUT_TYPE_OPTIONS.map((option) => (
<SelectItem key={option.value} value={option.value}>
<div>
<div className="font-medium">{option.label}</div>
@@ -260,8 +260,8 @@ export function ColumnDefinitionTable({ columns, onChange, disabled = false }: C
length: e.target.value ? parseInt(e.target.value) : undefined,
})
}
placeholder={webTypeOption?.defaultLength?.toString() || ""}
disabled={disabled || !webTypeOption?.supportsLength}
placeholder={inputTypeOption?.defaultLength?.toString() || ""}
disabled={disabled || !inputTypeOption?.supportsLength}
min={1}
max={65535}
/>

12
frontend/components/admin/CreateTableModal.tsx
View File

@@ -38,7 +38,7 @@ export function CreateTableModal({ isOpen, onClose, onSuccess }: CreateTableModa
{
name: "",
label: "",
webType: "text",
inputType: "text",
nullable: true,
order: 1,
},
@@ -58,7 +58,7 @@ export function CreateTableModal({ isOpen, onClose, onSuccess }: CreateTableModa
{
name: "",
label: "",
webType: "text",
inputType: "text",
nullable: true,
order: 1,
},
@@ -134,7 +134,7 @@ export function CreateTableModal({ isOpen, onClose, onSuccess }: CreateTableModa
{
name: "",
label: "",
webType: "text",
inputType: "text",
nullable: true,
order: columns.length + 1,
},
@@ -150,7 +150,7 @@ export function CreateTableModal({ isOpen, onClose, onSuccess }: CreateTableModa
return;
}
const validColumns = columns.filter((col) => col.name && col.webType);
const validColumns = columns.filter((col) => col.name && col.inputType);
if (validColumns.length === 0) {
toast.error("최소 1개의 유효한 컬럼이 필요합니다.");
return;
@@ -188,7 +188,7 @@ export function CreateTableModal({ isOpen, onClose, onSuccess }: CreateTableModa
return;
}
const validColumns = columns.filter((col) => col.name && col.webType);
const validColumns = columns.filter((col) => col.name && col.inputType);
if (validColumns.length === 0) {
toast.error("최소 1개의 유효한 컬럼이 필요합니다.");
return;
@@ -220,7 +220,7 @@ export function CreateTableModal({ isOpen, onClose, onSuccess }: CreateTableModa
/**
* 폼 유효성 확인
*/
const isFormValid = !tableNameError && tableName && columns.some((col) => col.name && col.webType);
const isFormValid = !tableNameError && tableName && columns.some((col) => col.name && col.inputType);
return (
<Dialog open={isOpen} onOpenChange={onClose}>