replica-build은(는) 무엇을 하나요?
replica/recon.md, replica/architecture.md, replica/design/을 읽습니다.
replica/features.csv(의 clone 열)를 업데이트하고
replica/build-log.md를 유지합니다.
규칙
- 클린 룸. 모든 코드는 레콘 맵과 명세서를 바탕으로 여기서 작성됩니다. 원본의 HTML, CSS, JavaScript, SVG 또는 이미지를 절대 붙여넣지 말고, 해당 도메인이나 CDN에서 아무것도 로드하지 말며, '소스 보기 및 변환'을 하지 마십시오.
- 당신의 문구. 모든 라벨, 버튼, 빈 상태 메시지, 이메일을 새롭게 작성하십시오. 버튼의 기능이 일치하는 것은 동등성(parity)입니다. 문장이 일치하는 것은 복사입니다.
- 토큰만 사용. 컴포넌트에 원시 hex나 픽셀 값을 사용하지 마십시오. 값이 누락된 경우 토큰에 추가하십시오.
1단계: 셸(shell)
인벤토리에 있는 모든 화면에 대한 라우팅(스텁 페이지는 괜찮습니다), 레이아웃(nav, header, sidebar), 연결된 토큰, replica-design의 프리미티브, 그리고 화면이 실제 데이터를 보여줄 수 있도록 시드 데이터를 구축합니다. 커밋합니다.
2단계: 수직 슬라이스(vertical slice)
레콘 맵의 핵심 루프를 종단 간(end to end)으로 먼저 구현합니다. 예를 들어 예약 앱의 경우: 이벤트 유형 생성, 공개 페이지 열기, 슬롯 예약, 대시보드에서 확인하기. 보기 흉해도 괜찮습니다. 작동이 핵심입니다. replica-backend가 아직 실행되지 않은 경우 시드 데이터와 동일한 함수 시그니처를 가진 가짜 데이터 레이어를 사용하십시오. 나중에 실제 데이터 레이어로 교체할 때 화면 코드를 변경할 필요가 없습니다.
3단계: 화면별로 구축
architecture.md의 순서대로 작업합니다. 각 화면에 대해:
- 레콘 맵에서 해당 행을 읽습니다: 목적, 컴포넌트, 상태, 어떤 플로우가 통과하는지.
- 레이아웃과 계층 구조를 위해 참조 스크린샷을 살펴봅니다. 픽셀 단위가 아닙니다.
- 프리미티브로 구축합니다. 데이터 레이어의 실제 데이터를 사용합니다.
- 모든 상태: 빈 상태, 로딩(원본이 스피너가 아닌 스켈레톤을 사용한다면 스켈레톤 사용), 채워짐, 오류, 권한 없음, 긴 콘텐츠(60자 이름), 모바일 너비.
- 매번 기본 사항: 시맨틱 HTML, 입력에 레이블, 키보드로 접근 가능, 가시적 포커스, 이미지에 대체 텍스트.
features.csv의 해당 행을yes또는partial(메모 포함)로 설정합니다.- 참조와 동일한 뷰포트로
replica/clone-screens/S07.png에 스크린샷을 저장합니다(replica-diff용). - 화면당 하나의 커밋:
build: S07 booking page.
화면별 완료 조건
- 레콘 맵의 모든 상태(빈 상태, 오류, 로딩 포함)
- 390px와 1440px 너비에서 정상 작동
- 키보드만으로 플로우 완료 가능
- 콘솔 오류 없음
- 원본에서 빌려온 하드코딩된 문구 없음
- features.csv 업데이트됨
- diff용 스크린샷 저장됨
4단계: 빌드 로그
replica/build-log.md, 화면당 한 줄: ID, 날짜, 완료 또는 부분 완료, 누락된 사항, 예상보다 어려웠던 점. 기능이 보기보다 클 때는 로그와 채팅에 그렇게 명시하십시오. 조용히 절반만 출시하지 마십시오.
기능이 어떻게 동작하는지 막힐 때
사용자로서 원본으로 돌아가십시오: 도움말 문서를 읽고, 공개 워크스루를 시청하고, 사용자 자신의 계정을 사용하십시오. 원본의 코드나 네트워크 호출을 파헤치지 마십시오. 그런 다음 동작에 대한 자체 버전을 구축하십시오.
출력
빌드된 화면, 업데이트된 기능 매트릭스, 저장된 스크린샷, 그리고 요약: 완료된 화면/전체, 완료된 필수 기능/전체, 다음 작업. 그런 다음 데이터 레이어가 아직 가짜 상태이면 /replica-backend, 그렇지 않으면 /replica-test를 실행하십시오.