Files
AI/crawler_platform/app/web/frontend/tailwind.config.js

45 lines
1.2 KiB
JavaScript
Raw Normal View History

Phase 0: React environment setup + project initialization 구현 사항: 1. React + TypeScript 마이그레이션 시작 - package.json: React, Redux Toolkit, TanStack Query, shadcn/ui dependencies 추가 - vite.config.js: React 플러그인 + Phase 5/7 API 프록시 추가 - tsconfig.json, tsconfig.node.json 추가 2. Redux 스토어 설정 - stores/ontologySlice.ts: 온톨로지 상태 관리 - stores/crawlSlice.ts: 크롤링 진행 상태 - stores/uiSlice.ts: UI 상태 3. 리액트 진입점 및 기본 컴포넌트 - src/main.tsx: React 앱 초기화 - src/App.tsx: 라우팅 설정 (대시보드, 온보딩, 소스, 크롤, 검증) - 5개 페이지 컴포넌트 (placeholder) 4. 스타일 및 설정 - tailwind.config.js: Tailwind 설정 - src/styles/globals.css: 글로벌 스타일 - postcss.config.js: PostCSS 설정 - src/i18n.ts: i18next 다국어 설정 - src/lib/queryClient.ts: React Query 설정 5. TypeScript 타입 정의 - src/stores/slices: 각 Redux slice의 TypeScript 타입 프로젝트 구조: crawler_platform/app/web/frontend/ ├── src/ │ ├── main.tsx (React 진입점) │ ├── App.tsx (라우팅) │ ├── pages/ (4개 페이지 컴포넌트) │ ├── stores/ (Redux 스토어 + slices) │ ├── lib/ (유틸리티) │ ├── styles/ (CSS) │ └── i18n.ts (다국어 설정) ├── index.html (업데이트: React root) ├── package.json (의존성 추가) ├── vite.config.js (React 플러그인) ├── tsconfig.json (TypeScript 설정) ├── tailwind.config.js (Tailwind 설정) └── postcss.config.js (PostCSS 설정) 다음 단계: - npm install로 의존성 설치 - Phase 1: 온톨로지 업로더 구현 - Phase 1: 참고 사이트 매니저 구현 Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
2026-05-14 13:52:45 +09:00
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
Phase 0.5: React UI 기반 계층 구축 — API 클라이언트 + TanStack Query + shadcn UI 1. 서버/UI 상태 분리 (선택지 B 채택) - ontologySlice: entities/relations 등 서버 상태 제거 → OntologyDraft(편집 폼)만 - crawlSlice: progress/stats/logs 제거 → CrawlUiState(토글/확장 상태)만 - 서버 상태는 전부 TanStack Query로 이전 2. API 클라이언트 계층 (src/lib/api/) - client.ts: fetch 래퍼 + Zod 스키마 검증 + ApiError - projects.ts: projectsApi.list/detail/create + 도메인 스키마 3. TanStack Query 훅 (src/hooks/) - useProjects, useProject, useCreateProject - queryKeys 팩토리로 키 일관성 4. shadcn 스타일 UI 프리미티브 (src/components/ui/) - button, card, skeleton - lib/utils.ts: cn() helper (clsx + tailwind-merge) 5. 레이아웃 (src/components/layout/) - AppShell: 축소 가능 Sidebar + Header + Outlet - App.tsx 라우트를 AppShell로 중첩 6. DashboardPage End-to-end 연결 - useProjects()로 백엔드 /projects 호출 - loading skeleton / error+retry / empty state / 카드 그리드 4가지 상태 모두 처리 7. i18n locale 파일 추가 - public/locales/ko/common.json (한국어) - public/locales/en/common.json (영문 fallback) - 키: nav.*, dashboard.*, common.*, app.* 8. 레거시 정리 - vanilla JS/CSS 24개 → src/legacy/로 git mv - tailwind content를 *.{ts,tsx}로 좁혀 legacy 제외 다음 단계: Phase 1 — OnboardingPage 파일 업로드 + useCreateProject 연결 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2026-05-14 14:17:26 +09:00
"./src/**/*.{ts,tsx}",
Phase 0: React environment setup + project initialization 구현 사항: 1. React + TypeScript 마이그레이션 시작 - package.json: React, Redux Toolkit, TanStack Query, shadcn/ui dependencies 추가 - vite.config.js: React 플러그인 + Phase 5/7 API 프록시 추가 - tsconfig.json, tsconfig.node.json 추가 2. Redux 스토어 설정 - stores/ontologySlice.ts: 온톨로지 상태 관리 - stores/crawlSlice.ts: 크롤링 진행 상태 - stores/uiSlice.ts: UI 상태 3. 리액트 진입점 및 기본 컴포넌트 - src/main.tsx: React 앱 초기화 - src/App.tsx: 라우팅 설정 (대시보드, 온보딩, 소스, 크롤, 검증) - 5개 페이지 컴포넌트 (placeholder) 4. 스타일 및 설정 - tailwind.config.js: Tailwind 설정 - src/styles/globals.css: 글로벌 스타일 - postcss.config.js: PostCSS 설정 - src/i18n.ts: i18next 다국어 설정 - src/lib/queryClient.ts: React Query 설정 5. TypeScript 타입 정의 - src/stores/slices: 각 Redux slice의 TypeScript 타입 프로젝트 구조: crawler_platform/app/web/frontend/ ├── src/ │ ├── main.tsx (React 진입점) │ ├── App.tsx (라우팅) │ ├── pages/ (4개 페이지 컴포넌트) │ ├── stores/ (Redux 스토어 + slices) │ ├── lib/ (유틸리티) │ ├── styles/ (CSS) │ └── i18n.ts (다국어 설정) ├── index.html (업데이트: React root) ├── package.json (의존성 추가) ├── vite.config.js (React 플러그인) ├── tsconfig.json (TypeScript 설정) ├── tailwind.config.js (Tailwind 설정) └── postcss.config.js (PostCSS 설정) 다음 단계: - npm install로 의존성 설치 - Phase 1: 온톨로지 업로더 구현 - Phase 1: 참고 사이트 매니저 구현 Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
2026-05-14 13:52:45 +09:00
],
theme: {
extend: {
colors: {
border: "hsl(var(--border))",
input: "hsl(var(--input))",
ring: "hsl(var(--ring))",
background: "hsl(var(--background))",
foreground: "hsl(var(--foreground))",
primary: {
DEFAULT: "hsl(var(--primary))",
foreground: "hsl(var(--primary-foreground))",
},
secondary: {
DEFAULT: "hsl(var(--secondary))",
foreground: "hsl(var(--secondary-foreground))",
},
destructive: {
DEFAULT: "hsl(var(--destructive))",
foreground: "hsl(var(--destructive-foreground))",
},
muted: {
DEFAULT: "hsl(var(--muted))",
foreground: "hsl(var(--muted-foreground))",
},
accent: {
DEFAULT: "hsl(var(--accent))",
foreground: "hsl(var(--accent-foreground))",
},
},
borderRadius: {
lg: "var(--radius)",
md: "calc(var(--radius) - 2px)",
sm: "calc(var(--radius) - 4px)",
},
},
},
plugins: [],
}