Next.js 15와 React Query로 구축한 실무 중심 리셀러 운영 대시보드 설계

Context

매입, 리스팅, 배송, 장부 기록 도구의 파편화로 인한 수익 분석의 어려움 발생. 운영 데이터의 통합 관리와 실시간 상태 확인이 필요한 구조적 한계 직면.

Technical Solution

• Next.js 15 App Router 기반의 클라이언트 중심 아키텍처 설계로 대시보드 형태의 빠른 인터랙션 구현
• Axios 인터셉터를 활용한 401 인증 에러 중앙 처리 및 sessionStorage 기반의 로그인 후 리다이렉션 경로 보존 방식
• React Query 래퍼 훅(useGetResource, useModifyResource) 도입을 통한 쿼리 실행 표준화 및 mutation 후 자동 캐시 무효화 전략
• React Hook Form과 Zod를 결합하여 제품 재고 상태에 따라 유효성 검사 규칙이 변경되는 동적 스키마 적용
• Radix UI 기반 프리미티브와 useIsMobile(450) 훅을 사용해 데스크톱 Dialog와 모바일 Drawer를 전환하는 반응형 UI 구조
• react-dropzone과 URL.createObjectURL을 활용한 이미지 미리보기 및 FormData 기반의 파일 업로드 프로세스

Key Takeaway

내부 운영 도구의 경우 복잡한 서버 사이드 렌더링보다 얇은 서비스 레이어와 재사용 가능한 쿼리 훅 중심의 프론트엔드 구조가 개발 생산성과 유지보수 효율을 극대화함.