Wecode - Project 3 (부트캠프)/Project 3 과정

Project3: sprint 1주-1일차 - user flow

Queen Julia 2023. 10. 9. 20:50

프+ 백 모여서 user flow를 그림

 

[구매자 프로세스]

 

메인페이지를 로그인 페이지로 하는 

-> 인덱스 

 

첫 페이지는 로그인 페이지로. 

로그인하고 나서, 메인 페이지로 가는 거로. 

 

<유효성 검사> 백 - 프 통일 

[회원가입]

유저 입장에서 이메일 vs 아이디 어떤 거로 가입하는 게 좋은지? -> 이메일 로 

- 이메일 중복 검사 

- 휴대폰 중복 검사 

- 패스워드 조건 검사 

- (선택) 아이디 자동 저장 기능 

 

[로그인]

- 아이디, 비밀번호 유효성 검사/ 중복확인

 

 

백: 데이터베이스 검증 까지 하고

프: @, 특수문자 검증 

 

alert 띄우는 거 

 

[메인 페이지] 자기 속한 지역에 해당하는 광고, 배너 불러오기로 

- 광고 배너 

- 카테고리별 슬라이딩 되는 밴드로 (프론트가 ui가 편해짐- 공수형으로 하면, 배너 하나를 하면 TDD가 끝나니) 

-> 모바일 3개, 웹 5개로 

- 좌측 이벤트 배너

- (선택) weekly  베스트 상품 -> best 기준을 '별점'으로 해서, 리뷰마다 별점을 매겨서, 리뷰 별점 순으로 12개 (sort best) - query string으로  

 

 

데이터 관리 - 구매자, 판매자 
구매자, 판매자 ui가 다름 

- 목록페이지 = 메인 페이지

 

(백엔드가 '목록페이지'로 api 드리면, 프론트에서 알아서 5개씩 잘라서 배너로 만들어주신다고) 

 

 

> 카테고리별 배너 일수도, 00마켓의 배너일 수도. 

 

vip 멤버는 00마켓관으로 하고,
하단은 00 카테고리관으로 하고 

 

--> 더보기 누를 경우, 아래와 같이 각 00 카테고리 / 00 상품관 전체 목록 나오게  

>> 페이지 네이션은 해드려야 함 

- 상세페이지 

(선택) 찜하기 기능 -> 마이페이지에서도 필요함 -> 상품 좋아요, 마켓 좋아요 

 

- 마이페이지 -> 판매자 마이페이지, 구매자 마이페이지 

 

로그인을 하면 상품목록창 보이는 메인페이지로 바로 가게, 

 

 

판매자 id =  구매자 id (pk, fk는 다름)

구매자, 판매자 테이블 각각 

(구매자가 판매자를 하고 싶으면, nickname 같은게 추가 되게 ) 


[메인 페이지 - 데이터] 목록형 list 

광고형 큰 배너 - 돈 많이 

광고형 배너 (좌측) - 돈 조금 

밴드 (카테고리 상품) --> 

 

 

[구매자 입장:]

메인페이지 제품 목록에서 -> 제품 상세페이지 

 

두가지 기입 가능 (각자 많이 썼던 제품에 따라) 

1) 상품명

밑에 마켓명 (쿠팡처럼) 

2) 마켓명 - 상품명 

 

- 상품명

- 업체/상호명

- (선택) 거리가 얼마나 떨어져 있는지 

- 프리미엄 전용관 (돈 많이 낸 판매자) : 배너니까 그게 그거 (프리미엄 판매자 광고관) 

 

[상세페이지]

- 리뷰 : list만 (이미지- 상품 리스트처럼)

 

[상세페이지] -> [장바구니]

 

장바구니 페이지 : 00 마켓, 몇 개 수량 (배민처럼 같은 상호에서만 가능하지 않도록, 다 담게)

 

[장바구니]- > [결제] 

 

[마이페이지] 

{구매자 마이페이지}: 아이디 변경, 주소 / 휴대폰번호 주소/ 상품정보/ 결제정보, 주문내역 (수령 여부: order table에 status 보내주는)

 

택배는 수령여부 체크 안하는데,
거점에서 방문수령은 수령 확인한 뒤, 판매자에게 돈 주는거로 

 

{판매자 마이페이지}

-> 변경 불가능: 아이디는 이메일이고, 이메일 수정은 불가능,

-> 정보 수정: 주소지(주소 변경하게 해야 함, 다른 메인으로 다른 값 불러오는거라)/ 휴대폰 번호 변경 , 주문내역, 프리미엄 구독서비스 여부 

 

구매자/ 판매자 테이블은 각각 -> 정보 수정을 위해 

 

 

구매자 프리미엄 구독서비스 여부 확인  -> 배송 무료 가능한지 때문에

-> 구독 신청/취소 어떻게 할지 ( 홈쇼핑도 전화로 취소 하는데..?)

 

- 구독 신청 누르면 -> 주문 페이지 이동 -> 앱 구독 결제 페이지 (애플뮤직, 앱스토어, 넷플릭스 결제처럼) 

- 만료일로부터 계산해서 구독 권한 유지 (백엔드가 보내주는 계산해주는 날짜 기반으로)

 

 

장바구나> 주문> 결제 flow로 


[판매자 등록 페이지]  

--> header에서 버튼 누르면, 유효성 검사 (판매자 등록했으면 admin 마이페이지 접근/ error 시 판매자 등록페이지) 

- 판매자 유효성 검사 (판매자 id & 토큰)-> 내가 판매 가능한 사람인지

- 마켓 등록(수정, 삭제는 고객센터) 후, 상품 CRUD 등록/수정/삭제/목록, 프리미엄 구독 여부 // 리뷰 관리 빼기로 ( 물 관리 스스로 하면 안 되니) 

(구매자를 디폴트, 판매자를 T/F : 판매자가 되고 싶으면, 무조건 구매자가 돼야 하는 거) 

- 판매자 등록을 이미 한 사람이, 판매자 마이페이지 (=admin페이지로) 

 

- 상품: 카테고리 설정 -> 하나 선택 or 치크포인트 관심사 선택처럼 

 

[판매자 마이페이지(admin 관리자 페이지)] 

--> 매출 내역만 나오게 

--> 카테고리에 늘 위에 있는 header에 gmb처럼 맨날 우측 header 바에 떠 있게 (global) 로 

 

메인 페이지에서

-> 판매자 등록페이지 & 판매자 마이페이지(admin 페이지)  

 

 

<상단 카테고리 헤더>

메인페이지 | 마이페이지 | 판매자 등록 페이지(내 가게로 가기 (admin) )