스마트팜 모니터링 앱 UI·UX 리디자인

농장주가 첫 화면에서 동별 온도·습도·CO2 현재값과 오늘 관수 일정, 확인이 필요한 경고를 한 번에 봅니다.

• SSE 스트림으로 센서 값을 받아 값이 바뀐 카드만 다시 그리는 구조 설계
• 동·센서 단위 카드를 Flutter 위젯 트리와 1:1로 대응하는 컴포넌트로 분리
• 정상·주의·위험 3단계 상태를 한 곳의 매핑 표로 관리해 모든 화면에서 같은 색 적용

센서 값의 갱신 시각과 상태 등급을 하나의 데이터 모델로 묶어, 대시보드·기록·알림 화면이 같은 값을 읽는 구조를 구현합니다.

기간(일·주·월)을 고르고 온도·습도·CO2 추이를 차트와 표로 비교하며 이상 구간을 찾습니다. 기간 탭, 항목 겹쳐 보기, 한 점 선택 시 값 상세, 표 내려받기 구조를 설계합니다.

• SVG로 직접 그린 선 차트에 기준선(적정 범위)과 이탈 구간 음영 표시 구현
• 기간별 집계(시간 평균·일 평균)를 서버 쿼리로 나눠 차트 점 개수를 일정하게 유지
• 차트와 표가 같은 선택 상태를 공유해 한 점을 누르면 해당 행이 강조되는 구조 설계

기간을 바꿔도 차트 점 개수가 일정하도록 서버 집계 단위를 자동 선택하는 쿼리 구조를 설계합니다.

심각도별로 알림을 거르고 경고 상세에서 원인 센서와 최근 값을 보며 확인 처리합니다. 심각도 칩 필터, 경고 상세 대화상자, 확인 처리와 되돌리기, 읽음 상태 동기화 구조를 설계합니다.

• 심각도 3단계(주의·위험·복구)를 알약과 정렬 순서에 일관되게 적용하는 상태 모델 설계
• 확인 처리 시 목록에서 바로 반영하고 되돌리기 토스트를 제공하는 낙관적 갱신 구현
• 경고 상세에서 원인 센서의 최근 24시간 값을 작은 차트로 함께 표시하는 구조 설계

경고 발생부터 확인 처리까지의 상태 전이를 하나의 상태 머신으로 정의해 목록·상세·대시보드 배지가 항상 같은 상태를 보이도록 구현합니다.

농장주가 화면 사용 중 불편한 점이나 제안을 분류와 함께 남기고 접수 내역을 확인합니다. 분류 선택, 입력 검사, 접수 완료 상태, 내 피드백 목록의 처리 단계 표시 구조를 설계합니다.

• 제출 시점에 검사하고 틀린 칸 아래에 고치는 방법을 한 줄로 안내하는 폼 검증 구현
• 접수·검토·반영 3단계 처리 상태를 내 피드백 목록에 같은 알약으로 표시
• 스크린샷 첨부 미리보기와 첨부 용량 검사를 Multer 업로드 API와 연결해 설계

피드백 접수부터 처리 단계 표시까지 하나의 API 모델로 연결해, 작성 화면과 내역 화면이 같은 상태값을 읽도록 구현합니다.