이번 X2BEE 릴리즈에서는 스토어 프런트 리액트(Store Front React) 버전의 신규 시스템을 업데이트하였습니다. 이 업데이트를 통해 X2BEE를 활용한 온라인 커머스 구축 시, 컴포넌트 기반의 디자인 시스템을 제공하여 스토어 프런트의 디자인 작업 및 개발 프로세스를 획기적으로 단축시킬 수 있습니다.
주요 특징
컴포넌트 기반 디자인 시스템: 독립적인 컴포넌트를 조합하여 유연하게 사용할 수 있어 개발 생산성이 향상됩니다.
반응형 UI: 데이터 변경 시 해당 내용만 업데이트하는 방식으로 빠른 로딩 속도와 반응성 높은 UI를 구현합니다.
범용적인 UI 프레임워크 채용: 다수의 기업에서 채용하고 있는 UI 프레임워크를 사용하여 개발 편의성을 높였습니다.
개발 프로세스 간소화: 기존의 개발 프로세스에서 다르게 X2BEE 스토어 디자인 시스템을 적용(디자인 → CSS 변경 → BO/전시 연결 관리 → 변경 내용 확인 → 완료)하여 개발기간을 단축시킬 수 있습니다.
개발 스팩
구성요소 | 라이브러리/프레임워크 | 버전 |
---|---|---|
웹 애플리케이션 프레임워크 | NextJSNext.js | 14.12.4프론트엔드 개발 프레임워크3 |
자바스크립트 라이브러리 | React | 18.23.01 |
상태 관리 라이브러리 | Zustand | 4.5.2 |
정적 타입 지원 기본 개발 언어 | Typescript | 5.3.3 |
CSS 프레임워크 | Tailwindcss | 3.4.3 |
자바스크립트 코드 검사 도구 | Eslint | 8.22.0 |
코드 포맷터 | Prettier | 3.2.5 |
정보 |
---|
새로운 Store Front에 대한 자세한 설명과 적용된 API 활용 정보는 Store Front API 활용하기 문서를 이용해 주시기 바랍니다. |
1.상품 탐색 및 검색
고객이 원하는 상품을 쉽게 찾을 수 있도록 탐색 및 검색 기능을 제공합니다.
주요 내용
메인 화면에 스와이프, 아이콘, 기획전, 추천상품 등 다양한 배너 유형 추가
카테고리 필터와 정렬 옵션 제공
X2BEE Search 검색엔진 도입으로 정확한 검색 결과 제공
연관 검색어와 상품 추천 기능 추가
대상 API
메인
통합 검색
2. 브랜드몰 및 기획전
브랜드 상품, 기획전, 인기 상품 랭킹 정보를 제공하는 기능을 제공합니다.
주요 내용
기획전 목록에서 대표 이미지/동영상, 쿠폰, 최신 기획전 배너 시각화
좋아요, 공유하기, 기획전 그룹/브랜드별 노출, 상품 정렬 기능 제공
입점 브랜드 상품을 한곳에서 확인할 수 있는 브랜드몰 추가
추천 브랜드 기능 신설
사이트 내 최근 14일 판매 랭킹 상품 정보(전체 및 카테고리별) 제공
대상 API
기획전
브랜드
랭킹존
상품상세
이벤트
4. 주문 및 배송 관리
장바구니와 주문서 기능을 강화하여 주문 및 배송 관리 할 수 있도록 구현했습니다.
주요내용
장바구니에서 상품 추가/변경, 결제예상금액, 배송비, 혜택, 사은품 정보 확인 가능
주문서에서 다양한 결제수단 선택 및 배송지 변경, 선물/정기/다중 배송 가능
장바구니
주문/결제
비밀번호 찾기(아이디 확인) 수정 : API 확인하기
5. 고객 서비스
마이페이지와 고객센터를 통해 통합적인 고객 서비스를 제공합니다.
주요내용
마이페이지에서 주문, 정기주문, 쿠폰, 마일리지, 상품평, 이벤트, Q&A 등 통합 관리
고객센터에서 공지사항, 자주 묻는 질문 확인 및 1:1 문의 가능
안전한 회원가입 절차와 간편한 로그인 기능 제공
대상 API
마이페이지
회원별 쿠폰 조회 수정 : API 확인하기
이벤트 참여내역 조회 수정: API 확인하기
정기주문 주기변경 전 유효성 검증 수정 : API 확인하기
주기변경 후의 정기주문예정일 조회(FO) 수정 : API 확인하기
회원 마이페이지메인 정보 조회 : API 확인하기
회원 마이페이지 메뉴 정보 조회 : API 확인하기
단건 배송 트래킹 : API 확인하기
주문내역 조회 : API 확인하기
반품접수(FO) : API 확인하기
반품철회(FO) : API 확인하기
클레임 상세 내역 조회(FO) : API 확인하기
선물함 상세 조회 : API 확인하기
위시리스트-브랜드 목록 조회 : API 확인하기
위시리스트-상품 목록 조회 : API 확인하기
회원배송지 목록 조회 : API 확인하기
회원 환불 계좌 정보 조회 : API 확인하기
알림함 조회 : API 확인하기
시스템 공지 단건 조회 : API 확인하기
반품접수 : API 확인하기
교환접수 : API 확인하기
교환접수(FO) : API 확인하기
주문 취소(FO) : API 확인하기
배송처리 : API 확인하기
고객센터
FAQ 조회 수정 : API 확인하기
공지사항 목록 조회 수정 : API 확인하기
공지사항 상세 조회 수정 : API 확인하기
1:1문의 상세 조회 수정 : API 확인하기
1:1문의 수정 수정 : API 확인하기
1:1문의 나의 주문 상품조회 수정 : API 확인하기
1:1 문의 답변 등록 수정 : API 확인하기
회원
캡차 코드 음성 변환 수정 : API 확인하기
캡차코드 검증 처리 수정 : API 확인하기
본인인증에 필요한 토큰정보 및 암호화 DATA 생성합니다 수정 : API 확인하기
인증결과 데이터를 가져옵니다 수정 : API 확인하기
소셜 계정 연동정보 조회 수정 : API 확인하기
소셜 로그인 처리 수정 : API 확인하기
개인정보 수정 수정 : API 확인하기
아이디 찾기 수정 : API 확인하기
마이페이지
로그인
회원가입