# 🚨 버튼 제어관리 기능 통합 - 잠재적 문제점 및 해결방안

## 📊 성능 관련 문제점

### 1. **버튼 클릭 시 지연 시간 증가**

**문제점:**

- 기존 버튼은 단순한 액션만 수행 (50-100ms)
- 제어관리 추가 시 복합적인 처리로 인한 지연 가능성
  - 데이터베이스 조건 검증: 100-300ms
  - 복잡한 비즈니스 로직 실행: 500ms-2초
  - 다중 테이블 업데이트: 1-5초

**현재 코드에서 확인된 문제:**

```typescript
// InteractiveScreenViewer.tsx에서 버튼 클릭 처리가 동기적
const handleButtonClick = async () => {
  // 기존에는 단순한 액션만
  switch (actionType) {
    case "save":
      await handleSaveAction();
      break; // ~100ms
    // 제어관리 추가 시 복합 처리로 증가 예상
  }
};
```

**해결방안:**

1. **비동기 처리 + 로딩 상태**

```typescript
const [isExecuting, setIsExecuting] = useState(false);

const handleButtonClick = async () => {
  setIsExecuting(true);
  try {
    // 제어관리 실행
  } finally {
    setIsExecuting(false);
  }
};
```

2. **백그라운드 실행 옵션**

```typescript
// 긴급하지 않은 제어관리는 백그라운드에서 실행
if (config.executionOptions?.asyncExecution) {
  // 즉시 성공 응답
  // 백그라운드에서 제어관리 실행
}
```

### 2. **메모리 사용량 증가**

**문제점:**

- 각 버튼마다 제어관리 설정을 메모리에 보관
- 복잡한 조건/액션 설정으로 인한 메모리 사용량 증가
- 대량의 버튼이 있는 화면에서 메모리 부족 가능성

**해결방안:**

1. **지연 로딩**

```typescript
// 제어관리 설정을 필요할 때만 로드
const loadDataflowConfig = useCallback(async () => {
  if (config.enableDataflowControl && !dataflowConfig) {
    const config = await apiClient.get(`/button-dataflow/config/${buttonId}`);
    setDataflowConfig(config.data);
  }
}, [buttonId, config.enableDataflowControl]);
```

2. **설정 캐싱**

```typescript
// LRU 캐시로 자주 사용되는 설정만 메모리 보관
const configCache = new LRUCache({ max: 100, ttl: 300000 }); // 5분 TTL
```

### 3. **데이터베이스 성능 영향**

**문제점:**

- 버튼 클릭마다 복잡한 SQL 쿼리 실행
- EventTriggerService의 현재 구조상 전체 관계도 스캔

```typescript
// eventTriggerService.ts - 모든 관계도를 검색하는 비효율적인 쿼리
const diagrams = await prisma.$queryRaw`
  SELECT * FROM dataflow_diagrams 
  WHERE company_code = ${companyCode}
  AND (category::text = '"data-save"' OR ...)
`;
```

**해결방안:**

1. **인덱스 최적화**

```sql
-- 복합 인덱스 추가
CREATE INDEX idx_dataflow_button_lookup ON dataflow_diagrams
USING GIN ((control->'buttonId'))
WHERE category @> '["button-trigger"]';
```

2. **캐싱 계층 추가**

```typescript
// 버튼별 제어관리 매핑을 캐시
const buttonDataflowCache = new Map<string, DataflowConfig[]>();
```

## 🔧 확장성 관련 문제점

### 4. **설정 복잡도 증가**

**문제점:**

- 기존 단순한 버튼 설정에서 복잡한 제어관리 설정 추가
- 사용자 혼란 가능성
- UI가 너무 복잡해질 위험

**현재 UI 구조 문제:**

```typescript
// ButtonConfigPanel.tsx가 이미 복잡함
return (
  <div className="space-y-4">
    {/* 기존 15개+ 설정 항목 */}
    {/* + 제어관리 설정 추가 시 더욱 복잡해짐 */}
  </div>
);
```

**해결방안:**

1. **탭 구조로 분리**

```typescript
<Tabs defaultValue="basic">
  <TabsList>
    <TabsTrigger value="basic">기본 설정</TabsTrigger>
    <TabsTrigger value="dataflow">제어관리</TabsTrigger>
    <TabsTrigger value="advanced">고급 설정</TabsTrigger>
  </TabsList>
  <TabsContent value="basic">{/* 기존 설정 */}</TabsContent>
  <TabsContent value="dataflow">{/* 제어관리 설정 */}</TabsContent>
</Tabs>
```

2. **단계별 설정 마법사**

```typescript
const DataflowConfigWizard = () => {
  const [step, setStep] = useState(1);
  // 1단계: 활성화 여부
  // 2단계: 실행 타이밍
  // 3단계: 제어 모드
  // 4단계: 상세 설정
};
```

### 5. **타입 안전성 문제**

**문제점:**

- 기존 ButtonTypeConfig에 새로운 필드 추가로 인한 호환성 문제
- 런타임 오류 가능성

**현재 타입 구조 문제:**

