# 선택 항목 상세입력 완전 자동화 가이드 🚀

## ✨ 완전 자동화 완료!

이제 **아무 설정도 하지 않아도** 데이터가 자동으로 전달됩니다!

---

## 🎯 자동화된 흐름

### 1단계: TableList (선택 화면)
```
┌─────────────────────────────────┐
│ TableList 컴포넌트              │
│ - 테이블: item_info            │
│ - 체크박스로 품목 3개 선택      │
└─────────────────────────────────┘
         ↓ (자동 저장)
┌─────────────────────────────────┐
│ modalDataStore                  │
│ { "item_info": [선택된 데이터] }│
└─────────────────────────────────┘
```

### 2단계: Button (다음 버튼)
```
┌─────────────────────────────────┐
│ Button 컴포넌트                 │
│ - 액션: "데이터 전달 + 모달열기"│
│ - dataSourceId: (비워둠)       │ ← 자동 감지!
└─────────────────────────────────┘
         ↓ (자동 감지)
┌─────────────────────────────────┐
│ 같은 화면에서 TableList 찾기    │
│ → tableName = "item_info"       │
└─────────────────────────────────┘
         ↓ (URL 전달)
┌─────────────────────────────────┐
│ 모달 열기                       │
│ URL: ?dataSourceId=item_info    │
└─────────────────────────────────┘
```

### 3단계: SelectedItemsDetailInput (상세 입력 화면)
```
┌─────────────────────────────────┐
│ SelectedItemsDetailInput        │
│ - dataSourceId: (비워둠)       │ ← URL에서 자동 읽기!
└─────────────────────────────────┘
         ↓ (자동 읽기)
┌─────────────────────────────────┐
│ URL: ?dataSourceId=item_info    │
│ → modalDataStore에서 데이터 로드│
└─────────────────────────────────┘
         ↓
┌─────────────────────────────────┐
│ 화면에 데이터 표시              │
│ 선택된 3개 품목 + 입력 필드     │
└─────────────────────────────────┘
```

---

## 🛠️ 설정 방법 (완전 자동)

### 1단계: 선택 화면 구성

#### TableList 컴포넌트
```yaml
테이블: item_info
옵션:
  - 체크박스 표시: ✓
  - 다중 선택: ✓
```

**설정 끝!** 선택된 데이터는 자동으로 `modalDataStore`에 저장됩니다.

#### Button 컴포넌트
```yaml
버튼 텍스트: "다음"
버튼 액션: "데이터 전달 + 모달 열기" 🆕

설정:
  - 데이터 소스 ID: (비워둠) ← ✨ 자동 감지!
  - 모달 제목: "상세 정보 입력"
  - 모달 크기: Large
  - 대상 화면: (상세 입력 화면 선택)
```

**중요**: `데이터 소스 ID`를 **비워두세요**! 자동으로 같은 화면의 TableList를 찾아서 테이블명을 사용합니다.

---

### 2단계: 상세 입력 화면 구성

#### SelectedItemsDetailInput 컴포넌트 추가
```yaml
컴포넌트: "선택 항목 상세입력"
```

**설정 끝!** URL 파라미터에서 자동으로 `dataSourceId`를 읽어옵니다.

#### 상세 설정 (선택사항)
```yaml
데이터 소스 ID: (비워둠) ← ✨ URL에서 자동!

표시할 컬럼:
  - 품목코드 (item_code)
  - 품목명 (item_name)
  - 규격 (specification)

추가 입력 필드:
  - 수량 (quantity): 숫자
  - 단가 (unit_price): 숫자
  - 납기일 (delivery_date): 날짜
  - 비고 (remarks): 텍스트영역

옵션:
  - 레이아웃: 테이블 형식 (Grid)
  - 항목 번호 표시: ✓
  - 항목 제거 허용: ☐
```

---

## 📊 실제 동작 시나리오

### 시나리오: 수주 등록

#### 1단계: 품목 선택
```
사용자가 품목 테이블에서 3개 선택:
  ✓ [PD-001] 케이블 100m
  ✓ [PD-002] 커넥터 50개
  ✓ [PD-003] 단자대 20개
```

