프로젝트 한눈에 보기
오알켐 MES 리뉴얼
쉽게 말하면
Vue 3 + Vite 기반으로 제조 현장의 MES를 리뉴얼했습니다. Vue Router / Pinia / Axios / Vue I18n 구조 위에서 업무 화면을 구성하고, 반복 화면을 공통 컴포넌트로 묶어 AG Grid 테이블 UX와 태블릿 사용성을 끌어올렸습니다.
Vue 3 / Vite / JavaScript / SCSS / HTML / Vue Router / Pinia / Axios / Vue I18n / AG Grid / Chart.js / flatpickr / marked
01 / PROJECT NOTE
제가 맡고 끝까지 책임진 일
완성 화면만 나열하지 않았습니다. 왜 그렇게 만들었고 어떤 변화를 남겼는지 차례대로 설명합니다.
문제를 이렇게 풀었습니다
- Vue Router / Pinia / Axios / Vue I18n 구조에 맞춰 MES 업무 화면 퍼블리싱 / 구성
- 공통 컴포넌트(AppGrid / AppInput / AppSelect / AppButton / AppAccordion / AppModalHost)를 활용 / 개선해 화면 간 UI 일관성 확보
- 원재료 준비 / 중간 검사 / 검사 결과 / 태블릿 화면의 레이아웃과 인터랙션 개선
- AG Grid 검색 / 선택 / 삭제 / 칩 렌더링 / 조건부 스타일 / 엑셀 다운로드 / 행/헤더 높이까지 테이블 동작 정리
- 태블릿 환경의 버튼 / 카드 / 아코디언 / 그리드 반응형 / 터치 UI 개선
- API 응답 / 다국어 키를 안정적으로 반영하도록 props / 상태값 / 이벤트 처리 구조 정리
그래서 실제로 달라진 점
- 반복되는 MES 화면을 공통 컴포넌트 중심으로 정리해 유지보수성 향상
- AG Grid 테이블의 검색 / 선택 / 렌더 / 다운로드 구조를 표준화해 프로젝트 전반의 확장성 / 재사용성 확보
- 퍼블리싱과 프론트엔드 개발 사이 연결성을 높여 협업 효율 개선
이 프로젝트에서 눈여겨볼 점
- AG Grid 테이블 UX 표준화
- 태블릿 업무 UI 대응
- Vue 3 + Vite 구조 연동
02 / SCREENS
화면으로 확인하기
말보다 화면이 빠를 때가 있습니다. 실제 결과물에서 구현의 디테일을 확인해 보세요.
