zio
433eb83a16
- search: domain results (event/exhibition/company/auction/booth/lead/CMS) with routes; PII-safe - approval WISE: compose + approval-line editor, reject flow, resubmit rejected, 4-tab inbox - schedule: month/week/day views (WISE CalendarView), 50:50 split, day-number top, no bottom gap - holidays: system-mgmt holiday admin + V41 KR holidays 2024~2050 (lunar+substitute), calendar red + holiday-name label; route/menu wired - dept: WISE org-tree 2-pane - shared Offcanvas component; hall-assign chip -> right slide-in detail - top-bar settings icon; home 2-col bottom-aligned; analytics ?tab= deep-link; grid font unified to Nifty "Advanced table headers"; form width cap; 2-pane 50:50 - data V39: 3 ongoing exhibitions + rich closed-loop (e-2026-live) + demo-account event membership + demo OTP seed — resolves "everything goes home" / floorplan+gallery 403 - Nifty design-system learning doc + refs index; product name unified; new harnesses (wise-ui, renewal/testdata, benchmark/crawler, menu-ia) - i18n: all pending keys merged, missing=0 (except in-progress 3-track keys) - verified: tsc -b --force, vite build, compileJava, test all EXIT 0 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
3.7 KiB
3.7 KiB
Nifty 디자인 레퍼런스 (소유자 지정, 2026-07-12)
방향 확정(2026-07-12): 킨텍스 공통 UI의 디자인 기준을 Nifty(themeon)로 채택한다. 개별 요소를 하나씩 지정받는 중 — 아래 표에 계속 누적. 적용은 wise-ui 하네스가 요소별 웨이브로 kx 토큰 번역 통일.
킨텍스 UI 정렬의 스타일 레퍼런스. GUARDiA ITSM이 원래 Nifty 다크 테마 기반이라 프로젝트 계보와 정합. 적용은 kx 토큰으로 번역(하드코딩 금지), 다크/라이트 양 테마, 이모지 금지(선 SVG).
| 영역 | 레퍼런스 URL | 적용 대상 | 상태 |
|---|---|---|---|
| 정적 테이블 헤더 | https://preview.themeon.net/nifty/tables/static-tables/ ("Advanced table headers") | .kx-table 공통 표준 |
진행 중 |
| 인터랙티브 그리드 | https://preview.themeon.net/nifty/tables/tabulator/ | 공통 DataGrid(정렬·필터·페이지·CSV export) — 관리자/목록 | 대기 |
| 상세 페이지 | https://preview.themeon.net/nifty/blog-apps/blog/ | 행사·전시·공지·옥션 등 상세 뷰 | 대기 |
| 카드 | https://preview.themeon.net/nifty/ui-elements/cards/ | .kx-card 공통 카드(헤더·바디·푸터·액션·컬러바) |
대기 |
| 버튼 | https://preview.themeon.net/nifty/ui-elements/buttons/ | Button/.kx-btn 공통(변형·크기·상태·아이콘·그룹) |
대기 |
| 드롭다운 | https://preview.themeon.net/nifty/ui-elements/dropdowns/ | 드롭다운/메뉴/셀렉트(kx 드롭다운) | 대기 |
| 컴포넌트 전반 | https://preview.themeon.net/nifty/ui-elements/components/ | 뱃지·알럿·탭·모달·툴팁·프로그레스·페이지네이션 등 공통 컴포넌트 | 대기 |
| 리스트 그룹 | https://preview.themeon.net/nifty/ui-elements/list-group/ | 리스트 그룹(공지·활동·검색결과·목록형 카드) | 대기 |
| 타이포그래피 | https://preview.themeon.net/nifty/ui-elements/ (typography) | 제목·본문·캡션 위계(kx 타이포 토큰) | 대기 |
| 모달/메시지박스 | https://preview.themeon.net/nifty/ui-elements/ (modals) | 모달·확인/경고 메시지박스(kx Modal) | 대기 |
| Offcanvas | https://preview.themeon.net/nifty/ui-elements/ (offcanvas) | 오프캔버스 패널(모바일 드로어·상세 슬라이드) | 대기 |
| 달력 | https://preview.themeon.net/nifty/app-views/calendar/ | 일정 캘린더(월/주/일)·이벤트 색/드래그·사이드 목록 | 대기(일정 3-뷰는 구조 완료, Nifty 스타일 정합 대상) |
| UI-elements 전체 | https://preview.themeon.net/nifty/ui-elements/ | Nifty UI-elements 전 페이지를 킨텍스 공통 UI 기준으로 채택(위 개별 + 나머지 요소 전부) | 기준 |
| 셸·메뉴(기존) | WISE(UIWS) AppLayout/LeftNav/CalendarView | 셸·아코디언·캘린더 | 완료(구조) |
| 상단바(top frame) | https://preview.themeon.net/nifty/ (navbar/header) | 상단 헤더 — 로고·검색·알림·설정·사용자 드롭다운·풀스크린·언어 | 대기 |
| 설정(레이아웃 커스터마이저) | https://preview.themeon.net/nifty/ (설정 아이콘 → 우측 패널) | 상단 설정 아이콘 클릭 → 우측 offcanvas: 테마(라이트/다크)·레이아웃 모드·사이드바·색상 등 실시간 조정 | 대기(공용 Offcanvas 재사용) |
원칙
- 레퍼런스의 구조·위계·인터랙션을 차용하되, 색·간격·폰트는 kx 디자인 토큰으로 번역.
- WISE(UIWS)가 대응물을 가진 영역은 WISE 우선(셸·시스템관리·공통기능). Nifty는 WISE에 없는 표현(고급 테이블·blog형 상세)의 레퍼런스.
- 신규 npm 의존성(Tabulator 등)은 번들·다크·i18n 정합 확인 후 파일럿→확산.