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

[1] 메인 > 신상품

 

1. 클릭시 상품상세 화면 이동

2. 클릭시 위시리스트 등록됨 

3. 클릭시 더 많은 추천상품이 조회됨  

4. 클릭시 필터 팝업이 뜨고 선택된 필터를 검색조건으로 해서 조회된 데이터를 보여줌 

5. 클릭시 상품이미지가 선택한 컬러의 이미지로 변경됨 

6. 클릭시 해당 페이지의 데이터를 보여줌

7. 클릭시 다음 페이지 번호를 보여줌 

8. 클릭시 맨마지막 페이지의 데이터를 보여줌  

a. 브랜드명

b. 상품명 

c.할인가격

d.정상가격

e.할인율

f.해당 상품을 위시리스트로 등록한 갯수

g.해당 상품에 등록된 리뷰 갯수

h. 신상품의 총갯수 

i. 상품출시 연도와 상품을 입을 수 있는 계절 정보를 나타냄

j. 신상품일시 NEW표시를 해줌. 

k. 단독/독점(?) 판매일 경우 EXCLUSIVE 표시를 해줌. 

l. 신상품이 아니고 리오더일시 리오더 표시를 해줌. 

m. 홈피팅 서비스 상품일 경우 '홈피팅' 표시, 입점상품일 경우 '입점상품' 으로 나타냄. 

 

[2] 메인 > 인기상품

1. 클릭시 상품상세 화면 이동

2. 클릭시 위시리스트 등록됨 

3. 클릭시 더 많은 추천상품이 조회됨 

4. 클릭시 필터 팝업창 뜸

1. 선택조건들로 조회된 상품의 갯수를 AJAX 사용해서 실시간으로 새로고침없이 표시해줌

2. 남성상의 사이즈 컬럼이 있음. 컬럼값으로 XS, S, M, L , XL, XXL 가 온다.  

3. 남성하의 사이즈 컬럼이 있음. 컬럼값으로 S, M ,L , 23~38까지 값들이 들어있음. 

4. 신발 사이즈 컬럼이 있고 컬럼값으로 250~280까지 5간격으로 값들이 들어있음 

5. ?? 이해못함

a. 클릭시 해당 카테고리에 속해있는 검색조건들을 보여줌

b~e. 특정컬럼의 값들로 검색조건으로 사용되며, 중복선택이 가능함

f. 클릭시 홈피팅 가능 상품만 조회됨

g 클릭시 설정한 검색조건들이 전부 초기화됨

h. 클릭시 선택한 검색조건들로 조회됨

 

a. 브랜드명

b. 상품명 

c.할인가격

d.정상가격

e.할인율

f.해당 상품을 위시리스트로 등록한 갯수

g.해당 상품에 등록된 리뷰 갯수 

 

 

1. 색상 선택시 다른 색상의 상품이미지를 보여줌. 

a. 신상품 표시.

b. 잘 팔리는 상품 표시. 

- '일정시간 동안 가장 높은 클릭수'로 할지, '가장 많이 팔리고 있는 상품'으로 할지 결정해야할듯  

c.  ??_입점하지 않는 상품도 있나? 무슨 뜻인지 잘 모르겠음 

d. ??_단독판매? SSF-SHOP 온라인몰에서만 판다는 뜻인지? 

e. 품절됐다가 다시 물량 공급된 경우 나타내는 표시.

- ex. 1차 리오더, 2차 리오더, 3차 리오더 

f. 홈피팅 서비스를 제공하는 상품일 때 표시.

 

[3] 메인 > 세일상품

1. 클릭시 상품상세 화면 이동

2. 클릭시 위시리스트 등록됨 

3. 클릭시 더 많은 추천상품이 조회됨 

a. 브랜드명

b. 상품명 

c.할인가격

d.정상가격

e.할인율

f.해당 상품을 위시리스트로 등록한 갯수

g.해당 상품에 등록된 리뷰 갯수 

 

 

1. 클릭시 상품상세 화면 이동

2. 클릭시 위시리스트 등록됨 

3. 클릭시 상품목록에서 해당상품의 이미지가 클릭한 색상으로 변경됨 

 

a. 브랜드명

b. 행사종류 

- ex) 시즌오프, 핫딜상품, 무료교환반품 

a. 상품명

b. 할인가격

c. 정상가격

d. 할인율

e. 해당 상품을 위시리스트로 등록한 갯수

f. 해당 상품에 등록된 리뷰 갯수 

g. 단독판매 표시 

h. 홈피팅 서비스 제공 표시 

i. ?_잘팔리는 상품 or 클릭수 많은 상품 표시 

 

 

[4] 고객센터 > 일대일 문의하기 click

 

1. DB에서 문의유형 컬럼 만들기

2. DB에서 문의제목 컬럼 만들기 

3. DB에서 문의내용 컬럼 만들기 

4. DB에서 파일 담는 컬럼 만들기

5. DB에서 답변 수신방법 컬럼 만들기 

a. 클릭시 문의유형 목록을 보여줌

b. 제목 작성란

c. 제목 초기화

d. 내용 작성란

e. 클릭시 파일업로드창 띄워서 업로드 수행 

f. 업로드된 목록을 보여줌 

g. 중복선택 가능 

h. 클릭시 고객센터 화면으로 이동

i. 클릭시 1:1 문의내용 저장되고, 1:1 문의 조회화면으로 이동 

 

[5] 마이페이지 > 일대일 문의_조회

1. 조회된 문의글 갯수 

2. 문의유형 컬럼값 조회

3. 문의내용 컬럼값 조회

4. 작성일 컬럼값 조회

5. 접수상태 컬럼값 조회

a. 마이페이지 > 1:1문의 작성화면 이동 

b. 클릭시 선택된 페이지의 데이터 조회  

 

 

[6] 마이페이지 > 일대일 문의_상세조회

 

1. 문의유형 컬럼 조회 

2. 문의제목 컬럼 조회 

3. 작성일 컬럼 조회 

4. 문의내용 컬럼 조회 

5. 휴대폰번호 컬럼 조회

6. 이메일 컬럼 조회

7. 문의답변내용 컬럼 조회

8. 문의답변만족도 컬럼  

a. 클릭시 1대1 문의 조회화면으로 이동

b. 문의답변만족도 컬럼에 저장할 값을 선택

c. 클릭시 문의답변만족도 컬럼에 선택값 저장됨

 

 

[7] 마이페이지 > 쿠폰 조회

1. 쿠폰종류 컬럼 

2. 할인종류 

3. 브랜드명

- 값이 있을 때만 화면에 보이게끔 설계 

4. 쿠폰내용 

5. 유효기간의 마감날짜 

6. 현시간부터 마감날짜까지 남은 시간 계산해서 출력 

7. 사용가능 매장 컬럼 

8. 최대 할인금액 컬럼 

9. 쿠폰번호 컬럼 

a. (?) 클릭시 쿠폰 등록 팝업 뜸 

 

a. 클릭시 팝업 닫힘

b. 쿠폰번호 입력란 

c. 입력된 쿠폰번호로 조회해서 쿠폰 목록에 추가하는 로직 구현 

 

[8] 고객센터 > 공지사항/당첨자발표

1. 공지사항 게시판_번호 컬럼

2. 공지사항 게시판_제목 컬럼

3. 공지사항 게시판_등록일 컬럼

a. 검색어 입력

b. 검색어로 조회

c. 선택 페이지에 해당하는 데이터들을 조회

d. 화면의 첫 페이지 번호에서 페이지 범위를 더한 값에 해당되는 페이지의 데이터들을 조회 

e. 맨 마지막 페이지에 해당하는 데이터들을 조회