pipeline.json

{
  "project": "glpcare-ux-redesign",
  "codebase": "/Users/bugbookee/.paperclip/instances/default/projects/c130b9f3-5855-47c1-a128-b16f07ebdc69/12805932-2b62-4dff-93e9-39732f9e3926/_default/mobile",
  "steps": [
    {
      "step": "ux-design",
      "role": "CPO",
      "model": "opus",
      "prompt": "GLP-Care 칼로리 앱 두 화면의 UX 설계를 작성하라. 아래 현재 코드와 레퍼런스 디자인을 기반으로 구체적인 컴포넌트 구조, 레이아웃, 스타일 값을 정의한다.\n\n## 현재 앱 제약\n- React Native + Expo 52, StyleSheet.create 사용 (NativeWind className 금지)\n- DateTimePicker 금지 (Expo Go 크래시)\n- 테마 컬러: 그린 #10B981, 배경 #F8FAFC, 카드 #FFFFFF\n- 한국어 UI 전용\n- 백엔드: todaySummary에서 totalCaloriesKcal, goalCaloriesKcal, totalCarbsG/ProteinG/FatG 등 데이터 공급됨\n- mealStore.fetchTodaySummary() 사용 중\n\n## 현재 코드 요약\n### (tabs)/index.tsx\n- 상단: 제목 '오늘의 식단' + 날짜\n- 원형 SVG 게이지 (react-native-svg, radius=90)\n- 탄/단/지 MacroCard 3열\n- 식사 카드 4개 (아침/점심/저녁/간식) 세로 나열, 각각 + 버튼으로 /meal/add 이동\n\n### meal/add.tsx\n- 모드: search | manual | detail\n- search: 음식 검색 (debounce 500ms, localhost:3200 API) + 최근 기록\n- detail: 선택된 음식 영양소 타일 + 인분 조절 + 기록 추가\n- manual: 직접 입력 폼\n\n## 레퍼런스 디자인 반영 요소\n\n### 화면 1: 메인 대시보드 (index.tsx) 개선\n1. **날짜 네비게이터**: 상단에 좌우 화살표 버튼 + 중앙 날짜 텍스트 (오늘이면 '오늘' 배지). 날짜 state 추가, 오늘이 아닌 날은 과거 데이터 표시용 (fetchTodaySummary에 date 파라미터 가능하면 전달, 없으면 UI만)\n2. **헤더 탭**: '자세히' / '한눈에' 탭 전환 UI (activeTab state, 현재는 자세히 뷰만 구현)\n3. **원형 게이지 업그레이드**:\n   - 크기 키우기 (SVG_SIZE 240, radius 100)\n   - 중앙: 섭취 kcal 큰 숫자 (fontSize 40 bold) + '/ 목표kcal' 작게\n   - 게이지 아래 탄/단/지 퍼센트 배지 (가로 3개, 각각 색상 둥근 배지: 탄수화물 파랑, 단백질 그린, 지방 오렌지)\n4. **남은 칼로리 배너**: 게이지 아래 '🔥 오늘 남은 칼로리: Nkcal' 또는 '목표 달성! 🎉' 텍스트 배너\n5. **동기부여 메시지**: 캐릭터 대신 상황별 짧은 메시지 (0% → '오늘도 건강하게 시작해요 💪', 50%이상 → '절반 왔어요! 잘하고 있어요 🌿', 100% → '오늘 목표 달성! 🎉')\n6. **매크로 상세**: 기존 MacroCard 유지 + 당류/나트륨은 추후 확장용으로 TODO 주석만\n7. **식사 카드 그리드**: 세로 나열 → 2x2 그리드로 변경. 각 카드에 이모지 크게 + 식사명 + + 버튼. 빈 카드는 '아직 기록 없음' 표시\n\n### 화면 2: 음식 추가 화면 (add.tsx) 개선\n1. **검색 헤더 개선**: 뒤로가기 X 버튼 (왼쪽) + 식사 종류 중앙 표시 + '직접입력' 링크 (오른쪽)\n2. **검색바 고정**: 상단 고정, 스크롤해도 검색바 유지 (KeyboardAvoidingView 구조 유지)\n3. **검색 결과 카드**: 기존 listCard 스타일 유지하되 왼쪽에 컬러 도트 (칼로리 기준 색상 구분: <200 그린, 200-500 오렌지, >500 레드)\n4. **detail 화면**: 영양소 타일을 더 크게, 인분 조절 UI는 현재 구조 유지\n5. **빈 상태**: 검색어 없을 때 최근 기록 위에 '자주 먹는 음식' 섹션 추가 (현재 recentFoods 재활용)\n\n## 출력 형식\n각 화면별로:\n- 컴포넌트 트리 (들여쓰기 구조)\n- 핵심 state 목록\n- 주요 StyleSheet 값 (색상, 크기, 간격)\n- 기존 로직 중 유지할 것 vs 변경할 것\n\n설계서를 명확하고 구체적으로 작성하라. codex가 이 설계서만 보고 코드를 작성할 수 있을 정도로 상세하게.",
      "output": "/Users/bugbookee/Desktop/buildkit/output/glpcare-ux-design.md"
    },
    {
      "step": "code-gen",
      "role": "Developer",
      "model": "codex",
      "prompt": "GLP-Care 칼로리 앱 UX 리디자인 코드를 작성하라.\n\n## 설계서 경로\n/Users/bugbookee/Desktop/buildkit/output/glpcare-ux-design.md\n\n## 수정 파일\n1. /Users/bugbookee/.paperclip/instances/default/projects/c130b9f3-5855-47c1-a128-b16f07ebdc69/12805932-2b62-4dff-93e9-39732f9e3926/_default/mobile/app/(tabs)/index.tsx\n2. /Users/bugbookee/.paperclip/instances/default/projects/c130b9f3-5855-47c1-a128-b16f07ebdc69/12805932-2b62-4dff-93e9-39732f9e3926/_default/mobile/app/meal/add.tsx\n\n## 절대 규칙 (위반 시 빌드 실패)\n- NativeWind className 속성 금지 → style={{ }} 또는 StyleSheet 사용\n- DateTimePicker import/사용 금지\n- 모든 UI 텍스트 한국어\n- 기존 import 경로 유지: useMealStore, searchFood, FoodItem, clearRecentFoods, getRecentFoods, saveRecentFood, expo-router\n- react-native-svg 사용 가능 (이미 설치됨)\n- TypeScript strict 모드: any 타입 사용 최소화\n- StyleSheet.create로 모든 스타일 정의\n\n## index.tsx 구현 요구사항\n1. 날짜 네비게이터: useState<Date>로 selectedDate 관리, 좌우 화살표 터치, 오늘이면 '오늘' 배지\n2. '자세히'/'한눈에' 탭 UI (activeTab state, 탭 전환만 구현, 한눈에 뷰는 placeholder)\n3. 원형 게이지: SVG_SIZE=240, RADIUS=100, 중앙에 칼로리 크게 (40px bold)\n4. 탄/단/지 퍼센트 배지: 게이지 아래 가로 배치 (탄수화물 #3B82F6, 단백질 #10B981, 지방 #F59E0B)\n5. 남은 칼로리 배너: remainingKcal = goalCaloriesKcal - totalCaloriesKcal\n6. 동기부여 메시지: progress 비율(0~1)에 따라 3단계 메시지\n7. 식사 카드 2x2 그리드: flexDirection row + flexWrap wrap, 각 카드 width '48%'\n\n## add.tsx 구현 요구사항\n1. 검색 헤더: X 버튼(router.back()) 왼쪽 + 식사명 중앙 + '직접입력' 오른쪽\n2. 검색 결과 카드 왼쪽에 칼로리 기준 컬러 도트 (width 8, height 8, borderRadius 4)\n   - caloriesKcal < 200: '#10B981' (그린)\n   - caloriesKcal < 500: '#F59E0B' (오렌지)  \n   - 그 이상: '#EF4444' (레드)\n3. 기존 search/manual/detail 모드 로직 완전 유지\n4. 기존 debounce, logMeal, handleSelectFood 등 모든 핸들러 유지\n\n## 출력\n각 파일의 전체 코드를 출력하라. 파일 경로를 주석으로 표시하고 완전한 코드만 출력하라.",
      "input": ["ux-design"],
      "files": [
        "/Users/bugbookee/.paperclip/instances/default/projects/c130b9f3-5855-47c1-a128-b16f07ebdc69/12805932-2b62-4dff-93e9-39732f9e3926/_default/mobile/app/(tabs)/index.tsx",
        "/Users/bugbookee/.paperclip/instances/default/projects/c130b9f3-5855-47c1-a128-b16f07ebdc69/12805932-2b62-4dff-93e9-39732f9e3926/_default/mobile/app/meal/add.tsx"
      ],
      "output": "code",
      "verify": "tsc"
    },
    {
      "step": "review",
      "role": "Reviewer",
      "model": "sonnet",
      "prompt": "GLP-Care 앱 UX 리디자인 코드를 리뷰하라.\n\n## 검토 항목\n1. **GLP-Care 제약 준수**\n   - NativeWind className 사용 여부 (위반 = 즉시 지적)\n   - DateTimePicker import 여부 (위반 = 즉시 지적)\n   - 한국어 UI 텍스트 여부\n2. **기능 완전성**\n   - 날짜 네비게이터 동작 로직\n   - 탄/단/지 퍼센트 계산 정확성 (totalMacroG 합산 기준)\n   - 칼로리 도트 색상 분기 로직\n   - 기존 search/manual/detail 모드 보존 여부\n3. **React Native 렌더링 이슈**\n   - flex 레이아웃 문제 (2x2 그리드 width 설정)\n   - KeyboardAvoidingView + FlatList 충돌 가능성\n   - StyleSheet vs inline style 혼용 여부\n4. **TypeScript**\n   - any 타입 남용 여부\n   - 미정의 변수/속성 참조\n5. **성능**\n   - useCallback/useMemo 적절한 사용\n   - FlatList keyExtractor 올바른 설정\n\n## 출력 형식\n점수: N/10\n\n심각한 버그 (있으면 목록):\n- ...\n\n수정 권고 (있으면 목록):\n- ...\n\n통과 여부: PASS / FAIL",
      "input": ["code-gen"],
      "output": "/Users/bugbookee/Desktop/buildkit/output/glpcare-ux-review.md",
      "pass": 7
    }
  ]
}