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 배포 완료

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로 마이그레이션 예정)
• 빌드 성공 확인

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 삭제 정상 동작 확인 (고양이 삭제 시 관련 기록 자동 삭제)

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 빌드 모두 성공

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 변수 설정
• 빌드 성공 확인

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' 고정 (단일 사용자 모드)
• 전체 타입체크 통과

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 생성 완료, 타입체크 통과

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 프론트엔드 구조 설계