254 lines
7.4 KiB
Markdown
254 lines
7.4 KiB
Markdown
# 다중 선택(Multi-Select) 배열 직렬화 문제 해결 보고서
|
|
|
|
## 문제 요약
|
|
|
|
**증상**: 다중 선택 컴포넌트(TagboxSelect, 체크박스 등)로 선택한 값이 DB에 저장될 때 손상되거나 `null`로 저장됨
|
|
|
|
**영향받는 기능**:
|
|
- 품목정보의 `division` (구분) 필드
|
|
- 모든 다중 선택 카테고리 필드
|
|
|
|
**손상된 데이터 예시**:
|
|
```
|
|
{"{\"{\\\"CAT_ML7SR2T9_IM7H\\\",\\\"CAT_ML8ZFQFU_EE5Z\\\"}\"}",...}
|
|
```
|
|
|
|
**정상 데이터 예시**:
|
|
```
|
|
CAT_ML7SR2T9_IM7H,CAT_ML8ZFQFU_EE5Z,CAT_ML8ZFVEL_1TOR
|
|
```
|
|
|
|
---
|
|
|
|
## 문제 원인 분석
|
|
|
|
### 1. PostgreSQL의 배열 자동 변환
|
|
|
|
Node.js의 `node-pg` 라이브러리는 JavaScript 배열을 PostgreSQL 배열 리터럴(`{...}`)로 자동 변환합니다.
|
|
|
|
```javascript
|
|
// JavaScript
|
|
["CAT_1", "CAT_2", "CAT_3"]
|
|
|
|
// PostgreSQL로 자동 변환됨
|
|
{"CAT_1","CAT_2","CAT_3"}
|
|
```
|
|
|
|
하지만 우리 시스템은 커스텀 테이블에서 **쉼표 구분 문자열**을 기대합니다:
|
|
```
|
|
CAT_1,CAT_2,CAT_3
|
|
```
|
|
|
|
### 2. 여러 저장 경로의 존재
|
|
|
|
코드를 분석한 결과, 저장 로직이 여러 경로로 나뉘어 있었습니다:
|
|
|
|
| 경로 | 파일 | 설명 |
|
|
|------|------|------|
|
|
| 1 | `buttonActions.ts` | 기본 저장 로직 (INSERT/UPDATE) |
|
|
| 2 | `EditModal.tsx` | 모달 내 직접 저장 (CREATE/UPDATE) |
|
|
| 3 | `nodeFlowExecutionService.ts` | 백엔드 노드 플로우 저장 |
|
|
|
|
### 3. 왜 초기 수정이 실패했는가?
|
|
|
|
#### 시도 1: `buttonActions.ts`에 배열 변환 추가
|
|
```typescript
|
|
// buttonActions.ts (라인 1002-1025)
|
|
if (isUpdate) {
|
|
for (const key of Object.keys(formData)) {
|
|
if (Array.isArray(value)) {
|
|
formData[key] = value.join(",");
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
**실패 이유**: `EditModal`이 `onSave` 콜백을 제공하면, `buttonActions.ts`는 이 콜백을 바로 호출하고 내부 저장 로직을 건너뜀
|
|
|
|
```typescript
|
|
// buttonActions.ts (라인 545-552)
|
|
if (onSave) {
|
|
await onSave(); // 바로 여기서 EditModal.handleSave()가 호출됨
|
|
return true; // 아래 배열 변환 로직에 도달하지 않음!
|
|
}
|
|
```
|
|
|
|
#### 시도 2: `nodeFlowExecutionService.ts`에 `normalizeValueForDB` 추가
|
|
|
|
**부분 성공**: INSERT에서는 동작했으나, EditModal의 UPDATE 경로는 여전히 문제
|
|
|
|
---
|
|
|
|
## 최종 해결 방법
|
|
|
|
### 핵심 수정: `EditModal.tsx`에 직접 배열 변환 추가
|
|
|
|
EditModal이 직접 `dynamicFormApi.updateFormDataPartial`을 호출하므로, **저장 직전**에 배열을 변환해야 했습니다.
|
|
|
|
#### 수정 위치 1: UPDATE 경로 (라인 957-1002)
|
|
|
|
```typescript
|
|
// EditModal.tsx - UPDATE 모드
|
|
Object.keys(formData).forEach((key) => {
|
|
if (formData[key] !== originalData[key]) {
|
|
let value = formData[key];
|
|
|
|
if (Array.isArray(value)) {
|
|
// 리피터 데이터 제외
|
|
const isRepeaterData = value.length > 0 &&
|
|
typeof value[0] === "object" &&
|
|
("_targetTable" in value[0] || "_isNewItem" in value[0]);
|
|
|
|
if (!isRepeaterData) {
|
|
// 🔧 손상된 값 필터링
|
|
const isValidValue = (v: any): boolean => {
|
|
if (typeof v === "number") return true;
|
|
if (typeof v !== "string") return false;
|
|
if (v.includes("{") || v.includes("}") || v.includes('"') || v.includes("\\"))
|
|
return false;
|
|
return true;
|
|
};
|
|
|
|
// 유효한 값만 쉼표로 연결
|
|
const validValues = value.filter(isValidValue);
|
|
value = validValues.join(",");
|
|
}
|
|
}
|
|
|
|
changedData[key] = value;
|
|
}
|
|
});
|
|
```
|
|
|
|
#### 수정 위치 2: CREATE 경로 (라인 855-875)
|
|
|
|
```typescript
|
|
// EditModal.tsx - CREATE 모드
|
|
Object.entries(dataToSave).forEach(([key, value]) => {
|
|
if (!Array.isArray(value)) {
|
|
masterDataToSave[key] = value;
|
|
} else {
|
|
const isRepeaterData = /* 리피터 체크 */;
|
|
|
|
if (isRepeaterData) {
|
|
// 리피터 데이터는 제외 (별도 저장)
|
|
} else {
|
|
// 다중 선택 배열 → 쉼표 구분 문자열
|
|
const validValues = value.filter(isValidValue);
|
|
masterDataToSave[key] = validValues.join(",");
|
|
}
|
|
}
|
|
});
|
|
```
|
|
|
|
#### 수정 위치 3: 그룹 UPDATE 경로 (라인 630-650)
|
|
|
|
그룹 품목 수정 시에도 동일한 로직 적용
|
|
|
|
---
|
|
|
|
## 손상된 데이터 필터링
|
|
|
|
기존에 손상된 데이터가 배열에 포함될 수 있어서, 변환 전 필터링이 필요했습니다:
|
|
|
|
```typescript
|
|
const isValidValue = (v: any): boolean => {
|
|
// 숫자는 유효
|
|
if (typeof v === "number" && !isNaN(v)) return true;
|
|
// 문자열이 아니면 무효
|
|
if (typeof v !== "string") return false;
|
|
// 빈 값 무효
|
|
if (!v || v.trim() === "") return false;
|
|
// PostgreSQL 배열 형식 감지 → 무효
|
|
if (v.includes("{") || v.includes("}") || v.includes('"') || v.includes("\\"))
|
|
return false;
|
|
return true;
|
|
};
|
|
```
|
|
|
|
**필터링 예시**:
|
|
```
|
|
입력 배열: ['{"CAT_1","CAT_2"}', 'CAT_ML7SR2T9_IM7H', 'CAT_ML8ZFQFU_EE5Z']
|
|
↑ 손상됨 (필터링) ↑ 유효 ↑ 유효
|
|
|
|
출력: 'CAT_ML7SR2T9_IM7H,CAT_ML8ZFQFU_EE5Z'
|
|
```
|
|
|
|
---
|
|
|
|
## 수정된 파일 목록
|
|
|
|
| 파일 | 수정 내용 |
|
|
|------|-----------|
|
|
| `frontend/components/screen/EditModal.tsx` | CREATE/UPDATE/그룹UPDATE 경로에 배열→문자열 변환 + 손상값 필터링 |
|
|
| `frontend/lib/utils/buttonActions.ts` | INSERT 경로에 배열→문자열 변환 (이미 수정됨) |
|
|
| `frontend/lib/registry/components/v2-select/V2SelectRenderer.tsx` | handleChange에서 배열→문자열 변환 |
|
|
| `backend-node/src/services/nodeFlowExecutionService.ts` | normalizeValueForDB 헬퍼 추가 |
|
|
|
|
---
|
|
|
|
## 교훈 및 향후 주의사항
|
|
|
|
### 1. 저장 경로 파악의 중요성
|
|
|
|
프론트엔드에서 저장 로직이 여러 경로로 분기될 수 있으므로, **모든 경로를 추적**해야 합니다.
|
|
|
|
```
|
|
사용자 저장 버튼 클릭
|
|
↓
|
|
ButtonPrimaryComponent
|
|
↓
|
|
buttonActions.handleSave()
|
|
↓
|
|
┌─────────────────────────────────────┐
|
|
│ onSave 콜백이 있으면? │
|
|
│ → EditModal.handleSave() 직접 호출│ ← 이 경로를 놓침!
|
|
│ onSave 콜백이 없으면? │
|
|
│ → buttonActions 내부 저장 로직 │
|
|
└─────────────────────────────────────┘
|
|
```
|
|
|
|
### 2. 로그 기반 디버깅
|
|
|
|
로그가 어디까지 찍히고 어디서 안 찍히는지를 통해 코드 경로를 추적:
|
|
|
|
```
|
|
[예상한 로그]
|
|
buttonActions.ts:512 🔍 [handleSave] 진입
|
|
buttonActions.ts:1021 🔧 배열→문자열 변환 ← 이게 안 나옴!
|
|
|
|
[실제 로그]
|
|
buttonActions.ts:512 🔍 [handleSave] 진입
|
|
dynamicForm.ts:140 🔄 폼 데이터 부분 업데이트 ← 바로 여기로 점프!
|
|
```
|
|
|
|
### 3. 리피터 데이터 vs 다중 선택 구분
|
|
|
|
배열이라고 모두 쉼표 문자열로 변환하면 안 됩니다:
|
|
|
|
| 타입 | 예시 | 처리 방법 |
|
|
|------|------|-----------|
|
|
| 다중 선택 | `["CAT_1", "CAT_2"]` | 쉼표 문자열로 변환 |
|
|
| 리피터 데이터 | `[{id: 1, _targetTable: "..."}]` | 별도 테이블에 저장, 마스터에서 제외 |
|
|
|
|
---
|
|
|
|
## 확인된 정상 동작
|
|
|
|
```
|
|
EditModal.tsx:1002 🔧 [EditModal UPDATE] 배열→문자열 변환: division
|
|
{original: 3, valid: 3, converted: 'CAT_ML7SR2T9_IM7H,CAT_ML8ZFQFU_EE5Z,CAT_ML8ZFVEL_1TOR'}
|
|
|
|
dynamicForm.ts:153 ✅ 폼 데이터 부분 업데이트 성공
|
|
```
|
|
|
|
---
|
|
|
|
## 작성일
|
|
|
|
2026-02-05
|
|
|
|
## 작성자
|
|
|
|
AI Assistant (Claude)
|