React를 Phoenix LiveView로 변환은(는) 무엇을 하나요?
요청된 React 인터페이스를 대상 애플리케이션의 아키텍처와 통합하여 재현합니다. 소스는 시각적 및 동작적 참조로 취급하고, 명시적인 대상 요구사항이 다를 경우 이를 따릅니다. React 프레임워크, CSS 시스템, 컴포넌트 라이브러리 또는 Phoenix 버전을 가정하지 않고 코드에서 규칙을 발견합니다.
범위 및 규칙 설정
- 해당 리포지토리의 지침과 두 프로젝트의 관련 문서를 읽습니다. React 진입점, 대상 애플리케이션 및 요청된 경로나 컴포넌트를 찾습니다. 프로젝트는 별도의 리포지토리이거나 워크스페이스를 공유할 수 있습니다.
- 매니페스트와 기존 구현을 검사하여 스타일, 컴포넌트, 폰트, 테마, 자산, 라우팅, 인증, 데이터 접근 및 JavaScript 통합을 식별합니다. 생성하기 전에 기존 경로, 부분 이식, 컴포넌트 또는 훅이 있는지 확인합니다.
- 범위를 할당된 인터페이스와 필요한 동작으로 제한합니다. 정적 목업에는 새로운 백엔드 기능이 필요하지 않지만, 기능 마이그레이션에는 실제 통합 또는 명시적으로 공개된 차이가 필요합니다.
- 사용자의 테스트 및 도구 권한을 존중합니다. 소스 검사, 참조 검사, 미리보기 준비, 자동화된 테스트 및 브라우저 QA는 별개의 활동입니다. 모두 허용된다고 가정하지 마십시오.
1. 소스 검사
css-extraction.md를 읽습니다. 페이지, 시각적으로 중요한 자식 요소, 스타일, 컴포넌트 변형, 자산 및 상태 로직을 추적합니다. 다음을 확인합니다.
- 레이아웃, 반응형 규칙, 타이포그래피, 테마, 이미지 및 모션.
- 라이브러리 기본값, 로컬 재정의, 조건부 props 및 CSS 캐스케이드 이후의 유효 스타일.
- 범위와 관련된 내비게이션, 양식, 오버레이, 로딩, 권한, 변이, 지속성 및 복구 경로.
간결한 마이그레이션 맵을 기록합니다. 소스 컴포넌트 → 대상 컴포넌트, 소스 데이터/액션 → 대상 컨텍스트/이벤트, 소스 토큰 → 대상 등가물. 관찰된 동작을 가정 및 미확인 런타임 값과 분리합니다.
분석 요청의 경우 결과를 전달하고 중단합니다. 권한이 있는 구현의 경우 중요한 차이점이나 이탈을 간략히 표면화하고 계속합니다. 해결되지 않은 선택이 범위, 동작 또는 충실도에 실질적인 영향을 미칠 때만 질문하고, 일상적인 변환 결정에 대해 별도의 확인을 요구하지 마십시오.
2. Phoenix에서 구현
liveview-conventions.md를 읽습니다. 필요한 결과를 재현하는 대상 컴포넌트, 레이아웃, 컨텍스트, 권한 부여, 토큰, 자산 및 훅을 재사용합니다.
- React 구문이나 컴포넌트 이름을 기계적으로 번역하는 대신 렌더링된 출력과 동작을 변환합니다.
- 시각적 값, 반응형 규칙, 상태 및 의미를 보존합니다. 정당한 이유 없이 모호하게 유사한 폰트, 아이콘, 컴포넌트 또는 애니메이션으로 대체하지 마십시오.
- 명시적인 대상 요구사항을 일관되게 적용하고 가시적인 차이점을 설명합니다. 다른 프로젝트의 폰트 제한, 스토리지 제공자, 경로 구조 또는 명명 규칙을 포팅에 가져오지 마십시오.
- 서버 소유 상태는 LiveView 및 컨텍스트에 유지하고, 로컬 시각적 동작을 위해 CSS 또는 기존 클라이언트 메커니즘을 사용합니다. 브라우저 기능이 필요한 경우에만 훅을 추가합니다.
- 해당하는 로딩, 빈 상태, 검증, 보류, 성공, 실패, 재시도, 권한 및 복구 상태를 완료합니다. 실패 시 사용자 입력을 유지하고 반복된 작업이 데이터를 손상시키지 않도록 방지합니다.
3. 검토 및 인계
마이그레이션 맵에 따라 변경 사항을 검토합니다. 반응형/테마 변형, 권한 부여, 이벤트 처리, 접근성 및 라이프사이클 정리를 포함합니다. 필요한 자산과 참조된 컴포넌트가 존재하는지 확인합니다.
허용되는 경우에만 프로젝트 검증 명령과 런타임 도구를 사용합니다. 허용되는 경우 라이브 미리보기를 준비합니다. 소스 검사만으로 런타임, 시각적 또는 테스트 검증을 주장하지 마십시오.
간략히 인계합니다. 이식된 내용, 중요한 차이점, 모의 데이터나 누락된 통합, 수행되거나 생략된 검증, 사용자가 테스트해야 할 상태. 종속성이 완료를 차단하는 경우 구체적으로 식별하고 범위 내에서 독립적인 작업을 완료합니다.