12 KiB

Raw Permalink Blame History

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

✨ 완전 자동화 완료!

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

🎯 자동화된 흐름

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 컴포넌트

테이블: item_info
옵션:
  - 체크박스 표시: ✓
  - 다중 선택: ✓

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

Button 컴포넌트

버튼 텍스트: "다음"
버튼 액션: "데이터 전달 + 모달 열기" 🆕

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

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

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

SelectedItemsDetailInput 컴포넌트 추가

컴포넌트: "선택 항목 상세입력"

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

상세 설정 (선택사항)

데이터 소스 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단계: "다음" 버튼 클릭

// 자동으로 일어나는 일:
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

// 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 자동 감지

// 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 읽기

// 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] || [];

🧪 테스트 시나리오

기본 테스트

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

고급 테스트 (직접 지정)

시나리오: 여러 TableList가 있는 화면

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

🚨 주의사항

❌ 잘못된 사용법

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

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

✅ 올바른 사용법

# 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" ← 명시

🎯 완료 체크리스트

구현 완료 ✅

TableList → modalDataStore 자동 저장
Button → TableList 자동 감지
Button → URL 파라미터 전달
SelectedItemsDetailInput → URL 자동 읽기
설정 패널 UI에 "자동" 힌트 추가

사용자 경험 ✅

dataSourceId 입력 불필요 (자동)
일관된 데이터 흐름 (자동)
오류 메시지 명확 (자동)
직관적인 UI (자동 힌트)

📝 요약

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

TableList 추가 → 테이블 선택
Button 추가 → 액션 "데이터 전달 + 모달 열기" 선택
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

🎉 완전 자동화 완료!

12 KiB Raw Permalink Blame History