indition

>물류 데이터 기반 AI SaaS 플랫폼

## 프로젝트 배경

기존 물류 현장에서는 재고 누락 · 초과 · 미정리 문제가 빈번했고, WMS는 단순 기록 수준에 머물러 실시간 대응이 어려웠습니다. 물류 데이터를 기반으로 예측과 협업을 함께 지원하는 SaaS 플랫폼을 구축했습니다.

## 주요 성과 및 기여

→React Query + Zustand 기반 상태 관리 구조 설계 — 사내 기존 프로젝트의 Redux-Saga 대신 새 조합을 채택하고, 서버 상태와 클라이언트 상태를 분리해 개발 효율 40% 향상

→Next.js 15 App Router 기반 프로젝트 구조 설계 — 라우트 그룹으로 인증 경계를 분리하고 Suspense 로딩 UI 적용, 서버/클라이언트 컴포넌트 분리로 SSR 최적화

→공통 컴포넌트 QA 페이지 구축 — 디자인 시스템 컴포넌트를 상태 · 변형별로 한 화면에서 검증, 컨테이너 너비 전환으로 반응형까지 확인 가능하게 구성 → QA 시간 40% 단축

→AI 어시스턴트 채팅 UI 구현 — 로딩 상태 표시, 글자 단위 출력, 응답 중단 및 재시도 처리로 체감 대기시간 개선

→Socket.IO 기반 실시간 채팅 · 메모(크기 조절 · 이동) 협업 기능 구현 — 키 기반 소켓 인스턴스 재사용과 명시적 해제로 중복 연결 방지

→TypeScript any 사용 대폭 축소 등 코드 품질 개선

## 기술적 선택과 전환 이유

 
### Redux · Redux-Saga 대신 React Query + Zustand
이전 두 회사에서 사가 모듈 69개 · 액션 타입 1,600여 개 규모의 Redux-Saga 코드베이스를 운영하며, 단순 조회 하나에도 액션 · 리듀서 · 사가 3개 파일이 필요한 구조적 비용을 경험했습니다. 신규 프로젝트를 시작하면서 같은 방식을 반복하지 않기로 하고, API 요청 · 응답 로직 비중이 높고 캐싱과 리페치가 중요한 서비스 특성을 고려해 서버 상태는 React Query에 위임하고 클라이언트 전역 상태만 Zustand로 관리하는 분리 설계를 택했습니다.
·useQuery 데이터 캐싱, staleTime · refetchOnWindowFocus로 네트워크 요청 최적화
·isLoading · isFetching · error 내장 상태 활용으로 UI 로직 단순화

 
### Pages Router 대신 App Router 채택
layout · loading · error 파일 규칙으로 화면 단위 관리가 유연해졌고, 라우트 그룹으로 로그인 전후 경계를 구조적으로 나눌 수 있었습니다. 서버 컴포넌트와 클라이언트 컴포넌트를 분리해 초기 로딩을 개선했습니다.

 
### Serverless Framework 대신 AWS Amplify 채택
이전 프로젝트에서 쓰던 serverless framework가 Next.js 15와 버전 호환이 되지 않아, GitHub 연동 CI/CD · 정적 자산 호스팅 · 도메인 연결을 통합 관리할 수 있는 Amplify를 도입했습니다.

## 배운 점

컴포넌트를 수정할 때마다 이를 사용하는 화면을 일일이 찾아 확인하느라 배포가 지연되던 문제를 발견. 공통 컴포넌트를 상태별로 모아 보여주는 테스트 페이지를 구축하고, 로그인 없이 접근 가능하도록 배치해 QA 담당자와 디자이너가 직접 확인할 수 있게 구성. 작은 효율화가 팀 전체 개발 속도와 제품 품질에 큰 영향을 준다는 점을 체감.

## 화면 미리보기

// 5 screenshots · 클릭하면 원본 크기로 열립니다

---

name:indition

org:로커스코리아

period:2024.11 ~ 2025.06

frontend:[Next.js 15 (App Router),React 19,TypeScript]

state:[React Query,Zustand]

auth:[NextAuth]

ui:[SCSS Modules]

etc:[Socket.IO]

infra:[AWS Amplify]

---