medication-fixes.json

{
  "project": "glpcare-medication-fixes",
  "description": "투약 페이지 UX 이슈 전체 수정 (P1~P3, user-test 기반)",
  "codebase": "/Users/bugbookee/.paperclip/instances/default/projects/c130b9f3-5855-47c1-a128-b16f07ebdc69/12805932-2b62-4dff-93e9-39732f9e3926/_default/mobile",
  "steps": [
    {
      "step": "design",
      "role": "CTO",
      "model": "opus",
      "prompt": "GLP-Care injection.tsx 투약 페이지의 UX 이슈를 수정하기 위한 상세 설계서를 작성하라.\n\n## 현재 코드\n파일 읽기: /Users/bugbookee/.paperclip/instances/default/projects/c130b9f3-5855-47c1-a128-b16f07ebdc69/12805932-2b62-4dff-93e9-39732f9e3926/_default/mobile/app/(tabs)/injection.tsx\n\n## 수정 대상 이슈 목록\n\n### P1 긴급\n- C-1: MainScreen 최상단에 어제 누락 약 인앱 알림 배너. 전날 날짜(today - 1일)의 미복용 항목 계산. 탭하면 어제 날짜 DateDetailSheet 오픈\n- C-2: CheckCard 전체를 TouchableOpacity로 감싸기. 카드 어디든 탭하면 onToggle 호출. 내부 체크 버튼은 시각적 표시만 (터치 이벤트는 외부 TouchableOpacity가 처리)\n- B-1: checkMeta style fontSize 12 → 14\n- B-3: checkButton width/height 32 → 44, borderRadius 22\n\n### P2 중요\n- C-3: handleAddMedication 저장 성공 후 Alert.alert('등록 완료', '다른 약도 등록할까요?', [{text:'완료', onPress:()=>setScreen('main')}, {text:'계속 추가', onPress:()=>setScreen('add')}])\n- C-5: toggleCheck에서 existing.status==='taken'일 때 Alert.alert 확인 후 pending으로 변경\n- C-7: getWeekSummary 함수 확장 — missedItems 배열 추가 (medicationId, name, timeSlot, timeDetail, date). 주간 요약 카드에 missed 약 이름 목록 표시\n- B-2: calendarDot width/height 5 → 8, borderRadius 4\n- B-5: CalendarView 컴포넌트 하단에 범례 Row 추가 — 초록(완료)/노랑(일부)/빨강(미복용)/회색(없음) 색상 + 레이블\n- B-6: AddScreen에서 ScrollView 하단(memo 아래)에 큰 저장 버튼(primaryBtn 스타일) 추가. 기존 상단 headerSaveButton은 유지\n- B-7: showTimeSheet 모달(AddScreen)에 닫기 X 버튼 추가 — sheet 상단 우측\n- A-1: '요일 지정' 텍스트 → '특정 요일'\n- A-2: CheckCard의 checkMeta에 TIME_SLOT_LABEL[item.timeSlot] 추가 — '아침 · 1정 · 식후 · 08:00' 형식\n- A-3: TIME_SLOT_PRESETS 및 TIME_SLOT_LABEL 그대로 유지하되 바텀시트 빠른 선택 버튼에 시간 병기 강화 (현재도 있음, 확인 후 필요시 강조)\n\n### P3 권장\n- C-6: ManageScreen에서 약 카드에 [편집] 버튼 추가. 탭하면 해당 약 데이터를 draft로 채운 AddScreen으로 이동 (editMode + editId state 추가). 저장 시 setMedications prev.map으로 기존 항목 업데이트\n- C-8: getDayDots 함수 확장 — taken 약은 채워진 원, 예정됐지만 미복용(과거 날짜)은 테두리만 있는 원. CalendarView에서 두 타입 도트 렌더\n- A-4: getDayDots에서 slice(0, 3) → slice(0, 6)\n- A-5: 다음 예정 nextCard에 FORM_LABEL[medication.form] + medication.dosage 추가\n- B-8: calendarArrowText '‹'/'›' → '◀'/'▶' (또는 '< 이전'/'다음 >' 텍스트로)\n- B-9: ManageScreen에서 삭제 버튼을 상시 노출 대신 롱프레스 시 확인 Alert으로 변경\n\n## 제약\n- StyleSheet.create 사용, NativeWind className 금지\n- DateTimePicker import/사용 금지\n- 한국어 UI\n- 그린 테마 PRIMARY='#10B981' 유지\n- injection.tsx 한 파일 수정만\n\n## 출력 형식\n각 이슈별로:\n1. 수정할 함수/컴포넌트 이름\n2. 현재 코드 문제 (1~2줄)\n3. 수정 방법 (구체적 코드 스니펫 포함)\n4. 영향받는 다른 코드 없는지 확인\n\n설계서를 상세하게 작성해라.",
      "output": "output/medication-fixes-design.md"
    },
    {
      "step": "code-gen",
      "role": "Developer",
      "model": "codex",
      "prompt": "GLP-Care 투약 페이지(injection.tsx)를 수정하라. 설계서에 나온 모든 이슈를 반영한다.\n\n## 설계서\n/Users/bugbookee/.paperclip/instances/default/projects/c130b9f3-5855-47c1-a128-b16f07ebdc69/12805932-2b62-4dff-93e9-39732f9e3926/_default/mobile/Desktop/buildkit/output/medication-fixes-design.md\n\n실제 설계서 경로: /Users/bugbookee/Desktop/buildkit/output/medication-fixes-design.md\n\n## 수정 파일\n/Users/bugbookee/.paperclip/instances/default/projects/c130b9f3-5855-47c1-a128-b16f07ebdc69/12805932-2b62-4dff-93e9-39732f9e3926/_default/mobile/app/(tabs)/injection.tsx\n\n## 수정 항목 요약 (반드시 전부 적용)\n\n### P1 (필수)\n1. **어제 누락 배너 (C-1)**: MainScreen에서 yesterday = getDateKey(new Date(Date.now() - 86400000)). yesterdayMissed = getCheckItemsForDate(medications, logs, yesterday).filter(item => item.log?.status !== 'taken'). yesterdayMissed.length > 0이면 상단에 배너 렌더 (배경 #FEF3C7, 텍스트: '어제 {N}개 약을 놓쳤어요 →'). 탭하면 setSelectedDate(yesterday); setShowDateSheet(true) — 단, selectedDate/setSelectedDate/showDateSheet는 부모(InjectionScreen)에 있으므로 MainScreen props에 selectedDate setter 전달 필요. 또는 MainScreen 내부에 자체 yesterday 배너 처리 추가.\n\n2. **카드 전체 탭 (C-2)**: CheckCard의 최외곽 View → TouchableOpacity로 변경. onPress={() => onToggle(...)}. 내부 기존 체크 버튼은 비터치 View로 변경 (버튼 역할 제거, 시각만 유지).\n\n3. **폰트/버튼 크기 (B-1, B-3)**: checkMeta fontSize 12→14. checkButton width/height 32→44, borderRadius 22.\n\n### P2 (필수)\n4. **연속 등록 다이얼로그 (C-3)**: handleAddMedication 저장 후 setScreen('main') 대신 Alert.alert('등록 완료', '다른 약도 등록하시겠어요?', [{text:'완료', onPress:()=>setScreen('main')}, {text:'계속 추가', onPress:()=>setScreen('add')}]).\n\n5. **체크 해제 확인 (C-5)**: toggleCheck에서 existing.status === 'taken' 분기를 Alert.alert('복약 기록 취소', '이 약의 복약 기록을 취소할까요?', [{text:'아니오'}, {text:'취소', style:'destructive', onPress:()=>setLogs(...)}])로 변경.\n\n6. **주간 요약 상세 (C-7)**: getWeekSummary 반환값에 missedItems: Array<{name:string, timeSlotLabel:string, date:string}> 추가. 주간 요약 카드에 missedCount > 0이면 missed약 목록 렌더 (최대 3개, '외 N개' 처리).\n\n7. **달력 도트 8px (B-2)**: calendarDot width/height 5→8.\n\n8. **달력 범례 (B-5)**: CalendarView 컴포넌트 달력 그리드 아래에 범례 Row 추가. [{color:'#10B981', label:'완료'}, {color:'#FEF08A', label:'일부'}, {color:'#FEE2E2', label:'미복용'}, {color:'#F1F5F9', label:'없음'}]. 각 item: 작은 원 + 텍스트 Row.\n\n9. **폼 하단 저장 버튼 (B-6)**: AddScreen ScrollView 내 메모 TextInput 아래에 primaryBtn 스타일 저장 버튼 추가. onPress={handleSave}, disabled={!canSave}.\n\n10. **바텀시트 닫기 버튼 (B-7)**: showTimeSheet 모달 sheet 내 sheetHandle 아래, sheetTitle 옆에 X 버튼 추가. onPress={() => setShowTimeSheet(false)}.\n\n11. **레이블 변경 (A-1)**: '요일 지정' → '특정 요일'.\n\n12. **시간대 레이블 병기 (A-2)**: CheckCard의 checkMeta 텍스트를 `{TIME_SLOT_LABEL[item.timeSlot]} · {item.dosage || '용량 없음'} · {CONDITION_LABEL[item.condition]} · {item.timeDetail}` 형식으로.\n\n### P3 (필수)\n13. **약 편집 기능 (C-6)**: InjectionScreen에 editingMedicationId: string|null state 추가. ManageScreen 약 카드에 [삭제] 옆 [편집] 버튼 추가. 편집 탭하면 onEdit(medication.id) 콜백 → InjectionScreen에서 setEditingMedicationId + setScreen('add'). AddScreen에 editingMedication?: Medication prop 추가. editingMedication 있으면 draft를 해당 약 데이터로 초기화. 저장 시 editingMedication이 있으면 setMedications prev.map으로 업데이트, 없으면 추가.\n\n14. **미복용 빈 도트 (C-8)**: getDayDots 반환 타입을 Array<{color:string, filled:boolean}>로 변경. taken은 filled:true, 예정됐으나 미복용(과거 날짜)은 filled:false. CalendarView에서 filled 여부로 backgroundColor vs borderColor 렌더.\n\n15. **도트 최대 6개 (A-4)**: getDayDots에서 slice(0,3) → slice(0,6). calendarDotsRow에서 최대 6개 렌더.\n\n16. **다음 예정 카드 정보 추가 (A-5)**: nextCard에 FORM_LABEL[medication.form] + (medication.dosage ? ` · ${medication.dosage}` : '') 추가.\n\n17. **달력 화살표 텍스트 (B-8)**: '‹' → '◀', '›' → '▶'.\n\n18. **삭제 확인 Alert (B-9)**: ManageScreen onDelete 호출 전 Alert.alert('약 삭제', '이 약을 삭제할까요?', [{text:'취소'}, {text:'삭제', style:'destructive', onPress:()=>onDelete(id)}]) 추가.\n\n## 절대 규칙\n- NativeWind className 속성 단 하나도 없어야 함\n- DateTimePicker import/사용 금지\n- StyleSheet.create + style={{}} 사용\n- 한국어 UI\n- PRIMARY = '#10B981' 그린 테마 유지\n- injection.tsx 한 파일만 수정\n\n## 출력 형식 (필수)\n// === /Users/bugbookee/.paperclip/instances/default/projects/c130b9f3-5855-47c1-a128-b16f07ebdc69/12805932-2b62-4dff-93e9-39732f9e3926/_default/mobile/app/(tabs)/injection.tsx\n[전체 코드]",
      "input": ["design"],
      "files": [
        "/Users/bugbookee/.paperclip/instances/default/projects/c130b9f3-5855-47c1-a128-b16f07ebdc69/12805932-2b62-4dff-93e9-39732f9e3926/_default/mobile/app/(tabs)/injection.tsx"
      ],
      "output": "code"
    },
    {
      "step": "review",
      "role": "Reviewer",
      "model": "sonnet",
      "prompt": "GLP-Care injection.tsx 수정 코드를 리뷰하라.\n\n## 핵심 체크리스트\n\n### GLP-Care 제약\n- [ ] NativeWind className 없는가\n- [ ] DateTimePicker 없는가\n- [ ] StyleSheet.create 사용하는가\n- [ ] 한국어 UI인가\n\n### P1 이슈 해결 여부\n- [ ] C-1: 어제 누락 배너 (yesterdayMissed, 배너 렌더)\n- [ ] C-2: CheckCard 전체 TouchableOpacity\n- [ ] B-1: checkMeta fontSize 14\n- [ ] B-3: checkButton 44×44\n\n### P2 이슈 해결 여부\n- [ ] C-3: 연속 등록 Alert\n- [ ] C-5: 체크 해제 확인 Alert\n- [ ] C-7: 주간 요약 missedItems 상세\n- [ ] B-2: calendarDot 8px\n- [ ] B-5: 달력 범례\n- [ ] B-6: 폼 하단 저장 버튼\n- [ ] B-7: 바텀시트 닫기 X 버튼\n- [ ] A-1: '특정 요일' 레이블\n- [ ] A-2: 카드 메타에 시간대 레이블\n\n### P3 이슈 해결 여부\n- [ ] C-6: 약 편집 기능 (editingMedicationId, [편집] 버튼)\n- [ ] C-8: 미복용 빈 도트\n- [ ] A-4: 도트 최대 6개\n- [ ] A-5: 다음 예정 카드 형태/용량\n- [ ] B-8: 달력 화살표 ◀▶\n- [ ] B-9: 삭제 확인 Alert\n\n### 새 버그 없는지\n- getDayDots 반환 타입 변경이 CalendarView 렌더에서 오류 없는가\n- editingMedication prop이 AddScreen에 올바르게 전달되는가\n- InjectionScreen에서 selectedDate/setShowDateSheet를 MainScreen에 내려주는가\n\n## 출력 형식\n점수: N/10\n\n체크 결과: (항목별 ✅/❌)\n\n미해결 이슈:\n- ...\n\n새로 발견된 버그:\n- ...\n\n통과 여부: PASS / FAIL (8점 이상 PASS)",
      "input": ["code-gen"],
      "output": "output/medication-fixes-review.md",
      "pass": 8
    }
  ]
}