새로운 센서 지표를 타입·대시보드 카드·백엔드 엔티티 전체에 걸쳐 일관되게 추가한다
새로운 센서 지표를 SmartPool 프로젝트 전체(프론트엔드 타입 → 대시보드 카드 → 백엔드 엔티티)에 걸쳐 일관되게 추가한다.
| 항목 | 예시 |
|---|---|
| 센서 한글 이름 | 탁도 |
| 필드명 (camelCase) | turbidity |
| 단위 | NTU |
| 정상 범위 | 0 – 5 |
| lucide-react 아이콘 이름 | Droplets |
| Java 타입 | double |
입력이 누락된 경우 파일을 수정하기 전에 먼저 질문한다.
파일: src/types/index.ts
SensorReading 인터페이스에 필드를 추가한다.
// 예시: turbidity 추가
export interface SensorReading {
// ... 기존 필드 ...
turbidity: number; // 탁도 (NTU)
}
Mock 데이터도 함께 업데이트한다 (src/context/SensorContext.tsx 내 MOCK_SENSOR 상수).
정상 범위 중간값을 mock 값으로 사용한다.
파일: src/lib/api.ts
sensors.current() 반환 타입이 SensorReading을 사용하므로 별도 수정 불필요.
단, history endpoint가 새 필드를 포함해야 한다면 TemperatureHistoryPoint 타입도 확인한다.
파일: src/components/dashboard/[Name]Card.tsx
(예: TurbidityCard.tsx)
기존 카드(예: WaterLevelCard.tsx)를 참고해 MetricCard를 래핑한다.
'use client';
import { MetricCard } from '@/components/dashboard/MetricCard';
import { Droplets } from 'lucide-react'; // 아이콘 교체
import { useSensor } from '@/context/SensorContext';
export function TurbidityCard() {
const { sensorData } = useSensor();
const value = sensorData?.turbidity;
return (
<MetricCard
title="탁도"
value={value !== undefined ? `${value.toFixed(1)} NTU` : '—'}
icon={<Droplets className="h-4 w-4" />}
description="정상 범위: 0 – 5 NTU"
/>
);
}
상태 표시(정상/경고)가 필요하다면 status prop과 함께 값에 따른 분기를 추가한다.
파일: src/app/(app)/dashboard/page.tsx
import { TurbidityCard } from '@/components/dashboard/TurbidityCard';
// JSX 그리드 안에 추가
<TurbidityCard />
기존 카드 배치 순서(수질 관련 카드 그룹)에 맞춰 삽입한다.
파일: backend/src/main/java/com/smartpool/domain/SensorReading.java
@Column(nullable = false)
private double turbidity; // 탁도 (NTU)
필드는 알파벳 순 또는 기존 필드 그룹 끝에 추가한다.
FiltrationInfo에 속하는 값이라면 SensorReading.java 대신
backend/src/main/java/com/smartpool/domain/FiltrationInfo.java에 추가한다.
파일: backend/src/main/java/com/smartpool/dto/SensorReadingResponse.java
SensorReadingResponse가 SensorReading 엔티티를 직접 참조하는 record이면 자동으로 포함된다.
별도로 projection 필드를 나열하는 경우 해당 필드를 추가한다.
npm run typecheck
오류가 없으면 완료. 오류가 있으면 메시지를 읽고 해당 파일만 수정한다.
SensorReading 인터페이스에 필드 추가됨MOCK_SENSOR에 mock 값 추가됨npm run typecheck 통과TextWebSocketHandler 방식이다.MqttSubscriber.java에 구독을 추가하고 application.properties에 토픽 키를 등록한다.spring.jpa.hibernate.ddl-auto=update로 자동 반영된다. 마이그레이션 파일 불필요.lucide-react에서 import한다. 존재하지 않는 아이콘 이름은 사용하지 않는다.