Web — SSORRY 관제 대시보드

판정 근거를 제시하는 사과 선별 시스템

로봇팔이 사과를 집어 판정하는 과정을 실시간으로 보여주고, 등급과 그 근거 수치, 누적 통계, 로봇 제어를 한 화면에 모은 대시보드입니다.

---

화면

경로	화면
/	랜딩 페이지
/dashboard	실시간 관제 대시보드

대시보드

섹션	구성
실시간	카메라 영상(위 · 손목 전환, 실시간 사과 박스) · 해당 사과 정보(등급 · 빨강 비율 · 흠 비율) · 평균 신뢰도 · 미션 진행 · 로봇 이벤트
통계	등급별 사과 개수 · 처리 현황(사이클 타임) · 떨어뜨린 사과
분석	판정 이력 · 회차 기록 · 브라우저 백업 · AI 분석

헤더에는 연결 상태와 비상정지 버튼이, 미션 진행 카드에는 시작 · 정지 버튼이 있습니다.

주요 기능

판정 근거 표시

등급만 보여주지 않고 판정에 쓴 수치를 함께 보여줍니다.

값	의미
빨강 비율 / 기준	사과 표면의 빨강 비율과 상 등급 기준 (0.5)
흠 비율 / 기준	어두운 점 비율과 기준
신뢰도	기준에서 떨어진 정도를 0.5 ~ 1.0으로 환산 (확률 아님)

안전

• 미션 중 카메라 · 로봇팔 이상이 10초 넘게 이어지면 자동으로 비상정지를 보냅니다
• 비상정지 화면에서 원인을 보여주고, 확인을 거쳐서만 해제합니다
• 로봇 프로그램에 연결되지 않으면 비상정지 버튼에 '연결 끊김'을 표시합니다

CSV 내보내기

종류	내용
회차별 CSV	회차 기록에서 회차 하나의 판정 이력
전체 CSV	서버에 남은 모든 회차
브라우저 백업 CSV	이 브라우저 IndexedDB 에 쌓아 둔 판정 기록

엑셀에서 바로 열 수 있게 열 이름은 한글(회차 · 시각 · 등급 · 신뢰도 · 빨강 비율 · 흠 비율 · 떨어뜨림 · 카메라), 시간은 한국 시간, 참/거짓은 예/아니오로 바꿔 저장합니다.

AI 분석

이번 회차 통계와 최근 판정, 미션 상태를 바탕으로 세 가지 항목을 동시에 요청하고, 오는 대로 채웁니다.

항목	내용
등급 분포 분석	상 · 중 · 하 분포, 빨강 비율 · 신뢰도 경향
낙하 · 멍 상태 확인	떨어뜨린 사과와 멍 비율이 높은 사과, 품질 영향
작업 개선 조언	파지 실패 · 건너뜀 · 떨어뜨림 · 사이클 타임 기반 개선점

조언은 서버의 POST /advice 가 생성합니다. 회차가 바뀌면 결과를 비웁니다.

기술 스택

영역	스택
빌드	Vite
프레임워크	React 19 + TypeScript (React Compiler)
스타일	Tailwind CSS 4 · Pretendard
라우팅	React Router
애니메이션	GSAP
통신	네이티브 WebSocket · fetch
로컬 저장	IndexedDB

Next.js 대신 Vite 를 쓴 이유는 로컬 네트워크 실시간 모니터링 화면이라 SSR · SEO 가 필요 없고, 짧은 개발 기간에 개발 서버 속도가 실질적인 차이를 만들기 때문입니다.

실행

npm install
cp .env.example .env.local   # API_TARGET 을 서버 주소로
npm run dev                  # http://localhost:5173

백엔드 연결

API_TARGET=http://<로봇 PC IP>:8000

브라우저는 항상 개발 서버(localhost:5173)와만 통신하고, 개발 서버가 API 경로와 /ws 를 위 주소로 프록시합니다. 서버 세션 쿠키가 SameSite=Lax 라서 브라우저가 서버 IP 를 직접 부르면 쿠키가 붙지 않기 때문입니다. 프론트 코드는 항상 상대 경로만 씁니다. .env.local 을 바꾸면 개발 서버를 다시 띄웁니다.

배포

방식	방법
로봇 PC 에서 서빙	npm run build 결과를 서버 저장소의 frontend-dist/ 에 넣으면 서버가 / 에서 서빙
Vercel	VITE_API_BASE 에 API 주소를 넣고 배포. vercel.json 이 SPA 라우팅 처리

관련 저장소

• Server — 영상 · 판정 · 제어 API
• Piper — 로봇팔 제어 · 비전

팀

암쏘사과 · 대구소프트웨어마이스터고등학교

이름	담당
이도건	대시보드, 로봇팔 제어
김준현	비전, 데이터 처리