오늘 시리즈 후속 UX 다듬기 + 회귀 fix:
1) ColumnDetailPanel: dropdown key 중복 방어
- codeInfoOptions 에 placeholder "none" + 데이터 "none" 중복 시 React 가 'two children
with the same key, none' 으로 거부 → filter 로 사전 제거.
- refTableOpts 도 referenceTableOptions/tables 어디서든 중복 들어오면 같은 증상 →
Set 기반 dedupe.
2) ColumnDetailPanel: hook 순서 위반 수정
- 기존 'if (!column) return null' 이 useMemo(refTableOpts) 앞에 있어서
column null/존재 케이스마다 hook 호출 수가 달라짐 (Rules of Hooks 위반).
overlay 패턴 도입 후 column null 케이스가 자주 들어오면서 드러남.
- early return 을 모든 hook 뒤로 이동.
3) v5-layout.css 탭바: Chrome 식 outline 스타일
- 비활성 탭도 각자 outline 보이게 (border:1px solid var(--v5-border))로 카드처럼 분리.
- 활성 탭은 border + surface-hover 배경 + 위쪽 primary 1px inset 강조선.
- 위 모서리 rounded, margin-bottom:-1px 로 탭바 하단 border 와 seamless 연결.
4) 좌측 테이블 list 폰트 사이즈 축소
- 한글명 16px → 13px, 영문명 12px → 10.5px, 행 padding 7px → 6px.
- 280px 좁은 패널에 맞는 컴팩트 비율로 v5 컨벤션 정렬.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
채번 = 독립 자원 (컬럼과 N:M 연결) 모델로 페이지 통째 리뉴얼.
카드 박스 폐기, 좌측 sidebar + 우측 통짜 main + ⌘K 명령 팔레트 구조.
- frontend/styles/v5-layout.css: v5-nrm-* 섹션 추가 (메뉴관리 v5-mm-* 동일 패턴)
- numberingRuleList/page.tsx: PageHead 안 쓰고 메뉴관리 스타일 단순 헤더 +
사이드바 (검색·필터·섹션·list) + Hero·파이프라인·2-col split·sticky save bar +
⌘K 팔레트 (검색·프리셋·기존 채번)
- 기존 NumberingRuleDesigner/SequenceManagementPanel/CreateDialog 의 로직을
page.tsx 내부 sub-component (PipelineBlock·PartInspector·UsageList·CommandPalette) 로 재구성
- mockup HTML 산출물 notes/gbpark/ 보관
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
- 음성 인식 (scada-demo/js/voice.js) — 한국어 발화 → 키워드 매핑 → INVYONE_UI.select()
· 사이드바 마이크 버튼 + transcript 라벨, 매칭 시 청록 펄스
· Chrome/Edge HTTPS 환경 (운영 siflex.invyone.com OK)
- 경고시스템/다중경고 버튼을 음성 인식과 동일 톤
· 🚨 emoji → SVG 삼각형 아이콘, voice-btn 패턴 (다크 솔리드 + 컬러 액센트)
· 정적 (반짝 펄스 애니메이션 제거)
- client.ts stash pop conflict 정리 (DEV_TENANT_HOST + 도메인 정리 통합)
- ui.js 다중 경고 시연 wiring + scada 작업 노트 2건
- 기타 syncthing 보류분 batch (대시보드/레이아웃/로그인 layout 정리)
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
- 작업자 폰(/mobile)을 SCADA 데모와 ws 로 연결, 알람 발생 시 풀스크린 푸시
· v5 솔리드+글로우 톤, 진동/Web Audio 비프/Wake Lock/auto reconnect
· 시연 안전망: ?test=1 자동 발동, 우상단 hidden 트리거
- backend: com.erp.alarm 신규 패키지 (WebSocketConfig + Handshake + Handler + Controller)
· JWT 토큰 핸드셰이크 검증, userId 기반 채널 매핑 (멀티 디바이스 지원)
· spring-boot-starter-websocket 의존성 추가
· path 를 /api/demo/* 안에 두어 Traefik 라우트 추가 불필요 + 정식 알람과 분리
- SCADA scenario.js 의 emergency 시퀀스(2700ms)에 fetch('/api/demo/alarm/trigger') 배선
· /scada?worker=<user_id> query 로 target user 지정 (iframe src 로 전달)
- 운영 시연 URL: siflex.invyone.com/mobile (siflex_user) ↔ /scada?worker=siflex_user
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
기존 와이어프레임 박스(테두리 + 투명 fill) 대신 실제 TemplateRenderer
를 mock empty context 로 띄워 transform: scale 로 축소 → 사용자가
빌더에서 그린 그대로의 레이아웃이 카드에서 그대로 읽힘.
- TemplateMiniPreview 컴포넌트 신설:
- DEFAULT empty context (data:[], callbacks no-op) 로 데이터 fetch 0회
- BASE_WIDTH=1200, 16:10 stage → ResizeObserver 로 카드 폭 변화 자동 추종
- pointer-events: none / user-select: none / overflow: hidden
- views 가 비어있으면 기존 TemplateThumbnail (와이어프레임) 폴백
- TemplateLibraryModal 카드 아이콘 자리 교체
- dashboard.css 에 .dash-lib-card-thumb--live / -stage 추가
향후 템플릿 50+ 로 늘어 모달 첫 오픈이 무거워지면 lazy mount(
intersection observer) 또는 background 스크린샷 캐싱으로 전환.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
기존: 컴포넌트마다 .55 alpha 솔리드 박스 → 화면 스크린샷처럼 보임
변경: 5px inset 패딩 + 각 블록은 .55 테두리 + .14 fill 의 와이어프레임 톤
- KIND_COLOR (rgba 문자열) → KIND_RGB (RGB 트리플 문자열) 로 변경
→ 같은 색을 테두리/배경 다른 알파로 동시 사용 가능
- thumb 안에 dash-lib-card-thumb-canvas wrapper 추가해 padding 적용
- block 은 border-box + border 1px transparent base, 색상은 inline 으로
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
템플릿 목록 카드의 정적 📋 아이콘을 실제 view 구조 기반의
미니 와이어프레임으로 교체. 사용자가 카드만 보고도 템플릿이
어떤 화면인지(테이블 위주 / 폼 위주 / 단순 버튼 등) 파악 가능.
- backend: getTemplateList SQL 에 VIEWS 컬럼 추가, list 응답 각
row 의 views jsonb 를 객체로 파싱
- frontend: TemplateThumbnail 컴포넌트 신설 — v2(BlockV2.xPct/yPct
/wPct/hPct) 정규화 좌표 우선, v1(order/row) 폴백, 컴포넌트
종류별 색상(table=primary, form=cyan, button=pink)
- TemplateLibraryModal 카드 아이콘 자리 교체
- dashboard.css 에 .dash-lib-card-thumb / -block 스타일 추가
(v5 토큰 준수 — solid + glow, blur 없음)
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
- /admin 홈을 단순 링크 카드 → Welcome/Stats/SystemStatus/회사활동/최근변경/빠른진입 구성의 관리자 대시보드로 교체 (mock 데이터, 실데이터 배선은 후속)
- PopupTemplateRenderer 신규 — 팝업은 canvas 1:1 유지가 필요하므로 반응형 TemplateRenderer 와 경로 분리, absolute 좌표 + transform scale 로 창을 꽉 채움. form-popup 이 templateId 로 자체 fetch 해서 stale views(screenResolutions 누락) 문제 해소
- DashboardCard: 팝업 outer 크기를 canvas + 브라우저 크롬 보정치로 계산, 부모가 template 객체 직접 전달하던 것 제거
- TemplateRenderer: BlockRenderer export, formRow 기반 columnName/value/onChange/onRowSelect 등 바인딩 props 전달 강화
- TableComponent: 행 클릭/체크박스 선택 시 onRowSelect / onSelectedRowsChange emit, 헤더 전체 선택 동작 구현, 싱글/멀티 선택 분기 정리
- AppLayout: 모드 전환 연출 강화(burst ring + particles / 헤더 sweep / breadcrumb swap / glow flash), horizontal nav + 데스크톱에서 햄버거 자동 접힘, 헤더 도구군 래핑 구조 정리
- DashboardEmpty 삭제 → 공통 EmptyDashboard 로 통합
- dashboard.css: ud-htools stagger(오른쪽 → 왼쪽 슬라이드) 애니메이션 적용
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
; Please enter a commit message to explain why this merge is necessary,
; especially if it merges an updated upstream into a topic branch.
;
; Lines starting with ';' will be ignored, and an empty message aborts
; the commit.
- 타이포 스케일: body 12→14px, caption 9.6→12px, display 25.6→32px, 위계 강화
- 헤더 우측 3그룹화 (대시보드액션 | 테마/알림/설정 | 모드+프로필), v5-hdr-sep 구분자 추가
- 사이드바 SUPER_ADMIN 회사 카드 borderless slim 라벨로 압축
- 메뉴명 빈 텍스트 방어 + title 속성 추가
- 빈 대시보드(EmptyDashboard) 리디자인: 탭없음/위젯없음 2상태 분리, 2-CTA 카드
- 로그인 코스믹 공연 축소: 별 150→30, 파티클 20→0, 카피 한글화 (로그인 버튼/서브타이틀)
- 모드 전환 burst/sweep/badge-zoom 제거, sidebar stagger morph만 유지 (handleModeSwitch 100→25줄)
- View transitions duration 1800ms → 500ms
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
DDD1542
johngreen
gbpark