쇼핑몰 구현 5 - 설계 & 결과

1. 개발환경

• 1. 프레임워크 및 라이브러리: Spring Boot3.2.2, Thymeleaf
• 2. 개발도구: IntelliJ IDEA
• 3. 데이터베이스: Mysql, redis
• 4. 운영체제: macOS
• 5. 화면구현: bootStrap, Javascript, JQuery

2. 기능설계

2.1. 회원 기능

• 회원가입
  
  • 아이디는 이메일 사용 (이메일 인증 필수)
  • 아이디 중복 불가
  • 아이디, 비밀번호, 이름 비어있는지 확인
• 로그인 
  • 아이디, 비밀번호로 로그인
• 정보 수정
  • 비밀번호, 이름 변경 가능
• 배송지 수정
  • 다음 우편번호 API를 사용하여 우편번호, 도로명주소, 상세정보를 입력 받음
• 마이페이지
  • 주문내역 확인 및 삭제
  • 찜한상품 리스트 확인
  • 장바구니에 담은 상품들 확인
  • 내정보 확인 및 수정
  • 배송지 확인 및 수정

2.2. 상품 기능

• 상품  리스트 조회
  • 카테고리별 상품 리스트 출력
  • 상품 이름으로 검색 기능
  • 한 페이지에 10개씩 출력
• 상품 조회
  • 리스트 페이지에서 상품 선택시 해당 상품 페이지로 이동
  • 해당 상품의 상품명, 가격, 배송비, size 정보 출력
  • 수량 선택 후 장바구니 또는 주문하기 버튼 클릭 시 해당 페이지로 이동
  • 로그인 한 회원이면 해당 상품을 위시리스트에 추가할 수 있음
  • 해당 상품의 리뷰 및 Q&A 리스트 출력
• 상품 생성
  
  • 관리자만 글을 작성할 수 있음
  • 상품 관련 정보 입력 기능
  • 이미지는 여러장 업로드 가능하며 업로드한 이미지들은 업로드 이미지 버튼 클릭시 해당 화면에서 바로 확인 가능, 특정 이미지 삭제 및 추가 가능글 작성
• 상품 수정
  
  • 관리자만 글을 수정할 수 있음
  • 상품명을 제외한 상품 관련 정보 수정 가능
• 상품 삭제
  • 해당 상품의 주문 내역이 없는 경우에만 삭제 가능
  • 해당 상품과 연관된 이미지 모두 삭제
• 리뷰 및 Q&A 기능
  • 로그인한 회원이라면 특정 상품에 대한 리뷰,Q&A를 작성할 수 있음
  • 본인의 리뷰,Q&A를 삭제할 수 있음
  • 관리자는 Q&A에 답글을 달 수 있음

2.3. 주문 기능

• 주문 생성
  
  • 로그인 한 회원만 주문 가능
  • 주문에 포함된 상품들 중 재고가 주문한 상품보다 적을 경우 수량부족 예외 발생
• 주문 리스트 조회
  • 주문 ID, 주문일자, 주문상태, 배송상태 출력
  • 마이페이지 내 주문내역 카테고리에서 주문리스트 확인 가능
  • 배송상태가 READY일 경우 주문 취소 버튼 클릭 시 주문상태 CANCEL로 변경
  • 주문 ID 클릭시 해당 주문의 상세정보 조회 가능 (주문일자, 구매한 상품 리스트, 수량, 가격, 총금액)
  • 한 페이지에 10개씩 출력

2.4. 위시리스트 기능

• 위시리스트 생성
  • 상품 상세페이지에서 wishlist버튼 클릭 시 위시리스트에 추가, 두번 클릭시 위시리스트에서 삭제
• 위시리스트 조회
  • 마이페이지 내 찜한상품 카테고리에서 위시리스트 확인 가능
  • 한 페이지에 10개씩 출력

2.5. 장바구니 기능

• 장바구니 생성
  • 상품 상세페이지에서 cart 버튼 클릭시 장바구니에 추가, 동일한 상품을 두번 이상 추가할 경우 장바구니에서 해당 상품을 찾은 후 추가한 수량만큼 더한 후 저장
• 장바구니 리스트 조회
  • 마이페이지 내 장바구니 카테고리에서 장바구니 리스트 확인 가능
  • 장바구니 리스트 앞에 체크박스를 클릭하면 총 금액에 해당 상품의 금액이 더해져서 출력
  • 주문할 상품의 체크박스를 클릭 후 주문하기 버튼 누르면 해당 상품들이 주문됨

2.6. 관리자 기능

• 관리자는 관리자 페이지에 접근 가능
• 모든 회원의 주문 확인 및 주문상태 변경, 배송상태 변경 가능
• 모든 회원의 Q&A 확인 및 답글 달 수 있음

3. 결과 

3.1. 결과 설명

메인 화면

상품 리스트

상품 상세페이지

상품 리뷰 페이지 - 상품 리뷰 클릭시 상세정보 출력

상품 Q&A페이지 - 관리자가 답변을 한경우 답변완료 상태로 변경

해당 질문 클릭시 상세정보 출력

위시리스트 버튼 클릭 시 버튼 색 변경 및 위시리스트에 추가

마이페이지 찜한상품에 추가됨

장바구니에서 해당 상품을 체크하면 total Price의 금액에 상품가격*수량이 더해짐

주문하기 버튼 클릭시 주문이 완료되고 주문내역 페이지에서 확인 가능, 주문ID 클릭 시 주문 상세내용 확인가능

주문 상세페이지

회원가입 페이지

회원가입 유효성 검사

회원가입 페이지

마이페이지 내정보 확인 및 수정 기능

배송지 확인 및 수정 기능

우편번호 칸 누르면 우편번호 검색 기능으로 우편번호 및 도로명 주소를 찾음 (다음 API활용)

관리자 페이지 내 주문목록 - 취소버튼을 누르면 해당 주문이 취소됨, 배송시작 버튼 누르면 해당 버튼이 사라지고 발송 완료로 상태변경

관리자 페이지 내 Q&A 목록 - 답변이 등록되지 않은 경우 답변 등록 가능

상품 상세페이지 내 Q&A에서도 답변 등록 가능

관리자로 로그인 할 경우 상품 등록 버튼이 생성됨

상품등록 페이지 - 이미지를 선택하면 선택한 이미지가 화면에 출력되고 삭제버튼 클릭 시 삭제됨

관리자인 경우 수정 삭제 버튼 생성됨

 

사진 출처

출처 Freepik

작가 grmarc 출처 Freepik

출처 Freepik

Image by azerbaijan_stockers on Freepik