Symplr.io가 Figma 디자인을 바탕으로 만든 음식 배달 앱 데모와 소스 코드를 공개했다. 안드로이드에서 Expo Go로 체험할 수 있으며, 개발자는 코드를 내려받아 직접 실행하고 수정할 수 있다.
데모 저장소에는 내비게이션과 딥링크를 포함한 12개 화면이 담겼다. 저장소 설명에 따르면 앱은 엄격한 TypeScript 설정을 사용하고, TanStack Query와 Zod, Supabase Auth 및 PostgREST를 데이터 계층에 활용한다. Figma 디자인 토큰도 포함하며, 직접 추가하는 코드에는 NativeWind를 쓸 수 있다. 생성 뒤 일부 수정은 수작업으로 이뤄졌고, 각각 별도 커밋으로 남겼다.
체험과 실행 조건
데모는 Android용 Expo Go SDK 58에서 실행된다. Google Play에서 Expo Go를 설치하거나, Play 버전이 SDK 58보다 최신이면 Expo Go 58.0.5 APK를 설치한다. 앱에서 QR 코드를 스캔하거나 exp://demo-food-couriers.symplr.io를 연 뒤, demo@symplr.io 계정과 비밀번호 Demo-oGOPNuE_gFVt로 로그인하면 메뉴 탐색, 장바구니 담기, 주문, 배달 기사 평가를 해볼 수 있다. 데모 데이터는 30분마다 초기화되며, iPhone의 Expo Go에서는 아직 열리지 않는다.
개발 환경에서 실행하려면 Node 20과 Expo Go가 필요하다. 휴대전화와 컴퓨터는 같은 네트워크에 연결해야 한다.
git clone https://github.com/Symplr-io/food-couriers-demo.git
cd food-couriers-demo/apps/food-couriers
npm ci
npm start # then scan the QR code in the terminal with Expo Go
저장소에는 npm run typecheck, npm run lint, npm test, npm run test:coverage 명령도 안내돼 있다. 앱 코드는 apps/food-couriers에 있으며, 생성 코드는 src/gen, 직접 작성하는 코드는 src/custom에 둔다.
저장소가 공개한 품질 결과는 단위 테스트 533개 통과, 커버리지 76%, 품질 게이트 통과 및 A 등급이다. 매 main 푸시마다 타입 검사, 린트, 단위 테스트, 커버리지와 SonarQube Cloud 검사를 실행하며, 데모 상태 검사는 15분마다 수행한다고 설명한다.
UI는 El Kamcy Speaks의 Figma 디자인을 바탕으로 했으며 CC BY 4.0 라이선스를 따른다. 코드에는 MIT 라이선스가 적용된다. Storylane 인터랙티브 안내에서는 Figma 디자인을 Symplr.io에 가져오는 과정을 볼 수 있다.
댓글 (0)
로그인하면 이 기사에 내 생각을 남길 수 있어요