Project · 2024 · Development
MoviqAI ERP
1/3
- Duration
- 2024.07 — 진행 중
- Role
- 프론트엔드 개발 · 개발팀
- Skills / Tools
- ReactTypeScriptStorybookFigmaCustom Hooks
- Related Link
- main1.moviqai.com
Key Accomplishment
- 화면마다 누적된 UI 구현 편차를 정리하기 위해 리뉴얼 시안을 직접 작업하고 Storybook·Figma로 컴포넌트 기준을 단일화 — 스펙 합의 단계 단축
- 목록 조회·클라이언트 데이터 필터의 화면별 중복 로직을 공통 커스텀 훅으로 추출 — 수정 지점을 한 곳으로 축소하여 유지보수 난이도 개선
- 레거시 JS → TS 점진적 마이그레이션 — 강하게 결합된 Presenter/Container 패턴을 함수형 컴포넌트와 커스텀 훅 패턴으로 단계별 전환
- LLM과 Cursor로 랜딩페이지·내부 CS 관리 도구를 기획부터 배포까지 단독 구현, 현재까지 정상 운영 중
Architecture
디자인 기준을 공통 컴포넌트로 구현하고, 커스텀 훅을 거쳐 물류 업무 화면에 연결하는 구조입니다.
Technical Challenges
- 화면마다 달랐던 입력·조회 로직과 Presenter/Container 결합을 공통 커스텀 훅과 함수형 컴포넌트로 점진적으로 분리했습니다.
- 디자인 변경이 개발 화면마다 다르게 해석되지 않도록 Figma와 Storybook을 기준점으로 삼아 UI 스펙과 구현을 함께 관리했습니다.
Details
택배, 주문, 재고 관리 등 물류 운영을 위한 Fulfillment 기능을 제공하는 ERP 웹 서비스입니다. Home-in Fulfillment System(ERP)의 프론트엔드를 담당하며, AI 에이전트를 개발 프로세스에 편입시키고 제품에 AI 어시스턴트를 도입하는 작업을 주도하고 있습니다.
Storybook·Figma 기반 자체 디자인 시스템을 구축·운영하고, 조회 UI 내부 입력 핸들링 로직을 커스텀 훅으로 공통화하여 코드 퀄리티를 개선했습니다. 디자이너 출신의 관점으로 리뉴얼을 고도화하며 스펙 합의 단계를 줄였습니다.
레거시 ERP 프론트엔드 리빌딩, AI 에이전트 E2E 테스트 자동화 대시보드 구축, 사내 AI 어시스턴트 및 문서 검색 계층 도입을 요구사항 정의부터 구현까지 주도했습니다.