Claude Code로 AI 코칭 웹앱 "마이로드맵" 완성하기

프론트엔드: Next.js 14 (App Router) + TypeScript + Tailwind CSS v4
백엔드: Supabase (Auth + Database + RLS)
AI: Claude API (@anthropic-ai/sdk) with Streaming
상태관리: Zustand with persist
폼 검증: react-hook-form + zod

마이로드맵이라는 AI 기반 자기성장 서비스를 만들고 싶어.
타겟: 미국 거주 한인 엄마들 (30~50대)
스택: Next.js 14, TypeScript, Tailwind CSS, Supabase, Claude API

Supabase 데이터베이스 스키마를 설계해줘.
사용자 프로필, 체크인, 목표, 마일스톤, 채팅 메시지가 필요해.

-- 사용자 프로필
CREATE TABLE profiles (
  id UUID REFERENCES auth.users PRIMARY KEY,
  nickname TEXT,
  age_group TEXT,
  years_in_us TEXT,
  life_wheel JSONB,
  focus_areas TEXT[],
  goals JSONB,
  coach_style TEXT DEFAULT 'friend',
  onboarding_completed BOOLEAN DEFAULT false
);

-- 데일리 체크인
CREATE TABLE check_ins (
  id UUID PRIMARY KEY,
  user_id UUID REFERENCES profiles(id),
  emotion TEXT NOT NULL,
  emotion_note TEXT,
  yesterday_win TEXT,
  today_intention TEXT,
  ai_response TEXT
);

-- 목표 & 마일스톤
CREATE TABLE goals (...);
CREATE TABLE milestones (...);

-- RLS 정책 (사용자는 자신의 데이터만 접근)

const LIFE_WHEEL_AREAS = [
  { id: 'health', label: '건강', emoji: '💪' },
  { id: 'career', label: '커리어/일', emoji: '💼' },
  { id: 'finance', label: '재정', emoji: '💰' },
  { id: 'relationships', label: '관계', emoji: '👥' },
  { id: 'family', label: '가족', emoji: '👨‍👩‍👧' },
  { id: 'personalGrowth', label: '자기계발', emoji: '📚' },
  { id: 'funRecreation', label: '여가/취미', emoji: '🎨' },
  { id: 'environment', label: '환경/생활', emoji: '🏠' },
];

AI 코치 시스템 프롬프트를 설계해줘.
친구/코치/멘토 3가지 스타일이 있고,
사용자의 라이프 휠, 집중 영역, 목표, 최근 체크인을 참고해야 해.

export function buildSystemPrompt({
  nickname,
  coachStyle,
  language,
  focusAreas,
  goals,
  lifeWheel,
  recentCheckIns,
}: UserContext): string {
  const stylePrompt = COACH_STYLE_PROMPTS[coachStyle];

  return `당신은 "${nickname}"님의 AI 코치입니다.

## 코칭 스타일
${stylePrompt}

## 사용자 정보
- 집중 영역: ${focusAreas.join(', ')}
- 주요 목표: ${goals.primary}
- 라이프 휠: ${formatLifeWheel(lifeWheel)}

## 최근 체크인
${formatRecentCheckIns(recentCheckIns)}

## 지침
- 항상 한국어로 대화하세요
- 미국 거주 한인 엄마의 상황을 이해하고 공감하세요
- 90일 목표 달성을 위한 실질적인 조언을 제공하세요`;
}

export async function streamChat(
  messages: Message[],
  systemPrompt: string
): Promise<ReadableStream> {
  const client = getClaudeClient();

  const stream = await client.messages.stream({
    model: 'claude-sonnet-4-20250514',
    max_tokens: 2048,
    system: systemPrompt,
    messages: messages,
  });

  // SSE 형식으로 ReadableStream 반환
  return new ReadableStream({
    async start(controller) {
      for await (const event of stream) {
        if (event.type === 'content_block_delta') {
          const text = event.delta?.text || '';
          controller.enqueue(`data: ${JSON.stringify({ text })}\n\n`);
        }
      }
      controller.enqueue('data: [DONE]\n\n');
      controller.close();
    },
  });
}

❌ Property 'id' does not exist on type COACH_STYLE_OPTIONS
✅ id와 key 속성을 모두 가진 객체로 수정

❌ useSearchParams without Suspense boundary
✅ LoginForm을 Suspense로 감싸기

❌ Parameter 'c' implicitly has 'any' type
✅ 명시적 타입 (c: { created_at?: string }) 추가

// 1. client.messages.stream() 호출
// 2. ReadableStream으로 변환
// 3. SSE 형식으로 전송
// 4. 프론트엔드에서 EventSource로 수신

[서비스명]이라는 [서비스 유형]을 만들고 싶어.

타겟: [타겟 사용자]
핵심 기능:
- [기능 1]
- [기능 2]
- [기능 3]

스택: Next.js 14 (App Router), TypeScript, Tailwind CSS, Supabase, Claude API

먼저 프로젝트 구조와 데이터베이스 스키마를 설계해줘.

다음 기능에 필요한 Supabase 데이터베이스 스키마를 설계해줘.

필요한 테이블:
- [테이블 1]: [용도]
- [테이블 2]: [용도]
- [테이블 3]: [용도]

요구사항:
- RLS(Row Level Security) 정책 포함
- 적절한 인덱스 추가
- created_at, updated_at 자동 관리

[역할명] AI의 시스템 프롬프트를 설계해줘.

사용자 컨텍스트:
- [정보 1]
- [정보 2]
- [정보 3]

코칭 스타일: [스타일 1] / [스타일 2] / [스타일 3]

지침:
- [언어 설정]
- [톤앤매너]
- [핵심 기능]

빌드 에러가 발생했어. 에러 메시지:

[에러 메시지 복사]

이 에러를 수정해줘. 에러가 발생한 파일들을 모두 확인하고,
빌드가 성공할 때까지 수정해줘.

Claude API를 사용한 스트리밍 채팅 API를 구현해줘.

요구사항:
- Next.js API Route (App Router)
- SSE(Server-Sent Events) 형식
- 사용자 인증 확인
- 개인화된 시스템 프롬프트 적용
- 에러 핸들링

src/
├── app/
│   ├── (auth)/
│   │   ├── login/page.tsx
│   │   └── signup/page.tsx
│   ├── (dashboard)/
│   │   ├── dashboard/page.tsx
│   │   ├── chat/page.tsx
│   │   ├── checkin/page.tsx
│   │   └── roadmap/page.tsx
│   ├── onboarding/
│   │   ├── step1/page.tsx
│   │   ├── step2/page.tsx
│   │   ├── step3/page.tsx
│   │   ├── step4/page.tsx
│   │   └── step5/page.tsx
│   └── api/
│       └── chat/route.ts
├── components/
│   ├── ui/
│   ├── dashboard/
│   ├── chat/
│   ├── checkin/
│   └── roadmap/
├── lib/
│   ├── supabase/
│   └── claude/
├── stores/
│   └── userStore.ts
├── types/
│   └── index.ts
└── constants/
    └── index.ts