1. 작성 목적
본 글은 CoreERP 프로젝트의 로그인·회원가입 화면을 포함한 전체 프론트엔드 구조를 기존 HTML 기반 정적 화면에서 React + TypeScript 기반 SPA 구조로 전환한 과정을 기록하기 위한 문서이다.
단순 기술 스택 변경이 아니라, 유지보수성·확장성·구조적 안정성을 확보하기 위한 설계 전환이라는 점을 중심으로 정리한다.
2. 기존 구조 (HTML 기반 설계)
초기 로그인·회원가입 화면은 HTML + CSS 기반 정적 구조로 설계하였다.
- 단일 페이지 중심 구성
- form 기반 입력 구조
- semantic 태그 구분 (submit 버튼 / a 태그 분리)
- 저채도 UI / 단일 컬럼 레이아웃
이 단계의 목적은 화면 디자인 고정과 UX 기준 수립이었다. 기능 구현보다 설계 기준을 먼저 확정하는 데 의미를 두었다.
3. React + TypeScript로 마이그레이션한 이유
3-1. SPA 구조 필요성
ERP 시스템은 단순 페이지 이동 구조가 아니라, 업무 흐름이 연속적으로 이어지는 시스템이다.
따라서 화면 전환 시 전체 리로딩이 발생하는 구조는 적합하지 않다고 판단하였다. React Router 기반 SPA 구조로 전환하여 페이지 이동 시 상태 유지 및 확장성을 확보하였다.
3-2. TypeScript 도입 이유
ERP는 데이터 무결성이 핵심이다.
- 입고/출고 타입 분기
- 창고 코드 제한
- 재고 수량 타입 안정성
- 폼 입력 타입 명확화
이를 위해 JavaScript가 아닌 TypeScript로 마이그레이션하여 타입 기반 구조 안정성을 확보하였다.
4. 현재 프론트엔드 구조
4-1. 기술 스택
- React (Vite)
- TypeScript
- React Router
- CSS 분리 구조
4-2. 구현 완료 페이지
- Login / Signup
- Dashboard
- ItemCreate / ItemList
- PurchaseOrderCreate / History
- Inbound / InboundHistory
- Outbound / OutboundHistory
- WarehouseStatus
- WarehouseTransferCreate / History
프론트엔드의 목표는 화면 구현이 아니라, ERP 업무 흐름을 기준으로 페이지를 분리하고 구조를 고정하는 것이었다.
5. 설계 기준 정리
- 재고는 직접 수정하지 않는다.
- 입고/출고 트랜잭션을 통해서만 재고 변동.
- 마스터 데이터와 트랜잭션 데이터 분리.
- 이력 페이지는 반드시 존재.
- 업무 흐름 중심의 라우팅 설계.
이 기준을 프론트 구조에서 먼저 고정함으로써, 이후 Spring Boot 백엔드 연동 시 API 설계 방향이 명확해졌다.
6. 현재 상태
✔ React + TypeScript 마이그레이션 완료
✔ 주요 ERP 화면 UI 구조 완료
✔ 업무 흐름 기반 페이지 분리 완료
✔ 백엔드 연동 준비 단계 진입
7. 정리
CoreERP 프론트엔드는 단순한 UI 구현 단계를 넘어, 업무 흐름과 데이터 무결성을 고려한 구조 설계 단계까지 완료하였다.
이제 프로젝트는 화면 중심 개발 단계에서 벗어나, Spring Boot 기반 도메인 설계 및 데이터 계층 구현 단계로 진입한다.
