배포 링크
실제 서비스 환경으로 이동합니다.
POISITON
프로젝트 담당 영역 - PDP, Footer, Review
- 기존 커머스 플랫폼 아키텍처를 기반으로 MLB 브랜드 요구사항에 맞는 상품상세(PDP) UI 및 기능을 확장 구현했습니다.
- 멀티 브랜드 구조에서 공통 로직을 재사용하면서도 브랜드별 UI/기능 차이를 분리하여 유지보수성과 확장성을 고려한 구조를 설계했습니다.
- 01
멀티 브랜드 아키텍처 확장
기존 플랫폼을 기반으로 브랜드별 분기 구조를 설계
- 02
3rd-party 리뷰 시스템 도입
Crema 리뷰 서비스 연동 및 UI 통합
- 03
트래킹 및 모니터링 시스템 구축
GTM 및 Sentry 기반 사용자 행동 추적과 에러 모니터링 적용
Technical deep-dive
기술 상세
영역을 선택하면 사용한 기술과 구체적인 구현·협업 내용을 확인할 수 있습니다.
Tech stack
- Monorepo
- Turborepo
- Next.js
- React
Implementation & history
- 기존 Discovery 쇼핑몰 코드를 기반으로 Monorepo 구조에서 MLB 브랜드를 확장 구현했습니다.
- 공통 컴포넌트와 브랜드 전용 UI를 분리하여 코드 재사용성과 유지보수성을 높였습니다.
- 브랜드별 요구사항에 따라 UI 및 기능을 분기 처리하면서도 공통 로직은 일관되게 유지했습니다.
- 멀티 브랜드 구조에서 확장 시 발생할 수 있는 중복 코드 문제를 최소화하도록 아키텍처를 구성했습니다.
Tech stack
- 3rd-party API
- SWR
- Axios
Implementation & history
- 외부 리뷰 서비스(Crema)를 상품상세 페이지에 최초로 연동했습니다.
- 리뷰 데이터 조회 및 렌더링 구조를 설계하여 기존 PDP UI와 자연스럽게 통합했습니다.
- 서버 데이터와 UI 구조를 분리하여 리뷰 기능이 다른 영역에 영향을 주지 않도록 구성했습니다.
- 외부 API 연동 시 발생할 수 있는 데이터 지연 및 예외 상황을 고려해 안정적인 렌더링 구조를 구현했습니다.
Tech stack
- GTM
- Sentry
Implementation & history
- Google Tag Manager를 통해 상품상세 페이지 주요 사용자 행동 이벤트를 트래킹하도록 구성했습니다.
- 사용자 인터랙션(조회, 클릭, 구매 등)을 기반으로 데이터 수집 구조를 설계했습니다.
- Sentry를 도입하여 런타임 에러를 실시간으로 모니터링하고 빠르게 대응할 수 있는 환경을 구축했습니다.
- 운영 환경에서 발생하는 이슈를 추적하고 안정성을 개선하는 데 기여했습니다.