feat(pop-scanner): 바코드/QR 스캐너 컴포넌트 + 멀티필드 파싱 + 반자동 매핑

모바일/태블릿 환경에서 바코드·QR을 카메라로 스캔하여 검색·입력 필드에
값을 자동 전달하는 pop-scanner 컴포넌트를 추가하고, JSON 형태의
멀티필드 데이터를 여러 컴포넌트에 분배하는 파싱 체계를 구현한다.
[pop-scanner 신규]
- 카메라 스캔 UI (BarcodeScanModal) + 아이콘 전용 버튼
- parseMode 3모드: none(단일값), auto(전역 자동매칭), json(반자동 매핑)
- auto: scan_auto_fill 전역 이벤트로 fieldName 기준 자동 입력
- json: 연결된 컴포넌트 필드를 체크박스 목록으로 표시,
  fieldName==JSON키 자동 매칭 + 관리자 override(enabled/sourceKey)
- getDynamicConnectionMeta로 parseMode별 sendable 동적 생성
[pop-field 연동]
- scan_auto_fill 구독: sections.fields의 fieldName과 JSON 키 매칭
- columnMapping 키를 fieldName 기준으로 통일 (fieldId→fieldName)
- targetColumn 선택 시 fieldName 자동 동기화
- 새 필드 fieldName 기본값을 빈 문자열로 변경
[pop-search 연동]
- scan_auto_fill 구독: filterColumns 전체 키 매칭
- set_value 수신 시 모달 타입이면 modalDisplayText도 갱신
[BarcodeScanModal 개선]
- 모달 열릴 때 상태 리셋 (scannedCode/error/isScanning)
- "다시 스캔" 버튼 추가
- 스캔 가이드 영역 확대 (h-3/5 w-4/5)
[getConnectedFields 필드 추출]
- filterColumns(복수) > modalConfig.valueField > fieldName 우선순위
- pop-field sections.fields[].fieldName 추출
This commit is contained in:
SeongHyun Kim
2026-03-06 19:52:18 +09:00
parent 955da6ae87
commit 20ad1d6829
9 changed files with 792 additions and 11 deletions

View File

@@ -3,7 +3,7 @@
import { useDrag } from "react-dnd";
import { cn } from "@/lib/utils";
import { PopComponentType } from "../types/pop-layout";
import { Square, FileText, MousePointer, BarChart3, LayoutGrid, MousePointerClick, List, Search, TextCursorInput } from "lucide-react";
import { Square, FileText, MousePointer, BarChart3, LayoutGrid, MousePointerClick, List, Search, TextCursorInput, ScanLine } from "lucide-react";
import { DND_ITEM_TYPES } from "../constants";
// 컴포넌트 정의
@@ -69,6 +69,12 @@ const PALETTE_ITEMS: PaletteItem[] = [
icon: TextCursorInput,
description: "저장용 값 입력 (섹션별 멀티필드)",
},
{
type: "pop-scanner",
label: "스캐너",
icon: ScanLine,
description: "바코드/QR 카메라 스캔",
},
];
// 드래그 가능한 컴포넌트 아이템

View File

@@ -9,7 +9,7 @@
/**
* POP 컴포넌트 타입
*/
export type PopComponentType = "pop-sample" | "pop-text" | "pop-icon" | "pop-dashboard" | "pop-card-list" | "pop-button" | "pop-string-list" | "pop-search" | "pop-field";
export type PopComponentType = "pop-sample" | "pop-text" | "pop-icon" | "pop-dashboard" | "pop-card-list" | "pop-button" | "pop-string-list" | "pop-search" | "pop-field" | "pop-scanner";
/**
* 데이터 흐름 정의
@@ -362,6 +362,7 @@ export const DEFAULT_COMPONENT_GRID_SIZE: Record<PopComponentType, { colSpan: nu
"pop-string-list": { colSpan: 4, rowSpan: 3 },
"pop-search": { colSpan: 2, rowSpan: 1 },
"pop-field": { colSpan: 6, rowSpan: 2 },
"pop-scanner": { colSpan: 1, rowSpan: 1 },
};
/**