여행 박람회 프로모션 웹
서비스 기획·UX/UI
D17 · WEB · BRAND
제품·시연 사례제공된 제품 화면 · 예시 데이터
패션 커머스
컬렉션과 에디토리얼에서 상품을 탐색하고 옵션·찜·장바구니로 이어지는 패션 쇼핑몰 화면을 구성했습니다. 장바구니 상태와 배송 안내, 구매 단계 진입, 키보드·모달 접근성을 함께 다뤘습니다.
- 사례
- 컬렉션과 장바구니를 잇는 패션 쇼핑몰
- 수행 유형
- 제품·시연 사례
- 작업 범위
- 컬렉션·에디토리얼 · 상품 필터·정렬·상세 · 찜 · 장바구니 수량·삭제 · 배송 안내 · 체크아웃 데모
- 자료
- 제공된 제품 화면 · 예시 데이터
컬렉션과 에디토리얼을 상품 탐색으로
브랜드 콘텐츠를 읽는 경험과 상품을 고르는 경험을 연결했습니다. 컬렉션별 이미지·설명·관련 상품을 묶고 상품 목록에는 필터·정렬·옵션 선택과 상세 모달을 구성했습니다. 찜한 상품은 상태를 유지하며 다시 찾도록 만들었습니다.
탐색 화면 위에서 장바구니를 관리
장바구니 패널에 상품·옵션·수량 증감·삭제, 배송 안내와 금액을 배치했습니다. 상품 탐색 화면을 유지한 채 장바구니를 확인하고, 구매 단계 진입에서는 체크아웃 데모 안내를 열거나 쇼핑을 계속하는 흐름을 구성했습니다.
쇼핑 상태와 모달 조작의 공통 기반
React 19·TypeScript로 메인·컬렉션·에디토리얼·상품·FAQ를 구성하고 옵션·찜·장바구니 상태를 연결했습니다. 모달의 Escape 닫기와 포커스 유지, ARIA 정보, 반응형 배치와 로딩·오류 상태를 포함하는 쇼핑몰 UI 제품입니다.
PROJECT INFO
- 제작: 쿤웍스
- 제품: 커머스 프론트엔드
- 기술: React 19 · TypeScript · Vite · React Router · Tailwind CSS · 클라이언트 상태
비슷한 일을 준비 중이라면.이 사례 정보가 문의서에 함께 담깁니다.
MORE · WEB · BRAND
같은 분야의 다른 사례
우리 업무에 적용한다면.
이 사례 정보가 문의서에 함께 담깁니다.