앱 초안 미리보기
React Native로 옮기기 전, 화면 구성과 이동 흐름을 기기 화면 비율 그대로 검토하기 위한 도구예요.
브라우저에서 렌더링되는 인터랙티브 초안입니다
설치된 네이티브 앱이 아니고 앱스토어 심사를 거친 빌드도 아니에요. 실제 동작은 이 초안을 참고해 React Native로 다시 구현해요.
390 × 844 · 상단 안전영역 47 · 하단 안전영역 34
화면을 선택하면 지원하는 상태가 여기에 나와요.
화면 선택
75개 등록됨
운영 콘솔은 이 목록에 없어요. 신고와 긴급 검토 같은 최소 트리아지 화면만 다른 탭 안에 포함되고, 나머지 운영 도구는 웹 전용이에요.
React Native 전환 메모
- 모바일 화면 id 하나하나가 React Native 화면 컴포넌트 하나에 대응해요.
- canonicalRoute는 Universal Links(iOS)와 App Links(Android)가 풀어야 하는 실제 https 경로예요.
- 하단 탭 5개는 그대로 네이티브 탭 내비게이터의 탭이 돼요.
- Sheet로 표시한 화면은 네이티브에서 모달 프레젠테이션으로 옮겨요.
- 디자인 토큰은 @ikc/design-tokens 패키지에서 그대로 가져와 StyleSheet 값으로 써요.
- 상태 선택기(불러오는 중/내용 없음/오류/오프라인/권한 없음/찾을 수 없음)는 실제 로딩, 빈 목록, 오류, 권한 상태 처리로 옮겨요.
등록된 화면과 캐노니컬 라우트
| 화면 id | 탭 | 캐노니컬 라우트 |
|---|---|---|
| m.landing.welcome | 홈 | /welcome |
| m.landing.signin | 홈 | /signin |
| m.landing.register | 홈 | /register |
| m.landing.verify-email | 홈 | /verify-email |
| m.landing.onboarding | 홈 | /onboarding |
| m.landing.profile.public | 내 정보 | /u/u_ha7k2 |
| m.landing.profile.edit | 내 정보 | /me/profile |
| m.home.feed | 홈 | / |
| m.home.region | 홈 | /r/dublin-8 |
| m.home.search | 홈 | /search |
| m.home.notifications | 홈 | /notifications |
| m.home.bookmarks | 홈 | /bookmarks |
| m.boards.hub | 게시판 | /boards |
| m.boards.general.list | 게시판 | /boards/general |
| m.boards.general.detail | 게시판 | /boards/general/p-101 |
| m.boards.general.compose | 게시판 | /boards/general/new |
| m.boards.questions.list | 게시판 | /boards/questions |
| m.boards.questions.detail | 게시판 | /boards/questions/q-201 |
| m.boards.useful.list | 게시판 | /boards/useful |
| m.boards.useful.detail | 게시판 | /boards/useful/u-301 |
| m.boards.ranking | 게시판 | /boards/ranking |
| m.emergency.board.list | 게시판 | /boards/emergency |
| m.emergency.board.detail | 게시판 | /boards/emergency/al-002 |
| m.emergency.submit | 게시판 | /boards/emergency/submit |
| m.create.select | 홈 | /create |
| m.create.post | 홈 | /create/post |
| m.create.question | 홈 | /create/question |
| m.create.useful | 홈 | /create/useful |
| m.create.marketplace | 홈 | /create/marketplace |
| m.create.exchange | 홈 | /create/exchange |
| m.create.job | 홈 | /create/job |
| m.create.housing | 홈 | /create/housing |
| m.create.review | 홈 | /create/review |
| m.explore.hub | 탐색 | /explore |
| m.marketplace.list | 탐색 | /marketplace |
| m.marketplace.detail | 탐색 | /marketplace/lst-101 |
| m.marketplace.new | 탐색 | /marketplace/new |
| m.marketplace.edit | 탐색 | /marketplace/lst-101/edit |
| m.exchange.list | 탐색 | /exchange |
| m.exchange.detail | 탐색 | /exchange/ex-001 |
| m.exchange.new | 탐색 | /exchange/new |
| m.restaurants.list | 탐색 | /restaurants |
| m.restaurants.detail | 탐색 | /restaurants/rst-001 |
| m.restaurants.review | 탐색 | /restaurants/rst-001/review |
| m.businesses.list | 탐색 | /businesses |
| m.businesses.detail | 탐색 | /businesses/b-001 |
| m.jobs.list | 탐색 | /jobs |
| m.jobs.detail | 탐색 | /jobs/job-001 |
| m.jobs.new | 탐색 | /jobs/new |
| m.jobs.seeker | 탐색 | /jobs/seeker |
| m.jobs.cv | 탐색 | /jobs/cv |
| m.housing.list | 탐색 | /housing |
| m.housing.detail | 탐색 | /housing/h-101 |
| m.housing.new | 탐색 | /housing/new |
| m.housing.tenant | 탐색 | /housing/tenant |
| m.voucher.concept | 탐색 | /vouchers |
| m.messages.list | 메시지 | /messages |
| m.messages.detail | 메시지 | /messages/conv-1 |
| m.messages.requests | 메시지 | /messages/requests |
| m.account.me.overview | 내 정보 | /me |
| m.account.me.posts | 내 정보 | /me/posts |
| m.account.settings.profile | 내 정보 | /settings/profile |
| m.account.settings.privacy | 내 정보 | /settings/privacy |
| m.account.settings.regions | 내 정보 | /settings/regions |
| m.account.settings.notifications | 내 정보 | /settings/notifications |
| m.account.settings.security | 내 정보 | /settings/security |
| m.account.settings.data | 내 정보 | /settings/data |
| m.account.safety.rules | 내 정보 | /safety/rules |
| m.account.safety.report | 내 정보 | /safety/report |
| m.account.safety.reports | 내 정보 | /safety/reports |
| m.account.safety.appeals | 내 정보 | /safety/appeals |
| m.account.safety.appeal.detail | 내 정보 | /safety/appeals/ap-2031 |
| m.account.safety.emergency-policy | 내 정보 | /safety/emergency-policy |
| m.account.safety.blocked | 내 정보 | /safety/blocked |
| m.account.moderation.decision.detail | 내 정보 | /moderation/decisions/dec-4471 |