Merge branch 'main' of http://39.117.244.52:3000/kjs/ERP-node
This commit is contained in:
commit
78d49ee936
|
|
@ -352,13 +352,13 @@ export default function ScreenViewPage() {
|
|||
},
|
||||
onFormDataChange: (fieldName, value) => {
|
||||
console.log(`🎯 page.tsx onFormDataChange 호출: ${fieldName} = "${value}"`);
|
||||
console.log(`📋 현재 formData:`, formData);
|
||||
console.log("📋 현재 formData:", formData);
|
||||
setFormData((prev) => {
|
||||
const newFormData = {
|
||||
...prev,
|
||||
[fieldName]: value,
|
||||
};
|
||||
console.log(`📝 업데이트된 formData:`, newFormData);
|
||||
console.log("📝 업데이트된 formData:", newFormData);
|
||||
return newFormData;
|
||||
});
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,31 +1,107 @@
|
|||
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
|
||||
import { commonCodeApi } from "@/lib/api/commonCode";
|
||||
import { queryKeys } from "@/lib/queryKeys";
|
||||
import type { CodeFilter, CreateCodeData, UpdateCodeData } from "@/lib/schemas/commonCode";
|
||||
import { tableTypeApi } from "@/lib/api/screen";
|
||||
import { useMemo } from "react";
|
||||
|
||||
/**
|
||||
* 코드 목록 조회 훅
|
||||
*/
|
||||
export function useCodes(categoryCode: string, filters?: CodeFilter) {
|
||||
// Query Keys
|
||||
export const queryKeys = {
|
||||
codes: {
|
||||
all: ["codes"] as const,
|
||||
list: (categoryCode: string) => ["codes", "list", categoryCode] as const,
|
||||
options: (categoryCode: string) => ["codes", "options", categoryCode] as const,
|
||||
detail: (categoryCode: string, codeValue: string) =>
|
||||
["codes", "detail", categoryCode, codeValue] as const,
|
||||
infiniteList: (categoryCode: string, filters?: any) =>
|
||||
["codes", "infiniteList", categoryCode, filters] as const,
|
||||
},
|
||||
tables: {
|
||||
all: ["tables"] as const,
|
||||
columns: (tableName: string) => ["tables", "columns", tableName] as const,
|
||||
codeCategory: (tableName: string, columnName: string) =>
|
||||
["tables", "codeCategory", tableName, columnName] as const,
|
||||
},
|
||||
categories: {
|
||||
all: ["categories"] as const,
|
||||
list: (filters?: any) => ["categories", "list", filters] as const,
|
||||
},
|
||||
};
|
||||
|
||||
// 테이블 컬럼의 코드 카테고리 조회
|
||||
export function useTableCodeCategory(tableName?: string, columnName?: string) {
|
||||
return useQuery({
|
||||
queryKey: queryKeys.codes.list(categoryCode, filters),
|
||||
queryFn: () => commonCodeApi.codes.getList(categoryCode, filters),
|
||||
select: (data) => data.data || [],
|
||||
enabled: !!categoryCode, // categoryCode가 있을 때만 실행
|
||||
queryKey: queryKeys.tables.codeCategory(tableName || "", columnName || ""),
|
||||
queryFn: async () => {
|
||||
if (!tableName || !columnName) return null;
|
||||
|
||||
console.log(`🔍 [React Query] 테이블 코드 카테고리 조회: ${tableName}.${columnName}`);
|
||||
const columns = await tableTypeApi.getColumns(tableName);
|
||||
const targetColumn = columns.find((col) => col.columnName === columnName);
|
||||
|
||||
const codeCategory = targetColumn?.codeCategory && targetColumn.codeCategory !== "none"
|
||||
? targetColumn.codeCategory
|
||||
: null;
|
||||
|
||||
console.log(`✅ [React Query] 테이블 코드 카테고리 결과: ${tableName}.${columnName} -> ${codeCategory}`);
|
||||
return codeCategory;
|
||||
},
|
||||
enabled: !!(tableName && columnName),
|
||||
staleTime: 10 * 60 * 1000, // 10분 캐시
|
||||
gcTime: 30 * 60 * 1000, // 30분 가비지 컬렉션
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 코드 생성 뮤테이션 훅
|
||||
*/
|
||||
// 코드 옵션 조회 (select용)
|
||||
export function useCodeOptions(codeCategory?: string, enabled: boolean = true) {
|
||||
const query = useQuery({
|
||||
queryKey: queryKeys.codes.options(codeCategory || ""),
|
||||
queryFn: async () => {
|
||||
if (!codeCategory || codeCategory === "none") return [];
|
||||
|
||||
console.log(`🔍 [React Query] 코드 옵션 조회: ${codeCategory}`);
|
||||
const response = await commonCodeApi.codes.getList(codeCategory, { isActive: true });
|
||||
|
||||
if (response.success && response.data) {
|
||||
const options = response.data.map((code: any) => {
|
||||
const actualValue = code.code || code.CODE || code.value || code.code_value || code.codeValue;
|
||||
const actualLabel = code.codeName || code.code_name || code.name || code.CODE_NAME ||
|
||||
code.NAME || code.label || code.LABEL || code.text || code.title ||
|
||||
code.description || actualValue;
|
||||
|
||||
return {
|
||||
value: actualValue,
|
||||
label: actualLabel,
|
||||
};
|
||||
});
|
||||
|
||||
console.log(`✅ [React Query] 코드 옵션 결과: ${codeCategory} (${options.length}개)`);
|
||||
return options;
|
||||
}
|
||||
|
||||
return [];
|
||||
},
|
||||
enabled: enabled && !!(codeCategory && codeCategory !== "none"),
|
||||
staleTime: 10 * 60 * 1000, // 10분 캐시
|
||||
gcTime: 30 * 60 * 1000, // 30분 가비지 컬렉션
|
||||
});
|
||||
|
||||
return {
|
||||
options: query.data || [],
|
||||
isLoading: query.isLoading,
|
||||
isFetching: query.isFetching,
|
||||
error: query.error,
|
||||
refetch: query.refetch,
|
||||
};
|
||||
}
|
||||
|
||||
// 코드 생성
|
||||
export function useCreateCode() {
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
return useMutation({
|
||||
mutationFn: ({ categoryCode, data }: { categoryCode: string; data: CreateCodeData }) =>
|
||||
mutationFn: ({ categoryCode, data }: { categoryCode: string; data: any }) =>
|
||||
commonCodeApi.codes.create(categoryCode, data),
|
||||
onSuccess: (_, variables) => {
|
||||
// 해당 카테고리의 모든 코드 관련 쿼리 무효화 (일반 목록 + 무한 스크롤)
|
||||
// 해당 카테고리의 모든 코드 관련 쿼리 무효화
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: queryKeys.codes.all,
|
||||
});
|
||||
|
|
@ -34,15 +110,10 @@ export function useCreateCode() {
|
|||
queryKey: queryKeys.codes.infiniteList(variables.categoryCode),
|
||||
});
|
||||
},
|
||||
onError: (error) => {
|
||||
console.error("코드 생성 실패:", error);
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 코드 수정 뮤테이션 훅
|
||||
*/
|
||||
// 코드 수정
|
||||
export function useUpdateCode() {
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
|
|
@ -54,14 +125,14 @@ export function useUpdateCode() {
|
|||
}: {
|
||||
categoryCode: string;
|
||||
codeValue: string;
|
||||
data: UpdateCodeData;
|
||||
data: any;
|
||||
}) => commonCodeApi.codes.update(categoryCode, codeValue, data),
|
||||
onSuccess: (_, variables) => {
|
||||
// 해당 코드 상세 쿼리 무효화
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: queryKeys.codes.detail(variables.categoryCode, variables.codeValue),
|
||||
});
|
||||
// 해당 카테고리의 모든 코드 관련 쿼리 무효화 (일반 목록 + 무한 스크롤)
|
||||
// 해당 카테고리의 모든 코드 관련 쿼리 무효화
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: queryKeys.codes.all,
|
||||
});
|
||||
|
|
@ -70,15 +141,10 @@ export function useUpdateCode() {
|
|||
queryKey: queryKeys.codes.infiniteList(variables.categoryCode),
|
||||
});
|
||||
},
|
||||
onError: (error) => {
|
||||
console.error("코드 수정 실패:", error);
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 코드 삭제 뮤테이션 훅
|
||||
*/
|
||||
// 코드 삭제
|
||||
export function useDeleteCode() {
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
|
|
@ -98,15 +164,10 @@ export function useDeleteCode() {
|
|||
queryKey: queryKeys.codes.detail(variables.categoryCode, variables.codeValue),
|
||||
});
|
||||
},
|
||||
onError: (error) => {
|
||||
console.error("코드 삭제 실패:", error);
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 코드 순서 변경 뮤테이션 훅
|
||||
*/
|
||||
// 코드 순서 변경
|
||||
export function useReorderCodes() {
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
|
|
@ -126,7 +187,7 @@ export function useReorderCodes() {
|
|||
const previousCodes = queryClient.getQueryData(queryKeys.codes.list(categoryCode));
|
||||
|
||||
// Optimistic update: 새로운 순서로 즉시 업데이트
|
||||
if (previousCodes && (previousCodes as any).data && Array.isArray((previousCodes as any).data)) {
|
||||
if (previousCodes && Array.isArray((previousCodes as any).data)) {
|
||||
const previousCodesArray = (previousCodes as any).data;
|
||||
|
||||
// 기존 데이터를 복사하고 sort_order만 업데이트
|
||||
|
|
@ -135,8 +196,8 @@ export function useReorderCodes() {
|
|||
return newCodeData ? { ...code, sort_order: newCodeData.sortOrder } : code;
|
||||
});
|
||||
|
||||
// sort_order로 정렬
|
||||
updatedCodes.sort((a: any, b: any) => a.sort_order - b.sort_order);
|
||||
// 순서대로 정렬
|
||||
updatedCodes.sort((a, b) => (a.sort_order || 0) - (b.sort_order || 0));
|
||||
|
||||
// API 응답 형태로 캐시에 저장 (기존 구조 유지)
|
||||
queryClient.setQueryData(queryKeys.codes.list(categoryCode), {
|
||||
|
|
@ -145,11 +206,9 @@ export function useReorderCodes() {
|
|||
});
|
||||
}
|
||||
|
||||
// 롤백용 데이터 반환
|
||||
return { previousCodes };
|
||||
},
|
||||
onError: (error, variables, context) => {
|
||||
console.error("코드 순서 변경 실패:", error);
|
||||
onError: (err, variables, context) => {
|
||||
// 에러 시 이전 데이터로 롤백
|
||||
if (context?.previousCodes) {
|
||||
queryClient.setQueryData(queryKeys.codes.list(variables.categoryCode), context.previousCodes);
|
||||
|
|
@ -166,4 +225,4 @@ export function useReorderCodes() {
|
|||
});
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -18,13 +18,13 @@ export const DynamicWebTypeRenderer: React.FC<DynamicComponentProps> = ({
|
|||
}) => {
|
||||
// 모든 hooks를 먼저 호출 (조건부 return 이전에)
|
||||
const { webTypes } = useWebTypes({ active: "Y" });
|
||||
|
||||
|
||||
// 디버깅: 전달받은 웹타입과 props 정보 로깅
|
||||
console.log("🔍 DynamicWebTypeRenderer 호출:", {
|
||||
webType,
|
||||
propsKeys: Object.keys(props),
|
||||
component: props.component,
|
||||
isFileComponent: props.component?.type === 'file' || webType === 'file'
|
||||
isFileComponent: props.component?.type === "file" || webType === "file",
|
||||
});
|
||||
|
||||
const webTypeDefinition = useMemo(() => {
|
||||
|
|
@ -70,21 +70,21 @@ export const DynamicWebTypeRenderer: React.FC<DynamicComponentProps> = ({
|
|||
if (dbWebType?.component_name) {
|
||||
try {
|
||||
console.log(`웹타입 "${webType}" → DB 지정 컴포넌트 "${dbWebType.component_name}" 사용`);
|
||||
console.log(`DB 웹타입 정보:`, dbWebType);
|
||||
|
||||
console.log("DB 웹타입 정보:", dbWebType);
|
||||
|
||||
// FileWidget의 경우 FileUploadComponent 직접 사용
|
||||
if (dbWebType.component_name === "FileWidget" || webType === "file") {
|
||||
const { FileUploadComponent } = require("@/lib/registry/components/file-upload/FileUploadComponent");
|
||||
console.log(`✅ FileWidget → FileUploadComponent 사용`);
|
||||
console.log("✅ FileWidget → FileUploadComponent 사용");
|
||||
return <FileUploadComponent {...props} {...finalProps} />;
|
||||
}
|
||||
|
||||
|
||||
// 다른 컴포넌트들은 기존 로직 유지
|
||||
// const ComponentByName = getWidgetComponentByName(dbWebType.component_name);
|
||||
// console.log(`컴포넌트 "${dbWebType.component_name}" 성공적으로 로드됨:`, ComponentByName);
|
||||
// return <ComponentByName {...props} {...finalProps} />;
|
||||
console.warn(`DB 지정 컴포넌트 "${dbWebType.component_name}" 기능 임시 비활성화 (FileWidget 제외)`);
|
||||
|
||||
|
||||
// 로딩 중 메시지 대신 레지스트리로 폴백
|
||||
// return <div>컴포넌트 로딩 중...</div>;
|
||||
} catch (error) {
|
||||
|
|
@ -99,7 +99,7 @@ export const DynamicWebTypeRenderer: React.FC<DynamicComponentProps> = ({
|
|||
// 파일 웹타입의 경우 FileUploadComponent 직접 사용
|
||||
if (webType === "file") {
|
||||
const { FileUploadComponent } = require("@/lib/registry/components/file-upload/FileUploadComponent");
|
||||
console.log(`✅ 파일 웹타입 → FileUploadComponent 사용`);
|
||||
console.log("✅ 파일 웹타입 → FileUploadComponent 사용");
|
||||
return <FileUploadComponent {...props} {...finalProps} />;
|
||||
}
|
||||
|
||||
|
|
@ -127,44 +127,39 @@ export const DynamicWebTypeRenderer: React.FC<DynamicComponentProps> = ({
|
|||
// 3순위: 웹타입명으로 자동 매핑 (폴백)
|
||||
try {
|
||||
console.warn(`웹타입 "${webType}" → 자동 매핑 폴백 사용`);
|
||||
|
||||
|
||||
// 파일 웹타입의 경우 FileUploadComponent 직접 사용 (최종 폴백)
|
||||
if (webType === "file") {
|
||||
const { FileUploadComponent } = require("@/lib/registry/components/file-upload/FileUploadComponent");
|
||||
console.log(`✅ 폴백: 파일 웹타입 → FileUploadComponent 사용`);
|
||||
console.log("✅ 폴백: 파일 웹타입 → FileUploadComponent 사용");
|
||||
return <FileUploadComponent {...props} {...finalProps} />;
|
||||
}
|
||||
|
||||
|
||||
// 텍스트 입력 웹타입들
|
||||
if (["text", "email", "password", "tel"].includes(webType)) {
|
||||
const { TextInputComponent } = require("@/lib/registry/components/text-input/TextInputComponent");
|
||||
console.log(`✅ 폴백: ${webType} 웹타입 → TextInputComponent 사용`);
|
||||
return <TextInputComponent {...props} {...finalProps} />;
|
||||
}
|
||||
|
||||
|
||||
// 숫자 입력 웹타입들
|
||||
if (["number", "decimal"].includes(webType)) {
|
||||
const { NumberInputComponent } = require("@/lib/registry/components/number-input/NumberInputComponent");
|
||||
console.log(`✅ 폴백: ${webType} 웹타입 → NumberInputComponent 사용`);
|
||||
return <NumberInputComponent {...props} {...finalProps} />;
|
||||
}
|
||||
|
||||
|
||||
// 날짜 입력 웹타입들
|
||||
if (["date", "datetime", "time"].includes(webType)) {
|
||||
const { DateInputComponent } = require("@/lib/registry/components/date-input/DateInputComponent");
|
||||
console.log(`✅ 폴백: ${webType} 웹타입 → DateInputComponent 사용`);
|
||||
return <DateInputComponent {...props} {...finalProps} />;
|
||||
}
|
||||
|
||||
|
||||
// 기본 폴백: Input 컴포넌트 사용
|
||||
const { Input } = require("@/components/ui/input");
|
||||
console.log(`✅ 폴백: ${webType} 웹타입 → 기본 Input 사용`);
|
||||
return <Input
|
||||
placeholder={`${webType}`}
|
||||
disabled={props.readonly}
|
||||
className="w-full"
|
||||
{...props}
|
||||
/>;
|
||||
return <Input placeholder={`${webType}`} disabled={props.readonly} className="w-full" {...props} />;
|
||||
} catch (error) {
|
||||
console.error(`웹타입 "${webType}" 폴백 컴포넌트 렌더링 실패:`, error);
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
import React, { useState, useEffect, useRef } from "react";
|
||||
import { commonCodeApi } from "../../../api/commonCode";
|
||||
import { tableTypeApi } from "../../../api/screen";
|
||||
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;
|
||||
|
|
@ -26,210 +25,10 @@ export interface SelectBasicComponentProps {
|
|||
[key: string]: any;
|
||||
}
|
||||
|
||||
// 🚀 전역 상태 관리: 모든 컴포넌트가 공유하는 상태
|
||||
interface GlobalState {
|
||||
tableCategories: Map<string, string>; // tableName.columnName -> codeCategory
|
||||
codeOptions: Map<string, { options: Option[]; timestamp: number }>; // codeCategory -> options
|
||||
activeRequests: Map<string, Promise<any>>; // 진행 중인 요청들
|
||||
subscribers: Set<() => void>; // 상태 변경 구독자들
|
||||
}
|
||||
|
||||
const globalState: GlobalState = {
|
||||
tableCategories: new Map(),
|
||||
codeOptions: new Map(),
|
||||
activeRequests: new Map(),
|
||||
subscribers: new Set(),
|
||||
};
|
||||
|
||||
// 전역 상태 변경 알림
|
||||
const notifyStateChange = () => {
|
||||
globalState.subscribers.forEach((callback) => callback());
|
||||
};
|
||||
|
||||
// 캐시 유효 시간 (5분)
|
||||
const CACHE_DURATION = 5 * 60 * 1000;
|
||||
|
||||
// 🔧 전역 테이블 코드 카테고리 로딩 (중복 방지)
|
||||
const loadGlobalTableCodeCategory = async (tableName: string, columnName: string): Promise<string | null> => {
|
||||
const key = `${tableName}.${columnName}`;
|
||||
|
||||
// 이미 진행 중인 요청이 있으면 대기
|
||||
if (globalState.activeRequests.has(`table_${key}`)) {
|
||||
try {
|
||||
await globalState.activeRequests.get(`table_${key}`);
|
||||
} catch (error) {
|
||||
console.error("❌ 테이블 설정 로딩 대기 중 오류:", error);
|
||||
}
|
||||
}
|
||||
|
||||
// 캐시된 값이 있으면 반환
|
||||
if (globalState.tableCategories.has(key)) {
|
||||
const cachedCategory = globalState.tableCategories.get(key);
|
||||
console.log(`✅ 캐시된 테이블 설정 사용: ${key} -> ${cachedCategory}`);
|
||||
return cachedCategory || null;
|
||||
}
|
||||
|
||||
// 새로운 요청 생성
|
||||
const request = (async () => {
|
||||
try {
|
||||
console.log(`🔍 테이블 코드 카테고리 조회: ${key}`);
|
||||
const columns = await tableTypeApi.getColumns(tableName);
|
||||
const targetColumn = columns.find((col) => col.columnName === columnName);
|
||||
|
||||
const codeCategory =
|
||||
targetColumn?.codeCategory && targetColumn.codeCategory !== "none" ? targetColumn.codeCategory : null;
|
||||
|
||||
// 전역 상태에 저장
|
||||
globalState.tableCategories.set(key, codeCategory || "");
|
||||
|
||||
console.log(`✅ 테이블 설정 조회 완료: ${key} -> ${codeCategory}`);
|
||||
|
||||
// 상태 변경 알림
|
||||
notifyStateChange();
|
||||
|
||||
return codeCategory;
|
||||
} catch (error) {
|
||||
console.error(`❌ 테이블 코드 카테고리 조회 실패: ${key}`, error);
|
||||
return null;
|
||||
} finally {
|
||||
globalState.activeRequests.delete(`table_${key}`);
|
||||
}
|
||||
})();
|
||||
|
||||
globalState.activeRequests.set(`table_${key}`, request);
|
||||
return request;
|
||||
};
|
||||
|
||||
// 🔧 전역 코드 옵션 로딩 (중복 방지)
|
||||
const loadGlobalCodeOptions = async (codeCategory: string): Promise<Option[]> => {
|
||||
if (!codeCategory || codeCategory === "none") {
|
||||
return [];
|
||||
}
|
||||
|
||||
// 이미 진행 중인 요청이 있으면 대기
|
||||
if (globalState.activeRequests.has(`code_${codeCategory}`)) {
|
||||
try {
|
||||
await globalState.activeRequests.get(`code_${codeCategory}`);
|
||||
} catch (error) {
|
||||
console.error("❌ 코드 옵션 로딩 대기 중 오류:", error);
|
||||
}
|
||||
}
|
||||
|
||||
// 캐시된 값이 유효하면 반환
|
||||
const cached = globalState.codeOptions.get(codeCategory);
|
||||
if (cached && Date.now() - cached.timestamp < CACHE_DURATION) {
|
||||
console.log(`✅ 캐시된 코드 옵션 사용: ${codeCategory} (${cached.options.length}개)`);
|
||||
return cached.options;
|
||||
}
|
||||
|
||||
// 새로운 요청 생성
|
||||
const request = (async () => {
|
||||
try {
|
||||
console.log(`🔄 코드 옵션 로딩: ${codeCategory}`);
|
||||
const response = await commonCodeApi.codes.getList(codeCategory, { isActive: true });
|
||||
|
||||
console.log(`🔍 [API 응답 원본] ${codeCategory}:`, {
|
||||
response,
|
||||
success: response.success,
|
||||
data: response.data,
|
||||
dataType: typeof response.data,
|
||||
isArray: Array.isArray(response.data),
|
||||
dataLength: response.data?.length,
|
||||
firstItem: response.data?.[0],
|
||||
});
|
||||
|
||||
if (response.success && response.data) {
|
||||
const options = response.data.map((code: any, index: number) => {
|
||||
console.log(`🔍 [코드 매핑] ${index}:`, {
|
||||
originalCode: code,
|
||||
codeKeys: Object.keys(code),
|
||||
values: Object.values(code),
|
||||
// 가능한 모든 필드 확인
|
||||
code: code.code,
|
||||
codeName: code.codeName,
|
||||
name: code.name,
|
||||
label: code.label,
|
||||
// 대문자 버전
|
||||
CODE: code.CODE,
|
||||
CODE_NAME: code.CODE_NAME,
|
||||
NAME: code.NAME,
|
||||
LABEL: code.LABEL,
|
||||
// 스네이크 케이스
|
||||
code_name: code.code_name,
|
||||
code_value: code.code_value,
|
||||
// 기타 가능한 필드들
|
||||
value: code.value,
|
||||
text: code.text,
|
||||
title: code.title,
|
||||
description: code.description,
|
||||
});
|
||||
|
||||
// 실제 값 찾기 시도 (우선순위 순)
|
||||
const actualValue = code.code || code.CODE || code.value || code.code_value || `code_${index}`;
|
||||
const actualLabel =
|
||||
code.codeName ||
|
||||
code.code_name || // 스네이크 케이스 추가!
|
||||
code.name ||
|
||||
code.CODE_NAME ||
|
||||
code.NAME ||
|
||||
code.label ||
|
||||
code.LABEL ||
|
||||
code.text ||
|
||||
code.title ||
|
||||
code.description ||
|
||||
actualValue;
|
||||
|
||||
console.log(`✨ [최종 매핑] ${index}:`, {
|
||||
actualValue,
|
||||
actualLabel,
|
||||
hasValue: !!actualValue,
|
||||
hasLabel: !!actualLabel,
|
||||
});
|
||||
|
||||
return {
|
||||
value: actualValue,
|
||||
label: actualLabel,
|
||||
};
|
||||
});
|
||||
|
||||
console.log(`🔍 [최종 옵션 배열] ${codeCategory}:`, {
|
||||
optionsLength: options.length,
|
||||
options: options.map((opt, idx) => ({
|
||||
index: idx,
|
||||
value: opt.value,
|
||||
label: opt.label,
|
||||
hasLabel: !!opt.label,
|
||||
hasValue: !!opt.value,
|
||||
})),
|
||||
});
|
||||
|
||||
// 전역 상태에 저장
|
||||
globalState.codeOptions.set(codeCategory, {
|
||||
options,
|
||||
timestamp: Date.now(),
|
||||
});
|
||||
|
||||
console.log(`✅ 코드 옵션 로딩 완료: ${codeCategory} (${options.length}개)`);
|
||||
|
||||
// 상태 변경 알림
|
||||
notifyStateChange();
|
||||
|
||||
return options;
|
||||
} else {
|
||||
console.log(`⚠️ 빈 응답: ${codeCategory}`);
|
||||
return [];
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(`❌ 코드 옵션 로딩 실패: ${codeCategory}`, error);
|
||||
return [];
|
||||
} finally {
|
||||
globalState.activeRequests.delete(`code_${codeCategory}`);
|
||||
}
|
||||
})();
|
||||
|
||||
globalState.activeRequests.set(`code_${codeCategory}`, request);
|
||||
return request;
|
||||
};
|
||||
// ✅ React Query를 사용하여 중복 요청 방지 및 자동 캐싱 처리
|
||||
// - 동일한 queryKey에 대해서는 자동으로 중복 요청 제거
|
||||
// - 10분 staleTime으로 적절한 캐시 관리
|
||||
// - 30분 gcTime으로 메모리 효율성 확보
|
||||
|
||||
const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
|
||||
component,
|
||||
|
|
@ -248,6 +47,22 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
|
|||
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 호환성)
|
||||
|
|
@ -257,23 +72,74 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
|
|||
const [selectedValue, setSelectedValue] = useState(externalValue || config?.value || "");
|
||||
const [selectedLabel, setSelectedLabel] = useState("");
|
||||
|
||||
console.log("🔍 SelectBasicComponent 초기화:", {
|
||||
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 || "",
|
||||
props: Object.keys(props),
|
||||
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),
|
||||
});
|
||||
const [codeOptions, setCodeOptions] = useState<Option[]>([]);
|
||||
const [isLoadingCodes, setIsLoadingCodes] = useState(false);
|
||||
const [dynamicCodeCategory, setDynamicCodeCategory] = useState<string | null>(null);
|
||||
const [globalStateVersion, setGlobalStateVersion] = useState(0); // 전역 상태 변경 감지용
|
||||
|
||||
// 언마운트 시 로깅
|
||||
useEffect(() => {
|
||||
const componentId = component.id;
|
||||
console.log(`🔍 [${componentId}] SelectBasicComponent 마운트됨`);
|
||||
|
||||
return () => {
|
||||
console.log(`🔍 [${componentId}] SelectBasicComponent 언마운트됨`);
|
||||
};
|
||||
}, [component.id]);
|
||||
|
||||
const selectRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
// 코드 카테고리 결정: 동적 카테고리 > 설정 카테고리
|
||||
const codeCategory = dynamicCodeCategory || config?.codeCategory;
|
||||
// 안정적인 쿼리 키를 위한 메모이제이션
|
||||
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(() => {
|
||||
|
|
@ -293,109 +159,11 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
|
|||
}
|
||||
}, [externalValue, config?.value]);
|
||||
|
||||
// 🚀 전역 상태 구독 및 동기화
|
||||
useEffect(() => {
|
||||
const updateFromGlobalState = () => {
|
||||
setGlobalStateVersion((prev) => prev + 1);
|
||||
};
|
||||
// ✅ React Query가 자동으로 처리하므로 복잡한 전역 상태 관리 제거
|
||||
// - 캐싱: React Query가 자동 관리 (10분 staleTime, 30분 gcTime)
|
||||
// - 중복 요청 방지: 동일한 queryKey에 대해 자동 중복 제거
|
||||
// - 상태 동기화: 모든 컴포넌트가 같은 캐시 공유
|
||||
|
||||
// 전역 상태 변경 구독
|
||||
globalState.subscribers.add(updateFromGlobalState);
|
||||
|
||||
return () => {
|
||||
globalState.subscribers.delete(updateFromGlobalState);
|
||||
};
|
||||
}, []);
|
||||
|
||||
// 🔧 테이블 코드 카테고리 로드 (전역 상태 사용)
|
||||
const loadTableCodeCategory = async () => {
|
||||
if (!component.tableName || !component.columnName) return;
|
||||
|
||||
try {
|
||||
console.log(`🔍 [${component.id}] 전역 테이블 코드 카테고리 조회`);
|
||||
const category = await loadGlobalTableCodeCategory(component.tableName, component.columnName);
|
||||
|
||||
if (category !== dynamicCodeCategory) {
|
||||
console.log(`🔄 [${component.id}] 코드 카테고리 변경: ${dynamicCodeCategory} → ${category}`);
|
||||
setDynamicCodeCategory(category);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(`❌ [${component.id}] 테이블 코드 카테고리 조회 실패:`, error);
|
||||
}
|
||||
};
|
||||
|
||||
// 🔧 코드 옵션 로드 (전역 상태 사용)
|
||||
const loadCodeOptions = async (category: string) => {
|
||||
if (!category || category === "none") {
|
||||
setCodeOptions([]);
|
||||
setIsLoadingCodes(false);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setIsLoadingCodes(true);
|
||||
console.log(`🔄 [${component.id}] 전역 코드 옵션 로딩: ${category}`);
|
||||
|
||||
const options = await loadGlobalCodeOptions(category);
|
||||
setCodeOptions(options);
|
||||
|
||||
console.log(`✅ [${component.id}] 코드 옵션 업데이트 완료: ${category} (${options.length}개)`);
|
||||
} catch (error) {
|
||||
console.error(`❌ [${component.id}] 코드 옵션 로딩 실패:`, error);
|
||||
setCodeOptions([]);
|
||||
} finally {
|
||||
setIsLoadingCodes(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 초기 테이블 코드 카테고리 로드
|
||||
useEffect(() => {
|
||||
loadTableCodeCategory();
|
||||
}, [component.tableName, component.columnName]);
|
||||
|
||||
// 전역 상태 변경 시 동기화
|
||||
useEffect(() => {
|
||||
if (component.tableName && component.columnName) {
|
||||
const key = `${component.tableName}.${component.columnName}`;
|
||||
const cachedCategory = globalState.tableCategories.get(key);
|
||||
|
||||
if (cachedCategory && cachedCategory !== dynamicCodeCategory) {
|
||||
console.log(`🔄 [${component.id}] 전역 상태 동기화: ${dynamicCodeCategory} → ${cachedCategory}`);
|
||||
setDynamicCodeCategory(cachedCategory || null);
|
||||
}
|
||||
}
|
||||
}, [globalStateVersion, component.tableName, component.columnName]);
|
||||
|
||||
// 코드 카테고리 변경 시 옵션 로드
|
||||
useEffect(() => {
|
||||
if (codeCategory && codeCategory !== "none") {
|
||||
// 전역 캐시된 옵션부터 확인
|
||||
const cached = globalState.codeOptions.get(codeCategory);
|
||||
if (cached && Date.now() - cached.timestamp < CACHE_DURATION) {
|
||||
console.log(`🚀 [${component.id}] 전역 캐시 즉시 적용: ${codeCategory} (${cached.options.length}개)`);
|
||||
setCodeOptions(cached.options);
|
||||
setIsLoadingCodes(false);
|
||||
} else {
|
||||
loadCodeOptions(codeCategory);
|
||||
}
|
||||
} else {
|
||||
setCodeOptions([]);
|
||||
setIsLoadingCodes(false);
|
||||
}
|
||||
}, [codeCategory]);
|
||||
|
||||
// 전역 상태에서 코드 옵션 변경 감지
|
||||
useEffect(() => {
|
||||
if (codeCategory) {
|
||||
const cached = globalState.codeOptions.get(codeCategory);
|
||||
if (cached && Date.now() - cached.timestamp < CACHE_DURATION) {
|
||||
if (JSON.stringify(cached.options) !== JSON.stringify(codeOptions)) {
|
||||
console.log(`🔄 [${component.id}] 전역 옵션 변경 감지: ${codeCategory}`);
|
||||
setCodeOptions(cached.options);
|
||||
}
|
||||
}
|
||||
}
|
||||
}, [globalStateVersion, codeCategory]);
|
||||
|
||||
// 선택된 값에 따른 라벨 업데이트
|
||||
useEffect(() => {
|
||||
|
|
@ -438,41 +206,20 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
|
|||
}
|
||||
}, [selectedValue, codeOptions, config.options]);
|
||||
|
||||
// 클릭 이벤트 핸들러 (전역 상태 새로고침)
|
||||
// 클릭 이벤트 핸들러 (React Query로 간소화)
|
||||
const handleToggle = () => {
|
||||
if (isDesignMode) return;
|
||||
|
||||
console.log(`🖱️ [${component.id}] 드롭다운 토글: ${isOpen} → ${!isOpen}`);
|
||||
console.log(`🖱️ [${component.id}] 드롭다운 토글 (React Query): ${isOpen} → ${!isOpen}`);
|
||||
console.log(`📊 [${component.id}] 현재 상태:`, {
|
||||
isDesignMode,
|
||||
codeCategory,
|
||||
isLoadingCodes,
|
||||
allOptionsLength: allOptions.length,
|
||||
allOptions: allOptions.map((o) => ({ value: o.value, label: o.label })),
|
||||
codeOptionsLength: codeOptions.length,
|
||||
tableName: component.tableName,
|
||||
columnName: component.columnName,
|
||||
});
|
||||
|
||||
// 드롭다운을 열 때 전역 상태 새로고침
|
||||
if (!isOpen) {
|
||||
console.log(`🖱️ [${component.id}] 셀렉트박스 클릭 - 전역 상태 새로고침`);
|
||||
|
||||
// 테이블 설정 캐시 무효화 후 재로드
|
||||
if (component.tableName && component.columnName) {
|
||||
const key = `${component.tableName}.${component.columnName}`;
|
||||
globalState.tableCategories.delete(key);
|
||||
|
||||
// 현재 코드 카테고리의 캐시도 무효화
|
||||
if (dynamicCodeCategory) {
|
||||
globalState.codeOptions.delete(dynamicCodeCategory);
|
||||
console.log(`🗑️ [${component.id}] 코드 옵션 캐시 무효화: ${dynamicCodeCategory}`);
|
||||
|
||||
// 강제로 새로운 API 호출 수행
|
||||
console.log(`🔄 [${component.id}] 강제 코드 옵션 재로드 시작: ${dynamicCodeCategory}`);
|
||||
loadCodeOptions(dynamicCodeCategory);
|
||||
}
|
||||
|
||||
loadTableCodeCategory();
|
||||
}
|
||||
}
|
||||
|
||||
// React Query가 자동으로 캐시 관리하므로 수동 새로고침 불필요
|
||||
setIsOpen(!isOpen);
|
||||
};
|
||||
|
||||
|
|
@ -519,45 +266,19 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
|
|||
};
|
||||
}, [isOpen]);
|
||||
|
||||
// 🚀 실시간 업데이트를 위한 이벤트 리스너
|
||||
useEffect(() => {
|
||||
const handleFocus = () => {
|
||||
console.log(`👁️ [${component.id}] 윈도우 포커스 - 전역 상태 새로고침`);
|
||||
if (component.tableName && component.columnName) {
|
||||
const key = `${component.tableName}.${component.columnName}`;
|
||||
globalState.tableCategories.delete(key); // 캐시 무효화
|
||||
loadTableCodeCategory();
|
||||
}
|
||||
};
|
||||
|
||||
const handleVisibilityChange = () => {
|
||||
if (!document.hidden) {
|
||||
console.log(`👁️ [${component.id}] 페이지 가시성 변경 - 전역 상태 새로고침`);
|
||||
if (component.tableName && component.columnName) {
|
||||
const key = `${component.tableName}.${component.columnName}`;
|
||||
globalState.tableCategories.delete(key); // 캐시 무효화
|
||||
loadTableCodeCategory();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener("focus", handleFocus);
|
||||
document.addEventListener("visibilitychange", handleVisibilityChange);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener("focus", handleFocus);
|
||||
document.removeEventListener("visibilitychange", handleVisibilityChange);
|
||||
};
|
||||
}, [component.tableName, component.columnName]);
|
||||
// ✅ React Query가 자동으로 처리하므로 수동 이벤트 리스너 불필요
|
||||
// - refetchOnWindowFocus: true (기본값)
|
||||
// - refetchOnReconnect: true (기본값)
|
||||
// - staleTime으로 적절한 캐시 관리
|
||||
|
||||
// 모든 옵션 가져오기
|
||||
const getAllOptions = () => {
|
||||
const configOptions = config.options || [];
|
||||
console.log(`🔧 [${component.id}] 옵션 병합:`, {
|
||||
codeOptionsLength: codeOptions.length,
|
||||
codeOptions: codeOptions.map((o) => ({ value: o.value, label: o.label })),
|
||||
codeOptions: codeOptions.map((o: Option) => ({ value: o.value, label: o.label })),
|
||||
configOptionsLength: configOptions.length,
|
||||
configOptions: configOptions.map((o) => ({ value: o.value, label: o.label })),
|
||||
configOptions: configOptions.map((o: Option) => ({ value: o.value, label: o.label })),
|
||||
});
|
||||
return [...codeOptions, ...configOptions];
|
||||
};
|
||||
|
|
@ -649,7 +370,7 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
|
|||
isDesignMode,
|
||||
isLoadingCodes,
|
||||
allOptionsLength: allOptions.length,
|
||||
allOptions: allOptions.map((o) => ({ value: o.value, label: o.label })),
|
||||
allOptions: allOptions.map((o: Option) => ({ value: o.value, label: o.label })),
|
||||
});
|
||||
return null;
|
||||
})()}
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue