Project 3: sprint 1주- 2일 차: 프- 백 ERD modeling

메인 페이지 

> 상단 header (고정) / GNB (+ 판매자 전환 페이지) 

영역 이름 : header 
GNB: 옆으로 할 수 있고, 상단에 할 수도 있고

 

> big banner : 3개*1줄 / 프리미엄 vip 광고 (market_id 로 데이터 받고, 클릭 시, market_list 페이지 연결) 

 

> band: title + 더보기 버튼 + 판매자 전환 버튼 (이중장치)  / 5개*8줄 or 5*10줄 

    - 밴드: 한 밴드에 이미지 5개씩, 옆으로 3번 넘긴다 (약? 총 15개) -> 백엔드가 준  전체 목록 데이터로 프론트가 알아서 잘라서 넣는 거 

      (밴드 카테고리 title : 마켓 카테고리, 상품 카테고리 //  data table는 백엔드가 정해서 주면 됨)   

프로모션 : rating 으로 하면 됨

메인/ 목록/ 상세페이지 모두 -> '장바구니 추가/ 바로구매' 버튼

    -' 더보기' 눌러서 이동 -> 전체 목록 list page : pagination (query string으로 기존 api 이용해서 조건 달아서/ offset limit 활용) 

    - 밴드 7or 10개  

 

 

> footer (대표이사 : 000 , 고객센터 전화번호 등) 

 

 

- 스크롤 기능 (big banner 1개 + n개의 band ) 

---

GNB

: global navigation bar (최상단 카테고리 바) 

 

> 장바구니 | 로그인 | 판매자 admin (이후 추가 가능) 

> header

    - 홈 | 카테고리 | 마이페이지 

            (카테고리에 마우스 오버하면 , 아래로 layer 뜰 것 -->3*3  2*5 or 5*2) 

---

>> 카테고리 9개 

ex. 카테고리 > 식품 -> list로 랜딩 (list ? category=food) 

 

- 푸드 

- 디지털 

- 리빙 

- 패션

- 뷰티 

- 스포츠

- 유아

- 공예 

- 펫

---

리스트 페이지 

진입경로 

1) GNB -> 카테고리 

2) 메인 페이지 -> 밴드 '더보기' 

 

> header 

> GNB 

>  background image (대표 이미지) ex. 유아 카테고리면, 아래는 유아 list, background image는 유아 대표 이미지 

     - 카테고리에서 나오는 list page일수도 있고

      - 마켓에서 나오는 list page 일 수도 있음 

   2) 상품 목록 (하나의 data는 메인페이지와 공통 -> product image, 제품명 + badge, 원가/할인가, rating, '장바구니 추가/ 바로구매' 버튼 ) 

rating 을 상품 목록에서 넣는 이유 : 정렬- 평점순 을 위해 
-> 접근 방식: 

   3) pagination 

 

> footer 

---

상세페이지 

> header

> product 

  - product main image(대표이미지 1장)

  - product_title, price(원가/할인가/할인율/ 최종가격) , 상품 별점, 장바구니 추가/ 바로구매 버튼, '장바구니 추가/ 바로구매' 버튼

  - 탭: '설명' | 리뷰 | 

      > '설명' : product detail image (상세설명에 있는 이미지들) -> 멀티 업로드 + 지도 api 

      > '리뷰' : 이메일, 내용(Create, Read), 이미지, 리뷰 별점, 날짜 (timestamp_ createdAt/ updatedAt )

                      pagination (X) 

 

          (과정: 
          네이버 기사 댓글처럼 이메일 보이는데 모자이크할까? 
          user_id로 하되, 이메일 @ 앞단으로 자를까? or 이름 3자에서 하나를 자르는)       

할인가는 차감되는 금액
최종가는 판매가 

 

(추가) 프론트 - Axios 

(추가) 제품 좋아요

(추가) 리뷰 Update, Delete 

 

 

[배송료]

일반회원  -> 배송료 0원 

프리미엄 구독은 배송료 0원 -> 조건 걸어서 해도 되니

 

 

* 백엔드: 주소 테이블에 user_name 추가, product table 내에 reveiw 

 

할인가 계산 -> query 한줄로 됨 

재고수량은 백엔드가 수량 넘겨주면, 
프론트가 차감해서 재고수량 alert창에 띄어줌. 

---

회원가입 

회원가입 누르면 구매자 페이지 먼저 나옴

 

1차 회원가입: 구매자 회원가입 

2차 회원가입: 판매자 회원가입 (판매자 전환 페이지; 구매자 페이지에서 연결)

 

[user 구매자 회원가입]

- (필수) 유저 이름, 이메일, 비밀번호, 패스워드 확인, 주소1 (도로명 주소, 상세주소,우편번호), 전화번호1 

- '가입하기' 버튼 

유저 이름 : 배송 때문에 

이미지 X 
마케팅수신정보/ 이용동의약관 / '로봇이 아닙니다' -> X 

[seller 판매자 가입]

마켓명 

마켓 주소 (주소2) -> 단일 이미지 (멀티 아님) 

프로필 이미지 

마켓 번호 (전화번호2) 

셀러 카테고리 

 

백엔드 : 셀러 카테고리 삭제 

---

로그인 

소셜로그인

(필수) 카카오로그인 

(선택) 구글, 페이스북, 네이버 등 

 

> 필수값

