cat-health-log
75 B ⭐ Pioneer ⚡ Active 📝 Documented
@Raunplaymore (10 projects) · 8 steps · 62.6 KB · 2026-03-01 ·
고양이 집사를 위한 건강기록 관리 웹앱. 접종, 체중, 진료, 투약을 한곳에서 관리.
#react#saas#mvp
Clone via terminal:
pmpt clone cat-health-log GitHub README GitHub
Loading README...
1
Starting Prompt
This single prompt is where the project began.
cat-health-log — Product Development Request
What I Want to Build
고양이 집사를 위한 건강기록 관리 앱. 접종 일정, 체중 변화, 진료 기록, 투약 알림 등을 한곳에서 관리할 수 있는 모바일 친화적 웹앱. 다묘 가정도 지원하며, 수의사 방문 전 기록을 한눈에 정리해서 보여줄 수 있다.
Additional Context
주요 타겟은 한국의 고양이 집사. UI는 따뜻하고 귀여운 톤. 모바일 퍼스트로 설계하되 데스크톱도 지원. 고양이별로 아바타 색상을 다르게 해서 구분 쉽게.
Key Features
Phase 1 (MVP)
- 고양이 프로필 관리 (이름, 품종, 나이, 색상, 프로필 사진)
- 체중 기록 및 변화 그래프 (recharts)
- 접종 기록 및 다음 접종일 표시
- 진료 기록 (날짜, 병원, 증상, 진단, 비용)
- 투약 스케줄 및 활성/비활성 관리
- 다묘 가정 지원 (고양이별 카드 전환)
- 모바일 하단 탭 네비게이션
Phase 2 (추후)
- Supabase Auth 연동 (카카오 + 구글 로그인)
- R2 사진 업로드 (현재는 base64 인라인 저장, R2 마이그레이션 예정)
- 기록 내보내기 (PDF로 수의사에게 전달)
- PWA + 오프라인 지원
- 푸시 알림
Tech Stack Preferences
- API: Cloudflare Workers + Hono + D1 (SQLite) + Zod
- Web: Vite + React + TypeScript + Tailwind CSS + shadcn/ui + recharts
- ID 생성: nanoid
- 배포: Cloudflare Workers (API) + Cloudflare Pages (Web)
- 인증: Phase 1은 단일 사용자 모드, Phase 2에서 Supabase Auth
Architecture
cat-health-log/
├── api/ ← Cloudflare Workers + Hono + D1
│ ├── src/
│ │ ├── index.ts ← Hono 앱, CORS, 라우트 마운트
│ │ ├── env.ts ← Env 바인딩 타입 (D1)
│ │ ├── routes/
│ │ │ ├── cats.ts ← 고양이 프로필 CRUD
│ │ │ ├── weights.ts ← 체중 기록
│ │ │ ├── vaccinations.ts ← 접종 기록
│ │ │ ├── medical.ts ← 진료 기록
│ │ │ └── medications.ts ← 투약 기록
│ │ └── lib/
│ │ └── db.ts ← nanoid, D1 헬퍼
│ ├── schema.sql ← D1 테이블 정의
│ └── wrangler.toml ← D1 바인딩 설정
├── web/ ← Vite + React SPA (Cloudflare Pages)
│ ├── src/
│ │ ├── App.tsx ← React Router
│ │ ├── pages/ ← 6개 페이지
│ │ ├── components/ ← UI 컴포넌트
│ │ └── lib/ ← API 클라이언트, 타입
│ └── vite.config.ts
└── .pmpt/
D1 Schema
5개 테이블: cats, weight_records, vaccinations, medical_records, medications
- 모든 PK는 TEXT (nanoid), cat_id FK, ON DELETE CASCADE
Documentation Rule
Important: When you make progress, update .pmpt/docs/pmpt.md (the human-facing project document) at these moments:
- When architecture or tech decisions are finalized
- When a feature is implemented (mark as done)
- When a development phase is completed
- When requirements change or new decisions are made
Keep the Progress and Snapshot Log sections in pmpt.md up to date.
After significant milestones, run pmpt save to create a snapshot.
2
Development Journey
A summary of 8 snapshots recorded during AI development. Clone the project to explore the full history.
v8 2026-02-27 379e911
Cloudflare 배포 완료
- · D1 프로덕션 데이터베이스 생성 (APAC/ICN 리전)
- · wrangler.toml에 실제 database_id 반영
- · D1 remote에 schema.sql 적용 (5개 테이블)
- · API Workers 배포: https://cat-health-log-api.sin2da.workers.dev
- · CORS origin 제한 (Pages 도메인 + localhost만 허용)
- · Web Cloudflare Pages 배포: https://cat-health-log.pages.dev
- · VITE_API_URL 환경변수로 프로덕션 API URL 주입
- · health check + CRUD API 테스트 통과
- · Phase 1 MVP 배포 완료
Detail
cat-health-log
Product Idea
고양이 집사를 위한 건강기록 관리 앱. 접종 일정, 체중 변화, 진료 기록, 투약 알림 등을 한곳에서 관리할 수 있는 모바일 친화적 웹앱. 다묘 가정도 지원하며, 수의사 방문 전 기록을 한눈에 정리해서 보여줄 수 있다.
Additional Context
주요 타겟은 한국의 고양이 집사. UI는 따뜻하고 귀여운 톤. 모바일 퍼스트로 설계하되 데스크톱도 지원. 고양이별로 아바타 색상을 다르게 해서 구분 쉽게.
Features
Phase 1 (MVP)
- 고양이 프로필 관리 (이름, 품종, 나이, 색상, 프로필 사진)
- 체중 기록 및 변화 그래프 (recharts)
- 접종 기록 및 다음 접종일 표시
- 진료 기록 (날짜, 병원, 증상, 진단, 비용)
- 투약 스케줄 및 활성/비활성 관리
- 다묘 가정 지원 (고양이별 카드 전환)
- 모바일 하단 탭 네비게이션
Phase 2 (추후)
- Supabase Auth 연동 (카카오 + 구글 로그인)
- R2 사진 업로드 (현재는 base64 인라인 저장, R2 마이그레이션 예정)
- 기록 내보내기 (PDF로 수의사에게 전달)
- PWA + 오프라인 지원
- 푸시 알림
Tech Stack
- API: Cloudflare Workers + Hono + D1 (SQLite) + Zod
- Web: Vite + React + TypeScript + Tailwind CSS + shadcn/ui + recharts
- ID 생성: nanoid
- 배포: Cloudflare Workers (API) + Cloudflare Pages (Web)
- 인증: Phase 1은 단일 사용자 모드, Phase 2에서 Supabase Auth
Architecture
cat-health-log/
├── api/ ← Cloudflare Workers + Hono + D1
│ ├── src/
│ │ ├── index.ts ← Hono 앱, CORS, 라우트 마운트
│ │ ├── env.ts ← Env 바인딩 타입 (D1)
│ │ ├── routes/
│ │ │ ├── cats.ts ← 고양이 프로필 CRUD
│ │ │ ├── weights.ts ← 체중 기록
│ │ │ ├── vaccinations.ts ← 접종 기록
│ │ │ ├── medical.ts ← 진료 기록
│ │ │ └── medications.ts ← 투약 기록
│ │ └── lib/
│ │ └── db.ts ← nanoid, D1 헬퍼
│ ├── schema.sql ← D1 테이블 정의
│ └── wrangler.toml ← D1 바인딩 설정
├── web/ ← Vite + React SPA (Cloudflare Pages)
│ ├── src/
│ │ ├── App.tsx ← React Router
│ │ ├── pages/ ← 6개 페이지
│ │ ├── components/ ← UI 컴포넌트
│ │ └── lib/ ← API 클라이언트, 타입
│ └── vite.config.ts
└── .pmpt/
D1 Schema
5개 테이블: cats, weight_records, vaccinations, medical_records, medications
- 모든 PK는 TEXT (nanoid)
- cat_id FK로 고양이별 데이터 분리
- ON DELETE CASCADE로 고양이 삭제 시 관련 기록 자동 삭제
Progress
- 제품 기획 및 기술 스택 결정
- API 프로젝트 셋업 (Hono + D1 + wrangler.toml)
- D1 스키마 작성 (5개 테이블)
- API 라우트 구현 (cats, weights, vaccinations, medical, medications)
- Web 프로젝트 셋업 (Vite + React + Tailwind + shadcn/ui)
- Web 페이지 구현 (Home, CatProfile, WeightLog, Vaccinations, Medical, Medications)
- 체중 변화 그래프 (recharts)
- 모바일 하단 탭 네비게이션
- 버그 수정 및 안정성 개선 (에러 핸들링, 로딩 상태, 이중 제출 방지)
- UI/UX 개선 (Pretendard 폰트, 파비콘, iOS safe-area, SPA 라우팅)
- 로컬 테스트 (D1 셋업 + API/Web E2E 테스트 + CASCADE 삭제 확인)
- 나이 필드 개선 (birth_date → age 간편 입력, birth_date는 프로필 편집에서 선택)
- 고양이 프로필 사진 업로드 (클라이언트 리사이즈 + base64 저장)
- Cloudflare 배포 (Workers + Pages)
Snapshot Log
v1 — 기획 완료
- 제품 아이디어, 기능 목록, 기술 스택 확정
- Cloudflare Workers + Hono + D1 아키텍처 결정
- Vite + React SPA 프론트엔드 구조 설계
v2 — API 프로젝트 셋업
- api/ 디렉토리에 Hono + D1 프로젝트 생성
- package.json (hono, nanoid, zod, wrangler, typescript)
- wrangler.toml에 D1 바인딩(CAT_DB) 설정
- schema.sql에 5개 테이블 정의 (cats, weight_records, vaccinations, medical_records, medications)
- src/index.ts — Hono 앱 + CORS + 라우트 마운트
- src/env.ts — Env 타입 정의
- src/lib/db.ts — nanoid 기반 ID 생성
- 각 라우트 파일 stub 생성 완료, 타입체크 통과
v3 — API 라우트 구현 완료
- cats.ts: 고양이 프로필 CRUD (GET/POST/PUT/DELETE) + Zod 검증
- weights.ts: 체중 기록 (GET/POST/DELETE)
- vaccinations.ts: 접종 기록 CRUD (GET/POST/PUT/DELETE)
- medical.ts: 진료 기록 CRUD (GET/POST/PUT/DELETE) + 비용 필드
- medications.ts: 투약 기록 CRUD (GET/POST/PUT/DELETE) + 활성/비활성
- 모든 라우트에 Zod 입력 검증 적용
- Phase 1: user_id = 'default' 고정 (단일 사용자 모드)
- 전체 타입체크 통과
v4 — Web 프로젝트 셋업
- Vite + React + TypeScript 프로젝트 생성
- Tailwind CSS v4 + @tailwindcss/vite 설정
- react-router-dom + recharts 설치
- src/lib/types.ts — 공유 타입 정의 (Cat, WeightRecord, Vaccination, MedicalRecord, Medication)
- src/lib/api.ts — fetch 기반 API 클라이언트 (모든 CRUD 함수)
- src/App.tsx — React Router 라우팅 설정 (6개 페이지)
- src/components/BottomNav.tsx — 모바일 하단 탭 네비게이션
- 6개 페이지 stub 생성 (Home, CatProfile, WeightLog, Vaccinations, MedicalRecords, Medications)
- 따뜻한 크림 배경(#FFFBF5) + 앰버 프라이머리 컬러 CSS 변수 설정
- 빌드 성공 확인
v5 — Web 페이지 구현 완료 (Phase 1 MVP)
- Home.tsx: 고양이 카드 목록 + 등록 폼 (이름, 품종, 생일, 아바타 색상 선택) + 삭제
- CatProfile.tsx: 프로필 상세 (나이 자동 계산) + 인라인 편집 + 4개 기록 카드 네비게이션
- WeightLog.tsx: 체중 기록 리스트 + recharts 꺾은선 그래프 (2건 이상일 때 표시)
- Vaccinations.tsx: 접종 기록 + 한국 고양이 백신 프리셋 (종합백신, 광견병, FVRCP, FeLV) + 다음 접종일 경고
- MedicalRecords.tsx: 진료 기록 (증상/진단/처치/비용) + 총 진료비 합계 표시
- Medications.tsx: 투약 관리 + 활성/비활성 토글 + 복용 중/종료됨 섹션 분리
- BottomNav.tsx: 모바일 하단 5탭 (홈, 체중, 접종, 진료, 투약) + 현재 고양이 컨텍스트 자동 감지
- 전체 UI: 따뜻한 크림/앰버 톤, 모바일 퍼스트, 한국어
- API + Web 빌드 모두 성공
v6 — 버그 수정 + UI/UX 개선 + 로컬 테스트 통과
- api/src/index.ts: PRAGMA foreign_keys = ON 미들웨어 추가 (CASCADE 삭제 정상 동작)
- 6개 페이지 전체 에러 핸들링 추가 (try/catch + 에러 상태 표시)
- 공통 컴포넌트 생성: Loading.tsx, ErrorMessage.tsx (다시 시도 버튼 포함)
- 모든 폼에 이중 제출 방지 (submitting 상태 + 버튼 disabled)
- 레코드 삭제 시 confirm() 다이얼로그 추가 (5개 서브페이지)
- 모든 input에 text-base(16px) 적용 (iOS 줌 방지)
- Pretendard Variable 폰트 CDN 로딩 추가
- 파비콘 (🐱 SVG), theme-color, description 메타 태그 추가
- BottomNav: iOS safe-area-inset-bottom 패딩 적용
- #root에 padding-bottom: 4rem (하단 네비 겹침 방지)
- web/public/_redirects 생성 (Cloudflare Pages SPA 라우팅 대비)
- D1 로컬 DB 셋업 + API/Web 동시 실행 + 전체 CRUD E2E 테스트 통과
- CASCADE 삭제 정상 동작 확인 (고양이 삭제 시 관련 기록 자동 삭제)
v7 — 나이 필드 개선 + 프로필 사진 업로드
- 고양이 등록: birth_date 대신 age(나이) 숫자 입력으로 간소화
- schema.sql: age INTEGER 컬럼 추가, birth_date는 선택 필드로 유지
- API cats.ts: Zod 스키마에 age 필드 추가, INSERT/UPDATE 반영
- CatProfile.tsx: 프로필 사진 업로드 기능 (아바타 클릭 → 파일 선택 → 리사이즈 → 저장)
- resizeImage.ts: 클라이언트 사이드 이미지 리사이즈 (200x200, JPEG 80%)
- Home.tsx: 고양이 카드에 프로필 사진 표시 (없으면 이니셜 아바타)
- photo_url 필드에 base64 data URL로 저장 (Phase 2에서 R2로 마이그레이션 예정)
- 빌드 성공 확인
v8 — Cloudflare 배포 완료
- D1 프로덕션 데이터베이스 생성 (APAC/ICN 리전)
- wrangler.toml에 실제 database_id 반영
- D1 remote에 schema.sql 적용 (5개 테이블)
- API Workers 배포: https://cat-health-log-api.sin2da.workers.dev
- CORS origin 제한 (Pages 도메인 + localhost만 허용)
- Web Cloudflare Pages 배포: https://cat-health-log.pages.dev
- VITE_API_URL 환경변수로 프로덕션 API URL 주입
- health check + CRUD API 테스트 통과
- Phase 1 MVP 배포 완료
Files (2)
plan.mdpmpt.ai.md
v7 2026-02-27 379e911
나이 필드 개선 + 프로필 사진 업로드
- · 고양이 등록: birth_date 대신 age(나이) 숫자 입력으로 간소화
- · schema.sql: age INTEGER 컬럼 추가, birth_date는 선택 필드로 유지
- · API cats.ts: Zod 스키마에 age 필드 추가, INSERT/UPDATE 반영
- · CatProfile.tsx: 프로필 사진 업로드 기능 (아바타 클릭 → 파일 선택 → 리사이즈 → 저장)
- · resizeImage.ts: 클라이언트 사이드 이미지 리사이즈 (200x200, JPEG 80%)
- · Home.tsx: 고양이 카드에 프로필 사진 표시 (없으면 이니셜 아바타)
- · photo_url 필드에 base64 data URL로 저장 (Phase 2에서 R2로 마이그레이션 예정)
- · 빌드 성공 확인
Detail
cat-health-log
Product Idea
고양이 집사를 위한 건강기록 관리 앱. 접종 일정, 체중 변화, 진료 기록, 투약 알림 등을 한곳에서 관리할 수 있는 모바일 친화적 웹앱. 다묘 가정도 지원하며, 수의사 방문 전 기록을 한눈에 정리해서 보여줄 수 있다.
Additional Context
주요 타겟은 한국의 고양이 집사. UI는 따뜻하고 귀여운 톤. 모바일 퍼스트로 설계하되 데스크톱도 지원. 고양이별로 아바타 색상을 다르게 해서 구분 쉽게.
Features
Phase 1 (MVP)
- 고양이 프로필 관리 (이름, 품종, 나이, 색상, 프로필 사진)
- 체중 기록 및 변화 그래프 (recharts)
- 접종 기록 및 다음 접종일 표시
- 진료 기록 (날짜, 병원, 증상, 진단, 비용)
- 투약 스케줄 및 활성/비활성 관리
- 다묘 가정 지원 (고양이별 카드 전환)
- 모바일 하단 탭 네비게이션
Phase 2 (추후)
- Supabase Auth 연동 (카카오 + 구글 로그인)
- R2 사진 업로드 (현재는 base64 인라인 저장, R2 마이그레이션 예정)
- 기록 내보내기 (PDF로 수의사에게 전달)
- PWA + 오프라인 지원
- 푸시 알림
Tech Stack
- API: Cloudflare Workers + Hono + D1 (SQLite) + Zod
- Web: Vite + React + TypeScript + Tailwind CSS + shadcn/ui + recharts
- ID 생성: nanoid
- 배포: Cloudflare Workers (API) + Cloudflare Pages (Web)
- 인증: Phase 1은 단일 사용자 모드, Phase 2에서 Supabase Auth
Architecture
cat-health-log/
├── api/ ← Cloudflare Workers + Hono + D1
│ ├── src/
│ │ ├── index.ts ← Hono 앱, CORS, 라우트 마운트
│ │ ├── env.ts ← Env 바인딩 타입 (D1)
│ │ ├── routes/
│ │ │ ├── cats.ts ← 고양이 프로필 CRUD
│ │ │ ├── weights.ts ← 체중 기록
│ │ │ ├── vaccinations.ts ← 접종 기록
│ │ │ ├── medical.ts ← 진료 기록
│ │ │ └── medications.ts ← 투약 기록
│ │ └── lib/
│ │ └── db.ts ← nanoid, D1 헬퍼
│ ├── schema.sql ← D1 테이블 정의
│ └── wrangler.toml ← D1 바인딩 설정
├── web/ ← Vite + React SPA (Cloudflare Pages)
│ ├── src/
│ │ ├── App.tsx ← React Router
│ │ ├── pages/ ← 6개 페이지
│ │ ├── components/ ← UI 컴포넌트
│ │ └── lib/ ← API 클라이언트, 타입
│ └── vite.config.ts
└── .pmpt/
D1 Schema
5개 테이블: cats, weight_records, vaccinations, medical_records, medications
- 모든 PK는 TEXT (nanoid)
- cat_id FK로 고양이별 데이터 분리
- ON DELETE CASCADE로 고양이 삭제 시 관련 기록 자동 삭제
Progress
- 제품 기획 및 기술 스택 결정
- API 프로젝트 셋업 (Hono + D1 + wrangler.toml)
- D1 스키마 작성 (5개 테이블)
- API 라우트 구현 (cats, weights, vaccinations, medical, medications)
- Web 프로젝트 셋업 (Vite + React + Tailwind + shadcn/ui)
- Web 페이지 구현 (Home, CatProfile, WeightLog, Vaccinations, Medical, Medications)
- 체중 변화 그래프 (recharts)
- 모바일 하단 탭 네비게이션
- 버그 수정 및 안정성 개선 (에러 핸들링, 로딩 상태, 이중 제출 방지)
- UI/UX 개선 (Pretendard 폰트, 파비콘, iOS safe-area, SPA 라우팅)
- 로컬 테스트 (D1 셋업 + API/Web E2E 테스트 + CASCADE 삭제 확인)
- 나이 필드 개선 (birth_date → age 간편 입력, birth_date는 프로필 편집에서 선택)
- 고양이 프로필 사진 업로드 (클라이언트 리사이즈 + base64 저장)
- Cloudflare 배포 (Workers + Pages)
Snapshot Log
v1 — 기획 완료
- 제품 아이디어, 기능 목록, 기술 스택 확정
- Cloudflare Workers + Hono + D1 아키텍처 결정
- Vite + React SPA 프론트엔드 구조 설계
v2 — API 프로젝트 셋업
- api/ 디렉토리에 Hono + D1 프로젝트 생성
- package.json (hono, nanoid, zod, wrangler, typescript)
- wrangler.toml에 D1 바인딩(CAT_DB) 설정
- schema.sql에 5개 테이블 정의 (cats, weight_records, vaccinations, medical_records, medications)
- src/index.ts — Hono 앱 + CORS + 라우트 마운트
- src/env.ts — Env 타입 정의
- src/lib/db.ts — nanoid 기반 ID 생성
- 각 라우트 파일 stub 생성 완료, 타입체크 통과
v3 — API 라우트 구현 완료
- cats.ts: 고양이 프로필 CRUD (GET/POST/PUT/DELETE) + Zod 검증
- weights.ts: 체중 기록 (GET/POST/DELETE)
- vaccinations.ts: 접종 기록 CRUD (GET/POST/PUT/DELETE)
- medical.ts: 진료 기록 CRUD (GET/POST/PUT/DELETE) + 비용 필드
- medications.ts: 투약 기록 CRUD (GET/POST/PUT/DELETE) + 활성/비활성
- 모든 라우트에 Zod 입력 검증 적용
- Phase 1: user_id = 'default' 고정 (단일 사용자 모드)
- 전체 타입체크 통과
v4 — Web 프로젝트 셋업
- Vite + React + TypeScript 프로젝트 생성
- Tailwind CSS v4 + @tailwindcss/vite 설정
- react-router-dom + recharts 설치
- src/lib/types.ts — 공유 타입 정의 (Cat, WeightRecord, Vaccination, MedicalRecord, Medication)
- src/lib/api.ts — fetch 기반 API 클라이언트 (모든 CRUD 함수)
- src/App.tsx — React Router 라우팅 설정 (6개 페이지)
- src/components/BottomNav.tsx — 모바일 하단 탭 네비게이션
- 6개 페이지 stub 생성 (Home, CatProfile, WeightLog, Vaccinations, MedicalRecords, Medications)
- 따뜻한 크림 배경(#FFFBF5) + 앰버 프라이머리 컬러 CSS 변수 설정
- 빌드 성공 확인
v5 — Web 페이지 구현 완료 (Phase 1 MVP)
- Home.tsx: 고양이 카드 목록 + 등록 폼 (이름, 품종, 생일, 아바타 색상 선택) + 삭제
- CatProfile.tsx: 프로필 상세 (나이 자동 계산) + 인라인 편집 + 4개 기록 카드 네비게이션
- WeightLog.tsx: 체중 기록 리스트 + recharts 꺾은선 그래프 (2건 이상일 때 표시)
- Vaccinations.tsx: 접종 기록 + 한국 고양이 백신 프리셋 (종합백신, 광견병, FVRCP, FeLV) + 다음 접종일 경고
- MedicalRecords.tsx: 진료 기록 (증상/진단/처치/비용) + 총 진료비 합계 표시
- Medications.tsx: 투약 관리 + 활성/비활성 토글 + 복용 중/종료됨 섹션 분리
- BottomNav.tsx: 모바일 하단 5탭 (홈, 체중, 접종, 진료, 투약) + 현재 고양이 컨텍스트 자동 감지
- 전체 UI: 따뜻한 크림/앰버 톤, 모바일 퍼스트, 한국어
- API + Web 빌드 모두 성공
v6 — 버그 수정 + UI/UX 개선 + 로컬 테스트 통과
- api/src/index.ts: PRAGMA foreign_keys = ON 미들웨어 추가 (CASCADE 삭제 정상 동작)
- 6개 페이지 전체 에러 핸들링 추가 (try/catch + 에러 상태 표시)
- 공통 컴포넌트 생성: Loading.tsx, ErrorMessage.tsx (다시 시도 버튼 포함)
- 모든 폼에 이중 제출 방지 (submitting 상태 + 버튼 disabled)
- 레코드 삭제 시 confirm() 다이얼로그 추가 (5개 서브페이지)
- 모든 input에 text-base(16px) 적용 (iOS 줌 방지)
- Pretendard Variable 폰트 CDN 로딩 추가
- 파비콘 (🐱 SVG), theme-color, description 메타 태그 추가
- BottomNav: iOS safe-area-inset-bottom 패딩 적용
- #root에 padding-bottom: 4rem (하단 네비 겹침 방지)
- web/public/_redirects 생성 (Cloudflare Pages SPA 라우팅 대비)
- D1 로컬 DB 셋업 + API/Web 동시 실행 + 전체 CRUD E2E 테스트 통과
- CASCADE 삭제 정상 동작 확인 (고양이 삭제 시 관련 기록 자동 삭제)
v7 — 나이 필드 개선 + 프로필 사진 업로드
- 고양이 등록: birth_date 대신 age(나이) 숫자 입력으로 간소화
- schema.sql: age INTEGER 컬럼 추가, birth_date는 선택 필드로 유지
- API cats.ts: Zod 스키마에 age 필드 추가, INSERT/UPDATE 반영
- CatProfile.tsx: 프로필 사진 업로드 기능 (아바타 클릭 → 파일 선택 → 리사이즈 → 저장)
- resizeImage.ts: 클라이언트 사이드 이미지 리사이즈 (200x200, JPEG 80%)
- Home.tsx: 고양이 카드에 프로필 사진 표시 (없으면 이니셜 아바타)
- photo_url 필드에 base64 data URL로 저장 (Phase 2에서 R2로 마이그레이션 예정)
- 빌드 성공 확인
Files (2)
plan.mdpmpt.ai.md
v6 2026-02-27 379e911
버그 수정 + UI/UX 개선 + 로컬 테스트 통과
- · api/src/index.ts: PRAGMA foreign_keys = ON 미들웨어 추가 (CASCADE 삭제 정상 동작)
- · 6개 페이지 전체 에러 핸들링 추가 (try/catch + 에러 상태 표시)
- · 공통 컴포넌트 생성: Loading.tsx, ErrorMessage.tsx (다시 시도 버튼 포함)
- · 모든 폼에 이중 제출 방지 (submitting 상태 + 버튼 disabled)
- · 레코드 삭제 시 confirm() 다이얼로그 추가 (5개 서브페이지)
- · 모든 input에 text-base(16px) 적용 (iOS 줌 방지)
- · Pretendard Variable 폰트 CDN 로딩 추가
- · 파비콘 (🐱 SVG), theme-color, description 메타 태그 추가
- · BottomNav: iOS safe-area-inset-bottom 패딩 적용
- · #root에 padding-bottom: 4rem (하단 네비 겹침 방지)
- · web/public/_redirects 생성 (Cloudflare Pages SPA 라우팅 대비)
- · D1 로컬 DB 셋업 + API/Web 동시 실행 + 전체 CRUD E2E 테스트 통과
- · CASCADE 삭제 정상 동작 확인 (고양이 삭제 시 관련 기록 자동 삭제)
Detail
cat-health-log
Product Idea
고양이 집사를 위한 건강기록 관리 앱. 접종 일정, 체중 변화, 진료 기록, 투약 알림 등을 한곳에서 관리할 수 있는 모바일 친화적 웹앱. 다묘 가정도 지원하며, 수의사 방문 전 기록을 한눈에 정리해서 보여줄 수 있다.
Additional Context
주요 타겟은 한국의 고양이 집사. UI는 따뜻하고 귀여운 톤. 모바일 퍼스트로 설계하되 데스크톱도 지원. 고양이별로 아바타 색상을 다르게 해서 구분 쉽게.
Features
Phase 1 (MVP)
- 고양이 프로필 관리 (이름, 품종, 생년월일, 색상)
- 체중 기록 및 변화 그래프 (recharts)
- 접종 기록 및 다음 접종일 표시
- 진료 기록 (날짜, 병원, 증상, 진단, 비용)
- 투약 스케줄 및 활성/비활성 관리
- 다묘 가정 지원 (고양이별 카드 전환)
- 모바일 하단 탭 네비게이션
Phase 2 (추후)
- Supabase Auth 연동 (카카오 + 구글 로그인)
- R2 사진 업로드
- 기록 내보내기 (PDF로 수의사에게 전달)
- PWA + 오프라인 지원
- 푸시 알림
Tech Stack
- API: Cloudflare Workers + Hono + D1 (SQLite) + Zod
- Web: Vite + React + TypeScript + Tailwind CSS + shadcn/ui + recharts
- ID 생성: nanoid
- 배포: Cloudflare Workers (API) + Cloudflare Pages (Web)
- 인증: Phase 1은 단일 사용자 모드, Phase 2에서 Supabase Auth
Architecture
cat-health-log/
├── api/ ← Cloudflare Workers + Hono + D1
│ ├── src/
│ │ ├── index.ts ← Hono 앱, CORS, 라우트 마운트
│ │ ├── env.ts ← Env 바인딩 타입 (D1)
│ │ ├── routes/
│ │ │ ├── cats.ts ← 고양이 프로필 CRUD
│ │ │ ├── weights.ts ← 체중 기록
│ │ │ ├── vaccinations.ts ← 접종 기록
│ │ │ ├── medical.ts ← 진료 기록
│ │ │ └── medications.ts ← 투약 기록
│ │ └── lib/
│ │ └── db.ts ← nanoid, D1 헬퍼
│ ├── schema.sql ← D1 테이블 정의
│ └── wrangler.toml ← D1 바인딩 설정
├── web/ ← Vite + React SPA (Cloudflare Pages)
│ ├── src/
│ │ ├── App.tsx ← React Router
│ │ ├── pages/ ← 6개 페이지
│ │ ├── components/ ← UI 컴포넌트
│ │ └── lib/ ← API 클라이언트, 타입
│ └── vite.config.ts
└── .pmpt/
D1 Schema
5개 테이블: cats, weight_records, vaccinations, medical_records, medications
- 모든 PK는 TEXT (nanoid)
- cat_id FK로 고양이별 데이터 분리
- ON DELETE CASCADE로 고양이 삭제 시 관련 기록 자동 삭제
Progress
- 제품 기획 및 기술 스택 결정
- API 프로젝트 셋업 (Hono + D1 + wrangler.toml)
- D1 스키마 작성 (5개 테이블)
- API 라우트 구현 (cats, weights, vaccinations, medical, medications)
- Web 프로젝트 셋업 (Vite + React + Tailwind + shadcn/ui)
- Web 페이지 구현 (Home, CatProfile, WeightLog, Vaccinations, Medical, Medications)
- 체중 변화 그래프 (recharts)
- 모바일 하단 탭 네비게이션
- 버그 수정 및 안정성 개선 (에러 핸들링, 로딩 상태, 이중 제출 방지)
- UI/UX 개선 (Pretendard 폰트, 파비콘, iOS safe-area, SPA 라우팅)
- 로컬 테스트 (D1 셋업 + API/Web E2E 테스트 + CASCADE 삭제 확인)
- Cloudflare 배포 (Workers + Pages)
Snapshot Log
v1 — 기획 완료
- 제품 아이디어, 기능 목록, 기술 스택 확정
- Cloudflare Workers + Hono + D1 아키텍처 결정
- Vite + React SPA 프론트엔드 구조 설계
v2 — API 프로젝트 셋업
- api/ 디렉토리에 Hono + D1 프로젝트 생성
- package.json (hono, nanoid, zod, wrangler, typescript)
- wrangler.toml에 D1 바인딩(CAT_DB) 설정
- schema.sql에 5개 테이블 정의 (cats, weight_records, vaccinations, medical_records, medications)
- src/index.ts — Hono 앱 + CORS + 라우트 마운트
- src/env.ts — Env 타입 정의
- src/lib/db.ts — nanoid 기반 ID 생성
- 각 라우트 파일 stub 생성 완료, 타입체크 통과
v3 — API 라우트 구현 완료
- cats.ts: 고양이 프로필 CRUD (GET/POST/PUT/DELETE) + Zod 검증
- weights.ts: 체중 기록 (GET/POST/DELETE)
- vaccinations.ts: 접종 기록 CRUD (GET/POST/PUT/DELETE)
- medical.ts: 진료 기록 CRUD (GET/POST/PUT/DELETE) + 비용 필드
- medications.ts: 투약 기록 CRUD (GET/POST/PUT/DELETE) + 활성/비활성
- 모든 라우트에 Zod 입력 검증 적용
- Phase 1: user_id = 'default' 고정 (단일 사용자 모드)
- 전체 타입체크 통과
v4 — Web 프로젝트 셋업
- Vite + React + TypeScript 프로젝트 생성
- Tailwind CSS v4 + @tailwindcss/vite 설정
- react-router-dom + recharts 설치
- src/lib/types.ts — 공유 타입 정의 (Cat, WeightRecord, Vaccination, MedicalRecord, Medication)
- src/lib/api.ts — fetch 기반 API 클라이언트 (모든 CRUD 함수)
- src/App.tsx — React Router 라우팅 설정 (6개 페이지)
- src/components/BottomNav.tsx — 모바일 하단 탭 네비게이션
- 6개 페이지 stub 생성 (Home, CatProfile, WeightLog, Vaccinations, MedicalRecords, Medications)
- 따뜻한 크림 배경(#FFFBF5) + 앰버 프라이머리 컬러 CSS 변수 설정
- 빌드 성공 확인
v5 — Web 페이지 구현 완료 (Phase 1 MVP)
- Home.tsx: 고양이 카드 목록 + 등록 폼 (이름, 품종, 생일, 아바타 색상 선택) + 삭제
- CatProfile.tsx: 프로필 상세 (나이 자동 계산) + 인라인 편집 + 4개 기록 카드 네비게이션
- WeightLog.tsx: 체중 기록 리스트 + recharts 꺾은선 그래프 (2건 이상일 때 표시)
- Vaccinations.tsx: 접종 기록 + 한국 고양이 백신 프리셋 (종합백신, 광견병, FVRCP, FeLV) + 다음 접종일 경고
- MedicalRecords.tsx: 진료 기록 (증상/진단/처치/비용) + 총 진료비 합계 표시
- Medications.tsx: 투약 관리 + 활성/비활성 토글 + 복용 중/종료됨 섹션 분리
- BottomNav.tsx: 모바일 하단 5탭 (홈, 체중, 접종, 진료, 투약) + 현재 고양이 컨텍스트 자동 감지
- 전체 UI: 따뜻한 크림/앰버 톤, 모바일 퍼스트, 한국어
- API + Web 빌드 모두 성공
v6 — 버그 수정 + UI/UX 개선 + 로컬 테스트 통과
- api/src/index.ts: PRAGMA foreign_keys = ON 미들웨어 추가 (CASCADE 삭제 정상 동작)
- 6개 페이지 전체 에러 핸들링 추가 (try/catch + 에러 상태 표시)
- 공통 컴포넌트 생성: Loading.tsx, ErrorMessage.tsx (다시 시도 버튼 포함)
- 모든 폼에 이중 제출 방지 (submitting 상태 + 버튼 disabled)
- 레코드 삭제 시 confirm() 다이얼로그 추가 (5개 서브페이지)
- 모든 input에 text-base(16px) 적용 (iOS 줌 방지)
- Pretendard Variable 폰트 CDN 로딩 추가
- 파비콘 (🐱 SVG), theme-color, description 메타 태그 추가
- BottomNav: iOS safe-area-inset-bottom 패딩 적용
- #root에 padding-bottom: 4rem (하단 네비 겹침 방지)
- web/public/_redirects 생성 (Cloudflare Pages SPA 라우팅 대비)
- D1 로컬 DB 셋업 + API/Web 동시 실행 + 전체 CRUD E2E 테스트 통과
- CASCADE 삭제 정상 동작 확인 (고양이 삭제 시 관련 기록 자동 삭제)
Files (2)
plan.mdpmpt.ai.md
v5 2026-02-25 7ef6038
Web 페이지 구현 완료 (Phase 1 MVP)
- · Home.tsx: 고양이 카드 목록 + 등록 폼 (이름, 품종, 생일, 아바타 색상 선택) + 삭제
- · CatProfile.tsx: 프로필 상세 (나이 자동 계산) + 인라인 편집 + 4개 기록 카드 네비게이션
- · WeightLog.tsx: 체중 기록 리스트 + recharts 꺾은선 그래프 (2건 이상일 때 표시)
- · Vaccinations.tsx: 접종 기록 + 한국 고양이 백신 프리셋 (종합백신, 광견병, FVRCP, FeLV) + 다음 접종일 경고
- · MedicalRecords.tsx: 진료 기록 (증상/진단/처치/비용) + 총 진료비 합계 표시
- · Medications.tsx: 투약 관리 + 활성/비활성 토글 + 복용 중/종료됨 섹션 분리
- · BottomNav.tsx: 모바일 하단 5탭 (홈, 체중, 접종, 진료, 투약) + 현재 고양이 컨텍스트 자동 감지
- · 전체 UI: 따뜻한 크림/앰버 톤, 모바일 퍼스트, 한국어
- · API + Web 빌드 모두 성공
Detail
cat-health-log
Product Idea
고양이 집사를 위한 건강기록 관리 앱. 접종 일정, 체중 변화, 진료 기록, 투약 알림 등을 한곳에서 관리할 수 있는 모바일 친화적 웹앱. 다묘 가정도 지원하며, 수의사 방문 전 기록을 한눈에 정리해서 보여줄 수 있다.
Additional Context
주요 타겟은 한국의 고양이 집사. UI는 따뜻하고 귀여운 톤. 모바일 퍼스트로 설계하되 데스크톱도 지원. 고양이별로 아바타 색상을 다르게 해서 구분 쉽게.
Features
Phase 1 (MVP)
- 고양이 프로필 관리 (이름, 품종, 생년월일, 색상)
- 체중 기록 및 변화 그래프 (recharts)
- 접종 기록 및 다음 접종일 표시
- 진료 기록 (날짜, 병원, 증상, 진단, 비용)
- 투약 스케줄 및 활성/비활성 관리
- 다묘 가정 지원 (고양이별 카드 전환)
- 모바일 하단 탭 네비게이션
Phase 2 (추후)
- Supabase Auth 연동 (카카오 + 구글 로그인)
- R2 사진 업로드
- 기록 내보내기 (PDF로 수의사에게 전달)
- PWA + 오프라인 지원
- 푸시 알림
Tech Stack
- API: Cloudflare Workers + Hono + D1 (SQLite) + Zod
- Web: Vite + React + TypeScript + Tailwind CSS + shadcn/ui + recharts
- ID 생성: nanoid
- 배포: Cloudflare Workers (API) + Cloudflare Pages (Web)
- 인증: Phase 1은 단일 사용자 모드, Phase 2에서 Supabase Auth
Architecture
cat-health-log/
├── api/ ← Cloudflare Workers + Hono + D1
│ ├── src/
│ │ ├── index.ts ← Hono 앱, CORS, 라우트 마운트
│ │ ├── env.ts ← Env 바인딩 타입 (D1)
│ │ ├── routes/
│ │ │ ├── cats.ts ← 고양이 프로필 CRUD
│ │ │ ├── weights.ts ← 체중 기록
│ │ │ ├── vaccinations.ts ← 접종 기록
│ │ │ ├── medical.ts ← 진료 기록
│ │ │ └── medications.ts ← 투약 기록
│ │ └── lib/
│ │ └── db.ts ← nanoid, D1 헬퍼
│ ├── schema.sql ← D1 테이블 정의
│ └── wrangler.toml ← D1 바인딩 설정
├── web/ ← Vite + React SPA (Cloudflare Pages)
│ ├── src/
│ │ ├── App.tsx ← React Router
│ │ ├── pages/ ← 6개 페이지
│ │ ├── components/ ← UI 컴포넌트
│ │ └── lib/ ← API 클라이언트, 타입
│ └── vite.config.ts
└── .pmpt/
D1 Schema
5개 테이블: cats, weight_records, vaccinations, medical_records, medications
- 모든 PK는 TEXT (nanoid)
- cat_id FK로 고양이별 데이터 분리
- ON DELETE CASCADE로 고양이 삭제 시 관련 기록 자동 삭제
Progress
- 제품 기획 및 기술 스택 결정
- API 프로젝트 셋업 (Hono + D1 + wrangler.toml)
- D1 스키마 작성 (5개 테이블)
- API 라우트 구현 (cats, weights, vaccinations, medical, medications)
- Web 프로젝트 셋업 (Vite + React + Tailwind + shadcn/ui)
- Web 페이지 구현 (Home, CatProfile, WeightLog, Vaccinations, Medical, Medications)
- 체중 변화 그래프 (recharts)
- 모바일 하단 탭 네비게이션
- 로컬 테스트 (API + Web)
- Cloudflare 배포 (Workers + Pages)
Snapshot Log
v1 — 기획 완료
- 제품 아이디어, 기능 목록, 기술 스택 확정
- Cloudflare Workers + Hono + D1 아키텍처 결정
- Vite + React SPA 프론트엔드 구조 설계
v2 — API 프로젝트 셋업
- api/ 디렉토리에 Hono + D1 프로젝트 생성
- package.json (hono, nanoid, zod, wrangler, typescript)
- wrangler.toml에 D1 바인딩(CAT_DB) 설정
- schema.sql에 5개 테이블 정의 (cats, weight_records, vaccinations, medical_records, medications)
- src/index.ts — Hono 앱 + CORS + 라우트 마운트
- src/env.ts — Env 타입 정의
- src/lib/db.ts — nanoid 기반 ID 생성
- 각 라우트 파일 stub 생성 완료, 타입체크 통과
v3 — API 라우트 구현 완료
- cats.ts: 고양이 프로필 CRUD (GET/POST/PUT/DELETE) + Zod 검증
- weights.ts: 체중 기록 (GET/POST/DELETE)
- vaccinations.ts: 접종 기록 CRUD (GET/POST/PUT/DELETE)
- medical.ts: 진료 기록 CRUD (GET/POST/PUT/DELETE) + 비용 필드
- medications.ts: 투약 기록 CRUD (GET/POST/PUT/DELETE) + 활성/비활성
- 모든 라우트에 Zod 입력 검증 적용
- Phase 1: user_id = 'default' 고정 (단일 사용자 모드)
- 전체 타입체크 통과
v4 — Web 프로젝트 셋업
- Vite + React + TypeScript 프로젝트 생성
- Tailwind CSS v4 + @tailwindcss/vite 설정
- react-router-dom + recharts 설치
- src/lib/types.ts — 공유 타입 정의 (Cat, WeightRecord, Vaccination, MedicalRecord, Medication)
- src/lib/api.ts — fetch 기반 API 클라이언트 (모든 CRUD 함수)
- src/App.tsx — React Router 라우팅 설정 (6개 페이지)
- src/components/BottomNav.tsx — 모바일 하단 탭 네비게이션
- 6개 페이지 stub 생성 (Home, CatProfile, WeightLog, Vaccinations, MedicalRecords, Medications)
- 따뜻한 크림 배경(#FFFBF5) + 앰버 프라이머리 컬러 CSS 변수 설정
- 빌드 성공 확인
v5 — Web 페이지 구현 완료 (Phase 1 MVP)
- Home.tsx: 고양이 카드 목록 + 등록 폼 (이름, 품종, 생일, 아바타 색상 선택) + 삭제
- CatProfile.tsx: 프로필 상세 (나이 자동 계산) + 인라인 편집 + 4개 기록 카드 네비게이션
- WeightLog.tsx: 체중 기록 리스트 + recharts 꺾은선 그래프 (2건 이상일 때 표시)
- Vaccinations.tsx: 접종 기록 + 한국 고양이 백신 프리셋 (종합백신, 광견병, FVRCP, FeLV) + 다음 접종일 경고
- MedicalRecords.tsx: 진료 기록 (증상/진단/처치/비용) + 총 진료비 합계 표시
- Medications.tsx: 투약 관리 + 활성/비활성 토글 + 복용 중/종료됨 섹션 분리
- BottomNav.tsx: 모바일 하단 5탭 (홈, 체중, 접종, 진료, 투약) + 현재 고양이 컨텍스트 자동 감지
- 전체 UI: 따뜻한 크림/앰버 톤, 모바일 퍼스트, 한국어
- API + Web 빌드 모두 성공
Files (1)
plan.md
v4 2026-02-25 7ef6038
Web 프로젝트 셋업
- · Vite + React + TypeScript 프로젝트 생성
- · Tailwind CSS v4 + @tailwindcss/vite 설정
- · react-router-dom + recharts 설치
- · src/lib/types.ts — 공유 타입 정의 (Cat, WeightRecord, Vaccination, MedicalRecord, Medication)
- · src/lib/api.ts — fetch 기반 API 클라이언트 (모든 CRUD 함수)
- · src/App.tsx — React Router 라우팅 설정 (6개 페이지)
- · src/components/BottomNav.tsx — 모바일 하단 탭 네비게이션
- · 6개 페이지 stub 생성 (Home, CatProfile, WeightLog, Vaccinations, MedicalRecords, Medications)
- · 따뜻한 크림 배경(#FFFBF5) + 앰버 프라이머리 컬러 CSS 변수 설정
- · 빌드 성공 확인
Detail
cat-health-log
Product Idea
고양이 집사를 위한 건강기록 관리 앱. 접종 일정, 체중 변화, 진료 기록, 투약 알림 등을 한곳에서 관리할 수 있는 모바일 친화적 웹앱. 다묘 가정도 지원하며, 수의사 방문 전 기록을 한눈에 정리해서 보여줄 수 있다.
Additional Context
주요 타겟은 한국의 고양이 집사. UI는 따뜻하고 귀여운 톤. 모바일 퍼스트로 설계하되 데스크톱도 지원. 고양이별로 아바타 색상을 다르게 해서 구분 쉽게.
Features
Phase 1 (MVP)
- 고양이 프로필 관리 (이름, 품종, 생년월일, 색상)
- 체중 기록 및 변화 그래프 (recharts)
- 접종 기록 및 다음 접종일 표시
- 진료 기록 (날짜, 병원, 증상, 진단, 비용)
- 투약 스케줄 및 활성/비활성 관리
- 다묘 가정 지원 (고양이별 카드 전환)
- 모바일 하단 탭 네비게이션
Phase 2 (추후)
- Supabase Auth 연동 (카카오 + 구글 로그인)
- R2 사진 업로드
- 기록 내보내기 (PDF로 수의사에게 전달)
- PWA + 오프라인 지원
- 푸시 알림
Tech Stack
- API: Cloudflare Workers + Hono + D1 (SQLite) + Zod
- Web: Vite + React + TypeScript + Tailwind CSS + shadcn/ui + recharts
- ID 생성: nanoid
- 배포: Cloudflare Workers (API) + Cloudflare Pages (Web)
- 인증: Phase 1은 단일 사용자 모드, Phase 2에서 Supabase Auth
Architecture
cat-health-log/
├── api/ ← Cloudflare Workers + Hono + D1
│ ├── src/
│ │ ├── index.ts ← Hono 앱, CORS, 라우트 마운트
│ │ ├── env.ts ← Env 바인딩 타입 (D1)
│ │ ├── routes/
│ │ │ ├── cats.ts ← 고양이 프로필 CRUD
│ │ │ ├── weights.ts ← 체중 기록
│ │ │ ├── vaccinations.ts ← 접종 기록
│ │ │ ├── medical.ts ← 진료 기록
│ │ │ └── medications.ts ← 투약 기록
│ │ └── lib/
│ │ └── db.ts ← nanoid, D1 헬퍼
│ ├── schema.sql ← D1 테이블 정의
│ └── wrangler.toml ← D1 바인딩 설정
├── web/ ← Vite + React SPA (Cloudflare Pages)
│ ├── src/
│ │ ├── App.tsx ← React Router
│ │ ├── pages/ ← 6개 페이지
│ │ ├── components/ ← UI 컴포넌트
│ │ └── lib/ ← API 클라이언트, 타입
│ └── vite.config.ts
└── .pmpt/
D1 Schema
5개 테이블: cats, weight_records, vaccinations, medical_records, medications
- 모든 PK는 TEXT (nanoid)
- cat_id FK로 고양이별 데이터 분리
- ON DELETE CASCADE로 고양이 삭제 시 관련 기록 자동 삭제
Progress
- 제품 기획 및 기술 스택 결정
- API 프로젝트 셋업 (Hono + D1 + wrangler.toml)
- D1 스키마 작성 (5개 테이블)
- API 라우트 구현 (cats, weights, vaccinations, medical, medications)
- Web 프로젝트 셋업 (Vite + React + Tailwind + shadcn/ui)
- Web 페이지 구현 (Home, CatProfile, WeightLog, Vaccinations, Medical, Medications)
- 체중 변화 그래프 (recharts)
- 모바일 하단 탭 네비게이션
- 로컬 테스트 (API + Web)
- Cloudflare 배포 (Workers + Pages)
Snapshot Log
v1 — 기획 완료
- 제품 아이디어, 기능 목록, 기술 스택 확정
- Cloudflare Workers + Hono + D1 아키텍처 결정
- Vite + React SPA 프론트엔드 구조 설계
v2 — API 프로젝트 셋업
- api/ 디렉토리에 Hono + D1 프로젝트 생성
- package.json (hono, nanoid, zod, wrangler, typescript)
- wrangler.toml에 D1 바인딩(CAT_DB) 설정
- schema.sql에 5개 테이블 정의 (cats, weight_records, vaccinations, medical_records, medications)
- src/index.ts — Hono 앱 + CORS + 라우트 마운트
- src/env.ts — Env 타입 정의
- src/lib/db.ts — nanoid 기반 ID 생성
- 각 라우트 파일 stub 생성 완료, 타입체크 통과
v3 — API 라우트 구현 완료
- cats.ts: 고양이 프로필 CRUD (GET/POST/PUT/DELETE) + Zod 검증
- weights.ts: 체중 기록 (GET/POST/DELETE)
- vaccinations.ts: 접종 기록 CRUD (GET/POST/PUT/DELETE)
- medical.ts: 진료 기록 CRUD (GET/POST/PUT/DELETE) + 비용 필드
- medications.ts: 투약 기록 CRUD (GET/POST/PUT/DELETE) + 활성/비활성
- 모든 라우트에 Zod 입력 검증 적용
- Phase 1: user_id = 'default' 고정 (단일 사용자 모드)
- 전체 타입체크 통과
v4 — Web 프로젝트 셋업
- Vite + React + TypeScript 프로젝트 생성
- Tailwind CSS v4 + @tailwindcss/vite 설정
- react-router-dom + recharts 설치
- src/lib/types.ts — 공유 타입 정의 (Cat, WeightRecord, Vaccination, MedicalRecord, Medication)
- src/lib/api.ts — fetch 기반 API 클라이언트 (모든 CRUD 함수)
- src/App.tsx — React Router 라우팅 설정 (6개 페이지)
- src/components/BottomNav.tsx — 모바일 하단 탭 네비게이션
- 6개 페이지 stub 생성 (Home, CatProfile, WeightLog, Vaccinations, MedicalRecords, Medications)
- 따뜻한 크림 배경(#FFFBF5) + 앰버 프라이머리 컬러 CSS 변수 설정
- 빌드 성공 확인
Files (1)
plan.md
v3 2026-02-25 7ef6038
API 라우트 구현 완료
- · cats.ts: 고양이 프로필 CRUD (GET/POST/PUT/DELETE) + Zod 검증
- · weights.ts: 체중 기록 (GET/POST/DELETE)
- · vaccinations.ts: 접종 기록 CRUD (GET/POST/PUT/DELETE)
- · medical.ts: 진료 기록 CRUD (GET/POST/PUT/DELETE) + 비용 필드
- · medications.ts: 투약 기록 CRUD (GET/POST/PUT/DELETE) + 활성/비활성
- · 모든 라우트에 Zod 입력 검증 적용
- · Phase 1: user_id = 'default' 고정 (단일 사용자 모드)
- · 전체 타입체크 통과
Detail
cat-health-log
Product Idea
고양이 집사를 위한 건강기록 관리 앱. 접종 일정, 체중 변화, 진료 기록, 투약 알림 등을 한곳에서 관리할 수 있는 모바일 친화적 웹앱. 다묘 가정도 지원하며, 수의사 방문 전 기록을 한눈에 정리해서 보여줄 수 있다.
Additional Context
주요 타겟은 한국의 고양이 집사. UI는 따뜻하고 귀여운 톤. 모바일 퍼스트로 설계하되 데스크톱도 지원. 고양이별로 아바타 색상을 다르게 해서 구분 쉽게.
Features
Phase 1 (MVP)
- 고양이 프로필 관리 (이름, 품종, 생년월일, 색상)
- 체중 기록 및 변화 그래프 (recharts)
- 접종 기록 및 다음 접종일 표시
- 진료 기록 (날짜, 병원, 증상, 진단, 비용)
- 투약 스케줄 및 활성/비활성 관리
- 다묘 가정 지원 (고양이별 카드 전환)
- 모바일 하단 탭 네비게이션
Phase 2 (추후)
- Supabase Auth 연동 (카카오 + 구글 로그인)
- R2 사진 업로드
- 기록 내보내기 (PDF로 수의사에게 전달)
- PWA + 오프라인 지원
- 푸시 알림
Tech Stack
- API: Cloudflare Workers + Hono + D1 (SQLite) + Zod
- Web: Vite + React + TypeScript + Tailwind CSS + shadcn/ui + recharts
- ID 생성: nanoid
- 배포: Cloudflare Workers (API) + Cloudflare Pages (Web)
- 인증: Phase 1은 단일 사용자 모드, Phase 2에서 Supabase Auth
Architecture
cat-health-log/
├── api/ ← Cloudflare Workers + Hono + D1
│ ├── src/
│ │ ├── index.ts ← Hono 앱, CORS, 라우트 마운트
│ │ ├── env.ts ← Env 바인딩 타입 (D1)
│ │ ├── routes/
│ │ │ ├── cats.ts ← 고양이 프로필 CRUD
│ │ │ ├── weights.ts ← 체중 기록
│ │ │ ├── vaccinations.ts ← 접종 기록
│ │ │ ├── medical.ts ← 진료 기록
│ │ │ └── medications.ts ← 투약 기록
│ │ └── lib/
│ │ └── db.ts ← nanoid, D1 헬퍼
│ ├── schema.sql ← D1 테이블 정의
│ └── wrangler.toml ← D1 바인딩 설정
├── web/ ← Vite + React SPA (Cloudflare Pages)
│ ├── src/
│ │ ├── App.tsx ← React Router
│ │ ├── pages/ ← 6개 페이지
│ │ ├── components/ ← UI 컴포넌트
│ │ └── lib/ ← API 클라이언트, 타입
│ └── vite.config.ts
└── .pmpt/
D1 Schema
5개 테이블: cats, weight_records, vaccinations, medical_records, medications
- 모든 PK는 TEXT (nanoid)
- cat_id FK로 고양이별 데이터 분리
- ON DELETE CASCADE로 고양이 삭제 시 관련 기록 자동 삭제
Progress
- 제품 기획 및 기술 스택 결정
- API 프로젝트 셋업 (Hono + D1 + wrangler.toml)
- D1 스키마 작성 (5개 테이블)
- API 라우트 구현 (cats, weights, vaccinations, medical, medications)
- Web 프로젝트 셋업 (Vite + React + Tailwind + shadcn/ui)
- Web 페이지 구현 (Home, CatProfile, WeightLog, Vaccinations, Medical, Medications)
- 체중 변화 그래프 (recharts)
- 모바일 하단 탭 네비게이션
- 로컬 테스트 (API + Web)
- Cloudflare 배포 (Workers + Pages)
Snapshot Log
v1 — 기획 완료
- 제품 아이디어, 기능 목록, 기술 스택 확정
- Cloudflare Workers + Hono + D1 아키텍처 결정
- Vite + React SPA 프론트엔드 구조 설계
v2 — API 프로젝트 셋업
- api/ 디렉토리에 Hono + D1 프로젝트 생성
- package.json (hono, nanoid, zod, wrangler, typescript)
- wrangler.toml에 D1 바인딩(CAT_DB) 설정
- schema.sql에 5개 테이블 정의 (cats, weight_records, vaccinations, medical_records, medications)
- src/index.ts — Hono 앱 + CORS + 라우트 마운트
- src/env.ts — Env 타입 정의
- src/lib/db.ts — nanoid 기반 ID 생성
- 각 라우트 파일 stub 생성 완료, 타입체크 통과
v3 — API 라우트 구현 완료
- cats.ts: 고양이 프로필 CRUD (GET/POST/PUT/DELETE) + Zod 검증
- weights.ts: 체중 기록 (GET/POST/DELETE)
- vaccinations.ts: 접종 기록 CRUD (GET/POST/PUT/DELETE)
- medical.ts: 진료 기록 CRUD (GET/POST/PUT/DELETE) + 비용 필드
- medications.ts: 투약 기록 CRUD (GET/POST/PUT/DELETE) + 활성/비활성
- 모든 라우트에 Zod 입력 검증 적용
- Phase 1: user_id = 'default' 고정 (단일 사용자 모드)
- 전체 타입체크 통과
Files (1)
plan.md
v2 2026-02-25 7ef6038
API 프로젝트 셋업
- · api/ 디렉토리에 Hono + D1 프로젝트 생성
- · package.json (hono, nanoid, zod, wrangler, typescript)
- · wrangler.toml에 D1 바인딩(CAT_DB) 설정
- · schema.sql에 5개 테이블 정의 (cats, weight_records, vaccinations, medical_records, medications)
- · src/index.ts — Hono 앱 + CORS + 라우트 마운트
- · src/env.ts — Env 타입 정의
- · src/lib/db.ts — nanoid 기반 ID 생성
- · 각 라우트 파일 stub 생성 완료, 타입체크 통과
Detail
cat-health-log
Product Idea
고양이 집사를 위한 건강기록 관리 앱. 접종 일정, 체중 변화, 진료 기록, 투약 알림 등을 한곳에서 관리할 수 있는 모바일 친화적 웹앱. 다묘 가정도 지원하며, 수의사 방문 전 기록을 한눈에 정리해서 보여줄 수 있다.
Additional Context
주요 타겟은 한국의 고양이 집사. UI는 따뜻하고 귀여운 톤. 모바일 퍼스트로 설계하되 데스크톱도 지원. 고양이별로 아바타 색상을 다르게 해서 구분 쉽게.
Features
Phase 1 (MVP)
- 고양이 프로필 관리 (이름, 품종, 생년월일, 색상)
- 체중 기록 및 변화 그래프 (recharts)
- 접종 기록 및 다음 접종일 표시
- 진료 기록 (날짜, 병원, 증상, 진단, 비용)
- 투약 스케줄 및 활성/비활성 관리
- 다묘 가정 지원 (고양이별 카드 전환)
- 모바일 하단 탭 네비게이션
Phase 2 (추후)
- Supabase Auth 연동 (카카오 + 구글 로그인)
- R2 사진 업로드
- 기록 내보내기 (PDF로 수의사에게 전달)
- PWA + 오프라인 지원
- 푸시 알림
Tech Stack
- API: Cloudflare Workers + Hono + D1 (SQLite) + Zod
- Web: Vite + React + TypeScript + Tailwind CSS + shadcn/ui + recharts
- ID 생성: nanoid
- 배포: Cloudflare Workers (API) + Cloudflare Pages (Web)
- 인증: Phase 1은 단일 사용자 모드, Phase 2에서 Supabase Auth
Architecture
cat-health-log/
├── api/ ← Cloudflare Workers + Hono + D1
│ ├── src/
│ │ ├── index.ts ← Hono 앱, CORS, 라우트 마운트
│ │ ├── env.ts ← Env 바인딩 타입 (D1)
│ │ ├── routes/
│ │ │ ├── cats.ts ← 고양이 프로필 CRUD
│ │ │ ├── weights.ts ← 체중 기록
│ │ │ ├── vaccinations.ts ← 접종 기록
│ │ │ ├── medical.ts ← 진료 기록
│ │ │ └── medications.ts ← 투약 기록
│ │ └── lib/
│ │ └── db.ts ← nanoid, D1 헬퍼
│ ├── schema.sql ← D1 테이블 정의
│ └── wrangler.toml ← D1 바인딩 설정
├── web/ ← Vite + React SPA (Cloudflare Pages)
│ ├── src/
│ │ ├── App.tsx ← React Router
│ │ ├── pages/ ← 6개 페이지
│ │ ├── components/ ← UI 컴포넌트
│ │ └── lib/ ← API 클라이언트, 타입
│ └── vite.config.ts
└── .pmpt/
D1 Schema
5개 테이블: cats, weight_records, vaccinations, medical_records, medications
- 모든 PK는 TEXT (nanoid)
- cat_id FK로 고양이별 데이터 분리
- ON DELETE CASCADE로 고양이 삭제 시 관련 기록 자동 삭제
Progress
- 제품 기획 및 기술 스택 결정
- API 프로젝트 셋업 (Hono + D1 + wrangler.toml)
- D1 스키마 작성 (5개 테이블)
- API 라우트 구현 (cats, weights, vaccinations, medical, medications)
- Web 프로젝트 셋업 (Vite + React + Tailwind + shadcn/ui)
- Web 페이지 구현 (Home, CatProfile, WeightLog, Vaccinations, Medical, Medications)
- 체중 변화 그래프 (recharts)
- 모바일 하단 탭 네비게이션
- 로컬 테스트 (API + Web)
- Cloudflare 배포 (Workers + Pages)
Snapshot Log
v1 — 기획 완료
- 제품 아이디어, 기능 목록, 기술 스택 확정
- Cloudflare Workers + Hono + D1 아키텍처 결정
- Vite + React SPA 프론트엔드 구조 설계
v2 — API 프로젝트 셋업
- api/ 디렉토리에 Hono + D1 프로젝트 생성
- package.json (hono, nanoid, zod, wrangler, typescript)
- wrangler.toml에 D1 바인딩(CAT_DB) 설정
- schema.sql에 5개 테이블 정의 (cats, weight_records, vaccinations, medical_records, medications)
- src/index.ts — Hono 앱 + CORS + 라우트 마운트
- src/env.ts — Env 타입 정의
- src/lib/db.ts — nanoid 기반 ID 생성
- 각 라우트 파일 stub 생성 완료, 타입체크 통과
Files (1)
plan.md
v1 2026-02-25 7ef6038
기획 완료
- · 제품 아이디어, 기능 목록, 기술 스택 확정
- · Cloudflare Workers + Hono + D1 아키텍처 결정
- · Vite + React SPA 프론트엔드 구조 설계
Detail
cat-health-log
Product Idea
고양이 집사를 위한 건강기록 관리 앱. 접종 일정, 체중 변화, 진료 기록, 투약 알림 등을 한곳에서 관리할 수 있는 모바일 친화적 웹앱. 다묘 가정도 지원하며, 수의사 방문 전 기록을 한눈에 정리해서 보여줄 수 있다.
Additional Context
주요 타겟은 한국의 고양이 집사. UI는 따뜻하고 귀여운 톤. 모바일 퍼스트로 설계하되 데스크톱도 지원. 고양이별로 아바타 색상을 다르게 해서 구분 쉽게.
Features
Phase 1 (MVP)
- 고양이 프로필 관리 (이름, 품종, 생년월일, 색상)
- 체중 기록 및 변화 그래프 (recharts)
- 접종 기록 및 다음 접종일 표시
- 진료 기록 (날짜, 병원, 증상, 진단, 비용)
- 투약 스케줄 및 활성/비활성 관리
- 다묘 가정 지원 (고양이별 카드 전환)
- 모바일 하단 탭 네비게이션
Phase 2 (추후)
- Supabase Auth 연동 (카카오 + 구글 로그인)
- R2 사진 업로드
- 기록 내보내기 (PDF로 수의사에게 전달)
- PWA + 오프라인 지원
- 푸시 알림
Tech Stack
- API: Cloudflare Workers + Hono + D1 (SQLite) + Zod
- Web: Vite + React + TypeScript + Tailwind CSS + shadcn/ui + recharts
- ID 생성: nanoid
- 배포: Cloudflare Workers (API) + Cloudflare Pages (Web)
- 인증: Phase 1은 단일 사용자 모드, Phase 2에서 Supabase Auth
Architecture
cat-health-log/
├── api/ ← Cloudflare Workers + Hono + D1
│ ├── src/
│ │ ├── index.ts ← Hono 앱, CORS, 라우트 마운트
│ │ ├── env.ts ← Env 바인딩 타입 (D1)
│ │ ├── routes/
│ │ │ ├── cats.ts ← 고양이 프로필 CRUD
│ │ │ ├── weights.ts ← 체중 기록
│ │ │ ├── vaccinations.ts ← 접종 기록
│ │ │ ├── medical.ts ← 진료 기록
│ │ │ └── medications.ts ← 투약 기록
│ │ └── lib/
│ │ └── db.ts ← nanoid, D1 헬퍼
│ ├── schema.sql ← D1 테이블 정의
│ └── wrangler.toml ← D1 바인딩 설정
├── web/ ← Vite + React SPA (Cloudflare Pages)
│ ├── src/
│ │ ├── App.tsx ← React Router
│ │ ├── pages/ ← 6개 페이지
│ │ ├── components/ ← UI 컴포넌트
│ │ └── lib/ ← API 클라이언트, 타입
│ └── vite.config.ts
└── .pmpt/
D1 Schema
5개 테이블: cats, weight_records, vaccinations, medical_records, medications
- 모든 PK는 TEXT (nanoid)
- cat_id FK로 고양이별 데이터 분리
- ON DELETE CASCADE로 고양이 삭제 시 관련 기록 자동 삭제
Progress
- 제품 기획 및 기술 스택 결정
- API 프로젝트 셋업 (Hono + D1 + wrangler.toml)
- D1 스키마 작성 (5개 테이블)
- API 라우트 구현 (cats, weights, vaccinations, medical, medications)
- Web 프로젝트 셋업 (Vite + React + Tailwind + shadcn/ui)
- Web 페이지 구현 (Home, CatProfile, WeightLog, Vaccinations, Medical, Medications)
- 체중 변화 그래프 (recharts)
- 모바일 하단 탭 네비게이션
- 로컬 테스트 (API + Web)
- Cloudflare 배포 (Workers + Pages)
Snapshot Log
v1 — 기획 완료
- 제품 아이디어, 기능 목록, 기술 스택 확정
- Cloudflare Workers + Hono + D1 아키텍처 결정
- Vite + React SPA 프론트엔드 구조 설계
Files (1)
plan.md