> ## Documentation Index
> Fetch the complete documentation index at: https://supastack.dev/llms.txt
> Use this file to discover all available pages before exploring further.
> For the full documentation corpus in one file, fetch: https://supastack.dev/llms-full.txt

# 첫 기능 만들기

새 화면에서 서버 검증 데이터까지의 엔드 투 엔드 워크스루.

## 초보자 연습

전제 조건: 아래 두 개의 초보자 가이드를 읽고 Mobile 로컬 설정을 완료한 다음 이 리포지토리를 루트에서 편집기로 엽니다. Mobile 설정은 `apps/mobile/.env.local`에 있으며 Expo는 루트 .env를 읽지 않습니다. 미리 보기에는 실제 데이터를 위한 접근 가능한 백엔드가 필요합니다.

빠른 용어: 작업 영역은 한 팀의 별도 사용자, 데이터 및 설정입니다. 서버는 신뢰할 수 있는 백엔드입니다. 제공업체 키를 브라우저 및 전화 코드에 보관하세요. 마이그레이션은 테이블을 생성하거나 업데이트하는 버전이 지정된 데이터베이스 변경입니다. AI 모델은 응답하는 엔진입니다. 모델 카탈로그는 서버의 사용 가능한 모델 ID 및 가격 목록입니다. 공급자는 AI, 이메일, 청구 서비스와 같은 외부 서비스입니다. 자격은 작업 영역에서 기능을 사용할 수 있도록 하는 부여입니다. 웹훅은 한 서비스가 다른 서비스의 URL에 보내는 메시지입니다.

1. `.agents/skills/add-a-mobile-screen/SKILL.md`를 열거나 — 코딩 에이전트에게 따르라고 하고 — 작은 화면을 하나 만듭니다. 예를 들어 `apps/mobile/app/(app)/ideas.tsx`에 로직을 `apps/mobile/src/ideas/`에 둡니다.

2. 실행 중인 미리 보기를 통해 기기에서 새 화면을 열고 로그인한 멤버에게 렌더링되는지 확인합니다.

3. 로그아웃한 계정과 두 번째 워크스페이스 계정을 확인합니다 — 비공개로 유지되어야 할 것은 거부되거나 없어야 합니다. 서버가 경계를 강제하기 때문입니다.

사용자 정의 코드의 경우 화면 이름, 표시되는 데이터, 볼 수 있는 사람, 처리할 오류를 지정합니다. 이 태스크를 코딩 에이전트에 주고 `AGENTS.md`, `.ai/PROJECT_CONTEXT.md` 및 건드릴 파일의 `.ai/` 미러를 읽게 하고, 편집 전에 파일과 검사를 나열하게 하고, diff를 보여 달라고 하십시오. 샘플 값을 사용하고 실제 비밀은 절대 붙여넣지 마십시오.

[시작하기 전에](https://supastack.dev/ko/docs/mobile/before-you-start.md)

[단말기 기본사항](https://supastack.dev/ko/docs/mobile/terminal-basics.md)

[모바일 로컬 설정](https://supastack.dev/ko/docs/mobile/ship-in-5-minutes.md)

[에이전트 프롬프트 및 프로젝트 메모리](https://supastack.dev/ko/docs/mobile/agents.md)


## 화면 만들기

`apps/mobile/app/(app)/` 아래에 라우트 파일을 추가합니다 — Expo Router가 해당 파일을 로그인 스택 내의 화면으로 바꿉니다. `apps/mobile/src/ui` 프리미티브(Screen, Card, Title, Detail, AppButton)로 구성하여 앱의 간격, 타이포그래피, 색상을 상속하게 합니다.

```
apps/mobile/app/(app)/ideas.tsx
apps/mobile/src/ideas/index.ts
apps/mobile/src/ideas/index.test.ts
```


## 형식화된 클라이언트를 통해 읽고 쓰기

`apps/mobile/src/api/client.ts`를 통해 fetch합니다. 이 클라이언트는 저장된 세션을 `EXPO_PUBLIC_API_URL`에 대한 각 요청에 첨부하고 형식화된 오류를 반환합니다. 페이로드를 웹 계약과 동일하게 유지합니다 — 같은 엔드포인트가 두 클라이언트 모두에 서비스합니다.

화면이 워크스페이스 데이터를 읽는 경우 `apps/mobile/src/offline/`의 헬퍼로 호출을 래핑하여 네트워크 오류 시 캐시된 복사본으로 폴백할 수 있게 합니다 — 네트워크 오류일 때만이며 인증 또는 권한 오류 후에는 절대 아닙니다.


## 서버가 소유권을 결정하게 하기

서버는 로그인한 멤버와 활성 워크스페이스를 확인하고 모든 레코드를 `workspaceId`로 범위 지정합니다. 앱은 서버가 반환하는 것을 표시하며, 서버가 신뢰해야 하는 워크스페이스 id를 절대 보내지 않습니다.

필요한 데이터에 엔드포인트가 없으면 먼저 백엔드에 추가하십시오 — 비즈니스 규칙은 서버에 있습니다. 앱의 숨겨진 버튼은 접근을 강제하지 않습니다.


## 액세스 및 복구 확인

로그인한 멤버, 다른 워크스페이스의 멤버, 로그아웃 세션, 비행기 모드를 확인합니다: 멤버 데이터는 나타나고, 타인의 데이터는 거부되고, 로그아웃된 기기는 로그인으로 돌아가며, 오프라인 복사본은 네트워크 오류 시에만 제공됩니다.

[오프라인 읽기 캐시](https://supastack.dev/ko/docs/mobile/offline.md)

[Mobile 보안 체크리스트](https://supastack.dev/ko/docs/mobile/security.md)


## 상태 다듬기

공유 프리미티브를 통해 화면에 로딩, 빈 상태, 오류 상태를 주고, 모든 새 문자열을 네 개의 i18n 카탈로그에 추가하고, 멤버가 실제로 찾을 수 있도록 라우트를 홈 또는 설정 내비게이션에 연결합니다.


## 다음

[코딩 에이전트로 빌드하기](https://supastack.dev/ko/docs/mobile/agents.md)