- 이메일 

- 패스워드 

(아이디 찾기, 비밀번호 찾기, 아이디 저장 X) 

 

> 로그인 버튼 

> 카카오 소셜 로그인 버튼

---

장바구니 

백엔드는 하나의 api로 (create, delete) 

수량 변경과 같은 update도
-> cart 하나를 삭제 후 새로 create로 

장바구니 경로는 global 로 하니까 백엔드가 api 하나 주면 알아서 하는 거로. 

 

1) 메인페이지 - 장바구니

2) 제품목록 - 장바구니 

3) 상세페이지 - 장바구니

4) header- 장바구니 

 

> 마켓별로 상품 묶어서 (market id 기준으로) 

     백: 마켓별로 묶어서 데이터 전달 

     백엔드가 프론트에 전달해야 하는 data: 

     프: 마켓별로 선택 체크 박스, 전체선택/ 삭제 , 장바구니 페이지 떠날 때 fetch 

 

> 장바구니-상품상세페이지 연결 X 

> 하나의 라인: 상품명, 가격 정보(원가/최종가격), 수량, 삭제 버튼 

total price 를 할 수가 없음. 데이터가 프론트에서만 있고, 백엔드는 아직 가격 데이터가 없으니 

 

    --> 유저 입장: 배송비를 여러 번 하게 됨. 

 

[예상되는 그림] 

네이버 쇼핑 들어가면 

- A 스마트스토어 

- B 스마트 스토어 

장바구니 목록 있는 거 

 

ex. 예시

제품 하나하나 하면 배송비 한번 나가는데,
마켓별로 묶으면 배송비 여러번 나가니, 이익 창출 부분에서, 여러 번 배송비 

그게 싫으면 프리미엄 구독해라. 

카테고리 별로 나누는게 아니니

회의 빠르게 하기 위해, 필요한 데이터 위주로. 

 

주문/결제

1) [추가] 결제수단/ 배송유형 선택 (위, 아래 2개의 세션) 

- 결제수단: 포인트 차감  or 외부 모듈 

- 배송유형: 배송 전, 배송 중, 배송 완료 

주문에서 배송수단 선택하는 거로 (배송비 반영 되도록) 

 

[주문 페이지] 구조 
- 배송 유형 : 택배 배송 / 방문 수령 선택  (위치는 고려 안 하기로) 
- 유저 정보 
- 제품 정보 
- 결제 수단 

 

2) 주문 페이지

- 유저 정보 (주소 등등) 받아서, 

- 상품 정보 

[필수] 주문 페이지에서 버튼 -> '주문완료' 페이지로 넘어가고 결제완료 ->  주문내역 페이지 확인 가능하게 백엔드에게 정보 주기 

 

3) 결제 완료 페이지 

 

4) 결제 내역 

 

마이페이지 

[user 마이페이지] user_sub 

원페이지 

 

- user 정보 가져오고 

[user 정보 수정] X 
--> 수정할 수 있는 데이터가 '이메일/ 주소/ 휴대번호'인데 못하게 간단하게

 

> 구독 신청, 취소 (user_sub 테이블) 

- 구독여부 (0,1) 

- 구독 날짜 created_at 

 

> 구매내역: 

- 주문번호(id), 상품, 가격, 배송유형, 날짜(createdAt), 

- 구매내역 pagination (pagination <-> scroll )

주문번호가 화면에 보이는 게 아니라, 
database 상의 pk id 값 -> 고유 값이니까 이걸 그대로 가져다 쓰는 거로 

 

> 리뷰 작성 페이지 

구매 내역에 리뷰 작성 버튼 만들겠다 

(구매 여부를 알기 위해서) 

orders에서 주문 내역을 받아와서 order id 를 받아서, order detail에 있는 product 도 받아서 / order에 product id 존재, userid 일치 시

프론트에서 '이 제품에 리뷰를 넣어주세요'만 줄 것. 
로그인 - user order 내역 나온다 (테이블 조인해서 order detail까지 나오니 -> prdouct id만 가져와서) 
어떤 제품에 리뷰를 넣을 지 알아야 하니 

 

[판매자 Admin]페이지 

원페이지 

> 구독 신청/취소(seller_sub 테이블) -- > 상단 고정 (스크롤x) 

   - 구독여부 (0,1) 

   - 구독 날짜 created_at 

 

 

> 제품 등록 create : 제품 이름, 가격, 할인율 (DB저장할 데이터), main image(단일, 미리보기) , detail image (다중, 미리보기) 

> 판매자 정보 전달 

프론트가 백엔드에게 요청하지 않고,
알아서 이전에 받은 제품 목록 read 

> 제품 삭제 delete (셀러 삭제:탈퇴없이) : 누르면, 백엔드가 params로 받아서 (전체 삭제 X, 개별 삭제) /

프론트가 백엔드에게 요청하지 않고,
알아서 이전에 받은 목록 api 쓴다. 

 

> (추가) 판매내역 

제품 테이블  -> product_information (상세설명) 빼기 

백엔드: 할인 계산하는 쿼리문 필요없음 

 

 

(추가) 검색 기능 

---

<변경된 점>

메인페이지: 배너 위에 판매자 전환 버튼 따라다니게 추가 

메인페이지: big banner (프리미엄 vip 광고) --> 구독한 premium seller 

배송: 택배/ 방문수령 (거점X)