#### 2단계: "다음" 버튼 클릭
```javascript
// 자동으로 일어나는 일:
1. 같은 화면에서 table-list 컴포넌트 찾기
   → componentType === "table-list"
   → tableName === "item_info"

2. modalDataStore에서 데이터 확인
   → modalData = [
       { id: "PD-001", originalData: {...} },
       { id: "PD-002", originalData: {...} },
       { id: "PD-003", originalData: {...} }
     ]

3. 모달 열기 + URL 파라미터 전달
   → URL: /screen/detail-input?dataSourceId=item_info
```

#### 3단계: 상세 정보 입력
```
자동으로 표시됨:

┌───────────────────────────────────────────────────────┐
│ 상세 정보 입력                                        │
├───────────────────────────────────────────────────────┤
│ # │ 품목코드 │ 품목명     │ 수량 │ 단가   │ 납기일  │
├───┼──────────┼────────────┼──────┼────────┼─────────┤
│ 1 │ PD-001   │ 케이블100m │ [  ] │ [    ] │ [     ] │
│ 2 │ PD-002   │ 커넥터50개 │ [  ] │ [    ] │ [     ] │
│ 3 │ PD-003   │ 단자대20개 │ [  ] │ [    ] │ [     ] │
└───────────────────────────────────────────────────────┘

사용자가 수량, 단가, 납기일만 입력하면 끝!
```

---

## 🎨 UI 미리보기

### Button 설정 화면
```
버튼 액션
├─ 데이터 전달 + 모달 열기 🆕
│
└─ 데이터 전달 + 모달 설정
   │
   ├─ 데이터 소스 ID (선택사항)
   │  [                                    ]
   │  ✨ 비워두면 같은 화면의 TableList를 자동으로 감지합니다
   │  직접 지정하려면 테이블명을 입력하세요 (예: item_info)
   │
   ├─ 모달 제목
   │  [상세 정보 입력                      ]
   │
   ├─ 모달 크기
   │  [큰 (Large) - 권장              ▼]
   │
   └─ 대상 화면 선택
      [화면을 선택하세요...             ▼]
```

### SelectedItemsDetailInput 설정 화면
```
데이터 소스 ID (자동 설정됨)
[                                    ]
✨ URL 파라미터에서 자동으로 가져옵니다 (Button이 전달)
테스트용으로 직접 입력하려면 테이블명을 입력하세요
```

---

## 🔍 자동화 원리

### 1. TableList → modalDataStore
```typescript
// TableListComponent.tsx
const handleRowSelection = (rowKey: string, checked: boolean) => {
  // ... 선택 처리 ...
  
  // 🆕 자동으로 스토어에 저장
  const { useModalDataStore } = await import("@/stores/modalDataStore");
  const dataSourceId = tableName; // item_info
  const modalDataItems = selectedRowsData.map(row => ({
    id: row.item_code,
    originalData: row,
    additionalData: {}
  }));
  useModalDataStore.getState().setData(dataSourceId, modalDataItems);
};
```

### 2. Button → TableList 자동 감지
```typescript
// buttonActions.ts - handleOpenModalWithData()
let dataSourceId = config.dataSourceId;

// 🆕 비워있으면 자동 감지
if (!dataSourceId && context.allComponents) {
  const tableListComponent = context.allComponents.find(
    (comp) => comp.componentType === "table-list" && comp.componentConfig?.tableName
  );
  
  if (tableListComponent) {
    dataSourceId = tableListComponent.componentConfig.tableName;
    console.log("✨ TableList 자동 감지:", dataSourceId);
  }
}

// 🆕 URL 파라미터로 전달
const modalEvent = new CustomEvent("openScreenModal", {
  detail: {
    screenId: config.targetScreenId,
    urlParams: { dataSourceId } // ← URL에 추가
  }
});
```

