779 lines
31 KiB
TypeScript
779 lines
31 KiB
TypeScript
"use client";
|
|
|
|
import React, { useEffect, useState } from "react";
|
|
import { ComponentRendererProps } from "@/types/component";
|
|
import { AutoGenerationConfig } from "@/types/screen";
|
|
import { TextInputConfig } from "./types";
|
|
import { filterDOMProps } from "@/lib/utils/domPropsFilter";
|
|
import { AutoGenerationUtils } from "@/lib/utils/autoGeneration";
|
|
import { INPUT_CLASSES, cn, getInputClasses } from "../common/inputStyles";
|
|
import { ChevronDown, Check, ChevronsUpDown } from "lucide-react";
|
|
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
|
|
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
|
|
|
|
export interface TextInputComponentProps extends ComponentRendererProps {
|
|
config?: TextInputConfig;
|
|
}
|
|
|
|
/**
|
|
* TextInput 컴포넌트
|
|
* text-input 컴포넌트입니다
|
|
*/
|
|
export const TextInputComponent: React.FC<TextInputComponentProps> = ({
|
|
component,
|
|
isDesignMode = false,
|
|
isSelected = false,
|
|
isInteractive = false,
|
|
onClick,
|
|
onDragStart,
|
|
onDragEnd,
|
|
config,
|
|
className,
|
|
style,
|
|
formData,
|
|
onFormDataChange,
|
|
...props
|
|
}) => {
|
|
// 컴포넌트 설정
|
|
const componentConfig = {
|
|
...config,
|
|
...component.config,
|
|
} as TextInputConfig;
|
|
|
|
// 자동생성 설정 (props에서 전달받은 값 우선 사용)
|
|
const autoGeneration: AutoGenerationConfig = props.autoGeneration ||
|
|
component.autoGeneration ||
|
|
componentConfig.autoGeneration || {
|
|
type: "none",
|
|
enabled: false,
|
|
};
|
|
|
|
// 숨김 상태 (props에서 전달받은 값 우선 사용)
|
|
const isHidden = props.hidden !== undefined ? props.hidden : component.hidden || componentConfig.hidden || false;
|
|
|
|
// 자동생성된 값 상태
|
|
const [autoGeneratedValue, setAutoGeneratedValue] = useState<string>("");
|
|
|
|
// API 호출 중복 방지를 위한 ref
|
|
const isGeneratingRef = React.useRef(false);
|
|
const hasGeneratedRef = React.useRef(false);
|
|
|
|
// 테스트용: 컴포넌트 라벨에 "test"가 포함되면 강제로 UUID 자동생성 활성화
|
|
const testAutoGeneration = component.label?.toLowerCase().includes("test")
|
|
? {
|
|
type: "uuid" as AutoGenerationType,
|
|
enabled: true,
|
|
}
|
|
: autoGeneration;
|
|
|
|
// 디버그 로그 (필요시 주석 해제)
|
|
// console.log("🔧 텍스트 입력 컴포넌트 설정:", {
|
|
// config,
|
|
// componentConfig,
|
|
// component: component,
|
|
// autoGeneration,
|
|
// testAutoGeneration,
|
|
// isTestMode: component.label?.toLowerCase().includes("test"),
|
|
// isHidden,
|
|
// isInteractive,
|
|
// formData,
|
|
// columnName: component.columnName,
|
|
// currentFormValue: formData?.[component.columnName],
|
|
// componentValue: component.value,
|
|
// autoGeneratedValue,
|
|
// });
|
|
|
|
// 자동생성 값 생성 (컴포넌트 마운트 시 한 번만 실행)
|
|
useEffect(() => {
|
|
const generateAutoValue = async () => {
|
|
// 이미 생성 중이거나 생성 완료된 경우 중복 실행 방지
|
|
if (isGeneratingRef.current || hasGeneratedRef.current) {
|
|
console.log("⏭️ 중복 실행 방지:", {
|
|
isGenerating: isGeneratingRef.current,
|
|
hasGenerated: hasGeneratedRef.current,
|
|
});
|
|
return;
|
|
}
|
|
|
|
if (testAutoGeneration.enabled && testAutoGeneration.type !== "none") {
|
|
// 폼 데이터에 이미 값이 있으면 자동생성하지 않음
|
|
const currentFormValue = formData?.[component.columnName];
|
|
const currentComponentValue = component.value;
|
|
|
|
console.log("🔧 TextInput 자동생성 체크:", {
|
|
componentId: component.id,
|
|
columnName: component.columnName,
|
|
autoGenType: testAutoGeneration.type,
|
|
ruleId: testAutoGeneration.options?.numberingRuleId,
|
|
currentFormValue,
|
|
currentComponentValue,
|
|
autoGeneratedValue,
|
|
isInteractive,
|
|
});
|
|
|
|
// 자동생성된 값이 없고, 현재 값도 없을 때만 생성
|
|
if (!autoGeneratedValue && !currentFormValue && !currentComponentValue) {
|
|
isGeneratingRef.current = true; // 생성 시작 플래그
|
|
let generatedValue: string | null = null;
|
|
|
|
// 채번 규칙은 비동기로 처리
|
|
if (testAutoGeneration.type === "numbering_rule") {
|
|
const ruleId = testAutoGeneration.options?.numberingRuleId;
|
|
if (ruleId) {
|
|
try {
|
|
console.log("🚀 채번 규칙 API 호출 시작:", ruleId);
|
|
const { generateNumberingCode } = await import("@/lib/api/numberingRule");
|
|
const response = await generateNumberingCode(ruleId);
|
|
console.log("✅ 채번 규칙 API 응답:", response);
|
|
if (response.success && response.data) {
|
|
generatedValue = response.data.generatedCode;
|
|
}
|
|
} catch (error) {
|
|
console.error("❌ 채번 규칙 코드 생성 실패:", error);
|
|
} finally {
|
|
isGeneratingRef.current = false; // 생성 완료
|
|
}
|
|
} else {
|
|
console.warn("⚠️ 채번 규칙 ID가 없습니다");
|
|
isGeneratingRef.current = false;
|
|
}
|
|
} else {
|
|
// 기타 타입은 동기로 처리
|
|
generatedValue = AutoGenerationUtils.generateValue(testAutoGeneration, component.columnName);
|
|
isGeneratingRef.current = false;
|
|
}
|
|
|
|
if (generatedValue) {
|
|
console.log("✅ 자동생성 값 설정:", generatedValue);
|
|
setAutoGeneratedValue(generatedValue);
|
|
hasGeneratedRef.current = true; // 생성 완료 플래그
|
|
|
|
// 폼 데이터에 자동생성된 값 설정 (인터랙티브 모드에서만)
|
|
if (isInteractive && onFormDataChange && component.columnName) {
|
|
console.log("📝 formData 업데이트:", component.columnName, generatedValue);
|
|
onFormDataChange(component.columnName, generatedValue);
|
|
|
|
// 채번 규칙 ID도 함께 저장 (저장 시점에 실제 할당하기 위함)
|
|
if (testAutoGeneration.type === "numbering_rule" && testAutoGeneration.options?.numberingRuleId) {
|
|
const ruleIdKey = `${component.columnName}_numberingRuleId`;
|
|
onFormDataChange(ruleIdKey, testAutoGeneration.options.numberingRuleId);
|
|
console.log("📝 채번 규칙 ID 저장:", ruleIdKey, testAutoGeneration.options.numberingRuleId);
|
|
}
|
|
}
|
|
}
|
|
} else if (!autoGeneratedValue && testAutoGeneration.type !== "none") {
|
|
// 디자인 모드에서도 미리보기용 자동생성 값 표시
|
|
const previewValue = AutoGenerationUtils.generatePreviewValue(testAutoGeneration);
|
|
console.log("👁️ 미리보기 값 설정:", previewValue);
|
|
setAutoGeneratedValue(previewValue);
|
|
hasGeneratedRef.current = true;
|
|
}
|
|
}
|
|
};
|
|
|
|
generateAutoValue();
|
|
}, [testAutoGeneration.enabled, testAutoGeneration.type, component.columnName, isInteractive]);
|
|
|
|
// 실제 화면에서 숨김 처리된 컴포넌트는 렌더링하지 않음
|
|
if (isHidden && !isDesignMode) {
|
|
return null;
|
|
}
|
|
|
|
// 스타일 계산 (위치는 RealtimePreviewDynamic에서 처리하므로 제외)
|
|
const componentStyle: React.CSSProperties = {
|
|
width: "100%",
|
|
height: "100%",
|
|
...component.style,
|
|
...style,
|
|
// width는 항상 100%로 고정 (부모 컨테이너가 gridColumns로 크기 제어)
|
|
width: "100%",
|
|
// 숨김 기능: 편집 모드에서만 연하게 표시
|
|
...(isHidden &&
|
|
isDesignMode && {
|
|
opacity: 0.4,
|
|
backgroundColor: "hsl(var(--muted))",
|
|
pointerEvents: "auto",
|
|
}),
|
|
};
|
|
|
|
// 디자인 모드 스타일
|
|
if (isDesignMode) {
|
|
componentStyle.border = "1px dashed hsl(var(--border))";
|
|
componentStyle.borderColor = isSelected ? "hsl(var(--ring))" : "hsl(var(--border))";
|
|
}
|
|
|
|
// 이벤트 핸들러
|
|
const handleClick = (e: React.MouseEvent) => {
|
|
e.stopPropagation();
|
|
onClick?.();
|
|
};
|
|
|
|
// DOM에 전달하면 안 되는 React-specific props 필터링
|
|
const {
|
|
selectedScreen,
|
|
onZoneComponentDrop,
|
|
onZoneClick,
|
|
componentConfig: _componentConfig,
|
|
component: _component,
|
|
isSelected: _isSelected,
|
|
onClick: _onClick,
|
|
onDragStart: _onDragStart,
|
|
onDragEnd: _onDragEnd,
|
|
size: _size,
|
|
position: _position,
|
|
style: _style,
|
|
screenId: _screenId,
|
|
tableName: _tableName,
|
|
onRefresh: _onRefresh,
|
|
onClose: _onClose,
|
|
autoGeneration: _autoGeneration,
|
|
hidden: _hidden,
|
|
isInModal: _isInModal,
|
|
isPreview: _isPreview,
|
|
originalData: _originalData,
|
|
allComponents: _allComponents,
|
|
selectedRows: _selectedRows,
|
|
selectedRowsData: _selectedRowsData,
|
|
refreshKey: _refreshKey,
|
|
onUpdateLayout: _onUpdateLayout,
|
|
onSelectedRowsChange: _onSelectedRowsChange,
|
|
onConfigChange: _onConfigChange,
|
|
...domProps
|
|
} = props;
|
|
|
|
// DOM 안전한 props만 필터링
|
|
const safeDomProps = filterDOMProps(domProps);
|
|
|
|
// webType에 따른 실제 input type 및 검증 규칙 결정
|
|
const webType = component.componentConfig?.webType || "text";
|
|
const inputType = (() => {
|
|
switch (webType) {
|
|
case "email":
|
|
return "email";
|
|
case "tel":
|
|
return "tel";
|
|
case "url":
|
|
return "url";
|
|
case "password":
|
|
return "password";
|
|
case "textarea":
|
|
return "text"; // textarea는 별도 처리
|
|
case "text":
|
|
default:
|
|
return "text";
|
|
}
|
|
})();
|
|
|
|
// webType별 검증 패턴
|
|
const validationPattern = (() => {
|
|
switch (webType) {
|
|
case "tel":
|
|
// 한국 전화번호 형식: 010-1234-5678, 02-1234-5678 등
|
|
return "[0-9]{2,3}-[0-9]{3,4}-[0-9]{4}";
|
|
default:
|
|
return undefined;
|
|
}
|
|
})();
|
|
|
|
// webType별 placeholder
|
|
const defaultPlaceholder = (() => {
|
|
switch (webType) {
|
|
case "email":
|
|
return "example@email.com";
|
|
case "tel":
|
|
return "010-1234-5678";
|
|
case "url":
|
|
return "https://example.com";
|
|
case "password":
|
|
return "비밀번호를 입력하세요";
|
|
case "textarea":
|
|
return "내용을 입력하세요";
|
|
default:
|
|
return "텍스트를 입력하세요";
|
|
}
|
|
})();
|
|
|
|
// 이메일 입력 상태 (username@domain 분리)
|
|
const [emailUsername, setEmailUsername] = React.useState("");
|
|
const [emailDomain, setEmailDomain] = React.useState("gmail.com");
|
|
const [emailDomainOpen, setEmailDomainOpen] = React.useState(false);
|
|
|
|
// 전화번호 입력 상태 (3개 부분으로 분리)
|
|
const [telPart1, setTelPart1] = React.useState("");
|
|
const [telPart2, setTelPart2] = React.useState("");
|
|
const [telPart3, setTelPart3] = React.useState("");
|
|
|
|
// URL 입력 상태 (프로토콜 + 도메인)
|
|
const [urlProtocol, setUrlProtocol] = React.useState("https://");
|
|
const [urlDomain, setUrlDomain] = React.useState("");
|
|
|
|
// 이메일 도메인 목록
|
|
const emailDomains = ["gmail.com", "naver.com", "daum.net", "kakao.com", "직접입력"];
|
|
|
|
// 이메일 값 동기화
|
|
React.useEffect(() => {
|
|
if (webType === "email") {
|
|
const currentValue =
|
|
isInteractive && formData && component.columnName ? formData[component.columnName] : component.value || "";
|
|
|
|
if (currentValue && typeof currentValue === "string" && currentValue.includes("@")) {
|
|
const [username, domain] = currentValue.split("@");
|
|
setEmailUsername(username || "");
|
|
setEmailDomain(domain || "gmail.com");
|
|
}
|
|
}
|
|
}, [webType, component.value, formData, component.columnName, isInteractive]);
|
|
|
|
// 전화번호 값 동기화
|
|
React.useEffect(() => {
|
|
if (webType === "tel") {
|
|
const currentValue =
|
|
isInteractive && formData && component.columnName ? formData[component.columnName] : component.value || "";
|
|
|
|
if (currentValue && typeof currentValue === "string") {
|
|
const parts = currentValue.split("-");
|
|
setTelPart1(parts[0] || "");
|
|
setTelPart2(parts[1] || "");
|
|
setTelPart3(parts[2] || "");
|
|
}
|
|
}
|
|
}, [webType, component.value, formData, component.columnName, isInteractive]);
|
|
|
|
// URL 값 동기화
|
|
React.useEffect(() => {
|
|
if (webType === "url") {
|
|
const currentValue =
|
|
isInteractive && formData && component.columnName ? formData[component.columnName] : component.value || "";
|
|
|
|
if (currentValue && typeof currentValue === "string") {
|
|
if (currentValue.startsWith("https://")) {
|
|
setUrlProtocol("https://");
|
|
setUrlDomain(currentValue.substring(8));
|
|
} else if (currentValue.startsWith("http://")) {
|
|
setUrlProtocol("http://");
|
|
setUrlDomain(currentValue.substring(7));
|
|
} else {
|
|
setUrlDomain(currentValue);
|
|
}
|
|
}
|
|
}
|
|
}, [webType, component.value, formData, component.columnName, isInteractive]);
|
|
|
|
// 이메일 타입 전용 UI
|
|
if (webType === "email") {
|
|
return (
|
|
<div className={`relative w-full ${className || ""}`} style={componentStyle} {...safeDomProps}>
|
|
{/* 라벨 렌더링 */}
|
|
{component.label && component.style?.labelDisplay !== false && (
|
|
<label className="absolute -top-6 left-0 text-sm font-medium text-muted-foreground">
|
|
{component.label}
|
|
{component.required && <span className="text-destructive">*</span>}
|
|
</label>
|
|
)}
|
|
|
|
<div className="box-border flex h-full w-full items-center gap-2">
|
|
{/* 사용자명 입력 */}
|
|
<input
|
|
type="text"
|
|
value={emailUsername}
|
|
placeholder="사용자명"
|
|
disabled={componentConfig.disabled || false}
|
|
readOnly={componentConfig.readonly || false}
|
|
onChange={(e) => {
|
|
const newUsername = e.target.value;
|
|
setEmailUsername(newUsername);
|
|
const fullEmail = `${newUsername}@${emailDomain}`;
|
|
|
|
if (isInteractive && onFormDataChange && component.columnName) {
|
|
onFormDataChange(component.columnName, fullEmail);
|
|
}
|
|
}}
|
|
className={cn(
|
|
"h-full flex-1 rounded-md border px-3 py-2 text-sm transition-all duration-200 outline-none",
|
|
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
|
|
isSelected ? "border-ring ring-2 ring-ring/50" : "border-input",
|
|
componentConfig.disabled ? "bg-muted text-muted-foreground cursor-not-allowed opacity-50" : "bg-background text-foreground",
|
|
"disabled:cursor-not-allowed"
|
|
)}
|
|
/>
|
|
|
|
{/* @ 구분자 */}
|
|
<span className="text-base font-medium text-muted-foreground">@</span>
|
|
|
|
{/* 도메인 선택/입력 (Combobox) */}
|
|
<Popover open={emailDomainOpen} onOpenChange={setEmailDomainOpen}>
|
|
<PopoverTrigger asChild>
|
|
<button
|
|
type="button"
|
|
role="combobox"
|
|
aria-expanded={emailDomainOpen}
|
|
disabled={componentConfig.disabled || false}
|
|
className={cn(
|
|
"flex h-full flex-1 items-center justify-between rounded-md border px-3 py-2 text-sm transition-all duration-200",
|
|
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
|
|
isSelected ? "border-ring ring-2 ring-ring/50" : "border-input",
|
|
componentConfig.disabled ? "cursor-not-allowed bg-muted text-muted-foreground opacity-50" : "bg-background text-foreground",
|
|
"hover:border-ring/80",
|
|
emailDomainOpen && "border-ring ring-2 ring-ring/50",
|
|
)}
|
|
>
|
|
<span className={cn("truncate", !emailDomain && "text-muted-foreground")}>{emailDomain || "도메인 선택"}</span>
|
|
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
|
</button>
|
|
</PopoverTrigger>
|
|
<PopoverContent className="w-[200px] p-0" align="start">
|
|
<Command>
|
|
<CommandInput
|
|
placeholder="도메인 검색 또는 입력..."
|
|
value={emailDomain}
|
|
onValueChange={(value) => {
|
|
setEmailDomain(value);
|
|
const fullEmail = `${emailUsername}@${value}`;
|
|
|
|
if (isInteractive && onFormDataChange && component.columnName) {
|
|
onFormDataChange(component.columnName, fullEmail);
|
|
}
|
|
}}
|
|
/>
|
|
<CommandList>
|
|
<CommandEmpty>직접 입력한 도메인: {emailDomain}</CommandEmpty>
|
|
<CommandGroup>
|
|
{emailDomains
|
|
.filter((d) => d !== "직접입력")
|
|
.map((domain) => (
|
|
<CommandItem
|
|
key={domain}
|
|
value={domain}
|
|
onSelect={(currentValue) => {
|
|
setEmailDomain(currentValue);
|
|
const fullEmail = `${emailUsername}@${currentValue}`;
|
|
|
|
if (isInteractive && onFormDataChange && component.columnName) {
|
|
onFormDataChange(component.columnName, fullEmail);
|
|
}
|
|
setEmailDomainOpen(false);
|
|
}}
|
|
>
|
|
<Check className={cn("mr-2 h-4 w-4", emailDomain === domain ? "opacity-100" : "opacity-0")} />
|
|
{domain}
|
|
</CommandItem>
|
|
))}
|
|
</CommandGroup>
|
|
</CommandList>
|
|
</Command>
|
|
</PopoverContent>
|
|
</Popover>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// 전화번호 타입 전용 UI
|
|
if (webType === "tel") {
|
|
return (
|
|
<div className={`relative w-full ${className || ""}`} style={componentStyle} {...safeDomProps}>
|
|
{/* 라벨 렌더링 */}
|
|
{component.label && component.style?.labelDisplay !== false && (
|
|
<label className="absolute -top-6 left-0 text-sm font-medium text-muted-foreground">
|
|
{component.label}
|
|
{component.required && <span className="text-destructive">*</span>}
|
|
</label>
|
|
)}
|
|
|
|
<div className="box-border flex h-full w-full items-center gap-1.5">
|
|
{/* 첫 번째 부분 (지역번호) */}
|
|
<input
|
|
type="text"
|
|
value={telPart1}
|
|
placeholder="010"
|
|
maxLength={3}
|
|
disabled={componentConfig.disabled || false}
|
|
readOnly={componentConfig.readonly || false}
|
|
onChange={(e) => {
|
|
const value = e.target.value.replace(/[^0-9]/g, "");
|
|
setTelPart1(value);
|
|
const fullTel = `${value}-${telPart2}-${telPart3}`;
|
|
|
|
if (isInteractive && onFormDataChange && component.columnName) {
|
|
onFormDataChange(component.columnName, fullTel);
|
|
}
|
|
}}
|
|
className={cn(
|
|
"h-full flex-1 rounded-md border px-3 py-2 text-center text-sm transition-all duration-200 outline-none",
|
|
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
|
|
isSelected ? "border-ring ring-2 ring-ring/50" : "border-input",
|
|
componentConfig.disabled ? "bg-muted text-muted-foreground cursor-not-allowed opacity-50" : "bg-background text-foreground",
|
|
"disabled:cursor-not-allowed"
|
|
)}
|
|
/>
|
|
|
|
<span className="text-base font-medium text-muted-foreground">-</span>
|
|
|
|
{/* 두 번째 부분 */}
|
|
<input
|
|
type="text"
|
|
value={telPart2}
|
|
placeholder="1234"
|
|
maxLength={4}
|
|
disabled={componentConfig.disabled || false}
|
|
readOnly={componentConfig.readonly || false}
|
|
onChange={(e) => {
|
|
const value = e.target.value.replace(/[^0-9]/g, "");
|
|
setTelPart2(value);
|
|
const fullTel = `${telPart1}-${value}-${telPart3}`;
|
|
|
|
if (isInteractive && onFormDataChange && component.columnName) {
|
|
onFormDataChange(component.columnName, fullTel);
|
|
}
|
|
}}
|
|
className={cn(
|
|
"h-full flex-1 rounded-md border px-3 py-2 text-center text-sm transition-all duration-200 outline-none",
|
|
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
|
|
isSelected ? "border-ring ring-2 ring-ring/50" : "border-input",
|
|
componentConfig.disabled ? "bg-muted text-muted-foreground cursor-not-allowed opacity-50" : "bg-background text-foreground",
|
|
"disabled:cursor-not-allowed"
|
|
)}
|
|
/>
|
|
|
|
<span className="text-base font-medium text-muted-foreground">-</span>
|
|
|
|
{/* 세 번째 부분 */}
|
|
<input
|
|
type="text"
|
|
value={telPart3}
|
|
placeholder="5678"
|
|
maxLength={4}
|
|
disabled={componentConfig.disabled || false}
|
|
readOnly={componentConfig.readonly || false}
|
|
onChange={(e) => {
|
|
const value = e.target.value.replace(/[^0-9]/g, "");
|
|
setTelPart3(value);
|
|
const fullTel = `${telPart1}-${telPart2}-${value}`;
|
|
|
|
if (isInteractive && onFormDataChange && component.columnName) {
|
|
onFormDataChange(component.columnName, fullTel);
|
|
}
|
|
}}
|
|
className={cn(
|
|
"h-full flex-1 rounded-md border px-3 py-2 text-center text-sm transition-all duration-200 outline-none",
|
|
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
|
|
isSelected ? "border-ring ring-2 ring-ring/50" : "border-input",
|
|
componentConfig.disabled ? "bg-muted text-muted-foreground cursor-not-allowed opacity-50" : "bg-background text-foreground",
|
|
"disabled:cursor-not-allowed"
|
|
)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// URL 타입 전용 UI
|
|
if (webType === "url") {
|
|
return (
|
|
<div className={`relative w-full ${className || ""}`} style={componentStyle} {...safeDomProps}>
|
|
{/* 라벨 렌더링 */}
|
|
{component.label && component.style?.labelDisplay !== false && (
|
|
<label className="absolute -top-6 left-0 text-sm font-medium text-muted-foreground">
|
|
{component.label}
|
|
{component.required && <span className="text-destructive">*</span>}
|
|
</label>
|
|
)}
|
|
|
|
<div className="box-border flex h-full w-full items-center gap-1">
|
|
{/* 프로토콜 선택 */}
|
|
<select
|
|
value={urlProtocol}
|
|
disabled={componentConfig.disabled || false}
|
|
onChange={(e) => {
|
|
const newProtocol = e.target.value;
|
|
setUrlProtocol(newProtocol);
|
|
const fullUrl = `${newProtocol}${urlDomain}`;
|
|
|
|
if (isInteractive && onFormDataChange && component.columnName) {
|
|
onFormDataChange(component.columnName, fullUrl);
|
|
}
|
|
}}
|
|
className={cn(
|
|
"h-full w-[100px] cursor-pointer rounded-md border px-2 py-2 text-sm transition-all duration-200 outline-none",
|
|
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
|
|
isSelected ? "border-ring ring-2 ring-ring/50" : "border-input",
|
|
componentConfig.disabled ? "bg-muted text-muted-foreground cursor-not-allowed opacity-50" : "bg-background text-foreground",
|
|
"disabled:cursor-not-allowed"
|
|
)}
|
|
>
|
|
<option value="https://">https://</option>
|
|
<option value="http://">http://</option>
|
|
</select>
|
|
|
|
{/* 도메인 입력 */}
|
|
<input
|
|
type="text"
|
|
value={urlDomain}
|
|
placeholder="www.example.com"
|
|
disabled={componentConfig.disabled || false}
|
|
readOnly={componentConfig.readonly || false}
|
|
onChange={(e) => {
|
|
const newDomain = e.target.value;
|
|
setUrlDomain(newDomain);
|
|
const fullUrl = `${urlProtocol}${newDomain}`;
|
|
|
|
if (isInteractive && onFormDataChange && component.columnName) {
|
|
onFormDataChange(component.columnName, fullUrl);
|
|
}
|
|
}}
|
|
className={cn(
|
|
"h-full flex-1 rounded-md border px-3 py-2 text-sm transition-all duration-200 outline-none",
|
|
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
|
|
isSelected ? "border-ring ring-2 ring-ring/50" : "border-input",
|
|
componentConfig.disabled ? "bg-muted text-muted-foreground cursor-not-allowed opacity-50" : "bg-background text-foreground",
|
|
"disabled:cursor-not-allowed"
|
|
)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// textarea 타입인 경우 별도 렌더링
|
|
if (webType === "textarea") {
|
|
return (
|
|
<div className={`relative w-full ${className || ""}`} style={componentStyle} {...safeDomProps}>
|
|
{/* 라벨 렌더링 */}
|
|
{component.label && component.style?.labelDisplay !== false && (
|
|
<label className="absolute -top-6 left-0 text-sm font-medium text-muted-foreground">
|
|
{component.label}
|
|
{component.required && <span className="text-destructive">*</span>}
|
|
</label>
|
|
)}
|
|
|
|
<textarea
|
|
value={(() => {
|
|
let displayValue = "";
|
|
|
|
if (isInteractive && formData && component.columnName) {
|
|
displayValue = formData[component.columnName] || autoGeneratedValue || "";
|
|
} else {
|
|
displayValue = component.value || autoGeneratedValue || "";
|
|
}
|
|
|
|
return displayValue;
|
|
})()}
|
|
placeholder={
|
|
testAutoGeneration.enabled && testAutoGeneration.type !== "none"
|
|
? `자동생성: ${AutoGenerationUtils.getTypeDescription(testAutoGeneration.type)}`
|
|
: componentConfig.placeholder || defaultPlaceholder
|
|
}
|
|
disabled={componentConfig.disabled || false}
|
|
required={componentConfig.required || false}
|
|
readOnly={componentConfig.readonly || false}
|
|
onChange={(e) => {
|
|
if (isInteractive && onFormDataChange && component.columnName) {
|
|
onFormDataChange(component.columnName, e.target.value);
|
|
}
|
|
}}
|
|
className={cn(
|
|
"box-border h-full w-full max-w-full resize-none rounded-md border px-3 py-2 text-sm transition-all duration-200 outline-none",
|
|
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
|
|
"placeholder:text-muted-foreground",
|
|
isSelected ? "border-ring ring-2 ring-ring/50" : "border-input",
|
|
componentConfig.disabled ? "bg-muted text-muted-foreground cursor-not-allowed opacity-50" : "bg-background text-foreground",
|
|
"disabled:cursor-not-allowed"
|
|
)}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className={`relative w-full ${className || ""}`} style={componentStyle} {...safeDomProps}>
|
|
{/* 라벨 렌더링 */}
|
|
{component.label && component.style?.labelDisplay !== false && (
|
|
<label className="absolute -top-6 left-0 text-sm font-medium text-slate-600">
|
|
{component.label}
|
|
{component.required && <span className="text-red-500">*</span>}
|
|
</label>
|
|
)}
|
|
|
|
<input
|
|
type={inputType}
|
|
value={(() => {
|
|
let displayValue = "";
|
|
|
|
if (isInteractive && formData && component.columnName) {
|
|
// 인터랙티브 모드: formData 우선, 없으면 자동생성 값
|
|
const rawValue = formData[component.columnName] || autoGeneratedValue || "";
|
|
// 객체인 경우 빈 문자열로 변환 (에러 방지)
|
|
displayValue = typeof rawValue === "object" ? "" : String(rawValue);
|
|
} else {
|
|
// 디자인 모드: component.value 우선, 없으면 자동생성 값
|
|
const rawValue = component.value || autoGeneratedValue || "";
|
|
displayValue = typeof rawValue === "object" ? "" : String(rawValue);
|
|
}
|
|
|
|
return displayValue;
|
|
})()}
|
|
placeholder={
|
|
testAutoGeneration.enabled && testAutoGeneration.type !== "none"
|
|
? `자동생성: ${AutoGenerationUtils.getTypeDescription(testAutoGeneration.type)}`
|
|
: componentConfig.placeholder || defaultPlaceholder
|
|
}
|
|
pattern={validationPattern}
|
|
title={webType === "tel" ? "전화번호 형식: 010-1234-5678" : undefined}
|
|
disabled={componentConfig.disabled || false}
|
|
required={componentConfig.required || false}
|
|
readOnly={componentConfig.readonly || (testAutoGeneration.enabled && testAutoGeneration.type !== "none")}
|
|
className={cn(
|
|
"box-border h-full w-full max-w-full rounded-md border px-3 py-2 text-sm shadow-sm transition-all duration-200 outline-none",
|
|
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
|
|
"placeholder:text-muted-foreground",
|
|
isSelected ? "border-ring ring-2 ring-ring/50" : "border-input",
|
|
componentConfig.disabled ? "bg-muted text-muted-foreground cursor-not-allowed opacity-50" : "bg-background text-foreground",
|
|
"disabled:cursor-not-allowed"
|
|
)}
|
|
onClick={(e) => {
|
|
handleClick(e);
|
|
}}
|
|
onDragStart={onDragStart}
|
|
onDragEnd={onDragEnd}
|
|
onChange={(e) => {
|
|
const newValue = e.target.value;
|
|
// console.log("🎯 TextInputComponent onChange 호출:", {
|
|
// componentId: component.id,
|
|
// columnName: component.columnName,
|
|
// newValue,
|
|
// isInteractive,
|
|
// hasOnFormDataChange: !!onFormDataChange,
|
|
// hasOnChange: !!props.onChange,
|
|
// });
|
|
|
|
// isInteractive 모드에서는 formData 업데이트
|
|
if (isInteractive && onFormDataChange && component.columnName) {
|
|
onFormDataChange(component.columnName, newValue);
|
|
} else {
|
|
console.log("❌ TextInputComponent onFormDataChange 조건 미충족:", {
|
|
isInteractive,
|
|
hasOnFormDataChange: !!onFormDataChange,
|
|
hasColumnName: !!component.columnName,
|
|
columnName: component.columnName,
|
|
});
|
|
}
|
|
|
|
// props.onChange는 DynamicComponentRenderer의 handleChange
|
|
// 이벤트 객체 감지 및 값 추출 로직이 있으므로 안전하게 호출 가능
|
|
if (props.onChange) {
|
|
props.onChange(newValue);
|
|
}
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
/**
|
|
* TextInput 래퍼 컴포넌트
|
|
* 추가적인 로직이나 상태 관리가 필요한 경우 사용
|
|
*/
|
|
export const TextInputWrapper: React.FC<TextInputComponentProps> = (props) => {
|
|
return <TextInputComponent {...props} />;
|
|
};
|