React 웹 프로젝트 시작하기
먼저 web-craft를 읽으십시오. 해당 규칙이 여기에도 적용됩니다. 프로젝트의 기존 결정 사항은 아래 모든 기본값보다 우선합니다.
1. 인테이크
이미 주어진 정보를 읽으십시오: 제품 설명, 기존 저장소, 페이지, 디자인 시스템, STACK.md, DESIGN.md, API 계약. 그런 다음 references/intake.md로 나머지를 채우십시오: 표면 유형(랜딩, 에디토리얼, 카탈로그, 소비자 앱, 관리자, 고객 포털 또는 혼합), 주요 사용자 및 작업, 콘텐츠 또는 작업 밀도, 기기, SEO 요구사항, 현재 및 향후 언어, RTL, 인증, 백엔드(Node.js, 타사 API, CMS, 모의 또는 정적).
제품 또는 아키텍처 결정을 변경하는 것만 질문하십시오. 나머지는 가정으로 명시하십시오.
2. 기술 프로필 결정
각 결정을 한 줄의 이유와 함께 작성하십시오. 방향이 정해지기 전에 모든 화면을 생성하지 마십시오.
| 결정 | 기본값 및 이유가 있는 위치 |
|---|---|
| 프레임워크 및 렌더링 | 공개, SEO 또는 CMS 중심, 다국어 → Next.js App Router. 로그인 뒤에 있으며 상호작용이 많은 → React + Vite 또는 기존 Next.js. 간단한 정적 표면 → 가장 간단한 작동 방식. references/framework-choice.md |
| UI 키트 | 차별화된 브랜드 제품 → shadcn/ui. 테이블/폼 중심 관리자 → Ant Design. Material 스타일 제품 또는 MUI가 이미 사용 중인 경우 → Material UI. 기존 시스템 → 유지. 앱 표면당 하나의 주요 키트. references/kit-choice.md |
| 스타일링 | 키트를 따릅니다: shadcn → Tailwind(shadcn 필수); Ant Design 또는 MUI → 키트의 테마 plus 사용자 정의 부분을 위한 CSS Modules; 사용자 정의 또는 에디토리얼 → CSS Modules. 하나의 표면에서 Tailwind와 CSS Modules를 동등한 시스템으로 혼합하지 마십시오. references/styling-choice.md |
| i18n | Next.js → next-intl; Vite → i18next + react-i18next. 로케일 레지스트리, 폴백, URL 정책 및 카탈로그 로딩은 첫날에 결정됩니다. references/i18n-setup.md |
| 모션 | 간단한 상태에는 CSS 전환; 마운트/언마운트, 레이아웃 또는 오케스트레이션이 필요한 React에는 Motion. 지속 시간 및 이징 토큰; 축소 모션은 한 곳에서 처리. references/motion-setup.md |
| 폼 및 데이터 | react-hook-form + Zod; TanStack Query 또는 프레임워크의 데이터 모델; 기존 것은 유지. |
| 테마 | 대화형 제품은 밝음/어두움/시스템; 단일 테마는 브랜드 마케팅 사이트의 제품 결정일 수 있습니다. |
| 테스트 | 타입체크, 린트(eslint-plugin-web-craft 및 eslint-plugin-jsx-a11y 포함), 동작이 있는 곳의 유닛/컴포넌트 테스트, 중요 흐름의 Playwright. |
| 언어 및 도구 | 엄격한 TypeScript, 프로젝트별로 Yarn 고정, 하나의 잠금 파일. |
선택한 모든 패키지의 현재 안정적인 버전을 공식 출처에서 해당 날짜에 확인하고, 함께 작동하는 버전을 고정하여 STACK.md에 기록하십시오. 메모리나 이 스킬에서 버전 번호를 복사하지 마십시오.
3. 프로젝트 문서 작성
STACK.md: 프레임워크, 렌더링, 키트, 스타일링, i18n 엔진, 데이터 및 폼 도구, 버전, 환경, 스크립트. 템플릿:references/stack-template.md.DESIGN.md: 제품 특성, 참조에서 가져온 원칙, 레이아웃, 토큰(색상, 타이포그래피, 간격, 반경, 고도, 모션), 카피 규칙, 모션 매트릭스, i18n 노트. 템플릿:references/design-template.md.- 로케일 목록과 유형은 코드 구성에서 비롯됩니다. 문서는 이를 설명합니다. 두 번째 진실 공급원이 아닙니다.
- 모든 작은 변경에 대해 네 개의 새 문서를 만들지 마십시오.
4. 프로젝트 배치
기능 기반 구조, 서버/클라이언트 경계 명확, 하나의 API 레이어, 토큰 및 프로바이더를 위한 한 곳: references/structure.md.
5. 스켈레톤 증명
더 많은 화면을 구축하기 전에 하나의 작은 흐름이 종단 간 작동해야 합니다:
- 첫 번째 렌더링에서 로케일이 올바르게 해석됨(언어 깜빡임 없음), 전환 시 경로 유지.
- 테마가 사용자의 선택과 시스템을 따르며, 로드 시 깜빡임 없음.
- 폼이 포커스 해제 시 유효성 검사, 제출 시 첫 번째 오류로 스크롤, 서버 오류를 해당 필드에 매핑.
- 다이얼로그가 애니메이션으로 나타나고 사라지며, 포커스를 트랩하고 반환하며, 축소 모션은 큰 움직임을 제거.
- 목록 또는 차트가 스켈레톤, 빈 상태 및 재시도 버튼이 있는 오류를 표시.
- 키보드 전용 사용이 가능하며, 콘솔 또는 수화 오류가 없음.
그런 다음 하나의 대표적인 수직 슬라이스(실제처럼 보이는 콘텐츠, 두 번째 언어, 로딩 및 오류 상태)를 구축하고, 다른 화면으로 확장하기 전에 모바일 및 데스크톱 너비에서 브라우저로 확인하십시오.
6. 스크립트
dev, build, start (Next.js), typecheck, lint, test, test:e2e. 번들 예산이 중요한 경우 analyze를 추가하십시오.
출처
이러한 기본값에 사용된 공식 링크와 검토된 날짜: references/sources.md. 설치하는 버전에 대해 다시 확인하십시오.