ONESHIM Backoffice v2

ONESHIM Backoffice v2는 "Palantir 데이터 밀도 + Linear 미니멀리즘" 디자인 철학을 기반으로 처음부터 완전히 새로 구축된 엔터프라이즈 관리 콘솔입니다. 기존 백오피스를 대체하며, Turborepo 모노레포 구조로 설계되어 확장성과 유지보수성을 극대화했습니다.

핵심 기술 스택

카테고리	기술	비고
UI 프레임워크	React 19	최신 Concurrent Features 활용
빌드 도구	Vite	HMR, 빠른 개발 서버
라우팅	TanStack Router	File-based routing, 타입 안전
서버 상태	TanStack Query	API 캐싱, WebSocket 실시간
클라이언트 상태	Zustand	Sidebar, Theme, Command Palette
URL 상태	nuqs	필터, 정렬, 페이지네이션
디자인 시스템	shadcn/ui	Radix Primitives 기반
스타일링	Tailwind CSS 4	4-Layer CSS Token 시스템
테스트	Vitest	단위 + 통합 테스트
E2E 테스트	Playwright	자동화 + 인터랙티브

주요 수치

• 25개 페이지 (16 도메인): Dashboard, Monitoring, Knowledge, AI Intelligence, Ontology Explorer, Digital Twin, Audit, Workflows, Users, Settings, Communication, Notifications, User Context, Event Bus, Integration Hub + 상세 페이지
• 200+ UI 컴포넌트 (Primitives + Composites + Layouts)
• 103개 Storybook stories + 22 interaction tests
• 1,110개 단위 테스트 + 100+ E2E 테스트 (Playwright)
• 600+ i18n keys (en/ko 100% 동기화)
• 719개 REST API 엔드포인트: 16개 도메인 완전 커버
• 95,000+개 프로젝트 전체 테스트 (Python 89,710 + Backoffice 5,614 + Rust 639) 기반으로 안정적인 백엔드 연동

Monorepo 구조

Turborepo + pnpm workspace 기반의 6개 패키지와 1개 앱으로 구성됩니다.

패키지	역할	주요 내용
packages/ui	Design System	shadcn/ui 기반, 200+ 컴포넌트 (Storybook 문서화)
packages/api-client	API 통합	TanStack Query hooks, 16개 도메인
packages/shared-types	공유 타입	TypeScript 타입 정의 + 상수
packages/charts	차트/그래프	Chart.js, Cytoscape.js, @xyflow/react
packages/test-utils	테스트 유틸	MSW handlers, fixtures, custom render
apps/backoffice	메인 앱	TanStack Router 기반 SPA

품질 인프라

항목	상세
CI/CD	GitHub Actions 5-job pipeline (lint, typecheck, unit-test, e2e-test, build)
Testing	1,110 unit tests (Vitest) + 100+ E2E tests (Playwright)
i18n	en/ko 100% 동기화, 600+ keys
Dark Mode	light / dark / system 3모드 지원 (CSS variable 시스템)
a11y	WCAG vitest-axe 자동 검증 (모든 컴포넌트 테스트 포함)
Visual Regression	Storybook snapshot testing (jest-image-snapshot)
Bundle 최적화	manualChunks 벤더 코드 분할로 메인 청크 81% 감소

Dashboard 미리보기

Light Mode

Dark Mode