```typescript
// 기존 코드들이 ButtonTypeConfig의 새 필드를 모름
const config = component.webTypeConfig; // enableDataflowControl 없을 수 있음
if (config.enableDataflowControl) { // undefined 체크 필요
```

**해결방안:**

1. **점진적 타입 확장**

```typescript
// 기존 타입은 유지하고 새로운 타입 정의
interface ExtendedButtonTypeConfig extends ButtonTypeConfig {
  enableDataflowControl?: boolean;
  dataflowConfig?: ButtonDataflowConfig;
  dataflowTiming?: "before" | "after" | "replace";
}

// 타입 가드 함수
function hasDataflowConfig(
  config: ButtonTypeConfig
): config is ExtendedButtonTypeConfig {
  return "enableDataflowControl" in config;
}
```

2. **마이그레이션 함수**

```typescript
const migrateButtonConfig = (
  config: ButtonTypeConfig
): ExtendedButtonTypeConfig => {
  return {
    ...config,
    enableDataflowControl: false, // 기본값
    dataflowConfig: undefined,
    dataflowTiming: "after",
  };
};
```

### 6. **버전 호환성 문제**

**문제점:**

- 기존 저장된 버튼 설정과 새로운 구조 간 호환성
- 점진적 배포 시 일부 기능 불일치

**해결방안:**

1. **버전 필드 추가**

```typescript
interface ButtonTypeConfig {
  version?: "1.0" | "2.0"; // 제어관리 추가 버전
  // ...기존 필드들
}
```

2. **자동 마이그레이션**

```typescript
const migrateButtonConfig = (config: any) => {
  if (!config.version || config.version === "1.0") {
    return {
      ...config,
      version: "2.0",
      enableDataflowControl: false,
      dataflowConfig: undefined,
    };
  }
  return config;
};
```

## 🚫 보안 관련 문제점

### 7. **권한 검증 부재**

**문제점:**

- 제어관리 실행 시 추가적인 권한 검증 없음
- 사용자가 설정한 제어관리를 통해 의도치 않은 데이터 조작 가능

**해결방안:**

1. **제어관리 권한 체계**

```typescript
interface DataflowPermission {
  canExecuteDataflow: boolean;
  allowedTables: string[];
  allowedActions: ("insert" | "update" | "delete")[];
}

const checkDataflowPermission = async (
  userId: string,
  dataflowConfig: ButtonDataflowConfig
): Promise<boolean> => {
  // 사용자별 제어관리 권한 검증
};
```

2. **실행 로그 및 감사**

```typescript
const logDataflowExecution = async (
  userId: string,
  buttonId: string,
  dataflowResult: ExecutionResult
) => {
  await prisma.dataflow_audit_log.create({
    data: {
      user_id: userId,
      button_id: buttonId,
      executed_actions: dataflowResult.executedActions,
      execution_time: dataflowResult.executionTime,
      timestamp: new Date(),
    },
  });
};
```

### 8. **SQL 인젝션 위험**

**문제점:**

- 고급 모드에서 사용자가 직접 조건 설정 시 SQL 인젝션 가능성
- 동적 테이블명, 필드명 처리 시 보안 취약점

**해결방안:**

1. **화이트리스트 기반 검증**

```typescript
const ALLOWED_TABLES = ["user_info", "order_master" /* ... */];
const ALLOWED_OPERATORS = ["=", "!=", ">", "<", ">=", "<=", "LIKE"];

const validateDataflowConfig = (config: ButtonDataflowConfig) => {
  if (config.directControl) {
    if (!ALLOWED_TABLES.includes(config.directControl.sourceTable)) {
      throw new Error("허용되지 않은 테이블입니다.");
    }
    // 추가 검증...
  }
};
```

2. **파라미터화된 쿼리 강제**

```typescript
// 모든 동적 쿼리를 파라미터화
const executeCondition = async (condition: DataflowCondition, data: any) => {
  const query = `SELECT * FROM ${tableName} WHERE ${fieldName} ${operator} $1`;
  return await prisma.$queryRaw(query, condition.value);
};
```

## 💡 권장 해결 전략

### Phase 1: 안전한 시작 (MVP)

1. **간편 모드만 구현** (기존 관계도 선택)
2. **"after" 타이밍만 지원** (기존 액션 후 실행)
3. **기본적인 성능 최적화** (캐싱, 인덱스)
4. **상세한 로깅 및 모니터링** 추가

### Phase 2: 점진적 확장

1. **고급 모드 추가** (권한 검증 강화)
2. **"before", "replace" 타이밍 지원**
3. **성능 최적화 고도화** (비동기 실행, 큐잉)
4. **UI 개선** (탭, 마법사)

### Phase 3: 고도화

1. **배치 처리 지원**
2. **복잡한 비즈니스 로직 지원**
3. **AI 기반 설정 추천**
4. **성능 대시보드**

### 모니터링 지표

```typescript
interface DataflowMetrics {
  averageExecutionTime: number;
  errorRate: number;
  memoryUsage: number;
  cacheHitRate: number;
  userSatisfactionScore: number;
}
```

이러한 문제점들을 사전에 고려하여 설계하면 안정적이고 확장 가능한 시스템을 구축할 수 있습니다.