프로젝트 개요
바나나 B2B에 등록된 상품과 연동하여 사용자들이 자신만의 스토어를 개설하고 판매할 수 있게 돕는 쇼핑몰 플랫폼입니다. Next.js App Router 기반으로 구축했으며, 프로젝트 리드로서 전체 아키텍처 설계부터 핵심 기능 개발까지 담당했습니다.
본 프로젝트는 B2B 상품을 손쉽게 가져와 개인 쇼핑몰을 구축할 수 있는 노코드 스토어 빌더의 성격을 가지고 있습니다.
바나나 트레이더 상점 개설 시연 화면입니다.
주요 역할 및 기여
프로젝트 리드 및 아키텍처 설계
- 프로젝트 리드로서 전체 일정 및 기술 스택 결정
- ERD 설계를 통한 데이터베이스 구조 정의
- Next.js App Router 기반 프로젝트 구조 설계
핵심 기능 개발
- B2B 몰의 상품을 개인 스토어로 가져오는 핵심 기능 개발
- 사용자가 직접 스토어 구성할 수 있는 시스템
- PG 연동 기반 구매/취소/교환/환불 결제 플로우 구현
사용자 경험 개선
- PointerEvent 기반 드래그 앤 드롭 UI 직접 구현
- 쇼핑몰 카테고리 순서를 직관적으로 조정 가능
- 터치/마우스 멀티 디바이스 지원
- 네이티브 성능의 부드러운 인터랙션 제공
PointerEvent 기반 드래그 앤 드롭 구현 예시 화면입니다.
기술적 도전 및 성과
1. B2B 연동 환경에서 확장 가능한 DB 구조 설계
- 바나나 B2B와 상품 데이터를 연동하는 구조상, 신규 기능 추가가 곧 기존 시스템 영향으로 이어질 수 있어 결합도를 낮추는 DB 설계를 우선했습니다.
- 결과적으로 연동 범위가 확장되더라도 기존 기능을 크게 건드리지 않고 확장할 수 있는 구조를 마련하고자 하였습니다.
2. App Router 활용
- Next.js App Router로 구현한 만큼 CSR과 RSC를 적절히 사용하고자 하였습니다. 인터랙션이 필요한 부분은 CSR, 초기 로딩이 중요한 데이터는 RSC로 구성했습니다.
useActionState + Server Action을 활용하여 로그인, 스토어 설정 등 주요 기능을 구현하고, revalidatePath로 관련 RSC 데이터를 갱신해 화면에 최신 상태가 바로 반영되도록 했습니다.
기술 스택
- Frontend: Next.js (App Router), TypeScript, Sass, Zustand, SWR
- Backend: MariaDB, REST API
