htlee
e0b51efc54
쇼케이스 (/design-system.html): - 별도 Vite entry (System Flow 패턴 재사용, 메인 SPA 분리) - 10개 섹션: Intro / Token / Typography / Badge / Button / Form / Card / Layout / Catalog (19+) / Guide - 추적 ID 체계 (TRK-CATEGORY-SLUG): - hover 시 툴팁 + "ID 복사 모드"에서 클릭 시 클립보드 복사 - URL hash 딥링크 (#trk=TRK-BADGE-critical-sm) 스크롤+하이라이트 - 산출문서/논의에서 특정 변형 정확히 참조 가능 - Dark/Light 테마 토글로 양쪽 시각 검증 신규 공통 컴포넌트: - Button (@shared/components/ui/button.tsx) - 5 variant × 3 size = 15 변형 - primary/secondary/ghost/outline/destructive × sm/md/lg - Input / Select / Textarea / Checkbox / Radio - Input · Select 공통 inputVariants 공유 (sm/md/lg × default/error/success) - PageContainer / PageHeader / Section (shared/components/layout/) - PageContainer: size sm/md/lg + fullBleed (지도/풀화면 예외) - PageHeader: title + description + icon + demo 배지 + actions 슬롯 - Section: Card + CardHeader + CardTitle + CardContent 단축 variants.ts 확장: - buttonVariants / inputVariants / pageContainerVariants CVA 정의 - Button/Input/Select는 variants.ts에서 import하여 fast-refresh 경고 회피 빌드 검증 완료: - TypeScript 타입 체크 통과 - ESLint 통과 (경고 0) - vite build: designSystem-*.js 54KB (메인 SPA와 분리) 이 쇼케이스가 확정된 후 실제 40+ 페이지 마이그레이션 진행 예정.
41 lines
1.0 KiB
TypeScript
41 lines
1.0 KiB
TypeScript
import { defineConfig } from 'vite'
|
|
import path from 'path'
|
|
import tailwindcss from '@tailwindcss/vite'
|
|
import react from '@vitejs/plugin-react'
|
|
|
|
export default defineConfig({
|
|
plugins: [
|
|
react(),
|
|
tailwindcss(),
|
|
],
|
|
resolve: {
|
|
alias: {
|
|
'@': path.resolve(__dirname, './src'),
|
|
'@lib': path.resolve(__dirname, './src/lib'),
|
|
'@shared': path.resolve(__dirname, './src/shared'),
|
|
'@features': path.resolve(__dirname, './src/features'),
|
|
'@data': path.resolve(__dirname, './src/data'),
|
|
'@stores': path.resolve(__dirname, './src/stores'),
|
|
},
|
|
},
|
|
server: {
|
|
port: 5173,
|
|
proxy: {
|
|
'/api': {
|
|
target: process.env.VITE_API_PROXY ?? 'https://kcg-ai-monitoring.gc-si.dev',
|
|
changeOrigin: true,
|
|
secure: false,
|
|
},
|
|
},
|
|
},
|
|
build: {
|
|
rollupOptions: {
|
|
input: {
|
|
main: path.resolve(__dirname, 'index.html'),
|
|
systemFlow: path.resolve(__dirname, 'system-flow.html'),
|
|
designSystem: path.resolve(__dirname, 'design-system.html'),
|
|
},
|
|
},
|
|
},
|
|
})
|