jsp hyukshop

JSP 인터넷 쇼핑몰 프로젝트

프로젝트 기간 : 21.01.13 ~ 21.01.29

프로젝트 수행자 : 정민혁(chmh0805@naver.com)

EC2 배포 링크 : http://15.**164.1*66.37/shop 무료 라이센스 만료로 EC2 서버 배포는 중단합니다.

시연 영상 : https://y*o*ut*u.be/UMdEGoW_ulQ

환경

• Windows 10
• JDK 1.8
• Tomcat 9.0
• STS Tool
• MySQL 8.0
• Lombok
• Gson
• JSTL
• Naver Lucy Filter
• SHA-256
• Encoding : UTF-8

디자인 및 상품, 상품이미지, 상품설명 참고 사이트

1. 브랜디

• https://www.*br*andi*.co.kr/

2. 트렌비

• https://www.tr**e*nbe.com/

3. 발란

• https://www.balaan.***co.kr/

참고사항

• 결제화면에서 결제 완료 시 실제 결제가 이루어지며, 정오 전에 자동 환불처리 됩니다.

사용 API

1. 카카오로그인 API

• https://developers.*k*ak*ao.com/product/kakaoLogin

2. 네이버로그인 API

• https://nid.n**av*er.com/user2/campaign/introNaverIdLogin.nhn
• 네이버, 카카오 로그인의 경우 최초 로그인 시 정보입력 창으로 이동하여 입력받은 값과 네이버/카카오 서버로부터 전달받은 id값을 user 테이블에 insert하였습니다.
• 이후 로그인 시에는 user 테이블에 저장해 둔 카카오 고유id, 네이버 고유id 값으로 SELECT 하여 로그인되도록 구현하였습니다.

3. 아임포트 API (결제 서비스)

• https://www.iampo*r**t.kr/getstarted

4. summernote API

• https://summerno***te.org/

5. sweetalert2

• https://sweetalert2.***github.io/

MySQL 데이터베이스 생성 및 사용자 생성

CREATE USER \'shopuser\'@\'%\' identified by \'shop0805\';
GRANT ALL privileges on *.* TO \'shopuser\'@\'%\';
create database shopdb;

MySQL 테이블 생성

use shopdb;

CREATE TABLE product(
    id int primary key auto_increment,
    productName varchar(120) unique not null,
    companyId int not null,
    price long not null,
    soldCount int default 0,
    detail longtext not null,
    imgUrl_1 varchar(100) not null,
    imgUrl_2 varchar(100),
    imgUrl_3 varchar(100),
    imgUrl_4 varchar(100),
    writerId int,
    createDate timestamp default now(),
    updateDate timestamp default now()
);

CREATE TABLE user(
    id int primary key auto_increment,
    username varchar(20) unique default null,
    name varchar(20) not null,
    email varchar(50) not null,
    phone varchar(13) not null,
    address varchar(120) not null,
    password char(64) not null,
    kakaoId long,
    naverId long,
    auth varchar(10) default \'user\',
    createDate timestamp default now()
);

CREATE TABLE company (
    id int primary key auto_increment,
    name varchar(40) unique not null,
    url varchar(80) unique
);

CREATE TABLE favorite(
    id int primary key auto_increment,
    userId int not null,
    productId int not null,
    createDate timestamp default now()
);

CREATE TABLE cart(
    id int primary key auto_increment,
    userId int not null,
    productId int not null,
    createDate timestamp default now()
);

CREATE TABLE qna(
    id int primary key auto_increment,
    userId int not null,
    productId int not null,
    optionNo int not null,
    password varchar(4),
    detail longtext,
    createDate timestamp default now()
);

CREATE TABLE review(
    id int primary key auto_increment,
    userId int not null,
    productId int not null,
    detail longtext not null,
    createDate timestamp default now(),
    updateDate timestamp default now()
);

구현한 기능들

1. 회원가입

• 회원가입 시 입력한 비밀번호는 SHA-256으로 인코딩되어 DB에 저장됩니다.

2. 로그인

3. 카카오 로그인

4. 네이버 로그인

네이버/카카오 최초 로그인 시 추가정보 입력 요구

5. 로그아웃

6. 메인페이지

• Carousel을 활용하였습니다.
• grid Layout을 활용하였습니다.

7. 상단바 브랜드별 메뉴

• SELECT문을 활용하여 company 테이블의 모든 회사명을 불러옵니다. (회사가 추가되어도 따로 수정할 필요가 없습니다.)
• 모든 페이지에 header와 상단바가 존재하여, filter를 사용하여 모든 페이지에서 사용할 수 있게 하였습니다.

