3bd0eff82e
세부진행화면(4502)의 프론트엔드 구현: pop-work-detail 컴포넌트 신규 생성과 디자이너 모달 캔버스 편집을 통해, 카드 클릭 시 공정별 체크리스트/검사/실적 상세 작업 화면을 내부 모달로 표시할 수 있게 한다. [신규] pop-work-detail 컴포넌트 (4파일) - PopWorkDetailComponent: parentRow → 현재 공정 추출 → process_work_result 조회, 좌측 사이드바(PRE/IN/POST 3단계 작업항목 그룹) + 우측 체크리스트(5종: check/inspect/ input/procedure/material) + 타이머 제어(start/pause/resume) + 수량 등록 + 공정 완료 - PopWorkDetailConfig: showTimer/showQuantityInput/phaseLabels 설정 패널 - PopWorkDetailPreview: 디자이너 프리뷰 - index.tsx: PopComponentRegistry 등록 (category: display, touchOptimized) [모달 캔버스 시스템] PopDesigner.tsx 대규모 리팩토링 - handleMoveComponent/handleResizeComponent/handleRequestResize: layout 직접 참조 → setLayout(prev => ...) 함수형 업데이트로 전환 + activeCanvasId 분기: main이면 기존 로직, modal-*이면 modals 배열 내 해당 모달 수정 - PopCardListV2Config: 모달 캔버스 생성/열기 버튼 (usePopDesignerContext 연동) - PopCardListV2Component: modal-* screenId → setSharedData + __pop_modal_open__ 이벤트 - PopViewerWithModals: parentRow prop + fullscreen 모달 지원 + flex 레이아웃 [기타] - ComponentPalette: pop-work-detail 팔레트 항목 + ClipboardCheck 아이콘 - pop-layout.ts: PopComponentType에 pop-work-detail 추가, 기본 크기 38x26 - PopRenderer: COMPONENT_TYPE_LABELS에 pop-work-detail 추가 - types.ts: PopWorkDetailConfig 인터페이스 - PopCanvas.tsx: activeLayout.components 참조 수정 (모달 캔버스 호환) DB 변경 0건. 백엔드 변경 0건. |
||
|---|---|---|
| .. | ||
| 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 | ||
| approval-box-result.png | ||
| 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.