메인페이지_공통화면 API
이해하기
쇼핑몰 내에서 화면이 바뀌어도, 계속 유지되는 요소를 공통 화면으로서 소개합니다.
쇼핑몰 내에서 화면이 바뀌어도, 계속 유지되는 요소를 공통화면을 제외한
나머지 영역은, 각 페이지별 화면에 따라 렌더링하여 노출합니다.
🅐 헤더(Header)영역
shop by pro 기본 스킨에서 헤더(header)는 '로고', '카테고리', '장바구니 개수', '검색 창', '마이 페이지', '로그인/로그아웃'을 노출합니다.
이 중에서, 샵바이 API 를 호출하여 화면을 구성해야 하는 요소는 아래 3가지이며, 헤더 내 다른 요소들은 모두 스킨 내 하드코딩으로 제작 해야합니다.
- 로고(Logo)
- 카테고리(Category)
- 장바구니 개수
- get전체 배너 조회
- /skin-banners
쇼핑몰의 모든 배너 정보를 조회합니다.
앞서 메인페이지_배너영역 문서에서 소개한 API입니다.
해당 배너 리스트 데이터에 쇼핑몰 로고(Logo)가 포함되어 있습니다.
로고의 경우 화면이 바뀌어도 대부분의 스킨에서 고정된 자리에 위치해있기 때문에, 사실상 모든 화면에서 지속적으로 사용되는 API입니다.
따라서 기본 스킨에서는 API 호출 횟수를 줄이고자 localStorage 에 5분 주기로 캐싱합니다.
- get전체 카테고리 조회
- /categories
쇼핑몰의 모든 배너 정보를 조회합니다.
쇼핑몰 화면에서 카테고리란, 화면이 바뀌어도 대부분의 경우 화면에 상시 노출되는 요소입니다.
따라서 localStorage에 캐싱 주기 5분으로 사용하고 있습니다.
아래 2가지 형태의 카테고리 데이터를 제공합니다.
- flatCategories : 모든 카테고리를 하나의 배열에 쭉 나열한 형태
- multiLevelCategories : 계층을 가지는 카테고리 형태 (최대 5depth)
shop by pro 기본 스킨에서는 multiLevelCategories 를 사용하고 있습니다.
따라서 카테고리는 아래와 같이 계층 구조로 구성되며, 최대 5depth까지 어드민에서 카테고리를 추가할 수 있습니다.
어드민 [상품 > 상품 분류관리> 전시 카테고리 관리] 에서 관리할 수 있습니다.
단, 회원인 경우에만 API를 호출하며 비회원인 경우 API 호출이 아닌 localStorage 에 자체적으로 저장합니다.
- 회원(member)
- get장바구니 개수 조회
- /cart
로그인 회원의 장바구니 개수를 조회합니다.
기본 스킨에서는 API 호출 횟수를 줄이기 위해 localStorage 에 캐싱 주기 5분으로 사용하고 있습니다.
- 비회원(guest)
비회원의 경우에도 장바구니 버튼을 제공합니다.
단, API 호출이 아닌 localStorage 내 비회원 장바구니 데이터를 자체적으로 관리해야 합니다.
shop by pro 기본 스킨 에서는 푸터(footer) 영역에서 아래 4가지 요소를 API로 호출합니다.
- 쇼핑몰 정보
- 약관
- 게시글 리스트
- 게시판 리스트
스킨 제작 시, 쇼핑몰 하단 푸터 영역에 필수적으로 기재해야 할 법적 필수 항목은 다음과 같습니다.
2. 사업장 주소(소재지)
3. 연락처 (대표번호, 이메일)
4. 개인정보관리책임자
5. 사업자등록번호
6. 통신판매업신고번호
7. 이용약관
8. 개인정보취급방침
9. 호스팅제공자: 전자상거래법 규정에 따라 호스팅서비스 제공자 상호를 반드시 표시하도록 의무화 되어 있습니다. 예시는 다음과 같습니다.
호스팅제공자: 엔에이치엔커머스(주)
Hosting by 엔에이치엔커머스(주)
10. 에스크로 인증마크
앞서 소개한 GET/ malls 를 통해 이미 호출한 쇼핑몰 기본 정보 내 포함되어 있는 데이터입니다.
- get쇼핑몰 기본 정보 조회
- /malls
쇼핑몰 전반에 대한 기본 정보와 설정 데이터를 조회할 수 있습니다.
해당 설정 값들은 실시간 변동성이 크지 않은 데이터로, API 호출 횟수를 줄이고자 응답 값을 localStorage 에 캐싱 주기 5분으로 사용하고 있습니다.
- get몰 약관 조회
- /terms
쇼핑몰에 적용 중인 몰 약관을 조회합니다.
어드민 [설정 > 기본정책 > 약관/개인정보 처리방침 관리]에서 생성한 약관 내용을 조회할 수 있습니다.
termsTypes 으로 각 약관 내용을 구분합니다.
- 쇼핑몰/회사 소개 : MALL_INTRODUCTION
- 이용약관 : USE
- 개인정보처리방침 : PI_PROCESS
- 이용 안내 : ACCESS_GUIDE
해당 API는 푸터 영역 뿐 아니라, 회원가입, 회원탈퇴 및 주문서 구매 동의 화면에서도 활용됩니다.
기본 스킨에서는, API 호출 횟수를 줄이기 위해 localStorage 에 5분 주기로 캐싱합니다.
게시글은 어드민 [게시판 > 게시판 관리 > 게시글 관리]에서 등록/삭제 가능합니다.
- get게시글 리스트
- /boards/{boardNo}/articles
특정 게시판의 게시글 리스트를 조회합니다.
게시판 번호 boardNO 기준으로 특정 게시판의 게시글 리스트를 조회하는 API입니다. 기본 스킨에서는 디폴트로 '공지사항' 게시판의 최신 게시글 목록을 노출합니다.
기본 스킨에서는, API 호출 횟수를 줄이기 위해 localStorage 에 5분 주기로 캐시합니다.
- get게시판 설정 조회
- /boards/configurations
전체 게시판의 설정 정보를 조회합니다.
푸터 영역의 'HELP'메뉴에는 어드민 [게시판> 게시판 관리 > 게시판 리스트] 에서
게시판 사용 설정이 '사용함'인 게시판 리스트을 모두 노출합니다.
기본 스킨에서는, API 호출 횟수를 줄이기 위해 localStorage 에 5분 주기로 캐싱합니다.
아래 3가지 게시판의 경우, 쇼핑몰 고객이 마이페이지_나의 게시글에서 관리할 수 있습니다.
- ‘1:1 문의 게시판’ 설정 : inquiryConfig
- ‘상품 후기 게시판’ 설정 : productReviewConfig
- ‘상품 문의 게시판’ 설정 : productInquiryConfig
- ‘일반 게시판’ 설정 : boardConfigs
- 그 밖의 공지사항, FAQ, 자유게시판, 이벤트/ 혜택 게시판, 메모 게시판 등을 의미합니다.
푸터영역의 'HELP'메뉴에서는 디폴트로 공지사항을 게시판을 노출합니다.
🅒 최근 본 상품
기본 스킨에서 '최근 본 상품' 은 화면이 전환되어도 공통 화면으로서 유지되는 영역입니다.
회원인 경우와 비회원인 경우, 각각 호출해야 하는 API가 상이합니다.
- 비회원(guest)
- get비회원 최근 본 상품 조회
- /guest/recent-products
로그인 하지 않은 고객이 최근 본 상품을 조회합니다.
localStorage 에 저장한 상품 번호 리스트 mallProductNos 룰 통해 최근 본 상품을 조회합니다. 기본 스킨에서는 최근 본 상품 영역 내 특정 상품에 마우스 오버 시, API의 리턴 값 중 상품명 ProductName 과 상품판매가 salePrice 를 노출합니다.
- 회원(member)
- get최근 본 상품 조회
- /profile/recent-products
로그인 하지 않은 고객이 최근 본 상품을 조회합니다.
기본 스킨에서는 최근 본 상품 영역 내 특정 상품에 마우스 오버 시, API의 리턴 값 중 상품명 ProductName과 상품판매가 salePrice 를 노출합니다. 해당 API는 마이페이지에 화면에서도 활용됩니다.