풀스택

모바일 초대장 프로젝트 (수정)

관리자 대시보드에 신규 주문이 안 뜨던 버그, 원인은 "베이직 플랜"이었다

문제 상황

"주문이 들어왔는데 대시보드에는 적용이 안되는거야"

실사용 중에 이런 제보를 받았습니다. 고객이 청첩장을 주문했는데, 관리자 대시보드(첫 화면)에는 그 주문이 전혀 반영되지 않는 현상이었어요.

원인 분석

관리자 대시보드(HomePage.tsx)를 뜯어보니, 대시보드는 /api/basic-customers와 /api/permanent-customers 두 API만 조회하고 있었습니다. 정작 실제 주문이 쌓이는 /api/orders(주문 테이블)는 아예 조회하지 않고 있었던 거죠.

여기에 더 근본적인 구조 문제가 있었습니다:

• 새 주문이 들어오면 orders 테이블엔 무조건 저장됩니다.
• 그런데 스탠다드/프리미엄 플랜은 주문과 동시에 permanent_customers가 즉시 생성되는 반면,
• 베이직 플랜(가장 흔하게 선택되는 기본 플랜)은 관리자가 주문 상세 페이지에서 "청첩장 생성 및 공개" 버튼을 직접 눌러야만 basic_customers가 생성되는 구조였습니다.

즉, 베이직 플랜 주문이 들어오면 관리자가 그 주문을 열어서 게시 버튼을 누르기 전까지는:

• 전체 고객 수
• 이번 달 신규 고객
• 최근 등록 고객
• 이번 달 예상 매출

이 어느 지표에도 전혀 반영되지 않고 있었습니다. "주문 관리" 페이지에는 이미 정상적으로 떠 있었지만, 정작 관리자가 매일 보는 대시보드 첫 화면은 그대로였던 것이 문제의 핵심이었습니다.

수정 내용

1. HomePage.tsx: /api/orders?limit=1000도 함께 조회하도록 추가
2. 신규 스탯 카드 "미처리 신규 주문" 추가 — orders.status가 pending/edit_submitted인 건수를 집계, 0보다 크면 주황색으로 강조 표시
3. 신규 섹션 "최근 주문 접수" 추가 — 게시 여부와 무관하게 orders 테이블 원본을 최신순 5건 노출, 클릭하면 바로 주문 상세로 이동
4. "이번달 예상 매출" 계산 기준 변경 — 기존엔 basic_customers 기준이라 게시가 늦어지면 매출 추정에서 누락되거나 엉뚱한 달로 집계될 위험이 있었는데, orders 테이블 기준으로 바꿔서 접수 즉시 반영되도록 수정
5. functions/api/orders/index.ts: GET /api/orders의 limit 상한을 200 → 1000으로 상향 (고객 API들과 기준 통일, 대시보드가 이번 달 주문을 놓치지 않도록)
6. types.ts: 그동안 OrdersPage.tsx에만 로컬로 있던 Order 타입을 공용 타입으로 추가

검증

• npm run build(tsc -b && vite build), npx eslint src functions 둘 다 0건
• 로컬 D1(wrangler pages dev --local, 프로덕션 DB 미접촉)로 실제 시나리오 재현:
  1. 기존 고객 2명(베이직 1·스탠다드 1)만 있는 상태 → "미처리 신규 주문" 0, "최근 주문 접수" 비어있음 확인
  2. 실제 주문 웹훅으로 베이직 플랜 신규 주문 1건 접수(관리자가 게시하지 않은 상태)
  3. 대시보드 재로딩 → "미처리 신규 주문" 0→1(주황 강조), "이번달 예상 매출" 35,000→52,000원, "최근 주문 접수"에 즉시 노출 확인
  4. 대시보드에서 주문 클릭 → 상세 페이지 정상 이동, 기존 "주문 관리" 페이지도 정상 표시(회귀 없음)
• 테스트에 쓴 로컬 D1/KV 상태는 정리 완료, 프로덕션 데이터는 전혀 접촉하지 않음

한 줄 요약

가장 많이 팔리는 베이직 플랜 주문이 "게시"라는 수동 단계를 거치기 전까지는 대시보드 어디에도 안 보이던 구조적 사각지대를 찾아 메웠습니다. 이제 주문이 들어오는 즉시 대시보드에서 확인할 수 있습니다.