NexERP Frontend

💡 1. 서비스 한 줄 요약

• NexERP는 중소·중견기업(SME)를 타켓으로, 전사적 자원 통합과 데이터 분석 기능을 제공하는 ERP 프로그램입니다.

🔗 2. 배포 주소

https://nex-erp.vercel.app/

👀 3. 서비스 둘러보기

🏢 회사 신규 등록

default.mp4

• NexERP와 함께하는 첫걸음! 🚀 새로운 회사를 등록하고 생성된 계정으로 로그인하는 과정입니다.

---

🧑‍💻 사원 신규 등록

default.mp4

• 이름과 아이디 등 기본 정보를 입력하고 소속될 회사와 부서, 직급을 선택하면 가입 요청 완료!

---

🤝 사원 가입 요청 승인

default.mp4

• 새로운 팀원의 합류 요청이 도착했어요 📩 관리자가 가입 관리 페이지에서 가입 요청 목록을 확인하고 승인 또는 거절을 선택합니다!

---

🎯 프로젝트 생성하기

default.mp4

• 관리자가 프로젝트 정보를 입력하고 입고와 출하 업무를 책임질 담당자를 선택해요. 깔끔한 업무 분담과 스마트한 관리, NexERP가 함께합니다 🚀

---

📝 입고 업무 관리

-.Clipchamp.mp4

• 입고 담당자는 나의 업무 토글을 활용해 할당된 업무를 손쉽게 확인합니다.
• 업무 상세로 들어가 업무명과 설명을 작성하고 신규 재고를 추가하거나 기존 재고를 선택한 뒤 목표 입고 수량을 입력하고 승인 요청을 보내면 끝! 🎯

---

📝 출하 업무 관리

-.Clipchamp.mp4

• 출하 담당자도 나의 업무 토글을 활용해 할당된 업무를 손쉽게 확인합니다.
• 출하 업무 상세로 들어가 업무명과 설명, 운송수단, 운송업체를 입력합니다.
• 이후 재고 추가 버튼을 눌러 필요한 재고를 등록하고 목표 출하 수량을 입력한 뒤 승인 요청을 보내면 출하 업무 완료! 🎯

---

🖱️ 관리자의 입고/출하 업무 승인 처리

-.Clipchamp.mp4

• 관리자는 담당자가 보낸 승인 요청을 확인하고 클릭 한 번으로 결재를 끝냅니다. 빠르고 간단한 승인 프로세스로 업무 효율을 높여보세요 ✨

---

📦 입고 처리

-.Clipchamp.mp4

• 입고할 물품을 선택하고 수량을 입력한 뒤 '입고처리' 버튼만 누르면 끝!
• 현재 입고 수량과 목표 입고 수량이 같아지면 입고 처리 완료 🎯

---

🚚 출하 처리

-.Clipchamp.mp4

• 출하할 물품을 선택하고 수량을 입력한 뒤 '출하 처리' 버튼만 누르면 끝!
• 현재 출하 수량과 목표 출하 수량이 딱 맞으면 출하 처리 완료 🎯

---

🏆 완료된 프로젝트

-.Clipchamp.mp4

• 관리자 홈과 전체 프로젝트 리스트에서 완료된 프로젝트들을 한눈에 확인할 수 있어요 🎉
• 필터 기능으로 진행 중 · 미진행 · 완료 상태를 손쉽게 조회해 보세요.

---

📊 재고 관리

-.Clipchamp.mp4

• 리스트에서 품목을 선택해 목표 재고 수량과 안전 재고 수량을 바로 수정해보세요!

---

🛠 4. 시작 가이드 (Getting Started)

프로젝트를 로컬 환경에서 실행하려면 아래 단계를 따라주세요.

// 1. 레포지토리 클론
git clone https://github.com/TAVE-9RP/NexERP_FE.git
cd NexERP_FE

// 2. 의존성 설치
npm install

// 3. 로컬 서버 실행
npm run dev

🏗 5. 기술 스택 (Tech Stack)

🎨 Frontend

• Framework: React
• Language: TypeScript
• Styling: Tailwind CSS
• State Management: TanStack Query (React Query)
• HTTP Client: Axios
• Data Visualization: Recharts, Ant Design Charts

🛠 Tools

• Build Tool: Vite
• Package Manager: npm

🚀 6. 핵심 기능

NexERP는 효율적인 기업 운영을 위해 세 가지 핵심 모듈을 제공합니다.

🏢 관리 서비스 (Admin)

• 직원 가입 승인: 신규 가입한 직원을 오너가 직접 검토하고 승인
• 권한 관리: 오너 중심의 사용자 접근 제어 및 조직 관리

📦 재고 서비스 (Inventory)

• 상품 입고 관리: 신규 상품 입고 시 수량 및 품목 상세 정보 등록
• 실시간 재고 현황: 현재 보유 중인 자산의 수량을 한눈에 파악하고 효율적으로 재고를 조절

🚚 물류 서비스 (Logistics)

• 출하 업무 프로세스: 주문 및 요청에 따른 상품의 출하 상태 관리
• 물류 이력 추적: 입고된 상품이 출하되기까지의 흐름을 효율적으로 관리

📈 통합 KPI 대시보드

• 프로젝트 처리 완료율 & 업무 장기 처리율: 전월 누적 데이터를 기반으로 업무 진행 상태 및 효율성을 모니터링 (※ 전월 실행 데이터가 존재하는 경우에 한해 그래프가 생성)
• 안전 재고 확보율: 품절 방지를 위한 적정 재고 유지 상태 확인
• 재고 회전율 및 익월 예측: 효율적인 자산 유동성을 파악하며 매일 축적되는 당월 데이터를 분석하여 데이터 기반의 차기 재고를 예측

📂 7. 폴더 구조 (Architecture)

src
 ┣ 📂apis       # API 통신 로직
 ┣ 📂components # UI 컴포넌트
 ┃ ┣ 📂common    # 공통 컴포넌트
 ┃ ┣ 📂dashboard # 차트 및 지표 컴포넌트
 ┃ ┣ 📂modals    # 시스템 모달
 ┃ ┗ 📂signup    # 회원가입 관련 컴포넌트
 ┣ 📂pages      # 도메인별 페이지 구성
 ┃ ┣ 📂inventory-service   # 재고 서비스
 ┃ ┣ 📂logistics-service   # 물류 서비스
 ┃ ┣ 📂management-service  # 관리 서비스
 ┃ ┗ 📂login & 📂signup    # 인증 관련 페이지
 ┣ 📂types      # TypeScript 타입 정의
 ┣ 📂utils      # 공용 유틸리티 함수
 ┣ 📂styles     # 글로벌 스타일 및 테마 설정
 ┣ 📜App.tsx
 ┗ 📜main.tsx

👥 8. 팀원 소개

이름	역할
박하은	FE
곽채연	FE, BE