zio/kintex
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
7c830ddea0
kintex/_workspace/02_frontend_progress.md
zio a963c69141 feat(impl): M2~M5 배선(501→200) + 프론트 화면 4종 
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>
2026-07-11 18:37:26 +09:00

7.9 KiB
Raw Blame History

킨텍스 프론트엔드 — 진행 기록 (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 확인 요청)

  1. [중] 대시보드 집계 엔드포인트 부재 — SCR-02의 마일스톤·KPI(신청 128/160·확정률·유틸 완료율·위반 미해결)·참가업체 현황 테이블·알림 피드에 대응하는 계약 엔드포인트가 없다. 현재 sampleDashboard.ts 시연. 요청: GET /api/events/{eventId}/dashboard(milestones[]·kpis[]·exhibitors[]·feed[]) 또는 개별 집계 경로.
  2. [중] 부스 geometry(폴리곤) 조회 부재 — SCR-07 배선 캔버스가 부스 폴리곤을 6×3m로 고정 사용 중. booth 스코프 경로(design·utility)에 부스 크기/폴리곤/홀 위치가 없다. 요청: GET .../booths/{boothId} 또는 design/utility 응답에 booth:{sizeM, polygon, hallPosition}(배선 좌표·부스 렌더 정합).
  3. [하] Before/After "시공 전" 이미지 소스 부재 — S5는 시공 후(S1 렌더)만 계약에 있고 시공 전(빈 홀 바닥) 이미지 소스가 없다. 현재 로컬 SVG 플레이스홀더. 요청: 빈 부스 참조 이미지(render referenceImageUrl)를 before로 재사용 가능한지 또는 별도 before URL 제공.
  4. [하] 갤러리 페이지네이션·정렬 계약 — 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 대규모 렌더 검토.