프로젝트 개요

사내 물류 관리에 필요한 발주, 외환관리, 배송대행, 공급사 관리 등을 처리하는 통합 물류 관리 시스템의 리뉴얼 프로젝트입니다. 기존 시스템의 사용성을 개선하고, Next.js와 TypeScript 기반으로 전면 재구축했습니다.

본 프로젝트에서 프론트엔드를 전담하며, 재사용 가능한 컴포넌트 설계와 효율적인 상태 관리에 집중했습니다.

주요 역할 및 기여

프론트엔드 전담 개발

• Next.js 기반 전체 프론트엔드 아키텍처 구축
• 발주, 외환, 배송, 공급사 관리 등 복잡한 도메인 UI 구현
• Recoil과 SWR을 활용한 효율적인 상태 및 데이터 관리

재사용 가능한 UI 시스템 구축

• Toast와 Tooltip 전역 상태 관리

  • Recoil 기반 커스텀 훅으로 통합 관리
  • 컴포넌트 어디서든 일관된 방식으로 Toast/Tooltip 호출 가능
  • 코드 중복 제거 및 사용 편의성 향상

• 복잡한 UI 컴포넌트 직접 구현

  • 드롭다운 및 캘린더 컴포넌트를 외부 라이브러리 없이 직접 구현

설계 패턴을 통한 코드 품질 향상

• VAC(View Asset Component) 패턴 적용
  • 반복되는 검색 UI를 VAC 패턴으로 추상화
  • 일관성과 재사용성을 동시에 확보
  • UI 로직과 비즈니스 로직 분리로 유지보수성 향상

기술적 도전 및 성과

1. 전역 UI 상태 관리 최적화

Recoil 기반 Toast/Tooltip 커스텀 훅

• 전역 상태로 Toast와 Tooltip을 관리하여 컴포넌트 간 일관성 확보
• useToast(), useTooltip() 같은 간단한 훅으로 어디서든 호출 가능
• 중복 코드 제거 및 개발 생산성 향상

// 사용 예시
const { showToast } = useToast()
showToast({ message: '저장되었습니다', type: 'success' })

2. VAC 패턴을 통한 일관성 확보

검색 UI의 체계적인 추상화

• 검색 폼, 필터, 결과 테이블 등 반복되는 UI를 VAC로 분리
• View(UI)와 Asset(로직)을 명확히 구분
• 새로운 검색 페이지 추가 시 개발 시간 단축

3. 도메인별 SWR 커스텀 훅 설계

일관된 API 구조 및 재사용성

• 각 도메인(발주, 외환, 배송, 공급사)별로 SWR 훅 구성
• 공통 로직(로딩, 에러 처리, 캐싱)을 훅 레벨에서 처리
• API 호출 패턴의 일관성 확보 및 중복 코드 제거

// 도메인별 커스텀 훅 예시
const { data, error, mutate } = useOrders(params)
const { data: suppliers } = useSuppliers()

4. 커스텀 UI 컴포넌트 구현

드롭다운 & 캘린더 직접 구현

• 외부 라이브러리 의존성 없이 프로젝트 요구사항에 최적화된 구현
• 복잡한 상태 관리 및 이벤트 핸들링 직접 제어
• 번들 크기 최소화 및 성능 최적화

기술 스택

• Frontend: Next.js, TypeScript, Sass, Recoil, SWR