Discovery Expedition 자체 쇼핑몰 전환 및 구축

Tech stack

• React Hooks
• React Context
• Redux Toolkit
• SWR
• React Hook Form

Implementation & history

• 상품상세 진입 시 페이지 단위 상태 컨테이너를 구성하여, 여러 컴포넌트가 공통 상태를 공유하도록 설계했습니다.
• 상품 옵션 선택, 수량, 구매 타입 등 구매 흐름에 영향을 주는 상태를 별도 계층으로 관리하여 여러 UI 영역에서 일관되게 사용하도록 했습니다.
• 상품 상세 메인 영역에서는 모달, 드로어, 스티키 UI, CTA 노출 등 다양한 UI 상태를 통합적으로 제어했습니다.
• 장바구니/구매 관련 액션은 전역 상태 관리 계층에서 처리하고, 조회성 데이터는 캐싱 기반으로 필요한 컴포넌트에서 직접 가져오도록 분리했습니다.
• 옵션 선택 상태가 여러 컴포넌트에 걸쳐 필요해지면서 props 기반 구조의 한계를 경험했고, 페이지 범위의 상태 공유 구조로 개선했습니다.
• 백엔드 API 구조에 맞춰 주문 파라미터를 구성하고, 구매 정책(혼합 구매 제한, 로그인 복귀 등)을 상태 흐름에 반영했습니다.

Tech stack

• MUI
• CSS-in-js
• ResizeObserver
• useMediaQuery
• Swiper

Implementation & history

• 디바이스에 따라 레이아웃 구성이 달라지는 요구사항을 설정 기반으로 분리하여 관리했습니다.
• MUI 컴포넌트를 활용해 모듈화된 레이아웃 시스템을 구축했습니다. 반응형 환경에 따라 자동으로 크기와 레이아웃을 조정하도록 useMediaQuery를 활용했습니다.
• ResizeObserver를 사용해 뷰포트 크기 변화에 따라 동적으로 UI를 조정하고, CSS-in-js로 스타일을 동적으로 생성하여 유지보수성을 높였습니다.
• CTA, 모달, 드로어 등 인터랙션 UI를 레이아웃 본문과 분리하여 구조를 단순화했습니다.
• 화면 크기 및 요소 위치 정보를 기반으로 UI 배치를 동적으로 계산하는 로직을 구성했습니다.

Tech stack

• ScrollAPI
• Modal/Drawer UI
• Storage API
• Error Handling

Implementation & history

• ScrollAPI를 사용해 스크롤 위치와 뷰포트 변화에 따라 동적으로 UI를 조정하고, 스크롤 위치를 저장하여 페이지 이동 시 유지되도록 했습니다.
• Modal/Drawer UI를 구현하여 옵션 선택, 구매 타입 변경, 장바구니 뷰 등 다양한 인터랙션 UI를 구현했습니다.
• Storage API를 사용해 옵션 선택 상태를 브라우저에 저장하여 페이지 새로고침 시 유지되도록 했습니다.
• 모바일과 데스크톱 환경에 따라 다른 구매 진입 방식을 제공하고, 스크롤 상태에 따라 CTA 노출을 동적으로 제어했습니다.