교재 판매 쇼핑몰 웹 애플리케이션 개발 프로젝트입니다.

💻 프로젝트 소개

🕰 개발 기간

2023.08.20 ~ 2023.09.04

📚 개발 환경

📌 프로젝트 산출물

1. Usecase Diagram

PIC1 : 회원 관리 USECASE DIAGRAM

PIC2 : 마이페이지 USECASE DIAGRAM

PIC3 : 개인정보 변경 USECASE DIAGRAM

PIC4 : 주문 조회 USECASE DIAGRAM

PIC5 : 장바구니 USECASE DIAGRAM

PIC6 : 관리자 페이지 USECASE DIAGRAM

PIC7 : 배송 정보 관리 USECASE DIAGRAM

PIC8 : 상품 구매 USECASE DIAGRAM

2. 화면 설계도

3. ERD

4. Class Diagram

📱 주요 기능

1. 회원 기능

(1) 회원가입

• 아이디 중복 체크, 비밀번호와 비밀번호 확인의 값이 동일한지 체크한 후, 모든 조건이 true인 경우에만 회원가입할 수 있도록 구현
• 정규표현식 : 아이디(영문소문자, 숫자 조합 8글자 이상), 비밀번호(8자~16자, 영문소문자/숫자/특수문자 1개 이상)
• 다음 주소 API를 활용하여 사용자의 주소 정보를 가져와 postgreSQL에 저장
• 비밀번호는 AES256으로 암호화하여 데이터베이스에 저장

📷 View

PIC1 : 회원 약관 동의

PIC2 : 회원가입

(2) 로그인

• grayscale의 기능을 사용하기 위해서는 로그인 필수
• 입력받은 아이디와 비밀번호를 데이터베이스의 데이터와 비교하여 값이 일치하면 성공, 일치하지 않으면 실패

📷 View

PIC1 : 로그인

(3) 마이페이지

• 로그인한 사용자의 개인 정보 변경 가능
• 주문/배송 목록 화면 구현
• 취소/반품/교환 목록 화면 구현
• 내가 작성한 리뷰 목록 기능 구현
• 리뷰 작성 가능한 상품 목록 기능 구현

📷 View

PIC1 : 개인정보 확인

PIC2 : 개인정보 변경

PIC3 : 주문/배송 조회

PIC4 : 리뷰 관리

2. 관리자 기능

(1) 관리자 페이지

• chart.js를 활용하여 매출액 추이, 상품 판매 건수 출력
• 상품 관리, 리뷰 관리 페이지로 이동 가능한 메뉴바 출력

📷 View

PIC1 : Dashboard

(2) 상품 관리

• 상품 목록, 카테고리, 입고가, 재고, 현재 가격의 정보를 담고 있는 표를 출력하는 화면 구현
• 상품 이미지, 상품명, 상품 설명, 상품 가격, 상품의 목차 데이터를 입력받아 상품을 추가하는 기능 구현
• 상품 테이블에 존재하는 상품 목록 중 입고하고자 하는 상품의 입고 수량과 입고 가격을 입력한 후 입고 테이블에 저장

📷 View

PIC1 : 상품 목록

PIC2 : 상품 등록

PIC3 : 상품 입고

(3) 배송 정보 관리

• 결제완료 주문건과 배송상태 변경건의 상품명을 클릭할 경우, 송장번호와 배송 정보를 업데이트 할 수 있는 기능 구현

📷 View

PIC1 : 배송 정보 관리

PIC2 : 배송정보 변경

(4) 리뷰 관리

• 상품에 대한 리뷰 목록을 출력하는 화면 구현
• 관리자가 삭제하고자 하는 리뷰를 리뷰 테이블에서 삭제할 수 있는 기능 구현

📷 View

PIC1 : 리뷰 관리

3. 고객지원 기능

(1) 공지사항

• 공지사항의 글 작성, 글 수정, 글 상세 보기, 글 삭제 기능 구현
• 관리자만 공지사항 글 작성, 글 수정, 글 삭제 기능에 접근 가능

📷 View

PIC1 : 공지사항 목록

PIC2 : 공지사항 글 상세 보기

PIC3 : 공지사항 글 수정

(2) QnA

• QnA의 글 작성, 글 상세 보기, 글 삭제 기능 구현
• 질문글은 일반 사용자, 관리자 모두 등록 가능
• 답변글은 관리자만 등록 가능

📷 View

PIC1 : QnA 목록

PIC2 : 질문 글 상세 보기

PIC3 : 답변 글 상세 보기

4. 상품 판매 기능

(1) 상품 목록

• 카테고리 별 상품의 목록 출력
• 인기 상품 목록 출력
• 신상품 목록 출력

📷 View

PIC1 : 카테고리 별 상품 목록

PIC2 : 인기 상품 목록

PIC3 : 신상품 목록

(2) 상품 상세 페이지

• 상품 이미지, 상품명, 상품 설명, 상품 가격, 상품의 목차와 상품의 리뷰를 출력하는 화면 구현
• 상품은 반드시 장바구니에 담기 후에만 결제 가능

📷 View

PIC1 : 상품 상세 보기(1)

PIC2 : 상품 상세 보기(2)

PIC3 : 상품 상세 보기(3)

PIC4 : 상품 상세 보기의 리뷰

(3) 장바구니 페이지

• 사용자가 장바구니에 담은 상품명, 상품 이미지, 상품 가격, 상품 개수, 상품 총 가격, 결제 금액, 구매하기 버튼을 출력하는 화면 구현
• 장바구니 추가 시 추가하고자 하는 상품이 이미 장바구니에 있다면 개수를 UPDATE하고, 같은 상품이 없다면 INSERT하도록 구현
• 상품의 가격과 상품의 개수로 상품별 총 금액을 계산하여 출력
• 상품별 총 금액을 합하여 총 결제 금액 출력

📷 View

PIC1 : 장바구니 페이지

(4) 결제 페이지

• 주문자 정보와 배송지 정보를 출력하는 결제 화면 구현
• 배송지 정보를 주문자 정보와 다르게 설정할 수 있도록 구현
• 주문자 정보와 동일 버튼을 클릭하면 현재 로그인되어 있는 사용자의 정보가 배송지 정보에 자동으로 입력됨
• 결제하기 버튼을 누르면 iamport의 kicc와 연동되어 결제창 출력됨
• 결제 완료 후 구매하기 버튼을 눌러 결제 데이터, 배송 데이터, 출고 데이터를 데이터베이스에 입력하여 결제 처리

📷 View

PIC1 : 결제 페이지(1)

PIC2 : 결제 페이지(2)

PIC3 : iamport 결제창

(5) 리뷰 작성 페이지

• 마이페이지의 리뷰 관리 페이지에서 구매확정 버튼 클릭 시 접근 가능
• 입력된 리뷰 글을 리뷰 테이블에 저장

📷 View

PIC1 : 리뷰 작성