목록으로 돌아가기
모터 드라이버 설정 시스템
로봇 및 모터 제어 엔지니어를 위한 웹 기반 모터 드라이버 설정 및 파라미터 튜닝 시스템
QR 코드 또는 제품명으로 디바이스를 연결하고 다양한 제어기를 설계할 수 있습니다.
1 / 6
담당 역할
기획디자인프론트엔드백엔드
기술 스택
React 18
Vite
Ant Design
styled-components
Plotly.js
i18next
React Router
주요 기능
- 디바이스 연결: QR 코드 스캔 또는 제품명/모델 번호로 모터 드라이버 연결
- 제어기 설계 마법사: 기본/고급 제어기를 단계별 UI로 파라미터 설정 및 검증
- 실시간 데이터 시각화: Plotly.js 기반 주파수 응답, 마찰 특성 등 그래프 표시
- 다국어 지원: 한국어/영어 실시간 언어 전환
- 센서 및 인코더 설정: 홀 센서, 절대/증분 인코더 등 다양한 센서 타입 설정
수행 업무
- 복합 단계 UI 패턴: Steps 컴포넌트와 상태 관리를 활용해 7단계 고급 제어기 설계 마법사 구현
- 반응형 레이아웃: Ant Design Grid breakpoint를 활용해 태블릿/데스크탑 화면에 최적화된 복잡한 폼 레이아웃 구현
- 커스텀 테마 시스템: styled-components ThemeProvider와 Ant Design ConfigProvider를 결합한 일관된 디자인 시스템
- Plotly.js 차트 통합: 동적 데이터 소스와 커스텀 스타일링이 적용된 인터랙티브 라인 차트 컴포넌트 개발
- 다국어 아키텍처: i18next 네임스페이스 기반 번역 구조로 모듈별 언어 파일 분리 및 관리
- 재사용 가능한 컴포넌트 체계: SectionContainer, GroupHeader 등 일관된 UI 패턴을 위한 컴포넌트 라이브러리 구축
#모터 제어
#산업용 소프트웨어
#React
#데이터 시각화
#다국어
#설정 대시보드