1. 프로젝트 개요

본 프로젝트는 React 기반의 차세대 물류 관리 시스템(WMS)으로, 복잡한 물류 이동 및 창고 관리 프로세스를 시각적으로 명확하게 표현하는 것을 목표로 합니다. Next.js 14의 App Router와 gantt-task-react 라이브러리를 활용하여 실시간 Gantt 차트 기반의 직관적인 UI를 제공하며, TypeScript를 통해 데이터 모델의 안정성과 코드 품질을 확보합니다.

주요 기능은 물류 이동(입고, 출고, 내부 이동) 데이터를 시각화하고, 사용자가 드래그 앤 드롭 방식으로 일정을 손쉽게 관리할 수 있도록 지원하는 것입니다.

2. 기술 스택 및 주요 라이브러리

Framework & Library

• Next.js (v14.1.0): App Router 기반의 React 프레임워크
• React (v18.2.0): 컴포넌트 기반 UI 라이브러리
• gantt-task-react (v0.3.9): 시간 기반 일정 관리를 위한 Gantt 차트 컴포넌트
• lucide-react (v0.525.0): 가벼운 SVG 아이콘 라이브러리
• **Zustand (v5.0.8) : 전역 상태관리 라이브러리

Styling

• Tailwind CSS (v3.4.17): 유틸리티 우선 CSS 프레임워크
• PostCSS / Autoprefixer: CSS 전처리 및 브라우저 호환성 개선

Code Quality & Type Safety

• TypeScript (v5.4.2): 정적 타입 검사를 통한 코드 안정성 확보
• ESLint + Prettier: 일관된 코드 스타일과 린팅 자동화

3. 개발 방향성

• 모듈화: 기능 단위로 컴포넌트를 분리하여 재사용성과 가독성 향상
• 최신 기술 적용: Next.js 14 버전의 App Router 구조 및 TypeScript 기반 개발
• 가시성 높은 UI: Gantt 차트를 중심으로 한 일정 관리 시각화
• 개발 생산성 강화: 린트/포맷터 설정 자동화 및 경량 아이콘 사용으로 빌드 최적화

4. 핵심 데이터 구조 (Types)

프로젝트에서 사용되는 핵심 데이터 타입은 다음과 같습니다.

• TransferItem: 물류 이동(입고, 출고, 내부 이동)의 기본 단위를 나타냅니다. 각 항목은 ID, 이름, 유형, 출발지/목적지 정보, 수량 등을 포함합니다.
• TransferResponse: 백엔드 API로부터 받아오는 페이지네이션된 물류 이동 데이터의 전체 구조입니다. content 배열에 TransferItem 목록이 담겨 있으며, 페이징 관련 메타데이터를 포함합니다.
• ICard: Gantt 차트나 칸반 보드 등에서 시각적으로 표시될 UI 카드의 데이터 구조입니다. TransferItem 데이터를 기반으로 생성됩니다.
• IDropCard: 사용자가 카드를 드래그 앤 드롭했을 때 발생하는 이벤트 관련 데이터 구조입니다.

5. Npm install 시 라이브러리 수정사항

• ** gantt-task-react (v0.3.9) : interface Task 변경 => 기존 id 타입이 string 에서 number로 교체 / 추후 추가되는 필드는 추가해서 사용해도 무방함
  • type TaskType => 이타입은 Task의 프로젝트를 정의하는 타입인데 기존 정의 내용은 task | milestone | project 3가지였으나 데이터가 없을시 임시데이터를 넣어주기위해 타입을 추가함
    • task | milestone | project| fallBackTask (fallBackTask) 추가

5. 현재 진행률

• 30%