ythong/harness
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
1ef2235939
harness/plugins/zio-harness/knowledge/kintex/docs/analysis/nifty-design-refs.md
DESKTOP-TKLFCPR\ython 1ef2235939 feat(zio-harness): v1.1.0 — auto source analysis + GUARDiA/KINTEX knowledge base 
- SessionStart hook (scripts/graphify_setup.py): auto-install graphifyy[sql],
  build knowledge graph on first run (graphify extract --code-only, local AST),
  incremental graphify update thereafter — install-only smartness
- knowledge/kintex/: all 183 KINTEX md docs bundled (planning/design/analysis)
- knowledge/guardia/: distilled GUARDiA-wide knowledge from 2,483 md files
  (solutions-catalog, standard-framework, operations-cicd, lessons-learned;
  credentials/IP-free curated)
- SKILL.md: graph-first codebase query rules + knowledge base loading guide

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2026-07-12 23:15:35 +09:00

3.8 KiB
Raw Blame History

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/ 일정 캘린더(월/주/일)·이벤트 색/드래그·사이드 목록 완료(KxCalendarView 재스타일 2026-07-12 — 옅은 격자·옅은 노랑 today 틴트·소프트 카테고리 칩(color-mix), 미니 .kx-cal 동일 톤. .kx-mcal는 기존 소프트 톤 유지)
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 정합 확인 후 파일럿→확산.