zio
a963c69141
backend: M2 배치/규정검증(PostGIS)·M3 설계·M4 배선/견적·M5 RenderJob + 인증(login/workspaces/accept-invite) 매퍼 배선으로 501 해소. M2 자동배치 3안 생성→선택/병합→규정 재검증. 계약 확장(Violation 좌표·LayoutDto.hall·AutoLayoutOption.booths, additive NON_NULL). 신규 HallMapper·UtilityOrderMapper(기존 테이블). gradlew build 통과. frontend: SCR-02 대시보드·SCR-06 설계스튜디오(4샷+Before/After)·SCR-07 배선뷰(적/청/녹)·SCR-12 갤러리 + CompareSlider(reroomai)·WiringCanvas. tsc/vite build EXIT 0. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
50 lines
7.9 KiB
Markdown
50 lines
7.9 KiB
Markdown
# 킨텍스 프론트엔드 — 진행 기록 (kintex-frontend-dev)
|
||
|
||
> 작성: kintex-frontend-dev · 2026-07-11 · 근거: `docs/design.md` v1.1 · `_workspace/01_backend_contracts.md` v0.1 · Stitch(SCR-01·SCR-03)
|
||
> 범위: IMPLEMENTATION_BACKLOG B-0(프론트 스캐폴드) + C-C 일부(SCR-01) + C-M2 일부(SCR-03)
|
||
|
||
## 완료
|
||
- **스캐폴드**: `src/frontend` (React 18 + Vite 5 + TS). 디자인 토큰(design.md §1) → `src/styles/tokens.css` CSS 변수 단일 출처. 라우팅(react-router, 인증 가드), API 클라이언트(JWT 헤더·ApiResponse 봉투·오류코드), WebSocket(STOMP/SockJS, `/topic/render/{jobId}` 구독) 골격.
|
||
- **SCR-01** 로그인/워크스페이스 선택: 좌 55% 브랜드 패널 + 우 45% 로그인 카드 → 로그인 후 워크스페이스 카드 그리드. `login`·`workspaces`·`accept-invite` 배선. **미등록 장치업체 초대 차단**(`NOT_REGISTERED_COMPANY` → 차단 모달).
|
||
- **SCR-03** 부스 배치 에디터: 3열(좌 도구·중앙 SVG 다크캔버스·우 속성/검증) + 상단 툴바. **SVG 캔버스**(부스 폴리곤·트렌치 그리드·축척·선택·줌). `GET/validate/auto-generate` 배선. **AI 자동배치 1·2·3안 생성→선택/병합** 다이얼로그(S7 조감 RenderJob WebSocket 구독).
|
||
- **검증**: `tsc -b` EXIT 0, `vite build` EXIT 0(238 modules, rollup win32 크래시 없음). WCAG AA — 포커스 링·role/aria·switch·reduced-motion.
|
||
|
||
## 경계면 이슈 (백엔드/계약 대조 — kintex-qa/backend 확인 요청)
|
||
|
||
1. **[중] 위반 오버레이 좌표 부재** — `ComplianceReport.violations[]`에 `pin`·`label`·`measured`는 있으나 **도면 하이라이트 위치(좌표/boothId)가 없다**. design.md §1-4·SCR-03은 "도면 위 같은 색 하이라이트 + 번호 핀으로 목록과 1:1 연결"을 요구. 현재 위반 목록의 "위치 보기"는 캔버스 하이라이트로 연결 불가. **요청: Violation에 `polygon`/`boothId`/`anchor[x,y]` 중 하나 추가**(pin 번호와 캔버스 오버레이 매핑용).
|
||
|
||
2. **[중] 홀 치수·트렌치 좌표 계약 부재** — 캔버스가 홀 크기(126×90m)와 트렌치 그리드를 하드코딩/가정 중. `LayoutDto`에 홀 dims·트렌치 좌표가 없다. 계약 §6 render의 `scene.hall.dims_m`엔 있음. **요청: `GET .../layout` 응답에 `hall:{dims_m, trenches?}` 포함** 또는 별도 `GET .../halls/{hallId}` 홀 마스터 엔드포인트(트렌치·기둥·비상구 포함).
|
||
|
||
3. **[하] auto-generate → 편집 반영 경로 불명** — `AutoLayoutOption`은 `summary`+`s7RenderJobId`만 반환, **선택 안의 부스 배열이 없다**. "이 안으로 편집 시작"이 선택 안을 layout에 병합하려면 옵션의 booths 또는 서버측 확정 엔드포인트가 필요. 현재는 재조회(refetch)로 임시 처리. **요청: auto-generate 옵션에 booths 포함 또는 `POST .../layout/apply-option {optionId}`**.
|
||
|
||
4. **[하] 홀 매니저 SSO·이메일 인증 로그인** — SCR-01의 "킨텍스 내부 계정 로그인" 버튼은 계약에 대응 엔드포인트 없음(login 단일). 현재 UI만 배치, 미배선. Phase B-1(2FA/SSO) 시 배선 예정.
|
||
|
||
5. **[정보] degraded 폴백** — `GET layout`·`login`·`accept-invite`가 현재 **501(NOT_IMPLEMENTED)**. 프론트는 501을 감지해 로그인은 안내 메시지, 에디터는 **샘플 배치(`sampleLayout.ts`, 계약 shape 동일)** 로 캔버스 시연. 매퍼 구현 시 코드 변경 없이 실데이터로 대체됨.
|
||
|
||
## 계약 준수 확인
|
||
- 응답 봉투 `ApiResponse<T>`·`PageResponse<T>`·오류코드→분기(FORBIDDEN·COMPLIANCE_BLOCKED·NOT_REGISTERED_COMPANY·NOT_IMPLEMENTED) 그대로 구현.
|
||
- AI 생성 이미지는 `watermarkRequired`/`watermarkText`/`notice`를 **항상 노출**(제거 불가 `AiImage` 컴포넌트). 계약 §0-3 준수.
|
||
- 민감정보(IP·SSH·해시) 미표시. 사용자/업체는 이름·역할만.
|
||
|
||
## 2차 이식 (C-C·C-M3~M5 프론트 — 2026-07-11 추가)
|
||
|
||
완료 화면 4 + 공통 컴포넌트 2:
|
||
- **SCR-02 주최자 대시보드** (`screens/dashboard/`): D-데이 마일스톤 타임라인(완료 체크·현재 진행·임박 펄스)·KPI 4·참가업체 테이블(상태배지)·알림 피드·S7 미니 카드. 행사 헤더는 인증 워크스페이스 실데이터, 집계부는 샘플(경계면 6 참조).
|
||
- **SCR-06 부스 설계 스튜디오** (`screens/design/`): 스펙 아코디언 폼(기본·존·구조·자재·조명, 인라인 리깅/높이 경고)·**4샷 그리드(S1~S4)**·**Before/After(S5)**·규정 사전검증 요약 칩·컨펌 모달("시공 기준은 도면" 동의 필수). `precheck`(완성)·`render POST`(큐잉)+WebSocket 타일 교체 배선.
|
||
- **SCR-07 유틸리티 배선 뷰** (`screens/utility/`): 기기 빌더→`quote`(완성)·배선 캔버스(**WiringCanvas** 전기적/네트워크청/급배수녹, 트렌치 그리드·범례·가정 배지)·자동 견적 패널·`order` 신청 CTA. wiring/order 501→degraded.
|
||
- **SCR-12 시각화 갤러리** (`screens/gallery/`): 샷 필터 칩(S1~S7)·마소너리 그리드(워터마크 상시·완료/생성중/실패)·라이트박스(메타·S5는 슬라이더)·상단 고지 바 상시. `render-jobs list` 501→샘플.
|
||
- **공통 신규**: `components/ui/CompareSlider`(reroomai §5-C 패턴 — clip-path inset + setPointerCapture + 방향키/Shift/Home·End + ARIA slider), `screens/utility/WiringCanvas`(SVG 좌표 정합 배선 렌더러 — 부스·트렌치·경로 동일 좌표계).
|
||
- **배선**: `types.ts`에 DesignSpec/DesignPlan/Utility*/Wiring*/RenderScene·RenderJobRequest 추가, `endpoints.ts`에 `designApi(get·save·precheck)`·`utilityApi(quote·wiring·order·get)`·`renderApi(list·create)` 추가, `App.tsx` 4개 라우트.
|
||
- **검증**: `tsc -b` EXIT 0, `vite build` EXIT 0 (253 modules, rollup win32 크래시 없음). 토큰 단일 출처 준수(하드코딩 색은 인라인 SVG 플레이스홀더 data URI 한정 — 실이미지 아님). AI 워터마크·고지 상시(AiImage·CompareSlider afterOverlay). WCAG AA(role/aria·slider·switch·focus-visible).
|
||
|
||
### 추가 경계면 이슈 (kintex-qa/backend 확인 요청)
|
||
6. **[중] 대시보드 집계 엔드포인트 부재** — SCR-02의 마일스톤·KPI(신청 128/160·확정률·유틸 완료율·위반 미해결)·참가업체 현황 테이블·알림 피드에 대응하는 계약 엔드포인트가 없다. 현재 `sampleDashboard.ts` 시연. **요청: `GET /api/events/{eventId}/dashboard`**(milestones[]·kpis[]·exhibitors[]·feed[]) 또는 개별 집계 경로.
|
||
7. **[중] 부스 geometry(폴리곤) 조회 부재** — SCR-07 배선 캔버스가 부스 폴리곤을 6×3m로 고정 사용 중. booth 스코프 경로(design·utility)에 부스 크기/폴리곤/홀 위치가 없다. **요청: `GET .../booths/{boothId}` 또는 design/utility 응답에 `booth:{sizeM, polygon, hallPosition}`**(배선 좌표·부스 렌더 정합).
|
||
8. **[하] Before/After "시공 전" 이미지 소스 부재** — S5는 시공 후(S1 렌더)만 계약에 있고 시공 전(빈 홀 바닥) 이미지 소스가 없다. 현재 로컬 SVG 플레이스홀더. **요청: 빈 부스 참조 이미지(render `referenceImageUrl`)를 before로 재사용 가능한지 또는 별도 before URL 제공.**
|
||
9. **[하] 갤러리 페이지네이션·정렬 계약** — `render-jobs?shot=` 목록은 배열 직접 반환. 대량 시 정렬(최신)·페이지 파라미터 필요 여부 확인. 현재 클라이언트 정렬 없음(서버 순서 신뢰).
|
||
|
||
## 남은 화면 (미착수)
|
||
- 웹: SCR-04 배치안 비교(S7 — AutoLayoutDialog에 부분 구현) · SCR-05 참가업체 홈 · SCR-08 신청 요약 · SCR-09 규정 리포트 · SCR-10 승인 큐 · SCR-11 검수 상세
|
||
- 모바일(390px): SCR-M1 현장 체크리스트 · SCR-M2 현장 검수 · SCR-06/12 모바일 반응형(읽기전용 캐러셀·2열)
|
||
- 공통 후속: 실 캔버스 인터랙션(부스 드래그·리사이즈·병합, 배선 단말 실드래그 재계산), 위반 오버레이 좌표 연결(경계면 1), WebGL 대규모 렌더 검토.
|