409 lines
14 KiB
TypeScript
409 lines
14 KiB
TypeScript
import React, { useState, useEffect, useRef, useMemo } from "react";
|
|
import { filterDOMProps } from "@/lib/utils/domPropsFilter";
|
|
import { useCodeOptions, useTableCodeCategory } from "@/hooks/queries/useCodes";
|
|
|
|
interface Option {
|
|
value: string;
|
|
label: string;
|
|
}
|
|
|
|
export interface SelectBasicComponentProps {
|
|
component: any;
|
|
componentConfig: any;
|
|
screenId?: number;
|
|
onUpdate?: (field: string, value: any) => void;
|
|
isSelected?: boolean;
|
|
isDesignMode?: boolean;
|
|
isInteractive?: boolean;
|
|
onFormDataChange?: (fieldName: string, value: any) => void;
|
|
className?: string;
|
|
style?: React.CSSProperties;
|
|
onClick?: () => void;
|
|
onDragStart?: () => void;
|
|
onDragEnd?: () => void;
|
|
value?: any; // 외부에서 전달받는 값
|
|
[key: string]: any;
|
|
}
|
|
|
|
// ✅ React Query를 사용하여 중복 요청 방지 및 자동 캐싱 처리
|
|
// - 동일한 queryKey에 대해서는 자동으로 중복 요청 제거
|
|
// - 10분 staleTime으로 적절한 캐시 관리
|
|
// - 30분 gcTime으로 메모리 효율성 확보
|
|
|
|
const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
|
|
component,
|
|
componentConfig,
|
|
screenId,
|
|
onUpdate,
|
|
isSelected = false,
|
|
isDesignMode = false,
|
|
isInteractive = false,
|
|
onFormDataChange,
|
|
className,
|
|
style,
|
|
onClick,
|
|
onDragStart,
|
|
onDragEnd,
|
|
value: externalValue, // 명시적으로 value prop 받기
|
|
...props
|
|
}) => {
|
|
// 🚨 최우선 디버깅: 컴포넌트가 실행되는지 확인
|
|
console.log("🚨🚨🚨 SelectBasicComponent 실행됨!!!", {
|
|
componentId: component?.id,
|
|
componentType: component?.type,
|
|
webType: component?.webType,
|
|
tableName: component?.tableName,
|
|
columnName: component?.columnName,
|
|
screenId,
|
|
timestamp: new Date().toISOString(),
|
|
});
|
|
|
|
// 브라우저 알림으로도 확인
|
|
if (typeof window !== "undefined" && !(window as any).selectBasicAlerted) {
|
|
(window as any).selectBasicAlerted = true;
|
|
alert("SelectBasicComponent가 실행되었습니다!");
|
|
}
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
|
|
// webTypeConfig 또는 componentConfig 사용 (DynamicWebTypeRenderer 호환성)
|
|
const config = (props as any).webTypeConfig || componentConfig || {};
|
|
|
|
// 외부에서 전달받은 value가 있으면 우선 사용, 없으면 config.value 사용
|
|
const [selectedValue, setSelectedValue] = useState(externalValue || config?.value || "");
|
|
const [selectedLabel, setSelectedLabel] = useState("");
|
|
|
|
console.log("🔍 SelectBasicComponent 초기화 (React Query):", {
|
|
componentId: component.id,
|
|
externalValue,
|
|
componentConfigValue: componentConfig?.value,
|
|
webTypeConfigValue: (props as any).webTypeConfig?.value,
|
|
configValue: config?.value,
|
|
finalSelectedValue: externalValue || config?.value || "",
|
|
tableName: component.tableName,
|
|
columnName: component.columnName,
|
|
staticCodeCategory: config?.codeCategory,
|
|
// React Query 디버깅 정보
|
|
timestamp: new Date().toISOString(),
|
|
mountCount: ++(window as any).selectMountCount || ((window as any).selectMountCount = 1),
|
|
});
|
|
|
|
// 언마운트 시 로깅
|
|
useEffect(() => {
|
|
const componentId = component.id;
|
|
console.log(`🔍 [${componentId}] SelectBasicComponent 마운트됨`);
|
|
|
|
return () => {
|
|
console.log(`🔍 [${componentId}] SelectBasicComponent 언마운트됨`);
|
|
};
|
|
}, [component.id]);
|
|
|
|
const selectRef = useRef<HTMLDivElement>(null);
|
|
|
|
// 안정적인 쿼리 키를 위한 메모이제이션
|
|
const stableTableName = useMemo(() => component.tableName, [component.tableName]);
|
|
const stableColumnName = useMemo(() => component.columnName, [component.columnName]);
|
|
const staticCodeCategory = useMemo(() => config?.codeCategory, [config?.codeCategory]);
|
|
|
|
// 🚀 React Query: 테이블 코드 카테고리 조회
|
|
const { data: dynamicCodeCategory } = useTableCodeCategory(stableTableName, stableColumnName);
|
|
|
|
// 코드 카테고리 결정: 동적 카테고리 > 설정 카테고리 (메모이제이션)
|
|
const codeCategory = useMemo(() => {
|
|
const category = dynamicCodeCategory || staticCodeCategory;
|
|
console.log(`🔑 [${component.id}] 코드 카테고리 결정:`, {
|
|
dynamicCodeCategory,
|
|
staticCodeCategory,
|
|
finalCategory: category,
|
|
});
|
|
return category;
|
|
}, [dynamicCodeCategory, staticCodeCategory, component.id]);
|
|
|
|
// 🚀 React Query: 코드 옵션 조회 (안정적인 enabled 조건)
|
|
const isCodeCategoryValid = useMemo(() => {
|
|
return !!codeCategory && codeCategory !== "none";
|
|
}, [codeCategory]);
|
|
|
|
const {
|
|
options: codeOptions,
|
|
isLoading: isLoadingCodes,
|
|
isFetching,
|
|
} = useCodeOptions(codeCategory, isCodeCategoryValid);
|
|
|
|
// React Query 상태 디버깅
|
|
useEffect(() => {
|
|
console.log(`🎯 [${component.id}] React Query 상태:`, {
|
|
codeCategory,
|
|
isCodeCategoryValid,
|
|
codeOptionsLength: codeOptions.length,
|
|
isLoadingCodes,
|
|
isFetching,
|
|
cacheStatus: isFetching ? "FETCHING" : "FROM_CACHE",
|
|
});
|
|
}, [component.id, codeCategory, isCodeCategoryValid, codeOptions.length, isLoadingCodes, isFetching]);
|
|
|
|
// 외부 value prop 변경 시 selectedValue 업데이트
|
|
useEffect(() => {
|
|
const newValue = externalValue || config?.value || "";
|
|
// 값이 실제로 다른 경우에만 업데이트 (빈 문자열도 유효한 값으로 처리)
|
|
if (newValue !== selectedValue) {
|
|
console.log(`🔄 SelectBasicComponent value 업데이트: "${selectedValue}" → "${newValue}"`);
|
|
console.log("🔍 업데이트 조건 분석:", {
|
|
externalValue,
|
|
componentConfigValue: componentConfig?.value,
|
|
configValue: config?.value,
|
|
newValue,
|
|
selectedValue,
|
|
shouldUpdate: newValue !== selectedValue,
|
|
});
|
|
setSelectedValue(newValue);
|
|
}
|
|
}, [externalValue, config?.value]);
|
|
|
|
// ✅ React Query가 자동으로 처리하므로 복잡한 전역 상태 관리 제거
|
|
// - 캐싱: React Query가 자동 관리 (10분 staleTime, 30분 gcTime)
|
|
// - 중복 요청 방지: 동일한 queryKey에 대해 자동 중복 제거
|
|
// - 상태 동기화: 모든 컴포넌트가 같은 캐시 공유
|
|
|
|
|
|
// 선택된 값에 따른 라벨 업데이트
|
|
useEffect(() => {
|
|
const getAllOptions = () => {
|
|
const configOptions = config.options || [];
|
|
return [...codeOptions, ...configOptions];
|
|
};
|
|
|
|
const options = getAllOptions();
|
|
const selectedOption = options.find((option) => option.value === selectedValue);
|
|
|
|
// 🎯 코드 타입의 경우 코드값과 코드명을 모두 고려하여 라벨 찾기
|
|
let newLabel = selectedOption?.label || "";
|
|
|
|
// selectedOption이 없고 selectedValue가 있다면, 코드명으로도 검색해보기
|
|
if (!selectedOption && selectedValue && codeOptions.length > 0) {
|
|
// 1) selectedValue가 코드명인 경우 (예: "국내")
|
|
const labelMatch = options.find((option) => option.label === selectedValue);
|
|
if (labelMatch) {
|
|
newLabel = labelMatch.label;
|
|
console.log(`🔍 [${component.id}] 코드명으로 매치 발견: "${selectedValue}" → "${newLabel}"`);
|
|
} else {
|
|
// 2) selectedValue가 코드값인 경우라면 원래 로직대로 라벨을 찾되, 없으면 원값 표시
|
|
newLabel = selectedValue; // 코드값 그대로 표시 (예: "555")
|
|
console.log(`🔍 [${component.id}] 코드값 원본 유지: "${selectedValue}"`);
|
|
}
|
|
}
|
|
|
|
console.log(`🏷️ [${component.id}] 라벨 업데이트:`, {
|
|
selectedValue,
|
|
selectedOption: selectedOption ? { value: selectedOption.value, label: selectedOption.label } : null,
|
|
newLabel,
|
|
optionsCount: options.length,
|
|
allOptionsValues: options.map((o) => o.value),
|
|
allOptionsLabels: options.map((o) => o.label),
|
|
});
|
|
|
|
if (newLabel !== selectedLabel) {
|
|
setSelectedLabel(newLabel);
|
|
}
|
|
}, [selectedValue, codeOptions, config.options]);
|
|
|
|
// 클릭 이벤트 핸들러 (React Query로 간소화)
|
|
const handleToggle = () => {
|
|
if (isDesignMode) return;
|
|
|
|
console.log(`🖱️ [${component.id}] 드롭다운 토글 (React Query): ${isOpen} → ${!isOpen}`);
|
|
console.log(`📊 [${component.id}] 현재 상태:`, {
|
|
codeCategory,
|
|
isLoadingCodes,
|
|
codeOptionsLength: codeOptions.length,
|
|
tableName: component.tableName,
|
|
columnName: component.columnName,
|
|
});
|
|
|
|
// React Query가 자동으로 캐시 관리하므로 수동 새로고침 불필요
|
|
setIsOpen(!isOpen);
|
|
};
|
|
|
|
// 옵션 선택 핸들러
|
|
const handleOptionSelect = (value: string, label: string) => {
|
|
setSelectedValue(value);
|
|
setSelectedLabel(label);
|
|
setIsOpen(false);
|
|
|
|
// 디자인 모드에서의 컴포넌트 속성 업데이트
|
|
if (onUpdate) {
|
|
onUpdate("value", value);
|
|
}
|
|
|
|
// 인터랙티브 모드에서 폼 데이터 업데이트 (TextInputComponent와 동일한 로직)
|
|
if (isInteractive && onFormDataChange && component.columnName) {
|
|
console.log(`📤 SelectBasicComponent -> onFormDataChange 호출: ${component.columnName} = "${value}"`);
|
|
onFormDataChange(component.columnName, value);
|
|
} else {
|
|
console.log("❌ SelectBasicComponent onFormDataChange 조건 미충족:", {
|
|
isInteractive,
|
|
hasOnFormDataChange: !!onFormDataChange,
|
|
hasColumnName: !!component.columnName,
|
|
});
|
|
}
|
|
|
|
console.log(`✅ [${component.id}] 옵션 선택:`, { value, label });
|
|
};
|
|
|
|
// 외부 클릭 시 드롭다운 닫기
|
|
useEffect(() => {
|
|
const handleClickOutside = (event: MouseEvent) => {
|
|
if (selectRef.current && !selectRef.current.contains(event.target as Node)) {
|
|
setIsOpen(false);
|
|
}
|
|
};
|
|
|
|
if (isOpen) {
|
|
document.addEventListener("mousedown", handleClickOutside);
|
|
}
|
|
|
|
return () => {
|
|
document.removeEventListener("mousedown", handleClickOutside);
|
|
};
|
|
}, [isOpen]);
|
|
|
|
// ✅ React Query가 자동으로 처리하므로 수동 이벤트 리스너 불필요
|
|
// - refetchOnWindowFocus: true (기본값)
|
|
// - refetchOnReconnect: true (기본값)
|
|
// - staleTime으로 적절한 캐시 관리
|
|
|
|
// 모든 옵션 가져오기
|
|
const getAllOptions = () => {
|
|
const configOptions = config.options || [];
|
|
console.log(`🔧 [${component.id}] 옵션 병합:`, {
|
|
codeOptionsLength: codeOptions.length,
|
|
codeOptions: codeOptions.map((o: Option) => ({ value: o.value, label: o.label })),
|
|
configOptionsLength: configOptions.length,
|
|
configOptions: configOptions.map((o: Option) => ({ value: o.value, label: o.label })),
|
|
});
|
|
return [...codeOptions, ...configOptions];
|
|
};
|
|
|
|
const allOptions = getAllOptions();
|
|
const placeholder = componentConfig.placeholder || "선택하세요";
|
|
|
|
// DOM props에서 React 전용 props 필터링
|
|
const {
|
|
component: _component,
|
|
componentConfig: _componentConfig,
|
|
screenId: _screenId,
|
|
onUpdate: _onUpdate,
|
|
isSelected: _isSelected,
|
|
isDesignMode: _isDesignMode,
|
|
className: _className,
|
|
style: _style,
|
|
onClick: _onClick,
|
|
onDragStart: _onDragStart,
|
|
onDragEnd: _onDragEnd,
|
|
...otherProps
|
|
} = props;
|
|
|
|
const safeDomProps = filterDOMProps(otherProps);
|
|
|
|
return (
|
|
<div
|
|
ref={selectRef}
|
|
className={`relative w-full ${className || ""}`}
|
|
style={style}
|
|
onClick={onClick}
|
|
onDragStart={onDragStart}
|
|
onDragEnd={onDragEnd}
|
|
{...safeDomProps}
|
|
>
|
|
{/* 라벨 렌더링 */}
|
|
{component.label && component.style?.labelDisplay !== false && (
|
|
<label
|
|
style={{
|
|
position: "absolute",
|
|
top: "-25px",
|
|
left: "0px",
|
|
fontSize: component.style?.labelFontSize || "14px",
|
|
color: component.style?.labelColor || "#3b83f6",
|
|
fontWeight: "500",
|
|
// isInteractive 모드에서는 사용자 스타일 우선 적용
|
|
...(isInteractive && component.style ? component.style : {}),
|
|
}}
|
|
>
|
|
{component.label}
|
|
{component.required && <span style={{ color: "#ef4444" }}>*</span>}
|
|
</label>
|
|
)}
|
|
|
|
{/* 커스텀 셀렉트 박스 */}
|
|
<div
|
|
className={`flex w-full cursor-pointer items-center justify-between rounded-md border border-gray-300 bg-white px-3 py-2 ${isDesignMode ? "pointer-events-none" : "hover:border-gray-400"} ${isSelected ? "ring-2 ring-blue-500" : ""} ${isOpen ? "border-blue-500" : ""} `}
|
|
onClick={handleToggle}
|
|
style={{
|
|
pointerEvents: isDesignMode ? "none" : "auto",
|
|
}}
|
|
>
|
|
<span className={selectedLabel ? "text-gray-900" : "text-gray-500"}>{selectedLabel || placeholder}</span>
|
|
|
|
{/* 드롭다운 아이콘 */}
|
|
<svg
|
|
className={`h-4 w-4 transition-transform ${isOpen ? "rotate-180" : ""}`}
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
|
|
</svg>
|
|
</div>
|
|
|
|
{/* 드롭다운 옵션 */}
|
|
{isOpen && !isDesignMode && (
|
|
<div
|
|
className="absolute mt-1 max-h-60 w-full overflow-auto rounded-md border border-gray-300 bg-white shadow-lg"
|
|
style={{
|
|
backgroundColor: "white",
|
|
color: "black",
|
|
zIndex: 99999, // 더 높은 z-index로 설정
|
|
}}
|
|
>
|
|
{(() => {
|
|
console.log(`🎨 [${component.id}] 드롭다운 렌더링:`, {
|
|
isOpen,
|
|
isDesignMode,
|
|
isLoadingCodes,
|
|
allOptionsLength: allOptions.length,
|
|
allOptions: allOptions.map((o: Option) => ({ value: o.value, label: o.label })),
|
|
});
|
|
return null;
|
|
})()}
|
|
{isLoadingCodes ? (
|
|
<div className="bg-white px-3 py-2 text-gray-900">로딩 중...</div>
|
|
) : allOptions.length > 0 ? (
|
|
allOptions.map((option, index) => (
|
|
<div
|
|
key={`${option.value}-${index}`}
|
|
className="cursor-pointer bg-white px-3 py-2 text-gray-900 hover:bg-gray-100"
|
|
style={{
|
|
color: "black",
|
|
backgroundColor: "white",
|
|
minHeight: "32px",
|
|
border: "1px solid #e5e7eb",
|
|
}}
|
|
onClick={() => handleOptionSelect(option.value, option.label)}
|
|
>
|
|
{option.label || option.value || `옵션 ${index + 1}`}
|
|
</div>
|
|
))
|
|
) : (
|
|
<div className="bg-white px-3 py-2 text-gray-900">옵션이 없습니다</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// Wrapper 컴포넌트 (기존 호환성을 위해)
|
|
export const SelectBasicWrapper = SelectBasicComponent;
|
|
|
|
// 기본 export
|
|
export { SelectBasicComponent };
|