For AI agents: fetch the complete documentation index at /llms.txt, the full documentation corpus at /llms-full.txt, the agent skill at /skill.md, or this page as Markdown at /ko/docs/web/first-feature.md (or send Accept: text/markdown).
첫 기능 만들기
스키마부터 출시된 화면까지의 엔드투엔드 여정.
초보자 연습
전제 조건: 아래 두 개의 초보자 가이드를 읽고, 웹 로컬 설정을 완료하고, 편집기의 루트에서 이 모노레포를 엽니다. 웹 설정은 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/ 미러를 읽도록 요청하세요. 여기에 이름이 지정된 정확한 소스 파일을 검사하십시오. 편집하기 전에 파일을 나열하고 확인합니다. 작업 공간 소유권과 서버 전용 비밀을 보존합니다. 차이점을 보여주세요. 원하는 동작, 입력 및 출력 필드, 허용된 역할, 예상되는 성공 및 오류, 테스트 계정, 공급자 또는 장치를 알려주십시오. 샘플 값을 사용하십시오. 절대 진짜 비밀을 붙여넣지 마세요.
경로 만들기
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액세스 및 복구 확인
익명 액세스, 유효한 멤버, 다른 작업공간의 멤버, 취소된 세션 및 필수 역할을 테스트합니다. 복구 작업을 통해 비어 있음 및 로드 실패 상태를 추가합니다. 경로를 공개 사이트맵에서 제외하고 로봇이 허용하지 않는 접두사를 추가하세요.
레코드 모델링
모든 제품 레코드는 데이터베이스 스키마에서 시작합니다. 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 프리미티브가 일반적인 패턴을 커버합니다. 로딩, 오류, 빈 상태를 처리하세요. 해피 패스만 렌더링하는 기능은 완성이 아닙니다.