### 3. SelectedItemsDetailInput → URL 읽기
```typescript
// SelectedItemsDetailInputComponent.tsx
import { useSearchParams } from "next/navigation";

const searchParams = useSearchParams();
const urlDataSourceId = searchParams?.get("dataSourceId");

// 🆕 우선순위: URL > 설정 > component.id
const dataSourceId = useMemo(
  () => urlDataSourceId || componentConfig.dataSourceId || component.id,
  [urlDataSourceId, componentConfig.dataSourceId, component.id]
);

// 🆕 스토어에서 데이터 로드
const dataRegistry = useModalDataStore((state) => state.dataRegistry);
const modalData = dataRegistry[dataSourceId] || [];
```

---

## 🧪 테스트 시나리오

### 기본 테스트
1. **화면 편집기 열기**
2. **첫 번째 화면 (선택) 만들기**:
   - TableList 추가 (item_info)
   - Button 추가 (버튼 액션: "데이터 전달 + 모달 열기")
   - **dataSourceId는 비워둠!**
3. **두 번째 화면 (상세 입력) 만들기**:
   - SelectedItemsDetailInput 추가
   - **dataSourceId는 비워둠!**
   - 표시 컬럼 설정
   - 추가 입력 필드 설정
4. **할당된 화면에서 테스트**:
   - 품목 3개 선택
   - "다음" 버튼 클릭
   - 상세 입력 화면에서 데이터 확인 ✅

### 고급 테스트 (직접 지정)
```yaml
시나리오: 여러 TableList가 있는 화면

화면 구성:
  - TableList (item_info) ← 품목
  - TableList (customer_info) ← 고객
  - Button (품목 상세입력) ← dataSourceId: "item_info"
  - Button (고객 상세입력) ← dataSourceId: "customer_info"
```

---

## 🚨 주의사항

### ❌ 잘못된 사용법
```yaml
# 1. 같은 화면에 TableList가 여러 개 있는데 비워둠
TableList 1: item_info
TableList 2: customer_info
Button: dataSourceId = (비워둠) ← 어느 것을 선택해야 할까?

해결: dataSourceId를 명시적으로 지정
```

### ✅ 올바른 사용법
```yaml
# 1. TableList가 1개인 경우
TableList: item_info
Button: dataSourceId = (비워둠) ← 자동 감지 OK!

# 2. TableList가 여러 개인 경우
TableList 1: item_info
TableList 2: customer_info
Button 1: dataSourceId = "item_info" ← 명시
Button 2: dataSourceId = "customer_info" ← 명시
```

---

## 🎯 완료 체크리스트

### 구현 완료 ✅
- [x] TableList → modalDataStore 자동 저장
- [x] Button → TableList 자동 감지
- [x] Button → URL 파라미터 전달
- [x] SelectedItemsDetailInput → URL 자동 읽기
- [x] 설정 패널 UI에 "자동" 힌트 추가

### 사용자 경험 ✅
- [x] dataSourceId 입력 불필요 (자동)
- [x] 일관된 데이터 흐름 (자동)
- [x] 오류 메시지 명확 (자동)
- [x] 직관적인 UI (자동 힌트)

---

## 📝 요약

**이제 사용자는 단 3단계만 하면 됩니다:**

1. **TableList 추가** → 테이블 선택
2. **Button 추가** → 액션 "데이터 전달 + 모달 열기" 선택
3. **SelectedItemsDetailInput 추가** → 필드 설정

**dataSourceId는 자동으로 처리됩니다!** ✨

---

## 🔗 관련 파일

- `frontend/stores/modalDataStore.ts` - 데이터 저장소
- `frontend/lib/utils/buttonActions.ts` - 버튼 액션 (자동 감지)
- `frontend/lib/registry/components/table-list/TableListComponent.tsx` - 자동 저장
- `frontend/lib/registry/components/selected-items-detail-input/SelectedItemsDetailInputComponent.tsx` - URL 자동 읽기
- `frontend/components/screen/config-panels/ButtonConfigPanel.tsx` - 버튼 설정 UI
- `frontend/lib/registry/components/selected-items-detail-input/SelectedItemsDetailInputConfigPanel.tsx` - 상세 입력 설정 UI

---

**🎉 완전 자동화 완료!**