쇼핑몰 프로젝트 마무리

 

 

 

 

 

 

 

 

 

 

 

 

 

 

메인화면

Slider 를 사용해 새로 등록 된 상품을 10 개 까지 슬라이드로 보여줍니다

버튼을 누르면 최대 8개씩 더 많은 상품을 보여줍니다.

 

정확한 email 과 password 를 입력하면 로그인,

회원가입을 누르면

회원가입 페이지로 이동합니다.

유효성 검사를 거친 후에 가입하기를 누르면 가입을,

취소를 누르면 이전 페이지로 돌아갑니다.

 

장바구니

Header 의 position을 pixed로 Background 를 반투명 , z-index 를 높게 설정하여 페이지 위에 띄우고
스크롤을 내려도 따라오도록 설정하였습니다.
장바구니에 담은 상품들을 볼 수 있고 수량을 선택할 수 있으며 체크박스에 체크를 하면 총합계가 계산되며
결제 페이지로 넘어갑니다.

 

결제 페이지

체크한 상품들의 정보와 주문자의 정보를 띄우고
배송메모를 선택하여 저장하고

다음 주소 API를 활용하여 배송지를 바꿀 수 있습니다.

 

모든 항목을 기입한 후 결제 버튼을 누르면
아임포트 API를 이용한 여러가지 방법으로 결제 가능한
결제시스템이 나옵니다.

 

마이페이지 ( 주문내역 )

결제에 성공한 상품들을 띄웁니다.

리뷰 여부에 따라 리뷰 등륵을 띄웁니다.

 

찜한 상품들을 띄웁니다.

해당 Product 의 ProductCode에 맞는 상품 페이지로 이동하거나

찜하기 취소가 가능합니다.

 

최근에 방문하였던 상품을 ViewedProduct 테이블에 추가하여 화면에 띄웁니다.

버튼을 클릭하면 해당 Product의 상세페이지로 이동합니다.

 

상품 상세 페이지

ProductCode 에 맞는 상품을 띄웁니다.

List<byte[]> 타입의 Images 를 띄우고 클릭 시 이미지가 변경됩니다.

찜하기, 장바구니 담기, 구매하기 기능이 있습니다.

색상과 사이즈를 선택한 후 장바구니 담기와 구매하기를 진행할 수 있습니다.

Images 의 이미지들을 나열합니다.

Review 테이블에서 ProductCode가 일치하는 데이터를 찾아 Review의 내용을 출력합니다.

 

카테고리

선택한 카테고리가 Product 의 Category와 일치하는 상품들을 띄웁니다.

검색

검색한 내용과 ProductName, Category 이 일치하는 상품들을 띄웁니다.

 

전체문의

Question 테이블의 모든 내용을 출력합니다.

 

나의 문의내역

현제 로그인한 사용자의 Session 값을 받아 User 의 userCode 와 일치하는 데이터를 출력합니다.

 

 

문의하기

현재 로그인한 User 의 Orders 테이블의 orderCode와 productName을 띄우고 선택하면

Question 의 Product 값으로 입력됩니다.

모든 내용을 입력했는지 유효성 검사를 진행한 후에 문의가 등록됩니다.

 

문의 내용

Quetion 테이블의 속성들을 띄우고

Reply 테이블에서 questionCode가 일치하는 데이터를 가져와 댓글로 띄웁니다.

작성자가 작성한 댓글을 작성자 표시가 뜨도록 설정했습니다.

 

실시간 문의

실시간으로 문의를 할 수 있는 ( 채널톡 ) 의 API를 이용하였습니다.

관리자는 해당 페이지에서 문의한 사용자들의 채팅을 볼 수 있고

배정을 누른 후 대화를 하면 됩니다. 

상품 수정

관리자 아이디로 로그인 했을 때만 상품수정과 상품 등록이 메뉴바에 뜨게 되고

해당 페이지에서 여러가지 항목으로 검색을 할 수 있도록 했습니다.

Cotton 이 포함된 상품만 뜨게 되며 Edit 버튼을 누르면 Input 타입으로 바뀌며
입력하고 Save 버튼을 누르면 Update 됩니다.

상품 등록

모든 항목을 입력한 후에 등록을 하면 Product 테이블에 데이터가 추가됩니다.

이미지를 여러 개 추가할 수 있고

추가한 이미지들이 미리보기로 뜨게 됩니다.

 

 

쿠폰 생성

모든 항목을 입력하고 "쿠폰 생성" 을 누르면 새로운 쿠폰이 생성됩니다.
쿠폰명은 자동으로 "50000원 이상 구매 시 5000원 할인" 와 같이 생성됩니다.

 

쿠폰 수정

생성된 쿠폰들을 검색할 수 있으며 쿠폰들의 속성들을 임의로 수정할 수 있습니다.
사용자가 사용한 쿠폰은 "사용 여부" 가 "사용됨" 으로 바뀌게 됩니다.

 

 

주문관리/환불

마이페이지에서 "환불 신청" 버튼을 누르게 되면 환불 사유를 입력하는 창이 나오며 제출하게 되면

환불상태가 "승인 대기중" 으로 바뀌게 되며
관리자페이지의 환불승인 페이지에도 환불상태가

"승인 대기중" 으로 바뀌게 됩니다.

환불승인 페이지에서는 주문내역 목록이 화면에 출력되고 여러 카테고리로 검색할 수 있습니다.
수정하기 버튼을 누르면 관리자가 원하는대로 값을 수정할 수 있습니다.
승인하기를 누르면 아임포트의 결제 취소 API 가 실행 되면서
실제 계좌에 결제했던 금액이 지급됩니다.

거절하기를 누르면 "주문상태"가 "승인거절"로 바뀌게 됩니다.

"주문상태변경"을 누르게 되면
결제완료 → 준비중 → 배송시작 → 배송중 → 배송완료 순으로
주문상태가 변경됩니다.

 

배송 조회

마이페이지의 주문내역의 "배송조회" 버튼을 누르면 배송조회 페이지로 넘어가게 됩니다.

배송예상 날짜와 배송상태, 배송상태의 종류를 알려주며
주문 테이블의 정보들을 알려줍니다.
배송되는 수순을 보여주는 테이블과
"교환, 반품 신청" 버튼이 있으며 버튼을 누르게 되면 해당 주문번호로 환불 신청 로직이 실행됩니다.

"배송조회" 버튼을 누르게 되면 여러 업체의 배송을 조회할 수 있는 사이트인

스마트 택배 페이지(https://st.sweettracker.co.kr/#/)로 이동하게 됩니다.
해당페이지에서 업체종류와 운송장번호를 통해 검색을 할 수 있습니다.

 

 

유저페이지

상단의 "권순호님" 과 같은 유저의 이름을 클릭하게 되면
로그인한 유저페이지로 이동하게 됩니다.

해당 페이지에서는 유저의 여러정보들을 볼 수 있고 수정을 할 수 있습니다.
작성한 리뷰내역과 보유 중인 쿠폰내역을 보여줍니다.

유저등급과 같은 부분은 수정할 없도록 제한하였습니다.

 

유저 간 실시간 채팅

WebSocket , stompt 를 사용하여 실시간 채팅방을 만들었습니다.
하단 우측에 있는 "채팅열기", "채팅닫기" 버튼을 누르게 되면 채팅방이 열리고 닫힙니다.
새 채팅방을 누르면 채팅방의 목록을 보여주며
메시지를 입력하면 로그인한 사용자의 성만 보여주며 서로 말을 주고받을 수 있습니다.
사용자 간에 여러 상품을 공유하고 추천할 수 있도록 하기위해 해당 기능을 만들었습니다.