> ## 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

# 첫 기능 만들기

스키마부터 출시된 화면까지의 엔드투엔드 여정.

## 초보자 연습

전제 조건: 아래 두 개의 초보자 가이드를 읽고, 웹 로컬 설정을 완료하고, 편집기의 루트에서 이 모노레포를 엽니다. 웹 설정은 `apps/web/.env.local`에 속합니다. Next.js는 ​​루트 `.env`를 읽지 않습니다. 기본 가짜 모드의 `/dashboard`는 데이터베이스가 없는 데모입니다. `/auth`에는 마이그레이션된 데이터베이스가 필요합니다.

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

1. 리포지토리 루트에서 VS Code를 열고 코딩 에이전트에 `apps/web/app/reports/page.tsx` 및 `apps/web/src/reports.ts`를 생성하도록 요청합니다. 보고서 필드와 허용된 역할을 제공하십시오. 서버 측 멤버십 확인과 `workspaceId`로 필터링된 쿼리가 필요합니다.

2. 로그인한 회원으로 `/reports`를 실행하여 워크스페이스의 기록만 나타나는지 확인합니다.

3. 로그아웃한 상태에서 두 번째 워크스페이스 계정을 사용해 보세요. 둘 중 하나라도 레코드를 읽을 수 있으면 서버 검사를 중지하고 수정하세요.

사용자 정의 코드의 경우 제공된 `prompts/README.md`로 시작하고 가장 가까운 프롬프트(앱 화면의 경우 `prompts/new-app-screen.md`, 공개 페이지의 경우 `prompts/new-landing-page.md`)를 복사합니다. 서버, 데이터베이스 또는 공급자 작업의 경우 코딩 에이전트에게 이 가이드의 작업을 제공하고 `AGENTS.md`, `.ai/PROJECT_CONTEXT.md` 및 일치하는 `.ai/` 미러를 읽도록 요청하세요. 여기에 이름이 지정된 정확한 소스 파일을 검사하십시오. 편집하기 전에 파일을 나열하고 확인합니다. 작업 공간 소유권과 서버 전용 비밀을 보존합니다. 차이점을 보여주세요. 원하는 동작, 입력 및 출력 필드, 허용된 역할, 예상되는 성공 및 오류, 테스트 계정, 공급자 또는 장치를 알려주십시오. 샘플 값을 사용하십시오. 절대 진짜 비밀을 붙여넣지 마세요.

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

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

[웹 로컬 설정](https://supastack.dev/ko/docs/web/ship-in-5-minutes.md)

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


## 경로 만들기

`apps/web/app/` 아래에 페이지를 추가합니다. 대시보드 또는 콘텐츠 경로에서 시작하여 해당 세션 및 활성 작업공간 확인을 재사용하세요. 해당 폴더에 `page.tsx`가 포함되어 있으면 경로가 존재합니다. 보호된 읽기를 위해 서버 구성 요소를 사용합니다.

```
apps/web/app/reports/page.tsx
apps/web/src/reports.ts
.ai/apps/web/app/reports/page.md
.ai/apps/web/src/reports.md
```


## 서버의 소유권 확인

기존 인증/작업 영역 도우미를 통해 로그인된 ID와 활성 작업 영역을 읽습니다. 기록을 로드하기 전에 회원 자격을 확인하세요. 해결된 `workspaceId`를 기준으로 모든 쿼리를 필터링합니다. 양식이나 모델 출력에서 ​​소유자 식별자를 가져오지 마십시오.

관리 작업에 대한 소유자/관리자 권한을 확인하세요. 기능이 유료로 제공되면 보호된 데이터를 반환하기 전에 읽기 또는 작업 경계에서 자격을 확인하세요. 숨겨진 버튼은 액세스를 강제하지 않습니다.


## 액세스 및 복구 확인

익명 액세스, 유효한 멤버, 다른 작업공간의 멤버, 취소된 세션 및 필수 역할을 테스트합니다. 복구 작업을 통해 비어 있음 및 로드 실패 상태를 추가합니다. 경로를 공개 사이트맵에서 제외하고 로봇이 허용하지 않는 접두사를 추가하세요.

[작업공간 격리](https://supastack.dev/ko/docs/web/security.md)

[자격 확인](https://supastack.dev/ko/docs/web/setup-payments.md)


## 레코드 모델링

모든 제품 레코드는 데이터베이스 스키마에서 시작합니다. packages/db에 workspaceId 컬럼이 있는 테이블을 추가하고, 마이그레이션을 생성하고, 읽거나 쓰기 전에 워크스페이스를 해석하는 리포지토리 헬퍼를 작성하세요.

```
// packages/db/src/schema.ts
export const ideas = pgTable("idea", {
  id: uuid().primaryKey(),
  workspaceId: uuid().notNull().references(() => workspaces.id),
  title: text().notNull(),
  createdAt: timestamp().defaultNow(),
});

corepack pnpm --filter @supastack/db db:generate
```


## 액션 인가

세션, 워크스페이스, 엔타이틀먼트를 그 순서대로 해석하는 server action을 만드세요. zod 스키마로 입력을 검증하고, 리포지토리를 통해 뮤테이션을 실행하고, 인터페이스가 렌더링할 수 있는 타입이 지정된 결과를 반환합니다.

순서가 중요합니다: 워크스페이스 소유권을 확인하기 전에 쓰는 뮤테이션은 이미 경계를 넘은 것입니다. 소유권은 서버에서 도출하세요 — 브라우저가 보낸 workspace id를 절대 신뢰하지 마세요.


## 표면 구성

공유 컴포넌트와 토큰으로 페이지를 만드세요 — 키트의 blocks와 ui-web 프리미티브가 일반적인 패턴을 커버합니다. 로딩, 오류, 빈 상태를 처리하세요. 해피 패스만 렌더링하는 기능은 완성이 아닙니다.


## 다음

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