테이블 추가기능 수정사항

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

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>