Project

Discovery Expedition 자체 커머스 플랫폼 전환

SaaS 기반 커머스 플랫폼(카페24)에서 자체 플랫폼으로 전환하는 과정에서, 상품상세(PDP) 영역의 상태 구조와 구매 흐름 아키텍처를 설계 및 구현했습니다.

배포 링크

실제 서비스 환경으로 이동합니다.

POISITON

01
복잡한 구매 흐름 대응을 위한 상태 아키텍처 설계
구매 도메인 상태와 UI 상태를 분리하여 PDP 내 상태 의존성과 확장 비용을 줄이는 구조를 설계
02
반응형 환경 대응을 위한 Slot 기반 레이아웃 시스템 구축
디바이스 및 UI 조건 변화에 유연하게 대응할 수 있는 모듈형 레이아웃 구조 설계
03
구매 전환 중심 인터랙션 설계
구매 진입 흐름과 사용자 행동을 고려한 인터랙션 구조 구현

Technical deep-dive

영역을 선택하면 사용한 기술과 구체적인 구현·협업 내용을 확인할 수 있습니다.

Tech stack

Implementation & history

상품 옵션, 수량, 구매 타입, 장바구니 액션 등 구매 흐름과 직접 연결되는 상태를 도메인 단위로 분리하여 관리했습니다.
props drilling과 컴포넌트 간 상태 의존성이 증가하던 구조를 개선하기 위해 페이지 범위 상태 컨테이너를 도입했습니다.
조회성 데이터와 액션 중심 상태를 분리하여, 서버 데이터는 SWR 기반 캐싱 구조로 관리하고 사용자 액션은 전역 상태 계층에서 처리하도록 설계했습니다.
Sticky CTA, Modal, Drawer, 옵션 선택 UI 등 서로 다른 인터랙션 컴포넌트가 동일한 구매 상태를 일관되게 참조할 수 있도록 상태 흐름을 통합했습니다.
혼합 구매 제한, 로그인 복귀, 주문 정책 등 비즈니스 로직을 프론트 상태 흐름에 반영하여 실제 운영 정책과 UI 동작이 일치하도록 구성했습니다.
복잡한 상태 흐름에서도 유지보수성과 확장성을 확보할 수 있도록 상태 책임 범위를 명확하게 분리했습니다.

Tech stack

Implementation & history

Tech stack

Implementation & history