Figma 디자인을 기반으로 React 또는 Next.js 프런트엔드를 구축하고 API에 연결해 드립니다.

디자인은 완료되었고 API는 준비되었거나 거의 준비되었지만, 사용자가 보게 될 화면은 아직 존재하지 않습니다. 저는 프런트엔드만 구축합니다. 귀하의 백엔드, 인증 제공업체 및 호스팅은 그대로 유지되며, 코드는 귀하의 저장소로 이동합니다. 배송 후 14일 동안 합의한 대로 작동하지 않는 모든 것을 무료로 수정해 드립니다.

Starter를 사용하면 Figma 파일에서 반응형으로 타입이 지정된 한 화면 또는 페이지를 얻을 수 있으며, 데이터는 API에서 가져오거나 엔드포인트가 존재할 때까지 목업에서 가져옵니다. Standard는 로딩, 비어있음, 오류 상태 및 유효성 검사가 있는 양식을 포함하여 API에 연결된 최대 5개의 화면을 다룹니다. Advanced는 최대 12개의 화면을 허용하며, 인증 제공업체와 연동되는 로그인 화면, 앱 전체에서 사용되는 공유 구성 요소 및 주요 흐름에 대한 테스트를 추가합니다.

저는 디자인을 면밀히 따릅니다. 간격, 타이포그래피 스케일 및 색상은 Figma 파일에서 가져옵니다. 화면에 모바일 버전이 없는 경우, 추측하는 대신 구축하기 전에 제안합니다. App Router가 있는 Next.js가 기본입니다. 서버 렌더링이 필요하지 않은 경우 Vite를 사용한 일반 React도 괜찮습니다. 스타일링에는 Tailwind CSS 또는 CSS Modules를 사용하며, 귀하의 프로젝트에 이미 있는 것을 사용합니다.

데스크톱에서는 Chrome, Firefox, Edge에서, 실제 Android 휴대폰에서는 Chrome에서 결과를 확인합니다.

제 프런트엔드 작업의 두 가지 공개 예시는 포트폴리오에 있습니다. 필터, 장바구니 및 결제가 있는 Next.js 스토어프론트와 제 개인 이중 언어 사이트입니다.

저는 회의 없이 서면으로만 작업합니다. 시작하기 전에 화면과 그 뒤에 있는 엔드포인트가 나열되고, 미리보기 링크는 작업이 진행되는 것을 보여주며, 매일 업무일에 채팅으로 간략한 진행 상황 메모가 전달됩니다.

프로젝트 완료 단계
1. 화면 목록 - Figma 파일과 API 문서를 검토하고 각 화면, 해당 상태 및 호출하는 엔드포인트를 기록합니다. 코드 작성 전에 목록을 확인합니다.
2. 기본 및 공유 부분 - 프로젝트 설정 또는 기존 저장소, Figma의 색상 및 유형, 모든 화면이 재사용하는 레이아웃 및 구성 요소.
3. 화면 및 데이터 - 각 화면은 디자인에 따라 구축되고 로딩, 비어있음, 오류 상태를 포함하여 API에 연결됩니다. 누락된 엔드포인트는 쉽게 교체할 수 있는 목업을 받습니다.
4. 미리보기 링크에서 검토 라운드 - 클릭하여 하나의 목록으로 수정 사항을 보냅니다. 수정하고 동일한 링크를 다시 보여줍니다.
5. 인계 - 저장소의 코드, 구조 및 실행 방법에 대한 간략한 메모, 그리고 Advanced의 경우 각 릴리스 전에 실행할 수 있는 테스트.