루틴·습관 트래커 + 방 꾸미기 게임 Rougether 의 모바일 앱.
루틴을 지키면 재화를 얻고, 그 재화로 자기 방을 꾸밉니다. 친구·가족과 "집"을 만들어 서로의 루틴을 응원하는 소셜 레이어가 위에 얹혀 있습니다. iOS App Store 출시 중이며 Android는 Google Play 비공개 테스트 단계입니다.
Expo SDK 55 · React Native 0.83 · React 19 · Expo Router(파일 기반 라우팅) · TypeScript(strict).
시작하기
npm install
npm start # Expo dev 서버 — i / a / w 로 iOS / Android / web
개발 빌드는 실서버를 봅니다. 목 서버(MSW)는 제거됐습니다 — 웹으로 화면을 확인하면 그건 실데이터입니다. 접속 주소는
src/config/shared-endpoints.json.
구조
| 경로 | 역할 |
|---|---|
src/app/ |
Expo Router 라우트. (tabs)/가 앱 셸, _layout.tsx가 루트 Stack |
src/components/screens/ |
화면 컴포넌트. 순수·prop 기반(라우팅·전역 상태 없음) + 형제 테스트 |
src/components/ui/ |
공용 프리미티브 |
src/constants/theme.ts |
디자인 토큰 단일 출처 — 브랜드 테마 · Typography · Spacing · Radius |
src/api/ |
비즈니스 API 클라이언트 (/api/v1) |
src/hooks/ |
useTokens() · useTypography() · useFontEmphasis() · useTheme() |
src/resources/ |
이미지·카탈로그 데이터 (가구·캐릭터) |
src/widgets/ |
홈 화면 위젯 (RemoteViews — 앱 폰트 사용 불가) |
.storybook/ |
웹 Storybook 설정과 테마·글꼴 도구 모음 |
stories/ |
디자인 토큰과 실제 앱 컴포넌트의 상태별 스토리 |
컴포넌트 갤러리 — Dev 탭(/dev 라우트)이 src/dev/registry/에
등록된 컴포넌트를 격리 상태로 렌더합니다. 새 컴포넌트를 만들면 여기 등록하세요.
디자인 Storybook
실제 앱 컴포넌트를 웹에서 보고, Controls로 props를 바꾸며 테마 5종·라이트/다크·글꼴 5종을 비교할 수 있습니다. 폰트는 저장소의 앱 에셋을 사용합니다.
npm ci
npx --no-install storybook dev -p 6006 --host 127.0.0.1 --no-open
로컬 Storybook을 엽니다. 정적 빌드는 아래 명령으로 생성합니다.
npx --no-install storybook build --output-dir web-build/storybook
결과물은 web-build/storybook/에 생성됩니다. 스토리 작성법과 검증 기준은
Storybook 가이드를 참고하세요. 실제 기기의 햅틱·네이티브 제스처는 기존
Dev 갤러리에서 확인합니다.
스크립트
| 명령 | 하는 일 |
|---|---|
npm start |
Expo dev 서버 |
npm run ios / android / web |
플랫폼별 실행 |
npm run typecheck |
tsc --noEmit |
npm run lint |
expo lint |
npm run format / format:check |
Prettier write / check |
npm test / test:watch |
Jest (jest-expo + React Native Testing Library) |
node scripts/run-date-boundary.js |
spec 날짜 경계 fixture로 실제 요청 생성 검증(단말 시간대 매트릭스) — .expo/date-boundary/에 기록. npm script로 두면 지문이 바뀐다 |
npm run gen:api-types |
스웨거에서 API 타입 생성 |
npm run build:characters |
캐릭터 스프라이트 시트 빌드 |
커밋 전에 typecheck · lint · format:check · test 네 가지를 통과시키세요.
ci.yml이 모든 PR에서 네 가지 검사와 Storybook 정적 빌드를 실행합니다.
배포
기본 브랜치는 dev 입니다. 기능은 feat/<기능> 브랜치에서 dev로 PR(squash 머지),
릴리스는 dev → main 승격 PR(merge commit)로 갑니다.
dev 머지는 eas-deploy를 트리거해 네이티브 지문을
비교합니다 — JS만 바뀌었으면 preview 채널 OTA, 네이티브가 바뀌었으면 EAS 빌드.
main 승격은 아무것도 발행하지 않습니다 — production OTA는 eas-release 워크플로를
main에서 수동 실행할 때만 나갑니다.
기여
AGENTS.md에 코딩 규칙·브랜치 전략·배포 절차·이슈 관리가 전부 있습니다.
코드를 건드리기 전에 읽어주세요. 특히:
- 색은
useTokens(), 크기는Spacing/Radius, 텍스트는useTypography()— hex·매직 넘버 금지 fontWeight를 스타일에 직접 쓰지 마세요 (커스텀 폰트가 weight별 파일이라 가짜 볼드가 납니다). 굵기는useFontEmphasis()로 —font-hygiene.test.ts가 강제합니다- UI 문구는 한국어, 코드·주석·식별자는 영어
- 파일명 kebab-case, 컴포넌트 PascalCase named export
라이선스
MIT — LICENSE