8. 브랜드별 메뉴 페이지

9. 검색기능

• 검색어를 포함하고 있는 상품명과 회사의 모든 결과를 보여줍니다.

10. 판매량 순 랭킹 페이지

• 유저가 상품을 구매하면 product 테이블의 구매수가 오르게 되고, ORDER BY soldCount DESC을 사용하여 판매량 순으로 조회한 결과입니다.

11. 전체상품 페이지에서 특정 브랜드 별

• 좌측에 라디오박스의 브랜드 중 클릭된 브랜드의 상품만 보는 기능입니다.

12. 로그인 시 상단 메뉴 추가

• 유저의 등급이 admin 이상이면 상품등록, 상품수정 메뉴가 생깁니다.
• 유저의 등급이 기본 이상이면 찜, 장바구니, 정보수정, 로그아웃 메뉴가 생깁니다.

13. 정보수정 클릭 시 비밀번호 재확인

• 유저가 자신이 설정한 비밀번호를 입력하면, 입력받은 값을 SHA-256 인코딩을 적용하여 DB에 저장된 값과 비교합니다.

14. 회원정보 수정

15. 상세상품 페이지 – 상단

• product 테이블의 값을 select 하여 보여줍니다.
• 바로구매 버튼 클릭 시 결제페이지로 이동합니다. (로그인 시에만)
• 장바구니 버튼 클릭 시 장바구니에 추가됩니다. (로그인 시에만)
• 찜 버튼 클릭 시 찜목록에 추가됩니다. (로그인 시에만)
• 로그인 상태에서 버튼 클릭 시
• 비로그인 상태에서 버튼 클릭 시
• 회원가입 클릭 시 회원가입 페이지로 이동합니다.

16. 상세상품 페이지 – 탭

• 각 탭을 클릭하면, 해당 탭이 존재하는 위치로 이동합니다.
• sticky position을 활용하였습니다.
• 각 탭이 위치한 곳으로 이동하면, 해당 탭의 아래에 검은줄이 표시됩니다.

17. 상세상품 페이지 – 리뷰탭과 Q&A탭

• 제목을 클릭하면 상세 내용 페이지로 이동합니다.
• Q&A의 경우 작성 시 비밀번호를 입력한 경우, 제목과 작성자명을 안보이게 합니다.
• 우측 하단의 화살표를 누르면 페이지의 최상단으로 즉시 이동합니다.

18. 상세 리뷰, Q&A 페이지

19. Q&A 중 비밀글 클릭 시

• 비밀번호 확인 후 일치하면 상세 페이지로 이동합니다.

20. 리뷰 전체보기 클릭 시

• 보고있던 상품 내용을 함께 불러오며, 상품 사진 클릭 시 상품 페이지로 이동할 수 있습니다.

21. Q&A 전체보기 클릭 시

• 보고있던 상품 내용을 함께 불러오며, 상품 사진 클릭 시 상품 페이지로 이동할 수 있습니다.
• 비밀글은 여기서도 가려집니다.

22. 리뷰 작성하기 클릭 시

• 사진, 동영상 기능을 제외한 summernote를 활용하였습니다.

23. Q&A 작성하기 클릭 시

• 사진, 동영상 기능을 제외한 summernote를 활용하였습니다.

24. 우측 상단 메뉴 중 찜

• 회원이 찜을 한 상품들만 보여집니다.
• 좌측 라디오박스에도 회원이 찜을 한 브랜드만 보여집니다.

25. 우측 상단 메뉴 중 장바구니

• 회원이 장바구니에 추가한 상품들만 보여집니다.
• 상품목록의 하트 버튼을 클릭하여 찜 추가/삭제 기능을 사용할 수 있습니다.
• 상품목록 우측의 장바구니 버튼을 클릭하여 장바구니 삭제 기능을 사용할 수 있습니다.
• 주문하기 클릭 시 결제 페이지로 이동합니다.

26. 결제 페이지

• 장바구니에서 주문하기 클릭 시 장바구니의 전체 상품을 가져옵니다.
• 상품 상세 페이지에서 바로구매 클릭 시 해당 상품만 가져옵니다.
• 주문 완료하기 클릭 시 결제 페이지로 이동합니다.

27. 결제 화면

28. 결제 실패 시

• 오류 내용을 포함한 알림창이 뜹니다.

29. 결제 성공 시

• 성공 내역을 포함한 알림창이 뜨며, 확인 클릭 시 메인페이지로 이동합니다.

30. 아임포트 내역

• 결제 성공/실패 내역을 볼 수 있습니다.