452 lines
18 KiB
TypeScript
452 lines
18 KiB
TypeScript
"use client";
|
|
|
|
/**
|
|
* UnifiedInput 설정 패널
|
|
* 통합 입력 컴포넌트의 세부 설정을 관리합니다.
|
|
*/
|
|
|
|
import React, { useState, useEffect } from "react";
|
|
import { Label } from "@/components/ui/label";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
|
import { Separator } from "@/components/ui/separator";
|
|
import { Checkbox } from "@/components/ui/checkbox";
|
|
import { AutoGenerationType, AutoGenerationConfig } from "@/types/screen";
|
|
import { AutoGenerationUtils } from "@/lib/utils/autoGeneration";
|
|
import { getAvailableNumberingRules } from "@/lib/api/numberingRule";
|
|
import { NumberingRuleConfig } from "@/types/numbering-rule";
|
|
|
|
interface UnifiedInputConfigPanelProps {
|
|
config: Record<string, any>;
|
|
onChange: (config: Record<string, any>) => void;
|
|
menuObjid?: number; // 메뉴 OBJID (채번 규칙 필터링용)
|
|
}
|
|
|
|
export const UnifiedInputConfigPanel: React.FC<UnifiedInputConfigPanelProps> = ({ config, onChange, menuObjid }) => {
|
|
// 채번 규칙 목록 상태
|
|
const [numberingRules, setNumberingRules] = useState<NumberingRuleConfig[]>([]);
|
|
const [loadingRules, setLoadingRules] = useState(false);
|
|
|
|
// 부모 메뉴 목록 상태 (채번규칙 사용을 위한 선택)
|
|
const [parentMenus, setParentMenus] = useState<any[]>([]);
|
|
const [loadingMenus, setLoadingMenus] = useState(false);
|
|
|
|
// 선택된 메뉴 OBJID
|
|
const [selectedMenuObjid, setSelectedMenuObjid] = useState<number | undefined>(() => {
|
|
return config.autoGeneration?.selectedMenuObjid || menuObjid;
|
|
});
|
|
|
|
// 설정 업데이트 핸들러
|
|
const updateConfig = (field: string, value: any) => {
|
|
onChange({ ...config, [field]: value });
|
|
};
|
|
|
|
// 부모 메뉴 목록 로드 (사용자 메뉴의 레벨 2만)
|
|
useEffect(() => {
|
|
const loadMenus = async () => {
|
|
setLoadingMenus(true);
|
|
try {
|
|
const { apiClient } = await import("@/lib/api/client");
|
|
const response = await apiClient.get("/admin/menus");
|
|
|
|
if (response.data.success && response.data.data) {
|
|
const allMenus = response.data.data;
|
|
|
|
// 사용자 메뉴(menu_type='1')의 레벨 2만 필터링
|
|
const level2UserMenus = allMenus.filter((menu: any) =>
|
|
menu.menu_type === '1' && menu.lev === 2
|
|
);
|
|
|
|
setParentMenus(level2UserMenus);
|
|
}
|
|
} catch (error) {
|
|
console.error("부모 메뉴 로드 실패:", error);
|
|
} finally {
|
|
setLoadingMenus(false);
|
|
}
|
|
};
|
|
loadMenus();
|
|
}, []);
|
|
|
|
// 채번 규칙 목록 로드 (선택된 메뉴 기준)
|
|
useEffect(() => {
|
|
const loadRules = async () => {
|
|
if (config.autoGeneration?.type !== "numbering_rule") {
|
|
return;
|
|
}
|
|
|
|
if (!selectedMenuObjid) {
|
|
setNumberingRules([]);
|
|
return;
|
|
}
|
|
|
|
setLoadingRules(true);
|
|
try {
|
|
const response = await getAvailableNumberingRules(selectedMenuObjid);
|
|
|
|
if (response.success && response.data) {
|
|
setNumberingRules(response.data);
|
|
}
|
|
} catch (error) {
|
|
console.error("채번 규칙 목록 로드 실패:", error);
|
|
setNumberingRules([]);
|
|
} finally {
|
|
setLoadingRules(false);
|
|
}
|
|
};
|
|
|
|
loadRules();
|
|
}, [selectedMenuObjid, config.autoGeneration?.type]);
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
{/* 입력 타입 */}
|
|
<div className="space-y-2">
|
|
<Label className="text-xs font-medium">입력 타입</Label>
|
|
<Select
|
|
value={config.inputType || config.type || "text"}
|
|
onValueChange={(value) => updateConfig("inputType", value)}
|
|
>
|
|
<SelectTrigger className="h-8 text-xs">
|
|
<SelectValue placeholder="입력 타입 선택" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="text">텍스트</SelectItem>
|
|
<SelectItem value="number">숫자</SelectItem>
|
|
<SelectItem value="password">비밀번호</SelectItem>
|
|
<SelectItem value="textarea">여러 줄 텍스트</SelectItem>
|
|
<SelectItem value="slider">슬라이더</SelectItem>
|
|
<SelectItem value="color">색상 선택</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
<Separator />
|
|
|
|
{/* 형식 (텍스트/숫자용) */}
|
|
{(config.inputType === "text" || !config.inputType) && (
|
|
<div className="space-y-2">
|
|
<Label className="text-xs font-medium">입력 형식</Label>
|
|
<Select value={config.format || "none"} onValueChange={(value) => updateConfig("format", value)}>
|
|
<SelectTrigger className="h-8 text-xs">
|
|
<SelectValue placeholder="형식 선택" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="none">제한 없음</SelectItem>
|
|
<SelectItem value="email">이메일</SelectItem>
|
|
<SelectItem value="tel">전화번호</SelectItem>
|
|
<SelectItem value="url">URL</SelectItem>
|
|
<SelectItem value="currency">통화</SelectItem>
|
|
<SelectItem value="biz_no">사업자번호</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
)}
|
|
|
|
{/* 플레이스홀더 */}
|
|
<div className="space-y-2">
|
|
<Label className="text-xs font-medium">플레이스홀더</Label>
|
|
<Input
|
|
value={config.placeholder || ""}
|
|
onChange={(e) => updateConfig("placeholder", e.target.value)}
|
|
placeholder="입력 안내 텍스트"
|
|
className="h-8 text-xs"
|
|
/>
|
|
</div>
|
|
|
|
{/* 숫자/슬라이더 전용 설정 */}
|
|
{(config.inputType === "number" || config.inputType === "slider") && (
|
|
<>
|
|
<Separator />
|
|
<div className="grid grid-cols-3 gap-2">
|
|
<div className="space-y-2">
|
|
<Label className="text-xs font-medium">최소값</Label>
|
|
<Input
|
|
type="number"
|
|
value={config.min ?? ""}
|
|
onChange={(e) => updateConfig("min", e.target.value ? Number(e.target.value) : undefined)}
|
|
placeholder="0"
|
|
className="h-8 text-xs"
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label className="text-xs font-medium">최대값</Label>
|
|
<Input
|
|
type="number"
|
|
value={config.max ?? ""}
|
|
onChange={(e) => updateConfig("max", e.target.value ? Number(e.target.value) : undefined)}
|
|
placeholder="100"
|
|
className="h-8 text-xs"
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label className="text-xs font-medium">단계</Label>
|
|
<Input
|
|
type="number"
|
|
value={config.step ?? ""}
|
|
onChange={(e) => updateConfig("step", e.target.value ? Number(e.target.value) : undefined)}
|
|
placeholder="1"
|
|
className="h-8 text-xs"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)}
|
|
|
|
{/* 여러 줄 텍스트 전용 설정 */}
|
|
{config.inputType === "textarea" && (
|
|
<div className="space-y-2">
|
|
<Label className="text-xs font-medium">줄 수</Label>
|
|
<Input
|
|
type="number"
|
|
value={config.rows || 3}
|
|
onChange={(e) => updateConfig("rows", parseInt(e.target.value) || 3)}
|
|
min={2}
|
|
max={20}
|
|
className="h-8 text-xs"
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
{/* 마스크 입력 (선택) */}
|
|
<div className="space-y-2">
|
|
<Label className="text-xs font-medium">입력 마스크 (선택)</Label>
|
|
<Input
|
|
value={config.mask || ""}
|
|
onChange={(e) => updateConfig("mask", e.target.value)}
|
|
placeholder="예: ###-####-####"
|
|
className="h-8 text-xs"
|
|
/>
|
|
<p className="text-muted-foreground text-[10px]"># = 숫자, A = 문자, * = 모든 문자</p>
|
|
</div>
|
|
|
|
<Separator />
|
|
|
|
{/* 자동생성 기능 */}
|
|
<div className="space-y-3">
|
|
<div className="flex items-center space-x-2">
|
|
<Checkbox
|
|
id="autoGenerationEnabled"
|
|
checked={config.autoGeneration?.enabled || false}
|
|
onCheckedChange={(checked) => {
|
|
const currentConfig = config.autoGeneration || { type: "none", enabled: false };
|
|
updateConfig("autoGeneration", {
|
|
...currentConfig,
|
|
enabled: checked as boolean,
|
|
});
|
|
}}
|
|
/>
|
|
<Label htmlFor="autoGenerationEnabled" className="text-xs font-medium cursor-pointer">
|
|
자동생성 활성화
|
|
</Label>
|
|
</div>
|
|
|
|
{/* 자동생성 타입 선택 */}
|
|
{config.autoGeneration?.enabled && (
|
|
<div className="space-y-3 pl-6">
|
|
<div className="space-y-2">
|
|
<Label className="text-xs font-medium">자동생성 타입</Label>
|
|
<Select
|
|
value={config.autoGeneration?.type || "none"}
|
|
onValueChange={(value: AutoGenerationType) => {
|
|
const currentConfig = config.autoGeneration || { type: "none", enabled: false };
|
|
updateConfig("autoGeneration", {
|
|
...currentConfig,
|
|
type: value,
|
|
});
|
|
}}
|
|
>
|
|
<SelectTrigger className="h-8 text-xs">
|
|
<SelectValue placeholder="자동생성 타입 선택" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="none">자동생성 없음</SelectItem>
|
|
<SelectItem value="uuid">UUID 생성</SelectItem>
|
|
<SelectItem value="current_user">현재 사용자 ID</SelectItem>
|
|
<SelectItem value="current_time">현재 시간</SelectItem>
|
|
<SelectItem value="sequence">순차 번호</SelectItem>
|
|
<SelectItem value="numbering_rule">채번 규칙</SelectItem>
|
|
<SelectItem value="random_string">랜덤 문자열</SelectItem>
|
|
<SelectItem value="random_number">랜덤 숫자</SelectItem>
|
|
<SelectItem value="company_code">회사 코드</SelectItem>
|
|
<SelectItem value="department">부서 코드</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
|
|
{/* 선택된 타입 설명 */}
|
|
{config.autoGeneration?.type && config.autoGeneration.type !== "none" && (
|
|
<p className="text-muted-foreground text-[10px]">
|
|
{AutoGenerationUtils.getTypeDescription(config.autoGeneration.type)}
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
{/* 채번 규칙 선택 */}
|
|
{config.autoGeneration?.type === "numbering_rule" && (
|
|
<>
|
|
{/* 부모 메뉴 선택 */}
|
|
<div className="space-y-2">
|
|
<Label className="text-xs font-medium">
|
|
대상 메뉴 <span className="text-destructive">*</span>
|
|
</Label>
|
|
<Select
|
|
value={selectedMenuObjid?.toString() || ""}
|
|
onValueChange={(value) => {
|
|
const menuId = parseInt(value);
|
|
setSelectedMenuObjid(menuId);
|
|
|
|
updateConfig("autoGeneration", {
|
|
...config.autoGeneration,
|
|
selectedMenuObjid: menuId,
|
|
});
|
|
}}
|
|
disabled={loadingMenus}
|
|
>
|
|
<SelectTrigger className="h-8 text-xs">
|
|
<SelectValue placeholder={loadingMenus ? "메뉴 로딩 중..." : "채번규칙을 사용할 메뉴 선택"} />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{parentMenus.length === 0 ? (
|
|
<SelectItem value="no-menus" disabled>
|
|
사용 가능한 메뉴가 없습니다
|
|
</SelectItem>
|
|
) : (
|
|
parentMenus.map((menu) => (
|
|
<SelectItem key={menu.objid} value={menu.objid.toString()}>
|
|
{menu.menu_name_kor}
|
|
</SelectItem>
|
|
))
|
|
)}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
{/* 채번 규칙 선택 */}
|
|
{selectedMenuObjid ? (
|
|
<div className="space-y-2">
|
|
<Label className="text-xs font-medium">
|
|
채번 규칙 <span className="text-destructive">*</span>
|
|
</Label>
|
|
<Select
|
|
value={config.autoGeneration?.options?.numberingRuleId || ""}
|
|
onValueChange={(value) => {
|
|
updateConfig("autoGeneration", {
|
|
...config.autoGeneration,
|
|
options: {
|
|
...config.autoGeneration?.options,
|
|
numberingRuleId: value,
|
|
},
|
|
});
|
|
}}
|
|
disabled={loadingRules}
|
|
>
|
|
<SelectTrigger className="h-8 text-xs">
|
|
<SelectValue placeholder={loadingRules ? "규칙 로딩 중..." : "채번 규칙 선택"} />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{numberingRules.length === 0 ? (
|
|
<SelectItem value="no-rules" disabled>
|
|
사용 가능한 규칙이 없습니다
|
|
</SelectItem>
|
|
) : (
|
|
numberingRules.map((rule) => (
|
|
<SelectItem key={rule.ruleId} value={rule.ruleId}>
|
|
{rule.ruleName}
|
|
</SelectItem>
|
|
))
|
|
)}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
) : (
|
|
<div className="rounded-md border border-amber-200 bg-amber-50 p-2 text-xs text-amber-800">
|
|
먼저 대상 메뉴를 선택하세요
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
|
|
{/* 자동생성 옵션 (랜덤/순차용) */}
|
|
{config.autoGeneration?.type &&
|
|
["random_string", "random_number", "sequence"].includes(config.autoGeneration.type) && (
|
|
<div className="space-y-2">
|
|
{/* 길이 설정 */}
|
|
{["random_string", "random_number"].includes(config.autoGeneration.type) && (
|
|
<div className="space-y-1">
|
|
<Label className="text-xs font-medium">길이</Label>
|
|
<Input
|
|
type="number"
|
|
min="1"
|
|
max="50"
|
|
value={config.autoGeneration?.options?.length || 8}
|
|
onChange={(e) => {
|
|
updateConfig("autoGeneration", {
|
|
...config.autoGeneration,
|
|
options: {
|
|
...config.autoGeneration?.options,
|
|
length: parseInt(e.target.value) || 8,
|
|
},
|
|
});
|
|
}}
|
|
className="h-8 text-xs"
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
{/* 접두사 */}
|
|
<div className="space-y-1">
|
|
<Label className="text-xs font-medium">접두사</Label>
|
|
<Input
|
|
value={config.autoGeneration?.options?.prefix || ""}
|
|
onChange={(e) => {
|
|
updateConfig("autoGeneration", {
|
|
...config.autoGeneration,
|
|
options: {
|
|
...config.autoGeneration?.options,
|
|
prefix: e.target.value,
|
|
},
|
|
});
|
|
}}
|
|
placeholder="예: INV-"
|
|
className="h-8 text-xs"
|
|
/>
|
|
</div>
|
|
|
|
{/* 접미사 */}
|
|
<div className="space-y-1">
|
|
<Label className="text-xs font-medium">접미사</Label>
|
|
<Input
|
|
value={config.autoGeneration?.options?.suffix || ""}
|
|
onChange={(e) => {
|
|
updateConfig("autoGeneration", {
|
|
...config.autoGeneration,
|
|
options: {
|
|
...config.autoGeneration?.options,
|
|
suffix: e.target.value,
|
|
},
|
|
});
|
|
}}
|
|
className="h-8 text-xs"
|
|
/>
|
|
</div>
|
|
|
|
{/* 미리보기 */}
|
|
<div className="space-y-1">
|
|
<Label className="text-xs font-medium">미리보기</Label>
|
|
<div className="rounded border bg-muted p-2 text-xs font-mono">
|
|
{AutoGenerationUtils.generatePreviewValue(config.autoGeneration)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
UnifiedInputConfigPanel.displayName = "UnifiedInputConfigPanel";
|
|
|
|
export default UnifiedInputConfigPanel;
|