Git Product home page Git Product logo

grayscale-bookhouse's Introduction

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

💻 프로젝트 소개

🕰 개발 기간

2023.08.20 ~ 2023.09.04

📚 개발 환경

Java Bootstrap JavaScript jquery ApacheTomcat PostgreSQL


📌 프로젝트 산출물

1. Usecase Diagram

usecasediagram1 PIC1 : 회원 관리 USECASE DIAGRAM
usecasediagram2 PIC2 : 마이페이지 USECASE DIAGRAM
usecasediagram3 PIC3 : 개인정보 변경 USECASE DIAGRAM
usecasediagram4 PIC4 : 주문 조회 USECASE DIAGRAM
usecasediagram5 PIC5 : 장바구니 USECASE DIAGRAM
usecasediagram6 PIC6 : 관리자 페이지 USECASE DIAGRAM
usecasediagram7 PIC7 : 배송 정보 관리 USECASE DIAGRAM
usecasediagram8 PIC8 : 상품 구매 USECASE DIAGRAM

2. 화면 설계도

3. ERD

ERD

4. Class Diagram

ERD

📱 주요 기능

1. 회원 기능

(1) 회원가입

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

📷 View

image PIC1 : 회원 약관 동의
image PIC2 : 회원가입

(2) 로그인

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

📷 View

image PIC1 : 로그인

(3) 마이페이지

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

📷 View

image PIC1 : 개인정보 확인
image PIC2 : 개인정보 변경
image PIC3 : 주문/배송 조회
image PIC4 : 리뷰 관리

2. 관리자 기능

(1) 관리자 페이지

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

📷 View

image PIC1 : Dashboard

(2) 상품 관리

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

📷 View

image PIC1 : 상품 목록
image PIC2 : 상품 등록
image PIC3 : 상품 입고

(3) 배송 정보 관리

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

📷 View

image PIC1 : 배송 정보 관리
image PIC2 : 배송정보 변경

(4) 리뷰 관리

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

📷 View

image PIC1 : 리뷰 관리

3. 고객지원 기능

(1) 공지사항

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

📷 View

image PIC1 : 공지사항 목록
image PIC2 : 공지사항 글 상세 보기
image PIC3 : 공지사항 글 수정

(2) QnA

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

📷 View

image PIC1 : QnA 목록
image PIC2 : 질문 글 상세 보기
image PIC3 : 답변 글 상세 보기

4. 상품 판매 기능

(1) 상품 목록

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

📷 View

image PIC1 : 카테고리 별 상품 목록
image PIC2 : 인기 상품 목록
image PIC3 : 신상품 목록

(2) 상품 상세 페이지

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

📷 View

image PIC1 : 상품 상세 보기(1)
image PIC2 : 상품 상세 보기(2)
image PIC3 : 상품 상세 보기(3)
image PIC4 : 상품 상세 보기의 리뷰

(3) 장바구니 페이지

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

📷 View

image PIC1 : 장바구니 페이지

(4) 결제 페이지

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

📷 View

image PIC1 : 결제 페이지(1)
image PIC2 : 결제 페이지(2)
image PIC3 : iamport 결제창

(5) 리뷰 작성 페이지

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

📷 View

image PIC1 : 리뷰 작성

grayscale-bookhouse's People

Contributors

shinyeeun789 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.