1. 금주진행사항

관리자 종합 대시보드 및 차트 시각화 기능 고도화

• 기능 정의: 기존에 표와 숫자 텍스트로만 제공되던 딱딱한 ‘판매 실적 리포트’ 데이터를 점주가 한눈에 파악할 수 있도록, Chart.js를 활용하여 직관적이고 세련된 형태의 종합 대시보드로 개편.
• 핵심 기술 적용:
  • Chart.js 라이브러리 연동 (script.js): 프론트엔드에 Chart.js를 도입하여, 백엔드(/api/analysis/daily)에서 받아온 데이터를 기반으로 캔버스(<canvas>)에 동적 차트를 렌더링. 날짜 변경 시 기존 차트 인스턴스를 안전하게 메모리 해제(destroy())하고 새 차트를 그리는 안정성 로직 구현.
  • 데이터 시각화 고도화 (누적 막대 차트 & 원형 차트):
    • 판매 vs 폐기 현황 (막대 차트): 초기 일반 막대 그래프 적용 시, 값이 0인 데이터의 빈 공간 때문에 X축 라벨(상품명)과 막대 위치가 어긋나 보이는 시각적 오류 발생. 이를 누적 막대 그래프(Stacked Bar Chart) 로 변경하고 최대 굵기와 중앙 정렬 옵션을 세밀하게 조정하여 가독성 및 매칭 정확도를 100%로 끌어올림.
    • 상품별 매출 기여도 (원형/도넛 차트): 11주차에 완성한 ‘마감할인 결제가(sale_price)’ 데이터를 총합산하여, 당일 전체 매출에서 각 상품군이 차지하는 비중을 도넛형 차트로 직관적으로 표현.
  • 직관적 UI/UX 설계 (index.html): 대시보드 상단에 그날의 ‘당일 총 매출액’을 보여주는 요약 카드 UI를 배치하여, 관리자용 시스템으로서의 완성도를 높임.

2. 실무 시나리오 테스트 결과

• 시나리오 구성: 차트 시각화의 정확성과 시각적 완성도를 확인하기 위해, 기존 판매 데이터에 **추가 모의 판매 데이터(더큰참치마요 A 1건, 숯불갈비버거 2건, 아이돌유닛샌드위치 1건)**를 주입하여 볼륨을 키운 후 테스트 진행.
• 시스템 피드백 및 검증:
  • 판매량과 폐기량이 혼재된 데이터 환경에서도 막대 차트가 X축 상품명 정중앙에 올바르게 위치함을 확인함.
  • 할인가(700원, 1800원 등)가 적용된 결제 금액들이 도넛 차트 비중에 정확하게 백분율로 반영되며, 당일 총 매출액 카드에도 누락 없이 합산 표기됨을 검증 완료.

3. 향후계획

• 완성된 대시보드와 기능들을 바탕으로 실제 모바일 기기(스마트폰) 연동 테스트를 진행하고, 현장 작업자의 시각에서 발생할 수 있는 UI/UX 불편 사항이나 프론트엔드 버그를 발굴하여 시스템을 더욱 고도화할 예정