20ad1d6829
모바일/태블릿 환경에서 바코드·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 추출 |
||
|---|---|---|
| .. | ||
| app | ||
| components | ||
| constants | ||
| contexts | ||
| docs | ||
| hooks | ||
| lib | ||
| providers | ||
| public | ||
| scripts | ||
| stores | ||
| test-scenarios | ||
| types | ||
| utils | ||
| .dockerignore | ||
| .gitignore | ||
| .prettierignore | ||
| .prettierrc | ||
| MODAL_REPEATER_TABLE_DEBUG.md | ||
| README.md | ||
| components.json | ||
| eslint.config.mjs | ||
| middleware.ts | ||
| next.config.mjs | ||
| package-lock.json | ||
| package.json | ||
| postcss.config.mjs | ||
| tsconfig.json | ||
README.md
This is a Next.js project bootstrapped with create-next-app.
Environment Setup
환경변수 설정
개발 환경에서 파일 미리보기가 정상 작동하도록 하려면 다음 환경변수를 설정하세요:
.env.local파일을 생성하고 다음 내용을 추가:
# 개발 환경 (Next.js rewrites 사용)
NEXT_PUBLIC_API_URL=/api
# 운영 환경에서는 실제 백엔드 URL 사용
# NEXT_PUBLIC_API_URL=http://39.117.244.52:8080/api
- 백엔드 서버가 포트 3000에서 실행되고 있는지 확인
- Next.js 개발 서버는 포트 9771에서 실행
파일 미리보기 문제 해결
파일 미리보기에서 CORS 오류가 발생하는 경우:
- 백엔드 서버가 정상 실행 중인지 확인
- Next.js rewrites 설정이 올바른지 확인 (
next.config.mjs) - 환경변수
NEXT_PUBLIC_API_URL이 올바르게 설정되었는지 확인
Getting Started
First, run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
Open http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.
This project uses next/font to automatically optimize and load Geist, a new font family for Vercel.
Learn More
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
Deploy on Vercel
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.