SSF-SHOP_클론코딩 프로젝트_화면설계(스토리보드 작성)_16회

[필터_사이즈]

 

※ 숫자(1,2,3..):  DB_테이블 컬럼   

1. 검색조건으로 검색된 상품의 갯수 카운팅 컬럼 

2. 착용부위 컬럼 

3. 사이즈 컬럼 

 

※ 알파벳(A,B,C..):  링크or이벤트  

A. 클릭시 필터팝업창 나옴

B. 클릭시 팝업창 닫힘 

C. 클릭시 사이즈 관련된 검색조건들이 나오고 중복선택 가능                                           

D. 클릭시 검색조건으로 선택됨.

   그리고 선택한 조건 갯수가 AJAX로 즉각 카운팅되어 'ㄱ' 에서 출력됨

E. 클릭시 선택한 검색조건들이 모두 초기화됨 

F. 클릭시 해당 검색조건들로 조회된 목록화면이 나옴                                                                                                         

                                                                                                                    

[ 필터_가격 ]                 

※ 숫자(1,2,3..) => 변수(ex. 자바스크립트 변수, 서버 변수, DB 컬럼)

1. 모든 탭에서 선택했던 검색조건들로 조회된 행들의 갯수 컬럼

2. 필터의 가격 탭에서 선택된 검색조건의 갯수를 나타냄 

3. StartPrice변수의 값

4. EndPrice변수의 값 

 

A. G 클릭시 A의 값 변경됨 

B. 클릭시 팝업내용이 가격 관련 내용들로 바뀜 

C. G 클릭시 C의 표시 생김

- G를 2번 클릭시 C의 표시 사라짐 

D. 클릭시 소속된 탭의 C가 표시됨 

E. 시작가격 직접 입력

F. 종료가격 직접 입력 

G. 클릭시 

H. G 1번 클릭시 H의 체크표시 생김. 2번 클릭시 H 체크표시 사라짐.  

I. 클릭시 선택된 검색조건 초기화

J. 클릭시 선택된 검색조건으로 조회됨 

K. 클릭시 필터팝업 열림

L. 클릭시 필터팝업 닫힘 

 

 

[ 필터_색상, 패턴] 

1. 상품의 색상 이미지

2. 상품의 패턴 이미지 

3. 상품의 패턴명  

 

[ 필터_소재] 

1. 상품의 소재명 

 

[ 필터_Style] 

1. 상품의 스타일 컬럼 

 

 

[ 필터_TPO]

1. 상품의 TPO 컬럼 

 

 

[ 필터_혜택]

1. 상품의 혜택 컬럼 

 

 

[ 필터_배송]

1. 상품의 배송유형 컬럼 

- CF) 멀티체크 안되고 1개만 선택하게 돼있음